/* forbidden-imperial.city — 5 files, joined 2026-10-31 18:40 */

/* ---- tokens.css ---- */
/* ============================================================
   forbidden-imperial.city — design tokens
   Location: public_html/assets/css/tokens.css

   The only file in the palace that contains a colour value.
   Everything else refers to these by name.
   ============================================================ */

:root {

  /* ---- palette ---- */
  --ink:      #0D1110;
  --surface:  #161B18;
  --border:   #2F2A22;
  --lacquer:  #6E1F14;
  --gold:     #C58532;
  --lantern:  #FDB15C;
  --jade:     #2F4F42;
  --moon:     #8C3A2B;
  --mist:     #9A8B79;
  --blossom:  #F2E4D6;

  /* Raised surfaces. Mixed from the palette rather than guessed,
     so a change to --ink or --surface carries through. */
  --surface-2: color-mix(in srgb, var(--surface) 86%, var(--blossom));
  --surface-3: color-mix(in srgb, var(--surface) 78%, var(--blossom));
  --veil:      color-mix(in srgb, var(--ink) 82%, transparent);

  /* ---- the three hall colours (Drop 84): Precious Curios' liveries, kept
     by the Sovereign as the only colours beyond the palette ---- */
  --hall-sapphire:      #9BAFDE;
  --hall-sapphire-deep: #3555A0;
  --hall-bl:            #E49598;
  --hall-bl-deep:       #99272B;
  --hall-oddities:      #B9CC9A;
  --hall-oddities-deep: #3F4A2E;

  /* Services' own marks, on their own doors only. */
  --brand-spotify: #1DB954;
  --brand-apple:   #FA586A;

  /* ---- accents, addressed by name from the wing registry ---- */
  --accent-gold:    var(--gold);
  --accent-lantern: var(--lantern);
  --accent-jade:    #4E8F73;   /* --jade is too dark to read as text */
  --accent-lacquer: #B8422E;   /* --lacquer likewise */
  --accent-moon:    var(--moon);
  --accent-mist:    var(--mist);

  /* The wing currently entered sets this. Everything accented
     inside a wing reads from it and needs no rule of its own. */
  --accent: var(--accent-gold);

  /* Drop 138, at her word: one progress bar for the whole palace - green into gold. */
  --progress-from: color-mix(in srgb, var(--accent-jade) 48%, var(--mist));
  --progress-to:   color-mix(in srgb, var(--gold) 42%, var(--hall-oddities));
  --progress-fill: linear-gradient(90deg, var(--progress-from), var(--progress-to));

  /* ---- states ---- */
  --state-pass: #4E8F73;
  --state-warn: var(--gold);
  --state-fail: var(--moon);
  --state-idle: var(--border);

  /* ---- type ---- */
  --font-serif: ui-serif, Georgia, "Songti SC", "Noto Serif", "Times New Roman", serif;
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-cjk:   "Songti SC", "Noto Serif CJK SC", "PingFang SC", "Microsoft YaHei", var(--font-serif);

  /* One ramp for the whole palace (Drop 84). Every text size in every
     wing is one of these: capitals and eyebrows, labels, small text,
     buttons and body, reading text, lead, section headings, page titles
     and big figures, display, the banner title. */
  --size-3xs: 0.66rem;
  --size-2xs: 0.7rem;
  --size-xs:  0.78rem;
  --size-sm:  0.86rem;
  --size-md:  0.94rem;
  --size-lg:  1.1rem;
  --size-xl:  1.4rem;
  --size-2xl: 1.9rem;
  --size-3xl: 2.6rem;
  --size-4xl: 3.1rem;

  --leading-tight: 1.25;
  --leading-body:  1.6;

  /* ---- space ---- */
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;

  /* ---- text size: the Larger appearance zooms the page by this much ---- */
  --text-zoom: 1;

  /* ---- shape ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --hairline: 1px solid var(--border);
  --shadow-low:  0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-mid:  0 2px 6px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.28);
  --shadow-high: 0 4px 12px rgb(0 0 0 / 0.5), 0 22px 56px rgb(0 0 0 / 0.42);

  /* ---- frame ---- */
  --sidebar-width: 16.5rem;
  --topbar-height: 3.5rem;
  --content-max: 68rem;
  --orb-size: 56px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --mid: 200ms;
  --slow: 250ms;

  --z-banner: 1;
  --z-sidebar: 40;
  --z-corner: 60;
  --z-toast: 70;
  --z-modal: 80;

  /* ---- the Imperial Daybook (Drop 155): her planner's inks, the jade night ---- */
  --db-tone-01: #000000;
  --db-tone-02: #101D17;
  --db-tone-03: #173329;
  --db-tone-04: #302C3A;
  --db-tone-05: #392C2A;
  --db-tone-06: #273A2D;
  --db-tone-07: #354D3D;
  --db-tone-08: #74362C;
  --db-tone-09: #44503B;
  --db-tone-10: #584B32;
  --db-tone-11: #395744;
  --db-tone-12: #665127;
  --db-tone-13: #4B603F;
  --db-tone-14: #765C2C;
  --db-tone-15: #A4443B;
  --db-tone-16: #81594D;
  --db-tone-17: #61715C;
  --db-tone-18: #687650;
  --db-tone-19: #936956;
  --db-tone-20: #78896C;
  --db-tone-21: #C47865;
  --db-tone-22: #B48670;
  --db-tone-23: #789AAF;
  --db-tone-24: #A79A6C;
  --db-tone-25: #C99385;
  --db-tone-26: #83B29B;
  --db-tone-27: #9DADA0;
  --db-tone-28: #BAAA7C;
  --db-tone-29: #B5B396;
  --db-tone-30: #D3AD69;
  --db-tone-31: #BDB497;
  --db-tone-32: #D9ABA1;
  --db-tone-33: #D5B87E;
  --db-tone-34: #C8B6D5;
  --db-tone-35: #B7C3AE;
  --db-tone-36: #CBBFAF;
  --db-tone-37: #DFBDB5;
  --db-tone-38: #DCC491;
  --db-tone-39: #D6CBB1;
  --db-tone-40: #C0D2B0;
  --db-tone-41: #E5D2A1;
  --db-tone-42: #E6D4CE;
  --db-tone-43: #D6DFD0;
  --db-tone-44: #D8DEE8;
  --db-tone-45: #EEE1C2;
  --db-tone-46: #F7F1DC;
  --db-tone-47: #F9F6EB;
  --db-tone-48: #FFFFFF;
  /* Drop 158: the tones her Courts add - their leaf greens, old golds, a wisteria and a deep olive */
  --db-tone-49: #789C50;
  --db-tone-50: #A28A3B;
  --db-tone-51: #A7B171;
  --db-tone-52: #A394BC;
  --db-tone-53: #A78254;
  --db-tone-54: #829057;
}

/* Accent classes. A wing sets one of these on the app element and
   every accented thing beneath it follows, with no per-wing rules. */
[data-accent="gold"]    { --accent: var(--accent-gold); }
[data-accent="lantern"] { --accent: var(--accent-lantern); }
[data-accent="jade"]    { --accent: var(--accent-jade); }
[data-accent="lacquer"] { --accent: var(--accent-lacquer); }
[data-accent="moon"]    { --accent: var(--accent-moon); }
[data-accent="mist"]    { --accent: var(--accent-mist); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- shell.css ---- */
/* ============================================================
   forbidden-imperial.city — the frame
   Location: public_html/assets/css/shell.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--blossom);
  font-family: var(--font-sans);
  font-size: var(--size-md);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }

.glyph { font-family: var(--font-serif); color: var(--gold); line-height: 1; }
.cjk   { font-family: var(--font-cjk); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The hidden attribute must always win.
   Any element carrying a display rule of its own — the modal backdrop,
   Qianlong, anything using .only-narrow — would otherwise override the
   browser's built-in [hidden] rule and stay on screen. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; border-radius: 4px; }

/* ---------- buttons ---------- */

button { font: inherit; cursor: pointer; }

.primary, .ghost, .icon-button {
  font-family: inherit;
  border-radius: var(--radius-sm);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.primary {
  background: var(--accent);
  color: var(--ink);
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.15rem;
}
.primary:hover { background: color-mix(in srgb, var(--accent) 82%, var(--blossom)); }

.ghost {
  background: transparent;
  color: var(--mist);
  border: var(--hairline);
  padding: 0.5rem 1rem;
  font-size: var(--size-sm);
}
.ghost:hover { background: var(--surface); color: var(--blossom); }

.icon-button {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: transparent; border: none; color: var(--mist);
  padding: 0;
}
.icon-button svg { width: 20px; height: 20px; }
.icon-button:hover { color: var(--blossom); background: var(--surface); }

/* ============================================================
   The gate
   ============================================================ */

.gate { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }

.gate-card {
  width: 100%; max-width: 22rem;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-mid);
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
}
.gate-card .glyph { font-size: var(--size-3xl); display: block; margin-bottom: var(--space-2); }
.gate-card h1 { font-size: var(--size-lg); margin-bottom: var(--space-4); }
.gate-card label {
  display: block; text-align: left;
  color: var(--mist); font-size: var(--size-sm); margin-bottom: var(--space-1);
}
.gate-card input {
  width: 100%; background: var(--ink); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem; font: inherit; margin-bottom: var(--space-3);
}
.gate-card button {
  width: 100%; background: var(--gold); color: var(--ink);
  border: none; border-radius: var(--radius-sm); padding: 0.65rem;
  font-weight: 600;
}
.gate-card button:hover { background: var(--lantern); }
.gate-message { min-height: 1.4rem; margin-top: var(--space-3);
  font-size: var(--size-sm); color: var(--lantern); }

/* ============================================================
   The frame
   ============================================================ */

.app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100dvh; }

/* ---------- sidebar ---------- */

.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--ink) 55%, var(--ink));
  border-right: var(--hairline);
  z-index: var(--z-sidebar);
}

.brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-bottom: var(--hairline);
}
.brand .glyph { font-size: 1.75rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-sm); color: var(--blossom);
}
.brand-text small { font-family: var(--font-cjk); font-size: var(--size-2xs); color: var(--mist); }

.nav { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-2); }

.nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--blossom) 74%, var(--ink));
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-item:hover { background: var(--surface); color: var(--blossom); }

.nav-item.is-active {
  background: var(--surface);
  color: var(--blossom);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item.is-active .nav-icon { color: var(--accent); }

.nav-icon { width: 24px; height: 24px; flex: none; color: inherit; }

.nav-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.nav-name { font-size: var(--size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chinese { font-family: var(--font-cjk); font-size: var(--size-2xs); color: var(--mist); }

.nav-soon {
  font-size: var(--size-2xs);
  color: color-mix(in srgb, var(--mist) 80%, var(--blossom));
  background: color-mix(in srgb, var(--border) 45%, transparent);
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem; flex: none; line-height: 1.5;
}
/* A planned wing is still perfectly legible. The pill says "soon";
   the text does not need to whisper it as well. */
.nav-item.is-planned { color: var(--mist); }
.nav-item.is-planned .nav-icon { opacity: 0.6; }
.nav-item.is-planned:hover { color: var(--blossom); }
.nav-item.is-planned:hover .nav-icon { opacity: 1; }

.nav-divider {
  height: 1px; background: var(--border);
  margin: var(--space-3) 0.6rem var(--space-2);
}

/* the sub-menu that replaces the wing list */

.section-back {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; background: transparent; border: none;
  color: var(--blossom); text-align: left;
  padding: 0.45rem 0.6rem var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: var(--hairline);
}
.section-back:hover .nav-name { color: var(--accent); }
.section-back .nav-icon { color: var(--mist); width: 20px; height: 20px; }
.section-back-label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.section-back .nav-name {
  font-family: var(--font-serif); font-size: var(--size-sm);
  transition: color var(--fast) var(--ease);
}

.section-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--blossom) 74%, var(--ink));
  font-size: var(--size-sm);
}
.section-item:hover { background: var(--surface); color: var(--blossom); }
.section-item.is-active { background: var(--surface); color: var(--blossom);
  box-shadow: inset 2px 0 0 var(--accent); }
.section-item.is-planned { color: var(--mist); }
.section-item.is-planned:hover { color: var(--blossom); }
.section-item .nav-chinese { font-size: var(--size-2xs); }

.sidebar-foot { padding: var(--space-3); border-top: var(--hairline); }
.sidebar-foot .ghost { width: 100%; }

/* Diagnostics is chrome, not a wing. It belongs down here with sign out. */
.foot-link {
  display: block; text-align: center;
  color: var(--mist); font-size: var(--size-xs);
  padding: 0.35rem 0; margin-bottom: var(--space-2);
  transition: color var(--fast) var(--ease);
}
.foot-link:hover { color: var(--blossom); }

/* ---------- stage ---------- */

.stage { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--topbar-height);
  padding: 0 var(--space-4);
  position: sticky; top: 0;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--hairline);
  z-index: 30;
}
.topbar-title { font-size: var(--size-md); color: var(--blossom); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.only-narrow { display: none; }

/* ---------- banner ---------- */

.banner { position: relative; line-height: 0; z-index: var(--z-banner); }
/* Every banner is drawn 3:1, so the strip takes that shape and the whole
   graphic shows. On very wide screens it stops at 32rem and crops a
   little rather than filling the screen. */
.banner img {
  width: 100%; height: auto; aspect-ratio: 3 / 1; max-height: 32rem;
  object-fit: cover; object-position: center 38%;
  display: block;
}
/* fades into the page rather than stopping at an edge */
/* Shorter and later than it was, because a banner may carry words and
   the old fade started halfway up the image. */
.banner::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 26%;
  background: linear-gradient(to bottom,
    transparent, color-mix(in srgb, var(--ink) 65%, transparent) 55%, var(--ink));
  pointer-events: none;
}

.view {
  flex: 1;
  width: 100%; max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
}
.banner + .view { margin-top: calc(var(--space-4) * -1); }
.view:focus { outline: none; }

/* ============================================================
   Page furniture the wings will reuse
   ============================================================ */

.page-head { margin-bottom: var(--space-4); }
.page-head h2 { font-size: var(--size-2xl); }
.page-head .chinese {
  font-family: var(--font-cjk); font-size: var(--size-lg);
  color: var(--accent); margin-left: var(--space-2);
}
.page-head p {
  color: color-mix(in srgb, var(--mist) 70%, var(--blossom));
  font-size: var(--size-sm); margin-top: var(--space-1);
}

.panel {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.panel h3 { font-size: var(--size-lg); margin-bottom: var(--space-2); }

.empty {
  display: grid; place-items: center; gap: var(--space-2);
  text-align: center; padding: var(--space-6) var(--space-4);
  color: var(--mist);
}
.empty .glyph { font-size: var(--size-3xl); opacity: 0.45; }
.empty h3 { font-size: var(--size-lg); color: var(--blossom); }
.empty p { font-size: var(--size-sm); max-width: 26rem;
  color: color-mix(in srgb, var(--mist) 70%, var(--blossom)); }

.wing-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.wing-card {
  display: block;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md); padding: var(--space-3);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.wing-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.wing-card.is-planned .nav-icon { opacity: 0.6; }
.wing-card.is-planned:hover { transform: none; }
.wing-card.is-planned:hover .nav-icon { opacity: 1; }
.wing-card .nav-soon { display: inline-block; margin-top: var(--space-2); }
.wing-card .nav-icon { width: 40px; height: 40px; color: var(--accent); margin-bottom: var(--space-2); }
.wing-card h3 { font-size: var(--size-md); }
.wing-card .chinese { font-family: var(--font-cjk); font-size: var(--size-xs); color: var(--mist); }

/* diagnostics rows, carried over from the foundation */
.rows { display: grid; }
.row {
  display: grid; grid-template-columns: 0.9rem 13rem 1fr; gap: var(--space-2);
  padding: 0.45rem 0; align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.row:last-child { border-bottom: none; }
.row .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-top: 0.5rem; background: var(--state-idle); }
.row .dot.pass { background: var(--state-pass); }
.row .dot.warn { background: var(--state-warn); }
.row .dot.fail { background: var(--state-fail); }
.row .label { color: color-mix(in srgb, var(--mist) 70%, var(--blossom)); font-size: var(--size-sm); }
.row .value { font-family: var(--font-mono); font-size: var(--size-xs); word-break: break-word; }
.row .note { display: block; font-family: var(--font-sans); color: var(--mist); margin-top: 0.1rem; }
.rows-group { margin-bottom: var(--space-4); }
.rows-group h4 {
  font-size: var(--size-2xs); font-weight: 600; color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 var(--space-1);
}

/* ============================================================
   Narrow
   ============================================================ */

@media (max-width: 60rem) {
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: min(84vw, var(--sidebar-width));
    transform: translateX(-100%);
    transition: transform var(--mid) var(--ease-out);
    box-shadow: var(--shadow-high);
  }
  .app.menu-open .sidebar { transform: translateX(0); }

  .app.menu-open::after {
    content: ""; position: fixed; inset: 0;
    background: var(--veil); z-index: 35;
  }

  .only-narrow { display: grid; }
  .topbar { padding: 0 var(--space-2); }
  .view { padding: var(--space-3) var(--space-3) var(--space-6); }

  /* Drop 58: the banner shows at every width, a phone included. */
  .hero { width: calc(100% - 2 * var(--space-3)); margin-top: var(--space-3); }

  .row { grid-template-columns: 0.9rem 1fr; }
  .row .label, .row .value { grid-column: 2; }
}

/* ---------- the scheduled jobs, on Foundations ---------- */

.cron-job {
  padding: var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.cron-job:first-of-type { border-top: none; }

.cron-job-head {
  display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap;
}
.cron-job-head strong { font-weight: 500; }

.cron-why {
  font-size: var(--size-xs); color: var(--mist);
  margin-top: var(--space-1); margin-bottom: var(--space-2);
}

.cron-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.cron-label {
  flex: none; width: 4.5rem;
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.cron-value {
  flex: 1; min-width: 0;
  background: var(--ink); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono); font-size: var(--size-2xs);
}
.cron-row .ghost { padding: 0.3rem 0.7rem; font-size: var(--size-2xs); flex: none; }

@media (max-width: 40rem) {
  .cron-row { flex-wrap: wrap; }
  .cron-label { width: 100%; }
}

/* ---------- backups, on Foundations ---------- */

.backup-list { display: grid; margin-top: var(--space-3); }

.backup-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.backup-row:first-child { border-top: none; }

.backup-name { flex: 1; min-width: 0; }
.backup-name span { font-size: var(--size-sm); font-variant-numeric: tabular-nums; }
.backup-name small { display: block; font-size: var(--size-2xs); color: var(--mist); }

.backup-get {
  flex: none; padding: 0.3rem 0.75rem; font-size: var(--size-2xs);
  border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--mist); background: transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.backup-get:hover { color: var(--blossom); border-color: var(--accent); }

/* ============================================================
   Halls — a wing with rooms beneath it
   ============================================================ */

.section-item.is-hall { justify-content: flex-start; gap: var(--space-2); }
.section-count {
  margin-left: auto; flex: none;
  font-size: 0.6rem; color: var(--mist);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.4rem;
  font-variant-numeric: tabular-nums;
}
.section-item.is-active .section-count { color: var(--accent); border-color: var(--accent); }

/* Two to a row, so each hall's own view of itself is large enough
   to be worth showing. */
.hall-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}

.hall-card {
  display: block; overflow: hidden;
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.hall-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.hall-card.is-planned { border-left-color: var(--border); }

.hall-card-art { position: relative; aspect-ratio: 76 / 30; overflow: hidden; }
.hall-card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--slow) var(--ease), filter var(--slow) var(--ease);
}
.hall-card:hover .hall-card-art img { transform: scale(1.04); }

/* The image fades into the card rather than stopping at a hard edge. */
.hall-card-art::after {
  content: ""; position: absolute; inset: 40% 0 0 0;
  background: linear-gradient(to bottom,
    transparent, color-mix(in srgb, var(--surface) 70%, transparent) 60%, var(--surface));
  pointer-events: none;
}
.hall-card.is-planned .hall-card-art img { filter: grayscale(0.55) brightness(0.72); }
.hall-card.is-planned:hover .hall-card-art img { filter: grayscale(0.2) brightness(0.9); }

.hall-card-body { padding: 0 var(--space-4) var(--space-4); margin-top: -1.5rem; position: relative; }

.hall-card-head { display: flex; align-items: baseline; gap: var(--space-2); }
.hall-card-head strong {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-lg);
}
.hall-card-head .cjk { font-size: var(--size-sm); color: var(--accent); }
.hall-card.is-planned .hall-card-head .cjk { color: var(--mist); }

.hall-card-blurb {
  font-size: var(--size-sm); color: var(--mist); margin-top: var(--space-1);
}
.hall-card-count {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: var(--space-3);
}

@media (max-width: 52rem) {
  .hall-grid { grid-template-columns: 1fr; }
}

/* ---------- the rooms inside a hall ---------- */

.room-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.room-card {
  display: block; overflow: hidden;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.room-card:not(.has-art) { padding: var(--space-3); }
.room-card:not(.is-planned):hover {
  transform: translateY(-2px); border-color: var(--accent);
}
.room-card.is-planned { opacity: 0.62; }
.room-card.is-planned:not(.has-art) { border-style: dashed; }

.room-card-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.room-card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--slow) var(--ease), filter var(--slow) var(--ease);
}
.room-card:not(.is-planned):hover .room-card-art img { transform: scale(1.05); }

/* Unbuilt rooms are drained rather than hidden, same as everywhere. */
.room-card.is-planned .room-card-art img { filter: grayscale(0.7) brightness(0.6); }
.room-card.is-planned:hover .room-card-art img { filter: grayscale(0.35) brightness(0.8); }

/* The picture fades into the card so the name has something to sit on. */
.room-card-art::after {
  content: ""; position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(to bottom,
    transparent, color-mix(in srgb, var(--surface) 75%, transparent) 65%, var(--surface));
  pointer-events: none;
}

.room-card.has-art .room-card-body {
  position: relative; margin-top: -1.6rem;
  padding: 0 var(--space-3) var(--space-3);
}

.room-card-name { font-size: var(--size-sm); line-height: 1.25; }
.room-card-chinese { font-size: var(--size-2xs); color: var(--mist); }
.room-card-tag {
  font-size: 0.55rem; color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--space-1);
}

/* ==========================================================
   Drop 53: the Jade Mountain sidebar, palace-wide, after the
   brought design - a seal with the name beneath a small gold line,
   a quiet label, and each item a rounded row: icon, name, and its
   Chinese to the right; the one in use a soft gold pill.
   ========================================================== */
.side-label {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mist) 80%, var(--ink));
  padding: 0.7rem 0.8rem 0.45rem;
}
.side-label:empty { display: none; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item, .section-item {
  gap: 0.8rem; padding: 0.62rem 0.8rem;
  border-radius: 8px; border: 1px solid transparent;
  color: color-mix(in srgb, var(--mist) 70%, var(--blossom));
  font-size: 0.8rem;
}
.nav-item:hover, .section-item:hover { background: color-mix(in srgb, var(--blossom) 4%, transparent); color: var(--blossom); }
.nav-item.is-active, .section-item.is-active {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-color: color-mix(in srgb, var(--gold) 16%, transparent);
  color: color-mix(in srgb, var(--gold) 22%, var(--blossom));
  box-shadow: none;
}
.nav-icon { width: 20px; height: 20px; color: color-mix(in srgb, var(--mist) 85%, var(--ink)); }
.nav-item.is-active .nav-icon, .section-item.is-active .nav-icon { color: var(--gold); }
.nav-label { flex-direction: row; align-items: center; gap: 0.6rem; }
.nav-label .nav-name { flex: 1; font-size: 0.8rem; }
.nav-chinese { margin-left: auto; font-family: var(--font-serif); font-size: 0.82rem; opacity: 0.5; color: inherit; flex: none; }
.section-item { justify-content: flex-start; }
.section-item .section-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-item .nav-chinese { font-size: 0.82rem; }
.section-item.is-hall { gap: 0.8rem; }
.section-icon { width: 18px; height: 18px; }
/* the head of a wing's menu: a seal, the name, a small gold line */
.section-back {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.75rem;
  padding: 0.6rem 0.55rem 1rem; margin-bottom: 0.2rem;
}
.section-back .section-up { width: 14px; height: 14px; color: color-mix(in srgb, var(--mist) 70%, var(--ink)); }
.side-seal {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 1.45rem/1 var(--font-serif); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  outline: 1px solid color-mix(in srgb, var(--gold) 19%, transparent); outline-offset: 4px;
  margin: 4px;
}
.section-back .nav-name { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.25; color: var(--blossom); white-space: normal; }
.section-back .nav-chinese {
  margin: 0.35rem 0 0; opacity: 1; font-family: var(--font-sans); font-size: 0.56rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.section-back-label { flex-direction: column; }
.section-back:hover .section-up { color: var(--gold); }

/* ==========================================================
   Drop 53: the Jade Mountain header - the whole banner in a
   rounded frame, the room's words bottom-left, and a classical
   saying written vertically in a thin gold box on the side.
   ========================================================== */
.hero {
  position: relative; display: flex; align-items: flex-end; flex: none;
  width: calc(100% - 2 * var(--space-4)); max-width: calc(var(--content-max) - 2 * var(--space-4));
  margin: var(--space-4) auto 0;
  aspect-ratio: var(--hero-ratio, 3); min-height: 15rem; max-height: 34rem;
  border: 1px solid color-mix(in srgb, var(--gold) 29%, transparent);
  border-radius: 18px; overflow: hidden; background: var(--ink);
}
.hero[hidden] { display: none; }
.hero[data-wide] { max-width: none; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 96%, transparent) 3%, color-mix(in srgb, var(--ink) 70%, transparent) 33%, transparent 88%),
              linear-gradient(90deg, color-mix(in srgb, var(--ink) 35%, transparent), transparent 60%);
}
.hero-copy { position: relative; z-index: 1; padding: clamp(1.25rem, 3vw, 2.4rem); max-width: min(46rem, 72%); }
.hero-eyebrow { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.hero-title { margin: 0.55rem 0 0; font: 400 clamp(2rem, 4.2vw, 3.1rem)/1.1 var(--font-serif); color: var(--blossom); text-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 50%, transparent); }
.hero-lede { margin: 0.75rem 0 0; font: italic 1.05rem/1.55 var(--font-serif); color: color-mix(in srgb, var(--blossom) 86%, var(--mist)); }
.hero-saying {
  position: absolute; z-index: 1; top: clamp(1rem, 2.2vw, 1.6rem); bottom: clamp(1rem, 2.2vw, 1.6rem); right: clamp(1rem, 2.2vw, 1.6rem);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0.75rem 0.85rem; min-width: 3.4rem;
  border: 1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.hero-saying[hidden] { display: none; }
.hero-saying-text {
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 0.7rem;
  font: 1.2rem/1.2 var(--font-serif);
  color: color-mix(in srgb, var(--gold) 55%, var(--blossom));
}
.hero-saying-col { display: flex; flex-direction: column; align-items: center; gap: 0.42em; }
.hero-saying-col span { display: block; }
.hero-saying-source { font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); text-align: center; }
:root[data-banner="compact"] .hero { aspect-ratio: auto; height: 13rem; min-height: 0; }
/* a wide wing stretches its pages the width of the stage; its rooms' own old headings give way to the header */
.view[data-wide] { max-width: none; }
.view[data-hero] > .page-head { display: none; }
@media (max-width: 40rem) {
  .hero { aspect-ratio: auto; min-height: 17rem; }
  .hero-copy { max-width: 100%; padding-right: 4.8rem; }
  .hero-saying { min-width: 2.8rem; padding: 0.8rem 0.5rem 0.7rem; }
  .hero-saying-text { font-size: 0.95rem; gap: 0.45rem; }
}
/* ==========================================================
   Drop 156: the main banner, in the daybook's style - worn by any
   room with no picture appointed (its own, its hall's or its
   wing's). Framed and shaded from the left: the wing above, the
   room's name, its line, the day, and its name in Chinese as a seal.
   The frame keeps the banner's 3:1 and grows only if the words need
   more; the picture fills it.
   ========================================================== */
.banner-words[hidden], .banner > .banner-seal[hidden] { display: none; }
.banner.is-main {
  display: flex; align-items: center; isolation: isolate; line-height: normal;
  aspect-ratio: 3 / 1; min-height: 15rem; max-height: 25rem;
  width: calc(100% - 2 * var(--space-4)); max-width: calc(var(--content-max) - 2 * var(--space-4));
  margin: var(--space-4) auto 0;
  border: 1px solid color-mix(in srgb, var(--gold) 31%, transparent); border-radius: 10px;
  overflow: hidden; background: var(--ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--gold) 9%, var(--ink)), 0 13px 36px color-mix(in srgb, var(--ink) 60%, transparent);
}
.banner.is-main[data-wide] { max-width: none; }
.view[data-main] > .page-head { display: none; }
/* Drop 162: the Gardens' rooms give their name and line to the banner; their buttons stay, to the right */
.view[data-main] .sg-heading h1, .view[data-main] .sg-heading > div > p,
.view[data-main] .dj-heading h1, .view[data-main] .dj-heading > div > p { display: none; }
.view[data-main] .sg-heading, .view[data-main] .dj-heading { justify-content: flex-end; margin-bottom: 12px; }
.view[data-main] .sg-heading:not(:has(> :nth-child(2))), .view[data-main] .dj-heading:not(:has(> :nth-child(2))) { display: none; }
.banner.is-main > img {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  min-height: 0; max-height: none; object-fit: cover; object-position: center 55%;
}
.banner.is-main::after {
  inset: 0; height: auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 94%, transparent), color-mix(in srgb, var(--ink) 80%, transparent) 29%, color-mix(in srgb, var(--ink) 36%, transparent) 62%, color-mix(in srgb, var(--ink) 10%, transparent)),
              linear-gradient(0deg, color-mix(in srgb, var(--ink) 38%, transparent), transparent 45%);
}
.banner-words {
  position: relative; z-index: 1; width: min(48rem, 70%);
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.5rem) clamp(1.4rem, 3.4vw, 2.75rem);
}
.banner-eyebrow { font-size: var(--size-3xs); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.banner-title {
  margin: 0.65rem 0 0; font: 400 clamp(2rem, 4.4vw, 3.4rem)/1.05 var(--font-serif); letter-spacing: -0.01em;
  color: var(--blossom); text-shadow: 0 3px 14px color-mix(in srgb, var(--ink) 60%, transparent);
}
.banner-lede { margin: 0.85rem 0 0; font-size: var(--size-md); line-height: 1.55; color: color-mix(in srgb, var(--blossom) 84%, var(--mist)); }
.banner-lede:empty { display: none; }
.banner-day { margin-top: 1.15rem; font-size: var(--size-2xs); letter-spacing: 0.05em; color: color-mix(in srgb, var(--gold) 78%, var(--blossom)); }
.banner > .banner-seal {
  position: absolute; z-index: 1; top: clamp(1rem, 2.2vw, 1.75rem); right: clamp(1rem, 2.2vw, 1.75rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.32em;
  padding: 0.95rem 0.75rem 0.8rem; font: 1.55rem/1 var(--font-cjk);
  color: color-mix(in srgb, var(--gold) 70%, var(--blossom));
  border: 1px solid color-mix(in srgb, var(--gold) 47%, transparent);
  outline: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); outline-offset: -5px;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
}
.banner > .banner-seal span { display: block; }
:root[data-banner="compact"] .banner.is-main { aspect-ratio: auto; min-height: 13rem; }
:root[data-banner="compact"] .banner.is-main > img { height: 100%; }
:root[data-banner="compact"] .banner-words { padding-block: 1.25rem; }
:root[data-banner="compact"] .banner-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
@media (max-width: 40rem) {
  .banner.is-main { width: calc(100% - 2 * var(--space-3)); margin-top: var(--space-3); }
  .banner.is-main { min-height: 16rem; }
  .banner-words { width: 100%; padding-right: 4.6rem; }
  .banner-title, :root[data-banner="compact"] .banner-title { font-size: 2rem; }
  .banner > .banner-seal { font-size: 1.15rem; padding: 0.75rem 0.55rem 0.6rem; }
}
/* Drop 74b: group labels inside a grouped wing menu. */
.side-label.side-group { margin: 14px 12px 4px; opacity: 0.85; }


/* ---- components.css ---- */
/* ============================================================
   forbidden-imperial.city — the orb, Qianlong, toasts, modals
   Location: public_html/assets/css/components.css

   Qianlong and the orb share one column in the bottom corner so
   they read as one object rather than two competing creatures.
   ============================================================ */

.corner {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: var(--z-corner);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  pointer-events: none;
}
.corner > * { pointer-events: auto; }

/* ============================================================
   The orb
   ============================================================ */

.orb {
  position: relative;
  width: var(--orb-size); height: var(--orb-size);
  padding: 0; border: none; background: transparent;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--ink) 55%, transparent));
  transition: transform var(--mid) var(--ease-out);
}
.orb:hover { transform: scale(1.06); }
.orb:active { transform: scale(0.97); }

.orb img {
  grid-area: 1 / 1;
  width: calc(var(--orb-size) - 14px);
  height: calc(var(--orb-size) - 14px);
  object-fit: contain;
}

.orb-ring { grid-area: 1 / 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.orb-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.orb-ring-track { stroke: color-mix(in srgb, var(--border) 80%, transparent); }
.orb-ring-fill {
  stroke: var(--gold);
  stroke-dasharray: 283;          /* 2 * pi * 45 */
  stroke-dashoffset: 283;         /* filled in by orb.js */
  transition: stroke-dashoffset var(--slow) var(--ease-out);
}

/* A pending Breakthrough is the one thing the orb says by itself. */
.orb.is-pending .orb-ring-fill { stroke: var(--lantern); }
.orb.is-pending::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--lantern);
  opacity: 0.5;
  animation: orb-pulse 2.4s var(--ease) infinite;
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.12); opacity: 0; }
}

/* ---------- the panel ---------- */

.orb-panel {
  width: min(21rem, calc(100vw - var(--space-3) * 2));
  max-height: min(32rem, calc(100dvh - 8rem));
  overflow-y: auto;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-high);
  padding: var(--space-4);
  transform-origin: bottom right;
  animation: panel-in var(--mid) var(--ease-out);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.orb-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.orb-realm { font-family: var(--font-serif); font-size: var(--size-lg); }
.orb-realm .stage { color: var(--mist); }
.orb-realm-chinese { font-family: var(--font-cjk); font-size: var(--size-sm); color: var(--gold); }

.orb-title {
  display: inline-block; margin-top: var(--space-1);
  font-size: var(--size-xs); color: var(--lantern);
}
.orb-title::before { content: "✦ "; }
.orb-title.is-empty { color: var(--mist); opacity: 0.7; }
.orb-title.is-empty::before { content: ""; }

.orb-qi {
  display: flex; align-items: baseline; gap: var(--space-1);
  margin: var(--space-3) 0 var(--space-1);
}
.orb-qi b {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-2xl); color: var(--blossom);
}
.orb-qi span { font-size: var(--size-xs); color: var(--mist); }

.orb-bar {
  height: 5px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}
.orb-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--lantern));
  transition: width var(--slow) var(--ease-out);
}
.orb-next { font-size: var(--size-xs); color: var(--mist); margin-top: var(--space-1); }

.orb-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2); margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: var(--hairline);
}
.orb-fact span { display: block; font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em; }
.orb-fact b { font-weight: 500; font-size: var(--size-sm); }
.orb-fact .cjk { color: var(--gold); }
.orb-fact.turbid b { color: var(--moon); }

.orb-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--hairline); }
.orb-foot .ghost { width: 100%; }
.orb-note { font-size: var(--size-2xs); color: var(--mist); margin-top: var(--space-2);
  text-align: center; opacity: 0.8; }

/* ============================================================
   Qianlong
   ============================================================ */

/* The dismiss button is positioned against this, so this has to be
   a positioned parent. Without it the button anchors to whatever is
   further up and lands somewhere unrelated. */
.qianlong {
  position: relative;
  display: flex; align-items: flex-end; gap: var(--space-2);
  max-width: min(23rem, calc(100vw - var(--space-3) * 2));
  animation: qianlong-in var(--slow) var(--ease-out);
}
@keyframes qianlong-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.qianlong img { width: 84px; height: 84px; flex: none;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--ink) 50%, transparent)); }

.qianlong-say {
  position: relative;
  background: var(--surface-2);
  border: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-mid);
  padding: var(--space-2) 2rem var(--space-2) var(--space-3);
  font-size: var(--size-sm);
  margin-bottom: 0.6rem;
}
.qianlong-say::after {
  content: ""; position: absolute; left: -6px; bottom: 0.9rem;
  width: 10px; height: 10px;
  background: var(--surface-2);
  border-left: var(--hairline); border-bottom: var(--hairline);
  transform: rotate(45deg);
}
.qianlong-dismiss {
  position: absolute; top: 0.3rem; right: 0.3rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  background: transparent; border: none; color: var(--mist); padding: 0;
}
.qianlong-dismiss svg { width: 13px; height: 13px; }
.qianlong-dismiss:hover { color: var(--blossom); }

/* ============================================================
   Toasts — top right, so they never tangle with the corner
   ============================================================ */

.toasts {
  position: fixed; top: var(--space-3); right: var(--space-3);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(21rem, calc(100vw - var(--space-3) * 2));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--space-2);
  background: var(--surface-2);
  border: var(--hairline);
  border-left: 3px solid var(--mist);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-mid);
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-sm);
  animation: toast-in var(--mid) var(--ease-out);
}
.toast.is-leaving { animation: toast-out var(--fast) var(--ease) forwards; }
.toast.good { border-left-color: var(--state-pass); }
.toast.warn { border-left-color: var(--state-warn); }
.toast.bad  { border-left-color: var(--state-fail); }
.toast p { flex: 1; }
.toast button {
  background: transparent; border: none; color: var(--mist);
  padding: 0; width: 1.25rem; height: 1.25rem; display: grid; place-items: center;
}
.toast button svg { width: 12px; height: 12px; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(14px); }
}

/* ============================================================
   Modal
   ============================================================ */

.modal-host {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--space-3);
  background: var(--veil);
  backdrop-filter: blur(3px);
  animation: fade-in var(--fast) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Capped at the window height so it can never overflow. Padding lives
   on the three sections rather than here, so the scrolling middle runs
   edge to edge and its scrollbar sits where you expect it. */
.modal {
  width: min(30rem, 100%);
  max-height: calc(100dvh / var(--text-zoom) - var(--space-3) * 2);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-high);
  animation: modal-in var(--mid) var(--ease-out);
  overflow: hidden;
}

.modal-head {
  flex: none;
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.modal-intro { margin-bottom: var(--space-3); }

/* A hairline only when there is something scrolled away above it. */
.modal-body:not(:last-child) + .modal-actions { border-top: var(--hairline); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal h3 { font-size: var(--size-lg); }
.modal p { color: var(--mist); font-size: var(--size-sm); }
.modal-actions {
  flex: none;
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}
/* Destructive confirmations stay plain. No ceremony, no dragon. */
.modal-actions .danger {
  background: var(--lacquer); color: var(--blossom);
  border: none; border-radius: var(--radius-sm);
  padding: 0.6rem 1.15rem; font-weight: 600;
}
.modal-actions .danger:hover { background: var(--surface); }

/* ============================================================
   Narrow
   ============================================================ */

@media (max-width: 60rem) {
  .corner { right: var(--space-2); bottom: var(--space-2); }
  .qianlong img { width: 64px; height: 64px; }
  .toasts { top: auto; bottom: calc(var(--orb-size) + var(--space-5)); right: var(--space-2); }
  .orb-facts { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   The bell
   ============================================================ */

.bell-wrap { position: relative; flex: none; }

#bell { position: relative; }
#bell.has-unread { color: var(--blossom); }

.bell-count {
  position: absolute; top: 0.1rem; right: 0.05rem;
  min-width: 1rem; height: 1rem; padding: 0 0.2rem;
  display: grid; place-items: center;
  background: var(--lacquer); color: var(--blossom);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: var(--size-3xs); font-weight: 600; line-height: 1;
}

.bell-panel {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  width: min(23rem, calc(100vw - var(--space-3) * 2));
  max-height: min(28rem, calc(100dvh - 6rem));
  overflow-y: auto;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-high);
  z-index: var(--z-toast);
  transform-origin: top right;
  animation: panel-in var(--mid) var(--ease-out);
}

.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: var(--hairline);
  position: sticky; top: 0;
  background: var(--surface);
}
.bell-head strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md); }

.bell-clear {
  background: transparent; border: none; padding: 0;
  color: var(--mist); font-size: var(--size-xs);
  text-decoration: underline; text-underline-offset: 2px;
}
.bell-clear:hover { color: var(--blossom); }

.bell-group {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.bell-item {
  display: flex; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--fast) var(--ease);
}
.bell-item:hover { background: var(--surface-2); }
.bell-item.is-new { border-left-color: var(--mist); }
.bell-item.is-new.warn { border-left-color: var(--state-warn); }
.bell-item.is-new.urgent { border-left-color: var(--state-fail); }

.bell-dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  margin-top: 0.45rem; flex: none;
  background: transparent;
}
.bell-item.is-new .bell-dot { background: var(--surface-3); }
.bell-item.is-new.warn .bell-dot { background: var(--state-warn); }
.bell-item.is-new.urgent .bell-dot { background: var(--state-fail); }

.bell-text { min-width: 0; flex: 1; }
.bell-title { font-size: var(--size-sm); color: var(--mist); line-height: 1.4; }
.bell-item.is-new .bell-title { color: var(--blossom); }
.bell-body { font-size: var(--size-xs); color: var(--mist); margin-top: 0.1rem; }
.bell-when { font-size: var(--size-2xs); color: var(--mist); opacity: 0.75; margin-top: 0.2rem; }

.bell-empty {
  padding: var(--space-4) var(--space-3);
  font-size: var(--size-sm); color: var(--mist); text-align: center;
}

@media (max-width: 60rem) {
  .bell-panel { right: calc(var(--space-2) * -1); }
}


/* On a short window — a laptop in landscape, a phone on its side —
   the dialog gets the whole height rather than being politely inset. */
@media (max-height: 34rem) {
  .modal-host { padding: var(--space-1); }
  .modal { max-height: calc(100dvh / var(--text-zoom) - var(--space-1) * 2); }
  .modal-head { padding: var(--space-3) var(--space-3) var(--space-1); }
  .modal-body { padding: var(--space-1) var(--space-3) var(--space-2); }
  .modal-actions { padding: var(--space-2) var(--space-3); }
}

/* ---------- the orb panel, once the engine is running ---------- */

.orb-trial {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--lantern);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--lantern) 8%, transparent);
}
.orb-trial-name {
  font-family: var(--font-serif); font-size: var(--size-md); color: var(--lantern);
}
.orb-trial p { font-size: var(--size-xs); margin: var(--space-1) 0 var(--space-3); }
.orb-trial .primary { width: 100%; padding: 0.45rem; font-size: var(--size-sm); }

.orb-recent { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--hairline); }
.orb-recent-row {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 0.2rem 0; font-size: var(--size-xs);
}
.orb-recent-row span {
  flex: 1; min-width: 0; color: var(--mist);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orb-recent-row b {
  font-weight: 500; color: var(--accent-jade); font-variant-numeric: tabular-nums;
}
.orb-recent-row b.is-turbid { color: var(--moon); }

/* ---------- Paths, in the orb panel ---------- */

.orb-paths { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--hairline); }
.orb-path { margin-top: var(--space-2); }
.orb-path-head {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: var(--size-xs); margin-bottom: 0.25rem;
}
.orb-path-head span:first-child { flex: 1; min-width: 0; }
.orb-path-head b { font-weight: 500; font-variant-numeric: tabular-nums; }
.orb-path-rank { color: var(--mist); font-size: var(--size-2xs); }
.orb-path .orb-bar { height: 3px; }

/* ---------- clearing Turbid Qi ---------- */

.orb-turbid {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--moon) 55%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--moon) 8%, transparent);
}
.orb-turbid-head {
  font-family: var(--font-serif); font-size: var(--size-md); color: var(--moon);
}
.orb-turbid p { font-size: var(--size-xs); margin: var(--space-1) 0 var(--space-3); }
.orb-turbid .ghost { width: 100%; padding: 0.4rem; font-size: var(--size-sm); }

/* ---------- the equipped Title is a choice ---------- */

button.orb-title {
  background: transparent; border: none; padding: 0;
  font: inherit; font-size: var(--size-xs); color: var(--lantern);
  text-align: left; cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--lantern) 45%, transparent);
  transition: color var(--fast) var(--ease);
}
button.orb-title:hover { color: var(--blossom); }
button.orb-title.is-empty {
  color: var(--mist);
  border-bottom-color: color-mix(in srgb, var(--mist) 40%, transparent);
}

/* ---------- the Trial ---------- */

.trial-flavour {
  font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--lantern); margin-bottom: var(--space-3);
}
.trial-note {
  font-size: var(--size-xs); color: var(--mist);
  padding: var(--space-2); margin-bottom: var(--space-3);
  border-left: 2px solid var(--border);
}

.trial-condition {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.trial-condition:first-of-type { border-top: none; }
.trial-condition.is-waiting { opacity: 0.6; }

.trial-mark {
  display: grid; place-items: center; flex: none;
  width: 1.4rem; height: 1.4rem; margin-top: 0.1rem;
  border: 1px solid var(--border); border-radius: 50%;
  font-size: var(--size-xs); color: var(--accent-jade);
}
.trial-condition.is-met .trial-mark {
  border-color: var(--accent-jade);
  background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
}

.trial-text { flex: 1; min-width: 0; }
.trial-label { font-size: var(--size-sm); }
.trial-condition.is-met .trial-label { color: var(--blossom); }
.trial-detail { font-size: var(--size-2xs); color: var(--mist); margin-top: 0.15rem; }

.trial-condition .ghost {
  flex: none; padding: 0.25rem 0.6rem; font-size: var(--size-2xs);
}

/* ============================================================
   Quests
   ============================================================ */

.quest-crowded {
  font-size: var(--size-sm); color: var(--state-warn);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border-left: 2px solid var(--state-warn);
}

.quest {
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.quest.is-overdue { border-left-color: var(--accent-lacquer); }
.quest.is-done { border-left-color: var(--state-pass); opacity: 0.85; }
.quest.is-released { opacity: 0.55; border-left-color: var(--border); }

.quest-head { display: flex; align-items: flex-start; gap: var(--space-3); }

.quest-tier {
  font-size: var(--size-2xs); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-pill); padding: 0.05rem 0.5rem;
}

.quest-flavour {
  font-family: var(--font-serif); font-size: var(--size-sm);
  color: var(--accent); margin-top: 0.1rem;
}

.quest-reward {
  font-family: var(--font-serif); font-size: var(--size-lg);
  font-variant-numeric: tabular-nums; color: var(--accent-jade);
}

.quest .ledger-bar { margin: var(--space-3) 0 var(--space-2); }

.quest-description {
  font-size: var(--size-sm); color: var(--mist);
  margin-top: var(--space-2);
}

.quest-steps { margin-top: var(--space-3); }

.quest-step {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0; font-size: var(--size-sm);
}
.quest-step.is-done .quest-step-text { color: var(--mist); text-decoration: line-through; }
.quest-step.is-optional .quest-step-text { color: var(--mist); }

.quest-tick {
  display: grid; place-items: center; flex: none;
  width: 1.25rem; height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--accent-jade);
  font-size: var(--size-2xs); padding: 0;
}
.quest-step.is-done .quest-tick {
  border-color: var(--accent-jade);
  background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
}
.quest-step.is-optional .quest-tick { border-radius: 50%; }

.quest-step-text { flex: 1; min-width: 0; }
.quest-optional { font-size: var(--size-2xs); color: var(--mist); }

.quest-remove {
  background: transparent; border: none; color: var(--mist);
  font-size: var(--size-md); line-height: 1; padding: 0 0.2rem;
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
.quest-step:hover .quest-remove { opacity: 1; }
.quest-remove:hover { color: var(--accent-lacquer); }

.quest-tools {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
}
.quest-tools .ghost, .quest-tools .primary {
  padding: 0.3rem 0.8rem; font-size: var(--size-xs);
}

/* ============================================================
   The Weekly Inner Reflection
   ============================================================ */

.reflect-summary {
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--lantern);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-3);
}

.reflect-realm {
  flex: none; font-family: var(--font-serif);
  font-size: var(--size-sm); color: var(--lantern);
}

.reflect-figures {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-3);
}
.reflect-figure b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-xl); font-variant-numeric: tabular-nums;
}
.reflect-figure span {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.reflect-figure.is-turbid b { color: var(--moon); }
.reflect-figure.is-clean b { color: var(--accent-jade); }

.reflect-paths {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
}
.reflect-path span {
  display: block; font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.reflect-path b { font-weight: 400; font-size: var(--size-md); }
.reflect-path small { display: block; font-size: var(--size-2xs); color: var(--mist); }

.reflect-previous {
  padding: var(--space-3); margin-bottom: var(--space-4);
  border: var(--hairline); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}
.reflect-quote {
  font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--blossom); margin: var(--space-1) 0 var(--space-2);
}

.reflect-question { margin-bottom: var(--space-4); }
.reflect-question label {
  display: block; font-family: var(--font-serif);
  font-size: var(--size-md); margin-bottom: 0.15rem;
}
.reflect-question .field-hint { margin-bottom: var(--space-2); }
.reflect-question textarea,
.reflect-question input {
  width: 100%; background: var(--ink); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem; font: inherit; resize: vertical;
}

.reflect-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.reflect-chip {
  background: transparent; border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem; font: inherit; font-size: var(--size-xs);
  color: var(--mist);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.reflect-chip:hover { color: var(--blossom); }
.reflect-chip.is-on {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.reflect-actions {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  flex-wrap: wrap; margin-top: var(--space-4);
}
.reflect-note {
  font-size: var(--size-2xs); color: var(--mist);
  margin-top: var(--space-3); text-align: right;
}

.reflect-answer { margin-top: var(--space-3); }
.reflect-answer p { font-size: var(--size-sm); margin-top: 0.2rem; }
.reflect-intention {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
}

/* ============================================================
   Immortal Cultivation
   ============================================================ */

.cult-standing {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--lantern);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.cult-sigil {
  flex: none; display: grid; place-items: center;
  width: 4rem; height: 4rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lantern) 55%, transparent);
  background: color-mix(in srgb, var(--lantern) 10%, transparent);
  font-size: var(--size-2xl); color: var(--lantern);
}
.cult-standing > div:last-child { flex: 1; min-width: 0; }
.cult-realm { font-family: var(--font-serif); font-size: var(--size-xl); }
.cult-realm-sub { font-size: var(--size-xs); color: var(--mist); margin-bottom: var(--space-2); }
.cult-qi { font-size: var(--size-xs); color: var(--mist); margin-top: var(--space-1);
  font-variant-numeric: tabular-nums; }
.cult-note { font-size: var(--size-sm); color: var(--mist); margin-bottom: var(--space-3); }
.cult-count { font-size: var(--size-xs); color: var(--mist); align-self: center; }

/* ---------- the Realms ---------- */

.realm-ladder {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.realm-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2) var(--space-3);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.realm-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.realm-tile.is-held { border-color: color-mix(in srgb, var(--accent-jade) 45%, transparent); }
.realm-tile.is-here {
  border-color: var(--lantern);
  background: color-mix(in srgb, var(--lantern) 7%, var(--surface));
}
.realm-tile.is-next { border-style: dashed; }

.realm-tile-seal { width: 100%; max-width: 7rem; }
.realm-tile-seal img { width: 100%; height: auto; display: block; }

/* Unreached Realms are dimmed and drained rather than hidden. The
   shape is visible; the colour is not yet earned. */
.realm-tile.is-dark .realm-tile-seal img,
.realm-tile:not(.is-held):not(.is-here) .realm-tile-seal img {
  filter: grayscale(0.75) brightness(0.55);
}
.realm-tile.is-next .realm-tile-seal img { filter: grayscale(0.3) brightness(0.8); }
.realm-tile.is-dark .realm-tile-seal img { filter: grayscale(1) brightness(0.25); }
.realm-tile:hover .realm-tile-seal img { filter: none; }
.realm-tile.is-dark:hover .realm-tile-seal img { filter: grayscale(1) brightness(0.35); }

.realm-tile-number {
  font-size: var(--size-3xs); color: var(--mist);
  letter-spacing: 0.12em; margin-top: var(--space-2);
}
.realm-tile-name { font-family: var(--font-serif); font-size: var(--size-sm); }
.realm-tile-sub { font-size: var(--size-2xs); color: var(--mist); font-style: italic; }
.realm-tile-tag {
  margin-top: var(--space-1); font-size: var(--size-3xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);
}
.realm-tile.is-held .realm-tile-tag { color: var(--accent-jade); }

/* ---------- one Realm ---------- */

.realm-detail {
  display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-3) 0;
}
.realm-detail.is-held { border-left: 3px solid var(--accent-jade); }

.realm-detail-seal { flex: none; width: min(14rem, 40vw); }
.realm-detail-seal img { width: 100%; height: auto; display: block; }
.realm-detail:not(.is-held) .realm-detail-seal img {
  filter: grayscale(0.6) brightness(0.7);
}

.realm-detail-body { flex: 1; min-width: 14rem; }
.realm-detail-name { font-size: var(--size-2xl); }
.realm-detail-chinese {
  font-size: var(--size-lg); color: var(--accent); margin-bottom: 0.2rem;
}
.realm-number { font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.1em; }
.realm-head { margin-bottom: var(--space-1); }
.realm-subtitle { font-size: var(--size-sm); color: var(--accent); font-style: italic; }
.realm-description { font-size: var(--size-sm); color: var(--mist); margin-top: var(--space-2); }

.realm-facts {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
}
.realm-fact span {
  display: block; font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.realm-fact b {
  font-weight: 400; font-size: var(--size-md);
  font-variant-numeric: tabular-nums;
}

.realm-line {
  font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--blossom); margin-top: var(--space-3);
  padding-left: var(--space-3); border-left: 2px solid var(--accent-jade);
}

/* ---------- the stage blocks ---------- */

.stage-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-top: var(--space-3);
}

.stage-block {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.stage-block.is-held { border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent); }
.stage-block.is-here {
  border-color: var(--lantern);
  background: color-mix(in srgb, var(--lantern) 8%, transparent);
}
.stage-block.is-gate { border-style: dashed; }

.stage-seal { width: 100%; max-width: 5rem; }
.stage-seal img { width: 100%; height: auto; display: block; }
.stage-block:not(.is-held):not(.is-here) .stage-seal img {
  filter: grayscale(0.85) brightness(0.45);
}

.stage-name {
  font-family: var(--font-serif); font-size: var(--size-md); margin-top: var(--space-2);
}
.stage-meaning { font-size: var(--size-2xs); color: var(--mist); font-style: italic; }
.stage-need {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums; margin-top: var(--space-1);
}
.stage-short { font-size: var(--size-3xs); color: var(--accent); margin-top: 0.15rem; }

.realm-trial .trial-flavour { margin: var(--space-2) 0 0; }

/* ---------- the Paths ---------- */

.path-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.path-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.path-card:hover { transform: translateY(-2px); }
.path-card.is-untrodden { opacity: 0.72; }

/* The sigil sits behind its own card, faintly, so the block has depth
   without the text having to fight it. */
.path-card::before {
  content: ""; position: absolute; inset: auto -20% -30% -20%;
  height: 70%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.path-seal-image { width: 100%; max-width: 6.5rem; position: relative; }
.path-seal-image img { width: 100%; height: auto; display: block; }
.path-card.is-untrodden .path-seal-image img { filter: grayscale(0.8) brightness(0.6); }

.path-head {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin-top: var(--space-2); position: relative;
}
.path-head strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-lg); }
.path-chinese { font-size: var(--size-xs); color: var(--mist); }

.path-level-row {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2); position: relative;
}
.path-level-row b { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-xl); }
.path-rank { font-size: var(--size-xs); color: var(--accent); }

.path-card .ledger-bar { width: 100%; margin: 0 0 var(--space-2); }
.path-mastery {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums; position: relative;
}

.path-facts {
  display: flex; gap: var(--space-3); margin-top: var(--space-2);
  padding-top: var(--space-2); border-top: var(--hairline);
  width: 100%; justify-content: center; position: relative;
}
.path-fact b { display: block; font-weight: 400; font-size: var(--size-md);
  font-variant-numeric: tabular-nums; }
.path-fact span { font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em; }

.path-last { font-size: var(--size-3xs); color: var(--mist); margin-top: var(--space-1); }

.path-seal-tier {
  display: flex; align-items: center; gap: 0.25rem;
  margin-top: var(--space-2); position: relative;
}
.path-pip {
  width: 0.35rem; height: 0.35rem; border-radius: 50%;
  background: var(--accent);
}
.path-seal-label { font-size: var(--size-3xs); color: var(--accent); letter-spacing: 0.15em; }

/* ---------- one Path ---------- */

.path-detail {
  display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-3) 0;
}
.path-card-image {
  flex: none; width: min(16rem, 45vw);
  border-radius: var(--radius-sm); overflow: hidden;
  border: var(--hairline);
}
.path-card-image img { width: 100%; height: auto; display: block; }
.path-detail-body { flex: 1; min-width: 14rem; }

.path-big {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}
.path-big b { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-2xl); }
.path-big span { font-size: var(--size-md); color: var(--accent); }

.feed-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.feed-row:first-of-type { border-top: none; }
.feed-text { flex: 1; min-width: 0; }
.feed-name { font-size: var(--size-sm); }
.feed-flavour { font-size: var(--size-2xs); color: var(--mist); font-style: italic; }
.feed-worth { flex: none; text-align: right; }
.feed-worth b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.feed-worth span { display: block; font-size: var(--size-3xs); color: var(--mist); }

.band-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  opacity: 0.5;
}
.band-row:first-of-type { border-top: none; }
.band-row.is-held { opacity: 1; }
.band-level {
  flex: none; width: 3.5rem; font-family: var(--font-mono);
  font-size: var(--size-2xs); color: var(--mist);
}
.band-row.is-held .band-level { color: var(--accent); }
.band-text { flex: 1; min-width: 0; }
.band-name { font-family: var(--font-serif); font-size: var(--size-md); }
.band-meaning { font-size: var(--size-2xs); color: var(--mist); }
.band-need {
  flex: none; font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}

/* ---------- deeds and titles ---------- */

/* A hairline inset, so a panel reads as a plaque rather than a box.
   Contained by its own panel, and never drawn over a neighbour. */
.deeds-panel { position: relative; isolation: isolate; }
.deeds-panel::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: calc(var(--radius-md) - 3px);
  pointer-events: none; z-index: 0;
}

.seal-strip {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  margin-top: var(--space-3);
}
.seal-slot {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.15rem;
}
.seal-slot img { width: 100%; max-width: 5rem; height: auto; display: block;
  filter: grayscale(1) brightness(0.28); transition: filter var(--slow) var(--ease); }
.seal-slot.is-held img { filter: none; }
.seal-slot.is-next img { filter: grayscale(0.55) brightness(0.7); }
.seal-slot:hover img { filter: grayscale(0.2) brightness(0.9); }
.seal-name { font-size: var(--size-3xs); color: var(--mist); }
.seal-slot.is-held .seal-name { color: var(--blossom); }
.seal-when { font-size: var(--size-3xs); color: var(--mist); opacity: 0.75; }

.title-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin-top: var(--space-3);
}
.title-card {
  position: relative;
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.title-card.is-locked { opacity: 0.42; }
.title-card.is-worn {
  border-color: var(--lantern);
  background: color-mix(in srgb, var(--lantern) 8%, transparent);
}
.title-card.rarity-legendary { border-color: color-mix(in srgb, var(--accent-lacquer) 45%, transparent); }
.title-card.rarity-mythic    { border-color: color-mix(in srgb, var(--blossom) 35%, transparent); }

/* A single corner flourish, on the rarer ones only. */
.title-corner {
  position: absolute; top: 0; right: 0;
  width: 1.4rem; height: 1.4rem;
  border-top: 1px solid transparent; border-right: 1px solid transparent;
  border-top-right-radius: var(--radius-sm);
}
.title-card.rarity-epic .title-corner,
.title-card.rarity-legendary .title-corner,
.title-card.rarity-mythic .title-corner {
  border-top-color: var(--accent); border-right-color: var(--accent);
}

.title-name { font-family: var(--font-serif); font-size: var(--size-md); margin-top: 0.25rem; }
.title-chinese { font-size: var(--size-xs); color: var(--mist); }
.title-card p { font-size: var(--size-2xs); color: var(--mist); margin-top: var(--space-1); }
.title-when { font-size: var(--size-3xs); color: var(--mist); margin-top: var(--space-1); opacity: 0.8; }
.title-card .ghost {
  width: 100%; margin-top: var(--space-2);
  padding: 0.25rem; font-size: var(--size-2xs);
}

.title-rarity {
  display: inline-block; font-size: var(--size-3xs);
  text-transform: uppercase; letter-spacing: 0.12em;
  border-radius: var(--radius-pill); padding: 0.05rem 0.5rem;
  border: 1px solid currentColor; color: var(--mist);
}
.title-rarity.is-refined   { color: var(--accent-jade); }
.title-rarity.is-rare      { color: var(--gold); }
.title-rarity.is-epic      { color: var(--lantern); }
.title-rarity.is-legendary { color: var(--accent-lacquer); }
.title-rarity.is-mythic    { color: var(--blossom); }
.title-rarity.is-hidden    { color: var(--border); }

/* A hidden deed shows its true band — it sorts there, so saying
   otherwise on the tile would be a small lie. */
.deed-tile.is-hidden .deed-tile-name,
.title-card.is-locked .title-name { font-style: italic; }

/* ---------- the tab strip ---------- */

.deed-tabs {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.deed-tab {
  flex: 1 1 7rem; min-width: 6.5rem;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2) 0.55rem;
  font: inherit; color: var(--mist); text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.deed-tab:hover { color: var(--blossom); }
.deed-tab.is-on {
  border-color: var(--accent); color: var(--blossom);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.deed-tab-name {
  display: block; font-size: var(--size-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deed-tab-count {
  display: block; font-size: var(--size-3xs); opacity: 0.75;
  font-variant-numeric: tabular-nums; margin-bottom: 0.3rem;
}
.deed-tab-bar {
  height: 2px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 65%, transparent); overflow: hidden;
}
.deed-tab-bar i { display: block; height: 100%; background: var(--accent); }

.deeds-field { min-height: 20rem; }

/* ---------- deeds as tiles ---------- */

.deed-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  margin-top: var(--space-3);
}

.deed-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.2rem;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-2);
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.deed-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.deed-tile.is-open {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.deed-tile.is-hidden { opacity: 0.6; }
.deed-tile.is-waiting { opacity: 0.45; }

.deed-tile.is-held.rarity-rare      { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.deed-tile.is-held.rarity-epic      { border-color: color-mix(in srgb, var(--lantern) 45%, transparent); }
.deed-tile.is-held.rarity-legendary { border-color: color-mix(in srgb, var(--accent-lacquer) 45%, transparent); }
.deed-tile.is-held.rarity-mythic    { border-color: color-mix(in srgb, var(--blossom) 40%, transparent); }

.deed-tile-icon { width: 100%; max-width: 4.25rem; }
.deed-tile-icon img { width: 100%; height: auto; display: block; }
.deed-tile:not(.is-held) .deed-tile-icon img { filter: grayscale(1) brightness(0.42); }
.deed-tile.is-waiting .deed-tile-icon img { filter: grayscale(1) brightness(0.24); }
.deed-tile:not(.is-held):hover .deed-tile-icon img { filter: grayscale(0.5) brightness(0.72); }

.deed-tile-name { font-size: var(--size-2xs); line-height: 1.3; }
.deed-tile.is-held .deed-tile-name { color: var(--blossom); }
.deed-tile-chinese { font-size: var(--size-3xs); color: var(--mist); }
.deed-tile.is-held .deed-tile-chinese { color: var(--accent); }
.deed-tile-when {
  font-size: var(--size-3xs); color: var(--mist);
  font-variant-numeric: tabular-nums; margin-top: 0.1rem;
}
.deed-tile .deed-bar { width: 100%; margin-top: 0.25rem; }
.deed-tile .title-rarity { font-size: var(--size-3xs); padding: 0 0.4rem; }

.deed-unknown {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px dashed var(--border); color: var(--mist); font-size: var(--size-md);
}

.deed-bar {
  height: 3px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 60%, transparent); overflow: hidden;
}
.deed-bar i { display: block; height: 100%; background: var(--accent); }

/* ---------- the one being looked at ---------- */

.deed-detail {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.deed-detail-icon { flex: none; width: 5.5rem; }
.deed-detail-icon img { width: 100%; height: auto; display: block; }
.deed-detail-body { flex: 1; min-width: 0; }

.deed-name-line { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.deed-name-line strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-lg); }
.deed-chinese { font-size: var(--size-sm); color: var(--accent); }

.deed-detail-meaning { font-size: var(--size-sm); color: var(--mist); margin-top: 0.2rem; }
.deed-detail .realm-facts { margin-top: var(--space-2); padding-top: var(--space-2); }
.deed-detail .realm-fact b { font-size: var(--size-sm); }

@media (max-width: 40rem) {
  .deed-detail { flex-direction: column; align-items: center; text-align: center; }
  .deed-detail-icon { width: 6rem; }
}

/* ---------- the Chronicle ---------- */

.chronicle-day { margin-bottom: var(--space-3); }
.chronicle-date {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-1); border-bottom: var(--hairline);
}
.chronicle-date strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md); }
.chronicle-date span { font-size: var(--size-xs); color: var(--accent-jade);
  font-variant-numeric: tabular-nums; }

.chronicle-entry {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 0.4rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}
.chronicle-entry:last-child { border-bottom: none; }
.chronicle-entry.is-reversed { opacity: 0.45; text-decoration: line-through; }
.chronicle-text { flex: 1; min-width: 0; font-size: var(--size-sm); }
.chronicle-detail { font-size: var(--size-2xs); color: var(--mist); }
.chronicle-value { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.chronicle-value b { font-weight: 500; font-size: var(--size-sm); color: var(--accent-jade); }
.chronicle-value b.is-spent { color: var(--mist); }
.chronicle-value span { display: block; font-size: var(--size-3xs); }
.chronicle-value .is-turbid { color: var(--moon); }
.chronicle-value .is-clean { color: var(--accent-jade); }

@media (max-width: 40rem) {
  .cult-standing { flex-direction: column; align-items: stretch; }
  .realm { flex-wrap: wrap; }
}

/* ---------- choosing a period ---------- */

.period-bar {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.period-row {
  display: flex; align-items: center; gap: var(--space-1);
  flex-wrap: wrap; margin-bottom: var(--space-2);
}
.period-row:last-child { margin-bottom: 0; }
.period-label {
  flex: none; width: 3.5rem;
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.period-chip {
  background: transparent; border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.7rem; font: inherit; font-size: var(--size-2xs);
  color: var(--mist);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.period-chip:hover { color: var(--blossom); }
.period-chip.is-on {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- withdrawing an entry ---------- */

.chronicle-entry { position: relative; }
.chronicle-undo {
  flex: none; width: 1.4rem; height: 1.4rem;
  background: transparent; border: none;
  color: var(--mist); font-size: var(--size-sm); line-height: 1;
  opacity: 0; transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chronicle-entry:hover .chronicle-undo { opacity: 1; }
.chronicle-undo:hover { color: var(--accent-lacquer); }
.chronicle-entry.is-reversed .chronicle-undo { opacity: 0.7; color: var(--accent-jade); }

/* ---------- the reflection archive ---------- */

.archive-month { margin-top: var(--space-3); }
.archive-month-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-1); margin-bottom: var(--space-1);
  border-bottom: var(--hairline);
}
.archive-month-head strong {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md);
}
.archive-month-head span { font-size: var(--size-2xs); color: var(--mist); }

.archive-entry {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.archive-entry:hover { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.archive-entry.is-open {
  border-color: color-mix(in srgb, var(--lantern) 40%, transparent);
  background: color-mix(in srgb, var(--lantern) 5%, transparent);
}

.archive-head {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; background: transparent; border: none;
  padding: var(--space-2) var(--space-3);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

.archive-mark {
  flex: none; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lantern) 45%, transparent);
  color: var(--lantern); font-size: var(--size-sm);
}

.archive-text { flex: 1; min-width: 0; }
.archive-span {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.archive-intention {
  font-size: var(--size-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.archive-feelings { display: flex; gap: 0.25rem; flex: none; }
.archive-feeling {
  font-size: var(--size-3xs); color: var(--mist);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-pill); padding: 0.05rem 0.45rem;
}

.archive-chevron {
  flex: none; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--mist); font-size: var(--size-sm); line-height: 1;
}

.archive-body {
  padding: 0 var(--space-3) var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  margin-top: var(--space-1); padding-top: var(--space-3);
}
.archive-body .reflect-figures { gap: var(--space-3); margin-top: 0; }
.archive-body .reflect-figure b { font-size: var(--size-lg); }

.archive-realm {
  font-size: var(--size-2xs); color: var(--lantern); margin-top: var(--space-2);
}
.archive-verdict {
  font-size: var(--size-xs); color: var(--mist);
  margin-top: var(--space-2); font-style: italic;
}

@media (max-width: 40rem) {
  .archive-feelings { display: none; }
  .period-label { width: 100%; }
}

/* ---------- quest templates ---------- */

.modal.is-wide { width: min(44rem, 100%); }

.template-nudge {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--size-sm); color: var(--mist);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border-left: 2px solid var(--lantern);
  background: color-mix(in srgb, var(--lantern) 6%, transparent);
}
.template-nudge .ghost { padding: 0.2rem 0.65rem; font-size: var(--size-2xs); }

.template-list { margin-top: var(--space-3); }

.template-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  background: transparent; border: none;
  border-left: 2px solid var(--accent);
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  padding: var(--space-2) var(--space-3);
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.template-row:first-child { border-top: none; }
.template-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.template-text { flex: 1; min-width: 0; }
.template-title { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.template-title strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md); }
.template-objective { font-size: var(--size-sm); color: var(--mist); }
.template-meta { font-size: var(--size-3xs); color: var(--mist); opacity: 0.8; margin-top: 0.1rem; }
.template-flavour {
  font-family: var(--font-serif); font-size: var(--size-xs);
  color: var(--lantern); margin-top: 0.15rem;
}

.template-reward { flex: none; text-align: right; }
.template-reward b {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-lg);
  color: var(--accent-jade); font-variant-numeric: tabular-nums;
}
.template-reward span { display: block; font-size: var(--size-3xs); color: var(--mist); }

/* ---------- Titles, with their seals ---------- */

.title-group-head {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--hairline);
}
.deeds-panel .title-group-head:first-of-type { margin-top: var(--space-3); }

.title-card { text-align: center; }
.title-seal { width: 100%; max-width: 5.5rem; margin: 0 auto var(--space-2); }
.title-seal img { width: 100%; height: auto; display: block; }

/* Unearned seals are drained rather than hidden — the shape is there,
   the colour is not yet yours. */
.title-card.is-locked .title-seal img { filter: grayscale(1) brightness(0.4); }
.title-card.is-waiting .title-seal img { filter: grayscale(1) brightness(0.28); }
.title-card.is-locked:hover .title-seal img { filter: grayscale(0.6) brightness(0.65); }
.title-card.is-worn .title-seal img {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lantern) 55%, transparent));
}

.title-card.is-locked { opacity: 0.68; }
.title-card.is-waiting { opacity: 0.5; }

.title-requirement {
  font-size: var(--size-3xs); color: var(--accent);
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.title-card.is-waiting .title-requirement { color: var(--mist); font-style: italic; }

/* ---------- deeds, with their icons ---------- */

.deed { align-items: center; gap: var(--space-3); }

.deed-icon {
  flex: none; width: 3rem; height: 3rem;
  display: grid; place-items: center;
}
.deed-icon img { width: 100%; height: auto; display: block; }
.deed:not(.is-held) .deed-icon img { filter: grayscale(1) brightness(0.42); }
.deed.is-waiting .deed-icon img { filter: grayscale(1) brightness(0.24); }
.deed:not(.is-held):hover .deed-icon img { filter: grayscale(0.55) brightness(0.7); }

.deed-unknown {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px dashed var(--border); color: var(--mist); font-size: var(--size-sm);
}

.deed-name-line { display: flex; align-items: baseline; gap: var(--space-2); }
.deed-chinese { font-size: var(--size-2xs); color: var(--mist); }
.deed.is-held .deed-chinese { color: var(--accent); }

.deed-progress.is-waiting { color: var(--mist); font-style: italic; }
.deed-realm {
  display: block; font-size: var(--size-3xs); color: var(--mist);
  opacity: 0.7; margin-top: 0.15rem;
}
.deed.is-waiting { opacity: 0.55; }


/* ---------- a Stage, opened ---------- */

.stage-block { font: inherit; color: inherit; cursor: pointer; text-align: center; }
.stage-block.is-open {
  grid-column: 1 / -1;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.stage-reached {
  font-size: var(--size-3xs); color: var(--mist);
  font-variant-numeric: tabular-nums; margin-top: 0.2rem;
}
.stage-detail {
  display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center;
  width: 100%; margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: var(--hairline);
}
.stage-fact span {
  display: block; font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.stage-fact b {
  font-weight: 400; font-size: var(--size-md);
  font-variant-numeric: tabular-nums;
}
.stage-empty { font-size: var(--size-xs); color: var(--mist); }

.path-next {
  font-size: var(--size-2xs); color: var(--accent);
  margin-top: 0.15rem; position: relative;
}

/* ---------- the Quest Library ---------- */

.quest-tier-group { margin-top: var(--space-4); }
.quest-tier-group:first-of-type { margin-top: var(--space-3); }

.quest-tier-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline);
}
.quest-tier-emblem { width: 2.25rem; height: 2.25rem; flex: none; }
.quest-tier-head strong {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-md);
}
.quest-tier-head span { font-size: var(--size-2xs); color: var(--mist); }

.quest-template {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  background: transparent; border: none;
  border-left: 2px solid var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  padding: var(--space-2) var(--space-3);
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.quest-template:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.quest-template.is-locked { opacity: 0.45; cursor: default; }
.quest-template.is-locked:hover { background: transparent; }

.quest-template.tier-minor     { border-left-color: var(--accent-jade); }
.quest-template.tier-standard  { border-left-color: var(--moon); }
.quest-template.tier-difficult { border-left-color: var(--lantern); }
.quest-template.tier-grand     { border-left-color: var(--gold); }
.quest-template.tier-legendary { border-left-color: var(--accent-lacquer); }

.quest-template-art { flex: none; width: 2.75rem; }
.quest-template-art img { width: 100%; height: auto; display: block; }
.quest-template.is-locked .quest-template-art img { filter: grayscale(1) brightness(0.5); }

.quest-chinese { font-size: var(--size-2xs); color: var(--accent); }

.quest-award {
  font-size: var(--size-3xs); color: var(--accent-jade);
  margin-top: 0.15rem;
}
.quest-locked {
  font-size: var(--size-3xs); color: var(--lantern);
  margin-top: 0.15rem;
}

/* ---------- the emblem on a raised Quest ---------- */

.quest-emblem { flex: none; width: 2.5rem; display: grid; place-items: center; }
.quest-emblem img { width: 100%; height: auto; display: block; }
.quest.is-done .quest-emblem img { filter: grayscale(0.4); }
.quest.is-released .quest-emblem img { filter: grayscale(1) brightness(0.6); }

/* ============================================================
   The Cultivation Profile
   ============================================================ */

/* ---------- the standing ---------- */

.profile-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
  margin-bottom: var(--space-3);
}

/* Light behind the seal, so the page has a source rather than
   an evenly lit flatness. */
.profile-hero-glow {
  position: absolute; left: -6rem; top: 50%;
  width: 28rem; height: 28rem; transform: translateY(-50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--lantern) 16%, transparent), transparent 62%);
  pointer-events: none;
}

.profile-seal { position: relative; flex: none; width: min(15rem, 44vw); }
.profile-seal img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--ink) 80%, transparent));
}

.profile-hero-body { position: relative; flex: 1; min-width: 15rem; }

.profile-title {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--lantern) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--lantern) 8%, transparent);
  margin-bottom: var(--space-2);
}
.profile-title img { width: 2rem; height: 2rem; display: block; }
.profile-title-name { font-size: var(--size-sm); color: var(--lantern); }
.profile-title-chinese { font-size: var(--size-2xs); color: var(--mist); }

.profile-realm {
  font-size: var(--size-3xl); line-height: 1.05;
  margin-bottom: 0.15rem;
}
.profile-realm-line {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--size-sm); color: var(--mist);
  margin-bottom: var(--space-3);
}
.profile-realm-line .cjk { color: var(--accent); font-size: var(--size-md); }
.profile-realm-line em { font-style: italic; opacity: 0.85; }

.profile-qi { display: flex; align-items: baseline; gap: var(--space-2); }
.profile-qi b {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-2xl);
  font-variant-numeric: tabular-nums;
}
.profile-qi span {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.1em;
}

.profile-bar {
  height: 5px; margin: var(--space-2) 0 0.35rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}
.profile-bar.small { height: 3px; margin: 0.35rem 0 0.2rem; }
.profile-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--lantern));
}

.profile-next { font-size: var(--size-2xs); color: var(--mist); }
.profile-gate {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--size-xs); color: var(--lantern);
  border: 1px solid var(--lantern); border-radius: var(--radius-pill);
  padding: 0.15rem 0.7rem;
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- the figures ---------- */

.profile-figures {
  position: relative;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  background: var(--border);
  border: var(--hairline); border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: var(--space-3);
}
.profile-plinth {
  background: var(--surface);
  padding: var(--space-3) var(--space-2);
  text-align: center;
}
.profile-plinth b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-xl); font-variant-numeric: tabular-nums;
}
.profile-plinth span {
  display: block; font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem;
}
.profile-plinth small { display: block; font-size: var(--size-3xs); color: var(--mist); opacity: 0.7; }

/* ---------- panels ---------- */

/* `position: relative` matters here: the inset hairline on a deeds
   panel is absolutely positioned, and without a positioned parent it
   escapes and draws itself over whatever sits above. That was the
   overlap. */
.profile-panel {
  position: relative;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.profile-head { margin-bottom: var(--space-3); }
.profile-head-line { display: flex; align-items: baseline; gap: var(--space-2); }
.profile-head h3 { font-size: var(--size-lg); }
.profile-head .cjk { font-size: var(--size-sm); color: var(--accent); }
.profile-head p { font-size: var(--size-2xs); color: var(--mist); margin-top: 0.15rem; }

.profile-subhead {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.09em;
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-1); border-bottom: var(--hairline);
}
.profile-panel .profile-subhead:first-of-type { margin-top: 0; }

/* ---------- the Paths ---------- */

.profile-paths {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.profile-path {
  text-align: center;
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.profile-path.is-untrodden { opacity: 0.45; }
.profile-path img { width: 100%; max-width: 4rem; height: auto; display: block; margin: 0 auto; }
.profile-path.is-untrodden img { filter: grayscale(1) brightness(0.5); }
.profile-path-level {
  font-family: var(--font-serif); font-size: var(--size-lg); margin-top: 0.2rem;
}
.profile-path-name { font-size: var(--size-2xs); }
.profile-path-rank { font-size: var(--size-3xs); color: var(--accent); }
.profile-path-mastery {
  font-size: var(--size-3xs); color: var(--mist); font-variant-numeric: tabular-nums;
}

/* ---------- quests and lately ---------- */

/* The last two sit side by side, everything above them runs full
   width. Equal columns, because neither outranks the other. */
.profile-columns {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
  margin-bottom: var(--space-3);
}
.profile-side { display: grid; gap: var(--space-3); }

/* A panel inside the grid keeps no margin of its own — the gap does
   the spacing, and doubling it pushes the columns out of line. */
.profile-columns > .profile-panel,
.profile-side > .profile-panel { margin-bottom: 0; }

.profile-quest {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}
.profile-quest img { width: 2.5rem; height: 2.5rem; flex: none; }
.profile-quest-text { flex: 1; min-width: 0; }
.profile-quest-name { font-family: var(--font-serif); font-size: var(--size-md); }
.profile-quest-sub { font-size: var(--size-3xs); color: var(--mist); }
.profile-quest-qi {
  flex: none; font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--accent-jade); font-variant-numeric: tabular-nums;
}

.profile-finished { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.profile-finished-chip {
  display: flex; align-items: center; gap: 0.45rem;
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem 0.2rem 0.2rem;
  font-size: var(--size-2xs);
}
.profile-finished-chip img { width: 1.6rem; height: 1.6rem; }
.profile-finished-chip small { display: block; font-size: var(--size-3xs); color: var(--mist); }

.profile-entry {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  font-size: var(--size-sm);
}
.profile-entry:last-child { border-bottom: none; }
.profile-entry-text { flex: 1; min-width: 0; }
.profile-entry-text small { display: block; font-size: var(--size-3xs); color: var(--mist); }
.profile-entry b {
  flex: none; font-weight: 500; color: var(--accent-jade);
  font-variant-numeric: tabular-nums;
}
.profile-entry b.is-turbid { color: var(--moon); }

/* ---------- the sigils held ---------- */

.profile-sigils {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.profile-sigil {
  background: transparent; border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.profile-sigil:hover { transform: translateY(-2px); border-color: var(--accent); }
.profile-sigil img { width: 100%; max-width: 4.5rem; height: auto; display: block; margin: 0 auto; }
.profile-sigil.is-worn {
  border-color: var(--lantern);
  background: color-mix(in srgb, var(--lantern) 8%, transparent);
}
.profile-sigil.is-worn img {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lantern) 55%, transparent));
}
.profile-sigil-name { font-size: var(--size-2xs); margin-top: 0.2rem; }
.profile-sigil-chinese { font-size: var(--size-3xs); color: var(--mist); }
.profile-worn { font-size: var(--size-3xs); color: var(--lantern); letter-spacing: 0.1em; }

/* ---------- the deeds done ---------- */

.profile-deeds {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}
.profile-deed { text-align: center; }
.profile-deed img { width: 100%; max-width: 3.75rem; height: auto; display: block; margin: 0 auto; }
.profile-deed-name { font-size: var(--size-3xs); line-height: 1.25; margin-top: 0.15rem; }
.profile-deed small { font-size: var(--size-3xs); color: var(--mist); }
.profile-deed.rarity-legendary .profile-deed-name { color: var(--accent-lacquer); }
.profile-deed.rarity-mythic .profile-deed-name { color: var(--blossom); }

@media (max-width: 58rem) {
  .profile-columns { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .profile-hero { flex-direction: column; text-align: center; padding: var(--space-4); }
  .profile-seal { width: 12rem; }
  .profile-realm-line, .profile-qi { justify-content: center; }
  .profile-realm { font-size: var(--size-2xl); }
}

/* ============================================================
   The orb, with the artwork it earned
   ============================================================ */

/* ---------- the panel head ---------- */

.orb-panel-head { display: flex; align-items: center; gap: var(--space-2); }

.orb-seal { flex: none; width: 3.5rem; }
.orb-seal img { width: 100%; height: auto; display: block; }

.orb-who { flex: 1; min-width: 0; }
.orb-realm { font-family: var(--font-serif); font-size: var(--size-md); line-height: 1.2; }
.orb-realm-chinese {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: var(--size-2xs); color: var(--mist);
}
.orb-realm-chinese .cjk { color: var(--accent); }
.orb-realm-chinese .stage { opacity: 0.85; }

/* ---------- the worn Title ---------- */

button.orb-title {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%; margin-top: var(--space-2);
  background: color-mix(in srgb, var(--lantern) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--lantern) 35%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.7rem 0.22rem 0.22rem;
  font: inherit; font-size: var(--size-xs); color: var(--lantern);
  text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
button.orb-title:hover { border-color: var(--lantern); }
button.orb-title img { width: 1.6rem; height: 1.6rem; flex: none; display: block; }
button.orb-title span { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
button.orb-title.is-empty {
  color: var(--mist);
  background: transparent;
  border-color: color-mix(in srgb, var(--mist) 30%, transparent);
  border-style: dashed;
}

/* ---------- Paths, with their seals ---------- */

.orb-path-sigil { width: 1.1rem; height: 1.1rem; flex: none; display: block; }
.orb-path-head { gap: 0.35rem; }

/* ---------- what was earned lately ---------- */

.orb-deeds { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--hairline); }
.orb-deed-strip { display: flex; gap: 0.3rem; margin-top: var(--space-2); }
.orb-deed { flex: 1; max-width: 2.75rem; }
.orb-deed img { width: 100%; height: auto; display: block; }

.orb-foot .primary { width: 100%; padding: 0.4rem; font-size: var(--size-sm); }

/* ---------- mandatory and inapplicable conditions ---------- */

.trial-purpose {
  font-size: var(--size-sm); color: var(--mist);
  margin-bottom: var(--space-3);
}

.trial-condition.is-required { border-left: 2px solid var(--lantern); padding-left: var(--space-2); }
.trial-required {
  margin-left: 0.45rem; font-size: var(--size-3xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--lantern);
  border: 1px solid color-mix(in srgb, var(--lantern) 50%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.35rem;
}

/* Nothing went wrong, so nothing is being asked for. Dimmed rather
   than struck out — it is not a failure. */
.trial-condition.is-moot { opacity: 0.45; }
.trial-condition.is-moot .trial-mark { border-style: dashed; }
.trial-condition.is-moot .trial-detail { font-style: italic; }

/* ============================================================
   Turbid Qi
   ============================================================ */

.turbid-preamble {
  font-size: var(--size-sm); color: var(--mist);
  padding: var(--space-3); margin-bottom: var(--space-3);
  border-left: 2px solid var(--moon);
  background: color-mix(in srgb, var(--moon) 6%, transparent);
}

.turbid-incident {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-left: 2px solid var(--moon);
}
.turbid-incident .ghost { padding: 0.3rem 0.75rem; font-size: var(--size-2xs); }
.turbid-amount {
  flex: none; font-family: var(--font-serif); font-size: var(--size-lg);
  color: var(--moon); font-variant-numeric: tabular-nums;
}

.turbid-severity {
  font-size: var(--size-3xs); text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  padding: 0 0.4rem; color: var(--mist);
}
.turbid-severity.is-noticeable { color: var(--moon); }
.turbid-severity.is-moderate   { color: var(--lantern); }
.turbid-severity.is-serious    { color: var(--accent-lacquer); }
.turbid-severity.is-major      { color: var(--accent-lacquer); }
.turbid-severity.is-exceptional { color: var(--blossom); }

/* ---------- the rules ---------- */

.turbid-rule {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  opacity: 0.62;
  transition: opacity var(--fast) var(--ease);
}
.turbid-rule.is-on { opacity: 1; }
.turbid-rule.is-waiting { opacity: 0.38; }

.turbid-rule-text { flex: 1; min-width: 0; }
.turbid-timing { font-size: var(--size-3xs); color: var(--accent); margin-top: 0.1rem; }

.turbid-cost { flex: none; text-align: right; }
.turbid-cost b {
  font-weight: 400; font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--moon); font-variant-numeric: tabular-nums;
}
.turbid-cost span { display: block; font-size: var(--size-3xs); color: var(--mist); }

/* A switch that looks off when it is off. */
.turbid-switch {
  flex: none; width: 2.4rem; height: 1.3rem;
  border-radius: var(--radius-pill);
  border: var(--hairline);
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  padding: 0; cursor: pointer; position: relative;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.turbid-switch i {
  position: absolute; top: 2px; left: 2px;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--surface-3);
  transition: transform var(--mid) var(--ease), background var(--mid) var(--ease);
}
.turbid-switch.is-on {
  background: color-mix(in srgb, var(--moon) 30%, transparent);
  border-color: var(--moon);
}
.turbid-switch.is-on i { transform: translateX(1.1rem); background: var(--surface); }
.turbid-switch:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 40rem) {
  .turbid-incident .turbid-amount { flex: 1 1 100%; }
}

/* ---------- Turbid Qi, on the profile ---------- */

.profile-turbid-figure {
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  margin-bottom: var(--space-2);
}
.profile-turbid-figure b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-2xl); color: var(--moon);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.profile-turbid-figure span { font-size: var(--size-3xs); color: var(--mist); }

.profile-turbid-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.35rem 0; font-size: var(--size-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
.profile-turbid-row:last-of-type { border-bottom: none; }
.profile-turbid-row b { flex: none; color: var(--moon); font-weight: 500; }

.profile-clean { text-align: center; padding: var(--space-3) 0; }
.profile-clean-glyph {
  font-size: var(--size-3xl); color: var(--accent-jade); opacity: 0.55; line-height: 1;
}
.profile-clean p { font-size: var(--size-xs); color: var(--mist); margin-top: var(--space-2); }

.profile-panel > .ghost {
  width: 100%; margin-top: var(--space-3);
  padding: 0.35rem; font-size: var(--size-xs);
}

/* ---------- Turbid Qi, in the orb ---------- */

.orb-turbid-tools { display: flex; gap: var(--space-1); }
.orb-turbid-tools .ghost { flex: 1; padding: 0.35rem; font-size: var(--size-2xs); }

.orb-clean {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
  font-size: var(--size-2xs); color: var(--mist);
}
.orb-clean .cjk { font-size: var(--size-lg); color: var(--accent-jade); opacity: 0.7; }

/* ---------- the Turbid Qi banner ---------- */

.turbid-banner {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.turbid-sigil { flex: none; width: min(9rem, 30vw); }
.turbid-sigil img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--moon) 30%, transparent));
}
.turbid-banner-text { flex: 1; min-width: 0; }
.turbid-banner h2 { font-size: var(--size-2xl); }
.turbid-banner p { font-size: var(--size-sm); color: var(--mist); margin-top: var(--space-1); }

.turbid-notices {
  display: inline-block; margin-top: 0.2rem;
  font-size: var(--size-3xs); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--mist);
  border: 1px solid color-mix(in srgb, var(--mist) 35%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.4rem;
}
.turbid-notices.is-palace {
  color: var(--accent-jade);
  border-color: color-mix(in srgb, var(--accent-jade) 45%, transparent);
}

.turbid-rule .ghost { flex: none; padding: 0.25rem 0.6rem; font-size: var(--size-2xs); }

@media (max-width: 40rem) {
  .turbid-banner { flex-direction: column; text-align: center; }
  .turbid-sigil { width: 7rem; }
}

/* ---------- the Immortal Reflection ---------- */

.immortal-panel {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4);
}

/* A single band of light across the top, so it reads as the rarer
   of the two Reflections without shouting. */
.immortal-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.immortal-panel.is-done { border-color: color-mix(in srgb, var(--accent-jade) 45%, transparent); }
.immortal-panel.is-done::before {
  background: linear-gradient(90deg, transparent, var(--accent-jade), transparent);
}

.immortal-head { margin-bottom: var(--space-3); }
.immortal-head h3 {
  font-size: var(--size-xl);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.immortal-head .cjk { font-size: var(--size-md); color: var(--gold); }
.immortal-head p { font-size: var(--size-sm); color: var(--mist); margin-top: 0.15rem; }

.immortal-panel .reflect-figures {
  padding: var(--space-3) 0;
  border-top: var(--hairline); border-bottom: var(--hairline);
  margin-bottom: var(--space-3);
}
.immortal-since {
  font-size: var(--size-2xs); color: var(--mist);
  margin-bottom: var(--space-4);
}
.immortal-panel .reflect-question label { font-size: var(--size-lg); }

/* ============================================================
   Moving Scrolls
   ============================================================ */

.scroll-counts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.scroll-count {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.scroll-count:hover { border-color: var(--accent); }
.scroll-count.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.scroll-count b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-xl); font-variant-numeric: tabular-nums;
}
.scroll-count span { font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em; }

.scroll-search {
  flex: 1; min-width: 10rem; max-width: 22rem;
  background: var(--ink); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem; font: inherit; font-size: var(--size-sm);
}

/* ---------- the shelf ---------- */

.scroll-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  margin-top: var(--space-3);
}

.scroll-card {
  background: transparent; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: transform var(--fast) var(--ease);
}
.scroll-card:hover { transform: translateY(-3px); }

.scroll-poster {
  position: relative; aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  border: var(--hairline);
  display: grid; place-items: center;
}
.scroll-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scroll-card:hover .scroll-poster { border-color: var(--accent); }
.scroll-card.is-plan .scroll-poster img { filter: grayscale(0.5) brightness(0.8); }
.scroll-card.is-dropped .scroll-poster img { filter: grayscale(1) brightness(0.6); }

.scroll-noposter { font-size: var(--size-2xl); color: var(--mist); opacity: 0.4; }

.scroll-fav {
  position: absolute; top: 0.35rem; right: 0.4rem;
  color: var(--accent-lacquer); font-size: var(--size-md);
  text-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 70%, transparent);
}
.scroll-score {
  position: absolute; bottom: 0.35rem; left: 0.4rem;
  background: color-mix(in srgb, var(--ink) 85%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.4rem;
  font-size: var(--size-3xs); color: var(--gold); font-variant-numeric: tabular-nums;
}

.scroll-title {
  font-size: var(--size-sm); margin-top: var(--space-2); line-height: 1.3;
}
.scroll-sub { font-size: var(--size-3xs); color: var(--mist); }

.scroll-bar {
  height: 3px; margin-top: 0.35rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 65%, transparent); overflow: hidden;
}
.scroll-bar i { display: block; height: 100%; background: var(--accent); }
.scroll-progress { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.15rem; }

/* ---------- one title ---------- */

.scroll-detail {
  display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-3) 0;
}
.scroll-detail-poster { flex: none; width: min(13rem, 40vw); }
.scroll-detail-poster img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm); border: var(--hairline);
}
.scroll-detail-poster .ghost {
  width: 100%; margin-top: var(--space-2);
  padding: 0.3rem; font-size: var(--size-2xs);
}
.scroll-detail-body { flex: 1; min-width: 15rem; }
.scroll-detail-title { font-size: var(--size-2xl); line-height: 1.1; }
.scroll-detail-original { font-size: var(--size-sm); color: var(--mist); }
.scroll-detail-line { font-size: var(--size-xs); color: var(--accent); margin-top: 0.2rem; }
.scroll-synopsis { font-size: var(--size-sm); color: var(--mist); margin-top: var(--space-3); }

.scroll-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: var(--space-3); }
.scroll-tag {
  font-size: var(--size-3xs); color: var(--mist);
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.1rem 0.6rem;
}
.scroll-tag.is-genre { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.scroll-tag.is-trope { color: var(--lantern); border-color: color-mix(in srgb, var(--lantern) 40%, transparent); }

.scroll-cast { display: grid; gap: 0.2rem; margin-top: var(--space-3); }
.scroll-person {
  display: flex; gap: var(--space-2); font-size: var(--size-sm);
  padding: 0.25rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
.scroll-person-name { flex: none; min-width: 9rem; }
.scroll-person-role { color: var(--mist); }

/* ---------- looking one up ---------- */

.lookup-results { margin-top: var(--space-3); }
.lookup-row {
  display: flex; gap: var(--space-3); width: 100%; text-align: left;
  background: transparent; border: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  padding: var(--space-2); font: inherit; color: inherit; cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.lookup-row:first-child { border-top: none; }
.lookup-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lookup-row:disabled { opacity: 0.5; }

.lookup-poster {
  flex: none; width: 3.5rem; aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.lookup-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lookup-text { flex: 1; min-width: 0; }
.lookup-title { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lookup-title strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md); }
.lookup-title span { font-size: var(--size-2xs); color: var(--mist); }
.lookup-original { font-size: var(--size-2xs); color: var(--mist); }
.lookup-overview { font-size: var(--size-2xs); color: var(--mist); margin-top: 0.2rem; }

/* ---------- posters a title has had ---------- */

.poster-strip {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  margin-top: var(--space-2);
}
.poster-option {
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-1); text-align: center;
}
.poster-option.is-current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.poster-option img { width: 100%; height: auto; display: block; border-radius: 2px; }
.poster-origin {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem;
}
.poster-option .ghost { width: 100%; padding: 0.15rem; font-size: var(--size-3xs); margin-top: 0.15rem; }

@media (max-width: 40rem) {
  .scroll-grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
  .scroll-person-name { min-width: 7rem; }
}

/* ============================================================
   The Court Artist Pavilion
   ============================================================ */

.court-ranks {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-bottom: var(--space-3);
}
.court-rank {
  background: var(--surface); border: var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.court-rank:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.court-rank.is-on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.court-rank.is-none { border-top-color: var(--border); }
.court-rank b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-xl); font-variant-numeric: tabular-nums;
}
.court-rank span { font-size: var(--size-3xs); color: var(--mist); display: block; }
.court-rank-chinese { color: var(--accent) !important; }

/* ---------- the court ---------- */

.court-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  margin-top: var(--space-3);
}

.court-card {
  background: transparent; border: none; padding: 0;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: transform var(--fast) var(--ease);
}
.court-card:hover { transform: translateY(-3px); }

.court-portrait {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  border: 2px solid var(--border);
  display: grid; place-items: center;
}
.court-card.is-ranked .court-portrait { border-color: var(--accent); }
.court-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.court-noface { font-size: var(--size-2xl); color: var(--mist); opacity: 0.5; }

.court-name { font-size: var(--size-sm); margin-top: var(--space-2); line-height: 1.25; }
.court-hangul { font-size: var(--size-3xs); color: var(--mist); }
.court-rank-tag { font-size: var(--size-3xs); color: var(--accent); margin-top: 0.2rem; }
/* A Court Artist is a standing, not an absence. It reads as its own
   thing rather than as a dimmed version of a rank. */
.court-rank-tag.is-court { color: var(--moon); }
.court-rank.is-none { border-top-color: var(--moon); }
.court-rank.is-court { border-top-color: var(--moon); }
.court-badge.is-court {
  border-color: color-mix(in srgb, var(--moon) 50%, transparent);
  background: color-mix(in srgb, var(--moon) 9%, transparent);
}
.court-badge.is-court strong { color: var(--moon); }
.court-credits { font-size: var(--size-3xs); color: var(--mist); }

/* ---------- one of them ---------- */

.court-detail {
  display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-3) 0;
}
.court-detail-portrait { flex: none; width: min(11rem, 36vw); }
.court-detail-portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 50%; border: 2px solid var(--accent);
}
.court-detail-portrait .ghost {
  width: 100%; margin-top: var(--space-2);
  padding: 0.3rem; font-size: var(--size-2xs);
}
.court-detail-body { flex: 1; min-width: 15rem; }
.court-detail-name { font-size: var(--size-2xl); line-height: 1.1; }
.court-detail-native { font-size: var(--size-sm); color: var(--mist); }

.court-badge {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  margin-top: var(--space-2);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  padding: 0.15rem 0.8rem;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.court-badge strong { font-weight: 400; font-size: var(--size-sm); color: var(--accent); }
.court-badge .cjk { font-size: var(--size-2xs); color: var(--mist); }
.court-rank-meaning { font-size: var(--size-xs); color: var(--mist); margin-top: var(--space-1); }

.court-rank-row {
  display: flex; align-items: center; gap: var(--space-1);
  flex-wrap: wrap; margin-top: var(--space-3);
  padding-top: var(--space-3); border-top: var(--hairline);
}

.court-credits-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  margin-top: var(--space-3);
}
.court-credit { text-decoration: none; color: inherit; }
.court-credit img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: var(--hairline);
}
.court-credit-title { font-size: var(--size-3xs); margin-top: 0.2rem; line-height: 1.25; }
.court-credit-role { font-size: var(--size-3xs); color: var(--mist); }

@media (max-width: 40rem) {
  .court-grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
}

/* ============================================================
   Collected Works
   ============================================================ */

.works-loose {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--size-sm); color: var(--mist);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.works-loose .ghost { padding: 0.25rem 0.7rem; font-size: var(--size-2xs); }

.works-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  margin-top: var(--space-3);
}

.work-card {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md); overflow: hidden;
  padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.work-card:hover { transform: translateY(-3px); border-color: var(--accent); }

/* Sixteen by nine: a work is shown by the world it is set in rather
   than by one of its covers. */
.work-backdrop {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  display: grid; place-items: center;
}
.work-backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No backdrop yet, so a poster stands in — blurred and widened rather
   than letterboxed, which looks deliberate instead of broken. */
.work-backdrop img.is-borrowed {
  filter: blur(1px) brightness(0.65) saturate(0.85);
  transform: scale(1.1);
}

.work-bl {
  position: absolute; top: 0.4rem; left: 0.5rem;
  background: color-mix(in srgb, var(--blossom) 85%, transparent);
  color: var(--ink); border-radius: var(--radius-pill);
  padding: 0 0.45rem; font-size: var(--size-3xs); font-weight: 600; letter-spacing: 0.06em;
}

.work-card-body { padding: var(--space-3); }
.work-card-name { font-family: var(--font-serif); font-size: var(--size-md); line-height: 1.25; }
.work-card-sub { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.15rem; }

/* ---------- one work ---------- */

.work-hero {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md); overflow: hidden;
  margin: var(--space-3) 0;
}

.work-hero-art {
  position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  display: grid; place-items: center;
}
.work-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-hero-empty { font-size: var(--size-4xl); color: var(--mist); opacity: 0.3; }

.work-hero-art::after {
  content: ""; position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(to bottom,
    transparent, color-mix(in srgb, var(--surface) 70%, transparent) 60%, var(--surface));
  pointer-events: none;
}
.work-hero-art .ghost {
  position: absolute; right: var(--space-3); top: var(--space-3);
  z-index: 1; padding: 0.25rem 0.7rem; font-size: var(--size-2xs);
  background: color-mix(in srgb, var(--ink) 75%, transparent);
}

.work-hero-body { padding: 0 var(--space-4) var(--space-4); margin-top: -2rem; position: relative; }
.work-hero-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.work-hero-name h3 { font-size: var(--size-2xl); line-height: 1.1; }
.work-hero-name .work-bl { position: static; }
.work-master { font-size: var(--size-2xs); color: var(--accent); margin-top: 0.2rem; }

/* ---------- an item inside a work ---------- */

.work-entry {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.work-entry:first-of-type { border-top: none; }
.work-entry.is-bl { border-left: 2px solid color-mix(in srgb, var(--blossom) 45%, transparent);
  padding-left: var(--space-3); }

.work-entry-text { flex: 1; min-width: 0; }
.work-entry-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.work-entry-name strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md); }
.work-entry-country { font-size: var(--size-2xs); color: var(--accent); }
.work-entry-name .work-bl { position: static; }
.work-entry-original { font-size: var(--size-2xs); color: var(--mist); }
.work-entry-aka { font-size: var(--size-3xs); color: var(--mist); opacity: 0.8; }
.work-entry-about { font-size: var(--size-xs); color: var(--mist); margin-top: var(--space-2); }
.work-entry-master { font-size: var(--size-3xs); color: var(--accent); margin-top: 0.2rem; }
.work-entry-stamp { font-size: var(--size-3xs); color: var(--mist); opacity: 0.6; margin-top: var(--space-2); }

.work-entry-tools { flex: none; display: flex; flex-direction: column; gap: 0.2rem; }
.work-entry-tools .ghost { padding: 0.2rem 0.6rem; font-size: var(--size-3xs); }

/* ---------- the formats of one item ---------- */

.work-formats { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: var(--space-2); }
.work-format {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.1rem 0.6rem; font-size: var(--size-3xs);
}
.work-format b { font-weight: 500; color: var(--blossom); }
.work-format span { color: var(--mist); font-size: var(--size-3xs); }

.format-list { display: grid; gap: 0.35rem; margin-top: var(--space-2); }
.format-row { display: flex; gap: 0.35rem; align-items: center; }
.format-row select { flex: 1 1 8rem; min-width: 0; }
.format-row input { flex: 1 1 7rem; min-width: 0; }
.format-row .format-year { flex: 0 0 5rem; }
.format-row .ghost { flex: none; padding: 0.3rem 0.6rem; }
.format-list > .ghost { justify-self: start; padding: 0.25rem 0.75rem; font-size: var(--size-2xs); }

/* ---------- the notes on an item ---------- */

.work-notes { margin-top: var(--space-2); display: grid; gap: 0.2rem; }
.work-note {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--size-2xs);
  padding-left: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--lantern) 40%, transparent);
}
.work-note-when {
  flex: none; color: var(--mist); font-variant-numeric: tabular-nums; font-size: var(--size-3xs);
}
.work-note-body { flex: 1; min-width: 0; }
.work-note-drop {
  flex: none; background: none; border: none; color: var(--mist);
  cursor: pointer; opacity: 0; font-size: var(--size-sm); line-height: 1;
  transition: opacity var(--fast) var(--ease);
}
.work-note:hover .work-note-drop { opacity: 1; }
.work-note-drop:hover { color: var(--accent-lacquer); }

/* ---------- choosing a backdrop ---------- */

.backdrop-strip {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  margin-top: var(--space-2);
}
.backdrop-option {
  background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: 2px;
  cursor: pointer; text-align: center;
  transition: border-color var(--fast) var(--ease);
}
.backdrop-option:hover { border-color: var(--accent); }
.backdrop-option.is-current { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.backdrop-option img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 2px;
}
.backdrop-option .ghost { width: 100%; padding: 0.15rem; font-size: var(--size-3xs); margin-top: 0.15rem; }
.backdrop-option:disabled { opacity: 0.5; }

.field-hint { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.2rem; }

.works-inside {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  margin-top: var(--space-3);
}
.work-item { text-align: center; }
.work-item img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: var(--hairline);
}
.work-item-title { font-size: var(--size-3xs); margin-top: 0.25rem; line-height: 1.25; }
.work-item-sub { font-size: var(--size-3xs); color: var(--mist); }
.work-item .ghost {
  width: 100%; margin-top: 0.25rem; padding: 0.15rem; font-size: var(--size-3xs);
  opacity: 0; transition: opacity var(--fast) var(--ease);
}
.work-item:hover .ghost { opacity: 1; }

/* ---------- choosing what goes in ---------- */

.pick-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  margin-top: var(--space-2);
}
.pick-item {
  background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: var(--space-1);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pick-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pick-item.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.pick-item img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: 2px;
}
.pick-title { font-size: var(--size-3xs); margin-top: 0.2rem; line-height: 1.2; }
.pick-year { font-size: var(--size-3xs); color: var(--mist); }

/* ============================================================
   The Hall of Paired Fates
   ============================================================ */

.pairing-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-top: var(--space-3);
}

.pairing-card {
  position: relative;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pairing-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.pairing-card.is-fated { border-left: 3px solid var(--accent-lacquer); }
.pairing-card.is-imagined { border-left: 3px solid var(--lantern); border-style: dashed; }
.pairing-card.is-archived { border-left: 3px solid var(--border); opacity: 0.72; }

/* Two faces and a knot between them. The knot is the point. */
.pairing-faces {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-1);
}
.pairing-face {
  flex: none; width: 3.25rem; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  display: grid; place-items: center;
}
.pairing-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pairing-face .court-noface { font-size: var(--size-lg); }

.pairing-knot {
  flex: none; font-size: var(--size-md); color: var(--accent-lacquer);
  opacity: 0.8; margin: 0 -0.2rem; z-index: 1;
}

.pairing-faces.is-large .pairing-face { width: 5.5rem; }
.pairing-faces.is-large .pairing-knot { font-size: var(--size-2xl); }
.pairing-faces.is-large .court-noface { font-size: var(--size-2xl); }

.pairing-name {
  font-family: var(--font-serif); font-size: var(--size-md);
  margin-top: var(--space-2); line-height: 1.2;
}
.pairing-sides { font-size: var(--size-3xs); color: var(--mist); }
.pairing-source { font-size: var(--size-3xs); color: var(--mist); opacity: 0.8; margin-top: 0.15rem; }

.pairing-score {
  position: absolute; top: 0.4rem; right: 0.5rem;
  font-size: var(--size-3xs); color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.pairing-detail {
  display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--accent-lacquer);
  border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-3) 0;
}
.pairing-detail-body { flex: 1; min-width: 15rem; }
.pairing-chinese { font-size: var(--size-md); color: var(--accent); }

@media (max-width: 40rem) {
  .pairing-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .pairing-face { width: 2.75rem; }
}

/* ---------- what a title belongs to ---------- */

.scroll-belongs {
  display: grid; gap: 1px;
  background: var(--border);
  border: var(--hairline); border-radius: var(--radius-sm);
  overflow: hidden; margin-top: var(--space-3);
}

.belongs-row {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
}
.belongs-glyph {
  flex: none; width: 1.6rem; text-align: center;
  font-size: var(--size-md); color: var(--accent); opacity: 0.7;
}
.belongs-text { flex: 1; min-width: 0; }
.belongs-label {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.belongs-value {
  font-size: var(--size-sm); color: var(--blossom);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
a.belongs-value:hover { color: var(--accent); text-decoration: underline; }

/* Written down but not recorded properly — the OTP field with no
   pairing behind it. Worth distinguishing from nothing at all. */
.belongs-value.is-loose { color: var(--lantern); font-style: italic; }
.belongs-value.is-empty { color: var(--mist); opacity: 0.7; }

.belongs-row .ghost { flex: none; padding: 0.22rem 0.65rem; font-size: var(--size-3xs); }

/* A cast list inside a drama is a little tighter than the Court. */
.scroll-detail ~ .panel .court-grid,
.panel .court-grid { margin-top: var(--space-3); }

/* An anchor standing in for a button, in an empty state. */
.empty a.ghost {
  display: inline-block; margin-top: var(--space-3);
  padding: 0.3rem 0.9rem; font-size: var(--size-xs);
  border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--mist); text-decoration: none;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.empty a.ghost:hover { color: var(--blossom); border-color: var(--accent); }

/* ============================================================
   Form controls, everywhere

   Selects were left to the browser, which meant a grey system
   dropdown sitting inside a lacquer-and-jade palace. These rules
   are deliberately unscoped: any select, anywhere, including ones
   in wings not yet built.
   ============================================================ */

select,
input[type="text"], input[type="search"], input[type="url"],
input[type="number"], input[type="date"], input[type="email"],
input[type="password"], textarea {
  background: var(--ink);
  color: var(--blossom);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  font: inherit; font-size: var(--size-sm);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

select:hover, input:hover, textarea:hover { border-color: var(--mist); }

select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--ink));
}

/* The arrow, drawn rather than inherited, so it matches the palette
   and stays put across browsers. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mist) 50%),
    linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) calc(50% + 1px),
    calc(100% - 0.75rem) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select:hover, select:focus-visible {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}

/* The open list is drawn by the operating system. These are the only
   two properties it reliably honours, and they are worth setting:
   without them the list is white-on-white in a dark theme. */
select option {
  background: var(--surface);
  color: var(--blossom);
}
select option:checked { background: var(--accent); }

textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55; }

input::placeholder, textarea::placeholder { color: var(--mist); opacity: 0.65; }

/* A date field's own icon is drawn by the browser in black, which is
   invisible on ink. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.75) sepia(0.2);
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5; cursor: not-allowed;
}

.work-about {
  font-size: var(--size-sm); color: var(--blossom);
  margin-top: var(--space-2);
}
.empty .primary { margin-top: var(--space-3); }

/* ---------- an item that lives somewhere else ---------- */

.work-entry.is-elsewhere {
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-left: var(--space-3);
}

.work-entry-art { flex: none; width: 3.5rem; }
.work-entry-art img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: var(--hairline);
  transition: border-color var(--fast) var(--ease);
}
.work-entry-art:hover img { border-color: var(--accent); }

.work-entry-link { text-decoration: none; color: inherit; }
.work-entry-link:hover strong { color: var(--accent); text-decoration: underline; }

.work-entry-name .scroll-score { position: static; }

.work-entry-tools a.ghost {
  display: block; text-align: center; text-decoration: none;
  padding: 0.2rem 0.6rem; font-size: var(--size-3xs);
  border: var(--hairline); border-radius: var(--radius-sm);
  color: var(--mist);
}
.work-entry-tools a.ghost:hover { color: var(--blossom); border-color: var(--accent); }

.work-own-notes { margin-top: var(--space-3); }
.work-own-notes p { font-size: var(--size-sm); color: var(--mist); margin-top: 0.2rem; }

/* ============================================================
   The items inside a work, as tiles
   ============================================================ */

.item-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  margin-top: var(--space-3);
}

.item-tile {
  background: transparent; border: none; padding: 0;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: transform var(--fast) var(--ease);
}
.item-tile:hover { transform: translateY(-3px); }

.item-tile-art {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--radius-sm);
  border: var(--hairline);
  background: color-mix(in srgb, var(--ink) 55%, var(--surface));
  display: grid; place-items: center;
  transition: border-color var(--fast) var(--ease);
}
.item-tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-tile:hover .item-tile-art { border-color: var(--accent); }
.item-tile.is-open .item-tile-art {
  border-color: var(--accent); border-width: 2px;
}

/* No cover, so the kind's own character stands in. Better than a grey
   rectangle, and it says what sort of thing this is. */
.item-tile-glyph {
  font-size: var(--size-2xl); color: var(--accent); opacity: 0.35;
}
.item-tile.is-bl .item-tile-glyph { color: var(--blossom); }

/* A thing tracked elsewhere says so quietly. */
.item-tile-elsewhere {
  position: absolute; top: 0.3rem; right: 0.4rem;
  font-size: var(--size-2xs); color: var(--accent);
  text-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 80%, transparent);
}

.item-tile-name {
  font-size: var(--size-2xs); line-height: 1.25; margin-top: 0.3rem;
}
.item-tile.is-open .item-tile-name { color: var(--accent); }
.item-tile-country { font-size: var(--size-3xs); color: var(--accent); }
.item-tile-sub { font-size: var(--size-3xs); color: var(--mist); }

/* ---------- the one being looked at ---------- */

.item-detail {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.item-detail-head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  justify-content: space-between; flex-wrap: wrap;
}
.item-detail-tools { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.item-detail-tools .ghost { padding: 0.2rem 0.65rem; font-size: var(--size-3xs); }
.item-detail-tools a.ghost {
  text-decoration: none; border: var(--hairline);
  border-radius: var(--radius-sm); color: var(--mist);
}
.item-detail-tools a.ghost:hover { color: var(--blossom); border-color: var(--accent); }
.item-detail .work-formats { margin-top: var(--space-2); }
.item-detail .scroll-synopsis { margin-top: var(--space-2); }

@media (max-width: 40rem) {
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .item-tile-glyph { font-size: var(--size-xl); }
}

/* ---------- what exists of a story ---------- */

.exists-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  margin-top: var(--space-3);
}

/* A note that a thing is out there. Deliberately plain: it is not a
   record of having read it, and it should not look like one. */
.exists-tile {
  border: var(--hairline); border-left: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.exists-tile.is-held { border-left-color: var(--accent-jade); }

.exists-format { font-family: var(--font-serif); font-size: var(--size-md); }
.exists-where { font-size: var(--size-3xs); color: var(--accent); }
.exists-note { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.15rem; }
.exists-state {
  font-size: var(--size-3xs); color: var(--mist); opacity: 0.65;
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--space-2);
}
.exists-tile.is-held .exists-state { color: var(--accent-jade); opacity: 1; }

.format-row input[type="text"]:not(.format-year) { flex: 1 1 7rem; }

.court-credits.is-crew { color: var(--accent); }

/* ============================================================
   The three scales
   ============================================================ */

.scale-row {
  display: flex; gap: var(--space-2); flex-wrap: nowrap; align-items: flex-end;
  margin: var(--space-3) 0 var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;            /* no scroll to be seen here */
}
.scale-row::-webkit-scrollbar { display: none; }

.scale-badge { text-align: center; flex: none; }
.scale-badge img { height: 8.75rem; width: auto; display: block;
  margin: 0 auto; }
.scale-badge span {
  display: block; font-size: var(--size-2xs); color: var(--blossom);
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: -0.5rem;
}

/* ---------- choosing one ---------- */

.scale-picker { margin-bottom: var(--space-3); }
.scale-picker > label {
  display: block; font-size: var(--size-2xs); color: var(--mist);
  margin-bottom: var(--space-1);
}
.scale-strip { display: flex; gap: 0.2rem; flex-wrap: wrap; align-items: center; }

.scale-option {
  background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: 1px; cursor: pointer;
  opacity: 0.45; transition: opacity var(--fast) var(--ease),
    border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.scale-option img { height: 3.6rem; width: auto; display: block; }
.scale-option:hover { opacity: 0.85; transform: translateY(-2px); }
.scale-option.is-on { opacity: 1; border-color: var(--accent); }

.scale-none {
  background: transparent; border: var(--hairline);
  border-radius: var(--radius-sm);
  width: 2rem; height: 2rem; color: var(--mist);
  cursor: pointer; font-size: var(--size-md);
}
.scale-none.is-on { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Credits, tags and links in the form
   ============================================================ */

.credit-list { display: grid; gap: var(--space-2); }
.credit-group { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
.credit-group-label {
  flex: 0 0 6rem; font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.credit-chip {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.12rem 0.3rem 0.12rem 0.65rem; font-size: var(--size-3xs);
}
.credit-chip b { font-weight: 500; }
.credit-chip span { color: var(--mist); font-size: var(--size-3xs); }
.credit-drop {
  background: none; border: none; color: var(--mist);
  cursor: pointer; font-size: var(--size-sm); line-height: 1; padding: 0 0.2rem;
}
.credit-drop:hover { color: var(--accent-lacquer); }
.credit-group > .ghost { padding: 0.1rem 0.5rem; font-size: var(--size-2xs); line-height: 1.2; }

.tag-picker { margin-bottom: var(--space-2); }
.tag-strip { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: var(--space-2); }
.tag-picker .flow-month { gap: 0.3rem; }

/* ---------- where to watch ---------- */

/* The trailer and the places to watch sit on one line as equals.
   Without align-items they stretched to the tallest of them, which
   made a one-word link into a tall rounded box. */
.scroll-sources {
  display: flex; align-items: center; gap: 0.3rem;
  flex-wrap: wrap; margin-top: var(--space-3);
}
.scroll-source {
  font-size: var(--size-2xs); color: var(--accent); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-pill); padding: 0.2rem 0.85rem;
  line-height: 1.5; white-space: nowrap;
}
.scroll-source:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.scroll-flags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: var(--space-3); }
.scroll-flag {
  font-size: var(--size-3xs); color: var(--lantern);
  border: 1px solid color-mix(in srgb, var(--lantern) 40%, transparent);
  border-radius: var(--radius-pill); padding: 0.05rem 0.6rem;
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* ---------- lines worth keeping ---------- */

.scroll-quote {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid color-mix(in srgb, var(--blossom) 35%, transparent);
  margin-top: var(--space-2);
}
.scroll-quote.is-favourite { border-left-color: var(--accent-lacquer); }
.scroll-quote-body {
  font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--blossom); line-height: 1.5;
}
.scroll-quote-said { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.2rem; }
.scroll-quote .work-note-drop { position: absolute; top: 0.2rem; right: 0.2rem; }
.scroll-quote:hover .work-note-drop { opacity: 1; }

/* ============================================================
   Moving Scrolls, as a table

   A spreadsheet in the palace's own colours. Dense on purpose:
   this view exists to work in, not to look at.
   ============================================================ */

.table-note {
  font-size: var(--size-2xs); color: var(--mist);
  margin: var(--space-2) 0;
}

.table-frame {
  overflow: auto; max-height: calc(100vh - 20rem);
  border: var(--hairline); border-radius: var(--radius-sm);
  background: var(--surface);
}

.scroll-table {
  border-collapse: separate; border-spacing: 0;
  font-size: var(--size-2xs); width: 100%;
}

.scroll-table th {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--ink) 92%, var(--surface));
  color: var(--mist); font-weight: 400; text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--size-3xs);
  white-space: nowrap;
}

.scroll-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--border) 20%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 16rem;
  cursor: cell;
}
.scroll-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.scroll-table .table-index {
  position: sticky; left: 0; z-index: 1;
  background: color-mix(in srgb, var(--ink) 90%, var(--surface));
  color: var(--mist); text-align: right; cursor: default;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}
.scroll-table th.table-index { z-index: 3; }

.cell.is-empty { color: color-mix(in srgb, var(--mist) 50%, transparent); }
.cell:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.cell.is-int, .cell.is-small, .cell.is-decimal, .cell.is-date {
  text-align: right; font-variant-numeric: tabular-nums;
}
.cell.is-bool { text-align: center; color: var(--mist); }
.cell.is-bool.is-on { color: var(--accent-jade); }

/* The status carries its own colour, as it does on the shelf. */
.cell.is-status { font-size: var(--size-3xs); }
.cell.status-watching { color: var(--lantern); }
.cell.status-finished { color: var(--accent-jade); }
.cell.status-plan     { color: var(--moon); }
.cell.status-dropped  { color: var(--mist); }
.cell.status-paused   { color: var(--gold); }

/* Saving, saved, refused — shown on the cell rather than in a toast,
   because a toast per cell during a paste would be unusable. */
.cell.is-saving { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.cell.is-saved  { background: color-mix(in srgb, var(--accent-jade) 20%, transparent); }
.cell.is-bad    { background: color-mix(in srgb, var(--accent-lacquer) 22%, transparent); }
.cell.is-saved, .cell.is-bad { transition: background var(--slow) var(--ease); }

.cell-editor {
  width: 100%; min-width: 3rem;
  background: var(--ink); color: var(--blossom);
  border: 1px solid var(--accent); border-radius: 2px;
  padding: 0.1rem 0.25rem; font: inherit; font-size: var(--size-2xs);
}
select.cell-editor { padding-right: 1.2rem; background-size: 4px 4px, 4px 4px; }

/* ============================================================
   The three states, and the watchlist
   ============================================================ */

.state-row {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--space-3);
}

.state-tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.state-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.state-tile.is-on { border-color: var(--accent); }

.state-art { aspect-ratio: 32 / 21; overflow: hidden; }
.state-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.6) saturate(0.9);
  transition: filter var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.state-tile:hover .state-art img { filter: brightness(0.75); transform: scale(1.04); }
.state-tile.is-on .state-art img { filter: brightness(0.85); }

.state-text {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-3);
  background: linear-gradient(to top,
    var(--surface) 15%, color-mix(in srgb, var(--surface) 70%, transparent) 60%, transparent);
}
.state-text b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-2xl); line-height: 1; font-variant-numeric: tabular-nums;
}
.state-text span {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.09em;
}
.state-tile.is-on .state-text span { color: var(--accent); }

.state-rest { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: var(--space-3); }

/* ---------- what is waiting ---------- */

.watchlist-count {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.watchlist-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  margin-top: var(--space-3);
}

.watch-card {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.watch-card:hover { transform: translateY(-2px); border-color: var(--accent); }

.watch-art {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  display: grid; place-items: center;
}
.watch-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No wide image, so the poster widens and blurs rather than leaving
   a hole. Deliberate instead of broken. */
.watch-art img.is-borrowed {
  filter: blur(2px) brightness(0.6) saturate(0.85);
  transform: scale(1.15);
}

/* The poster on the corner, as on a listing. */
.watch-poster {
  position: absolute !important; left: var(--space-3); bottom: -1.5rem;
  width: 3.75rem !important; height: auto !important;
  border-radius: var(--radius-sm); border: 2px solid var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 50%, transparent);
  object-fit: cover;
}

.watch-body { padding: var(--space-3); min-height: 4rem; }
/* Only the lines the hanging poster actually crosses step aside;
   the synopsis and the tools run the whole tile. */
.watch-card.has-corner .watch-name,
.watch-card.has-corner .watch-sub { padding-left: 4.6rem; }
.watch-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.watch-name strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-lg); }
.watch-name span { font-size: var(--size-2xs); color: var(--mist); }
.watch-sub { font-size: var(--size-3xs); color: var(--accent); }

.watch-synopsis {
  font-size: var(--size-2xs); color: var(--mist); margin-top: var(--space-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.watch-tools { display: flex; gap: 0.3rem; margin-top: var(--space-3); }
.watch-tools .primary, .watch-tools .ghost {
  padding: 0.3rem 0.8rem; font-size: var(--size-2xs);
}

@media (max-width: 40rem) {
  .watch-body { padding-left: var(--space-3); padding-top: 2rem; }
}

/* ---------- a title, in full ---------- */

.scroll-aka { font-size: var(--size-2xs); color: var(--mist); opacity: 0.85; }

.scroll-trailer {
  display: inline-block; margin-top: 0;
  font-size: var(--size-2xs); color: var(--accent-lacquer); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent-lacquer) 45%, transparent);
  border-radius: var(--radius-pill); padding: 0.2rem 0.85rem;
  line-height: 1.5; white-space: nowrap;
}
.scroll-trailer::before { content: "▸ "; }
.scroll-trailer:hover {
  background: color-mix(in srgb, var(--accent-lacquer) 12%, transparent);
}

/* ---------- adding somebody, inside the form ---------- */

.credit-add {
  display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center;
  width: 100%; margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.credit-add select { flex: 1 1 9rem; min-width: 0; }
.credit-add input { flex: 1 1 7rem; min-width: 0; }
.credit-add .primary { flex: none; padding: 0.3rem 0.9rem; font-size: var(--size-2xs); }

/* ---------- a title, laid out ---------- */

/* Each group of facts is its own line, so status and runtime never
   end up wrapped in beside started and finished. */
.scroll-detail-body > .realm-facts {
  width: 100%;
  margin-top: var(--space-3); padding-top: var(--space-3);
}

.scroll-detail-body > .scroll-sources,
.scroll-detail-body > .tag-row,
.scroll-detail-body > .belongs-row,
.scroll-detail-body > .scroll-flags {
  margin-top: var(--space-3);
}

.tag-row { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.tag-row-label {
  flex: 0 0 4rem;
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.tag-row .scroll-tags { flex: 1; margin-top: 0; }

/* The pairing and what it belongs to read as one strip rather than
   a boxed panel, now that they sit in different places. */
.scroll-detail-body > .belongs-row {
  border: var(--hairline); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}

.scroll-edited {
  font-size: var(--size-3xs); color: var(--mist); opacity: 0.7;
  margin-top: var(--space-2); text-align: center;
}

@media (max-width: 40rem) {
  .scale-badge img { height: 6.5rem; width: auto; }
}

/* ---------- how much of a thing you hold ---------- */

.exists-bar {
  height: 3px; margin-top: var(--space-2); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 65%, transparent); overflow: hidden;
}
.exists-bar i { display: block; height: 100%; background: var(--accent-jade); }

.exists-held {
  font-size: var(--size-3xs); color: var(--accent-jade);
  font-variant-numeric: tabular-nums; margin-top: 0.15rem;
}

.exists-titles { display: flex; gap: 0.2rem; flex-wrap: wrap; margin-top: var(--space-2); }
.exists-title {
  display: block; width: 1.75rem; text-decoration: none;
  border-radius: 2px; overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--fast) var(--ease);
}
.exists-title:hover { border-color: var(--accent); }
.exists-title img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
}
.exists-title span {
  display: grid; place-items: center;
  aspect-ratio: 2 / 3; font-size: var(--size-3xs); color: var(--mist);
  background: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* ---------- BL ---------- */

.scroll-bl {
  position: absolute; top: 0.35rem; left: 0.4rem;
  background: color-mix(in srgb, var(--accent-jade) 88%, transparent);
  color: var(--ink); border-radius: var(--radius-pill);
  padding: 0 0.45rem;
  font-size: var(--size-3xs); font-weight: 600; letter-spacing: 0.08em;
}

/* Squared and sized like the rest, so it sits on their baseline
   rather than floating above them. */
.scale-badge.is-bl img { height: 8.75rem; width: auto; }

/* ---------- what the service knows about a person ---------- */

.person-bio {
  font-size: var(--size-sm); color: var(--mist);
  line-height: 1.6; margin-top: var(--space-3);
}
.person-aka {
  font-size: var(--size-2xs); color: var(--accent);
  margin-top: var(--space-2);
}

.lookup-poster.is-face { aspect-ratio: 1; border-radius: 50%; }

/* ---------- what else they are in ---------- */

.filmography {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  margin-top: var(--space-2);
}

.film-card { text-align: center; }
.film-art {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--radius-sm); border: var(--hairline);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  display: grid; place-items: center;
}
.film-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Already yours: dimmed, because the point of the list is what is not. */
.film-card.is-held .film-art { border-color: var(--accent-jade); }
.film-card.is-held .film-art img { filter: grayscale(0.5) brightness(0.65); }

.film-have {
  position: absolute; top: 0.25rem; right: 0.3rem;
  color: var(--accent-jade); font-size: var(--size-sm);
  text-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 80%, transparent);
}

.film-title { font-size: var(--size-3xs); line-height: 1.25; margin-top: 0.2rem; }
.film-sub { font-size: var(--size-3xs); color: var(--mist); }
.film-card .ghost, .film-card a.ghost {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.15rem; font-size: var(--size-3xs); text-align: center;
  text-decoration: none; border: var(--hairline);
  border-radius: var(--radius-sm); color: var(--mist);
}
.film-card .ghost:hover { color: var(--blossom); border-color: var(--accent); }
.film-added {
  display: block; margin-top: 0.25rem;
  font-size: var(--size-3xs); color: var(--accent-jade);
}

/* ---------- where to ask ---------- */

.provider-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  opacity: 0.7;
}
.provider-row:first-of-type { border-top: none; }
.provider-row.is-on { opacity: 1; }
.provider-row.is-unavailable { opacity: 0.4; }

.provider-text { flex: 1; min-width: 0; }
.provider-name { font-family: var(--font-serif); font-size: var(--size-md); }
.provider-key {
  display: inline-block; margin-top: 0.2rem;
  font-size: var(--size-3xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lantern);
  border: 1px solid color-mix(in srgb, var(--lantern) 40%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.45rem;
}
.provider-key.is-free {
  color: var(--accent-jade);
  border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
}
.provider-row .ghost { flex: none; padding: 0.25rem 0.7rem; font-size: var(--size-2xs); }

/* Whose answer this is. Two services describe the same thing
   differently, so the result says which version it is offering. */
.lookup-from {
  font-size: var(--size-3xs); text-transform: uppercase; letter-spacing: 0.09em;
  border-radius: var(--radius-pill); padding: 0 0.45rem;
  border: 1px solid currentColor;
}
.lookup-from.is-tmdb { color: var(--accent-jade); }
.lookup-from.is-anilist { color: var(--moon); }
.lookup-from.is-tvmaze { color: var(--lantern); }

.modal-head .ghost {
  position: absolute; right: var(--space-4); top: var(--space-4);
  padding: 0.2rem 0.7rem; font-size: var(--size-2xs);
}
.modal-head { position: relative; }

/* ---------- one adaptation among several ---------- */

.exists-kind {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.unplaced-row {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  margin-top: var(--space-2);
}

/* Dashed, because it is a question waiting rather than a thing done. */
.unplaced-title {
  border: 1px dashed color-mix(in srgb, var(--lantern) 45%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-2); text-align: center;
}
.unplaced-title img {
  width: 100%; max-width: 3.5rem; aspect-ratio: 2 / 3;
  object-fit: cover; display: block; margin: 0 auto;
  border-radius: 2px;
}
.unplaced-name { font-size: var(--size-3xs); line-height: 1.25; margin-top: 0.25rem; }
.unplaced-sub { font-size: var(--size-3xs); color: var(--mist); }
.unplaced-title select {
  width: 100%; margin-top: var(--space-2);
  font-size: var(--size-3xs); padding: 0.2rem 1.4rem 0.2rem 0.4rem;
}

/* ============================================================
   A draft, before it is a record
   ============================================================ */

.draft-art {
  position: relative; margin-bottom: var(--space-4);
  border-radius: var(--radius-sm); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  min-height: 6rem;
}
.draft-backdrop {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block;
  filter: brightness(0.7);
}
.draft-poster {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  width: 4.5rem; height: auto;
  border-radius: var(--radius-sm); border: 2px solid var(--surface);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 60%, transparent);
}
.draft-art:not(:has(.draft-backdrop)) { padding: var(--space-3); }
.draft-art:not(:has(.draft-backdrop)) .draft-poster { position: static; }

/* A gap is marked rather than hidden: the point of looking before
   saving is seeing what is not there. */
.field.is-gap input,
.field.is-gap textarea,
.field.is-gap select {
  border-color: color-mix(in srgb, var(--lantern) 45%, transparent);
  background: color-mix(in srgb, var(--lantern) 5%, var(--ink));
}

.gap-mark {
  margin-left: 0.45rem; font-size: var(--size-3xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--lantern);
  border: 1px solid color-mix(in srgb, var(--lantern) 45%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.4rem;
}

/* Where an answer came from, once a second service has been asked. */
.gap-filled {
  margin-left: 0.45rem; font-size: var(--size-3xs);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-jade);
}

.lookup-row.is-asking { opacity: 0.5; }

/* ---------- what the wider world calls it ---------- */

.identity-row {
  display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; margin-top: var(--space-3);
}
.identity-chip {
  font-size: var(--size-3xs); color: var(--mist); text-decoration: none;
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.05rem 0.6rem;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
a.identity-chip:hover { color: var(--accent); border-color: var(--accent); }
.identity-chip.is-flat { opacity: 0.7; }

/* A field a service has just answered, not yet saved. */
.was-filled {
  border-color: var(--accent-jade) !important;
  background: color-mix(in srgb, var(--accent-jade) 8%, var(--ink)) !important;
}

/* ---------- yours, but not credited ---------- */

.film-card.is-unlinked .film-art { border-color: var(--lantern); }
.film-card.is-unlinked .film-art img { filter: none; }

.film-have.is-unlinked {
  color: var(--lantern); font-weight: 700;
}

.film-card .primary {
  display: block; width: 100%; margin-top: 0.25rem;
  padding: 0.18rem; font-size: var(--size-3xs);
}

.modal-head .primary {
  position: absolute; right: var(--space-4); top: var(--space-4);
  padding: 0.25rem 0.8rem; font-size: var(--size-2xs);
}

/* ---------- several pairings on one title ---------- */

.belongs-row.is-many { align-items: flex-start; padding-top: var(--space-2); }

.pairing-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.15rem; }

.pairing-chip {
  display: inline-flex; align-items: center; gap: 0.15rem;
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.08rem 0.25rem 0.08rem 0.65rem;
  font-size: var(--size-2xs);
}
.pairing-chip a { color: var(--blossom); text-decoration: none; }
.pairing-chip a:hover { color: var(--accent); text-decoration: underline; }

/* The main one, which is the couple the Chronicle names. */
.pairing-chip.is-main {
  border-color: color-mix(in srgb, var(--accent-lacquer) 50%, transparent);
}
.pairing-chip.is-main a { color: var(--accent-lacquer); }

/* Always there. A control you need in order to fix a mistake should
   not be hidden behind a hover. */
.pairing-chip .credit-drop { opacity: 0.55; font-size: var(--size-sm); }
.pairing-chip:hover .credit-drop { opacity: 1; }
.pairing-chip .credit-drop:hover { color: var(--accent-lacquer); }

.credit-add-hint {
  flex: 1 1 100%;
  font-size: var(--size-3xs); color: var(--mist);
  margin-bottom: 0.1rem;
}

/* A credit with no poster still needs something to click. */
.court-credit-blank {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm); border: var(--hairline);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--mist); opacity: 0.5; font-size: var(--size-lg);
}
.court-credit { transition: transform var(--fast) var(--ease); }
.court-credit:hover { transform: translateY(-2px); }
.court-credit:hover img,
.court-credit:hover .court-credit-blank { border-color: var(--accent); }
.court-credit:hover .court-credit-title { color: var(--accent); }

/* ============================================================
   Finding one among thousands
   ============================================================ */

.picker { position: relative; flex: 1 1 10rem; min-width: 0; }
.picker-field { width: 100%; }

.picker-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 2px; max-height: 17rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 55%, transparent);
}

.picker-row {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 0.35rem var(--space-2);
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.picker-row:hover, .picker-row.is-at {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.picker-face {
  flex: none; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border);
}
.picker-text { flex: 1; min-width: 0; }
.picker-label {
  font-size: var(--size-2xs); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-hint {
  font-size: var(--size-3xs); color: var(--mist);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Whose answer this is — the Court's own, or a service's. */
.picker-badge {
  flex: none; font-size: var(--size-3xs); color: var(--accent-jade);
  border: 1px solid color-mix(in srgb, var(--accent-jade) 45%, transparent);
  border-radius: var(--radius-pill); padding: 0 0.35rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}

.picker-none {
  padding: 0.4rem var(--space-2);
  font-size: var(--size-2xs); color: var(--mist);
}
.picker-make {
  display: block; width: 100%; text-align: left;
  padding: 0.35rem var(--space-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: none; border-top: var(--hairline);
  color: var(--accent); font: inherit; font-size: var(--size-2xs);
  cursor: pointer;
}
.picker-make:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- a credit, changed in place ---------- */

.credit-chip.is-editable { padding-left: 0; }
.credit-open {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; padding: 0 0 0 0.65rem;
}
.credit-open:hover b { color: var(--accent); }

.credit-edit { display: inline-flex; align-items: center; gap: 0.2rem; }
.credit-edit input { font-size: var(--size-3xs); padding: 0.1rem 0.35rem; }
.credit-edit select { font-size: var(--size-3xs); padding: 0.1rem 1.2rem 0.1rem 0.35rem; }
.credit-done {
  background: none; border: none; cursor: pointer;
  color: var(--accent-jade); font-size: var(--size-sm); padding: 0 0.2rem;
}

.credit-add .credit-role { flex: 1 1 7rem; min-width: 0; }
.credit-add .ghost { flex: none; }

/* ---------- a select that became a picker ---------- */

select.is-picked { display: none !important; }

/* Inside a form field it fills the row like the select it replaced. */
.field .picker { flex: none; width: 100%; }
.field .picker-field { width: 100%; }

/* Inside a filter bar it keeps the select's own width rather than
   stretching and pushing everything else off the line. */
.flow-month .picker { flex: 0 1 12rem; }
.format-row .picker { flex: 1 1 8rem; }
.credit-edit .picker { flex: 0 1 8rem; }
.credit-edit .picker-field { font-size: var(--size-3xs); padding: 0.1rem 0.35rem; }

/* A list inside a scrolling modal has to sit above everything in it. */
.modal .picker-list { z-index: 60; }

/* Portraits saved before they were squared are still tall. Framing
   them from the upper third is closer to right than the middle, and
   costs nothing once they are square. */
.court-portrait img,
.pairing-face img,
.picker-face,
.court-detail-portrait img {
  object-position: center 25%;
}

/* ============================================================
   Memorable Lines
   ============================================================ */

.lines-book { display: grid; gap: var(--space-3); margin-top: var(--space-3); }

.line-card {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--surface); border: var(--hairline);
  border-left: 2px solid color-mix(in srgb, var(--blossom) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.line-card.is-favourite { border-left-color: var(--accent-lacquer); }

.line-poster { flex: none; width: 3.25rem; }
.line-poster img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: var(--hairline);
}
.line-poster:hover img { border-color: var(--accent); }

.line-body { flex: 1; min-width: 0; position: relative; }

/* The line is the point of the page, so it is set like one. */
.line-said {
  font-family: var(--font-serif); font-size: var(--size-lg);
  line-height: 1.5; color: var(--blossom);
  margin: 0 3.5rem 0 0; padding: 0;
}
.line-said::before { content: "\201C"; opacity: 0.35; }
.line-said::after { content: "\201D"; opacity: 0.35; }

.line-from {
  display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; margin-top: var(--space-2);
}
.line-who { font-size: var(--size-2xs); color: var(--accent); }
.line-title { font-size: var(--size-2xs); color: var(--mist); text-decoration: none; }
.line-title:hover { color: var(--blossom); text-decoration: underline; }
.line-where { font-size: var(--size-3xs); color: var(--mist); opacity: 0.7; }

.line-tools {
  position: absolute; top: 0; right: 0;
  display: flex; gap: 0.1rem;
}
.line-fav, .line-edit, .line-drop {
  background: none; border: none; cursor: pointer;
  color: var(--mist); font-size: var(--size-sm);
  padding: 0.1rem 0.3rem; line-height: 1;
  opacity: 0.45; transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}
.line-card:hover .line-fav,
.line-card:hover .line-edit,
.line-card:hover .line-drop { opacity: 0.8; }
.line-fav.is-on { color: var(--accent-lacquer); opacity: 1; }
.line-fav:hover { color: var(--accent-lacquer); opacity: 1; }
.line-edit:hover { color: var(--accent); opacity: 1; }
.line-drop:hover { color: var(--accent-lacquer); opacity: 1; }

/* ============================================================
   Critical Annotations
   ============================================================ */

/* Smaller blocks, not full-width lines: the shelf reads as cards. */
.annotations { display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  margin-top: var(--space-3); }

.annotation {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: var(--surface); border: var(--hairline);
  border-left: 2px solid var(--lantern);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.annotation.is-written { border-left-color: var(--accent-jade); }

.annotation-poster { flex: none; width: 3.25rem; }
.annotation-poster img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: var(--hairline);
}
.annotation-poster:hover img { border-color: var(--accent); }

.annotation-body { flex: 1; min-width: 0; }
.annotation-head {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.annotation-title {
  font-family: var(--font-serif); font-size: var(--size-md);
  color: var(--blossom); text-decoration: none;
}
.annotation-title:hover { color: var(--accent); }
.annotation-head .work-bl { position: static; }
.annotation-sub { font-size: var(--size-3xs); color: var(--mist); }

.annotation-marks {
  display: flex; align-items: center; gap: 0.3rem;
  margin-top: var(--space-2);
}
.annotation-marks img { height: 2.2rem; width: auto; }
.annotation-quotes {
  font-size: var(--size-3xs); color: var(--accent); text-decoration: none;
  margin-left: var(--space-2);
}
.annotation-quotes:hover { text-decoration: underline; }

.annotation-text {
  font-size: var(--size-sm); color: var(--blossom);
  line-height: 1.6; margin-top: var(--space-2);
}
.annotation-aside { margin-top: var(--space-2); }
.annotation-aside span {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.annotation-aside p { font-size: var(--size-2xs); color: var(--mist); }

/* ---------- filtering by a mark ---------- */

.scale-filter { display: flex; gap: 0.15rem; align-items: center; }
.scale-pick {
  background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: 1px; cursor: pointer;
  opacity: 0.4; transition: opacity var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}
.scale-pick { width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center; }
.scale-pick img { max-height: 100%; max-width: 100%;
  width: auto; height: auto; display: block; }
.scale-pick:hover { opacity: 0.85; }
.scale-pick.is-on { opacity: 1; border-color: var(--accent); }

@media (max-width: 40rem) {
  .scale-pick { width: 1.6rem; height: 1.6rem; }
  .line-said { font-size: var(--size-md); }
}

/* ============================================================
   Premieres
   ============================================================ */

.month-bar {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin: var(--space-3) 0;
}
.month-name {
  font-size: var(--size-xl); min-width: 9rem;
}
.month-bar .ghost { padding: 0.2rem 0.7rem; }

/* minmax(0, 1fr), not 1fr.
   
   A grid column's default minimum is min-content, so a column holding
   a long title refuses to shrink below it and pushes the rest of the
   week off the edge. Seven equal columns that will actually shrink
   need the zero saying out loud. */
.calendar {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border: var(--hairline); border-radius: var(--radius-sm);
  overflow: hidden;
}

.calendar-day {
  background: color-mix(in srgb, var(--ink) 90%, var(--surface));
  padding: 0.3rem; text-align: center;
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.calendar-cell {
  background: var(--surface);
  min-height: 5.5rem; padding: 0.25rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  /* Without this a cell is as wide as its widest chip, whatever the
     column says. */
  min-width: 0; overflow: hidden;
}
.calendar-cell.is-empty { background: color-mix(in srgb, var(--ink) 40%, var(--surface)); }
.calendar-cell.has-any { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }

/* Today, marked without shouting. */
.calendar-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.calendar-number {
  align-self: flex-start;
  background: none; border: none; padding: 0 0.1rem;
  font: inherit; font-size: var(--size-3xs); color: var(--mist);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.calendar-number:hover { color: var(--accent); }
.calendar-cell.is-today .calendar-number { color: var(--accent); font-weight: 600; }

.premiere-chip {
  display: flex; align-items: center; gap: 0.2rem;
  text-decoration: none; color: inherit;
  border-radius: 2px; padding: 0.1rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background var(--fast) var(--ease);
}
.premiere-chip:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.premiere-chip img { width: 0.9rem; aspect-ratio: 2 / 3; object-fit: cover; flex: none; }
.premiere-name {
  font-size: var(--size-3xs); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.premiere-season {
  font-size: var(--size-3xs); color: var(--accent); flex: none;
}

/* ---------- what is coming ---------- */

.coming-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

.coming-row {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit;
  padding: var(--space-2);
  border: var(--hairline); border-radius: var(--radius-sm);
  transition: border-color var(--fast) var(--ease);
}
.coming-row:hover { border-color: var(--accent); }
.coming-row img {
  flex: none; width: 2.5rem; aspect-ratio: 2 / 3;
  object-fit: cover; border-radius: 2px;
}
.coming-body { flex: 1; min-width: 0; }
.coming-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.coming-name strong { font-family: var(--font-serif); font-weight: 400; }
.coming-name .work-bl { position: static; }
.coming-sub { font-size: var(--size-3xs); color: var(--mist); }

.coming-when { flex: none; text-align: center; min-width: 3.5rem; }
.coming-when b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-lg); line-height: 1;
}
.coming-when span { display: block; font-size: var(--size-3xs); color: var(--mist); }
.coming-away { color: var(--accent) !important; }

/* ---------- no date yet ---------- */

.undated { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

.undated-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2);
  border-left: 2px solid var(--lantern);
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--radius-sm);
}

/* Nobody to ask: dashed, because it is waiting on you rather than
   on somebody else's server. */
.undated-row.is-loose {
  border-left-style: dashed;
  border-left-color: var(--mist);
}

.undated-poster { flex: none; width: 2.25rem; }
.undated-poster img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 2px; display: block;
}
.undated-body { flex: 1; min-width: 0; }
.undated-name { display: flex; align-items: baseline; gap: var(--space-2); }
.undated-name a { color: var(--blossom); text-decoration: none; font-size: var(--size-sm); }
.undated-name a:hover { color: var(--accent); }
.undated-sub { font-size: var(--size-3xs); color: var(--mist); }
.undated-date { flex: none; font-size: var(--size-2xs); padding: 0.2rem 0.4rem; }

@media (max-width: 46rem) {
  .calendar-cell { min-height: 4rem; }
  .premiere-chip img { display: none; }
}

/* ============================================================
   Soundtracks
   ============================================================ */

.tracks { display: grid; gap: 1px; margin-top: var(--space-3);
  background: color-mix(in srgb, var(--border) 45%, transparent);
  border: var(--hairline); border-radius: var(--radius-sm); overflow: hidden; }

.track {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface); padding: var(--space-2) var(--space-3);
}
.track.is-favourite {
  background: color-mix(in srgb, var(--accent-lacquer) 6%, var(--surface));
}

.track-play {
  flex: none; width: 2rem; height: 2rem;
  border-radius: 50%; border: 1px solid var(--accent);
  background: transparent; color: var(--accent);
  font-size: var(--size-2xs); line-height: 1; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.track-play:hover { background: var(--accent); color: var(--blossom); }
.track-play.is-playing { background: var(--accent); color: var(--blossom); }

/* Nothing to play here; it opens where it lives. */
.track-play.is-away { border-color: var(--mist); color: var(--mist); }
.track-play.is-away:hover { background: var(--surface-3); color: var(--blossom); }
.track-play:disabled { opacity: 0.35; cursor: default; }
.track-play:disabled:hover { background: transparent; color: var(--mist); }

.track-art { flex: none; width: 2.25rem; }
.track-art img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 2px; display: block;
}

.track-body { flex: 1; min-width: 0; }
.track-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.track-name strong { font-weight: 400; font-size: var(--size-sm); }
.track-kind {
  font-size: var(--size-3xs); color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.track-where { font-size: var(--size-3xs); color: var(--mist); }

.track-sub {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--size-3xs); color: var(--mist);
}
.track-from { color: var(--mist); text-decoration: none; }
.track-from:hover { color: var(--accent); text-decoration: underline; }
.track-time { font-variant-numeric: tabular-nums; opacity: 0.7; }

.track-tools { flex: none; display: flex; align-items: center; gap: 0.2rem; }
.track-source {
  font-size: var(--size-3xs); color: var(--mist); text-decoration: none;
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem;
}
.track-source:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- dramas with nothing kept ---------- */

.without-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  margin-top: var(--space-3);
}
.without-card {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
  transition: transform var(--fast) var(--ease);
}
.without-card:hover { transform: translateY(-3px); }
.without-art {
  aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--radius-sm); border: var(--hairline);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  display: grid; place-items: center;
}
.without-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.without-card:hover .without-art { border-color: var(--accent); }
.without-name { font-size: var(--size-3xs); margin-top: 0.2rem; line-height: 1.25; }
.without-sub { font-size: var(--size-3xs); color: var(--mist); }

/* ---------- a song that has been found ---------- */

.found-song {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.found-song.is-kept { opacity: 0.55; }
.found-song .primary { flex: none; padding: 0.25rem 0.75rem; font-size: var(--size-2xs); }
.found-song .lookup-from { flex: none; }
.found-song .film-added { flex: none; margin: 0; }

.lookup-from.is-itunes { color: var(--blossom); }
.lookup-from.is-youtube { color: var(--accent-lacquer); }

/* ============================================================
   The Viewing Calendar
   ============================================================ */

.feed-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
  font: inherit; font-size: var(--size-2xs); color: inherit; cursor: pointer;
}
.feed-chip i {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--accent); flex: none;
}
.feed-chip.is-off { opacity: 0.4; }
.feed-chip:hover { border-color: var(--accent); }

.day-event {
  display: flex; align-items: baseline; gap: 0.2rem;
  width: 100%; min-width: 0; max-width: 100%; text-align: left;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: none; border-left: 2px solid var(--accent);
  border-radius: 2px; padding: 0.1rem 0.2rem;
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.day-event:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.day-event.is-hidden { opacity: 0.35; border-left-style: dotted; }

/* An event that knows which title it is about. */
.day-event.is-linked { border-left-width: 3px; }

.day-time {
  flex: none; font-size: var(--size-3xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.day-what {
  flex: 1; min-width: 0;
  font-size: var(--size-3xs); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A premiere reads differently from something in your diary: it is
   not an appointment, it is a thing appearing in the world. */
.day-premiere {
  display: flex; align-items: center; gap: 0.2rem;
  min-width: 0; max-width: 100%;
  text-decoration: none; color: inherit;
  border-radius: 2px; padding: 0.1rem 0.2rem;
  background: color-mix(in srgb, var(--accent-lacquer) 16%, transparent);
  border-left: 2px solid var(--accent-lacquer);
}
.day-premiere:hover {
  background: color-mix(in srgb, var(--accent-lacquer) 30%, transparent);
}
.day-premiere img { width: 0.75rem; aspect-ratio: 2 / 3; object-fit: cover; flex: none; }

.event-panel { border-left: 3px solid var(--accent); }
.event-where { font-size: var(--size-2xs); color: var(--accent); margin-top: var(--space-2); }
.event-notes {
  font-size: var(--size-2xs); color: var(--mist);
  margin-top: var(--space-2); white-space: pre-line;
  max-height: 9rem; overflow-y: auto;
}
.event-panel .belongs-row {
  margin-top: var(--space-3);
  border: var(--hairline); border-radius: var(--radius-sm);
}

.calendar-outside {
  font-size: var(--size-2xs); color: var(--lantern);
  border-left: 2px solid color-mix(in srgb, var(--lantern) 45%, transparent);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: color-mix(in srgb, var(--lantern) 6%, transparent);
}

/* ============================================================
   Custom Scroll Lists
   ============================================================ */

.lists-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-top: var(--space-3);
}

.list-card {
  background: var(--surface); border: var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.list-card:hover { transform: translateY(-3px); }
.list-card.is-pinned { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }

/* What is on it, fanned. A list of five things should look like five
   things rather than like a word. */
.list-fan {
  position: relative; height: 4.5rem;
  display: flex; align-items: center; justify-content: center;
}
.list-fan img {
  position: absolute; width: 2.6rem; aspect-ratio: 2 / 3;
  object-fit: cover; border-radius: 2px;
  border: 1px solid var(--surface);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: transform var(--slow) var(--ease);
}
.list-fan img:nth-child(1) { transform: rotate(-9deg) translateX(-2.6rem); }
.list-fan img:nth-child(2) { transform: rotate(-4deg) translateX(-1.3rem); }
.list-fan img:nth-child(3) { transform: rotate(0deg); }
.list-fan img:nth-child(4) { transform: rotate(4deg) translateX(1.3rem); }
.list-fan img:nth-child(5) { transform: rotate(9deg) translateX(2.6rem); }

.list-card:hover .list-fan img:nth-child(1) { transform: rotate(-13deg) translateX(-3.1rem); }
.list-card:hover .list-fan img:nth-child(2) { transform: rotate(-6deg) translateX(-1.6rem); }
.list-card:hover .list-fan img:nth-child(4) { transform: rotate(6deg) translateX(1.6rem); }
.list-card:hover .list-fan img:nth-child(5) { transform: rotate(13deg) translateX(3.1rem); }

.list-glyph { font-size: var(--size-3xl); color: var(--accent); opacity: 0.35; }

.list-name {
  display: flex; align-items: baseline; justify-content: center;
  gap: 0.35rem; margin-top: var(--space-2);
}
.list-name strong { font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md); }
.list-mark { color: var(--accent); font-size: var(--size-sm); }
.list-chinese { font-size: var(--size-2xs); color: var(--mist); }
.list-count { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.15rem; }

/* ---------- ready-made ---------- */

.template-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  margin-top: var(--space-3);
}
.template-card {
  background: transparent; border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-3);
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  transition: background var(--fast) var(--ease), border-style var(--fast) var(--ease);
}
.template-card:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-style: solid;
}
.template-glyph { display: block; font-size: var(--size-xl); color: var(--accent); opacity: 0.7; }
.template-name { font-size: var(--size-sm); margin-top: 0.2rem; }
.template-about { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.25rem; line-height: 1.4; }

/* ---------- inside a list ---------- */

.list-head { border-left: 3px solid var(--accent); }
.list-title { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.list-title h3 { font-size: var(--size-xl); }

.list-items { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

.list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2);
  border: var(--hairline); border-radius: var(--radius-sm);
  transition: border-color var(--fast) var(--ease);
}
.list-item:hover { border-color: var(--accent); }

.list-place {
  flex: none; width: 2rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
}
.list-place b {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-md); font-variant-numeric: tabular-nums;
}
.list-move {
  background: none; border: none; color: var(--mist);
  font-size: var(--size-3xs); line-height: 1; cursor: pointer; padding: 0;
}
.list-move:hover:not(:disabled) { color: var(--accent); }
.list-move:disabled { opacity: 0.2; cursor: default; }

.list-poster { flex: none; width: 2.5rem; }
.list-poster img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 2px; display: block;
}

.list-item-body { flex: 1; min-width: 0; }
.list-item-name { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.list-item-name a { color: var(--blossom); text-decoration: none; font-size: var(--size-sm); }
.list-item-name a:hover { color: var(--accent); }
.list-item-name .work-bl { position: static; }
.list-item-sub { font-size: var(--size-3xs); color: var(--mist); }

.list-note {
  display: block; margin-top: 0.25rem;
  background: none; border: none; padding: 0;
  font: inherit; font-size: var(--size-2xs); font-style: italic;
  color: var(--lantern); cursor: pointer; text-align: left;
}
.list-note.is-empty { color: var(--mist); opacity: 0; }
.list-item:hover .list-note.is-empty { opacity: 0.55; }
.list-note:hover { color: var(--accent); }

/* ============================================================
   The Hall Report

   Meant to be read rather than consulted, so the figures are large
   and the sections have room to breathe.
   ============================================================ */

.report-when {
  font-family: var(--font-serif); font-size: var(--size-lg);
  min-width: 8rem; text-align: center;
}

.report-section { margin-top: var(--space-4); }
.report-head h3 { font-size: var(--size-xl); }

/* ---------- the crown ---------- */

.report-crown {
  text-align: center; padding: var(--space-5) var(--space-4);
  border: var(--hairline); border-top: 3px solid var(--accent-lacquer);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent-lacquer) 7%, var(--surface)), var(--surface));
}
.report-crown-when {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.22em;
}
.report-crown-time { margin: var(--space-3) 0 var(--space-4); }
.report-crown-time b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 4.5rem); line-height: 1;
  color: var(--blossom);
}
.report-crown-time span {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.16em;
}

.report-figures {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
}
.report-figure { text-align: center; }
.report-figure b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-2xl); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.report-figure span {
  display: block; font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem;
}
.report-figure i {
  display: block; font-size: var(--size-3xs); color: var(--accent);
  font-style: normal; margin-top: 0.1rem;
}

.report-aside {
  font-size: var(--size-2xs); color: var(--mist);
  font-style: italic; margin-top: var(--space-3);
}

/* ---------- two halves ---------- */

.report-split {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: var(--space-3);
}
.report-half {
  text-align: center; padding: var(--space-3);
  border: var(--hairline); border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.report-half b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-2xl); line-height: 1;
}
.report-half span {
  display: block; font-size: var(--size-2xs); color: var(--mist); margin-top: 0.2rem;
}
.report-half i {
  display: block; font-style: normal; font-size: var(--size-3xs);
  color: var(--accent); margin-top: 0.15rem;
}

/* ---------- bars ---------- */

.report-bars { display: grid; gap: 0.35rem; margin-top: var(--space-3); }
.report-bar { display: flex; align-items: center; gap: var(--space-2); }
.report-bar-name {
  flex: 0 0 7rem; font-size: var(--size-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-bar-track {
  flex: 1; height: 0.75rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 50%, transparent); overflow: hidden;
}
.report-bar-track i {
  display: block; height: 100%; background: var(--accent);
  border-radius: var(--radius-pill);
}
.report-bar-value {
  flex: 0 0 6.5rem; text-align: right;
  font-size: var(--size-3xs); color: var(--mist); font-variant-numeric: tabular-nums;
}

/* ---------- the spread of marks ---------- */

.rating-spread {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 0.2rem; align-items: end; margin-top: var(--space-3);
  min-height: 9rem;
}
.rating-spread.is-short { grid-template-columns: repeat(6, 1fr); }
.rating-column { display: flex; flex-direction: column; align-items: center; }
.rating-column.is-empty { opacity: 0.3; }

.rating-stack {
  width: 100%; height: 6rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center;
}
.rating-stack i {
  display: block; width: 60%; min-height: 2px;
  background: linear-gradient(to top, var(--accent),
    color-mix(in srgb, var(--accent) 45%, transparent));
  border-radius: 2px 2px 0 0;
}
.rating-stack b {
  font-size: var(--size-3xs); color: var(--blossom);
  font-variant-numeric: tabular-nums; margin-bottom: 0.1rem;
  order: -1;
}
.rating-column img { width: 100%; max-width: 3rem; height: auto; margin-top: 0.2rem; }

/* ---------- the podium ---------- */

.podium {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  margin-top: var(--space-3);
}
.podium-card { text-decoration: none; color: inherit; position: relative; }
.podium-art {
  position: relative; aspect-ratio: 2 / 3; overflow: visible;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  display: grid; place-items: center;
}
.podium-art img:not(.podium-mark) {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: var(--hairline);
}
.podium-card.is-first .podium-art img:not(.podium-mark) { border-color: var(--gold); }

/* The mark it earned, sitting on the corner of its own poster. */
.podium-mark {
  position: absolute; bottom: -0.6rem; right: -0.4rem;
  width: 2.4rem; height: auto;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ink) 80%, transparent));
}

.podium-name {
  font-size: var(--size-3xs); line-height: 1.25; margin-top: 0.7rem;
}
.podium-sub { font-size: var(--size-3xs); color: var(--mist); }
.podium-card .work-bl { top: 0.25rem; left: 0.25rem; }

/* ---------- the tag cloud ---------- */

.trope-cloud {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: baseline; margin-top: var(--space-3);
  line-height: 1.7;
}
.trope-chip {
  color: var(--accent); font-family: var(--font-serif);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  cursor: default;
}
.trope-chip:hover { color: var(--blossom); border-bottom-color: var(--blossom); }

/* ---------- a record ---------- */

.report-record {
  display: flex; align-items: center; gap: var(--space-4);
  border: 1px solid var(--gold);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface));
  margin-top: var(--space-4);
}
.record-dragon {
  flex: none; font-size: 3.5rem; color: var(--gold); opacity: 0.55; line-height: 1;
}
.report-record h3 { color: var(--gold); }
.record-line { font-size: var(--size-sm); margin-top: 0.25rem; }
.record-line b { font-family: var(--font-serif); font-weight: 400; color: var(--blossom); }
.record-line span { color: var(--mist); }

/* ---------- against what came before ---------- */

.report-against {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-top: var(--space-3);
}
.against-row {
  padding: var(--space-2); border-radius: var(--radius-sm);
  border-left: 2px solid var(--border);
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
.against-row.is-up { border-left-color: var(--accent-jade); }
.against-row.is-down { border-left-color: var(--accent-lacquer); }
.against-what {
  display: block; font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.against-row b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-lg); line-height: 1.2;
}
.against-row i { font-style: normal; font-size: var(--size-3xs); color: var(--mist); }
.against-row.is-up i { color: var(--accent-jade); }
.against-row.is-down i { color: var(--accent-lacquer); }

/* ---------- who you are, apparently ---------- */

.identity { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.identity-row {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
}
.identity-row > span {
  flex: 0 0 9rem; font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.identity-row b {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md);
  color: var(--blossom);
}
.identity-row i { font-style: normal; font-size: var(--size-3xs); color: var(--accent); }

/* ---------- the ledger closes ---------- */

.report-close {
  text-align: center; margin-top: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-top: 3px solid var(--accent-lacquer);
}
.report-seal {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; margin-bottom: var(--space-3);
  border: 2px solid var(--accent-lacquer); border-radius: var(--radius-sm);
  color: var(--accent-lacquer); font-size: var(--size-xl);
}
.report-close-line { font-size: var(--size-lg); margin-top: var(--space-2); }
.report-close-line b { font-family: var(--font-serif); font-weight: 400; }
.report-close-line span { color: var(--mist); }
.report-close-said {
  font-size: var(--size-sm); color: var(--mist);
  font-style: italic; margin-top: var(--space-2);
}

/* Said plainly, rather than left to be discovered. */
.report-caveats {
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hairline);
}
.report-caveats p {
  font-size: var(--size-3xs); color: var(--mist); opacity: 0.75;
  max-width: 34rem; margin: 0.3rem auto; line-height: 1.5;
}

@media (max-width: 40rem) {
  .rating-spread { grid-template-columns: repeat(5, 1fr); row-gap: var(--space-3); }
  .report-bar-name { flex-basis: 5rem; }
  .report-record { flex-direction: column; text-align: center; }
}

/* ============================================================
   A page at a time
   ============================================================ */

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: var(--hairline);
}

.pager-where {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.pager-only {
  font-size: var(--size-2xs); color: var(--mist);
  margin-top: var(--space-3); text-align: right;
}

.pager-buttons { display: flex; gap: 0.2rem; flex-wrap: wrap; }

.pager-step, .pager-page {
  min-width: 1.9rem; padding: 0.25rem 0.5rem;
  background: transparent; border: var(--hairline);
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--size-2xs); color: var(--mist);
  cursor: pointer; font-variant-numeric: tabular-nums;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pager-step:hover:not(:disabled),
.pager-page:hover { color: var(--blossom); border-color: var(--accent); }

.pager-page.is-on {
  color: var(--ink); background: var(--accent); border-color: var(--accent);
}
.pager-step.is-off, .pager-step:disabled { opacity: 0.25; cursor: default; }

/* ---------- a day with more on it than fits ---------- */

.calendar-more {
  align-self: flex-start;
  background: none; border: none; padding: 0.05rem 0.2rem;
  font: inherit; font-size: var(--size-3xs); color: var(--accent);
  cursor: pointer; text-decoration: underline;
}
.calendar-more:hover { color: var(--blossom); }

/* ---------- a week ---------- */

/* Seven columns still, but each is a list rather than a box, so a
   busy Wednesday makes its own column longer and not the whole row. */
.calendar.is-week { align-items: start; }

.week-column {
  background: var(--surface); min-width: 0;
  padding: 0.3rem; display: flex; flex-direction: column; gap: 0.15rem;
  min-height: 7rem;
}
.week-column.is-today { box-shadow: inset 0 0 0 2px var(--accent); }

.week-head {
  background: none; border: none; padding: 0.1rem 0 0.3rem;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  display: flex; align-items: baseline; gap: 0.3rem;
}
.week-head:hover b { color: var(--accent); }
.week-day {
  font-size: var(--size-3xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.week-head b {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md);
  font-variant-numeric: tabular-nums;
}
.week-head i {
  margin-left: auto; font-style: normal; font-size: var(--size-3xs);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.week-column.is-today .week-head b { color: var(--accent); }

.week-nothing {
  font-size: var(--size-3xs); color: var(--mist); opacity: 0.4;
  text-align: center; margin-top: var(--space-3);
}

/* A week has room, so the text is readable rather than clipped. */
.calendar.is-week .day-what { white-space: normal; }
.calendar.is-week .day-event,
.calendar.is-week .day-premiere { padding: 0.2rem 0.3rem; }
.calendar.is-week .day-what { font-size: var(--size-3xs); }

/* ---------- a day ---------- */

.day-view { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

.day-row {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3);
  background: var(--surface);
  border: var(--hairline); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.day-row.is-premiere { border-left-color: var(--accent-lacquer); }

/* The time in its own column, because a day is read by when. */
.day-when {
  flex: none; width: 3.5rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.day-when b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-md); line-height: 1.1;
}
.day-when span { display: block; font-size: var(--size-3xs); color: var(--mist); }

.day-body { flex: 1; min-width: 0; }
.day-title {
  background: none; border: none; padding: 0; text-align: left;
  font: inherit; font-size: var(--size-sm); color: var(--blossom);
  cursor: pointer; text-decoration: none; display: block;
}
.day-title:hover { color: var(--accent); }
.day-sub { font-size: var(--size-3xs); color: var(--mist); margin-top: 0.15rem; }

@media (max-width: 52rem) {
  /* A month of seven columns is unreadable on a narrow screen; the
     week and the day are not, so they are what is offered. */
  .calendar { font-size: 0.9em; }
  .calendar-cell { min-height: 4rem; }
  .day-premiere img { display: none; }
  .calendar.is-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar.is-week .calendar-day { display: none; }
}

/* ============================================================
   Challenges of the Golden Shadows
   ============================================================ */

.challenge-years { align-items: center; }
.challenge-year {
  font-size: var(--size-lg); color: var(--gold);
  font-variant-numeric: tabular-nums; padding: 0 var(--space-2);
}
.period-chip.is-dim { opacity: 0.55; }

.challenge-founding { margin-top: var(--space-4); }
.challenge-sets {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-3); margin-top: var(--space-3);
}
.challenge-set {
  border: var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-3); display: flex; flex-direction: column;
  gap: var(--space-2); background: color-mix(in srgb, var(--ink) 40%, transparent);
}
.challenge-set-name { font-family: var(--font-serif); font-size: var(--size-md); color: var(--blossom); }
.challenge-set-count { font-size: var(--size-2xs); color: var(--mist); }
.challenge-set .primary, .challenge-set .ghost { margin-top: auto; }

.challenge-standing {
  display: flex; align-items: center; justify-content: space-between;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--mist); font-size: var(--size-sm);
}

.challenge-category { margin-top: var(--space-4); }
.challenge-category-head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.challenge-category-head img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.challenge-category-name strong { font-family: var(--font-serif); font-size: var(--size-md); }
.challenge-category-name .chinese { margin-left: 0.5rem; }
.challenge-mastery {
  margin-left: 0.75rem; font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.challenge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-3);
}
.challenge-card {
  position: relative; border: var(--hairline); border-radius: var(--radius-md);
  padding: var(--space-3); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--space-2);
  overflow: hidden;
}
.challenge-card.is-sealed { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.challenge-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.challenge-name { font-family: var(--font-serif); }

.tier-chip {
  font-size: var(--size-2xs); padding: 0.1rem 0.45rem;
  border-radius: 999px; border: var(--hairline); color: var(--mist);
  white-space: nowrap;
}
.tier-chip.is-standard  { color: var(--gold);    border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.tier-chip.is-difficult { color: var(--lantern); border-color: color-mix(in srgb, var(--lantern) 45%, transparent); }
.tier-chip.is-grand     { color: var(--moon);    border-color: color-mix(in srgb, var(--moon) 55%, transparent); }
.tier-chip.is-legendary {
  color: var(--ink); background: linear-gradient(120deg, var(--gold), var(--lantern));
  border-color: transparent;
}

.challenge-track {
  height: 0.4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 65%, transparent);
  border: var(--hairline); overflow: hidden;
}
.challenge-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--jade), var(--gold));
  transition: width var(--slow) var(--ease);
}
.challenge-count {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}

.challenge-claims { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.challenge-claim {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--size-2xs); padding: 0.15rem 0.5rem;
  border: var(--hairline); border-radius: 999px; color: var(--blossom);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.challenge-claim b { color: var(--gold); font-weight: 600; }
.challenge-unclaim {
  border: 0; background: none; color: var(--mist); cursor: pointer;
  font-size: var(--size-xs); padding: 0 0.1rem; line-height: 1;
}
.challenge-unclaim:hover { color: var(--lantern); }

.challenge-note { font-size: var(--size-2xs); color: var(--mist); font-style: italic; }

.challenge-stamp {
  position: absolute; top: -0.9rem; right: -0.7rem;
  width: 3.2rem; height: 3.2rem; object-fit: contain;
  transform: rotate(12deg);
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ink) 45%, transparent));
  pointer-events: none;
}
.challenge-stamp.is-small { width: 2rem; height: 2rem; position: static; }
.challenge-sealed-on { font-size: var(--size-2xs); color: var(--gold); }

.challenge-actions { display: flex; gap: var(--space-2); margin-top: auto; }

.challenge-slot {
  font-size: var(--size-2xs); color: var(--jade);
  border: var(--hairline); border-radius: 999px; padding: 0 0.4rem;
}
.challenge-slot.is-taken { color: var(--mist); opacity: 0.7; }

.challenge-pool .pool-category { margin-bottom: var(--space-3); }
.pool-category-name {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-serif); margin-bottom: var(--space-2);
}
.pool-category-name img { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.pool-row {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: 0.4rem 0.2rem; border-radius: var(--radius-sm); cursor: pointer;
}
.pool-row:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pool-row input { margin-top: 0.3rem; accent-color: var(--gold); }
.pool-name { display: flex; align-items: baseline; gap: 0.5rem; }
.pool-count { margin-right: auto; color: var(--mist); font-size: var(--size-2xs); }

.challenge-roads { margin-top: var(--space-4); }
.challenge-road {
  display: grid; grid-template-columns: 16rem 1fr auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: var(--hairline);
}
.challenge-road-name { display: flex; align-items: baseline; gap: 0.5rem; }
.challenge-road.is-sealed .challenge-road-name strong { color: var(--gold); }

.challenge-gallery { margin-top: var(--space-4); }
.challenge-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3); margin-top: var(--space-2);
}
.challenge-gallery-cell {
  text-align: center; padding: var(--space-2);
  border: var(--hairline); border-radius: var(--radius-md);
  opacity: 0.6; transition: opacity var(--fast) var(--ease);
}
.challenge-gallery-cell:hover { opacity: 0.9; }
.challenge-gallery-cell.is-earned { opacity: 1; border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.challenge-gallery-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.challenge-gallery-name { font-size: var(--size-2xs); margin-top: 0.3rem; }
.challenge-gallery-title { font-size: var(--size-2xs); color: var(--gold); margin-top: 0.2rem; }

.report-trials { display: flex; flex-direction: column; gap: var(--space-2); }
.report-trial { display: flex; gap: var(--space-2); align-items: center; }
.report-trial img { width: 2rem; height: 2rem; object-fit: contain; }
.report-trial-name { display: flex; align-items: baseline; gap: 0.5rem; }

@media (max-width: 40rem) {
  .challenge-road { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ============================================================
   The Characters Map — the atlas, the board, and the threads
   ============================================================ */

.map-atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2); margin-top: var(--space-2); }
.map-atlas-card { font: inherit; color: inherit; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); text-align: left; background: var(--surface);
  border: var(--hairline); border-radius: var(--radius-md);
  cursor: pointer; transition: box-shadow var(--fast) var(--ease); }
.map-atlas-card:hover { box-shadow: var(--shadow-mid); }
.map-atlas-card img { width: 46px; height: 66px; object-fit: cover;
  border-radius: var(--radius-sm); flex: none; }
.map-atlas-blank { width: 46px; height: 66px; flex: none; display: flex;
  align-items: center; justify-content: center; border-radius: var(--radius-sm);
  background: var(--surface-3); font-family: var(--font-serif); font-size: var(--size-lg); }
.map-atlas-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-atlas-text strong { font-family: var(--font-serif); font-weight: 400; }
.map-atlas-text span { font-size: var(--size-xs); color: var(--mist); }

.map-picker { display: flex; flex-direction: column; margin-top: var(--space-2);
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.map-picker-row { font: inherit; color: inherit; display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); padding: 8px 10px; text-align: left; background: none;
  border: none; border-bottom: var(--hairline); cursor: pointer; }
.map-picker-row:hover { background: var(--surface-3); }
.map-picker-has { font-size: var(--size-xs); color: var(--accent-jade); flex: none; }

/* The board itself. */
.map-frame { overflow: auto; border: var(--hairline);
  border-radius: var(--radius-md); background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--surface); max-height: 74vh; margin-top: var(--space-2); }
.map-board { position: relative; }
.map-threads { position: absolute; inset: 0; display: block; }

.map-seat { position: absolute; width: 124px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 6px 6px 8px; background: var(--surface);
  border: var(--hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-mid); cursor: grab; user-select: none;
  touch-action: none; }
.map-seat.is-dragging { cursor: grabbing; box-shadow: var(--shadow-high); z-index: 5; }
.map-seat.is-picked { outline: 2px solid var(--gold); outline-offset: 2px; }
.map-seat.is-still { cursor: pointer; touch-action: auto; }
.map-face { width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  pointer-events: none; }
.map-face.is-blank { display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); font-family: var(--font-serif); font-size: var(--size-xl);
  color: var(--mist); }
.map-seat-names { display: flex; flex-direction: column; align-items: center;
  text-align: center; min-width: 0; max-width: 112px; }
.map-seat-names strong { font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-sm); line-height: 1.2; }
.map-seat-names span { font-size: var(--size-xs); color: var(--mist); }
.map-seat-edit { position: absolute; top: 2px; right: 2px; border: none;
  background: none; cursor: pointer; font-size: var(--size-sm); color: var(--mist);
  padding: 4px; line-height: 1; }
.map-seat-edit:hover { color: var(--blossom); }

/* The threads, each relation in its colour. */
.map-thread { stroke-width: 2.5; fill: none; }
.map-thread-grip { stroke: transparent; stroke-width: 16; cursor: pointer; }
.map-thread-words { font-size: var(--size-xs); fill: var(--mist); text-anchor: middle;
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
#map-arrow path { fill: var(--mist); }

.rel-lovers    { stroke: var(--lacquer); }
.rel-married   { stroke: var(--lacquer); stroke-width: 4; }
.rel-oneside   { stroke: var(--lacquer); stroke-dasharray: 7 5; }
.rel-exes      { stroke: var(--lacquer); stroke-dasharray: 3 6; opacity: .45; }
.rel-parent    { stroke: color-mix(in srgb, var(--blossom) 70%, var(--surface)); }
.rel-siblings  { stroke: color-mix(in srgb, var(--blossom) 70%, var(--surface)); stroke-dasharray: 10 4; }
.rel-family    { stroke: color-mix(in srgb, var(--blossom) 45%, var(--surface)); }
.rel-childhood { stroke: var(--accent-jade); stroke-dasharray: 10 4; }
.rel-friends   { stroke: var(--jade); }
.rel-colleagues{ stroke: var(--mist); }
.rel-master    { stroke: var(--lantern); }
.rel-rivals    { stroke: var(--gold); }
.rel-enemies   { stroke: color-mix(in srgb, var(--mist) 40%, var(--ink)); stroke-width: 3; }
.rel-secret    { stroke: var(--mist); stroke-dasharray: 2 5; }
.rel-custom    { stroke: var(--mist); }

.map-legend { display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: var(--space-2); font-size: var(--size-xs); color: var(--mist); }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-swatch { display: inline-block; width: 18px; height: 0; border-top-width: 3px;
  border-top-style: solid; }
.map-swatch.rel-lovers    { border-top-color: var(--lacquer); }
.map-swatch.rel-married   { border-top-color: var(--lacquer); }
.map-swatch.rel-oneside   { border-top-color: var(--lacquer); border-top-style: dashed; }
.map-swatch.rel-exes      { border-top-color: var(--lacquer); border-top-style: dashed; opacity: .45; }
.map-swatch.rel-parent    { border-top-color: color-mix(in srgb, var(--blossom) 70%, var(--surface)); }
.map-swatch.rel-siblings  { border-top-color: color-mix(in srgb, var(--blossom) 70%, var(--surface)); border-top-style: dashed; }
.map-swatch.rel-family    { border-top-color: color-mix(in srgb, var(--blossom) 45%, var(--surface)); }
.map-swatch.rel-childhood { border-top-color: var(--accent-jade); border-top-style: dashed; }
.map-swatch.rel-friends   { border-top-color: var(--jade); }
.map-swatch.rel-colleagues{ border-top-color: var(--mist); }
.map-swatch.rel-master    { border-top-color: var(--lantern); }
.map-swatch.rel-rivals    { border-top-color: var(--gold); }
.map-swatch.rel-enemies   { border-top-color: color-mix(in srgb, var(--mist) 40%, var(--ink)); }
.map-swatch.rel-secret    { border-top-color: var(--mist); border-top-style: dotted; }
.map-swatch.rel-custom    { border-top-color: var(--mist); }

/* Seating dialogs. */
.map-cast .map-cast-row { font: inherit; color: inherit; display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 6px 8px; text-align: left; background: none; border: none;
  border-bottom: var(--hairline); cursor: pointer; }
.map-cast .map-cast-row:hover { background: var(--surface-3); }
.map-cast .map-cast-row.is-seated { opacity: .5; cursor: default; }
.map-cast .map-cast-row img { width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: none; }
.map-cast .map-cast-row .map-face.is-blank { width: 40px; height: 40px;
  font-size: var(--size-md); flex: none; }
.map-cast-text { display: flex; flex-direction: column; min-width: 0; }
.map-cast-text span { font-size: var(--size-xs); color: var(--mist); }

/* Danger, quietly: a ghost that means it. */
.ghost.is-danger { color: var(--state-fail); border-color: currentColor; }

/* The map on the title's own page, shrunk and read-only. */
.map-mini { font: inherit; color: inherit; display: block; width: 100%; overflow: hidden; position: relative;
  border: var(--hairline); border-radius: var(--radius-md);
  background: var(--surface); cursor: pointer; padding: 0; }
.map-mini-stage { position: relative; transform-origin: 0 0; }
.map-mini .map-seat { box-shadow: none; }

/* ============================================================
   Golden Shadows Tasks — the desk
   ============================================================ */

.duty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2); margin-top: var(--space-2); align-items: start; }

.duty-card { background: var(--surface); border: var(--hairline);
  border-top-width: 3px; border-radius: var(--radius-md); padding-bottom: 6px; }
.duty-mine     { border-top-color: var(--gold); }
.duty-upcoming { border-top-color: color-mix(in srgb, var(--blossom) 70%, var(--surface)); }
.duty-reviews  { border-top-color: var(--moon); }
.duty-ratings  { border-top-color: var(--gold); }
.duty-quotes   { border-top-color: var(--jade); }
.duty-osts     { border-top-color: var(--gold); }
.duty-seal     { border-top-color: var(--lacquer); }
.duty-quiet    { border-top-color: var(--mist); }
.duty-dates    { border-top-color: color-mix(in srgb, var(--blossom) 45%, var(--surface)); }

.duty-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: 10px 12px 6px; }
.duty-head strong { font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-md); }
.duty-count { min-width: 22px; text-align: center; padding: 1px 7px;
  border-radius: var(--radius-pill); background: var(--surface-3);
  font-size: var(--size-xs); }

.duty-sub { padding: 0 12px 6px; font-size: var(--size-xs); color: var(--mist); }
.duty-all-done { padding: 18px 12px 22px; text-align: center;
  color: var(--accent-jade); font-size: var(--size-sm); }
.duty-more { padding: 8px 12px 10px; font-size: var(--size-xs); color: var(--mist); }

.duty-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border-top: var(--hairline); cursor: pointer; }
.duty-row:hover { background: var(--surface-3); }
.duty-row.duty-task { cursor: default; }
.duty-row.duty-task:hover { background: none; }
.duty-row.is-done .duty-text > span:first-child { text-decoration: line-through;
  opacity: .55; }

.duty-poster { width: 28px; height: 40px; object-fit: cover; flex: none;
  border-radius: var(--radius-sm); }
.duty-poster.is-blank { display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); font-family: var(--font-serif); color: var(--mist); }

.duty-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.duty-text > span:first-child { font-size: var(--size-sm); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.duty-sub-line { font-size: var(--size-xs); color: var(--mist); }
.duty-due { font-size: var(--size-xs); color: var(--mist); }
.duty-due.is-late { color: var(--state-fail); }

.duty-forget { flex: none; border: none; background: none; color: var(--mist);
  font-size: var(--size-md); line-height: 1; padding: 4px 6px; cursor: pointer;
  border-radius: var(--radius-sm); }
.duty-forget:hover { color: var(--state-fail); background: var(--surface-3); }

.duty-act { flex: none; padding: 3px 10px; font-size: var(--size-xs); }

.duty-add { display: flex; gap: 6px; padding: 10px 12px 8px;
  border-top: var(--hairline); }
.duty-add input[type="text"] { flex: 1; min-width: 0; }
.duty-add input[type="date"] { width: 8.5rem; flex: none; }
.duty-done-head { padding: 8px 12px 2px; font-size: var(--size-xs);
  color: var(--mist); text-transform: uppercase; letter-spacing: .06em; }

.duty-month { display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 2px 12px 6px; font-size: var(--size-sm); }
.duty-month-step { border: none; background: none; color: inherit; font: inherit;
  font-size: var(--size-lg); line-height: 1; padding: 0 8px; cursor: pointer; }
.duty-month-step:hover { color: var(--accent); }

/* ============================================================
   The Dashboard — the hall at a glance
   ============================================================ */

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2); margin-top: var(--space-2); align-items: stretch; }

/* One case for every card: panel-dressed, one standard height,
   the body scrolling when it holds more than it shows. */
.dash-card { position: relative; background: var(--surface);
  border: var(--hairline); border-radius: var(--radius-md);
  padding: 12px; height: 340px;
  display: flex; flex-direction: column; gap: 8px; }
.dash-card.is-wide { grid-column: 1 / -1; }
.dash-head { flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-2);
  font-family: var(--font-serif); font-size: var(--size-lg); }
.dash-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; display: flex; flex-direction: column;
  gap: 8px; padding-right: 4px; }
.dash-foot { flex: none; padding-top: 4px; }
.dash-quiet { padding: 16px 0 12px; text-align: center; color: var(--mist);
  font-size: var(--size-sm); }

/* Scrollbars in palace colours, wherever a card scrolls. */
.dash-body, .dash-shelf, .map-picker {
  scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dash-body::-webkit-scrollbar, .dash-shelf::-webkit-scrollbar,
.map-picker::-webkit-scrollbar { width: 8px; height: 8px; }
.dash-body::-webkit-scrollbar-thumb, .dash-shelf::-webkit-scrollbar-thumb,
.map-picker::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 4px; }
.dash-body::-webkit-scrollbar-thumb:hover,
.dash-shelf::-webkit-scrollbar-thumb:hover,
.map-picker::-webkit-scrollbar-thumb:hover { background: var(--mist); }
.dash-body::-webkit-scrollbar-track, .dash-shelf::-webkit-scrollbar-track,
.map-picker::-webkit-scrollbar-track { background: transparent; }

.dash-row { display: flex; align-items: center; gap: 10px; padding: 4px 0;
  flex: none; }
.dash-row.is-open { cursor: pointer; border-radius: var(--radius-sm); }
.dash-row.is-open:hover { background: var(--surface-2); }
.dash-poster { width: 30px; height: 44px; object-fit: cover; flex: none;
  border-radius: var(--radius-sm); }
.dash-poster.is-blank { display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); font-family: var(--font-serif); color: var(--mist); }
.dash-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dash-text > span:first-child { font-size: var(--size-sm); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dash-sub { font-size: var(--size-xs); color: var(--mist); }
.dash-sub.is-late { color: var(--state-fail); }

/* The streak, with the dragon looking in over the card's shoulder. */
.dash-dragon { position: absolute; top: -46px; right: 10px; width: 86px;
  pointer-events: none; z-index: 1;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--ink) 45%, transparent)); }
.dash-streak-run { flex: none; }
.dash-streak-run b { font-family: var(--font-serif); font-size: var(--size-2xl);
  line-height: 1; margin-right: 6px; }
.dash-streak-run span { color: var(--mist); font-size: var(--size-sm); }
.dash-flip { display: inline-flex; border: var(--hairline);
  border-radius: var(--radius-pill); overflow: hidden; align-self: flex-start;
  flex: none; }
.dash-flip-side { border: none; background: none; color: var(--mist); font: inherit;
  font-size: var(--size-xs); padding: 3px 12px; cursor: pointer; }
.dash-flip-side.is-on { background: var(--surface-3); color: inherit; }
.dash-week { display: flex; gap: 6px; justify-content: space-between; flex: none; }
.dash-day { display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; }
.dash-day i { width: 38px; height: 38px; border-radius: 50%; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); overflow: hidden; }
.dash-day i img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.dash-day.is-watched i { border-color: var(--gold); background: var(--surface-3); }
.dash-day.is-today i { border-color: var(--accent); }
.dash-day span { font-size: var(--size-3xs); color: var(--mist); letter-spacing: .03em;
  white-space: nowrap; }

/* The whole month, Monday-first, numbered — green where watched. */
.dash-month { display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; flex: none; }
.dash-mday-head { text-align: center; font-size: var(--size-3xs); color: var(--mist); }
.dash-mday { height: 26px; border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--mist);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-2xs); }
.dash-mday.is-watched { background: var(--accent-jade); color: var(--blossom); }
.dash-mday.is-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-mday.is-ahead { opacity: .35; }

/* Shelves of standing posters, scrolling sideways in palace colours. */
.dash-shelf { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.dash-standee { flex: none; width: 96px; display: flex; flex-direction: column;
  gap: 4px; border: none; background: none; font: inherit; color: inherit;
  cursor: pointer; text-align: left; padding: 0; }
.dash-standee img, .dash-standee-blank { width: 96px; height: 138px;
  object-fit: cover; border-radius: var(--radius-sm); }
.dash-standee-blank { display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); font-family: var(--font-serif);
  font-size: var(--size-xl); color: var(--mist); }
.dash-standee-name { font-size: var(--size-xs); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dash-meter { height: 4px; border-radius: 2px; background: var(--surface-3);
  overflow: hidden; }
.dash-meter-fill { height: 100%; background: var(--accent); }

/* The year in bars, honest pixels, across the whole row. */
.dash-bars { display: flex; align-items: flex-end; gap: 6px; padding-top: 8px;
  flex: none; width: 100%; }
.dash-bar-col { flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; min-width: 0; }
.dash-bar-stack { height: 150px; width: 100%; max-width: 44px;
  display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.dash-bar { width: 100%; }
.dash-bar:last-child { border-radius: 3px 3px 0 0; }
.dash-bar.is-bl { background: var(--accent-lacquer); }
.dash-bar.is-other { background: var(--accent-jade); }
.dash-bar-col b { font-size: var(--size-xs); font-weight: 400; }
.dash-bar-col span { font-size: var(--size-3xs); color: var(--mist); }
.dash-legend { display: flex; gap: 14px; font-size: var(--size-xs);
  color: var(--mist); flex: none; }
.dash-legend .is-bl { color: var(--accent-lacquer); }
.dash-legend .is-other { color: var(--accent-jade); }

/* Goals. */
.dash-rings { display: flex; gap: 18px; justify-content: center; padding: 6px 0;
  flex: none; }
.dash-ring-wrap { display: flex; flex-direction: column; align-items: center;
  gap: 4px; font-size: var(--size-xs); color: var(--mist); }
.dash-ring { width: 74px; height: 74px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; }
.dash-ring b { width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface); display: flex; align-items: center;
  justify-content: center; font-size: var(--size-sm); }

/* Lucky draws. */
.dash-again { border: none; background: none; color: var(--mist); font: inherit;
  font-size: var(--size-md); cursor: pointer; padding: 0 2px; line-height: 1; }
.dash-again:hover { color: var(--accent); }
.dash-card.is-quote .dash-body { justify-content: center; align-items: center;
  text-align: center; padding: 0 10px; }
.dash-quote { margin: 0; font-family: var(--font-serif); font-size: var(--size-lg);
  line-height: 1.55; }
.dash-quote-by { font-size: var(--size-xs); color: var(--mist); cursor: pointer; }
.dash-quote-by:hover { color: var(--accent); }
.dash-card.is-track { grid-column: span 2; }
@media (max-width: 760px) { .dash-card.is-track { grid-column: auto; } }
.dash-song-art { width: 54px; height: 54px; border-radius: var(--radius-sm);
  object-fit: cover; flex: none; }
.dash-song-art.is-blank { display: flex; align-items: center;
  justify-content: center; background: var(--surface-3); color: var(--mist);
  font-size: var(--size-lg); }
.dash-player { width: 100%; height: 36px; accent-color: var(--accent); }
.dash-hear { align-self: flex-start; text-decoration: none; padding: 4px 14px; }

/* Vows — on the challenge board, in the report, and the desk's nudge. */
.challenge-vows h3 { margin-bottom: 6px; }
.challenge-vow { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); padding: 6px 0;
  border-top: var(--hairline); }
.challenge-vow strong { font-family: var(--font-serif); font-weight: 400; }
.challenge-vow span { font-size: var(--size-sm); color: var(--mist); }
.challenge-vow.is-met strong { color: var(--gold); }
.challenge-vow.is-met span { color: inherit; }
.duty-vow-ask { cursor: pointer; }
.duty-vow-ask .duty-text > span:first-child { color: var(--gold); }

/* ============================================================
   Scrollbars everywhere, in palace colours — the global law.
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--mist); }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }

/* The desk in matched cases: one height, bodies scrolling, pinned
   drawers, and the dragon looking in on My tasks. */
.duty-card { position: relative; height: 360px;
  display: flex; flex-direction: column; }
.duty-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; }
.duty-add, .duty-month { flex: none; }
.duty-card .dash-dragon { top: -44px; right: 8px; width: 78px; }

/* The scroll edit, folded shorter: two fields to a row where they
   fit, with sections, hints, pickers and long text running full. */
.modal.is-scroll-edit { width: min(52rem, 100%); }
.modal.is-scroll-edit .modal-body { display: grid;
  grid-template-columns: 1fr 1fr; gap: 2px 16px; align-items: start; }
.modal.is-scroll-edit .modal-body > .profile-subhead,
.modal.is-scroll-edit .modal-body > .field-hint,
.modal.is-scroll-edit .modal-body > .format-list,
.modal.is-scroll-edit .modal-body > .credit-list,
.modal.is-scroll-edit .modal-body > .tag-picker,
.modal.is-scroll-edit .modal-body > .scale-picker,
.modal.is-scroll-edit .modal-body > .field:has(textarea),
.modal.is-scroll-edit .modal-body > .field:first-child {
  grid-column: 1 / -1; }
@media (max-width: 700px) {
  .modal.is-scroll-edit .modal-body { grid-template-columns: 1fr; }
}

/* The column chips of the Scroll Displays choosing screen. */
.display-columns { flex-wrap: wrap; }

/* The table's sieve row: one narrowing control per column. */
.table-sieve th { padding: 3px 6px 6px; }
.sieve-box { width: 100%; min-width: 0; font-size: var(--size-xs);
  padding: 3px 6px; }
.sieve-clear { border: none; background: none; color: var(--mist);
  font-size: var(--size-md); line-height: 1; cursor: pointer; padding: 2px 6px; }
.sieve-clear:hover { color: var(--state-fail); }

/* The watchlist's dealt hand, and its search box. */
.watch-proposed-head { display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2); }
.watch-proposed-head h3 { margin: 0; flex: 1; }
.watch-seek { min-width: 14rem; }

/* Soundtracks: folded shelves, a forgettable card, an editable kind. */
.track-fold { border: var(--hairline); border-radius: var(--radius-md);
  margin-bottom: var(--space-2); background: var(--surface); overflow: hidden; }
.track-fold > .tracks { display: none; padding: 0 var(--space-2) var(--space-2); }
.track-fold.is-open > .tracks { display: block; }
.track-fold-head { display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 8px 12px; background: none; border: none;
  font: inherit; color: inherit; cursor: pointer; text-align: left; }
.track-fold-head:hover { background: var(--surface-2); }
.track-fold-head img { width: 34px; height: 48px; object-fit: cover;
  border-radius: var(--radius-sm); flex: none; }
.track-fold-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.track-fold-text strong { font-family: var(--font-serif); font-weight: 400; }
.track-fold-text span { font-size: var(--size-xs); color: var(--mist); }
.track-fold-arrow { color: var(--mist); transition: transform var(--fast) var(--ease); }
.track-fold.is-open .track-fold-arrow { transform: rotate(90deg); }

.without-card { position: relative; }
.without-forget { position: absolute; top: 4px; right: 6px; color: var(--mist);
  font-size: var(--size-md); line-height: 1; padding: 2px 6px;
  border-radius: var(--radius-sm); }
.without-forget:hover { color: var(--state-fail); background: var(--surface-2); }

button.track-kind { border: var(--hairline); background: none; font: inherit;
  cursor: pointer; }
button.track-kind:hover { border-color: var(--accent); color: var(--accent); }

/* Spotify's own green, for the door that needs no key. */
.track-source.is-spotify { color: var(--brand-spotify); border-color: currentColor; }

/* The fold's own door to more music. */
.track-fold-find { flex: none; font-size: var(--size-xs); color: var(--mist);
  border: var(--hairline); border-radius: var(--radius-pill);
  padding: 3px 10px; }
.track-fold-find:hover { color: var(--accent); border-color: currentColor; }

/* ============================================================
   The annotation chamber — tiled scales and seven boxes
   ============================================================ */
.chamber-page-link { text-decoration: none; padding: 0.3rem 0.9rem;
  border: var(--hairline); border-radius: var(--radius-sm); }

.chamber-scale { padding: 10px 0 14px; }
.chamber-scale + .chamber-scale { border-top: var(--hairline); }
.chamber-scale-head { display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; }
.chamber-scale-head strong { font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-md); }
.chamber-scale-head span { font-size: var(--size-xs); color: var(--mist); }

.chamber-tiles { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.chamber-tile { flex: none; border: none; background: none;
  padding: 0; cursor: pointer; border-radius: 8px;
  transition: transform var(--fast) var(--ease); }
.chamber-tile img { height: 108px; width: auto; display: block;
  filter: saturate(.55) brightness(.85);
  transition: filter var(--fast) var(--ease); }
.chamber-tile:hover { transform: translateY(-3px); }
.chamber-tile:hover img { filter: none; }
.chamber-tile.is-chosen { transform: translateY(-3px) scale(1.06); }
.chamber-tile.is-chosen img { filter: none;
  filter: drop-shadow(0 0 7px var(--gold)); }

.chamber-verdict { border: var(--hairline); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 10px 14px;
  background: var(--surface-2); }
.chamber-verdict strong { font-family: var(--font-serif); font-weight: 400; }
.chamber-verdict p { margin: 4px 0 0; font-size: var(--size-sm);
  line-height: 1.5; }
.chamber-unjudged { color: var(--mist); font-size: var(--size-xs);
  font-style: italic; }

.chamber-boxes { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3); }
.chamber-box { display: flex; flex-direction: column; gap: 4px; }
.chamber-box label { font-family: var(--font-serif); font-size: var(--size-sm);
  display: flex; justify-content: space-between; align-items: baseline; }
.chamber-box textarea { resize: vertical; min-height: 6.5rem; }
.chamber-box:last-child { grid-column: 1 / -1; }
.chamber-saved { font-size: var(--size-xs); color: var(--accent-jade);
  font-family: var(--font-sans); }
@media (max-width: 700px) {
  .chamber-boxes { grid-template-columns: 1fr; }
}

/* The annotation as read on the title's own page. */
.annotation-spoken { margin-bottom: var(--space-2); }
.annotation-spoken strong { display: block; font-family: var(--font-serif);
  font-weight: 400; font-size: var(--size-sm); color: var(--mist);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.annotation-spoken p { margin: 0 0 6px; line-height: 1.55; }
.chamber-verdict.annotation-spoken { margin-top: var(--space-2); }
.chamber-verdict.annotation-spoken strong { color: inherit;
  text-transform: none; letter-spacing: 0; font-size: var(--size-md); }

/* The vows and galleries keep clear of the cards above them. */
.challenge-vows, .challenge-gallery { position: relative; z-index: 1;
  margin-top: var(--space-4); }
.challenge-gallery-cell { cursor: pointer; }
.challenge-gallery-cell:hover { background: var(--surface-2); }

/* One road's record. */
.road-trial { padding: 10px 0; border-bottom: var(--hairline); }
.road-trial:last-child { border-bottom: none; }
.road-trial-head { display: flex; align-items: center; gap: var(--space-2); }
.road-trial-head strong { font-family: var(--font-serif); font-weight: 400; }
.road-trial-seal { font-size: var(--size-xs); color: var(--gold); margin-top: 3px; }
.road-trial-wait { font-size: var(--size-xs); color: var(--mist);
  font-style: italic; margin-top: 3px; }

/* Wing cards that carry a tile of art above their crest. */
.wing-card.has-tile { overflow: hidden; padding-top: 0; }
.wing-card-art { margin: 0 calc(-1 * var(--space-3)) var(--space-2); }
.wing-card.has-tile .wing-card-art { margin: 0 0 var(--space-2); }
.wing-card-art img { display: block; width: 100%; height: 9.5rem;
  object-fit: cover; }
.wing-card.has-tile > .nav-icon,
.wing-card.has-tile > h3,
.wing-card.has-tile > .chinese { margin-left: var(--space-3); }
.wing-card.has-tile > h3 { margin-top: 0; }
.wing-card.has-tile { padding-bottom: var(--space-3); }

/* ============================================================
   The Registry of Investitures — edicts as hung scrolls,
   two abreast, each card a decree with its painting.
   ============================================================ */
.edict-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 52rem) { .edict-grid { grid-template-columns: 1fr; } }

.edict {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.edict-when { font-size: var(--size-xs); color: var(--mist);
  letter-spacing: 0.06em; text-transform: uppercase; }
.edict-line { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; margin-top: 3px; }
.edict-line a { font-family: var(--font-serif); font-size: var(--size-md);
  color: inherit; text-decoration: none; }
.edict-line a:hover { color: var(--gold); }
.edict-arrow { color: var(--mist); }
.edict-rank { font-size: var(--size-sm); }
.edict-rank[data-accent="gold"]    { color: var(--gold); }
.edict-rank[data-accent="lacquer"] { color: var(--lacquer); }
.edict-rank[data-accent="jade"]    { color: var(--jade); }
.edict-rank[data-accent="moon"]    { color: var(--moon); }
.edict-rank[data-accent="mist"]    { color: var(--mist); }
.edict-reason { font-size: var(--size-sm); font-style: italic;
  margin-top: 4px; opacity: 0.9; }
.edict-add-reason { margin-top: 6px; font-size: var(--size-xs); }
.edict-pager { display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); }
.edict-page { font-size: var(--size-xs); color: var(--mist); }

/* The scroll painting fills the top of its card. */
.edict-scroll { display: block; }
.edict-scroll img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform var(--slow) var(--ease);
}
.edict-scroll:hover img { transform: scale(1.02); }
.edict-main { padding: var(--space-3) var(--space-4) var(--space-4); }

/* The Registry's figures: one thin line of four. */
.vault-summary.edict-figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.edict-figures .vault-sum { padding: var(--space-2) var(--space-3); }
.edict-figures .vault-sum-figure { font-size: var(--size-lg); }
@media (max-width: 40rem) {
  .vault-summary.edict-figures { grid-template-columns: repeat(2, 1fr); }
}

/* The face beside the decree, ringed in the rank arrived at. */
.edict-portrait {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  overflow: hidden; border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); align-self: center;
}
.edict-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edict-portrait-blank { font-size: var(--size-sm); color: var(--mist); }
.edict-portrait[data-accent="gold"]    { border-color: var(--gold); }
.edict-portrait[data-accent="lacquer"] { border-color: var(--lacquer); }
.edict-portrait[data-accent="jade"]    { border-color: var(--jade); }
.edict-portrait[data-accent="moon"]    { border-color: var(--moon); }
.edict-portrait[data-accent="mist"]    { border-color: var(--mist); }
.edict-line { align-items: center; }

/* The two of them — a pairing's own gallery. */
.pair-gallery-head { display: flex; align-items: baseline;
  gap: var(--space-2); flex-wrap: wrap; }
.pair-gallery-head h3 { margin: 0 auto 0 0; }
.pair-gallery-count { font-size: var(--size-xs); color: var(--mist); }
.pair-gallery-stage { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr); margin-top: var(--space-3); }
@media (max-width: 40rem) {
  .pair-gallery-stage { grid-template-columns: 1fr; }
}
.pair-shot { display: block; border-radius: var(--radius-md);
  overflow: hidden; border: var(--hairline); }
.pair-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: block; transition: transform var(--slow) var(--ease); }
.pair-shot:hover img { transform: scale(1.02); }
.pair-gallery-shelf { display: flex; flex-wrap: wrap;
  gap: var(--space-2); margin-top: var(--space-3); }
.pair-shelf-cell { position: relative; width: 84px; height: 84px;
  border-radius: var(--radius-md); overflow: hidden;
  border: var(--hairline); }
.pair-shelf-cell img { width: 100%; height: 100%; object-fit: cover;
  display: block; }
.pair-shelf-remove { position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; line-height: 1; border-radius: 50%;
  border: none; background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--blossom);
  cursor: pointer; }

/* The pairing's crowned backdrop — cinematic, capped, above the card. */
.pair-backdrop { aspect-ratio: 21 / 9; max-height: 340px;
  border-radius: var(--radius-md); border: var(--hairline);
  margin-bottom: var(--space-3); }
.pair-shelf-cell.is-backdrop { border-color: var(--gold); }
.pair-shelf-crown { position: absolute; bottom: 2px; right: 2px;
  width: 22px; height: 22px; line-height: 1; border-radius: 50%;
  border: none; background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--gold);
  cursor: pointer; }

/* The consort profile's moving pictures. */
.video-row { margin-top: var(--space-3); }
.video-row .embed { width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-md); display: block; }
.video-link { display: block; padding: var(--space-3);
  border: var(--hairline); border-radius: var(--radius-md);
  color: inherit; text-decoration: none; word-break: break-all; }
.video-link:hover { color: var(--gold); }
.video-under { display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-1); }
.video-under .sub { margin-right: auto; }
.work-star { position: static; width: auto; height: auto;
  background: none; }

/* The consort header's meta line and the quiet door to the Pavilion. */
.court-detail-meta[data-accent="gold"]    { color: var(--gold); }
.court-detail-meta[data-accent="lacquer"] { color: var(--lacquer); }
.court-detail-meta[data-accent="jade"]    { color: var(--jade); }
.court-detail-meta[data-accent="moon"]    { color: var(--moon); }
.court-detail-meta[data-accent="mist"]    { color: var(--mist); }
.court-detail-link { display: inline-block; margin-top: var(--space-2);
  font-size: var(--size-xs); text-decoration: none; }

/* The pairing/consort backdrop always spans its container — never
   letting aspect-ratio derive a width from the clamped height. */
.pair-backdrop { width: 100%; }

/* Adjusting a frame: drag the picture to move its heart. */
.pair-shot { position: relative; }
.focus-tools { position: absolute; right: 0.5rem; bottom: 0.5rem;
  z-index: 2; display: flex; gap: var(--space-1); }
.focus-tools .ghost { font-size: var(--size-xs); }
.is-adjusting { cursor: grab; user-select: none; }
.is-adjusting:active { cursor: grabbing; }
.is-adjusting img { transition: none !important; transform: none !important; }

/* The adjust tools must be readable over any painting. */
.focus-tools .ghost {
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--blossom);
  border-color: color-mix(in srgb, var(--blossom) 25%, transparent);
}

/* The backdrop's image IS its frame — absolutely — so the crop
   truly lives inside the image box and the focal point can move it.
   (Grid centering let percentage heights fail, leaving nothing for
   object-position to do.) */
.work-backdrop.pair-backdrop img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* The Apple door beside the Spotify one. */
.track-source.is-apple { color: var(--brand-apple); border-color: currentColor; }

/* Music | Music Video — the shelf, watched. */
.mv-modes { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.mv-modes .ghost.is-on { color: var(--gold); border-color: var(--gold); }
.mv-grid { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr); }
@media (max-width: 52rem) { .mv-grid { grid-template-columns: 1fr; } }
.mv-item .embed { width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-md); display: block; }
.mv-caption { margin-top: var(--space-1); display: flex;
  align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }

/* The main-pairing star and the MV button's lit state. */
.pairing-main-star { color: var(--gold); }
.pairing-main-star:disabled { opacity: 1; cursor: default; }
.track-source.is-on { color: var(--gold); border-color: var(--gold); }

/* A person's fates as small ship cards, in a row that wraps. */
.pairing-mini-grid { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.pairing-card-mini { text-decoration: none; color: inherit;
  cursor: pointer; }

/* The Hall of Precious Curios: shelves built for thousands. */
.curio-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap;
  align-items: center; margin-bottom: var(--space-3); }
.curio-toolbar .scroll-search { flex: 1 1 14rem; }
.curio-add { margin-left: auto; }
.curio-list { display: flex; flex-direction: column; }
.curio-row { display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 8%, transparent)); }
.curio-row:last-child { border-bottom: 0; }
.curio-row:hover .curio-name { color: var(--gold); }
.curio-thumb { width: 3.2rem; height: 3.2rem; flex: 0 0 auto;
  border-radius: var(--radius-sm); overflow: hidden; display: grid;
  place-items: center; background: color-mix(in srgb, var(--blossom) 4%, transparent); }
.curio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.curio-noimg { opacity: 0.35; font-size: var(--size-lg); }
.curio-main { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; gap: 0.15rem; }
.curio-name { font-weight: 600; }
.curio-sub { font-size: var(--size-xs); opacity: 0.7; }
.curio-right { display: flex; gap: var(--space-2); align-items: center;
  flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.curio-signed { color: var(--gold); }
.curio-qty, .curio-price, .curio-when { font-size: var(--size-xs);
  opacity: 0.75; }
.curio-title { margin-bottom: var(--space-3); }
.curio-cell { position: relative; }

/* Curios, second pass: tiles, the collector board, vertical facts. */
.curio-tiles { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.curio-tile { display: flex; flex-direction: column; gap: 0.3rem;
  text-decoration: none; color: inherit; }
.curio-tile:hover .curio-name { color: var(--gold); }
.curio-tile-art { aspect-ratio: 1; border-radius: var(--radius-md);
  overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blossom) 4%, transparent); }
.curio-tile-art img { width: 100%; height: 100%; object-fit: contain; }
.curio-tile .curio-noimg { font-size: var(--size-2xl); }
.curio-tile-foot { display: flex; gap: var(--space-2); align-items: center;
  flex-wrap: wrap; margin-top: auto; }

.curio-item-top { display: flex; gap: var(--space-4); align-items: flex-start; }
.curio-frame { flex: 0 0 min(24rem, 42%); aspect-ratio: 1; position: relative;
  background: url('/assets/img/curio-frame.png') center / contain no-repeat; }
.curio-frame-well { position: absolute; inset: 20% 19% 22% 20%;
  display: grid; place-items: center; }
.curio-frame-well img { max-width: 100%; max-height: 100%;
  object-fit: contain; cursor: zoom-in; }
.curio-na { font-size: var(--size-4xl); font-weight: 700; letter-spacing: 0.1em;
  color: color-mix(in srgb, color-mix(in srgb, var(--gold) 20%, var(--surface)) 35%, transparent); }
.curio-info { flex: 1 1 auto; min-width: 0; }
.curio-facts { display: flex; flex-direction: column; gap: 0.35rem;
  margin: var(--space-3) 0; }
.curio-fact { display: flex; gap: var(--space-2); align-items: baseline; }
.curio-fact span { font-size: var(--size-xs); text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.6; flex: 0 0 7.5rem; }
@media (max-width: 52rem) {
  .curio-item-top { flex-direction: column; }
  .curio-frame { flex-basis: auto; width: 100%; max-width: 24rem;
    align-self: center; }
}

.curio-lightbox { position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, var(--ink) 88%, transparent); display: grid; place-items: center;
  cursor: zoom-out; }
.curio-lightbox img { max-width: 92vw; max-height: 92vh; }

/* Compact forms: two columns, long fields spanning both. Drop 166: the columns may narrow below a field's own width (a date
   and time field is wide), so nothing runs past the dialog's edge. */
.form-compact { display: grid; gap: 0 var(--space-3);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.form-compact .field { min-width: 0; }
.form-compact .field input, .form-compact .field select, .form-compact .field textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.form-compact .modal-intro, .form-compact .field-full { grid-column: 1 / -1; }
@media (max-width: 40rem) { .form-compact { grid-template-columns: 1fr; } }

/* Curios, third pass: air, frames, the seal, the well. */
.curio-back { margin-bottom: var(--space-3); }

.curio-facts { border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 10%, transparent));
  border-radius: var(--radius-md); overflow: hidden; gap: 0; }
.curio-fact { padding: 0.5rem 0.75rem; margin: 0;
  display: grid; grid-template-columns: 8.5rem 1fr;
  gap: var(--space-2); align-items: baseline;
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 8%, transparent)); }
.curio-fact:last-child { border-bottom: 0; }
.curio-fact:nth-child(odd) { background: color-mix(in srgb, var(--blossom) 2.5%, transparent); }
.curio-fact span { flex: none; border-right: 1px solid
  var(--line, color-mix(in srgb, var(--blossom) 8%, transparent)); padding-right: var(--space-2); }

.curio-seal { height: 2.6rem; width: auto; display: inline-block; }
.curio-tile-foot .curio-seal { height: 2.1rem; }

/* The board's inner well, retuned so nothing escapes the frame. */
.curio-frame-well { inset: 21% 21% 25% 21%; }

/* Hall liveries: the sapphire board, the BL red cover — and each
   board's inner well tuned to its own art, with more floor so
   nothing touches the frame. */
.curio-frame-well { inset: 22% 22% 27.5% 22%; }
.curio-frame.is-sapphire {
  background-image: url('/assets/img/curio-frame-sapphire.png'); }
.curio-frame.is-sapphire .curio-frame-well { inset: 21% 24% 26% 24%; }
.curio-frame.is-bl {
  background-image: url('/assets/img/curio-frame-bl.png'); }
.curio-frame.is-bl .curio-frame-well { inset: 22% 25% 27% 25%; }
/* Drop 131: the BL Pavilion's frames by kind - a book's red, the 2D shelf's green, an ebook's teal. */
.curio-frame.is-bl.is-bl-book { background-image: url('/assets/img/curio-frame-bl-book.webp'); }
.curio-frame.is-bl.is-bl-2d { background-image: url('/assets/img/curio-frame-bl-2d.webp'); }
.curio-frame.is-bl.is-bl-ebook { background-image: url('/assets/img/curio-frame-bl-ebook.webp'); }

/* Curios Drop 3: the counting rooms. */
.curio-stats { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-bottom: var(--space-3); }
.curio-stat { border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 10%, transparent));
  border-radius: var(--radius-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: 0.2rem; }
.curio-stat b { font-size: var(--size-xl); }
.curio-stat span { font-size: var(--size-xs); text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.6; }

.curio-bar { display: grid; grid-template-columns: 9rem 1fr 3rem;
  gap: var(--space-2); align-items: center; padding: 0.3rem 0; }
.curio-bar-label { font-size: var(--size-sm); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.curio-bar-lane { height: 0.55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--blossom) 6%, transparent); overflow: hidden; display: block; }
.curio-bar-fill { display: block; height: 100%; border-radius: 999px;
  background: var(--gold); opacity: 0.75; }
.curio-bar-count { text-align: right; font-size: var(--size-xs);
  opacity: 0.75; }

.curio-hist-row { display: flex; gap: var(--space-3); align-items: center;
  padding: 0.4rem 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 7%, transparent)); }
.curio-hist-row:last-child { border-bottom: 0; }
.curio-hist-row:hover .curio-name { color: var(--gold); }
.curio-hist-row .curio-name { flex: 1 1 auto; min-width: 0; }
.curio-hist-thumb { width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
  border-radius: var(--radius-sm); overflow: hidden;
  background: color-mix(in srgb, var(--blossom) 4%, transparent); }
.curio-hist-thumb img { width: 100%; height: 100%; object-fit: cover; }

.curio-pick-bar { position: relative; }
.curio-pick-bar .scroll-search { width: 100%; }
.curio-pick-results { display: flex; flex-direction: column; }
.curio-pick-item { display: flex; flex-direction: column; gap: 0.1rem;
  align-items: flex-start; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 7%, transparent));
  padding: 0.5rem 0.25rem; color: inherit; cursor: pointer;
  font: inherit; width: 100%; }
.curio-pick-item:hover b { color: var(--gold); }
.curio-pick-item:last-child { border-bottom: 0; }

/* The hero cards, after the reference: number first, meaning under,
   boxed figures in a row. */
.curio-heroes { display: grid; gap: var(--space-3);
  grid-template-columns: 1fr 1fr; margin-bottom: var(--space-3); }
@media (max-width: 52rem) { .curio-heroes { grid-template-columns: 1fr; } }
.curio-hero { border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 10%, transparent));
  border-radius: var(--radius-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: 0.3rem; }
.curio-hero-title { font-size: var(--size-xs); letter-spacing: 0.08em;
  text-transform: uppercase; }
.curio-hero.is-collection .curio-hero-title { color: var(--jade); }
.curio-hero.is-wishlist .curio-hero-title { color: var(--lacquer); }
.curio-hero-big { font-size: var(--size-2xl); line-height: 1; }
.curio-hero-sub { font-size: var(--size-xs); opacity: 0.65; }
.curio-hero-boxes { display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-2); }
.curio-hero-box { border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 10%, transparent));
  border-radius: var(--radius-sm); padding: 0.4rem 0.7rem;
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 5.5rem; }
.curio-hero-box b { font-size: var(--size-md); }
.curio-hero-box span { font-size: var(--size-xs); opacity: 0.6; }

.curio-delta { font-size: var(--size-xs); margin-top: 0.15rem; }
.curio-delta.is-down { color: var(--lacquer); }
.curio-delta.is-up { color: var(--jade); }
.curio-logged { font-size: var(--size-xs); opacity: 0.55;
  border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 15%, transparent));
  border-radius: 999px; padding: 0 0.5rem; }

/* The photocard collection: album cards and the member-by-set grid. */
.pc-albums { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.pc-album { text-decoration: none; color: inherit; display: flex;
  flex-direction: column; gap: 0.4rem; }
.pc-album:hover h3 { color: var(--gold); }
.pc-progress { margin: 0.2rem 0; }

.pc-scroll { overflow-x: auto; }
.pc-grid { display: grid; gap: 0.4rem; align-items: stretch;
  min-width: max-content; }
.pc-corner { }
.pc-member, .pc-set { display: flex; gap: 0.3rem; align-items: center;
  font-size: var(--size-xs); }
.pc-member { justify-content: center; text-align: center;
  text-transform: uppercase; letter-spacing: 0.05em; }
.pc-set { justify-content: flex-start; }
.pc-member .pair-shelf-remove, .pc-set .pair-shelf-remove {
  position: static; opacity: 0.4; }
.pc-member:hover .pair-shelf-remove,
.pc-set:hover .pair-shelf-remove { opacity: 1; }

.pc-cell { display: flex; flex-direction: column; gap: 0.25rem;
  border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 10%, transparent));
  border-radius: var(--radius-sm); padding: 0.3rem; }
.pc-cell.is-have { border-color: var(--jade); }
.pc-cell.is-otw { border-color: color-mix(in srgb, var(--blossom) 70%, var(--ink)); }
.pc-cell.is-missing { opacity: 0.75; }
.pc-face { aspect-ratio: 5.5 / 8.5; border-radius: var(--radius-sm);
  overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blossom) 4%, transparent); }
.pc-face img { width: 100%; height: 100%; object-fit: cover;
  cursor: zoom-in; }
.pc-slot { background: none; border: 1px dashed
  var(--line, color-mix(in srgb, var(--blossom) 20%, transparent)); border-radius: var(--radius-sm);
  color: inherit; opacity: 0.5; width: 100%; height: 100%;
  cursor: pointer; font-size: var(--size-lg); }
.pc-slot:hover { opacity: 1; color: var(--gold); }
.pc-state { background: none; border: 1px solid
  var(--line, color-mix(in srgb, var(--blossom) 15%, transparent)); border-radius: 999px;
  color: inherit; cursor: pointer; font-size: var(--size-xs);
  padding: 0.1rem 0; width: 100%; }
.pc-cell.is-have .pc-state { color: var(--jade);
  border-color: currentColor; }
.pc-cell.is-otw .pc-state { color: var(--mist); border-color: currentColor; }

/* Discography rows and version tools. */
.curio-version-tools { display: flex; gap: 0.3rem; justify-self: end; }
.curio-fact .curio-version-tools .ghost { font-size: var(--size-xs);
  padding: 0 0.45rem; }

/* The record sleeve, the version cards, the grid version bands. */
.curio-record { aspect-ratio: 1254 / 1254; max-width: 30rem;
  margin: 0 0 var(--space-3); position: relative;
  background-position: center; background-size: contain;
  background-repeat: no-repeat; }
/* The sleeve square, measured from the pixels: the cover FILLS it
   exactly, edge to edge inside the painted frame. */
.curio-record-well { position: absolute;
  inset: 18% 32.9% 21.6% 2.8%;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 2%; }
.curio-record-well img { width: 100%; height: 100%;
  object-fit: cover; cursor: zoom-in; }
.curio-cover-frame { max-width: 22rem; margin-bottom: var(--space-3); }

.curio-version { display: flex; gap: var(--space-3);
  align-items: flex-start; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 8%, transparent)); }
.curio-version:last-child { border-bottom: 0; }
.curio-version-cover { width: 4.4rem; flex: 0 0 auto; aspect-ratio: 1;
  border-radius: var(--radius-sm); overflow: hidden; display: grid;
  place-items: center; background: color-mix(in srgb, var(--blossom) 4%, transparent); }
.curio-version-cover img { width: 100%; height: 100%; object-fit: contain;
  cursor: zoom-in; }
.curio-version-about { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; gap: 0.15rem; }
.curio-version-shots { display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin-top: 0.25rem; }
.curio-version-shots img { width: 2.6rem; height: 2.6rem;
  object-fit: cover; border-radius: var(--radius-sm); cursor: zoom-in; }

.pc-version-band { font-size: var(--size-sm); font-weight: 600;
  letter-spacing: 0.04em; color: var(--gold);
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 12%, transparent));
  padding: var(--space-2) 0 0.3rem; }

.curio-unit-chip { display: inline-flex; gap: 0.3rem;
  align-items: center; }

/* Discography tiles: mini sleeves in a wall. */
.disc-tiles { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.disc-tile { display: flex; flex-direction: column; gap: 0.3rem;
  text-decoration: none; color: inherit; }
.disc-tile:hover .curio-name { color: var(--gold); }
.disc-sleeve { display: block; width: 100%; max-width: none;
  margin: 0 0 0.2rem; }
.disc-sleeve .curio-noimg { font-size: var(--size-xl); }

/* The comeback head, paired; version tiles with their claims. */
.curio-comeback-top { display: grid; gap: var(--space-4);
  grid-template-columns: minmax(16rem, 26rem) 1fr;
  align-items: start; margin-bottom: var(--space-3); }
@media (max-width: 56rem) {
  .curio-comeback-top { grid-template-columns: 1fr; } }
.curio-comeback-top .curio-record,
.curio-comeback-top .curio-cover-frame { margin: 0; max-width: none; }

.dver-tiles { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  margin-top: var(--space-2); }
.dver-tile { border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 10%, transparent));
  border-radius: var(--radius-md); padding: var(--space-2);
  display: flex; flex-direction: column; gap: 0.25rem; }
.dver-cover { position: relative; aspect-ratio: 1;
  border-radius: var(--radius-sm); overflow: hidden;
  background: color-mix(in srgb, var(--blossom) 4%, transparent); margin-bottom: 0.2rem; }
.dver-cover img { width: 100%; height: 100%; object-fit: contain;
  cursor: zoom-in; }
.dver-cover .pair-shelf-remove { opacity: 0; }
.dver-cover:hover .pair-shelf-remove { opacity: 1; }
.dver-shots { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.dver-shot { position: relative; }
.dver-shot img { width: 2.8rem; height: 2.8rem; object-fit: cover;
  border-radius: var(--radius-sm); cursor: zoom-in; display: block; }
.dver-shot .pair-shelf-remove { opacity: 0; transform: scale(0.8); }
.dver-shot:hover .pair-shelf-remove { opacity: 1; }
.dver-claims { display: flex; gap: 0.35rem; flex-wrap: wrap;
  align-items: center; margin-top: 0.2rem; }
.dver-tools { display: flex; gap: 0.3rem; flex-wrap: wrap;
  margin-top: auto; padding-top: 0.4rem; }
.dver-tools .ghost { font-size: var(--size-xs); padding: 0.15rem 0.55rem; }

/* The comeback page: three tiles, actions below; card stacks. */
.curio-comeback-top { grid-template-columns:
  minmax(15rem, 22rem) 1fr; }
@media (max-width: 56rem) {
  .curio-comeback-top { grid-template-columns: 1fr; } }
.curio-mv-tile { margin-bottom: var(--space-3); }
.curio-mv-tile .mv-stage { margin-top: var(--space-2);
  max-width: 74rem; }
.curio-title-player { width: 100%; max-width: 26rem; height: 2rem;
  margin-top: var(--space-2); display: block; }
.curio-comeback-actions { display: flex; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: var(--space-3); }
.curio-apple-seek { font-size: var(--size-xs); padding: 0 0.5rem;
  margin-left: 0.4rem; }

.pc-cell-stack { gap: 0.4rem; }
.pc-card-mini { display: flex; flex-direction: column; gap: 0.2rem;
  border-radius: var(--radius-sm); }
.pc-card-mini.is-na { opacity: 0.45; }
.pc-card-mini.is-na .pc-face { filter: grayscale(1); }
.pc-card-row { display: flex; gap: 0.25rem; align-items: center; }
.pc-card-row .pc-state { flex: 1 1 auto; }
.pc-cardless { background: none; border: 0; color: inherit;
  opacity: 0.35; cursor: pointer; font-size: var(--size-xs);
  padding: 0 0.2rem; }
.pc-card-mini:hover .pc-cardless { opacity: 0.9; }
.pc-more { background: none; border: 1px dashed
  var(--line, color-mix(in srgb, var(--blossom) 20%, transparent)); border-radius: var(--radius-sm);
  color: inherit; opacity: 0.5; cursor: pointer;
  font-size: var(--size-xs); padding: 0.15rem 0; width: 100%; }
.pc-more:hover { opacity: 1; color: var(--gold); }
.pc-readonly .pc-state.is-quiet { border: 0; cursor: default;
  padding: 0; text-align: center; display: block; }
.pc-readonly .pc-cell { border-style: dashed; }
.pc-albumhead { display: flow-root; }
.pc-albumhead-cover { float: left; width: 4.6rem; height: 4.6rem;
  object-fit: cover; border-radius: var(--radius-sm);
  margin: 0 var(--space-3) var(--space-2) 0; cursor: zoom-in; }

/* The artist special corner: a roster of faces. */
.corner-roster { display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.corner-tile { display: flex; flex-direction: column; gap: 0.3rem;
  align-items: center; text-align: center; text-decoration: none;
  color: inherit; }
.corner-tile:hover .curio-name { color: var(--gold); }
.corner-face { width: 6.5rem; height: 6.5rem; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blossom) 5%, transparent);
  border: 1px solid var(--line, color-mix(in srgb, var(--blossom) 12%, transparent)); }
.corner-face img { width: 100%; height: 100%; object-fit: cover; }
.corner-head { display: flex; gap: var(--space-4);
  align-items: flex-start; }
.corner-head .corner-face { width: 8rem; height: 8rem; flex: 0 0 auto; }
.corner-about { display: flex; flex-direction: column; gap: 0.3rem;
  min-width: 0; }

/* The ledgers: letting-go cards and the group-order watch. */
.ledger-card { display: flex; gap: var(--space-3);
  align-items: flex-start; }
.ledger-about { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; gap: 0.2rem; }
.ledger-about a { color: inherit; text-decoration: none; }
.ledger-about a:hover { color: var(--gold); }
.ledger-tools { display: flex; gap: 0.3rem; flex-wrap: wrap;
  justify-content: flex-end; max-width: 40%; }
.ledger-tools .ghost { font-size: var(--size-xs);
  padding: 0.15rem 0.55rem; }
.ledger-card.is-done, .ledger-card.is-lost,
.ledger-card.is-arrived, .ledger-card.is-cancelled { opacity: 0.6; }
.ledger-card.is-late { border-color: var(--lacquer); }
.ledger-card.is-late .curio-sub { color: var(--lacquer); }


/* Images fit their designed areas whole; the mat behind them keeps
   letterboxing intentional. Decreed after the cassette of 2005,
   re-armoured after the Wild Rose of 2022: percentage heights inside
   an auto-sized grid cell silently fail, so the board image is pinned
   to the well itself and tile images carry their own square box. */
.curio-tile-art { background: color-mix(in srgb, var(--ink) 25%, transparent); }
.dver-cover { background: color-mix(in srgb, var(--ink) 25%, transparent); }
.curio-tile-art img { width: 100%; height: auto; aspect-ratio: 1;
  object-fit: contain; }
.dver-cover img { width: 100%; height: auto; aspect-ratio: 1;
  object-fit: contain; }
.curio-frame-well img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain !important; }

/* Drop 7: the corner dossier, the roster in tiers, the member roll. */
.corner-roster-head { margin: var(--space-4) 0 var(--space-2); }
.corner-roster-head:first-of-type { margin-top: 0; }
.corner-section-note { font-size: var(--size-xs); font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65;
  margin-left: var(--space-2); }
.member-roll { display: flex; flex-direction: column; }
.member-roll-row { display: flex; gap: var(--space-2);
  align-items: baseline; flex-wrap: wrap; padding: 0.45rem 0;
  border-bottom: 1px solid var(--line, color-mix(in srgb, var(--blossom) 8%, transparent)); }
.member-roll-row:last-child { border-bottom: 0; }
.member-roll-row.is-gone { opacity: 0.55; }
.member-roll-row .ghost { margin-left: auto; flex: none;
  padding: 0.2rem 0.65rem; font-size: var(--size-xs); }
.member-roll-name a { color: inherit; text-decoration: none; }
.member-roll-name a:hover { color: var(--gold); }
.corner-dossier-story p { margin: 0 0 var(--space-2); }
.corner-dossier-story p:last-child { margin-bottom: 0; }

/* Drop 8: the standing flipped on the comeback page. */
.dver-claims select.dver-standing { font-size: var(--size-xs);
  padding: 0.1rem 0.35rem; margin-left: 0.35rem; max-width: 9rem; }

/* Drop 9: the treasury report, adapted from the brought layout -
   her structure and proportions, the palace colours in its veins. */
.tre-report {
  --tre-paper: color-mix(in srgb, var(--surface) 55%, var(--ink));
  --tre-panel: var(--surface);
  --tre-ink: var(--blossom);
  --tre-muted: var(--mist);
  --tre-rule: var(--border);
  --tre-jade: var(--accent-jade);
  --tre-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --tre-gold: var(--gold);
  --tre-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --tre-track: color-mix(in srgb, var(--blossom) 9%, var(--surface));
  --tre-photo: var(--accent-jade);
  --tre-album: var(--gold);
  --tre-media: var(--lantern);
  --tre-light: var(--accent-lacquer);
  --tre-merch: var(--moon);
  --tre-book: var(--mist);
  --tre-lavender: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --tre-lavender-ink: var(--blossom);
  font-family: var(--font-sans);
  color: var(--tre-ink);
  font-size: var(--size-sm); line-height: 1.5;
  width: 100%;
}
.tre-report h1, .tre-report h2, .tre-report h3, .tre-report p { margin: 0; }
.tre-report h2 { font-family: var(--font-serif); font-size: var(--size-xl);
  font-weight: 400; letter-spacing: -0.3px; }
.tre-report h3 { font-size: var(--size-sm); font-weight: 500; }
.tre-report button { font: inherit; color: inherit; }
.tre-report .tre-muted { color: var(--tre-muted); }
.tre-report .tre-number { font-variant-numeric: tabular-nums; }
.tre-glyph { font-family: var(--font-cjk); color: var(--tre-gold);
  font-size: var(--size-xs); line-height: 1; }
.tre-report .tre-toolbar { display: flex; align-items: center;
  justify-content: space-between; gap: 14px; margin-bottom: 17px;
  flex-wrap: wrap; }
.tre-report .tre-period { display: flex; gap: 3px;
  background: var(--tre-track); padding: 4px; border-radius: 9px; }
.tre-report .tre-period button { background: transparent; border: 0;
  border-radius: 6px; padding: 7px 14px; min-height: 34px; font-size: var(--size-xs);
  white-space: nowrap; cursor: pointer; }
.tre-report .tre-period button[aria-pressed="true"] {
  background: var(--tre-ink); color: var(--tre-paper); }
.tre-report .tre-period-label { font-size: var(--size-2xs); color: var(--tre-muted); }
.tre-report .tre-kpis { display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--tre-rule); background: var(--tre-panel);
  border-radius: 11px; margin-bottom: 26px; }
.tre-report .tre-kpi { padding: 18px 18px 17px; min-width: 0; }
.tre-report .tre-kpi + .tre-kpi { border-left: 1px solid var(--tre-rule); }
.tre-report .tre-kpi-label { color: var(--tre-muted); font-size: var(--size-2xs);
  display: flex; align-items: center; gap: 6px; }
.tre-report .tre-kpi-value { font-family: var(--font-serif);
  font-size: var(--size-2xl); line-height: 1.25; margin: 7px 0 5px;
  white-space: nowrap; }
.tre-report .tre-kpi-value small { font-family: inherit; font-size: var(--size-lg);
  margin-left: 4px; }
.tre-report .tre-kpi-note { font-size: var(--size-2xs); color: var(--tre-muted); }
/* Drop 184: the whole hall's Overview - each hall's own weights, opening its own Overview */
.tre-report .tre-halls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 10px; margin: -12px 0 26px; }
.tre-report .tre-hall { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid var(--tre-rule); border-radius: 10px;
  background: var(--tre-panel); color: inherit; text-decoration: none; min-width: 0; }
.tre-report a.tre-hall:hover, .tre-report a.tre-hall:focus-visible { border-color: var(--tre-gold); }
.tre-report .tre-hall-name { display: flex; justify-content: space-between; gap: 8px; font-size: var(--size-2xs); color: var(--tre-muted); }
.tre-report .tre-hall-name .cjk { color: var(--tre-gold); flex: none; }
.tre-report .tre-hall-value { font: 400 var(--size-xl)/1.2 var(--font-serif); }
.tre-report .tre-hall-note { font-size: var(--size-3xs); color: var(--tre-muted); }
.tre-report .tre-section { margin-top: 26px; }
.tre-report .tre-section-title { display: flex; align-items: center;
  gap: 10px; margin-bottom: 12px; }
.tre-report .tre-section-index { color: var(--tre-gold);
  font-family: var(--font-serif); font-size: var(--size-sm); }
.tre-report .tre-section-title:after { content: ""; height: 1px;
  background: var(--tre-rule); flex: 1; margin-left: 6px; }
.tre-report .tre-section-sub { font-size: var(--size-2xs); color: var(--tre-muted);
  margin: -4px 0 13px; }
.tre-report .tre-two { display: grid; grid-template-columns: 1fr 1.12fr;
  gap: 14px; }
.tre-report .tre-one { display: grid; grid-template-columns: 1fr;
  gap: 14px; }
.tre-report .tre-card { min-width: 0; padding: 20px;
  border: 1px solid var(--tre-rule); border-radius: 11px;
  background: var(--tre-panel); }
.tre-report .tre-card-head { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.tre-report .tre-caption { font-size: var(--size-2xs); color: var(--tre-muted); }
.tre-report .tre-tag { display: inline-flex; align-items: center; gap: 5px;
  border-radius: 4px; padding: 3px 7px; font-size: var(--size-2xs);
  color: var(--tre-jade); background: var(--tre-jade-soft);
  white-space: nowrap; }
.tre-report .tre-composition { display: grid;
  grid-template-columns: 145px 1fr; align-items: center; gap: 18px;
  margin: 17px 0 15px; }
.tre-report .tre-donut { position: relative; width: 145px; height: 145px;
  border-radius: 50%; display: grid; place-items: center;
  flex-shrink: 0; }
.tre-report .tre-donut:before { content: ""; position: absolute;
  inset: 18px; border-radius: 50%; background: var(--tre-panel); }
.tre-report .tre-donut-centre { position: relative; text-align: center;
  font-size: var(--size-2xs); color: var(--tre-muted); }
.tre-report .tre-donut-centre span { display: block;
  font-family: var(--font-serif); color: var(--tre-ink); font-size: var(--size-2xl);
  line-height: 1.2; }
.tre-report .tre-legend { display: flex; flex-direction: column; gap: 10px;
  min-width: 0; }
.tre-report .tre-legend-row { display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px;
  align-items: center; font-size: var(--size-2xs); }
.tre-report .tre-dot { width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0; }
.tre-report .tre-footnote { font-size: var(--size-2xs); color: var(--tre-muted);
  padding-top: 11px; border-top: 1px solid var(--tre-rule); }
.tre-report .tre-chart { width: 100%; height: 194px; margin-top: 8px;
  position: relative; }
.tre-report .tre-chart svg { display: block; width: 100%; height: 100%;
  overflow: visible; }
.tre-report .tre-chart text { font: 11px var(--font-sans);
  fill: var(--tre-muted); }
.tre-report .tre-chart .tre-end-label { font-size: var(--size-xs);
  fill: var(--tre-ink); font-weight: 500; }
.tre-report .tre-mini-stats { display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 11px; font-size: var(--size-2xs); color: var(--tre-muted); }
.tre-report .tre-mini-stats span { display: flex; gap: 5px;
  align-items: center; }
.tre-report .tre-mini-stats strong { font-weight: 500;
  color: var(--tre-ink); }
.tre-report .tre-rank-list { margin-top: 16px; display: flex;
  flex-direction: column; gap: 13px; }
.tre-report .tre-rank-top { display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 6px; }
.tre-report .tre-rank-name { font-size: var(--size-xs); }
.tre-report .tre-rank-val { margin-left: auto; font-size: var(--size-xs); }
.tre-report .tre-track { height: 6px; background: var(--tre-track);
  border-radius: 5px; overflow: hidden; }
.tre-report .tre-fill { height: 100%; border-radius: 5px;
  background: var(--tre-jade); transition: width 0.28s ease; }
.tre-report .tre-rank-list .tre-track { height: 5px; }
.tre-report .tre-member-card { display: grid;
  grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px;
  padding: 10px 0; border-bottom: 1px solid var(--tre-rule); }
.tre-report .tre-member-card:last-child { border-bottom: 0; }
.tre-report .tre-member-name { font-size: var(--size-xs); display: block; }
.tre-report .tre-member-bar { margin-top: 5px; height: 4px;
  background: var(--tre-track); border-radius: 4px; overflow: hidden; }
.tre-report .tre-member-bar span { display: block; height: 100%;
  background: var(--tre-photo); border-radius: 4px; }
.tre-report .tre-member-count { font-family: var(--font-serif);
  font-size: var(--size-xl); }
.tre-report .tre-targets { display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tre-report .tre-target { border: 1px solid var(--tre-rule);
  border-radius: 10px; padding: 16px; background: var(--tre-panel);
  min-width: 0; }
.tre-report .tre-target-icon { display: flex; align-items: center;
  justify-content: space-between; color: var(--tre-gold);
  margin-bottom: 13px; font-size: var(--size-2xs); }
.tre-report .tre-target h3 { font-size: var(--size-xs); margin-bottom: 8px; }
.tre-report .tre-target-ratio { font-family: var(--font-serif);
  font-size: var(--size-2xl); margin-bottom: 10px; }
.tre-report .tre-target-ratio small { font-family: var(--font-sans);
  font-size: var(--size-xs); color: var(--tre-muted); }
.tre-report .tre-target .tre-caption { margin-top: 9px; }
.tre-report .tre-gold-note { font-size: var(--size-2xs); color: var(--tre-gold);
  margin-top: 11px; }
.tre-report .tre-costs { margin-top: 16px; display: flex;
  flex-direction: column; gap: 11px; }
.tre-report .tre-cost-row { display: grid;
  grid-template-columns: 114px minmax(0, 1fr) 63px; align-items: center;
  gap: 9px; font-size: var(--size-2xs); }
.tre-report .tre-cost-row .tre-track { height: 7px; }
.tre-report .tre-cost-row .tre-fill { background: var(--tre-album); }
.tre-report .tre-cost-row output { text-align: right;
  white-space: nowrap; }
.tre-report .tre-spend-total { display: flex; align-items: baseline;
  gap: 8px; margin: 16px 0 10px; }
.tre-report .tre-spend-total strong { font-family: var(--font-serif);
  font-size: var(--size-2xl); font-weight: 400; }
.tre-report .tre-spend-total span { font-size: var(--size-xs);
  color: var(--tre-muted); }
.tre-report .tre-ledger-lines { margin-top: 10px; display: flex;
  flex-direction: column; gap: 10px; font-size: var(--size-xs); }
.tre-report .tre-ledger-lines div { display: flex;
  justify-content: space-between; gap: 12px; }
.tre-report .tre-ledger-lines .tre-total-line { border-top: 1px solid
  var(--tre-rule); padding-top: 10px; font-weight: 500; }
.tre-report .tre-split-bar { display: flex; gap: 3px; height: 9px;
  margin-top: 18px; border-radius: 10px; overflow: hidden;
  background: var(--tre-track); }
.tre-report .tre-split-bar span { height: 100%;
  transition: width 0.28s ease; }
.tre-report .tre-status-grid { display: grid;
  grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.tre-report .tre-status { display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--tre-rule); background: var(--tre-panel);
  padding: 15px 16px; border-radius: 10px; }
.tre-report .tre-status-symbol { display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--tre-jade-soft); color: var(--tre-jade);
  flex-shrink: 0; font-family: var(--font-cjk); font-size: var(--size-md); }
.tre-report .tre-status:nth-child(2) .tre-status-symbol {
  background: var(--tre-gold-soft); color: var(--tre-gold); }
.tre-report .tre-status:nth-child(3) .tre-status-symbol {
  background: var(--tre-lavender); color: var(--tre-lavender-ink); }
.tre-report .tre-status strong { font-size: var(--size-xs); font-weight: 500;
  display: block; }
.tre-report .tre-status-value { font-family: var(--font-serif);
  font-size: var(--size-2xl); margin-left: auto; }
.tre-report .tre-special { display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 15px; padding-top: 13px; border-top: 1px solid
  var(--tre-rule); font-size: var(--size-2xs); color: var(--tre-muted); }
.tre-report .tre-special span { display: flex; align-items: center;
  gap: 6px; }
.tre-report .tre-special strong { font-weight: 500;
  color: var(--tre-ink); }
@media (max-width: 880px) {
  .tre-report .tre-two { grid-template-columns: 1fr 1fr; }
  .tre-report .tre-composition { grid-template-columns: 1fr; gap: 15px; }
  .tre-report .tre-donut { margin: auto; width: 136px; height: 136px; }
  .tre-report .tre-legend { display: grid;
    grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .tre-report .tre-kpi { padding: 16px 13px; }
  .tre-report .tre-chart { height: 239px; }
  .tre-report .tre-cost-row {
    grid-template-columns: 95px minmax(0, 1fr) 57px; }
}
@media (max-width: 650px) {
    .tre-report .tre-kpis { grid-template-columns: 1fr 1fr; }
  .tre-report .tre-kpi:nth-child(3) { border-left: 0;
    border-top: 1px solid var(--tre-rule); }
  .tre-report .tre-kpi:nth-child(4) {
    border-top: 1px solid var(--tre-rule); }
  .tre-report .tre-kpi { padding: 16px; }
  .tre-report .tre-kpi-value { font-size: var(--size-2xl); }
  .tre-report .tre-two { grid-template-columns: 1fr; }
  .tre-report .tre-composition { grid-template-columns: 140px 1fr; }
  .tre-report .tre-legend { display: flex; }
  .tre-report .tre-targets { grid-template-columns: 1fr 1fr; }
  .tre-report .tre-chart { height: 215px; }
  .tre-report .tre-status-grid { grid-template-columns: 1fr; }
  .tre-report .tre-status { padding: 12px 16px; }
  .tre-report .tre-card { padding: 17px; }
  .tre-report .tre-period button { min-height: 38px; }
  .tre-report .tre-period-label { width: 100%; }
}
@media (max-width: 390px) {
  .tre-report .tre-composition { grid-template-columns: 1fr; }
  .tre-report .tre-legend { display: grid;
    grid-template-columns: 1fr 1fr; }
  .tre-report .tre-cost-row {
    grid-template-columns: 98px minmax(0, 1fr) 61px; }
  .tre-report .tre-kpi { padding: 13px 11px; }
  .tre-report .tre-target { padding: 14px; }
  .tre-report .tre-special { gap: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .tre-report .tre-fill, .tre-report .tre-split-bar span {
    transition: none; }
}

/* Drop 9, second hand: round faces and the doors they open. */
.tre-report .tre-face { width: 30px; height: 30px; border-radius: 50%;
  overflow: hidden; flex: none; display: grid; place-items: center;
  background: var(--tre-jade-soft); color: var(--tre-jade);
  font-family: var(--font-serif); font-size: var(--size-xs);
  border: 1px solid var(--tre-rule); }
.tre-report .tre-face img { width: 100%; height: 100%;
  object-fit: cover; display: block; }
.tre-report .tre-target .tre-face { width: 38px; height: 38px; }
.tre-report .tre-rank-row { display: grid;
  grid-template-columns: 30px minmax(0, 1fr); gap: 10px;
  align-items: center; }
.tre-report .tre-door { color: inherit; text-decoration: none; }
.tre-report .tre-door:hover .tre-rank-name,
.tre-report .tre-door:hover .tre-member-name,
.tre-report .tre-door:hover h3 { color: var(--tre-gold); }
.tre-report .tre-door:hover .tre-face { border-color: var(--tre-gold); }
.tre-report a.tre-target { display: block; }
.tre-report a.tre-target:hover { border-color: var(--tre-gold); }

/* Drop 10: the dashboard and the ledger, adapted from the brought
   layout - her panels, cards and proportions, palace colours in the
   veins. No frame, no sidebar: the rooms stand in the palace itself. */
.kd-room {
  --kd-panel: var(--surface);
  --kd-ink: var(--blossom);
  --kd-muted: var(--mist);
  --kd-line: var(--border);
  --kd-jade: var(--accent-jade);
  --kd-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --kd-gold: var(--gold);
  --kd-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --kd-track: color-mix(in srgb, var(--blossom) 9%, var(--surface));
  --kd-photo: var(--accent-jade);
  --kd-album: var(--gold);
  --kd-media: var(--lantern);
  --kd-light: var(--accent-lacquer);
  --kd-merch: var(--moon);
  --kd-book: var(--mist);
  --kd-purple-bg: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --kd-purple: var(--blossom);
  --kd-blue-bg: var(--surface-2);
  --kd-blue: var(--mist);
  font: var(--size-sm)/1.5 var(--font-sans);
  color: var(--kd-ink);
  width: 100%;
}
.kd-room h2, .kd-room h3, .kd-room p { margin: 0; }
.kd-room h2 { font: 400 var(--size-xl)/1.25 var(--font-serif); letter-spacing: -0.25px; }
.kd-room h3 { font-size: var(--size-sm); font-weight: 500; }
.kd-room button { font: inherit; color: inherit; }
.kd-room .kd-muted { color: var(--kd-muted); }
.kd-room .kd-caption { font-size: var(--size-2xs); color: var(--kd-muted); }
.kd-room .kd-num { font-variant-numeric: tabular-nums; }
.kd-room .kd-glyph { font-family: var(--font-cjk); color: var(--kd-gold);
  font-size: var(--size-sm); line-height: 1; }
.kd-room .kd-button { display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; border: 1px solid var(--kd-line);
  background: var(--kd-panel); border-radius: 7px; padding: 8px 11px;
  font-size: var(--size-xs); white-space: nowrap; min-height: 35px; cursor: pointer; }
.kd-room .kd-button:hover { background: var(--kd-soft); }
.kd-room .kd-small-button { font-size: var(--size-2xs); min-height: 29px;
  padding: 5px 8px; }
.kd-room .kd-text-button { border: 0; background: transparent;
  padding: 4px 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--size-2xs); color: var(--kd-jade); white-space: nowrap;
  text-decoration: none; }
.kd-room .kd-text-button:hover { text-decoration: underline; }
.kd-room .kd-kpis { display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px;
  margin-bottom: 18px; }
.kd-room .kd-kpi { background: var(--kd-panel);
  border: 1px solid var(--kd-line); border-radius: 9px;
  padding: 13px 14px; text-align: left; min-width: 0; display: block;
  color: inherit; text-decoration: none; }
.kd-room a.kd-kpi:hover { border-color: var(--kd-jade); }
.kd-room .kd-kpi-head { display: flex; justify-content: space-between;
  gap: 5px; align-items: center; color: var(--kd-muted); font-size: var(--size-2xs); }
.kd-room .kd-kpi-value { font: 400 var(--size-2xl)/1.2 var(--font-serif);
  margin: 7px 0 4px; white-space: nowrap; }
.kd-room .kd-kpi-value small { font-size: var(--size-md); margin-left: 3px; }
.kd-room .kd-kpi-note { font-size: var(--size-2xs); color: var(--kd-muted); }
.kd-room .kd-grid { display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 15px; }
.kd-room .kd-stack { display: flex; flex-direction: column; gap: 15px;
  min-width: 0; }
.kd-room .kd-panel { background: var(--kd-panel);
  border: 1px solid var(--kd-line); border-radius: 10px; padding: 17px;
  min-width: 0; }
.kd-room .kd-panel-head { display: flex; justify-content: space-between;
  align-items: center; gap: 9px; margin-bottom: 5px; }
.kd-room .kd-panel-head h2 { font-size: var(--size-lg); }
.kd-room .kd-panel-sub { font-size: var(--size-2xs); color: var(--kd-muted);
  margin-bottom: 14px; }
.kd-room .kd-items { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px;
  margin-top: 14px; }
.kd-room .kd-item { min-width: 0; text-align: left; display: block;
  color: inherit; text-decoration: none; }
.kd-room .kd-item:hover .kd-art { outline: 1px solid var(--kd-gold);
  outline-offset: 2px; }
.kd-room .kd-art { position: relative; height: 100px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--kd-blue-bg); color: var(--kd-blue);
  isolation: isolate; }
.kd-room .kd-art::before { content: ""; position: absolute; width: 93px;
  height: 93px; border: 1px solid currentColor; border-radius: 50%;
  opacity: 0.32; }
.kd-room .kd-art::after { content: ""; position: absolute; width: 66px;
  height: 66px; border: 1px solid currentColor; opacity: 0.28;
  transform: rotate(45deg); }
.kd-room .kd-art.has-img::before, .kd-room .kd-art.has-img::after {
  display: none; }
.kd-room .kd-art img { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: contain; z-index: 1; }
.kd-room .kd-art[data-tone="violet"] { color: var(--kd-purple);
  background: var(--kd-purple-bg); }
.kd-room .kd-art[data-tone="jade"] { color: var(--kd-jade);
  background: var(--kd-soft); }
.kd-room .kd-art[data-tone="gold"] { color: var(--kd-gold);
  background: var(--kd-gold-soft); }
.kd-room .kd-art-text { font-family: var(--font-serif); font-size: 24px;
  letter-spacing: 1px; z-index: 1; padding: 0 5px; text-align: center; }
.kd-room .kd-art-badge { position: absolute; bottom: 7px; left: 7px;
  font: var(--size-2xs)/1.2 var(--font-sans); border-radius: 3px;
  background: var(--kd-panel); color: var(--kd-muted); padding: 3px 5px;
  z-index: 2; }
.kd-room .kd-item-artist { display: block; font-weight: 500;
  font-size: var(--size-2xs); margin-top: 9px; }
.kd-room .kd-item-name { display: block; font-size: var(--size-2xs);
  color: var(--kd-muted); margin-top: 2px; overflow-wrap: anywhere; }
.kd-room .kd-item-date { font-size: var(--size-2xs); color: var(--kd-gold);
  margin-top: 5px; display: block; }
.kd-room .kd-order { padding: 11px 0; border-bottom: 1px solid
  var(--kd-line); }
.kd-room .kd-order:last-child { border-bottom: 0; padding-bottom: 0; }
.kd-room .kd-order.kd-has-face { display: grid;
  grid-template-columns: 31px minmax(0, 1fr); gap: 10px;
  align-items: start; }
.kd-room .kd-order-title { font-size: var(--size-xs); font-weight: 500;
  display: flex; justify-content: space-between; gap: 7px;
  color: inherit; text-decoration: none; }
.kd-room a.kd-order-title:hover span:first-child { color: var(--kd-gold); }
.kd-room .kd-order-bottom { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-top: 7px; }
.kd-room .kd-badge { font-size: var(--size-2xs); display: inline-flex;
  align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px;
  background: var(--kd-soft); color: var(--kd-jade); }
.kd-room .kd-lavender { background: var(--kd-purple-bg);
  color: var(--kd-purple); }
.kd-room .kd-golden { background: var(--kd-gold-soft);
  color: var(--kd-gold); }
.kd-room .kd-order-qty { color: var(--kd-muted); font-weight: 400;
  white-space: nowrap; font-size: var(--size-2xs); }
.kd-room .kd-order-note { margin-top: 3px; font-size: var(--size-2xs);
  color: var(--kd-muted); }
.kd-room .kd-alert-month { font-size: var(--size-2xs); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--kd-gold); margin-top: 12px; }
.kd-room .kd-alert-month:first-of-type { margin-top: 4px; }
.kd-room .kd-composition { display: flex; gap: 3px; height: 13px;
  border-radius: 5px; overflow: hidden; margin: 16px 0; }
.kd-room .kd-composition span { height: 100%; }
.kd-room .kd-category-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 10px; }
.kd-room .kd-category { background: transparent; border: 0; padding: 0;
  text-align: left; min-width: 0; cursor: pointer; }
.kd-room .kd-category-top { display: flex; align-items: center; gap: 5px;
  font-size: var(--size-2xs); color: var(--kd-muted); }
.kd-room .kd-dot { display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0; }
.kd-room .kd-category-value { display: block;
  font-family: var(--font-serif); font-size: var(--size-xl); margin-top: 3px; }
.kd-room .kd-category:hover .kd-category-top { text-decoration: underline; }
.kd-room .kd-footnote { border-top: 1px solid var(--kd-line);
  padding-top: 10px; margin-top: 13px; font-size: var(--size-2xs);
  color: var(--kd-muted); }
.kd-room .kd-budget-amount { display: flex; align-items: baseline; gap: 7px;
  margin: 14px 0 3px; }
.kd-room .kd-budget-amount strong { font: 400 var(--size-2xl)/1.2 var(--font-serif); }
.kd-room .kd-budget-amount span { font-size: var(--size-2xs); color: var(--kd-muted); }
.kd-room .kd-progress { height: 7px; background: var(--kd-track);
  border-radius: 6px; overflow: hidden; margin-top: 12px; }
.kd-room .kd-progress span { display: block; height: 100%;
  background: var(--kd-jade); border-radius: 6px; }
.kd-room .kd-budget-meta { display: flex; justify-content: space-between;
  gap: 8px; margin-top: 8px; font-size: var(--size-2xs); color: var(--kd-muted); }
.kd-room .kd-chart-head { display: flex; align-items: center;
  justify-content: space-between; font-size: var(--size-2xs); margin-top: 19px; }
.kd-room .kd-arrivals-chart { height: 88px; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px;
  align-items: end; margin-top: 10px; padding-top: 6px; }
.kd-room .kd-week { display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 82px; gap: 4px;
  min-width: 0; }
.kd-room .kd-week-value { font-size: var(--size-2xs); white-space: nowrap; }
.kd-room .kd-week-mark { background: var(--kd-jade); opacity: 0.65;
  width: min(100%, 29px); border-radius: 3px 3px 0 0; min-height: 2px; }
.kd-room .kd-week.is-now .kd-week-mark { opacity: 1; }
.kd-room .kd-week-label { font-size: var(--size-2xs); color: var(--kd-muted);
  white-space: nowrap; }
.kd-room .kd-wish { display: grid; grid-template-columns: 31px 1fr auto;
  gap: 9px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--kd-line); color: inherit;
  text-decoration: none; }
.kd-room .kd-wish:last-child { border: 0; padding-bottom: 0; }
.kd-room .kd-wish strong { display: block; font-size: var(--size-xs);
  font-weight: 500; }
.kd-room a.kd-wish:hover strong { color: var(--kd-gold); }
.kd-room .kd-wish-price { font-size: var(--size-2xs); color: var(--kd-muted);
  text-align: right; }
.kd-room .kd-goal { margin-top: 15px; }
.kd-room .kd-goal-top { display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; font-size: var(--size-xs); }
.kd-room .kd-goal-top a { color: inherit; text-decoration: none; }
.kd-room .kd-goal-top a:hover { color: var(--kd-gold); }
.kd-room .kd-goal-top span:last-child { font-size: var(--size-2xs);
  color: var(--kd-muted); }
.kd-room .kd-goal .kd-progress { margin-top: 7px; height: 5px; }
.kd-room .kd-milestone { display: flex; gap: 9px; align-items: center;
  background: var(--kd-gold-soft); border-radius: 6px; padding: 10px;
  margin-top: 15px; color: var(--kd-gold); font-size: var(--size-2xs); }
.kd-room .kd-hall { margin-top: 15px; background: var(--kd-panel);
  border: 1px solid var(--kd-line); border-radius: 9px;
  padding: 14px 17px; }
.kd-room .kd-hall-row { display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 11px; }
.kd-room .kd-artist-chip { border: 1px solid var(--kd-line);
  border-radius: 20px; background: transparent; display: flex;
  align-items: center; gap: 6px; padding: 4px 9px 4px 4px;
  font-size: var(--size-2xs); color: inherit; text-decoration: none; }
.kd-room a.kd-artist-chip:hover { background: var(--kd-soft); }
.kd-room .kd-artist-chip > span:last-child { color: var(--kd-muted); }
.kd-room .kd-empty { padding: 22px 0; color: var(--kd-muted);
  font-size: var(--size-xs); }
.kd-room .kd-toolbar { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 15px; }
.kd-room .kd-period { display: flex; gap: 3px; background: var(--kd-track);
  padding: 4px; border-radius: 9px; }
.kd-room .kd-period button { background: transparent; border: 0;
  border-radius: 6px; padding: 7px 14px; min-height: 34px;
  font-size: var(--size-xs); white-space: nowrap; cursor: pointer; }
.kd-room .kd-period button[aria-pressed="true"] {
  background: var(--kd-ink); color: var(--kd-panel); }
.kd-room .kd-period button:disabled { opacity: 0.35; cursor: default; }
.kd-room .kd-period.is-small button { padding: 3px 8px; min-height: 24px;
  font-size: var(--size-2xs); }
.kd-room .kd-period-label { font-size: var(--size-xs); min-width: 7.5rem;
  text-align: center; align-self: center; }
.kd-room .kd-ledger-list { display: flex; flex-direction: column; gap: 11px;
  margin-top: 18px; font-size: var(--size-xs); }
.kd-room .kd-ledger-list > div { display: flex;
  justify-content: space-between; gap: 10px; }
.kd-room .kd-ledger-total { border-top: 1px solid var(--kd-line);
  padding-top: 11px; font-weight: 500; }
/* Drop 184: the whole hall's Ledger - what each hall cost in the window, under the purse */
.kd-room .kd-by-hall { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--kd-line); }
.kd-room .kd-by-hall .kd-ledger-list { margin-top: 12px; }
.kd-room .kd-by-hall .kd-ledger-list a { color: inherit; text-decoration: none; min-width: 0; }
.kd-room .kd-by-hall .kd-ledger-list a:hover { color: var(--gold); }
.kd-room .kd-face { width: 31px; height: 31px; border-radius: 50%;
  overflow: hidden; flex: none; display: grid; place-items: center;
  background: var(--kd-soft); color: var(--kd-jade);
  font-family: var(--font-serif); font-size: var(--size-xs);
  border: 1px solid var(--kd-line); }
.kd-room .kd-face img { width: 100%; height: 100%; object-fit: cover;
  display: block; }
.kd-room .kd-artist-chip .kd-face { width: 22px; height: 22px;
  font-size: var(--size-3xs); }
.kd-room a:hover > .kd-face, .kd-room a.kd-wish:hover .kd-face {
  border-color: var(--kd-gold); }
@media (max-width: 900px) {
  .kd-room .kd-grid { grid-template-columns: 1.3fr 1fr; gap: 12px; }
  .kd-room .kd-panel { padding: 14px; }
  .kd-room .kd-items { gap: 8px; }
  .kd-room .kd-art { height: 88px; }
  .kd-room .kd-art-text { font-size: 20px; }
  .kd-room .kd-kpi { padding: 12px 10px; }
  .kd-room .kd-category-grid { grid-template-columns: 1fr 1fr; }
  .kd-room .kd-order-bottom { flex-wrap: wrap; }
}
@media (max-width: 580px) {
  .kd-room .kd-grid { grid-template-columns: 1fr; }
  .kd-room .kd-kpis { grid-template-columns: 1fr 1fr; }
  .kd-room .kd-kpi { padding: 13px; }
  .kd-room .kd-art { height: 115px; }
  .kd-room .kd-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kd-room .kd-order-bottom { flex-wrap: nowrap; }
}
@media (max-width: 370px) {
  .kd-room .kd-items { gap: 7px; }
  .kd-room .kd-art { height: 91px; }
  .kd-room .kd-art-text { font-size: 19px; }
  .kd-room .kd-category-grid { grid-template-columns: 1fr 1fr; }
  .kd-room .kd-wish { grid-template-columns: 1fr auto; }
  .kd-room .kd-wish .kd-face { display: none; }
}
@media (pointer: coarse) {
  .kd-room .kd-button, .kd-room .kd-text-button,
  .kd-room .kd-artist-chip { min-height: 44px; }
  .kd-room .kd-category { min-height: 54px; }
}

/* Drop 11: the photocard template studio, adapted from the brought
   layout - her overview, matrix, back references, inspector and
   sheet preview, palace colours in the veins. No brand bar, no
   breadcrumb, no footer, no eyebrows; the album page stands in the
   palace itself. */
.ps-room {
  --ps-paper: var(--surface);
  --ps-bg: var(--surface-2);
  --ps-ink: var(--blossom);
  --ps-muted: var(--mist);
  --ps-rule: var(--border);
  --ps-jade: var(--accent-jade);
  --ps-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --ps-gold: var(--gold);
  --ps-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --ps-blue: var(--mist);
  --ps-blue-soft: var(--surface-2);
  --ps-purple: var(--blossom);
  --ps-purple-soft: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --ps-danger: var(--accent-lacquer);
  --ps-track: color-mix(in srgb, var(--blossom) 9%, var(--surface));
  --ps-inverse: var(--ink);
  color: var(--ps-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.ps-room * { box-sizing: border-box; }
.ps-room button, .ps-room input, .ps-room select, .ps-room textarea { font: inherit; }
.ps-room button { color: inherit; cursor: pointer; }
.ps-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.ps-room a { color: var(--ps-jade); }
.ps-room h1, .ps-room h2, .ps-room h3, .ps-room p { margin: 0; }
.ps-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); letter-spacing: -0.7px; }
.ps-room h2 { font: var(--size-xl)/1.25 var(--font-serif); }
.ps-room h3 { font-size: var(--size-sm); font-weight: 500; }
.ps-room strong { font-weight: 500; }
.ps-room .ps-glyph { font-family: var(--font-cjk); line-height: 1; }
.ps-room .ps-hero { display: flex; justify-content: space-between;
  align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.ps-room .ps-subtitle { display: flex; gap: 9px; align-items: center;
  flex-wrap: wrap; margin-top: 8px; color: var(--ps-muted); font-size: var(--size-xs); }
.ps-room .ps-subtitle a { text-decoration: none; }
.ps-room .ps-subtitle a:hover { text-decoration: underline; }
.ps-room .ps-actions { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.ps-room .ps-button { border: 1px solid var(--ps-rule);
  background: var(--ps-paper); border-radius: 6px; padding: 8px 11px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 36px; font-size: var(--size-xs); text-decoration: none;
  color: var(--ps-ink); }
.ps-room .ps-button:hover { background: var(--ps-jade-soft); }
.ps-room .ps-button.ps-primary { background: var(--ps-jade);
  border-color: var(--ps-jade); color: var(--ps-inverse); }
.ps-room .ps-button.ps-primary:hover { filter: brightness(1.06); }
.ps-room .ps-quiet { border: 0; background: transparent; padding: 4px 6px;
  color: var(--ps-muted); display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; font-size: var(--size-2xs); border-radius: 4px;
  min-height: 28px; }
.ps-room .ps-quiet:hover { background: var(--ps-jade-soft); color: var(--ps-jade); }
.ps-room .ps-danger { color: var(--ps-danger); }
.ps-room .ps-pill { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 4px; background: var(--ps-gold-soft);
  color: var(--ps-gold); font-size: var(--size-2xs); white-space: nowrap; }
.ps-room .ps-face { width: 28px; height: 28px; border-radius: 50%;
  overflow: hidden; flex: none; display: grid; place-items: center;
  background: var(--ps-blue-soft); color: var(--ps-blue);
  font: var(--size-sm) var(--font-serif); border: 1px solid var(--ps-rule); }
.ps-room .ps-face img { width: 100%; height: 100%; object-fit: cover;
  display: block; }
.ps-room a:hover > .ps-face { border-color: var(--ps-gold); }
.ps-room .ps-overview { display: grid;
  grid-template-columns: minmax(170px, 1fr) 2fr; gap: 24px;
  align-items: center; padding: 17px 20px; border: 1px solid var(--ps-rule);
  border-radius: 9px; background: var(--ps-paper); margin-bottom: 18px; }
.ps-room .ps-progress-title { display: flex; justify-content: space-between;
  gap: 12px; align-items: baseline; margin-bottom: 9px; font-size: var(--size-xs); }
.ps-room .ps-progress-title strong { font: var(--size-xl)/1 var(--font-serif); }
.ps-room .ps-progress { display: flex; gap: 2px; background: var(--ps-track);
  height: 6px; border-radius: 6px; overflow: hidden; }
.ps-room .ps-progress span { height: 100%; background: var(--ps-jade); }
.ps-room .ps-progress .ps-incoming-bar { background: var(--ps-purple); }
.ps-room .ps-metrics { display: flex; align-items: center;
  justify-content: space-around; gap: 18px; flex-wrap: wrap; }
.ps-room .ps-metric { display: flex; gap: 9px; align-items: center; }
.ps-room .ps-metric .ps-glyph { font-size: var(--size-lg); color: var(--ps-state); }
.ps-room .ps-metric strong { font: var(--size-2xl)/1 var(--font-serif); display: block; }
.ps-room .ps-metric small { font-size: var(--size-2xs); color: var(--ps-muted);
  display: block; margin-top: 3px; }
.ps-room [data-state="got"] { --ps-state: var(--ps-jade);
  --ps-state-soft: var(--ps-jade-soft); }
.ps-room [data-state="way"] { --ps-state: var(--ps-purple);
  --ps-state-soft: var(--ps-purple-soft); }
.ps-room [data-state="need"] { --ps-state: var(--ps-gold);
  --ps-state-soft: var(--ps-gold-soft); }
.ps-room [data-state="na"] { --ps-state: var(--ps-muted);
  --ps-state-soft: var(--ps-track); }
.ps-room .ps-note { font-size: var(--size-2xs); color: var(--ps-muted); }
.ps-room .ps-toolbar { display: flex; gap: 12px; justify-content: space-between;
  align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ps-room .ps-view-switch { display: flex; gap: 2px; padding: 3px;
  background: var(--ps-track); border-radius: 6px; }
.ps-room .ps-view-switch button { border: 0; background: transparent;
  color: var(--ps-muted); padding: 5px 9px; border-radius: 4px;
  font-size: var(--size-2xs); min-height: 29px; }
.ps-room .ps-view-switch button[aria-pressed="true"] {
  background: var(--ps-paper); color: var(--ps-ink); }
.ps-room .ps-grid-shell { border: 1px solid var(--ps-rule);
  background: var(--ps-paper); border-radius: 9px; overflow: hidden; }
.ps-room .ps-grid-scroll { overflow-x: auto; width: 100%;
  overscroll-behavior-x: contain; }
.ps-room .ps-matrix { border-collapse: separate; border-spacing: 0;
  width: 100%; table-layout: fixed; font-size: var(--size-xs); }
.ps-room .ps-matrix th { font-weight: 500; }
.ps-room .ps-matrix thead th { padding: 15px 12px;
  border-bottom: 1px solid var(--ps-rule); text-align: left;
  vertical-align: middle; }
.ps-room .ps-matrix tbody td, .ps-room .ps-matrix tbody th {
  border-bottom: 1px solid var(--ps-rule); padding: 16px 12px;
  vertical-align: top; text-align: left; }
.ps-room .ps-matrix tbody tr:last-child > td,
.ps-room .ps-matrix tbody tr:last-child > th { border-bottom: 0; }
.ps-room .ps-matrix tbody td + td,
.ps-room .ps-matrix thead th + th { border-left: 1px solid var(--ps-rule); }
.ps-room .ps-matrix .ps-back-column { background: var(--ps-jade-soft);
  border-left: 1px solid var(--ps-rule); }
.ps-room .ps-member { display: flex; align-items: center; gap: 8px; }
.ps-room .ps-member-name { font: var(--size-lg)/1.2 var(--font-serif);
  overflow-wrap: anywhere; }
.ps-room .ps-member-name a { color: inherit; text-decoration: none; }
.ps-room .ps-member-name a:hover { color: var(--ps-gold); }
.ps-room .ps-member-meta { font-size: var(--size-2xs); color: var(--ps-muted);
  margin-top: 3px; }
.ps-room .ps-member-tools { margin-left: auto; display: flex; gap: 1px; }
.ps-room .ps-row-title { font: var(--size-lg)/1.2 var(--font-serif);
  overflow-wrap: anywhere; }
.ps-room .ps-row-tag { margin-top: 7px; font-size: var(--size-2xs); color: var(--ps-gold); }
.ps-room .ps-row-tools { display: flex; flex-wrap: wrap; gap: 1px;
  margin-top: 9px; }
.ps-room .ps-cell-head { display: flex; gap: 8px; justify-content: space-between;
  color: var(--ps-muted); font-size: var(--size-2xs); margin-bottom: 9px; }
.ps-room .ps-cell-head strong { color: var(--ps-ink); }
.ps-room .ps-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 7px; align-items: start; }
.ps-room .ps-piece { min-width: 0; }
.ps-room .ps-piece-image { position: relative; width: 100%; padding: 0;
  border: 1px solid var(--ps-rule); border-radius: 5px; overflow: hidden;
  display: block; background: var(--ps-bg); text-align: left; }
.ps-room .ps-piece-image[aria-pressed="true"] {
  outline: 2px solid var(--ps-jade); outline-offset: 2px; }
.ps-room .ps-art { display: flex; flex-direction: column; align-items: center;
  justify-content: center; position: relative; aspect-ratio: 2 / 3;
  width: 100%; overflow: hidden; background: var(--ps-blue-soft);
  color: var(--ps-blue); gap: 5px; padding: 6px; text-align: center; }
.ps-room .ps-art[data-kind="Postcards"] { aspect-ratio: 1 / 1.24;
  background: var(--ps-gold-soft); color: var(--ps-gold); }
.ps-room .ps-art[data-kind="Stickers"] { aspect-ratio: 1 / 1;
  background: var(--ps-purple-soft); color: var(--ps-purple); }
.ps-room .ps-art::before { content: ""; position: absolute; inset: 6px;
  border: 1px solid currentColor; opacity: 0.22; pointer-events: none; }
.ps-room .ps-art[data-back="true"] { background: var(--ps-jade-soft);
  color: var(--ps-jade); }
.ps-room .ps-art[data-back="true"]::before { inset: 12px;
  transform: rotate(6deg); opacity: 0.25; }
.ps-room .ps-art strong { font: var(--size-xl)/1.1 var(--font-serif); position: relative; }
.ps-room .ps-art small { font-size: var(--size-2xs); line-height: 1.25; position: relative; }
.ps-room .ps-art img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--ps-paper); }
.ps-room .ps-piece-label { font-size: var(--size-2xs); line-height: 1.3; margin: 6px 0 5px;
  overflow-wrap: anywhere; color: var(--ps-ink); }
.ps-room .ps-state-select { width: 100%; border: 0; border-radius: 4px;
  color: var(--ps-state); background: var(--ps-state-soft); padding: 4px 1px;
  font-size: var(--size-2xs); min-height: 27px; line-height: 1.25; }
.ps-room .ps-state-badge { font-size: var(--size-2xs); border-radius: 4px;
  color: var(--ps-state); background: var(--ps-state-soft); padding: 4px 5px;
  display: block; text-align: center; overflow-wrap: anywhere; }
.ps-room .ps-add-slot { width: 100%; border: 1px dashed var(--ps-rule);
  background: transparent; color: var(--ps-muted); border-radius: 4px;
  padding: 4px; margin-top: 11px; display: flex; align-items: center;
  justify-content: center; gap: 5px; font-size: var(--size-2xs); min-height: 27px; }
.ps-room .ps-add-slot:hover { color: var(--ps-jade); background: var(--ps-jade-soft); }
.ps-room .ps-empty-cell { min-height: 80px; display: grid; place-items: center;
  text-align: center; color: var(--ps-muted); font-size: var(--size-2xs); }
.ps-room .ps-back-head { display: flex; align-items: center; gap: 7px;
  color: var(--ps-jade); font-size: var(--size-xs); }
.ps-room .ps-backs { display: grid; grid-template-columns: 1fr; gap: 13px; }
.ps-room .ps-back-item { max-width: 99px; margin: auto; width: 100%; }
.ps-room .ps-back-item .ps-art { aspect-ratio: 3 / 4; }
.ps-room .ps-back-item .ps-art strong { font-size: var(--size-lg); }
.ps-room .ps-back-label { font-size: var(--size-2xs); margin-top: 5px; text-align: center;
  overflow-wrap: anywhere; }
.ps-room .ps-back-label small { font-size: var(--size-2xs); display: block;
  color: var(--ps-muted); }
.ps-room .ps-grid-footer { padding: 13px 16px; border-top: 1px solid var(--ps-rule);
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  flex-wrap: wrap; font-size: var(--size-2xs); color: var(--ps-muted); }
.ps-room .ps-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ps-room .ps-legend span { display: inline-flex; gap: 5px; align-items: center; }
.ps-room .ps-legend .ps-glyph { color: var(--ps-state); font-size: var(--size-sm); }
.ps-room .ps-editor { margin: 15px 0; border: 1px solid var(--ps-rule);
  border-radius: 9px; background: var(--ps-paper); padding: 18px; }
.ps-room .ps-editor-header { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.ps-room .ps-editor-title { font: var(--size-xl)/1.25 var(--font-serif); margin-bottom: 3px; }
.ps-room .ps-editor-layout { display: grid;
  grid-template-columns: 155px minmax(0, 1fr); gap: 20px; }
.ps-room .ps-preview-pair { display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; align-items: start; }
.ps-room .ps-preview-pair > div > .ps-note { text-align: center; margin-top: 5px; }
.ps-room .ps-preview-pair .ps-art.has-img { cursor: zoom-in; }
.ps-room .ps-editor-back-only { width: 95px; margin: auto; }
.ps-room .ps-fields { display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 16px; align-content: start; }
.ps-room .ps-field { display: flex; flex-direction: column; gap: 5px;
  font-size: var(--size-2xs); color: var(--ps-muted); min-width: 0; }
.ps-room .ps-field input, .ps-room .ps-field select {
  width: 100%; min-width: 0; border: 1px solid var(--ps-rule);
  border-radius: 5px; background: var(--ps-paper); color: var(--ps-ink);
  padding: 7px 9px; font-size: var(--size-xs); line-height: 1.4; min-height: 35px; }
.ps-room .ps-span { grid-column: 1 / -1; }
.ps-room .ps-editor-actions { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  border-top: 1px solid var(--ps-rule); padding-top: 12px; }
.ps-room .ps-selected-hint { display: flex; gap: 9px; align-items: center;
  justify-content: space-between; padding: 15px 1px; font-size: var(--size-2xs);
  color: var(--ps-muted); flex-wrap: wrap; }
.ps-room .ps-export { padding: 18px; border: 1px solid var(--ps-rule);
  border-radius: 9px; background: var(--ps-paper); margin-top: 16px; }
.ps-room .ps-export img { width: 100%; height: auto; display: block;
  margin-top: 14px; border: 1px solid var(--ps-rule); }
.ps-room .ps-form-head { display: flex; justify-content: space-between;
  align-items: center; gap: 15px; }
.ps-room .ps-preview-heading { display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 17px 18px; background: var(--ps-paper);
  border-bottom: 1px solid var(--ps-rule); }
.ps-room .ps-preview-heading h2 { font-size: var(--size-xl); }
@media (max-width: 750px) {
  .ps-room .ps-overview { grid-template-columns: 1fr; gap: 18px; }
  .ps-room .ps-metrics { justify-content: space-between; }
  .ps-room h1 { font-size: var(--size-2xl); }
}
@media (max-width: 480px) {
  .ps-room .ps-editor-layout { grid-template-columns: 1fr; }
  .ps-room .ps-preview-pair { max-width: 156px; }
  .ps-room .ps-fields { grid-template-columns: 1fr; }
  .ps-room .ps-editor { padding: 14px; }
  .ps-room .ps-metric { gap: 5px; }
  .ps-room .ps-metrics { gap: 10px; }
  .ps-room .ps-metric strong { font-size: var(--size-xl); }
  .ps-room .ps-overview { padding: 15px; }
}
@media (pointer: coarse) {
  .ps-room .ps-button, .ps-room .ps-quiet, .ps-room .ps-add-slot,
  .ps-room .ps-state-select, .ps-room .ps-view-switch button { min-height: 44px; }
  .ps-room .ps-quiet { min-width: 44px; }
  .ps-room .ps-field input, .ps-room .ps-field select,
  .ps-room .ps-state-select { font-size: var(--size-md); }
  .ps-room .ps-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Drop 12: inclusions in the sheet style, and the read-only sheet on
   the comeback page, banded by version. */
.ps-incl { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ps-incl-line { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: var(--size-xs); }
.ps-incl-name { font-family: var(--font-serif); color: var(--blossom);
  overflow-wrap: anywhere; }
.ps-incl-count { font-size: var(--size-2xs); color: var(--gold); flex: none;
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  border-radius: 4px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.ps-comeback-sheet { margin: var(--space-4) 0; }
.ps-room .ps-sheet-head { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.ps-room .ps-matrix tr.ps-band > td { padding: 12px 12px 11px;
  background: var(--ps-track); border-bottom: 1px solid var(--ps-rule); }
.ps-room .ps-band-inner { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; }
.ps-room .ps-band-title { font: var(--size-lg)/1.2 var(--font-serif); }
.ps-room .ps-band .ps-incl { flex-direction: row; flex-wrap: wrap;
  gap: 4px 14px; margin: 0 0 0 12px; }
.ps-room .ps-band .ps-incl-line { justify-content: flex-start; }
.ps-room .ps-piece-image.is-zoom { cursor: zoom-in; }

/* Drop 13: the Shopping Ledger, adapted from the brought layout - her
   tabs, counts, pills, search and order cards, palace colours in the
   veins. No brand bar, no hero, no footer, no notice strip, no undo;
   covers are round pictures that open their item. */
.sh-room {
  --sh-bg: var(--surface-2);
  --sh-paper: var(--surface);
  --sh-ink: var(--blossom);
  --sh-muted: var(--mist);
  --sh-rule: var(--border);
  --sh-jade: var(--accent-jade);
  --sh-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --sh-gold: var(--gold);
  --sh-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --sh-purple: var(--blossom);
  --sh-purple-soft: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --sh-blue: var(--mist);
  --sh-blue-soft: var(--surface-2);
  --sh-red: var(--accent-lacquer);
  --sh-track: color-mix(in srgb, var(--blossom) 9%, var(--surface));
  --sh-inverse: var(--ink);
  color: var(--sh-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  min-width: 0;
  width: 100%;
}
.sh-room * { box-sizing: border-box; }
.sh-room h2, .sh-room h3, .sh-room p { margin: 0; }
.sh-room h3 { font: var(--size-lg)/1.25 var(--font-serif); }
.sh-room strong { font-weight: 500; }
.sh-room button, .sh-room input, .sh-room select { font: inherit; color: inherit; }
.sh-room button { cursor: pointer; }
.sh-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.sh-room .sh-small { overflow-wrap: anywhere; font-size: var(--size-2xs); color: var(--sh-muted); }
.sh-room .sh-numeric { font-variant-numeric: tabular-nums; }
.sh-room .sh-glyph { font-family: var(--font-cjk); color: var(--sh-gold); line-height: 1; }
.sh-room .sh-link { display: block; color: var(--sh-jade); text-decoration: none; }
.sh-room .sh-link:hover { text-decoration: underline; }
.sh-room .sh-pad { padding: 10px 0 0; }
.sh-room .sh-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sh-room .sh-button { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 11px; min-height: 35px; background: var(--sh-paper);
  border: 1px solid var(--sh-rule); border-radius: 6px; font-size: var(--size-xs);
  text-decoration: none; color: var(--sh-ink); }
.sh-room .sh-button:hover { background: var(--sh-soft); }
.sh-room .sh-primary { background: var(--sh-jade); border-color: var(--sh-jade);
  color: var(--sh-inverse); }
.sh-room .sh-primary:hover { background: var(--sh-jade); filter: brightness(1.06); }
.sh-room .sh-quiet { display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-height: 28px; border: 0; background: transparent; padding: 4px 6px;
  color: var(--sh-jade); font-size: var(--size-2xs); border-radius: 4px; }
.sh-room .sh-quiet:hover { background: var(--sh-soft); }
.sh-room .sh-danger { color: var(--sh-red); }
.sh-room .sh-tabbar { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--sh-rule); margin-bottom: 20px;
  padding-bottom: 8px; }
.sh-room .sh-tabs { display: flex; gap: 25px; flex-wrap: wrap; margin-bottom: -9px; }
.sh-room .sh-tabs button { display: flex; align-items: center; gap: 7px; padding: 0 1px 12px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--sh-muted); font-size: var(--size-sm); }
.sh-room .sh-tabs button[aria-selected="true"] { color: var(--sh-jade);
  border-bottom-color: var(--sh-jade); }
.sh-room .sh-count { padding: 1px 5px; font-size: var(--size-2xs); line-height: 1.5; border-radius: 4px;
  background: var(--sh-track); }
.sh-room .sh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 19px; }
.sh-room .sh-stat { padding: 16px; background: var(--sh-paper); border: 1px solid var(--sh-rule);
  border-radius: 8px; min-width: 0; }
.sh-room .sh-stat-head { display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--size-2xs); color: var(--sh-muted); align-items: center; }
.sh-room .sh-stat-value { font: var(--size-2xl)/1.25 var(--font-serif); margin: 8px 0 4px;
  white-space: nowrap; }
.sh-room .sh-toolbar { display: flex; justify-content: space-between; gap: 14px;
  align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sh-room .sh-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.sh-room .sh-pills button { padding: 6px 10px; border: 1px solid var(--sh-rule);
  border-radius: 5px; background: var(--sh-paper); color: var(--sh-muted);
  font-size: var(--size-2xs); min-height: 31px; }
.sh-room .sh-pills button[aria-pressed="true"] { background: var(--sh-soft);
  border-color: var(--sh-jade); color: var(--sh-jade); }
.sh-room .sh-search { display: flex; gap: 7px; align-items: center; padding: 7px 9px;
  border: 1px solid var(--sh-rule); background: var(--sh-paper); border-radius: 6px;
  min-width: 0; }
.sh-room .sh-search input { border: 0; background: transparent; min-width: 0; width: 165px;
  max-width: 100%; font-size: var(--size-xs); padding: 0; outline: none; }
.sh-room .sh-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--size-2xs);
  line-height: 1.35; border-radius: 5px; background: var(--sh-track); color: var(--sh-muted);
  padding: 4px 7px; white-space: nowrap; }
.sh-room .sh-badge[data-tone="jade"] { background: var(--sh-soft); color: var(--sh-jade); }
.sh-room .sh-badge[data-tone="purple"] { background: var(--sh-purple-soft); color: var(--sh-purple); }
.sh-room .sh-badge[data-tone="gold"] { background: var(--sh-gold-soft); color: var(--sh-gold); }
.sh-room .sh-badge[data-tone="blue"] { background: var(--sh-blue-soft); color: var(--sh-blue); }
.sh-room .sh-order-list { display: flex; flex-direction: column; gap: 12px; }
.sh-room .sh-order { background: var(--sh-paper); border: 1px solid var(--sh-rule);
  border-radius: 9px; overflow: hidden; }
.sh-room .sh-order-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 17px 19px; }
.sh-room .sh-cover { display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; overflow: hidden; background: var(--sh-blue-soft); color: var(--sh-blue);
  font: var(--size-xl) var(--font-serif); border: 1px solid var(--sh-rule); }
.sh-room .sh-cover[data-tone="jade"] { background: var(--sh-soft); color: var(--sh-jade); }
.sh-room .sh-cover[data-tone="gold"] { background: var(--sh-gold-soft); color: var(--sh-gold); }
.sh-room .sh-cover[data-tone="purple"] { background: var(--sh-purple-soft); color: var(--sh-purple); }
.sh-room .sh-cover img, .sh-room .sh-mini-cover img { width: 100%; height: 100%;
  object-fit: cover; display: block; }
.sh-room .sh-order-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 5px; }
.sh-room .sh-order-title h3 { font-size: var(--size-xl); }
.sh-room .sh-order-money { text-align: right; align-self: start; font-size: var(--size-sm); }
.sh-room .sh-order-meta { display: flex; gap: 7px 15px; flex-wrap: wrap; font-size: var(--size-2xs);
  color: var(--sh-muted); margin-top: 8px; }
/* Drop 182: a return or exchange deadline on an order */
.sh-room .sh-return { color: var(--sh-gold); }
.sh-room .sh-return.is-passed { color: var(--sh-red); }
.sh-room .sh-return.is-settled { color: var(--sh-jade); }
.sh-room .sh-order-footer { display: flex; justify-content: space-between; gap: 12px;
  align-items: center; flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--sh-rule);
  background: var(--sh-bg); }
.sh-room .sh-order-detail { padding: 3px 19px 16px; border-top: 1px solid var(--sh-rule); }
.sh-room .sh-item-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--sh-rule); }
.sh-room .sh-mini-cover { display: grid; place-items: center; border-radius: 50%;
  overflow: hidden; background: var(--sh-blue-soft); color: var(--sh-blue);
  font: 14px var(--font-serif); width: 32px; height: 32px; border: 1px solid var(--sh-rule); }
.sh-room a:hover > .sh-mini-cover { border-color: var(--sh-gold); }
.sh-room .sh-item-line strong { font-size: var(--size-xs); display: block; overflow-wrap: anywhere; }
.sh-room .sh-item-right { text-align: right; font-size: var(--size-2xs); }
.sh-room .sh-line-tools { justify-content: flex-end; margin-top: 4px; gap: 2px; }
.sh-room .sh-costs { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 0; }
.sh-room .sh-cost { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px;
  align-items: center; font-size: var(--size-xs); padding: 4px 0; }
.sh-room .sh-breakdown { display: flex; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-top: 12px; margin-top: 5px; font-size: var(--size-2xs); color: var(--sh-muted);
  border-top: 1px solid var(--sh-rule); }
.sh-room .sh-trackline { padding: 11px 13px; background: var(--sh-bg); border-radius: 5px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--size-2xs);
  margin-top: 12px; color: var(--sh-muted); }
.sh-room .sh-detail-tools { margin-top: 10px; }
.sh-room .sh-empty { background: var(--sh-paper); border: 1px dashed var(--sh-rule);
  border-radius: 8px; padding: 30px 18px; text-align: center; color: var(--sh-muted);
  font-size: var(--size-xs); }
@media (max-width: 760px) {
  .sh-room .sh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-room .sh-tabs { gap: 19px; }
}
@media (max-width: 460px) {
  .sh-room .sh-order-head { grid-template-columns: 38px minmax(0, 1fr); padding: 15px 13px;
    gap: 10px; }
  .sh-room .sh-cover { width: 38px; height: 38px; font-size: var(--size-lg); }
  .sh-room .sh-order-money { grid-column: 2; text-align: left; display: flex; gap: 8px;
    align-items: center; flex-wrap: wrap; }
  .sh-room .sh-order-detail { padding: 3px 13px 14px; }
  .sh-room .sh-tabs { gap: 13px; }
  .sh-room .sh-tabs button { font-size: var(--size-xs); }
  .sh-room .sh-stat { padding: 13px; }
  .sh-room .sh-stat-value { font-size: var(--size-2xl); }
  .sh-room .sh-stats { gap: 9px; }
  .sh-room .sh-item-line { grid-template-columns: 27px minmax(0, 1fr); gap: 8px; }
  .sh-room .sh-mini-cover { width: 27px; height: 27px; }
  .sh-room .sh-item-right { grid-column: 2; text-align: left; }
  .sh-room .sh-line-tools { justify-content: flex-start; }
  .sh-room .sh-search, .sh-room .sh-search input { width: 100%; }
}
@media (pointer: coarse) {
  .sh-room .sh-button, .sh-room .sh-quiet, .sh-room .sh-pills button,
  .sh-room .sh-tabs button { min-height: 44px; }
  .sh-room .sh-quiet { min-width: 44px; }
  .sh-room .sh-search input { font-size: var(--size-md); }
}

/* Drop 14: group orders in the Shopping Ledger - her banner,
   participant boxes, fee rows, stage flow and joined boxes, palace
   colours. Your own box wears a gold rim and the imperial seal. */
.sh-room .sh-block { display: block; }
.sh-room .sh-subnav { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 17px; }
.sh-room .sh-group-banner { border: 1px solid var(--sh-rule); border-radius: 9px; padding: 20px;
  background: var(--sh-paper); margin-bottom: 16px; }
.sh-room .sh-group-banner h2 { font: var(--size-xl)/1.25 var(--font-serif); }
.sh-room .sh-group-top { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 15px; flex-wrap: wrap; }
.sh-room .sh-group-counts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--sh-rule); }
.sh-room .sh-group-counts > div { flex: 1; min-width: 120px; }
.sh-room .sh-group-counts strong { font: var(--size-xl) var(--font-serif); display: block;
  margin-bottom: 3px; }
.sh-room .sh-native-select { background: var(--sh-paper); color: var(--sh-ink);
  border: 1px solid var(--sh-rule); padding: 8px 9px; min-height: 35px; border-radius: 5px;
  font-size: var(--size-xs); max-width: 100%; }
.sh-room .sh-participants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px; align-items: start; }
.sh-room .sh-person-box { border: 1px solid var(--sh-rule); border-radius: 9px;
  background: var(--sh-paper); overflow: hidden; }
.sh-room .sh-person-box.is-mine { border-color: color-mix(in srgb, var(--sh-gold) 55%, var(--sh-rule)); }
.sh-room .sh-person-head { display: flex; justify-content: space-between; gap: 12px;
  align-items: center; padding: 16px 17px 11px; }
.sh-room .sh-person-name { display: flex; gap: 9px; align-items: center; min-width: 0; }
.sh-room .sh-avatar { display: grid; place-items: center; background: var(--sh-soft);
  color: var(--sh-jade); width: 33px; height: 33px; border-radius: 50%;
  font: var(--size-lg) var(--font-serif); flex-shrink: 0; }
.sh-room .is-mine .sh-avatar { background: var(--sh-gold-soft); color: var(--sh-gold);
  font-family: var(--font-cjk); }
.sh-room .sh-person-head h3 { font-size: var(--size-xl); overflow-wrap: anywhere; }
.sh-room .sh-person-body { padding: 0 17px 13px; }
.sh-room .sh-person-summary { display: flex; justify-content: space-between; gap: 9px;
  margin: 6px 0; font-size: var(--size-2xs); color: var(--sh-muted); }
.sh-room .sh-progress { height: 5px; border-radius: 6px; overflow: hidden;
  background: var(--sh-track); display: flex; gap: 2px; margin-top: 8px; }
.sh-room .sh-progress span { background: var(--sh-jade); height: 100%; }
.sh-room .sh-progress span + span { background: var(--sh-purple); }
.sh-room .sh-person-costs { display: flex; justify-content: space-between; gap: 10px;
  align-items: center; flex-wrap: wrap; border-top: 1px solid var(--sh-rule); margin-top: 8px;
  padding-top: 12px; font-size: var(--size-2xs); }
.sh-room .sh-person-footer { padding: 11px 16px; display: flex; justify-content: space-between;
  gap: 9px; align-items: center; background: var(--sh-bg); border-top: 1px solid var(--sh-rule);
  flex-wrap: wrap; }
.sh-room .sh-person-detail { border-top: 1px solid var(--sh-rule); padding: 14px 17px; }
.sh-room .sh-person-detail h3 { font-size: var(--size-md); }
.sh-room .sh-fees { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.sh-room .sh-fee { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; font-size: var(--size-2xs); }
.sh-room .sh-fee > strong { text-align: right; font-variant-numeric: tabular-nums; }
.sh-room .sh-fee .sh-actions { gap: 2px; justify-content: flex-end; }
.sh-room .sh-flow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: var(--size-2xs); margin: 12px 0; color: var(--sh-muted); }
.sh-room .sh-flow .sh-current { color: var(--sh-jade); font-weight: 500; }
.sh-room .sh-joined { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.sh-room .sh-joined-box { background: var(--sh-paper); border: 1px solid var(--sh-rule);
  border-radius: 9px; padding: 19px; }
.sh-room .sh-joined-box > h3 { margin-top: 2px; }
.sh-room .sh-section-head { display: flex; justify-content: space-between; align-items: center;
  gap: 13px; flex-wrap: wrap; margin-bottom: 14px; }
.sh-room .sh-section-head h2 { font: var(--size-xl)/1.25 var(--font-serif); }
@media (max-width: 760px) {
  .sh-room .sh-participants, .sh-room .sh-joined { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .sh-room .sh-native-select { font-size: var(--size-md); min-height: 44px; }
}

/* Drop 15: Buy & trade - her listing cards and two-sided deals, palace
   colours. A connected item shows its round picture in the art panel
   and opens its page; money in from sales stands apart in jade. */
.sh-room .sh-market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px; }
.sh-room .sh-listing { border: 1px solid var(--sh-rule); background: var(--sh-paper);
  border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; }
.sh-room .sh-listing-art { height: 130px; display: flex; align-items: center;
  justify-content: center; gap: 13px; background: var(--sh-blue-soft); color: var(--sh-blue);
  position: relative; overflow: hidden; padding: 0 12px; }
.sh-room .sh-listing-art[data-kind="item"] { background: var(--sh-gold-soft); color: var(--sh-gold); }
.sh-room .sh-listing-art .sh-art-front { width: 61px; height: 90px; display: grid;
  place-items: center; border: 1px solid currentColor; border-radius: 5px;
  font: var(--size-2xl) var(--font-serif); transform: rotate(-6deg); opacity: 0.7; flex: none; }
.sh-room .sh-listing-art[data-kind="item"] .sh-art-front { width: 91px; height: 91px;
  transform: rotate(3deg); border-radius: 1px; }
.sh-room .sh-listing-art span { font-size: var(--size-2xs); max-width: 110px; }
.sh-room .sh-listing-face { width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; flex: none; border: 1px solid var(--sh-rule);
  background: var(--sh-paper); font: var(--size-xl) var(--font-serif); }
.sh-room .sh-listing-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-room .sh-listing-art a:hover .sh-listing-face { border-color: var(--sh-gold); }
.sh-room .sh-listing-body { padding: 15px; flex: 1; }
.sh-room .sh-listing-body h3 { font-size: var(--size-lg); margin: 9px 0 5px; min-height: 47px;
  overflow-wrap: anywhere; }
.sh-room .sh-listing-price { display: flex; justify-content: space-between; gap: 9px;
  align-items: center; margin: 15px 0 8px; flex-wrap: wrap; }
.sh-room .sh-listing-price strong { font: var(--size-xl) var(--font-serif); }
.sh-room .sh-listing-note { font-size: var(--size-2xs); color: var(--sh-muted); margin-top: 8px;
  min-height: 34px; overflow-wrap: anywhere; }
.sh-room .sh-listing-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 0 15px 15px; }
.sh-room .sh-deal { background: var(--sh-paper); border: 1px solid var(--sh-rule);
  border-radius: 9px; padding: 19px; margin-bottom: 13px; }
.sh-room .sh-deal .sh-section-head { margin-bottom: 0; }
.sh-room .sh-deal-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: center; padding: 17px 0; margin: 12px 0; border-top: 1px solid var(--sh-rule);
  border-bottom: 1px solid var(--sh-rule); }
.sh-room .sh-deal-side { min-width: 0; }
.sh-room .sh-deal-side strong { display: block; margin: 7px 0 9px; font-size: var(--size-sm);
  overflow-wrap: anywhere; }
.sh-room .sh-deal-step { margin-top: 7px; }
.sh-room .sh-swap { font-size: var(--size-xl); }
.sh-room .sh-deal-footer { display: flex; justify-content: space-between; gap: 12px;
  align-items: center; flex-wrap: wrap; }
.kd-room .kd-ledger-list .kd-ledger-in { color: var(--kd-jade); }
@media (max-width: 760px) {
  .sh-room .sh-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .sh-room .sh-market-grid { grid-template-columns: 1fr; }
  .sh-room .sh-deal-sides { grid-template-columns: 1fr; gap: 10px; }
  .sh-room .sh-swap { transform: rotate(90deg); justify-self: start; }
}

/* Drop 17: the item display, adapted from the brought layout - a
   framed signature display on each hall's own board, the gallery,
   the collection panel, the details and the notes. Each hall takes
   its accent from its board, measured from the board's pixels:
   gold #D8B877, sapphire #3555A0, the BL red #99272B. */
.ci-room {
  --ci-bg: var(--surface-2);
  --ci-panel: var(--surface);
  --ci-subtle: color-mix(in srgb, var(--blossom) 7%, var(--surface));
  --ci-text: var(--blossom);
  --ci-muted: var(--mist);
  --ci-rule: var(--border);
  --ci-gold: var(--gold);
  --ci-jade: var(--accent-jade);
  --ci-jade-bg: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --ci-purple: var(--blossom);
  --ci-purple-bg: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --ci-red: var(--accent-lacquer);
  --ci-inverse: var(--ink);
  --ci-hall: color-mix(in srgb, var(--gold) 25%, var(--blossom));
  --ci-hall-deep: color-mix(in srgb, var(--gold) 50%, var(--blossom));
  --ci-hall-bg: color-mix(in srgb, var(--ci-hall-deep) 24%, var(--surface));
  color: var(--ci-text);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
}
.ci-room[data-board="sapphire"] { --ci-hall: var(--hall-sapphire); --ci-hall-deep: var(--hall-sapphire-deep); }
.ci-room[data-board="bl"] { --ci-hall: var(--hall-bl); --ci-hall-deep: var(--hall-bl-deep); }
.ci-room * { box-sizing: border-box; }
.ci-room h1, .ci-room h2, .ci-room h3, .ci-room p { margin: 0; }
.ci-room h1 { font: var(--size-2xl)/1.1 var(--font-serif); letter-spacing: -0.6px; overflow-wrap: anywhere; }
.ci-room h3 { font: var(--size-lg)/1.25 var(--font-serif); }
.ci-room button, .ci-room summary { font: inherit; color: inherit; cursor: pointer; }
.ci-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.ci-room a { color: var(--ci-hall); text-decoration: none; }
.ci-room a:hover { text-decoration: underline; }
.ci-room .ci-small { font-size: var(--size-2xs); color: var(--ci-muted); }
.ci-room .ci-pad { margin-top: 10px; }
.ci-room .ci-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ci-room .ci-columns { display: grid; grid-template-columns: minmax(0, 0.97fr) minmax(0, 1fr);
  gap: 25px; align-items: start; }
.ci-room .ci-gallery { min-width: 0; }
.ci-room .ci-art-stage { padding: 9px; background: var(--ci-panel); border: 1px solid var(--ci-rule);
  border-radius: 8px; }
.ci-room .ci-art-stage .curio-frame { flex: none; width: 100%; max-width: none; }
.ci-room .ci-plain { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 25%, transparent); }
.ci-room .ci-plain img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; cursor: zoom-in; }
.ci-room .ci-art-caption { display: flex; justify-content: space-between; align-items: center;
  gap: 9px; flex-wrap: wrap; padding: 8px 3px 1px; font-size: var(--size-2xs); color: var(--ci-muted); }
.ci-room .ci-photo-tools { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 16px 0 9px; flex-wrap: wrap; }
.ci-room .ci-thumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: start; }
.ci-room .ci-thumb { position: relative; display: block; padding: 4px; border: 1px solid var(--ci-rule);
  border-radius: 6px; background: var(--ci-panel); width: 77px; min-width: 0; }
.ci-room .ci-thumb[aria-pressed="true"] { border-color: var(--ci-hall); background: var(--ci-subtle); }
.ci-room .ci-thumb-board { width: 100%; aspect-ratio: 1; }
.ci-room .ci-thumb-board .curio-frame { flex: none; width: 100%; max-width: none; }
.ci-room .ci-thumb-board .curio-na { font-size: var(--size-2xs); }
.ci-room .ci-thumb-board .curio-frame-well img { cursor: pointer; }
.ci-room .ci-crop { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden;
  border-radius: 4px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.ci-room .ci-crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ci-room .ci-thumb-label { display: block; font-size: var(--size-2xs); margin-top: 4px; text-align: center;
  color: var(--ci-muted); }
.ci-room .ci-cover-star { position: absolute; right: 6px; top: 6px; background: var(--ci-panel);
  color: var(--ci-gold); width: 21px; height: 21px; border-radius: 50%; display: grid;
  place-items: center; font-size: var(--size-xs); }
.ci-room .ci-cover-settings { display: flex; gap: 7px; justify-content: space-between;
  align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ci-room .ci-shelf { margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--ci-rule); }
.ci-room .ci-shelf-label { margin-bottom: 8px; font-size: var(--size-2xs); color: var(--ci-muted); }
.ci-room .ci-shelf-name { display: inline-flex; gap: 7px; align-items: center;
  background: var(--ci-hall-bg); color: var(--ci-hall); border-radius: 5px; padding: 6px 9px;
  font-size: var(--size-xs); }
.ci-room .ci-shelf-guest { background: var(--ci-subtle); color: var(--ci-muted); }
.ci-room .ci-title-row { display: flex; justify-content: space-between; gap: 8px;
  align-items: start; margin-bottom: 7px; }
.ci-room .ci-artist { font-size: var(--size-xs); letter-spacing: 0.3px; color: var(--ci-hall); display: flex;
  gap: 7px; align-items: center; margin: 11px 0 15px; flex-wrap: wrap; }
.ci-room .ci-item-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 20px; }
.ci-room .ci-tag { font-size: var(--size-2xs); padding: 3px 7px; border: 1px solid var(--ci-rule);
  border-radius: 4px; color: var(--ci-muted); }
.ci-room .ci-head-actions { display: flex; gap: 6px; align-items: center; margin-bottom: 18px;
  position: relative; }
.ci-room .ci-button { display: inline-flex; gap: 6px; justify-content: center; align-items: center;
  padding: 8px 11px; min-height: 35px; border: 1px solid var(--ci-rule); border-radius: 5px;
  background: var(--ci-panel); font-size: var(--size-xs); color: var(--ci-text); }
.ci-room .ci-button:hover { background: var(--ci-subtle); }
.ci-room .ci-primary { background: var(--ci-jade); border-color: var(--ci-jade); color: var(--ci-inverse); }
.ci-room .ci-primary:hover { background: var(--ci-jade); filter: brightness(1.06); }
.ci-room .ci-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 0; background: transparent; border-radius: 4px; min-height: 29px; padding: 3px 6px;
  font-size: var(--size-2xs); color: var(--ci-gold); text-decoration: none; }
.ci-room .ci-quiet:hover { background: var(--ci-subtle); text-decoration: none; }
.ci-room .ci-favorite { min-width: 32px; font-size: var(--size-xl); color: var(--ci-muted); }
.ci-room .ci-favorite[aria-pressed="true"] { color: var(--ci-gold); }
.ci-room .ci-danger { color: var(--ci-red); }
.ci-room .ci-menu { position: relative; margin-left: auto; }
.ci-room .ci-menu summary { list-style: none; }
.ci-room .ci-menu summary::-webkit-details-marker { display: none; }
.ci-room .ci-menu-box { position: absolute; top: calc(100% + 6px); right: 0; width: 220px;
  background: var(--ci-panel); border: 1px solid var(--ci-rule); border-radius: 6px; padding: 6px;
  z-index: 8; display: flex; flex-direction: column; align-items: stretch; }
.ci-room .ci-menu-box .ci-quiet { justify-content: flex-start; width: 100%; text-align: left; }
.ci-room .ci-collection { background: var(--ci-panel); border: 1px solid var(--ci-rule);
  border-radius: 7px; padding: 16px; margin-bottom: 19px; }
.ci-room .ci-section-head { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.ci-room .ci-status { display: inline-flex; gap: 6px; align-items: center; background: var(--ci-hall-bg);
  color: var(--ci-hall); padding: 4px 8px; border-radius: 5px; font-size: var(--size-2xs); }
.ci-room .ci-status[data-tone="got"] { background: var(--ci-jade-bg); color: var(--ci-jade); }
.ci-room .ci-status[data-tone="way"] { background: var(--ci-purple-bg); color: var(--ci-purple); }
.ci-room .ci-status[data-tone="neutral"] { background: var(--ci-subtle); color: var(--ci-muted); }
.ci-room .ci-status-seal { height: 22px; width: auto; }
.ci-room .ci-quantities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 1px 0 14px; margin-bottom: 12px; border-bottom: 1px solid var(--ci-rule); }
.ci-room .ci-quantities strong { display: block; font: var(--size-xl)/1.2 var(--font-serif);
  font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.ci-room .ci-quantities span { display: block; font-size: var(--size-2xs); color: var(--ci-muted); }
.ci-room .ci-collection-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.ci-room .ci-collection-actions .ci-button { flex: 1; }
/* Drop 182: the lost-and-found mark */
.ci-room .ci-lost { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--ci-rule); }
.ci-room .ci-lost-words { font-size: var(--size-2xs); color: var(--ci-muted); min-width: 0; }
.ci-room .ci-lost.is-lost .ci-lost-words { color: var(--blossom); }
.ci-room .ci-lost .ci-lost-mark { margin-left: auto; }
.ci-room .ci-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 19px; margin: 0;
  padding: 0 0 17px; }
.ci-room .ci-facts dt { font-size: var(--size-2xs); color: var(--ci-muted); margin-bottom: 4px; }
.ci-room .ci-facts dd { margin: 0; font-size: var(--size-xs); color: var(--ci-text); overflow-wrap: anywhere; }
.ci-room .ci-more-facts { border-top: 1px solid var(--ci-rule); padding-top: 7px; }
.ci-room .ci-more-facts summary { display: flex; gap: 7px; align-items: center; list-style: none;
  min-height: 34px; color: var(--ci-muted); font-size: var(--size-2xs); }
.ci-room .ci-more-facts summary::-webkit-details-marker { display: none; }
.ci-room .ci-more-facts .ci-facts { margin-top: 8px; }
.ci-room .ci-notes { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--ci-rule); }
.ci-room .ci-notes p { font-size: var(--size-xs); color: var(--ci-muted); white-space: pre-wrap;
  overflow-wrap: anywhere; margin-top: 8px; }
.ci-room .ci-notes .ci-section-head { margin-bottom: 0; }
@media (max-width: 610px) {
  .ci-room .ci-columns { grid-template-columns: 1fr; gap: 24px; }
  .ci-room .ci-gallery { max-width: 390px; width: 100%; margin: 0 auto; }
  .ci-room .ci-art-stage { padding: 8px; }
  .ci-room .ci-shelf { margin-top: 16px; padding-top: 13px; }
  .ci-room h1 { font-size: var(--size-2xl); }
  .ci-room .ci-head-actions { margin-bottom: 15px; }
}
@media (max-width: 380px) {
  .ci-room .ci-collection-actions .ci-button { flex-basis: 100%; }
  .ci-room .ci-collection { padding: 14px; }
}
@media (pointer: coarse) {
  .ci-room button, .ci-room summary, .ci-room .ci-quiet { min-height: 44px; }
}

/* Drop 18: the discography catalogue and the release page, adapted from
   the brought layouts - counts, filters and release cards on each hall's
   sleeve; a hero and tabs on the release. Each hall's accent comes from
   its board, as on the item display. The MV stage finally has a size:
   full width, 16:9. */
.dg-room, .ap-room {
  --dg-panel: var(--surface);
  --dg-soft: color-mix(in srgb, var(--blossom) 7%, var(--surface));
  --dg-text: var(--blossom);
  --dg-muted: var(--mist);
  --dg-rule: var(--border);
  --dg-gold: var(--gold);
  --dg-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --dg-jade: var(--accent-jade);
  --dg-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --dg-purple: var(--blossom);
  --dg-purple-soft: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --dg-inverse: var(--ink);
  --dg-hall: color-mix(in srgb, var(--gold) 25%, var(--blossom));
  --dg-hall-deep: color-mix(in srgb, var(--gold) 50%, var(--blossom));
  color: var(--dg-text);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.dg-room[data-board="sapphire"], .ap-room[data-board="sapphire"] { --dg-hall: var(--hall-sapphire); --dg-hall-deep: var(--hall-sapphire-deep); }
.dg-room[data-board="bl"], .ap-room[data-board="bl"] { --dg-hall: var(--hall-bl); --dg-hall-deep: var(--hall-bl-deep); }
.dg-room *, .ap-room * { box-sizing: border-box; }
.dg-room h1, .dg-room h2, .dg-room h3, .dg-room p,
.ap-room h1, .ap-room h2, .ap-room h3, .ap-room p { margin: 0; }
.dg-room button, .ap-room button { font: inherit; color: inherit; cursor: pointer; }
.dg-room button:disabled, .ap-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.dg-room .dg-small { font-size: var(--size-2xs); color: var(--dg-muted); }
.dg-room .dg-num { font-variant-numeric: tabular-nums; }
.dg-room .dg-glyph { font-family: var(--font-cjk); color: var(--dg-gold); }
.dg-room .dg-actions, .ap-room .ap-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.dg-room .dg-button, .ap-room .ap-button { display: inline-flex; justify-content: center; align-items: center;
  gap: 6px; border: 1px solid var(--dg-rule); border-radius: 5px; padding: 8px 11px; min-height: 35px;
  background: var(--dg-panel); font-size: var(--size-xs); color: var(--dg-text); text-decoration: none; }
.dg-room .dg-button:hover, .ap-room .ap-button:hover { background: var(--dg-soft); }
.dg-room .dg-primary, .ap-room .ap-primary { background: var(--dg-jade); border-color: var(--dg-jade);
  color: var(--dg-inverse); }
.dg-room .dg-primary:hover, .ap-room .ap-primary:hover { background: var(--dg-jade); filter: brightness(1.06); }
.dg-room .dg-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 4px; min-height: 29px; font-size: var(--size-2xs); color: var(--dg-jade); text-decoration: none; border-radius: 4px; }
.dg-room .dg-quiet:hover { background: var(--dg-soft); }
.dg-room .dg-badge, .ap-room .dg-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
  border-radius: 5px; font-size: var(--size-2xs); background: var(--dg-jade-soft); color: var(--dg-jade); white-space: nowrap; }
.dg-room .dg-badge[data-tone="need"], .ap-room .dg-badge[data-tone="need"] { background: var(--dg-gold-soft); color: var(--dg-gold); }
.dg-room .dg-badge[data-tone="way"], .ap-room .dg-badge[data-tone="way"] { background: var(--dg-purple-soft); color: var(--dg-purple); }
.dg-room .dg-badge[data-tone="neutral"], .ap-room .dg-badge[data-tone="neutral"] { background: var(--dg-soft); color: var(--dg-muted); }
.dg-room .dg-progress, .ap-room .dg-progress { display: flex; height: 5px; gap: 2px; border-radius: 5px;
  overflow: hidden; background: var(--dg-soft); margin-top: 10px; }
.dg-room .dg-progress span, .ap-room .dg-progress span { height: 100%; background: var(--dg-jade); }
.dg-room .dg-progress span + span, .ap-room .dg-progress span + span { background: var(--dg-purple); }
/* the catalogue */
.dg-room .dg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dg-room .dg-stat { background: var(--dg-panel); border: 1px solid var(--dg-rule); border-radius: 8px; padding: 15px 16px; }
.dg-room .dg-stat-label { display: flex; justify-content: space-between; gap: 8px; font-size: var(--size-2xs); color: var(--dg-muted); }
.dg-room .dg-stat-value { font: var(--size-2xl)/1.25 var(--font-serif); margin: 7px 0 3px; white-space: nowrap; }
.dg-room .dg-toolbar { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 14px; }
.dg-room .dg-control { display: flex; flex-direction: column; gap: 5px; font-size: var(--size-2xs); color: var(--dg-muted); min-width: 0; }
.dg-room .dg-control input, .dg-room .dg-control select { width: 100%; min-width: 0; background: var(--dg-panel);
  color: var(--dg-text); border: 1px solid var(--dg-rule); border-radius: 5px; padding: 8px 9px; font-size: var(--size-xs); min-height: 36px; }
.dg-room .dg-filterrow { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-bottom: 13px; }
.dg-room .dg-filters, .dg-room .dg-view { display: flex; gap: 5px; flex-wrap: wrap; }
.dg-room .dg-filters button, .dg-room .dg-view button { display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--dg-rule); border-radius: 5px; background: var(--dg-panel);
  color: var(--dg-muted); font-size: var(--size-2xs); min-height: 31px; }
.dg-room .dg-filters button[aria-pressed="true"], .dg-room .dg-view button[aria-pressed="true"] {
  background: var(--dg-jade-soft); border-color: var(--dg-jade); color: var(--dg-jade); }
.dg-room .dg-filter-count { background: var(--dg-soft); border-radius: 4px; padding: 0 5px; font-size: var(--size-2xs); }
.dg-room .dg-results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 13px; font-size: var(--size-xs); color: var(--dg-muted); }
.dg-room .dg-priority-filter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-2xs); }
.dg-room .dg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.dg-room .dg-list { display: flex; flex-direction: column; gap: 12px; }
.dg-room .dg-release { background: var(--dg-panel); border: 1px solid var(--dg-rule); border-radius: 9px;
  overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.dg-room .dg-art-stage { position: relative; padding: 6px 18px; background: var(--dg-soft); }
.dg-room .dg-art-stage .disc-sleeve { margin: 0 auto; max-width: 14.5rem; }
.dg-room .dg-favorite { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--dg-rule); background: var(--dg-panel); color: var(--dg-muted); font-size: var(--size-md); }
.dg-room .dg-favorite[aria-pressed="true"] { color: var(--dg-gold); }
.dg-room .dg-release-body { padding: 15px 16px 12px; flex: 1; }
.dg-room .dg-artist { font-size: var(--size-2xs); letter-spacing: 0.3px; color: var(--dg-hall); }
.dg-room .dg-release-title { display: block; font: var(--size-xl)/1.25 var(--font-serif); color: var(--dg-text);
  text-decoration: none; margin: 6px 0 5px; overflow-wrap: anywhere; }
.dg-room .dg-release-title:hover { color: var(--dg-hall); }
.dg-room .dg-release-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: var(--size-2xs); color: var(--dg-muted); }
.dg-room .dg-release-status { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dg-room .dg-release-status strong { color: var(--dg-text); font-weight: 500; }
.dg-room .dg-progress-label, .dg-room .dg-no-target { font-size: var(--size-2xs); color: var(--dg-muted); margin-top: 6px; }
.dg-room .dg-release-footer { display: flex; justify-content: space-between; gap: 8px; padding: 9px 14px;
  border-top: 1px solid var(--dg-rule); }
.dg-room .dg-list .dg-release { flex-direction: row; align-items: stretch; }
.dg-room .dg-list .dg-art-stage { width: 170px; flex: none; padding: 12px; }
.dg-room .dg-list .dg-release-footer { flex-direction: column; justify-content: center; border-top: 0;
  border-left: 1px solid var(--dg-rule); }
.dg-room .dg-empty { grid-column: 1 / -1; padding: 34px 20px; text-align: center; background: var(--dg-panel);
  border: 1px solid var(--dg-rule); border-radius: 8px; }
.dg-room .dg-empty h3 { font: var(--size-xl) var(--font-serif); }
.dg-room .dg-empty p { margin-top: 8px; font-size: var(--size-xs); color: var(--dg-muted); }
.dg-room .dg-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 16px; }
/* the release page */
.ap-room .ap-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 24px;
  align-items: center; background: var(--dg-panel); border: 1px solid var(--dg-rule); border-radius: 9px;
  padding: 22px 24px; margin-bottom: 22px; }
.ap-room .ap-cover .curio-record, .ap-room .ap-cover .curio-frame { margin: 0; max-width: none; width: 100%; flex: none; }
.ap-room .ap-hero-info h1 { font: var(--size-2xl)/1.1 var(--font-serif); letter-spacing: -0.6px; overflow-wrap: anywhere; }
.ap-room .ap-artist { margin: 10px 0 9px; font-size: var(--size-sm); color: var(--dg-hall); }
.ap-room .ap-artist a { color: inherit; text-decoration: none; }
.ap-room .ap-artist a:hover { text-decoration: underline; }
.ap-room .ap-meta { font-size: var(--size-xs); color: var(--dg-muted); }
.ap-room .ap-summary { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; margin-top: 18px; }
.ap-room .ap-summary strong { display: block; font: var(--size-xl) var(--font-serif); margin-bottom: 3px; }
.ap-room .ap-summary span { font-size: var(--size-2xs); color: var(--dg-muted); }
.ap-room .ap-summary .dg-progress { max-width: 130px; margin-top: 8px; }
.ap-room .ap-hero-actions { align-self: start; display: flex; gap: 7px; align-items: center; }
.ap-room .ap-favorite { min-width: 35px; font-size: var(--size-md); color: var(--dg-muted); }
.ap-room .ap-favorite[aria-pressed="true"] { color: var(--dg-gold); }
.ap-room .ap-tabs { display: flex; gap: 26px; flex-wrap: wrap; border-bottom: 1px solid var(--dg-rule); margin-bottom: 20px; }
.ap-room .ap-tabs button { display: flex; gap: 7px; align-items: center; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--dg-muted); padding: 0 0 12px; font-size: var(--size-sm); }
.ap-room .ap-tabs button[aria-selected="true"] { color: var(--dg-jade); border-bottom-color: var(--dg-jade); }
.ap-room .ap-count { background: var(--dg-soft); font-size: var(--size-2xs); padding: 1px 6px; border-radius: 4px; }
.ap-room .dver-cover { position: relative; }
.ap-room .ap-version-number { position: absolute; top: 7px; left: 8px; background: var(--dg-panel);
  color: var(--dg-muted); font-size: var(--size-2xs); padding: 2px 6px; border-radius: 4px; z-index: 2; }
.ap-room .ap-version-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center;
  flex-wrap: wrap; margin: 4px 0 2px; }
.ap-room .ap-version-counts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0;
  font-size: var(--size-2xs); color: var(--dg-muted); }
.ap-room .ap-version-counts strong { font-size: var(--size-sm); color: var(--dg-text); margin-right: 3px; font-weight: 500; }
.ap-room .ap-version-moves { margin: 2px 0 8px; }
.ap-room .ap-version-moves .ap-button { flex: 1; }
.ap-room .ap-media-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px;
  align-items: center; padding: 10px 0; font-size: var(--size-sm); }
.ap-room .ap-media-row a { color: var(--dg-hall); text-decoration: none; }
.ap-room .ap-glyph { color: var(--dg-gold); }
.ap-room .ap-badge { display: inline-flex; padding: 3px 7px; border-radius: 5px; font-size: var(--size-2xs);
  background: var(--dg-gold-soft); color: var(--dg-gold); }
.ap-room .ap-title-track { margin-bottom: var(--space-3); }
.ap-room .mv-stage { position: relative; width: 100%; max-width: none; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: var(--ink); }
.ap-room .mv-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .dg-room .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-room .dg-toolbar { grid-template-columns: 1fr 1fr; }
  .ap-room .ap-hero { grid-template-columns: 200px minmax(0, 1fr); }
  .ap-room .ap-hero-actions { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .dg-room .dg-grid { grid-template-columns: 1fr; }
  .dg-room .dg-stats { grid-template-columns: 1fr 1fr; }
  .dg-room .dg-toolbar { grid-template-columns: 1fr; }
  .dg-room .dg-list .dg-release { flex-direction: column; }
  .dg-room .dg-list .dg-art-stage { width: auto; }
  .dg-room .dg-list .dg-release-footer { flex-direction: row; border-left: 0; border-top: 1px solid var(--dg-rule); }
  .ap-room .ap-hero { grid-template-columns: 1fr; }
  .ap-room .ap-cover { max-width: 260px; margin: 0 auto; width: 100%; }
  .ap-room .ap-tabs { gap: 17px; }
}
@media (pointer: coarse) {
  .dg-room button, .dg-room .dg-quiet, .ap-room button { min-height: 44px; }
  .dg-room .dg-control input, .dg-room .dg-control select { font-size: var(--size-md); }
}

/* Drop 19: the unified wishlist, adapted from the brought layout - its
   counts, tabs, controls, type pills and wish rows, palace colours, the
   hall's board accent for High priority. Pictures are round and open
   the item or card; custom wishes wear the hall's seal glyph. */
.wl-room {
  --wl-panel: var(--surface);
  --wl-soft: color-mix(in srgb, var(--blossom) 7%, var(--surface));
  --wl-text: var(--blossom);
  --wl-muted: var(--mist);
  --wl-rule: var(--border);
  --wl-gold: var(--gold);
  --wl-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --wl-jade: var(--accent-jade);
  --wl-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --wl-purple: var(--blossom);
  --wl-purple-soft: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --wl-red: var(--accent-lacquer);
  --wl-inverse: var(--ink);
  --wl-hall: color-mix(in srgb, var(--gold) 25%, var(--blossom));
  --wl-hall-soft: color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 24%, var(--surface));
  color: var(--wl-text);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.wl-room[data-board="sapphire"] { --wl-hall: var(--hall-sapphire); --wl-hall-soft: color-mix(in srgb, var(--hall-sapphire-deep) 26%, var(--surface)); }
.wl-room[data-board="bl"] { --wl-hall: var(--hall-bl); --wl-hall-soft: color-mix(in srgb, var(--hall-bl-deep) 26%, var(--surface)); }
.wl-room * { box-sizing: border-box; }
.wl-room h2, .wl-room h3, .wl-room p { margin: 0; }
.wl-room button, .wl-room summary { font: inherit; color: inherit; cursor: pointer; }
.wl-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.wl-room .wl-small { font-size: var(--size-2xs); color: var(--wl-muted); }
.wl-room .wl-glyph { font-family: var(--font-cjk); color: var(--wl-gold); }
.wl-room .wl-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.wl-room .wl-button { display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  border: 1px solid var(--wl-rule); border-radius: 5px; padding: 8px 11px; min-height: 35px;
  background: var(--wl-panel); font-size: var(--size-xs); color: var(--wl-text); }
.wl-room .wl-button:hover { background: var(--wl-soft); }
.wl-room .wl-primary { background: var(--wl-jade); border-color: var(--wl-jade); color: var(--wl-inverse); }
.wl-room .wl-primary:hover { background: var(--wl-jade); filter: brightness(1.06); }
.wl-room .wl-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 4px; min-height: 29px; font-size: var(--size-2xs); color: var(--wl-jade); border-radius: 4px; text-decoration: none; }
.wl-room .wl-quiet:hover { background: var(--wl-soft); }
.wl-room .wl-danger { color: var(--wl-red); }
.wl-room .wl-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px;
  background: var(--wl-soft); color: var(--wl-muted); font-size: var(--size-2xs); }
.wl-room .wl-badge[data-tone="grail"] { background: var(--wl-gold-soft); color: var(--wl-gold); }
.wl-room .wl-badge[data-tone="high"] { background: var(--wl-hall-soft); color: var(--wl-hall); }
.wl-room .wl-badge[data-tone="got"] { background: var(--wl-jade-soft); color: var(--wl-jade); }
.wl-room .wl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.wl-room .wl-stat { padding: 15px 17px; border: 1px solid var(--wl-rule); border-radius: 7px; background: var(--wl-panel); }
.wl-room .wl-stat-label { display: flex; justify-content: space-between; gap: 7px; font-size: var(--size-2xs); color: var(--wl-muted); }
.wl-room .wl-stat-value { font: var(--size-2xl)/1.2 var(--font-serif); margin: 7px 0 4px; font-variant-numeric: tabular-nums; }
.wl-room .wl-tabbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  flex-wrap: wrap; border-bottom: 1px solid var(--wl-rule); margin-bottom: 16px; padding-bottom: 8px; }
.wl-room .wl-tabs { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: -9px; }
.wl-room .wl-tabs button { display: flex; gap: 7px; align-items: center; border: 0; background: transparent;
  border-bottom: 2px solid transparent; color: var(--wl-muted); padding: 0 1px 12px; font-size: var(--size-sm); }
.wl-room .wl-tabs button[aria-selected="true"] { color: var(--wl-jade); border-bottom-color: var(--wl-jade); }
.wl-room .wl-count { background: var(--wl-soft); font-size: var(--size-2xs); padding: 1px 6px; border-radius: 4px; }
.wl-room .wl-controls { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 13px; }
.wl-room .wl-control { display: flex; flex-direction: column; gap: 5px; font-size: var(--size-2xs); color: var(--wl-muted); min-width: 0; }
.wl-room .wl-control input, .wl-room .wl-control select, .wl-room .wl-picker-search { width: 100%; min-width: 0;
  background: var(--wl-panel); color: var(--wl-text); border: 1px solid var(--wl-rule); border-radius: 5px;
  padding: 8px 9px; font-size: var(--size-xs); min-height: 36px; }
.wl-room .wl-filterrow { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-bottom: 12px; }
.wl-room .wl-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.wl-room .wl-filters button { display: flex; gap: 6px; align-items: center; padding: 6px 9px; min-height: 31px;
  border: 1px solid var(--wl-rule); border-radius: 5px; background: var(--wl-panel); font-size: var(--size-2xs); color: var(--wl-muted); }
.wl-room .wl-filters button[aria-pressed="true"] { border-color: var(--wl-jade); background: var(--wl-jade-soft); color: var(--wl-jade); }
.wl-room .wl-result-line { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; font-size: var(--size-2xs); color: var(--wl-muted); margin-bottom: 13px; }
.wl-room .wl-list { display: flex; flex-direction: column; gap: 11px; }
.wl-room .wl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wl-room .wl-wish { display: grid; grid-template-columns: 78px minmax(0, 1fr) 118px 131px; gap: 17px;
  align-items: center; padding: 17px; background: var(--wl-panel); border: 1px solid var(--wl-rule);
  border-radius: 8px; min-width: 0; }
.wl-room .wl-grid .wl-wish { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
.wl-room .wl-grid .wl-price, .wl-room .wl-grid .wl-row-actions { grid-column: 1 / -1; }
.wl-room .wl-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--wl-soft); border: 1px solid var(--wl-rule); }
.wl-room .wl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-room .wl-art-door:hover .wl-art { border-color: var(--wl-gold); }
.wl-room .wl-placeholder { font: var(--size-xl) var(--font-cjk); color: var(--wl-gold); }
.wl-room .wl-wish-top { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; }
.wl-room .wl-wish-name { display: block; margin: 0; padding: 0; background: transparent; border: 0;
  color: var(--wl-text); font: var(--size-xl)/1.25 var(--font-serif); text-align: left; overflow-wrap: anywhere; }
.wl-room .wl-wish-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.wl-room .wl-wish-meta { font-size: var(--size-2xs); color: var(--wl-hall); margin-top: 6px; overflow-wrap: anywhere; }
.wl-room .wl-wish-quantity { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 9px;
  font-size: var(--size-2xs); color: var(--wl-muted); }
.wl-room .wl-wish-quantity strong { color: var(--wl-text); font-size: var(--size-xs); font-weight: 500; }
.wl-room .wl-origin { margin-top: 5px; }
.wl-room .wl-origin a { color: var(--wl-muted); text-decoration: none; }
.wl-room .wl-origin a:hover { color: var(--wl-gold); }
.wl-room .wl-price-label { font-size: var(--size-2xs); color: var(--wl-muted); }
.wl-room .wl-price-value { font-size: var(--size-sm); font-variant-numeric: tabular-nums; margin: 5px 0 2px; }
.wl-room .wl-price > .wl-quiet { padding-left: 0; }
.wl-room .wl-row-actions { display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.wl-room .wl-row-actions > .wl-button { width: 100%; }
.wl-room .wl-row-secondary { display: flex; gap: 7px; align-items: center; justify-content: space-between; }
.wl-room .wl-menu { position: relative; }
.wl-room .wl-menu summary { list-style: none; min-width: 31px; justify-content: center; }
.wl-room .wl-menu summary::-webkit-details-marker { display: none; }
.wl-room .wl-menu-box { position: absolute; top: calc(100% + 5px); right: 0; width: 210px; background: var(--wl-panel);
  border: 1px solid var(--wl-rule); border-radius: 6px; padding: 6px; z-index: 10; display: flex; flex-direction: column; }
.wl-room .wl-menu-box button { width: 100%; justify-content: flex-start; text-align: left; }
.wl-room .wl-editor { margin: 0 0 18px; background: var(--wl-panel); border: 1px solid var(--wl-gold);
  border-radius: 7px; padding: 18px; }
.wl-room .wl-editor-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.wl-room .wl-editor-head h2 { font: var(--size-xl) var(--font-serif); margin-bottom: 4px; }
.wl-room .wl-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-top: 12px; max-height: 360px; overflow: auto; }
.wl-room .wl-pick { display: grid; grid-template-columns: auto 34px minmax(0, 1fr); gap: 9px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--wl-rule); border-radius: 6px; cursor: pointer; }
.wl-room .wl-pick:hover { background: var(--wl-soft); }
.wl-room .wl-pick strong { display: block; font-size: var(--size-xs); font-weight: 500; overflow-wrap: anywhere; }
.wl-room .wl-art-mini { width: 34px; }
.wl-room .wl-form-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.wl-room .wl-empty { padding: 34px 20px; text-align: center; background: var(--wl-panel);
  border: 1px solid var(--wl-rule); border-radius: 8px; grid-column: 1 / -1; }
.wl-room .wl-empty h3 { font: var(--size-xl) var(--font-serif); }
.wl-room .wl-empty p { margin-top: 8px; font-size: var(--size-xs); color: var(--wl-muted); }
.wl-room .wl-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 15px; }
@media (max-width: 860px) {
  .wl-room .wl-wish { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
  .wl-room .wl-price, .wl-room .wl-row-actions { grid-column: 2; }
  .wl-room .wl-controls { grid-template-columns: 1fr 1fr; }
  .wl-room .wl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wl-room .wl-stats { grid-template-columns: 1fr 1fr; }
  .wl-room .wl-controls { grid-template-columns: 1fr; }
  .wl-room .wl-picker-grid { grid-template-columns: 1fr; }
  .wl-room .wl-wish { grid-template-columns: 52px minmax(0, 1fr); padding: 14px; gap: 12px; }
}
@media (pointer: coarse) {
  .wl-room button, .wl-room summary, .wl-room .wl-quiet { min-height: 44px; }
  .wl-room .wl-control input, .wl-room .wl-control select, .wl-room .wl-picker-search { font-size: var(--size-md); }
}

/* Drop 21: the photocard collection, adapted from the brought layout -
   counts that open their cards, By album and All cards, album tiles on
   the hall's sleeve, and a card grid in its 5:7 frames. Prefixed pm-,
   since the palace's older photocard classes already own pc-. */
.pm-room {
  --pm-panel: var(--surface);
  --pm-soft: color-mix(in srgb, var(--blossom) 7%, var(--surface));
  --pm-ink: var(--blossom);
  --pm-muted: var(--mist);
  --pm-rule: var(--border);
  --pm-gold: var(--gold);
  --pm-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --pm-jade: var(--accent-jade);
  --pm-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --pm-purple: var(--blossom);
  --pm-purple-soft: color-mix(in srgb, var(--blossom) 14%, var(--surface));
  --pm-inverse: var(--ink);
  --pm-hall: color-mix(in srgb, var(--gold) 25%, var(--blossom));
  color: var(--pm-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.pm-room[data-board="sapphire"] { --pm-hall: var(--hall-sapphire); }
.pm-room[data-board="bl"] { --pm-hall: var(--hall-bl); }
.pm-room * { box-sizing: border-box; }
.pm-room h3, .pm-room p { margin: 0; }
.pm-room button { font: inherit; color: inherit; cursor: pointer; }
.pm-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.pm-room .pm-small { font-size: var(--size-2xs); color: var(--pm-muted); }
.pm-room .pm-glyph { font-family: var(--font-cjk); color: var(--pm-gold); }
.pm-room .pm-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pm-room .pm-button { display: inline-flex; justify-content: center; align-items: center; gap: 6px;
  border: 1px solid var(--pm-rule); border-radius: 5px; padding: 8px 11px; min-height: 35px;
  background: var(--pm-panel); font-size: var(--size-xs); color: var(--pm-ink); }
.pm-room .pm-button:hover { background: var(--pm-soft); }
.pm-room .pm-primary { background: var(--pm-jade); border-color: var(--pm-jade); color: var(--pm-inverse); }
.pm-room .pm-primary:hover { background: var(--pm-jade); filter: brightness(1.06); }
.pm-room .pm-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 4px; min-height: 29px; font-size: var(--size-2xs); color: var(--pm-jade); border-radius: 4px; text-decoration: none; }
.pm-room .pm-quiet:hover { background: var(--pm-soft); }
.pm-room .pm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px;
  font-size: var(--size-2xs); background: var(--pm-jade-soft); color: var(--pm-jade); white-space: nowrap; }
.pm-room .pm-badge[data-tone="need"] { background: var(--pm-gold-soft); color: var(--pm-gold); }
.pm-room .pm-badge[data-tone="way"] { background: var(--pm-purple-soft); color: var(--pm-purple); }
.pm-room .pm-badge[data-tone="neutral"] { background: var(--pm-soft); color: var(--pm-muted); }
.pm-room .dg-progress { display: flex; height: 5px; gap: 2px; border-radius: 5px; overflow: hidden;
  background: var(--pm-soft); }
.pm-room .dg-progress span { height: 100%; background: var(--pm-jade); }
.pm-room .dg-progress span + span { background: var(--pm-purple); }
.pm-room .pm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 11px; }
.pm-room .pm-stat { display: block; text-align: left; background: var(--pm-panel); border: 1px solid var(--pm-rule);
  border-radius: 7px; padding: 15px 16px; }
.pm-room .pm-stat:hover { background: var(--pm-soft); }
.pm-room .pm-stat-label { display: flex; justify-content: space-between; gap: 7px; font-size: var(--size-2xs); color: var(--pm-muted); }
.pm-room .pm-stat-value { display: block; font: var(--size-2xl)/1.2 var(--font-serif); margin: 7px 0 3px;
  font-variant-numeric: tabular-nums; font-weight: 400; }
.pm-room .pm-scope { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--size-2xs);
  color: var(--pm-muted); margin: 0 0 20px; }
.pm-room .pm-tabbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  flex-wrap: wrap; border-bottom: 1px solid var(--pm-rule); margin-bottom: 16px; padding-bottom: 8px; }
.pm-room .pm-tabs { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: -9px; }
.pm-room .pm-tabs button { display: flex; gap: 7px; align-items: center; border: 0; background: transparent;
  border-bottom: 2px solid transparent; color: var(--pm-muted); padding: 0 1px 12px; font-size: var(--size-sm); }
.pm-room .pm-tabs button[aria-selected="true"] { color: var(--pm-jade); border-bottom-color: var(--pm-jade); }
.pm-room .pm-count { background: var(--pm-soft); font-size: var(--size-2xs); padding: 1px 6px; border-radius: 4px; }
.pm-room .pm-controls { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 13px; }
.pm-room .pm-control { display: flex; flex-direction: column; gap: 5px; font-size: var(--size-2xs); color: var(--pm-muted); min-width: 0; }
.pm-room .pm-control input, .pm-room .pm-control select { width: 100%; min-width: 0; background: var(--pm-panel);
  color: var(--pm-ink); border: 1px solid var(--pm-rule); border-radius: 5px; padding: 8px 9px; font-size: var(--size-xs); min-height: 36px; }
.pm-room .pm-filterrow { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-bottom: 12px; }
.pm-room .pm-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.pm-room .pm-filters button { display: flex; gap: 6px; align-items: center; padding: 6px 9px; min-height: 31px;
  border: 1px solid var(--pm-rule); border-radius: 5px; background: var(--pm-panel); font-size: var(--size-2xs); color: var(--pm-muted); }
.pm-room .pm-filters button[aria-pressed="true"] { border-color: var(--pm-jade); background: var(--pm-jade-soft); color: var(--pm-jade); }
.pm-room .pm-results { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--size-2xs);
  color: var(--pm-muted); margin-bottom: 13px; }
.pm-room .pm-album-grid, .pm-room .pm-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pm-room .pm-album { display: flex; flex-direction: column; background: var(--pm-panel); border: 1px solid var(--pm-rule);
  border-radius: 7px; overflow: hidden; min-width: 0; }
.pm-room .pm-album-art { background: var(--pm-soft); padding: 12px 10px 8px; display: block; }
.pm-room .pm-album-art .disc-sleeve { margin: 0 auto; max-width: 12.5rem; }
.pm-room .pm-album-copy { display: flex; flex-direction: column; flex: 1; padding: 14px; }
.pm-room .pm-album-name { color: var(--pm-ink); font: var(--size-lg)/1.25 var(--font-serif); min-height: 48px;
  text-decoration: none; overflow-wrap: anywhere; }
.pm-room .pm-album-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pm-room .pm-album-artist { font-size: var(--size-2xs); color: var(--pm-hall); margin: 6px 0; }
.pm-room .pm-album-date { font-size: var(--size-2xs); color: var(--pm-muted); margin-bottom: 15px; }
.pm-room .pm-album-progress { margin-top: auto; min-height: 70px; }
.pm-room .pm-progress-head { display: flex; justify-content: space-between; gap: 7px; align-items: center;
  margin-bottom: 8px; font-size: var(--size-2xs); }
.pm-room .pm-progress-head strong { font-size: var(--size-md); font-weight: 500; }
.pm-room .pm-progress-note { display: flex; gap: 5px 10px; flex-wrap: wrap; font-size: var(--size-2xs); color: var(--pm-muted); margin-top: 7px; }
.pm-room .pm-album-empty { padding: 6px 0; font-size: var(--size-2xs); color: var(--pm-muted); }
.pm-room .pm-album-empty strong { display: block; font-size: var(--size-xs); color: var(--pm-ink); margin-bottom: 5px; font-weight: 500; }
.pm-room .pm-album-footer { display: flex; gap: 5px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--pm-rule); padding: 9px 12px; }
.pm-room .pm-card { min-width: 0; background: var(--pm-panel); border: 1px solid var(--pm-rule); border-radius: 7px; overflow: hidden; }
.pm-room .pm-card-photo { position: relative; aspect-ratio: 5 / 7; background: var(--pm-soft); overflow: hidden; }
.pm-room .pm-card-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.pm-room .pm-photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; padding: 15px; text-align: center; color: var(--pm-muted); }
.pm-room .pm-photo-empty strong { font: var(--size-2xl) var(--font-serif); color: var(--pm-gold); font-weight: 400; }
.pm-room .pm-photo-empty span { font-size: var(--size-2xs); }
.pm-room .pm-photo-tag { position: absolute; top: 8px; left: 8px; font-size: var(--size-2xs); background: var(--pm-panel);
  color: var(--pm-muted); padding: 3px 6px; border-radius: 4px; }
.pm-room .pm-card-copy { padding: 12px; }
.pm-room .pm-card-copy h3 { font: 500 var(--size-sm)/1.35 var(--font-sans); min-height: 34px; overflow-wrap: anywhere; }
.pm-room .pm-card-meta { font-size: var(--size-2xs); color: var(--pm-hall); margin: 4px 0 8px; min-height: 31px; }
.pm-room .pm-card-status { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; min-height: 24px; }
.pm-room .pm-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.pm-room .pm-card-actions .pm-button { padding: 6px 7px; font-size: var(--size-2xs); min-height: 31px; flex: 1; }
.pm-room .pm-card-footer { display: flex; gap: 7px; justify-content: space-between; align-items: center;
  flex-wrap: wrap; margin-top: 7px; }
.pm-room .pm-empty { grid-column: 1 / -1; padding: 34px 20px; text-align: center; background: var(--pm-panel);
  border: 1px solid var(--pm-rule); border-radius: 8px; }
.pm-room .pm-empty h3 { font: var(--size-xl) var(--font-serif); }
.pm-room .pm-empty p { margin-top: 8px; font-size: var(--size-xs); color: var(--pm-muted); }
.pm-room .pm-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 15px; }
@media (max-width: 979px) {
  .pm-room .pm-album-grid, .pm-room .pm-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-room .pm-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pm-room .pm-album-grid, .pm-room .pm-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-room .pm-stats { grid-template-columns: 1fr 1fr; }
  .pm-room .pm-controls { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .pm-room button, .pm-room .pm-quiet { min-height: 44px; }
  .pm-room .pm-control input, .pm-room .pm-control select { font-size: var(--size-md); }
}

/* Drop 22: the artist profile of the Special Corner, adapted from the
   brought layout - a family strip in place of the sidebar, a hero in
   the hall's deep board colour with the artist's round portrait where
   the seal stood, counts, tabs, panels and cards. Palace colours. */
.ah-room {
  --ah-panel: var(--surface);
  --ah-soft: color-mix(in srgb, var(--blossom) 7%, var(--surface));
  --ah-ink: var(--blossom);
  --ah-muted: var(--mist);
  --ah-line: var(--border);
  --ah-gold: var(--gold);
  --ah-jade: var(--accent-jade);
  --ah-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --ah-amber-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --ah-red: var(--accent-lacquer);
  --ah-red-soft: color-mix(in srgb, var(--accent-lacquer) 16%, var(--surface));
  --ah-blue-soft: color-mix(in srgb, var(--hall-sapphire) 16%, var(--surface));
  --ah-hall: color-mix(in srgb, var(--gold) 25%, var(--blossom));
  --ah-hall-deep: color-mix(in srgb, var(--gold) 50%, var(--blossom));
  --ah-radius: 12px;
  color: var(--ah-ink);
  font: var(--size-sm)/1.55 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.ah-room[data-board="sapphire"] { --ah-hall: var(--hall-sapphire); --ah-hall-deep: var(--hall-sapphire-deep); }
.ah-room[data-board="bl"] { --ah-hall: var(--hall-bl); --ah-hall-deep: var(--hall-bl-deep); }
.ah-room * { box-sizing: border-box; }
.ah-room h1, .ah-room h2, .ah-room h3, .ah-room p, .ah-room dl, .ah-room ol, .ah-room ul { margin: 0; }
.ah-room h2 { font: var(--size-xl)/1.25 var(--font-serif); }
.ah-room h3 { font: var(--size-lg)/1.3 var(--font-serif); }
.ah-room a { color: inherit; }
.ah-room button { font: inherit; color: inherit; cursor: pointer; }
.ah-room .ah-small { font-size: var(--size-xs); }
.ah-room .ah-muted { color: var(--ah-muted); }
.ah-room .ah-micro { font-size: var(--size-2xs); color: var(--ah-muted); }
.ah-room .ah-gap { margin-top: 12px; }
.ah-room .ah-kicker { font-size: var(--size-2xs); letter-spacing: 1px; color: var(--ah-gold); text-transform: uppercase; }
.ah-room .ah-label { display: block; font-size: var(--size-2xs); color: var(--ah-muted); margin-bottom: 3px; }
.ah-room .ah-blank { font-size: var(--size-xs); color: var(--ah-muted); font-style: italic; margin-top: 12px; }
.ah-room .ah-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.ah-room .ah-row-between { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ah-room .ah-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px;
  min-height: 35px; border: 1px solid var(--ah-line); border-radius: 6px; background: var(--ah-panel);
  font-size: var(--size-xs); text-decoration: none; color: var(--ah-ink); }
.ah-room .ah-btn:hover { background: var(--ah-soft); }
.ah-room .ah-primary { background: var(--ah-jade); border-color: var(--ah-jade); color: var(--ink); }
.ah-room .ah-small-btn { padding: 5px 10px; min-height: 30px; font-size: var(--size-2xs); }
.ah-room .ah-text-btn { background: none; border: 0; padding: 0; color: var(--ah-jade); font-size: var(--size-xs); text-decoration: none; }
.ah-room .ah-text-btn:hover { text-decoration: underline; }
.ah-room .ah-mini-btn { font-weight: 500; text-decoration: none; }
.ah-room .ah-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 20px;
  font-size: var(--size-2xs); font-weight: 500; white-space: nowrap; background: var(--ah-soft); color: var(--ah-muted); }
.ah-room .ah-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ah-room .ah-badge[data-kind="plain"]::before { display: none; }
.ah-room .ah-badge[data-kind="active"] { background: var(--ah-jade-soft); color: var(--ah-jade); }
.ah-room .ah-badge[data-kind="occasional"] { background: var(--ah-blue-soft); color: var(--hall-sapphire); }
.ah-room .ah-badge[data-kind="hiatus"] { background: var(--ah-amber-soft); color: var(--ah-gold); }
.ah-room .ah-badge[data-kind="former"] { background: var(--ah-red-soft); color: var(--ah-red); }
.ah-room .ah-badge[data-kind="inactive"] { background: var(--ah-soft); color: var(--ah-muted); }
/* the family strip */
.ah-room .ah-family { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px;
  padding: 10px 14px; background: var(--ah-panel); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); }
.ah-room .ah-family-root, .ah-room .ah-family-unit { display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; padding: 4px 9px 4px 4px; border-radius: 20px; border: 1px solid transparent; font-size: var(--size-xs); }
.ah-room .ah-family-root { font: var(--size-md) var(--font-serif); padding-right: 12px; }
.ah-room .ah-family-root:hover, .ah-room .ah-family-unit:hover { border-color: var(--ah-line); background: var(--ah-soft); }
.ah-room .is-here { border-color: var(--ah-hall); color: var(--ah-hall); }
.ah-room .ah-family-units { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.ah-room .ah-family-face.corner-face, .ah-room .ah-chip-face.corner-face { width: 26px; height: 26px; min-width: 26px; }
.ah-room .ah-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ah-muted); }
.ah-room .ah-dot[data-kind="active"] { background: var(--ah-jade); }
.ah-room .ah-dot[data-kind="occasional"] { background: var(--hall-sapphire); }
.ah-room .ah-jump { background: var(--ah-panel); color: var(--ah-ink); border: 1px solid var(--ah-line);
  border-radius: 6px; padding: 7px 9px; font-size: var(--size-xs); min-height: 34px; }
/* the hero */
.ah-room .ah-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px; align-items: center; padding: 30px 32px; border-radius: var(--ah-radius); min-height: 230px;
  background: color-mix(in srgb, var(--ah-hall-deep) 42%, var(--surface)); }
.ah-room .ah-hero::before { content: ''; position: absolute; inset: 10px; border: 1px solid
  color-mix(in srgb, var(--ah-gold) 35%, transparent); border-radius: 8px; pointer-events: none; }
.ah-room .ah-hero::after { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ah-ink) 12%, transparent); right: -90px; top: -150px; pointer-events: none; }
.ah-room .ah-hero-face.corner-face { width: 156px; height: 156px; min-width: 156px; border: 1px solid var(--ah-gold);
  outline: 6px solid color-mix(in srgb, var(--ah-gold) 14%, transparent); position: relative; z-index: 1; font-size: var(--size-4xl); }
.ah-room .ah-hero-words { position: relative; z-index: 1; }
.ah-room .ah-hero h1 { font: var(--size-4xl)/1.06 var(--font-serif); letter-spacing: -1px; margin-bottom: 8px; overflow-wrap: anywhere; }
.ah-room .ah-hero-native { font-size: var(--size-sm); letter-spacing: 2px; color: var(--ah-hall); }
.ah-room .ah-hero p { max-width: 620px; font-size: var(--size-sm); margin-top: 15px; color: color-mix(in srgb, var(--ah-ink) 88%, transparent); }
.ah-room .ah-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* counts and tabs */
.ah-room .ah-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--ah-line); }
.ah-room .ah-stat { padding-left: 22px; border-right: 1px solid var(--ah-line); }
.ah-room .ah-stat:first-child { padding-left: 0; }
.ah-room .ah-stat:last-child { border-right: 0; }
.ah-room .ah-stat-value { font: var(--size-2xl) var(--font-serif); }
.ah-room .ah-stat-label { font-size: var(--size-xs); margin-left: 8px; color: var(--ah-muted); }
.ah-room .ah-stat-sub { font-size: var(--size-2xs); color: var(--ah-muted); margin-top: 3px; }
.ah-room .ah-tabs { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--ah-line); margin: 0 0 24px; }
.ah-room .ah-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 16px 0 12px;
  color: var(--ah-muted); font-size: var(--size-sm); white-space: nowrap; }
.ah-room .ah-tabs button.is-active { border-bottom-color: var(--ah-jade); color: var(--ah-jade); font-weight: 500; }
.ah-room .ah-back-link { margin-bottom: 14px; }
/* panels and facts */
.ah-room .ah-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  margin-bottom: 18px; flex-wrap: wrap; }
.ah-room .ah-section-head h2 { font-size: var(--size-xl); }
.ah-room .ah-section-head p { font-size: var(--size-xs); color: var(--ah-muted); margin-top: 6px; }
.ah-room .ah-panel { background: var(--ah-panel); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); padding: 22px; min-width: 0; }
.ah-room .ah-panel > h2 + * { margin-top: 14px; }
.ah-room .ah-panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.ah-room .ah-panel-head p { font-size: var(--size-xs); color: var(--ah-muted); margin-top: 5px; }
.ah-room .ah-two-thirds { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.ah-room .ah-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ah-room .ah-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.ah-room .ah-stack { display: flex; flex-direction: column; gap: 18px; }
.ah-room .ah-fact-list { display: flex; flex-direction: column; }
.ah-room .ah-fact-list > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--ah-line); }
.ah-room .ah-fact-list > div:last-child { border-bottom: 0; }
.ah-room .ah-fact-list dt { font-size: var(--size-2xs); color: var(--ah-muted); }
.ah-room .ah-fact-list dd { margin: 0; font-size: var(--size-sm); overflow-wrap: anywhere; }
.ah-room .ah-fact-list dd a { color: var(--ah-hall); }
.ah-room .ah-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ah-hall-deep);
  border: 1px solid var(--ah-hall); margin-right: 7px; vertical-align: -1px; }
.ah-room .ah-intro-quote { font: italic var(--size-lg) var(--font-serif); color: var(--ah-hall); margin: 10px 0 6px; }
.ah-room .ah-note { margin-top: 14px; padding: 12px 15px; background: var(--ah-soft); border-left: 3px solid var(--ah-gold);
  border-radius: 0 8px 8px 0; font-size: var(--size-xs); line-height: 1.6; }
.ah-room .ah-rule { border: 0; border-top: 1px solid var(--ah-line); margin: 16px 0; }
.ah-room .ah-source-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ah-room .ah-source-links a { font-size: var(--size-2xs); color: var(--ah-jade); text-decoration: none; }
.ah-room .ah-source-links a:hover { text-decoration: underline; }
.ah-room .ah-status-help { font-size: var(--size-2xs); color: var(--ah-muted); margin-top: 18px; line-height: 1.6; max-width: 900px; }
/* treasury */
.ah-room .ah-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ah-room .ah-metric strong { display: block; font: var(--size-2xl) var(--font-serif); font-weight: 400; }
.ah-room .ah-metric span { font-size: var(--size-2xs); color: var(--ah-muted); }
.ah-room .ah-progress-row { margin-top: 10px; font-size: var(--size-xs); }
.ah-room .ah-progress { height: 5px; border-radius: 5px; background: var(--ah-soft); overflow: hidden; margin-top: 5px; }
.ah-room .ah-progress i { display: block; height: 100%; background: var(--ah-jade); }
/* units, members, legacy */
.ah-room .ah-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ah-room .ah-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--size-2xs); color: var(--ah-muted); }
.ah-room .ah-field select, .ah-room .ah-field input, .ah-room .ah-field textarea { background: var(--ah-panel); color: var(--ah-ink);
  border: 1px solid var(--ah-line); border-radius: 6px; padding: 8px 9px; font-size: var(--size-xs); min-height: 36px; width: 100%; }
.ah-room .ah-field textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.ah-room .ah-unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ah-room .ah-unit-card { background: var(--ah-panel); border: 1px solid var(--ah-line); border-radius: var(--ah-radius);
  padding: 20px 21px; display: flex; flex-direction: column; gap: 13px; }
.ah-room .ah-unit-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ah-room .ah-unit-no { font: var(--size-2xs) var(--font-serif); color: var(--ah-gold); letter-spacing: 1px; }
.ah-room .ah-unit-name { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ah-room .ah-unit-name h3 { font-size: var(--size-xl); letter-spacing: -0.3px; }
.ah-room .ah-unit-name:hover h3 { color: var(--ah-hall); }
.ah-room .ah-unit-face.corner-face { width: 40px; height: 40px; min-width: 40px; }
.ah-room .ah-tagline { font-size: var(--size-2xs); color: var(--ah-muted); margin-top: 5px; }
.ah-room .ah-unit-card > p { font-size: var(--size-xs); color: var(--ah-muted); }
.ah-room .ah-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ah-room .ah-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ah-line); border-radius: 20px;
  padding: 2px 10px 2px 2px; font-size: var(--size-2xs); text-decoration: none; background: var(--ah-panel); white-space: nowrap; }
.ah-room .ah-chip:hover { border-color: var(--ah-jade); background: var(--ah-jade-soft); }
.ah-room .ah-chip.is-past { border-style: dashed; color: var(--ah-muted); }
.ah-room .ah-unit-bottom { margin-top: auto; border-top: 1px solid var(--ah-line); padding-top: 12px; display: flex;
  justify-content: space-between; align-items: center; gap: 12px; }
.ah-room .ah-unit-bottom .ah-small { font-size: var(--size-2xs); color: var(--ah-muted); max-width: 70%; }
.ah-room .ah-matrix-panel { margin-bottom: 18px; }
.ah-room .ah-table-wrap { overflow-x: auto; }
.ah-room .ah-matrix { width: 100%; border-collapse: collapse; font-size: var(--size-xs); }
.ah-room .ah-matrix th, .ah-room .ah-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--ah-line); text-align: center; }
.ah-room .ah-matrix th:first-child, .ah-room .ah-matrix td:first-child { text-align: left; }
.ah-room .ah-matrix th { font-size: var(--size-2xs); color: var(--ah-muted); font-weight: 500; }
.ah-room .ah-matrix-symbol { color: var(--ah-jade); }
.ah-room .ah-matrix-symbol.is-hiatus { color: var(--ah-gold); font-weight: 600; }
.ah-room .ah-matrix-symbol.is-past { color: var(--ah-red); font-weight: 600; }
.ah-room .ah-secondary { font-size: var(--size-3xs); color: var(--ah-muted); }
.ah-room .ah-member-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ah-room .ah-member-card { background: var(--ah-panel); border: 1px solid var(--ah-line); border-radius: var(--ah-radius);
  padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ah-room .ah-member-top { display: flex; gap: 11px; align-items: center; text-decoration: none; }
.ah-room .ah-member-face.corner-face { width: 52px; height: 52px; min-width: 52px; }
.ah-room .ah-member-top:hover h3 { color: var(--ah-hall); }
.ah-room .ah-native { font-size: var(--size-xs); color: var(--ah-hall); }
.ah-room .ah-role { font-size: var(--size-xs); color: var(--ah-muted); }
.ah-room .ah-tinyunits { font-size: var(--size-2xs); color: var(--ah-muted); flex: 1; }
.ah-room .ah-legacy-card { display: flex; flex-direction: column; gap: 12px; }
.ah-room .ah-legacy-card p { font-size: var(--size-xs); }
.ah-room .ah-membership-list { display: flex; flex-direction: column; }
.ah-room .ah-membership { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--ah-line); }
.ah-room .ah-membership:last-child { border-bottom: 0; }
.ah-room .ah-membership-who { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.ah-room .ah-membership-who:hover .ah-mini-btn { color: var(--ah-hall); }
.ah-room .ah-meta { font-size: var(--size-2xs); color: var(--ah-muted); }
.ah-room .ah-timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ah-room .ah-timeline li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; font-size: var(--size-xs);
  padding-left: 12px; border-left: 2px solid var(--ah-line); }
.ah-room .ah-when { color: var(--ah-gold); font-family: var(--font-serif); }
/* the palace's own records */
.ah-room .ah-album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ah-room .ah-album-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 12px;
  background: var(--ah-panel); border: 1px solid var(--ah-line); border-radius: var(--ah-radius); }
.ah-room .ah-album-card .disc-sleeve { margin: 0 auto 6px; max-width: 12rem; }
.ah-room .ah-album-card p { font-size: var(--size-2xs); color: var(--ah-muted); }
.ah-room .ah-album-card:hover h3 { color: var(--ah-hall); }
.ah-room .ah-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.ah-room .ah-pills button { padding: 6px 10px; border: 1px solid var(--ah-line); border-radius: 5px; background: var(--ah-panel);
  color: var(--ah-muted); font-size: var(--size-2xs); min-height: 31px; }
.ah-room .ah-pills button[aria-pressed="true"] { border-color: var(--ah-jade); background: var(--ah-jade-soft); color: var(--ah-jade); }
.ah-room .ah-item-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ah-room .ah-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--ah-panel); border: 1px solid var(--ah-line); border-radius: 9px; text-decoration: none; }
.ah-room .ah-item:hover { border-color: var(--ah-hall); }
.ah-room .ah-item strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ah-room .ah-item-face { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--ah-soft); display: grid; place-items: center; border: 1px solid var(--ah-line); font: var(--size-lg) var(--font-serif); }
.ah-room .ah-item-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ah-room .ah-item-right { display: flex; gap: 8px; align-items: center; }
.ah-room .ah-pc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ah-room .ah-pc { display: flex; flex-direction: column; gap: 4px; text-decoration: none; font-size: var(--size-xs); }
.ah-room .ah-pc-photo { position: relative; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden;
  background: var(--ah-soft); border: 1px solid var(--ah-line); margin-bottom: 4px; }
.ah-room .ah-pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ah-room .ah-pc-initial { position: absolute; inset: 0; display: grid; place-items: center; font: var(--size-xl) var(--font-serif); color: var(--ah-gold); }
.ah-room .ah-pc strong { font-weight: 500; overflow-wrap: anywhere; }
.ah-room .ah-pc .ah-badge { align-self: flex-start; }
.ah-room .ah-notes-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ah-room .ah-source-list { list-style: none; padding: 0; margin-top: 12px; display: flex; flex-direction: column; }
.ah-room .ah-source-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--ah-line); font-size: var(--size-xs); }
.ah-room .ah-source-list a { color: var(--ah-hall); text-decoration: none; }
.ah-room .ah-source-list a:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .ah-room .ah-two-thirds, .ah-room .ah-unit-grid { grid-template-columns: 1fr; }
  .ah-room .ah-member-grid, .ah-room .ah-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-room .ah-pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ah-room .ah-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ah-room .ah-hero { grid-template-columns: 1fr; padding: 24px 22px; }
  .ah-room .ah-hero-face.corner-face { width: 110px; height: 110px; min-width: 110px; }
  .ah-room .ah-hero h1 { font-size: var(--size-2xl); }
  .ah-room .ah-stats { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .ah-room .ah-stat:nth-child(3) { padding-left: 0; }
  .ah-room .ah-stat:nth-child(2) { border-right: 0; }
  .ah-room .ah-member-grid, .ah-room .ah-grid-2 { grid-template-columns: 1fr; }
  .ah-room .ah-pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ah-room .ah-fact-list > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (pointer: coarse) {
  .ah-room button, .ah-room .ah-btn { min-height: 44px; }
  .ah-room .ah-field select, .ah-room .ah-field input, .ah-room .ah-jump { font-size: var(--size-md); }
}

/* Drop 23: editing the artist profile - the hero's doors, and the
   Court's tools on each membership. */
.ah-room .ah-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ah-room .ah-hero-btn { background: color-mix(in srgb, var(--surface) 55%, transparent);
  border-color: color-mix(in srgb, var(--ah-gold) 30%, transparent); font-size: var(--size-xs); min-height: 32px; padding: 6px 11px; }
.ah-room .ah-hero-btn:hover { background: color-mix(in srgb, var(--surface) 75%, transparent); }
.ah-room .ah-membership-tools { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.ah-room .ah-icon-btn { border: 0; background: transparent; color: var(--ah-muted); border-radius: 4px;
  min-width: 28px; min-height: 28px; font-size: var(--size-sm); }
.ah-room .ah-icon-btn:hover { background: var(--ah-soft); color: var(--ah-ink); }
.ah-room .ah-danger:hover { color: var(--ah-red); }
@media (pointer: coarse) {
  .ah-room .ah-icon-btn { min-width: 44px; min-height: 44px; }
}

/* Drop 24: the Sapphire corner's painted hero. The art is 2508 x 627;
   its ring's well, measured from the pixels, is centred at 13.56% /
   45.22% with a clear radius of 186px - so the portrait sits at left
   6.14%, top 15.55%, 14.83% wide. On a wide page the words lie on the
   open sky beside the ring; narrower, they follow beneath on the art's
   own deep blue (#0B2355 to #0A172B, sampled from its edge). */
.ah-room { container-type: inline-size; }
.ah-room .ah-bio { font-size: var(--size-sm); line-height: 1.65; margin: 4px 0 14px; }
.ah-room .ah-hero.has-art { display: block; padding: 0; min-height: 0; background: color-mix(in srgb, var(--hall-sapphire-deep) 20%, var(--ink)); overflow: hidden; }
.ah-room .ah-hero.has-art::before, .ah-room .ah-hero.has-art::after { content: none; }
.ah-room .ah-hero-art { position: relative; width: 100%; aspect-ratio: 2508 / 627;
  background: color-mix(in srgb, var(--hall-sapphire-deep) 20%, var(--ink)) url('/assets/img/corner-hero-sapphire-half.jpg') center / 100% 100% no-repeat;
  background-image: -webkit-image-set(url('/assets/img/corner-hero-sapphire-half.jpg') 1x,
                                      url('/assets/img/corner-hero-sapphire.jpg') 2x);
  background-image: image-set(url('/assets/img/corner-hero-sapphire-half.jpg') 1x,
                              url('/assets/img/corner-hero-sapphire.jpg') 2x); }
.ah-room .ah-hero-art .ah-hero-face.corner-face { position: absolute; left: 6.14%; top: 15.55%; width: 14.83%;
  height: auto; min-width: 0; aspect-ratio: 1; border: 0; outline: 0; background: color-mix(in srgb, var(--hall-sapphire-deep) 36%, var(--ink));
  color: color-mix(in srgb, var(--gold) 50%, var(--blossom)); font-size: clamp(1.4rem, 4.5cqw, 3.2rem); }
.ah-room .ah-hero.has-art .ah-hero-words { padding: 18px 24px 22px; color: color-mix(in srgb, var(--hall-sapphire) 25%, var(--blossom));
  background: linear-gradient(color-mix(in srgb, var(--hall-sapphire-deep) 45%, var(--ink)), color-mix(in srgb, var(--hall-sapphire-deep) 20%, var(--ink))); }
.ah-room .ah-hero.has-art .ah-hero-native { color: color-mix(in srgb, var(--hall-sapphire) 75%, var(--blossom)); }
.ah-room .ah-hero.has-art p { color: color-mix(in srgb, var(--hall-sapphire) 50%, var(--blossom)); }
.ah-room .ah-hero.has-art .ah-badge { background: color-mix(in srgb, var(--blossom) 13%, transparent); color: color-mix(in srgb, var(--accent-jade) 25%, var(--blossom)); }
.ah-room .ah-hero.has-art .ah-badge[data-kind="active"] { color: color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)); }
.ah-room .ah-hero.has-art .ah-hero-btn { background: color-mix(in srgb, var(--ink) 55%, transparent); color: color-mix(in srgb, var(--hall-sapphire) 25%, var(--blossom));
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 45%, transparent); }
.ah-room .ah-hero.has-art .ah-hero-btn:hover { background: color-mix(in srgb, var(--ink) 80%, transparent); }
@container (min-width: 1040px) {
  .ah-room .ah-hero.has-art { position: relative; }
  .ah-room .ah-hero.has-art .ah-hero-words { position: absolute; left: 25.5%; right: 36%; top: 11%; bottom: 9%;
    padding: 0; background: none; display: flex; flex-direction: column; justify-content: center;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 85%, transparent); }
  .ah-room .ah-hero.has-art h1 { font-size: var(--size-3xl); margin-bottom: 4px; }
  .ah-room .ah-hero.has-art p { margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .ah-room .ah-hero.has-art .ah-hero-badges { margin-top: 10px; }
  .ah-room .ah-hero.has-art .ah-hero-actions { margin-top: 12px; }
}

/* Drop 24b: the family strip, rebalanced - the group a compact column,
   the units given the middle (well over two thirds) as tiles with
   48px faces, and the member finder kept small at the right. */
.ah-room .ah-family { display: grid; grid-template-columns: auto minmax(0, 1fr) 11rem;
  align-items: center; gap: 16px; padding: 12px 16px; }
.ah-room .ah-family-root { flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px;
  font: var(--size-sm)/1.2 var(--font-serif); text-align: center; }
.ah-room .ah-family-root .ah-family-face.corner-face { width: 56px; height: 56px; min-width: 56px; }
.ah-room .ah-family-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px; flex: none; }
.ah-room .ah-family-unit { flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 7px;
  border-radius: 12px; font-size: var(--size-xs); text-align: center; }
.ah-room .ah-family-unit .ah-family-face.corner-face { width: 48px; height: 48px; min-width: 48px; font-size: var(--size-xl); }
.ah-room .ah-family-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ah-room .ah-jump { width: 100%; min-width: 0; }
/* The palace dresses every select as its own picker; that is what
   stands in the strip's third column, and on a phone its own row. */
.ah-room .ah-family > .picker { width: 100%; min-width: 0; }
@container (max-width: 700px) {
  .ah-room .ah-family { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ah-room .ah-family-root { flex-direction: row; justify-self: start; gap: 10px; font-size: var(--size-md); }
  .ah-room .ah-family-root .ah-family-face.corner-face { width: 40px; height: 40px; min-width: 40px; }
  .ah-room .ah-family-units { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* Drop 25: the items database, adapted from the brought layout -
   standing tabs with counts, filters, select mode, and a card for every
   edition in its square frame. Prefixed db-. The picture is pinned
   inside its frame, whatever its shape. */
.db-room {
  --db-panel: var(--surface);
  --db-soft: color-mix(in srgb, var(--blossom) 7%, var(--surface));
  --db-ink: var(--blossom);
  --db-muted: var(--mist);
  --db-line: var(--border);
  --db-jade: var(--accent-jade);
  --db-jade-soft: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  --db-gold: var(--gold);
  --db-gold-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --db-lilac: color-mix(in srgb, var(--blossom) 70%, var(--ink));
  --db-lilac-soft: color-mix(in srgb, color-mix(in srgb, var(--blossom) 70%, var(--ink)) 16%, var(--surface));
  --db-red-soft: color-mix(in srgb, var(--accent-lacquer) 16%, var(--surface));
  --db-hall: color-mix(in srgb, var(--gold) 25%, var(--blossom));
  color: var(--db-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.db-room[data-board="sapphire"] { --db-hall: var(--hall-sapphire); }
.db-room[data-board="bl"] { --db-hall: var(--hall-bl); }
.db-room * { box-sizing: border-box; }
.db-room h2, .db-room h3, .db-room p { margin: 0; }
.db-room button { font: inherit; color: inherit; cursor: pointer; }
.db-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.db-room .db-small { font-size: var(--size-2xs); color: var(--db-muted); }
.db-room .db-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.db-room .db-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--db-line); border-radius: 6px; padding: 8px 12px; min-height: 36px;
  background: var(--db-panel); font-size: var(--size-xs); color: var(--db-ink); }
.db-room .db-button:hover { background: var(--db-soft); }
.db-room .db-primary { background: var(--db-jade); border-color: var(--db-jade); color: var(--ink); }
.db-room .db-primary:hover { background: var(--db-jade); filter: brightness(1.06); }
.db-room .db-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
  padding: 4px 6px; min-height: 29px; font-size: var(--size-xs); color: var(--db-jade); border-radius: 4px; }
.db-room .db-quiet:hover { background: var(--db-soft); }
.db-room .db-heading { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.db-room .db-editor { background: var(--db-panel); border: 1px solid var(--db-line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px; }
.db-room .db-editor-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.db-room .db-editor-head h2 { font: var(--size-xl) var(--font-serif); }
.db-room .db-editor-head p { font-size: var(--size-xs); color: var(--db-muted); margin-top: 4px; }
.db-room .db-type-list { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.db-room .db-type-tag { padding: 4px 9px; border-radius: 5px; background: var(--db-soft); font-size: var(--size-xs); }
.db-room .db-type-tag.is-empty { color: var(--db-muted); }
.db-room .db-tabs { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--db-line); margin-bottom: 16px; }
.db-room .db-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 0 0 12px; border: 0;
  border-bottom: 2px solid transparent; background: transparent; color: var(--db-muted); font-size: var(--size-sm); }
.db-room .db-tabs button[aria-selected="true"] { color: var(--db-jade); border-bottom-color: var(--db-jade); }
.db-room .db-count { padding: 1px 6px; border-radius: 4px; background: var(--db-soft); color: var(--db-muted);
  font-size: var(--size-2xs); font-variant-numeric: tabular-nums; }
.db-room .db-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.db-room .db-control { display: flex; flex-direction: column; gap: 5px; min-width: 140px; flex: 1; font-size: var(--size-2xs); color: var(--db-muted); }
.db-room .db-search-control { flex: 2.2; min-width: 220px; }
.db-room .db-control input, .db-room .db-control select { width: 100%; min-width: 0; min-height: 37px; font-size: var(--size-xs); }
.db-room .db-results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.db-room .db-results-label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--size-2xs); color: var(--db-muted); }
.db-room .db-results-label strong { font-size: var(--size-sm); color: var(--db-ink); font-weight: 500; }
.db-room .db-bulk { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--db-soft); border-radius: 8px; margin-bottom: 18px; font-size: var(--size-xs); }
.db-room .db-bulk-select { display: flex; align-items: center; gap: 7px; font-size: var(--size-xs); }
.db-room .db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 26px 18px; align-items: start; }
.db-room .db-item { min-width: 0; position: relative; }
.db-room .db-art { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 11px; background: var(--db-soft); border: 1px solid var(--db-line); }
.db-room .db-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-room .db-item[data-selected="true"] .db-art { box-shadow: 0 0 0 2px var(--db-jade); }
.db-room .db-placeholder { position: absolute; inset: 0; display: grid; place-items: center;
  font: var(--size-2xl) var(--font-cjk); color: var(--db-gold); }
.db-room .db-title { display: block; margin: 9px 0 3px; color: var(--db-ink); font-size: var(--size-md); font-weight: 500;
  line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.db-room .db-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.db-room .db-artist { font-size: var(--size-xs); color: var(--db-hall); overflow-wrap: anywhere; }
.db-room .db-version { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin: 7px 0 10px;
  min-height: 34px; font-size: var(--size-2xs); color: var(--db-muted); }
.db-room .db-version strong { color: var(--db-gold); font-weight: 500; overflow-wrap: anywhere; }
.db-room .db-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 5px;
  border-top: 1px solid var(--db-line); padding-top: 9px; }
.db-room .db-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; font-size: var(--size-2xs);
  border-radius: 4px; background: var(--db-soft); color: var(--db-muted); }
.db-room .db-status[data-status="got"] { background: var(--db-jade-soft); color: var(--db-jade); }
.db-room .db-status[data-status="way"] { background: var(--db-lilac-soft); color: var(--db-lilac); }
.db-room .db-status[data-status="want"] { background: var(--db-gold-soft); color: var(--db-gold); }
.db-room .db-status[data-status="gone"] { background: var(--db-red-soft); color: var(--accent-lacquer); }
.db-room .db-seal { width: 18px; height: 18px; object-fit: contain; }
.db-room .db-card-bottom .db-small { margin-right: auto; }
.db-room .db-date { font-size: var(--size-2xs); color: var(--db-muted); min-height: 17px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.db-room .db-menu { position: relative; }
.db-room .db-menu summary { list-style: none; min-width: 29px; justify-content: center; cursor: pointer; font-size: var(--size-md); line-height: 1; }
.db-room .db-menu summary::-webkit-details-marker { display: none; }
.db-room .db-menu-box { position: absolute; right: 0; top: calc(100% + 4px); width: 11.5rem; background: var(--db-panel);
  border: 1px solid var(--db-line); border-radius: 6px; padding: 6px; z-index: 10; box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 35%, transparent); }
.db-room .db-menu-box button { display: flex; width: 100%; justify-content: flex-start; color: var(--db-ink); }
.db-room .db-check { display: flex; gap: 8px; align-items: center; padding: 0 0 8px; font-size: var(--size-xs); color: var(--db-muted); cursor: pointer; }
.db-room .db-empty { grid-column: 1 / -1; padding: 34px 20px; text-align: center; background: var(--db-panel);
  border: 1px solid var(--db-line); border-radius: 10px; }
.db-room .db-empty h3 { font: var(--size-xl) var(--font-serif); }
.db-room .db-empty p { margin-top: 8px; font-size: var(--size-xs); color: var(--db-muted); }
.db-room .db-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.db-room .db-pagination:empty { display: none; }
@media (max-width: 640px) {
  .db-room .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .db-room .db-control, .db-room .db-search-control { flex-basis: 100%; }
}
@media (pointer: coarse) {
  .db-room button, .db-room .db-menu summary { min-height: 44px; }
  .db-room .db-control input, .db-room .db-control select { font-size: var(--size-md); }
}

/* Drop 25b: the palace's picker (a long select, swapped for a searchable
   field) carries flex: 1 1 10rem for toolbars that run in a row. In a
   control that stacks its label over its field, that basis runs down
   the page instead - the picker stood 10rem tall and pushed the row out
   of line. In every stacked control it takes its natural height. */
.ps-room .ps-field > .picker,
.dg-room .dg-control > .picker,
.wl-room .wl-control > .picker,
.pm-room .pm-control > .picker,
.ah-room .ah-field > .picker,
.db-room .db-control > .picker { flex: 0 0 auto; width: 100%; }
.db-room .db-control > .picker .picker-field,
.pm-room .pm-control > .picker .picker-field,
.dg-room .dg-control > .picker .picker-field,
.wl-room .wl-control > .picker .picker-field { min-height: 37px; font-size: var(--size-xs); }

/* Collected Works, two doors: the note in the BL row saying which half
   lives behind this door, beside the chip that opens the other. */
.work-door-note { font-size: var(--size-xs); color: var(--mist); margin-right: 0.4rem; }

/* Drop 27: the Skull Panda cabinet of Collected Oddities, adapted from
   the brought hub - its dark palette of jade, gold and lavender on the
   palace's surfaces. Prefixed sp-. Every picture is pinned inside its
   own frame. */
.sp-room {
  --sp-paper: var(--surface);
  --sp-ink: var(--blossom);
  --sp-muted: var(--mist);
  --sp-rule: var(--border);
  --sp-jade: var(--accent-jade);
  --sp-soft: color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 13%, var(--surface));
  --sp-gold: var(--gold);
  --sp-gold-soft: color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 16%, var(--surface));
  --sp-purple: color-mix(in srgb, var(--blossom) 85%, var(--ink));
  --sp-purple-soft: color-mix(in srgb, color-mix(in srgb, var(--blossom) 85%, var(--ink)) 15%, var(--surface));
  --sp-track: color-mix(in srgb, var(--blossom) 9%, var(--surface));
  color: var(--sp-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.sp-room * { box-sizing: border-box; }
.sp-room h1, .sp-room h2, .sp-room h3, .sp-room p { margin: 0; }
.sp-room h1 { font: var(--size-2xl)/1.12 var(--font-serif); }
.sp-room h2 { font: var(--size-xl) var(--font-serif); }
.sp-room h3 { font: var(--size-lg)/1.3 var(--font-serif); }
.sp-room a { color: inherit; }
.sp-room button { font: inherit; color: inherit; cursor: pointer; }
.sp-room button:disabled { opacity: 0.45; cursor: not-allowed; }
.sp-room .sp-small { font-size: var(--size-2xs); color: var(--sp-muted); }
.sp-room .sp-muted { color: var(--sp-muted); }
.sp-room .sp-gap { margin-top: 13px; }
.sp-room .sp-glyph { font-family: var(--font-cjk); color: var(--sp-gold); }
.sp-room .sp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-room .sp-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px;
  min-height: 36px; border: 1px solid var(--sp-rule); border-radius: 6px; background: var(--sp-paper);
  font-size: var(--size-xs); color: var(--sp-ink); text-decoration: none; }
.sp-room .sp-button:hover { background: var(--sp-soft); }
.sp-room .sp-primary { background: var(--sp-jade); border-color: var(--sp-jade); color: var(--ink); }
.sp-room .sp-primary:hover { background: var(--sp-jade); filter: brightness(1.06); }
.sp-room .sp-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 4px 6px;
  min-height: 29px; font-size: var(--size-xs); color: var(--sp-jade); border-radius: 4px; text-decoration: none; }
.sp-room .sp-quiet:hover { background: var(--sp-soft); }
.sp-room .sp-back { margin-bottom: 4px; }
.sp-room .sp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--size-2xs); line-height: 1.4; padding: 4px 7px;
  border-radius: 5px; background: var(--sp-track); color: var(--sp-muted); }
.sp-room .sp-badge[data-tone="jade"] { background: var(--sp-soft); color: var(--sp-jade); }
.sp-room .sp-badge[data-tone="gold"] { background: var(--sp-gold-soft); color: var(--sp-gold); }
.sp-room .sp-badge[data-tone="purple"] { background: var(--sp-purple-soft); color: var(--sp-purple); }
.sp-room .sp-seal { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 6px; background: var(--sp-gold-soft);
  color: var(--sp-gold); font-family: var(--font-cjk); }
.sp-room .sp-tabs { display: flex; gap: 26px; flex-wrap: wrap; border-bottom: 1px solid var(--sp-rule); margin-bottom: 20px; }
.sp-room .sp-tabs button { display: flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent;
  padding: 0 1px 12px; background: transparent; color: var(--sp-muted); font-size: var(--size-sm); }
.sp-room .sp-tabs button[aria-selected="true"] { border-bottom-color: var(--sp-jade); color: var(--sp-jade); }
.sp-room .sp-count { padding: 1px 6px; border-radius: 4px; background: var(--sp-track); font-size: var(--size-2xs); }
/* the dashboard */
.sp-room .sp-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--sp-rule); border-radius: 10px;
  overflow: hidden; background: var(--sp-paper); margin-bottom: 16px; }
.sp-room .sp-hero-copy { padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sp-room .sp-hero-copy h1 { font-size: var(--size-3xl); margin-top: 8px; }
.sp-room .sp-hero-copy p.sp-muted { margin: 13px 0 20px; max-width: 360px; font-size: var(--size-sm); }
.sp-room .sp-hero-art { position: relative; min-height: 280px; background: var(--sp-soft); }
.sp-room .sp-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
.sp-room .sp-hero-label { position: absolute; bottom: 13px; left: 13px; right: 13px; display: flex; justify-content: space-between;
  align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--sp-paper) 88%, transparent); }
.sp-room .sp-hero-label strong { display: block; font: var(--size-lg) var(--font-serif); }
.sp-room .sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sp-room .sp-stat { padding: 16px; background: var(--sp-paper); border: 1px solid var(--sp-rule); border-radius: 8px; }
.sp-room .sp-stat-label { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: var(--size-2xs); color: var(--sp-muted); }
.sp-room .sp-stat-value { font: var(--size-2xl)/1.25 var(--font-serif); margin: 7px 0 3px; }
.sp-room .sp-columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-room .sp-panel { background: var(--sp-paper); border: 1px solid var(--sp-rule); border-radius: 9px; padding: 20px; margin-bottom: 16px; min-width: 0; }
.sp-room .sp-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-room .sp-goal { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--sp-rule); }
.sp-room .sp-goal:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-room .sp-goal:nth-child(2) { padding-top: 0; }
.sp-room .sp-goal-art { position: relative; display: block; width: 54px; height: 60px; border-radius: 5px; overflow: hidden; background: var(--sp-soft); }
.sp-room .sp-goal-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-room .sp-goal-name { font-size: var(--size-sm); font-weight: 500; text-decoration: none; }
.sp-room .sp-goal-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-room .sp-goal-percent { font: var(--size-xl) var(--font-serif); color: var(--sp-jade); text-align: right; }
.sp-room .sp-progress { display: flex; height: 5px; gap: 2px; background: var(--sp-track); border-radius: 5px; overflow: hidden; margin: 7px 0 5px; }
.sp-room .sp-progress span { background: var(--sp-jade); height: 100%; }
.sp-room .sp-progress span + span { background: var(--sp-purple); }
.sp-room .sp-donut-wrap { display: flex; justify-content: center; padding: 6px 0 13px; }
.sp-room .sp-donut { width: 164px; height: 164px; border-radius: 50%; display: grid; place-items: center; }
.sp-room .sp-donut-centre { width: 132px; height: 132px; border-radius: 50%; background: var(--sp-paper); display: flex;
  align-items: center; justify-content: center; flex-direction: column; }
.sp-room .sp-donut-centre strong { font: var(--size-2xl) var(--font-serif); font-weight: 400; }
.sp-room .sp-donut-centre strong span { font-size: var(--size-lg); }
.sp-room .sp-legend { display: flex; justify-content: space-between; gap: 9px; flex-wrap: wrap; font-size: var(--size-xs); }
.sp-room .sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-track); margin-right: 6px; }
.sp-room .sp-dot[data-tone="jade"] { background: var(--sp-jade); }
.sp-room .sp-dot[data-tone="purple"] { background: var(--sp-purple); }
.sp-room .sp-incoming { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--sp-rule); }
.sp-room .sp-incoming:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-room .sp-incoming img { width: 43px; height: 43px; object-fit: cover; border-radius: 5px; }
.sp-room .sp-incoming strong { display: block; font-size: var(--size-sm); font-weight: 500; }
.sp-room .sp-latest { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 14px; align-items: center; }
.sp-room .sp-latest > img, .sp-room .sp-latest > .sp-archive-art { width: 95px; height: 114px; object-fit: cover; border-radius: 6px; }
.sp-room .sp-latest h3 { margin: 4px 0 6px; }
/* the library and the checklist */
.sp-room .sp-page-title { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 18px; }
.sp-room .sp-page-title p.sp-muted { font-size: var(--size-sm); margin-top: 8px; max-width: 560px; }
.sp-room .sp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.sp-room .sp-search { display: flex; align-items: center; min-width: 0; }
.sp-room .sp-search input { width: 15rem; max-width: 100%; min-height: 36px; font-size: var(--size-xs); }
.sp-room .sp-sort { display: flex; align-items: center; gap: 7px; font-size: var(--size-xs); color: var(--sp-muted); }
.sp-room .sp-sort select { min-height: 36px; font-size: var(--size-xs); }
.sp-room .sp-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.sp-room .sp-pills button { border: 1px solid var(--sp-rule); border-radius: 5px; padding: 6px 10px; min-height: 32px; font-size: var(--size-xs);
  background: var(--sp-paper); color: var(--sp-muted); }
.sp-room .sp-pills button[aria-pressed="true"] { background: var(--sp-soft); border-color: var(--sp-jade); color: var(--sp-jade); }
.sp-room .sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.sp-room .sp-series { min-width: 0; display: flex; flex-direction: column; background: var(--sp-paper); border: 1px solid var(--sp-rule);
  border-radius: 8px; overflow: hidden; }
.sp-room .sp-series-image { position: relative; display: block; background: var(--sp-soft); height: 190px; }
.sp-room .sp-series-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-room .sp-series-image > .sp-badge { position: absolute; top: 10px; left: 10px; background: var(--sp-paper); }
.sp-room .sp-series-copy { display: flex; flex-direction: column; gap: 8px; padding: 15px; flex: 1; }
.sp-room .sp-series-name { font: var(--size-lg)/1.3 var(--font-serif); text-decoration: none; min-height: 46px; overflow-wrap: anywhere; }
.sp-room .sp-series-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-room .sp-series-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.sp-room .sp-archive-art { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;
  gap: 12px; padding: 20px; background: var(--sp-gold-soft); color: var(--sp-gold); }
.sp-room .sp-archive-art strong { font: var(--size-xl)/1.1 var(--font-serif); max-width: 220px; }
.sp-room .sp-archive-art span { font-size: var(--size-3xs); letter-spacing: 1.5px; }
.sp-room .sp-detail-banner { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 24px; padding: 22px; border: 1px solid var(--sp-rule);
  border-radius: 9px; background: var(--sp-paper); margin: 12px 0 16px; }
.sp-room .sp-detail-art { position: relative; border-radius: 6px; overflow: hidden; background: var(--sp-soft); min-height: 230px; }
.sp-room .sp-detail-art > img, .sp-room .sp-detail-art > .sp-archive-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-room .sp-detail-copy { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; min-width: 0; }
.sp-room .sp-detail-copy h1 { margin: 9px 0 6px; }
.sp-room .sp-detail-copy > .sp-actions { margin-top: 8px; }
.sp-room .sp-detail-copy > .sp-actions:last-child { margin-top: 16px; }
.sp-room .sp-detail-summary { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 15px; }
.sp-room .sp-detail-summary strong { font: var(--size-xl) var(--font-serif); display: block; margin-bottom: 2px; font-weight: 400; }
.sp-room .sp-detail-summary span { font-size: var(--size-2xs); color: var(--sp-muted); }
.sp-room .sp-detail-progress { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 17px; background: var(--sp-paper);
  border: 1px solid var(--sp-rule); border-radius: 7px; margin-bottom: 4px; }
.sp-room .sp-detail-progress > div { flex: 1; min-width: 160px; }
.sp-room .sp-check { display: flex; align-items: center; gap: 7px; font-size: var(--size-xs); color: var(--sp-muted); cursor: pointer; }
.sp-room .sp-check input { width: 16px; height: 16px; accent-color: var(--sp-jade); margin: 0; }
.sp-room .sp-notice { padding: 10px 13px; border-radius: 6px; background: var(--sp-soft); color: var(--sp-jade); font-size: var(--size-xs); }
.sp-room .sp-piece-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.sp-room .sp-piece { border: 1px solid var(--sp-rule); border-radius: 8px; overflow: hidden; background: var(--sp-paper); min-width: 0; }
.sp-room .sp-piece-picture { position: relative; background: var(--sp-soft); aspect-ratio: 1; }
.sp-room .sp-piece-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-room .sp-piece-picture > .sp-badge { position: absolute; left: 8px; top: 8px; }
.sp-room .sp-piece-copy { padding: 12px; }
.sp-room .sp-piece-copy h3 { font: 500 var(--size-sm)/1.4 var(--font-sans); min-height: 36px; overflow-wrap: anywhere; }
.sp-room .sp-piece-series { display: block; font-size: var(--size-2xs); color: var(--sp-muted); margin: 2px 0 6px; text-decoration: none; }
.sp-room .sp-piece-state { display: flex; gap: 4px; flex-wrap: wrap; min-height: 26px; margin: 7px 0 10px; }
.sp-room .sp-piece-buttons { display: flex; gap: 5px; flex-wrap: wrap; }
.sp-room .sp-piece-buttons .sp-button { font-size: var(--size-2xs); padding: 6px 7px; min-height: 31px; flex: 1; white-space: nowrap; }
.sp-room .sp-piece-bottom { display: flex; justify-content: space-between; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.sp-room .sp-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 15px; text-align: center; gap: 8px; color: var(--sp-muted); }
.sp-room .sp-placeholder strong { font: var(--size-2xl) var(--font-serif); color: var(--sp-gold); }
.sp-room .sp-source-box { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sp-room .sp-source-box h3 { margin: 6px 0 10px; }
.sp-room .sp-source-box p { font-size: var(--size-xs); color: var(--sp-muted); margin-bottom: 12px; }
.sp-room .sp-fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sp-rule); font-size: var(--size-xs); }
.sp-room .sp-fact span { color: var(--sp-muted); }
.sp-room .sp-fact strong { font-weight: 500; text-align: right; }
.sp-room .sp-empty { padding: 30px 20px; background: var(--sp-paper); border: 1px solid var(--sp-rule); border-radius: 8px; text-align: center;
  color: var(--sp-muted); grid-column: 1 / -1; font-size: var(--size-sm); }
.sp-room .sp-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.sp-room .sp-pagination:empty { display: none; }
@media (max-width: 1000px) {
  .sp-room .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-room .sp-piece-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-room .sp-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sp-room .sp-hero, .sp-room .sp-detail-banner, .sp-room .sp-source-box { grid-template-columns: 1fr; }
  .sp-room .sp-hero-art { min-height: 220px; }
  .sp-room .sp-stats, .sp-room .sp-piece-grid, .sp-room .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-room h1, .sp-room .sp-hero-copy h1 { font-size: var(--size-2xl); }
}
@media (pointer: coarse) {
  .sp-room button, .sp-room .sp-button, .sp-room .sp-quiet { min-height: 44px; }
  .sp-room .sp-search input, .sp-room .sp-sort select { font-size: var(--size-md); }
}

/* Drop 28: Collected Works, face-lifted after the brought design - one
   look behind both doors, BL and Golden Shadows. Its dark jade, gold and
   lavender on palace surfaces; the BL door warms to lavender, the Golden
   Shadows door to gold. Prefixed cw-. Every picture is pinned inside its
   own frame. */
.cw-room {
  --cw-panel: var(--surface);
  --cw-soft: color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 11%, var(--surface));
  --cw-ink: var(--blossom);
  --cw-muted: var(--mist);
  --cw-line: var(--border);
  --cw-jade: var(--accent-jade);
  --cw-gold: var(--gold);
  --cw-gold-soft: color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 16%, var(--surface));
  --cw-purple: color-mix(in srgb, var(--blossom) 80%, var(--ink));
  --cw-purple-soft: color-mix(in srgb, color-mix(in srgb, var(--blossom) 80%, var(--ink)) 15%, var(--surface));
  --cw-red: color-mix(in srgb, var(--accent-lacquer) 25%, var(--blossom));
  --cw-hall: var(--cw-gold);
  color: var(--cw-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.cw-room[data-hall="bl"] { --cw-hall: var(--cw-purple); }
.cw-room * { box-sizing: border-box; }
.cw-room h1, .cw-room h2, .cw-room h3, .cw-room p { margin: 0; }
.cw-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.cw-room h2 { font: var(--size-xl) var(--font-serif); }
.cw-room h3 { font: var(--size-lg) var(--font-serif); }
.cw-room button { font: inherit; color: inherit; cursor: pointer; }
.cw-room .cw-small { font-size: var(--size-xs); color: var(--cw-muted); }
.cw-room .cw-muted { color: var(--cw-muted); }
.cw-room .cw-cjk { font-size: var(--size-xl); color: var(--cw-hall); margin-left: 10px; }
.cw-room .cw-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.cw-room .cw-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; min-height: 37px;
  border: 1px solid var(--cw-line); border-radius: 6px; background: var(--cw-panel); font-size: var(--size-xs); color: var(--cw-ink); }
.cw-room .cw-button:hover { background: var(--cw-soft); }
.cw-room .cw-primary { background: var(--cw-jade); border-color: var(--cw-jade); color: var(--ink); }
.cw-room .cw-primary:hover { background: var(--cw-jade); filter: brightness(1.05); }
.cw-room .cw-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 4px 6px;
  min-height: 29px; font-size: var(--size-xs); color: var(--cw-jade); border-radius: 4px; }
.cw-room .cw-quiet:hover { background: var(--cw-soft); }
.cw-room .cw-danger { color: var(--cw-red); }
.cw-room .cw-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 4px; background: var(--cw-soft);
  color: var(--cw-muted); font-size: var(--size-2xs); }
.cw-room .cw-badge[data-tone="gold"] { background: var(--cw-gold-soft); color: var(--cw-gold); }
.cw-room .cw-badge[data-tone="purple"] { background: var(--cw-purple-soft); color: var(--cw-purple); }
.cw-room .cw-badge[data-tone="jade"] { color: var(--cw-jade); }
/* the list */
.cw-room .cw-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.cw-room .cw-heading .cw-muted { font-size: var(--size-sm); margin-top: 8px; }
.cw-room .cw-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cw-room .cw-control { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 150px; font-size: var(--size-2xs); color: var(--cw-muted); }
.cw-room .cw-search-control { flex: 2.2; min-width: 220px; }
.cw-room .cw-control input, .cw-room .cw-control select { width: 100%; min-width: 0; min-height: 37px; font-size: var(--size-xs); }
.cw-room .cw-control > .picker { flex: 0 0 auto; width: 100%; }
.cw-room .cw-filter-block { margin-bottom: 18px; }
.cw-room .cw-filter-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cw-room .cw-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cw-room .cw-chips button { display: inline-flex; align-items: center; min-height: 31px; padding: 6px 10px; border: 1px solid var(--cw-line);
  border-radius: 5px; background: var(--cw-panel); color: var(--cw-muted); font-size: var(--size-xs); }
.cw-room .cw-chips button[aria-pressed="true"] { background: var(--cw-soft); color: var(--cw-jade); border-color: var(--cw-jade); }
.cw-room .cw-chips-quiet button { min-height: 27px; padding: 3px 8px; font-size: var(--size-2xs); }
.cw-room .cw-inbox { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-left: 2px solid var(--cw-gold); padding: 11px 14px; background: var(--cw-gold-soft); margin-bottom: 22px; border-radius: 0 6px 6px 0; }
.cw-room .cw-inbox strong { font-weight: 500; }
.cw-room .cw-inbox .cw-small { margin-top: 3px; }
.cw-room .cw-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.cw-room .cw-collection { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--cw-line); border-radius: 9px;
  overflow: hidden; background: var(--cw-panel); }
.cw-room .cw-cover { display: block; padding: 0; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; background: var(--cw-soft); }
.cw-room .cw-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-cover img.is-borrowed { filter: blur(3px) saturate(1.1); transform: scale(1.08); }
.cw-room .cw-fav { position: absolute; top: 9px; right: 10px; color: var(--cw-red); font-size: var(--size-md); text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 70%, transparent); }
.cw-room .cw-cover-word { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 15px; background: radial-gradient(ellipse at 50% 130%, var(--cw-gold-soft), transparent 65%), var(--cw-soft); color: var(--cw-gold); }
.cw-room .cw-cover-word > span { font-size: 52px; line-height: 1; }
.cw-room .cw-cover-word strong { font: 17px/1.2 var(--font-serif); letter-spacing: 1px; text-align: center; color: var(--cw-ink); }
.cw-room .cw-collection-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.cw-room .cw-collection-title { display: block; margin: 9px 0 6px; padding: 0; border: 0; background: transparent; text-align: left;
  font: var(--size-xl)/1.22 var(--font-serif); color: var(--cw-ink); overflow-wrap: anywhere; }
.cw-room .cw-collection-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cw-room .cw-collection-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cw-line); display: flex;
  justify-content: space-between; align-items: center; gap: 8px; font-size: var(--size-xs); color: var(--cw-muted); }
.cw-room .cw-empty { grid-column: 1 / -1; padding: 34px 20px; text-align: center; background: var(--cw-panel); border: 1px solid var(--cw-line); border-radius: 9px; }
.cw-room .cw-empty p { margin: 8px auto 14px; max-width: 460px; font-size: var(--size-sm); color: var(--cw-muted); }
/* one work */
.cw-room .cw-back { margin-bottom: 14px; }
.cw-room .cw-hero { display: grid; grid-template-columns: 1.05fr 1fr; border: 1px solid var(--cw-line); border-radius: 9px; overflow: hidden;
  background: var(--cw-panel); margin-bottom: 16px; }
.cw-room .cw-hero-art { position: relative; min-width: 0; min-height: 280px; background: var(--cw-soft); }
.cw-room .cw-hero-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-hero-art .cw-cover-word > span { font-size: 86px; }
.cw-room .cw-art-button { position: absolute; left: 12px; bottom: 12px; border: 1px solid var(--cw-line); border-radius: 6px; padding: 6px 11px;
  font-size: var(--size-xs); background: color-mix(in srgb, var(--cw-panel) 82%, transparent); color: var(--cw-ink); }
.cw-room .cw-hero-copy { padding: 24px; min-width: 0; }
.cw-room .cw-hero-copy h1 { margin: 12px 0 6px; overflow-wrap: anywhere; }
.cw-room .cw-original { color: var(--cw-hall); font-size: var(--size-sm); margin-bottom: 4px; }
.cw-room .cw-master { font-size: var(--size-xs); color: var(--cw-gold); margin-top: 6px; }
.cw-room .cw-about { font-size: var(--size-sm); margin-top: 10px; line-height: 1.6; }
.cw-room .cw-hero-counts { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 16px; padding-top: 14px; border-top: 1px solid var(--cw-line); }
.cw-room .cw-hero-counts span { font-size: var(--size-xs); color: var(--cw-muted); }
.cw-room .cw-hero-counts strong { font-size: var(--size-lg); color: var(--cw-ink); margin-right: 3px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cw-room .cw-journey { display: flex; justify-content: space-between; align-items: center; gap: 13px; flex-wrap: wrap; padding: 6px 0 18px;
  font-size: var(--size-xs); color: var(--cw-muted); }
.cw-room .cw-journey strong { color: var(--cw-ink); font-weight: 500; }
.cw-room .cw-tabs { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; border-bottom: 1px solid var(--cw-line); margin-bottom: 18px; }
.cw-room .cw-tabs button { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--cw-muted); font-size: var(--size-sm); }
.cw-room .cw-tabs button[aria-selected="true"] { border-bottom-color: var(--cw-jade); color: var(--cw-jade); }
.cw-room .cw-panel { background: var(--cw-panel); border: 1px solid var(--cw-line); border-radius: 9px; padding: 20px; margin-bottom: 16px; min-width: 0; }
.cw-room .cw-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cw-room .cw-panel-head .cw-small { margin-top: 4px; }
.cw-room .cw-media-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 170px; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--cw-line); }
.cw-room .cw-media-row:first-of-type { border-top: 1px solid var(--cw-line); }
.cw-room .cw-mini-cover { position: relative; width: 52px; height: 70px; border-radius: 5px; overflow: hidden; background: var(--cw-soft);
  display: grid; place-items: center; color: var(--cw-gold); font-size: 22px; }
.cw-room .cw-mini-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-media-title { font-size: var(--size-md); font-weight: 500; overflow-wrap: anywhere; }
.cw-room .cw-media-meta { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; font-size: var(--size-xs); color: var(--cw-muted); margin-top: 4px; }
.cw-room .cw-row-titles { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.cw-room .cw-row-title { position: relative; width: 28px; height: 40px; border-radius: 3px; overflow: hidden; background: var(--cw-soft);
  display: grid; place-items: center; font-size: var(--size-3xs); color: var(--cw-muted); text-decoration: none; }
.cw-room .cw-row-title img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-media-state { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--size-xs); color: var(--cw-muted); }
.cw-room .cw-progress { width: 100%; height: 5px; border-radius: 5px; background: var(--cw-soft); overflow: hidden; }
.cw-room .cw-progress span { display: block; height: 100%; background: var(--cw-jade); }
.cw-room .cw-subhead { margin: 20px 0 4px; }
.cw-room .cw-unplaced { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.cw-room .cw-unplaced-title { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px dashed var(--cw-line); border-radius: 7px; }
.cw-room .cw-unplaced-title img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.cw-room .cw-unplaced-name { font-size: var(--size-sm); font-weight: 500; }
.cw-room .cw-unplaced-title select { font-size: var(--size-xs); min-height: 32px; }
.cw-room .cw-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.cw-room .cw-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; text-decoration: none;
  padding: 10px 6px; border-radius: 8px; }
.cw-room .cw-person:hover { background: var(--cw-soft); }
.cw-room .cw-person-face { position: relative; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--cw-soft);
  display: grid; place-items: center; font-size: var(--size-xl); color: var(--cw-gold); border: 1px solid var(--cw-line); }
.cw-room .cw-person.is-ranked .cw-person-face { border-color: var(--cw-gold); }
.cw-room .cw-person-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-person-name { font-size: var(--size-sm); font-weight: 500; }
.cw-room .cw-notes { font-size: var(--size-sm); line-height: 1.7; white-space: pre-wrap; }
.cw-room .cw-updated { margin-top: 14px; }
@media (max-width: 1000px) {
  .cw-room .cw-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-room .cw-hero { grid-template-columns: 1fr; }
  .cw-room .cw-hero-art { min-height: 220px; }
}
@media (max-width: 640px) {
  .cw-room .cw-index-grid { grid-template-columns: 1fr; }
  .cw-room .cw-media-row { grid-template-columns: 44px minmax(0, 1fr); }
  .cw-room .cw-media-state { grid-column: 1 / -1; align-items: flex-start; }
  .cw-room .cw-control, .cw-room .cw-search-control { flex-basis: 100%; }
}
@media (pointer: coarse) {
  .cw-room button, .cw-room .cw-button { min-height: 44px; }
  .cw-room .cw-control input, .cw-room .cw-control select { font-size: var(--size-md); }
}

/* Drop 29: the Skull Panda board of Collected Oddities. The art is 1254
   square; its blank well runs 291-963 across and 350-982 down, and each
   corner's star-and-scroll filigree sweeps some 86-90px into it. The
   photo sits 56px inside the blank on every side, clear of all four
   filigree corners. Accents take the art's own mint (#B9CC9A) and deep
   jade (#3F4A2E), sampled from its ribbons. */
.curio-frame.is-oddities {
  background-image: url('/assets/img/curio-frame-oddities.webp'); }
.curio-frame.is-oddities .curio-frame-well { inset: 32.38% 27.59% 26.08% 27.67%; }
.ci-room[data-board="oddities"] { --ci-hall: var(--hall-oddities); --ci-hall-deep: var(--hall-oddities-deep); }
.db-room[data-board="oddities"] { --db-hall: var(--hall-oddities); }

/* Drop 30: 文苑, the Scholarly & Literary Precinct - Currently Reading and
   the Imperial Library. Palace surfaces; the wing's own accent is jade,
   set by the shell as --accent. Book covers stand in a 2:3 frame and are
   pinned inside it. Prefixed lt-. */
.lt-room {
  --lt-panel: var(--surface);
  --lt-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --lt-line: var(--border);
  --lt-ink: var(--blossom);
  --lt-muted: var(--mist);
  --lt-accent: var(--accent);
  --lt-gold: var(--gold);
  --lt-purple: color-mix(in srgb, var(--blossom) 80%, var(--ink));
  color: var(--lt-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.lt-room * { box-sizing: border-box; }
.lt-room h1, .lt-room h2, .lt-room h3, .lt-room p { margin: 0; }
.lt-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.lt-room h2 { font: var(--size-xl) var(--font-serif); }
.lt-room a { color: inherit; }
.lt-room button { font: inherit; color: inherit; cursor: pointer; }
.lt-room .lt-small { font-size: var(--size-xs); color: var(--lt-muted); }
.lt-room .lt-muted { color: var(--lt-muted); }
.lt-room .lt-cjk { font-size: var(--size-xl); color: var(--lt-accent); margin-left: 10px; }
.lt-room .lt-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.lt-room .lt-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 13px; min-height: 36px;
  border: 1px solid var(--lt-line); border-radius: 6px; background: var(--lt-panel); font-size: var(--size-xs); color: var(--lt-ink); text-decoration: none; }
.lt-room .lt-button:hover { background: var(--lt-soft); }
.lt-room .lt-primary { background: var(--lt-accent); border-color: var(--lt-accent); color: var(--blossom); }
.lt-room .lt-primary:hover { background: var(--lt-accent); filter: brightness(1.08); }
.lt-room .lt-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 4px 6px; min-height: 29px;
  font-size: var(--size-xs); color: var(--lt-accent); border-radius: 4px; text-decoration: none; }
.lt-room .lt-quiet:hover { background: var(--lt-soft); }
.lt-room .lt-danger { color: var(--moon); filter: brightness(1.6); }
.lt-room .lt-icon { border: 0; background: transparent; color: var(--lt-muted); border-radius: 4px; min-width: 28px; min-height: 28px; font-size: var(--size-sm); }
.lt-room .lt-icon:hover { background: var(--lt-soft); color: var(--lt-ink); }
.lt-room .lt-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: var(--size-2xs); background: var(--lt-soft); color: var(--lt-muted); }
.lt-room .lt-badge[data-tone="jade"] { color: var(--lt-accent); }
.lt-room .lt-badge[data-tone="jade-solid"] { background: var(--lt-accent); color: var(--blossom); }
.lt-room .lt-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); color: var(--lt-gold); }
.lt-room .lt-badge[data-tone="purple"] { background: color-mix(in srgb, color-mix(in srgb, var(--blossom) 80%, var(--ink)) 15%, var(--surface)); color: var(--lt-purple); }
.lt-room .lt-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.lt-room .lt-heading .lt-muted { font-size: var(--size-sm); margin-top: 6px; }
.lt-room .lt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.lt-room .lt-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--lt-panel); border: 1px solid var(--lt-line); border-radius: 9px; }
.lt-room .lt-stat-value { font: var(--size-2xl)/1.2 var(--font-serif); font-variant-numeric: tabular-nums; }
.lt-room .lt-stat-label { font-size: var(--size-sm); }
.lt-room .lt-panel { background: var(--lt-panel); border: 1px solid var(--lt-line); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.lt-room .lt-panel > h2 { margin-bottom: 10px; }
.lt-room .lt-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lt-room .lt-cover { position: relative; aspect-ratio: 2 / 3; border-radius: 5px; overflow: hidden; background: var(--lt-soft); border: 1px solid var(--lt-line); }
.lt-room .lt-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-room .lt-cover-word { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; text-align: center; background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), var(--lt-soft); }
.lt-room .lt-cover-word span { font-size: 34px; color: var(--lt-accent); line-height: 1; }
.lt-room .lt-cover-word strong { font: 12px/1.25 var(--font-serif); color: var(--lt-ink); font-weight: 400; overflow-wrap: anywhere; }
.lt-room .lt-progress { height: 5px; border-radius: 5px; background: var(--lt-soft); overflow: hidden; margin: 8px 0 5px; }
.lt-room .lt-progress span { display: block; height: 100%; background: var(--lt-accent); }
/* Currently Reading */
.lt-room .lt-hand { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--lt-line); }
.lt-room .lt-hand-art { display: block; width: 62px; }
.lt-room .lt-title { font: var(--size-lg)/1.3 var(--font-serif); text-decoration: none; }
.lt-room .lt-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.lt-room .lt-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; }
.lt-room .lt-shelf-book { display: flex; flex-direction: column; gap: 5px; text-decoration: none; min-width: 0; }
.lt-room .lt-shelf-title { font-size: var(--size-xs); overflow-wrap: anywhere; }
/* the library */
.lt-room .lt-tabs { display: flex; gap: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--lt-line); margin-bottom: 14px; }
.lt-room .lt-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 0 0 11px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--lt-muted); font-size: var(--size-sm); }
.lt-room .lt-tabs button[aria-selected="true"] { color: var(--lt-accent); border-bottom-color: var(--lt-accent); }
.lt-room .lt-count { padding: 1px 6px; border-radius: 4px; background: var(--lt-soft); font-size: var(--size-2xs); }
.lt-room .lt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.lt-room .lt-toolbar input { flex: 1; min-width: 200px; max-width: 26rem; min-height: 36px; font-size: var(--size-xs); }
.lt-room .lt-toolbar select { min-height: 36px; font-size: var(--size-xs); }
.lt-room .lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.lt-room .lt-book { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-width: 0; }
.lt-room .lt-book:hover .lt-cover { border-color: var(--lt-accent); }
.lt-room .lt-book-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lt-room .lt-book-words strong { font-weight: 500; font-size: var(--size-sm); line-height: 1.3; overflow-wrap: anywhere; }
.lt-room .lt-book-line { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.lt-room .lt-rating { font-size: var(--size-xs); color: var(--lt-gold); }
.lt-room .lt-fav { position: absolute; top: 8px; right: 9px; color: var(--accent-lacquer); text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 70%, transparent); }
.lt-room .lt-empty { grid-column: 1 / -1; padding: 30px 20px; text-align: center; color: var(--lt-muted); background: var(--lt-panel);
  border: 1px solid var(--lt-line); border-radius: 10px; }
/* one title */
.lt-room .lt-back { margin-bottom: 12px; }
.lt-room .lt-hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; padding: 22px; background: var(--lt-panel);
  border: 1px solid var(--lt-line); border-radius: 12px; margin-bottom: 16px; }
.lt-room .lt-hero-cover { width: 200px; }
.lt-room .lt-hero-copy h1 { margin: 12px 0 4px; overflow-wrap: anywhere; }
.lt-room .lt-original { color: var(--lt-accent); font-size: var(--size-sm); }
.lt-room .lt-authors { font: var(--size-md) var(--font-serif); margin: 4px 0; }
.lt-room .lt-standing { min-height: 32px; font-size: var(--size-xs); }
.lt-room .lt-rate { margin-top: 10px; border: 1px solid var(--lt-line); border-radius: 6px; background: transparent; padding: 5px 11px; color: var(--lt-gold); font-size: var(--size-sm); }
.lt-room .lt-hero-progress { margin-top: 12px; max-width: 520px; }
.lt-room .lt-hero-acts { margin-top: 16px; }
.lt-room .lt-ties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lt-room .lt-tie { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.lt-room .lt-columns { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.lt-room .lt-session { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--lt-line); font-size: var(--size-sm); }
.lt-room .lt-session-day { color: var(--lt-muted); font-size: var(--size-xs); font-variant-numeric: tabular-nums; }
.lt-room .lt-about { line-height: 1.7; white-space: pre-wrap; }
.lt-room .lt-subhead { font: var(--size-md) var(--font-serif); margin: 14px 0 6px; }
/* notes and quotes */
.lt-room .lt-note { padding: 12px 14px; border: 1px solid var(--lt-line); border-radius: 8px; background: var(--lt-panel); margin-bottom: 10px; }
.lt-room .lt-note-body { white-space: pre-wrap; line-height: 1.65; }
.lt-room .lt-note.is-quote .lt-note-body { font: italic var(--size-md)/1.6 var(--font-serif); border-left: 2px solid var(--lt-accent); padding-left: 12px; }
.lt-room .lt-note-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lt-room .lt-quotes { column-count: 2; column-gap: 16px; }
.lt-room .lt-quotes .lt-note { break-inside: avoid; }
.lt-room .lt-margins { max-width: 860px; }
/* the lookup */
.lt-modal .lt-find-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lt-modal .lt-find-row input { flex: 1; min-width: 200px; }
.lt-modal .lt-found { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 60vh; overflow: auto; }
.lt-modal .lt-found-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px;
  border: 1px solid var(--border); border-radius: 8px; }
.lt-modal .lt-found-art { position: relative; width: 46px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--surface);
  display: grid; place-items: center; color: var(--accent-jade); }
.lt-modal .lt-found-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-modal .lt-button { padding: 7px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--blossom); }
.lt-modal .lt-primary { background: var(--accent-jade); border-color: var(--accent-jade); }
.lt-modal .lt-badge { font-size: var(--size-2xs); color: var(--mist); }
.lt-modal .lt-small { font-size: var(--size-xs); color: var(--mist); }
/* Collected Works: a work's books */
.cw-room .cw-book-row { text-decoration: none; color: inherit; }
.cw-room .cw-book-row:hover .cw-media-title { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .lt-room .lt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-room .lt-hero, .lt-room .lt-ties, .lt-room .lt-columns { grid-template-columns: 1fr; }
  .lt-room .lt-hero-cover { width: 150px; }
  .lt-room .lt-quotes { column-count: 1; }
}
@media (max-width: 560px) {
  .lt-room .lt-hand { grid-template-columns: 52px minmax(0, 1fr); }
  .lt-room .lt-hand > .lt-button { grid-column: 1 / -1; }
  .lt-room .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
  .lt-room button, .lt-room .lt-button { min-height: 44px; }
  .lt-room input, .lt-room select { font-size: var(--size-md); }
}
/* A small cover shows only its mark: the title sits right beside it. */
.lt-room .lt-hand .lt-cover-word strong { display: none; }
.lt-room .lt-hand .lt-cover-word span { font-size: 24px; }

/* Drop 31: 文苑's Hall of Ten Thousand Scrolls - copies, the hall's own
   Shopping Ledger, and loans. Same palace surfaces and wing jade. */
.lt-room .lt-copy { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--lt-line); }
.lt-room .lt-panel > .lt-copy:first-of-type { border-top: 0; }
.lt-room .lt-panel-head + .lt-copy { border-top: 1px solid var(--lt-line); }
.lt-room .lt-ties .lt-copy { grid-template-columns: minmax(0, 1fr) auto; }
.lt-room .lt-copy-art { display: block; width: 52px; }
.lt-room .lt-copy-title { font-size: var(--size-md); display: inline-block; margin-bottom: 4px; }
.lt-room .lt-paid { margin-top: 3px; }
.lt-room .lt-paid .lt-quiet { padding: 0 4px; min-height: 0; }
.lt-room .lt-loan-note { font-size: var(--size-xs); color: var(--lt-gold); margin-top: 3px; }
.lt-room .lt-copy.is-late .lt-loan-note { color: var(--accent-lacquer); }
.lt-room .lt-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.lt-room .lt-chips button { padding: 5px 10px; min-height: 30px; border: 1px solid var(--lt-line); border-radius: 5px;
  background: var(--lt-panel); color: var(--lt-muted); font-size: var(--size-xs); }
.lt-room .lt-chips button[aria-pressed="true"] { border-color: var(--lt-accent); color: var(--lt-accent); background: var(--lt-soft); }
.lt-room .lt-order-total { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lt-room .lt-order-total strong { font: var(--size-xl) var(--font-serif); font-weight: 400; font-variant-numeric: tabular-nums; }
.lt-room .lt-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--lt-line); }
.lt-room .lt-line-art { width: 40px; }
.lt-room .lt-line-art .lt-cover-word strong { display: none; }
.lt-room .lt-line-art .lt-cover-word span { font-size: 18px; }
.lt-room .lt-copy-art .lt-cover-word strong { display: none; }
.lt-room .lt-copy-art .lt-cover-word span { font-size: 20px; }
.lt-room .lt-line-title { font-size: var(--size-sm); padding: 0; min-height: 0; }
.lt-room .lt-cost { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0 7px 52px;
  border-top: 1px dashed var(--lt-line); font-size: var(--size-xs); color: var(--lt-muted); }
.lt-room .lt-order-acts { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--lt-line); }
@media (max-width: 560px) {
  .lt-room .lt-copy, .lt-room .lt-line { grid-template-columns: 44px minmax(0, 1fr); }
  .lt-room .lt-copy > .lt-actions, .lt-room .lt-line > .lt-actions { grid-column: 1 / -1; }
  .lt-room .lt-cost { padding-left: 0; }
}

/* Drop 32: 文苑's Hall of Illustrated Narratives - the volume shelf,
   adaptation links, edition notes, and the library's kind chips. */
.lt-room .lt-kind-chips { margin: -4px 0 14px; }
.lt-room .lt-volume-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.lt-room .lt-volume { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 2 / 3; border-radius: 6px; border: 1px dashed var(--lt-line); background: transparent; color: var(--lt-muted);
  padding: 4px; min-height: 0; }
.lt-room .lt-volume strong { font: var(--size-xl) var(--font-serif); font-weight: 400; }
.lt-room .lt-volume span { font-size: var(--size-3xs); letter-spacing: 0.3px; }
.lt-room .lt-volume:not(:disabled):hover { border-color: var(--lt-accent); color: var(--lt-accent); }
.lt-room .lt-volume.is-owned { border: 1px solid var(--lt-accent); background: var(--lt-soft); color: var(--lt-ink); cursor: default; }
.lt-room .lt-volume.is-owned span { color: var(--lt-accent); }
.lt-room .lt-volume.is-coming { border: 1px solid var(--lt-gold); color: var(--lt-gold); cursor: default;
  background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.lt-room .lt-volume:disabled { opacity: 1; }
.lt-room .lt-adapt { display: grid; grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.4fr); gap: 16px; align-items: center; }
.lt-room .lt-adapt-series { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; }
.lt-room .lt-adapt-series strong { display: block; font: var(--size-md)/1.3 var(--font-serif); font-weight: 400; }
.lt-room .lt-adapt-arrow { font-size: var(--size-xl); color: var(--lt-accent); }
.lt-room .lt-adapt-work { font-size: var(--size-sm); padding: 0 0 6px; }
.lt-room .lt-adapt-posters { display: flex; gap: 10px; flex-wrap: wrap; }
.lt-room .lt-adapt-poster { display: flex; flex-direction: column; gap: 4px; width: 72px; text-decoration: none; }
.lt-room .lt-adapt-poster img, .lt-room .lt-adapt-poster > .cjk { width: 72px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--lt-line); background: var(--lt-soft); display: grid; place-items: center; color: var(--lt-accent); }
.lt-room .lt-adapt-poster .lt-small { font-size: var(--size-3xs); line-height: 1.25; }
.lt-room .lt-edition-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 8px; }
.lt-room .lt-edition-line { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--lt-line); }
.lt-room .lt-edition-line:first-of-type { margin-top: 6px; }
.lt-room .lt-edition-line strong { font-weight: 500; font-size: var(--size-sm); }
@media (max-width: 760px) {
  .lt-room .lt-adapt { grid-template-columns: 1fr; }
  .lt-room .lt-adapt-arrow { display: none; }
}
.lt-room .lt-volume-sum { color: var(--lt-gold); font-size: var(--size-sm); }
.lt-room .lt-volume.is-owned { cursor: pointer; }
.lt-room .lt-volume.is-owned:hover { filter: brightness(1.15); }

/* Drop 33: 文苑's Pavilion of Transforming Tales - fic cards, a fic's
   relationships, tags and links. */
.lt-room .lt-fic-pairing { color: var(--lt-accent); }
.lt-room .lt-fic-line { font: var(--size-sm) var(--font-serif); color: var(--lt-accent); margin: 6px 0 2px; overflow-wrap: anywhere; }
.lt-room .lt-fic-links { margin: 6px 0 2px; }
.lt-room .lt-fic-links .lt-quiet { padding-left: 0; }
.lt-room .lt-fic-tags { margin-top: 4px; line-height: 1.6; overflow-wrap: anywhere; }
.lt-modal .lt-found-art { font-size: var(--size-xl); }

/* Drop 34: 文苑's Royal Academy - level pips and the ladder, exam date
   tiles, field columns, and the course mark. */
.lt-room .lt-level { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 260px; margin: 6px 0 4px; }
.lt-room .lt-level span { height: 6px; border-radius: 3px; background: var(--lt-soft); border: 1px solid transparent; }
.lt-room .lt-level span.is-on { background: var(--lt-accent); }
.lt-room .lt-level span.is-aim { border-color: color-mix(in srgb, var(--lt-accent) 60%, transparent); }
.lt-room .lt-level-number, .lt-room .lt-course-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font: var(--size-xl) var(--font-serif); background: var(--lt-soft); color: var(--lt-accent); border: 1px solid var(--lt-line); }
.lt-room .lt-course-mark { border-radius: 10px; font-size: var(--size-xl); }
.lt-room .lt-aca-hero h1 { margin: 10px 0 4px; overflow-wrap: anywhere; }
.lt-room .lt-ladder { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 14px 0 6px; }
.lt-room .lt-rung { min-height: 40px; border: 1px solid var(--lt-line); border-radius: 6px; background: var(--lt-panel); color: var(--lt-muted);
  font: var(--size-md) var(--font-serif); padding: 0; }
.lt-room .lt-rung:hover { border-color: var(--lt-accent); color: var(--lt-ink); }
.lt-room .lt-rung.is-on { background: var(--lt-accent); border-color: var(--lt-accent); color: var(--blossom); }
.lt-room .lt-rung.is-target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent); }
.lt-room .lt-exam { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--lt-line); }
.lt-room .lt-panel > h2 + .lt-exam { border-top: 0; }
.lt-room .lt-exam-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; height: 64px;
  border-radius: 8px; border: 1px solid var(--lt-line); background: var(--lt-soft); }
.lt-room .lt-exam-date strong { font: var(--size-xl)/1 var(--font-serif); font-weight: 400; }
.lt-room .lt-exam-date span { font-size: var(--size-3xs); color: var(--lt-muted); }
.lt-room .lt-field-about { margin: -4px 0 12px; }
.lt-room .lt-field-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lt-room .lt-field-cols > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lt-room .lt-field-cols .lt-quiet { padding: 2px 0; min-height: 0; overflow-wrap: anywhere; }
.lt-room .lt-field-col-head { font-size: var(--size-2xs); color: var(--lt-gold); letter-spacing: 0.5px; margin-bottom: 4px; }
.lt-room .lt-quest { padding: 8px 0 10px; }
.lt-room .lt-quest .lt-quiet { padding-left: 0; font-size: var(--size-sm); }
@media (max-width: 760px) {
  .lt-room .lt-field-cols { grid-template-columns: 1fr; }
  .lt-room .lt-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Drop 35: Collected Works - Connections and My order, after the
   brought design. */
.cw-room .cw-table-wrap { overflow-x: auto; }
.cw-room .cw-relations { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.cw-room .cw-relations th { text-align: left; font-weight: 500; font-size: var(--size-2xs); color: var(--cw-muted); padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--cw-line); }
.cw-room .cw-relations td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--cw-line); vertical-align: top; }
.cw-room .cw-relations td:last-child { width: 36px; text-align: right; }
.cw-room .cw-relations td .cw-quiet { padding: 0; min-height: 0; }
.cw-room .cw-order { list-style: none; margin: 0; padding: 0; }
.cw-room .cw-order li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--cw-line); }
.cw-room .cw-order li:first-child { border-top: 0; }
.cw-room .cw-order-number { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cw-soft); color: var(--cw-jade); font: var(--size-sm) var(--font-serif); }
.cw-room .cw-order li.is-done .cw-order-number { background: var(--cw-jade); color: var(--ink); }
.cw-room .cw-order-title { font-size: var(--size-sm); font-weight: 500; color: var(--cw-ink); text-decoration: none; }
a.cw-order-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cw-room .cw-order-controls { display: flex; gap: 2px; }
.cw-room .cw-order-controls .cw-quiet:disabled { opacity: 0.3; cursor: default; }
.cw-room .cw-order-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cw-line); }
.cw-room .cw-order-add select { flex: 1; min-width: 200px; min-height: 37px; font-size: var(--size-xs); }
.cw-room .cw-button:disabled { opacity: 0.45; cursor: default; }

/* Drop 36: the Jade Register 玉牒 - the register sheet, the lineage of
   milestones, the years with their characters, and each year in
   numbers. Palace surfaces; the wing's own accent is jade. Prefixed jr-. */
.jr-room {
  --jr-panel: var(--surface);
  --jr-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --jr-line: var(--border);
  --jr-ink: var(--blossom);
  --jr-muted: var(--mist);
  --jr-accent: var(--accent);
  --jr-gold: var(--gold);
  color: var(--jr-ink);
  font: var(--size-sm)/1.5 var(--font-sans);
  width: 100%;
  min-width: 0;
}
.jr-room * { box-sizing: border-box; }
.jr-room h1, .jr-room h2, .jr-room p { margin: 0; }
.jr-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.jr-room h2 { font: var(--size-xl) var(--font-serif); }
.jr-room a { color: inherit; }
.jr-room button { font: inherit; color: inherit; cursor: pointer; }
.jr-room .jr-muted { color: var(--jr-muted); }
.jr-room .jr-small { font-size: var(--size-xs); color: var(--jr-muted); }
.jr-room .jr-cjk { font-size: var(--size-xl); color: var(--jr-accent); margin-left: 10px; }
.jr-room .jr-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.jr-room .jr-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--jr-line);
  border-radius: 6px; background: var(--jr-panel); font-size: var(--size-xs); color: var(--jr-ink); }
.jr-room .jr-button:hover { background: var(--jr-soft); }
.jr-room .jr-primary { background: var(--jr-accent); border-color: var(--jr-accent); color: var(--blossom); }
.jr-room .jr-quiet { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 4px 6px; min-height: 29px;
  font-size: var(--size-xs); color: var(--jr-accent); border-radius: 4px; text-decoration: none; }
.jr-room .jr-quiet:hover { background: var(--jr-soft); }
.jr-room .jr-quiet:disabled { opacity: 0.4; cursor: default; }
.jr-room .jr-icon { border: 0; background: transparent; color: var(--jr-muted); border-radius: 4px; min-width: 28px; min-height: 28px; }
.jr-room .jr-icon:hover { background: var(--jr-soft); color: var(--jr-ink); }
.jr-room .jr-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: var(--size-2xs); background: var(--jr-soft); color: var(--jr-muted); }
.jr-room .jr-badge[data-tone="jade"] { color: var(--jr-accent); }
.jr-room .jr-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--jr-gold); }
.jr-room .jr-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.jr-room .jr-heading .jr-muted { margin-top: 6px; }
.jr-room .jr-panel { background: var(--jr-panel); border: 1px solid var(--jr-line); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.jr-room .jr-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.jr-room .jr-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.jr-room .jr-stack { display: flex; flex-direction: column; min-width: 0; }
/* the register sheet */
.jr-room .jr-sheet { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 28px 30px;
  margin-bottom: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--jr-accent) 45%, var(--jr-line));
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--jr-accent) 16%, transparent), transparent 60%), var(--jr-panel); }
.jr-room .jr-sheet-seal { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 10px; font-size: var(--size-2xl); letter-spacing: 2px;
  writing-mode: vertical-rl; color: var(--blossom); background: var(--jr-accent); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--blossom) 25%, transparent); }
.jr-room .jr-sheet-kicker { font-size: var(--size-2xs); letter-spacing: 1.5px; text-transform: uppercase; color: var(--jr-accent); }
.jr-room .jr-first-label { font-size: var(--size-xs); margin-top: 6px; }
.jr-room .jr-sheet-name { font: var(--size-3xl)/1.1 var(--font-serif); margin: 4px 0 8px; overflow-wrap: anywhere; }
.jr-room .jr-names { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 10px; }
.jr-room .jr-name { display: flex; flex-direction: column; font-size: var(--size-md); font-family: var(--font-serif); }
.jr-room .jr-name small { font: var(--size-3xs) var(--font-sans); letter-spacing: 0.5px; color: var(--jr-muted); }
.jr-room .jr-born { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 14px; padding-top: 14px; border-top: 1px solid var(--jr-line); }
.jr-room .jr-born-cell { display: flex; flex-direction: column; }
.jr-room .jr-born-cell strong { font: var(--size-lg) var(--font-serif); font-weight: 400; }
.jr-room .jr-born-cell span { font-size: var(--size-2xs); color: var(--jr-muted); }
.jr-room .jr-fact { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--jr-line); }
.jr-room .jr-motto { font: italic var(--size-lg)/1.5 var(--font-serif); color: var(--jr-accent); margin-bottom: 8px; }
.jr-room .jr-about { line-height: 1.7; white-space: pre-wrap; }
.jr-room .jr-favourites { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.jr-room .jr-favourite { position: relative; padding: 10px 12px; border: 1px solid var(--jr-line); border-radius: 8px; }
.jr-room .jr-favourite dt { font-size: var(--size-2xs); color: var(--jr-muted); }
.jr-room .jr-favourite dd { margin: 2px 0 0; font: var(--size-md) var(--font-serif); overflow-wrap: anywhere; }
.jr-room .jr-favourite .jr-icon { position: absolute; top: 4px; right: 4px; min-width: 24px; min-height: 24px; font-size: var(--size-2xs); }
.jr-room .jr-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.jr-room .jr-person { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px;
  border: 1px solid var(--jr-line); border-radius: 8px; }
.jr-room .jr-face { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--jr-soft); color: var(--jr-accent); font-size: var(--size-xl); }
.jr-room .jr-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jr-room .jr-person-name { font-size: var(--size-sm); font-weight: 500; text-decoration: none; }
/* the lineage */
.jr-room .jr-lineage { border-left: 2px solid color-mix(in srgb, var(--jr-accent) 40%, transparent); padding-left: 18px; }
.jr-room .jr-lineage-year { font: var(--size-xl) var(--font-serif); color: var(--jr-accent); margin: 14px 0 6px -18px; padding-left: 18px; position: relative; }
.jr-room .jr-lineage-year:first-child { margin-top: 0; }
.jr-room .jr-milestone { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0;
  border-top: 1px solid var(--jr-line); position: relative; }
.jr-room .jr-milestone::before { content: ''; position: absolute; left: -24px; top: 15px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--jr-accent); }
.jr-room .jr-milestone.is-palace::before { background: var(--jr-gold); }
.jr-room .jr-stack .jr-milestone::before { display: none; }
.jr-room .jr-milestone-day { font-size: var(--size-xs); color: var(--jr-muted); padding-top: 2px; }
.jr-room .jr-milestone strong { font-weight: 500; }
.jr-room .jr-milestone .jr-actions { margin-top: 4px; }
/* the years */
.jr-room .jr-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.jr-room .jr-year-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px;
  border: 1px solid var(--jr-line); border-radius: 10px; background: var(--jr-panel); text-decoration: none; }
.jr-room .jr-year-card:hover { border-color: var(--jr-accent); }
.jr-room .jr-year-char { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 8px; font-size: var(--size-3xl);
  color: var(--jr-accent); background: var(--jr-soft); border: 1px solid color-mix(in srgb, var(--jr-accent) 35%, var(--jr-line)); }
.jr-room .jr-year-char.is-empty { color: var(--jr-muted); opacity: 0.5; }
.jr-room .jr-year-char.is-large { width: 160px; height: 160px; font-size: 104px; }
.jr-room .jr-year-number { font: var(--size-2xl) var(--font-serif); font-weight: 400; }
.jr-room .jr-year-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.jr-room .jr-year-page { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 26px; padding: 24px; margin-bottom: 16px;
  border: 1px solid var(--jr-line); border-radius: 12px; background: var(--jr-panel); }
.jr-room .jr-year-words h1 { font-size: var(--size-3xl); }
.jr-room .jr-year-theme { font: italic var(--size-lg) var(--font-serif); color: var(--jr-accent); margin: 6px 0 12px; }
.jr-room .jr-year-words .jr-about { margin-bottom: 14px; }
.jr-room .jr-best { padding: 10px 14px; border-left: 2px solid var(--jr-gold); margin-bottom: 14px; background: color-mix(in srgb, var(--gold) 7%, transparent); }
.jr-room .jr-best small { font-size: var(--size-2xs); color: var(--jr-gold); }
.jr-room .jr-line { padding: 5px 0; border-top: 1px solid var(--jr-line); }
.jr-room .jr-line .jr-quiet { padding: 0; min-height: 0; }
.jr-room .jr-rating { color: var(--jr-gold); font-size: var(--size-xs); }
.jr-room .jr-to-review { margin-top: 4px; }
/* the review */
.jr-room .jr-chip { padding: 5px 11px; border: 1px solid var(--jr-line); border-radius: 5px; text-decoration: none; font-size: var(--size-xs); color: var(--jr-muted); }
.jr-room .jr-chip[aria-pressed="true"] { border-color: var(--jr-accent); color: var(--jr-accent); background: var(--jr-soft); }
.jr-room .jr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.jr-room .jr-review .jr-stats { margin-bottom: 8px; }
.jr-room .jr-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--jr-line); border-radius: 9px; background: var(--jr-panel); min-width: 0; }
.jr-room .jr-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jr-room .jr-stat span { font-size: var(--size-xs); color: var(--jr-muted); }
.jr-room .jr-delta { font-size: var(--size-2xs); color: var(--jr-accent); }
.jr-room .jr-review-note { font-size: var(--size-xs); color: var(--jr-muted); line-height: 1.7; }
.jr-room .jr-review-note .jr-quiet { padding: 0; min-height: 0; }
@media (max-width: 900px) {
  .jr-room .jr-columns { grid-template-columns: 1fr; }
  .jr-room .jr-stats, .jr-room .jr-born { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .jr-room .jr-sheet, .jr-room .jr-year-page { grid-template-columns: 1fr; }
  .jr-room .jr-year-char.is-large { width: 120px; height: 120px; font-size: 78px; }
  .jr-room .jr-fact { grid-template-columns: 1fr auto; }
  .jr-room .jr-fact > span:first-child { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .jr-room button, .jr-room .jr-button { min-height: 44px; }
}

/* Drop 37: Imperially Decreed 欽定 - the palace's upkeep. Its own rooms
   (prefixed dc-), and the Appearance choices applied to every page. */
html[data-text="larger"] { --text-zoom: 1.1; }
html[data-text="larger"] body { zoom: var(--text-zoom); }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
html[data-banner="compact"] .banner img { height: clamp(5rem, 9vw, 7.5rem); }

.dc-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.dc-room * { box-sizing: border-box; }
.dc-room h1, .dc-room h2, .dc-room p { margin: 0; }
.dc-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.dc-room h2 { font: var(--size-xl) var(--font-serif); margin-bottom: 6px; }
.dc-room .dc-heading { margin-bottom: 18px; }
.dc-room .dc-heading .dc-muted { margin-top: 6px; }
.dc-room .dc-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.dc-room .dc-muted { color: var(--mist); }
.dc-room .dc-sub { font-size: var(--size-xs); margin-bottom: 12px; }
.dc-room .dc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.dc-room .dc-button { display: inline-flex; align-items: center; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--blossom); font: inherit; font-size: var(--size-xs); cursor: pointer; margin-top: 10px; }
.dc-room .dc-button:hover { border-color: var(--accent); }
.dc-room .dc-primary { background: var(--accent); border-color: var(--accent); }
.dc-room .dc-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); }
.dc-room .dc-badge[data-tone="good"] { background: color-mix(in srgb, var(--accent-jade) 18%, transparent); color: var(--accent-jade); }
.dc-room .dc-badge[data-tone="bad"] { background: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 25%, var(--blossom)) 16%, transparent); color: var(--accent-lacquer); }
.dc-room .dc-verdict { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 10px; margin-bottom: 16px;
  border: 1px solid var(--border); border-left-width: 3px; background: var(--surface); }
.dc-room .dc-verdict strong { font: var(--size-lg) var(--font-serif); font-weight: 400; }
.dc-room .dc-verdict span { font-size: var(--size-xs); color: var(--mist); }
.dc-room .dc-verdict[data-tone="good"] { border-left-color: var(--accent-jade); }
.dc-room .dc-verdict[data-tone="warn"] { border-left-color: var(--gold); }
.dc-room .dc-verdict[data-tone="bad"] { border-left-color: color-mix(in srgb, var(--accent-lacquer) 25%, var(--blossom)); }
.dc-room .dc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dc-room .dc-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.dc-room .dc-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; }
.dc-room .dc-stat span { font-size: var(--size-xs); color: var(--mist); }
.dc-room .dc-migrations { display: flex; flex-direction: column; }
.dc-room .dc-migration { display: grid; grid-template-columns: 44px 120px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.dc-room .dc-migration strong { font: var(--size-md) var(--font-serif); font-weight: 400; }
.dc-room .dc-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.dc-room .dc-table { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: var(--size-xs); min-width: 0; }
.dc-room .dc-table-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.dc-room .dc-table.is-missing .dc-table-name { color: var(--accent-lacquer); }
.dc-room .dc-verdict-line { font-size: var(--size-sm); margin: 2px 0 10px; color: var(--accent-jade); }
.dc-room .dc-verdict-line.is-late { color: var(--accent-lacquer); }
.dc-room .dc-jobs { display: flex; flex-direction: column; }
.dc-room .dc-job { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.dc-room .dc-job > div:nth-child(2) { display: flex; flex-direction: column; }
.dc-room .dc-job-when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.dc-room .dc-settings { display: flex; gap: 24px; flex-wrap: wrap; }
.dc-room .dc-number { display: flex; flex-direction: column; gap: 5px; }
.dc-room .dc-number input { width: 110px; min-height: 36px; }
.dc-room .dc-choice { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dc-room .dc-choice-label { font-size: var(--size-xs); color: var(--mist); }
.dc-room .dc-segments { display: flex; flex-wrap: wrap; gap: 0; }
.dc-room .dc-segment { padding: 8px 14px; min-height: 36px; border: 1px solid var(--border); background: var(--surface); color: var(--mist);
  font: inherit; font-size: var(--size-xs); cursor: pointer; margin-left: -1px; }
.dc-room .dc-segment:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.dc-room .dc-segment:last-child { border-radius: 0 6px 6px 0; }
.dc-room .dc-segment[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--blossom);
  border-color: var(--accent); position: relative; z-index: 1; }
.dc-room .dc-steps { margin: 0; padding-left: 20px; line-height: 1.7; }
.dc-room .dc-steps li { padding: 3px 0; }
.dc-room .dc-notices { display: flex; flex-direction: column; }
.dc-room .dc-notice { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0;
  border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.dc-room .dc-notice > div { display: flex; flex-direction: column; }
.dc-room .dc-notice.is-new strong { color: var(--blossom); }
.dc-room .dc-notice:not(.is-new) strong { font-weight: 400; color: var(--mist); }
.dc-room .dc-notice .dot { margin-top: 5px; }
.dc-room .dc-panel .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--mist); flex: none; }
.dc-room .dc-panel .dot.pass { background: var(--accent-jade); }
.dc-room .dc-panel .dot.warn { background: var(--gold); }
.dc-room .dc-panel .dot.fail { background: color-mix(in srgb, var(--accent-lacquer) 25%, var(--blossom)); }
.dc-room .dc-dragon { float: right; width: 180px; margin: 0 0 10px 20px; }
.dc-room .dc-dragon img { width: 100%; height: auto; display: block; }
.dc-room .dc-dragon-controls { overflow: hidden; }
@media (max-width: 760px) {
  .dc-room .dc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-room .dc-dragon { float: none; width: 140px; margin: 0 0 12px; }
  .dc-room .dc-migration { grid-template-columns: 40px 1fr; }
  .dc-room .dc-migration > span:last-child { grid-column: 1 / -1; }
}
.dc-room .dc-version-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -8px 0 16px; padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: 8px; }
.dc-room .dc-version-line code { flex: 1; min-width: 240px; font-family: var(--font-mono); font-size: var(--size-xs); color: var(--gold); overflow-wrap: anywhere; }
.dc-room .dc-version-line .dc-button { margin-top: 0; }

/* Drop 39: the Jade Register, upgraded after the brought design - its dark
   jade palette, the cover with 玉牒, the avatar in a gold ring, tabs, the
   overview, the galleries and My Imperial Chamber. Prefixed jp-, so the
   Years and Review rooms (jr-) are untouched. On this room the cover takes
   the palace banner's place. */
.jp-room {
  --jp-bg: color-mix(in srgb, var(--accent-jade) 10%, var(--ink)); --jp-surface: color-mix(in srgb, var(--accent-jade) 20%, var(--ink)); --jp-soft: color-mix(in srgb, var(--accent-jade) 28%, var(--ink)); --jp-ink: var(--blossom); --jp-muted: var(--mist);
  --jp-gold: var(--gold); --jp-line: color-mix(in srgb, var(--accent-jade) 36%, var(--surface)); --jp-jade: var(--accent-jade); --jp-button: color-mix(in srgb, var(--accent-jade) 25%, var(--blossom)); --jp-button-text: var(--jade);
  --jp-art-text: var(--blossom); --jp-art-dark: color-mix(in srgb, var(--accent-jade) 14%, var(--ink)); --jp-danger: color-mix(in srgb, var(--accent-lacquer) 25%, var(--blossom)); --jp-wine: color-mix(in srgb, var(--moon) 75%, var(--blossom));
  background: var(--jp-bg); color: var(--jp-ink); font: var(--size-sm)/1.55 var(--font-sans); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--jp-line); min-width: 0;
}
.jp-room * { box-sizing: border-box; }
.jp-room h1, .jp-room h2, .jp-room h3, .jp-room p { margin: 0; }
.jp-room h2 { font: var(--size-xl) var(--font-serif); color: var(--jp-ink); }
.jp-room h3 { font: var(--size-lg) var(--font-serif); }
.jp-room button { font: inherit; cursor: pointer; }
.jp-room .jp-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid transparent;
  background: var(--jp-button); color: var(--jp-button-text); font-size: var(--size-xs); border-radius: 4px; white-space: nowrap; }
.jp-room .jp-button:hover { filter: brightness(1.06); }
.jp-room .jp-secondary { background: transparent; color: var(--jp-ink); border-color: var(--jp-line); }
.jp-room .jp-secondary:disabled { opacity: 0.7; cursor: default; }
.jp-room .jp-glass { background: color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 6%, var(--ink)) 55%, transparent); color: var(--jp-art-text); border-color: color-mix(in srgb, var(--jp-art-text) 30%, transparent);
  backdrop-filter: blur(4px); }
.jp-room .jp-text-button { border: 0; background: transparent; color: var(--jp-jade); font-size: var(--size-xs); padding: 4px 0; text-align: left; }
.jp-room .jp-text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.jp-room .jp-danger { color: var(--jp-danger); }
.jp-room .jp-icon-button { border: 1px solid var(--jp-line); background: transparent; color: var(--jp-muted); width: 32px; height: 32px; border-radius: 4px; font-size: var(--size-md); }
.jp-room .jp-kicker { color: var(--jp-gold); font-size: var(--size-3xs); letter-spacing: .17em; text-transform: uppercase; }
.jp-room .jp-description { color: var(--jp-muted); font-size: var(--size-xs); }
/* the cover */
/* who you are */
.jp-room .jp-identity { display: flex; align-items: center; gap: 24px; padding: 26px 34px 22px; border-bottom: 1px solid var(--jp-line); position: relative; }
.jp-room .jp-avatar-column { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jp-room .jp-avatar { width: 133px; height: 133px; border-radius: 50%; border: 5px solid var(--jp-bg); padding: 5px; background: var(--jp-gold); overflow: hidden; }
.jp-room .jp-avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; background: var(--jp-soft); display: grid; place-items: center; }
.jp-room .jp-avatar-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jp-room .jp-avatar-empty { font-size: var(--size-3xl); color: var(--jp-gold); }
.jp-room .jp-identity-copy { flex: 1; min-width: 0; }
.jp-room .jp-identity-copy h1 { font: var(--size-2xl)/1.15 var(--font-serif); margin: 4px 0 4px; overflow-wrap: anywhere; }
.jp-room .jp-also { display: flex; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.jp-room .jp-also-name { border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; text-align: left; color: var(--jp-ink); font: var(--size-md) var(--font-serif); }
.jp-room .jp-also-name small { font: var(--size-3xs) var(--font-sans); color: var(--jp-muted); letter-spacing: .08em; text-transform: uppercase; }
.jp-room .jp-tagline { color: var(--jp-muted); font-size: var(--size-sm); margin-bottom: 12px; font-style: italic; overflow-wrap: anywhere; }
.jp-room .jp-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.jp-room .jp-badge { color: var(--jp-jade); background: var(--jp-soft); border: 1px solid var(--jp-line); font-size: var(--size-3xs); padding: 3px 7px; border-radius: 3px; }
.jp-room .jp-badge-gold { color: var(--jp-gold); }
.jp-room .jp-identity-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.jp-room .jp-birthday { color: var(--jp-muted); font-size: var(--size-xs); }
/* tabs and body */
.jp-room .jp-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; padding: 0 34px; border-bottom: 1px solid var(--jp-line); }
.jp-room .jp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 17px 1px 14px; background: transparent; color: var(--jp-muted);
  border: 0; border-bottom: 2px solid transparent; font-size: var(--size-xs); }
.jp-room .jp-tab[aria-selected="true"] { color: var(--jp-ink); border-bottom-color: var(--jp-gold); }
.jp-room .jp-tab-count { font-size: var(--size-3xs); padding: 1px 6px; border-radius: 9px; background: var(--jp-soft); color: var(--jp-jade); }
.jp-room .jp-body { padding: 28px 34px 34px; }
.jp-room .jp-notice { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 18px;
  border: 1px solid var(--jp-line); border-left: 3px solid var(--jp-gold); background: var(--jp-surface); border-radius: 4px; }
.jp-room .jp-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; align-items: start; }
.jp-room .jp-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.jp-room .jp-panel { border: 1px solid var(--jp-line); border-radius: 7px; padding: 22px; background: var(--jp-surface); min-width: 0; }
.jp-room .jp-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.jp-room .jp-about { line-height: 1.75; white-space: pre-wrap; }
.jp-room .jp-about-empty { font: italic var(--size-lg)/1.6 var(--font-serif); color: var(--jp-muted); }
.jp-room .jp-favourites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.jp-room .jp-favourite { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--jp-line);
  background: transparent; text-align: left; color: var(--jp-ink); min-width: 0; }
.jp-room .jp-favourite span { font-size: var(--size-2xs); color: var(--jp-muted); }
.jp-room .jp-favourite strong { font: var(--size-md) var(--font-serif); font-weight: 400; overflow-wrap: anywhere; }
.jp-room .jp-favourite em { font-size: var(--size-xs); color: var(--jp-muted); opacity: .7; }
.jp-room .jp-person { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 9px 0;
  border: 0; border-top: 1px solid var(--jp-line); background: transparent; color: var(--jp-ink); text-align: left; }
.jp-room .jp-person-initial { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--jp-soft); color: var(--jp-gold); font: var(--size-lg) var(--font-serif); }
.jp-room .jp-person-initial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jp-room .jp-person-name { font-weight: 500; }
.jp-room .jp-person-relation { font-size: var(--size-xs); color: var(--jp-muted); }
/* the chamber teaser */
.jp-room .jp-chamber-teaser { background: var(--jp-surface); border: 1px solid var(--jp-line); border-radius: 7px; overflow: hidden; }
.jp-room .jp-chamber-photo { position: relative; height: 340px; background: var(--jp-art-dark); }
.jp-room .jp-chamber-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jp-room .jp-chamber-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--jp-art-text); text-align: center; }
.jp-room .jp-art-badge { position: absolute; left: 14px; top: 14px; padding: 4px 8px; border-radius: 3px; font-size: var(--size-3xs); letter-spacing: .14em;
  color: var(--jp-art-text); background: color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 6%, var(--ink)) 60%, transparent); }
.jp-room .jp-chamber-caption { padding: 20px 22px 22px; }
.jp-room .jp-chamber-caption h2 { margin: 4px 0; }
.jp-room .jp-chamber-caption-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--jp-line); font-size: var(--size-2xs); color: var(--jp-muted); }
.jp-room .jp-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.jp-room .jp-preview-tile { position: relative; aspect-ratio: 1; border: 1px solid var(--jp-line); border-radius: 4px; overflow: hidden; padding: 0; background: var(--jp-soft); }
.jp-room .jp-preview-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* timeline */
.jp-room .jp-timeline { display: flex; flex-direction: column; }
.jp-room .jp-timeline-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 18px; padding: 12px 0 13px; border-top: 1px solid var(--jp-line); position: relative; }
.jp-room .jp-timeline-row:first-child { border-top: 0; }
.jp-room .jp-timeline-date { color: var(--jp-gold); font-size: var(--size-xs); font-variant-numeric: tabular-nums; }
.jp-room .jp-timeline-title { font-weight: 500; }
.jp-room .jp-timeline-type { font-size: var(--size-2xs); color: var(--jp-muted); }
.jp-room .jp-timeline-row.is-palace .jp-timeline-type { color: var(--jp-gold); opacity: .8; }
/* galleries */
.jp-room .jp-page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.jp-room .jp-page-heading h2 { font-size: var(--size-2xl); margin: 4px 0; }
.jp-room .jp-page-heading p { color: var(--jp-muted); }
.jp-room .jp-room-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-bottom: 28px; }
.jp-room .jp-room-feature { position: relative; padding: 0; border: 1px solid var(--jp-line); border-radius: 7px; overflow: hidden; background: var(--jp-art-dark);
  aspect-ratio: 3 / 2; min-width: 0; }
.jp-room .jp-room-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jp-room .jp-room-feature-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; text-align: left; color: var(--jp-art-text);
  background: linear-gradient(transparent, color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 6%, var(--ink)) 80%, transparent)); font: var(--size-md) var(--font-serif); }
.jp-room .jp-room-note { border: 1px solid var(--jp-line); border-radius: 7px; padding: 22px; background: var(--jp-surface); display: flex; flex-direction: column; gap: 8px; }
.jp-room .jp-room-note p { color: var(--jp-muted); line-height: 1.7; }
.jp-room .jp-palette { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; }
.jp-room .jp-palette span { width: 25px; height: 25px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--jp-ink) 20%, transparent); }
.jp-room .jp-palette .is-jade { background: color-mix(in srgb, var(--accent-jade) 65%, var(--surface)); }
.jp-room .jp-palette .is-gold { background: color-mix(in srgb, var(--gold) 50%, var(--mist)); }
.jp-room .jp-palette .is-ivory { background: var(--blossom); }
.jp-room .jp-palette .is-wine { background: color-mix(in srgb, var(--moon) 75%, var(--surface)); }
.jp-room .jp-palette small { font-size: var(--size-3xs); color: var(--jp-muted); margin-left: 4px; }
.jp-room .jp-gallery-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.jp-room .jp-filter { padding: 6px 12px; border: 1px solid var(--jp-line); border-radius: 14px; background: transparent; color: var(--jp-muted); font-size: var(--size-xs); }
.jp-room .jp-filter[aria-pressed="true"] { background: var(--jp-soft); color: var(--jp-ink); border-color: var(--jp-jade); }
.jp-room .jp-gallery-count { margin-left: auto; font-size: var(--size-2xs); color: var(--jp-muted); }
.jp-room .jp-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.jp-room .jp-photo-card { min-width: 0; background: var(--jp-surface); border: 1px solid var(--jp-line); border-radius: 5px; overflow: hidden; }
.jp-room .jp-photo-open { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--jp-art-dark); overflow: hidden; }
.jp-room .jp-photo-open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jp-room .jp-photo-caption { padding: 11px 13px 13px; }
.jp-room .jp-photo-title { font-weight: 500; overflow-wrap: anywhere; }
.jp-room .jp-photo-meta { font-size: var(--size-2xs); color: var(--jp-muted); }
.jp-room .jp-add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; border: 1px dashed var(--jp-line);
  border-radius: 5px; background: transparent; color: var(--jp-muted); padding: 20px; }
.jp-room .jp-add-tile:hover { border-color: var(--jp-jade); color: var(--jp-ink); }
.jp-room .jp-add-mark { font: var(--size-2xl) var(--font-serif); color: var(--jp-gold); }
.jp-room .jp-add-tile small { font-size: var(--size-2xs); opacity: .7; }
.jp-room .jp-empty-gallery { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 20px; border: 1px dashed var(--jp-line);
  border-radius: 7px; color: var(--jp-muted); }
.jp-room .jp-empty-gallery h3 { color: var(--jp-ink); }
/* viewer and editors */
.jp-room .jp-viewer, .jp-room .jp-editor { border: 1px solid var(--jp-line); border-radius: 7px; padding: 20px; margin-bottom: 24px; background: var(--jp-surface); }
.jp-room .jp-viewer-top, .jp-room .jp-editor-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.jp-room .jp-viewer-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--jp-art-dark); border-radius: 5px; }
.jp-room .jp-viewer-context { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.jp-room .jp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jp-room .jp-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--size-2xs); color: var(--jp-muted); }
.jp-room .jp-field-wide { grid-column: 1 / -1; }
.jp-room .jp-field input, .jp-room .jp-field select, .jp-room .jp-field textarea { background: var(--jp-bg); color: var(--jp-ink); border: 1px solid var(--jp-line);
  border-radius: 4px; padding: 8px 10px; font: inherit; font-size: var(--size-sm); }
.jp-room .jp-field textarea { min-height: 80px; resize: vertical; }
.jp-room .jp-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.jp-room .jp-crop-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.jp-room .jp-crop-preview { width: 200px; height: 200px; border-radius: 50%; padding: 6px; background: var(--jp-gold); }
.jp-room .jp-crop-controls { display: flex; flex-direction: column; gap: 14px; }
.jp-room .jp-crop-controls label { display: flex; flex-direction: column; gap: 6px; font-size: var(--size-xs); color: var(--jp-muted); }
@media (max-width: 1000px) {
  .jp-room .jp-overview { grid-template-columns: 1fr; }
  .jp-room .jp-room-layout { grid-template-columns: 1fr; }
  .jp-room .jp-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .jp-room .jp-identity { flex-wrap: wrap; padding: 20px 20px 20px; gap: 14px; }
  .jp-room .jp-avatar { width: 100px; height: 100px; padding: 4px; border-width: 4px; }
  .jp-room .jp-identity-actions { align-items: flex-start; }
  .jp-room .jp-tabs { padding: 0 18px; gap: 0 14px; }
  .jp-room .jp-body { padding: 20px 18px; }
  .jp-room .jp-gallery-grid, .jp-room .jp-form-grid, .jp-room .jp-crop-layout { grid-template-columns: 1fr; }
  .jp-room .jp-timeline-row { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; }
}

/* Drop 40: the Jade Register after the second brought design, in the
   palace's own frame: no framed box at the top, the avatar set on the
   palace banner's lower edge, and Years in the Palace and Year in Review
   rebuilt (prefixed yr-), with no hero picture of their own. */
.jp-room { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.jp-room .jp-identity { align-items: flex-end; padding: 0 6px 22px; }
/* Aligned to the top of its row by itself, so its top margin decides its
   height: the row begins at the banner's edge, and -76px sets the avatar
   half on the banner. (A bottom-aligned item ignores a top margin.) */
.jp-room .jp-avatar-column { align-self: flex-start; margin-top: -76px; position: relative; z-index: 5; }
.jp-room .jp-identity-copy { padding-bottom: 6px; }
.jp-room .jp-tabs { padding: 0 6px; }
.jp-room .jp-body { padding: 28px 0 34px; }
.jp-room.yr-room { padding-bottom: 34px; }
/* the page heads: words, and the year set large */
.yr-room .yr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 4px 6px 22px;
  border-bottom: 1px solid var(--jp-line); margin-bottom: 22px; }
.yr-room .yr-head-copy h1 { font: var(--size-3xl)/1.1 var(--font-serif); margin: 6px 0; }
.yr-room .yr-head-copy p { color: var(--jp-muted); font-size: var(--size-sm); line-height: 1.6; margin-bottom: 8px; }
.yr-room .yr-head-year { text-align: right; color: var(--jp-gold); flex: none; }
.yr-room .yr-head-year span { display: block; font: 57px/1 var(--font-serif); letter-spacing: -.025em; }
.yr-room .yr-head-year small { font-size: var(--size-3xs); letter-spacing: .18em; color: var(--jp-muted); }
.yr-room .yr-founded { color: var(--jp-muted); font-size: var(--size-xs); margin: -12px 6px 22px; }
.yr-room .yr-steps, .yr-room .yr-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -8px 0 20px; }
.yr-room .yr-tools .jp-text-button { margin-left: auto; }
.yr-room a.jp-button, .yr-room a.jp-text-button, .yr-room a.jp-filter { text-decoration: none; display: inline-flex; }
.yr-room .yr-status { font-size: var(--size-2xs); color: var(--jp-jade); padding: 3px 9px; border: 1px solid var(--jp-line); border-radius: 12px; white-space: nowrap; }
.yr-room .yr-overline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.yr-room .yr-footnote { font-size: var(--size-2xs); color: var(--jp-muted); margin-top: 12px; }
.yr-room .yr-word { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 5px 11px; border: 1px solid var(--jp-line); border-radius: 3px; color: var(--jp-gold); font-size: var(--size-xs); }
/* the archive: volumes */
.yr-room .yr-archive-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.yr-room .yr-archive-heading p { color: var(--jp-muted); font-size: var(--size-xs); margin-top: 4px; }
.yr-room .yr-book { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.2fr); border: 1px solid var(--jp-line); border-radius: 7px;
  overflow: hidden; background: var(--jp-surface); margin-bottom: 22px; }
.yr-room .yr-book-cover { min-height: 329px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 24px;
  color: var(--jp-art-text); background: var(--jp-art-dark) url('/assets/img/register/year-volume.jpg') 68% center / cover no-repeat; border-right: 1px solid var(--jp-line); }
.yr-room .yr-book-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 6%, var(--ink)) 82%, transparent), transparent 62%); }
.yr-room .yr-book-cover.has-picture { background-size: cover; background-position: center; }
.yr-room .yr-book-volume { position: relative; font-size: var(--size-3xs); letter-spacing: .18em; }
.yr-room .yr-book-year { position: relative; font: 82px/.95 var(--font-serif); letter-spacing: -.055em; }
.yr-room .yr-book-year small { display: block; font: var(--size-3xs) var(--font-sans); letter-spacing: .2em; margin-top: 10px; color: var(--jp-gold); }
.yr-room .yr-book-content { padding: 26px 28px; display: flex; flex-direction: column; }
.yr-room .yr-book-content h3 { font: var(--size-xl)/1.25 var(--font-serif); margin: 6px 0 10px; }
.yr-room .yr-book-content > p { color: var(--jp-muted); line-height: 1.7; }
.yr-room .yr-book-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 0; margin: 18px 0 16px;
  border-top: 1px solid var(--jp-line); border-bottom: 1px solid var(--jp-line); }
.yr-room .yr-book-stats strong { display: block; font: var(--size-2xl)/1.1 var(--font-serif); font-weight: 400; }
.yr-room .yr-book-stats span { font-size: var(--size-2xs); color: var(--jp-muted); }
.yr-room .yr-book-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.yr-room .yr-archive-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 4px; }
.yr-room .yr-year-timeline, .yr-room .yr-year-note { border: 1px solid var(--jp-line); border-radius: 7px; padding: 22px; background: var(--jp-surface); min-width: 0; }
.yr-room .yr-year-timeline h3, .yr-room .yr-year-note h3 { margin: 4px 0 12px; }
.yr-room .yr-year-note p { color: var(--jp-muted); line-height: 1.7; }
.yr-room .yr-reflection-prompt { font: italic var(--size-xl)/1.55 var(--font-serif); color: var(--jp-gold); margin: 14px 0 16px; }
/* a chapter */
.yr-room .yr-chapter-cover { height: 260px; border-radius: 7px; border: 1px solid var(--jp-line); background-size: cover; background-position: center; margin-bottom: 22px; }
.yr-room .yr-chapter-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 23px; align-items: start; margin-bottom: 24px; }
.yr-room .yr-letter { border: 1px solid var(--jp-line); padding: 28px; border-radius: 7px; background: var(--jp-surface); }
.yr-room .yr-letter h2 { font-size: var(--size-xl); margin: 6px 0 12px; }
.yr-room .yr-letter-text { font: var(--size-md)/1.8 var(--font-serif); white-space: pre-wrap; margin-bottom: 16px; color: var(--jp-ink); }
.yr-room .yr-prompt-card { padding: 16px 0; border-top: 1px solid var(--jp-line); }
.yr-room .yr-prompt-card:first-child { border-top: 0; padding-top: 0; }
.yr-room .yr-prompt-card h3 { font-size: var(--size-md); margin: 0 0 6px; }
.yr-room .yr-prompt-card p { font-size: var(--size-xs); opacity: .75; }
.yr-room .yr-prompt-card.is-written p { color: var(--jp-ink); opacity: 1; font-size: var(--size-sm); }
.yr-room .yr-memories { border: 1px solid var(--jp-line); border-radius: 7px; padding: 22px; background: var(--jp-surface); margin-bottom: 24px; }
.yr-room .yr-memory-empty { display: flex; gap: 16px; align-items: center; padding: 28px; border: 1px dashed var(--jp-line); border-radius: 7px; color: var(--jp-muted); }
.yr-room .yr-memory-empty h3 { color: var(--jp-ink); margin-bottom: 4px; }
/* the review */
.yr-room .yr-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--jp-line); border-bottom: 1px solid var(--jp-line);
  padding: 20px 0; margin-bottom: 20px; }
.yr-room .yr-summary-item { padding: 0 18px; border-left: 1px solid var(--jp-line); }
.yr-room .yr-summary-item:first-child { border-left: 0; padding-left: 6px; }
.yr-room .yr-summary-item strong { font: var(--size-3xl)/1 var(--font-serif); display: block; margin-bottom: 8px; letter-spacing: -.035em; font-weight: 400; }
.yr-room .yr-summary-item span { display: block; }
.yr-room .yr-summary-item small { color: var(--jp-muted); font-size: var(--size-2xs); }
.yr-room .yr-jumps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.yr-room .yr-jump { padding: 7px 13px; border: 1px solid var(--jp-line); border-radius: 16px; background: transparent; color: var(--jp-muted); font-size: var(--size-xs); }
.yr-room .yr-jump:hover { color: var(--jp-ink); border-color: var(--jp-jade); }
.yr-room .yr-report-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: 21px; align-items: stretch; margin-bottom: 21px; }
.yr-room .yr-report-panel { background: var(--jp-surface); border: 1px solid var(--jp-line); padding: 23px; border-radius: 7px; min-width: 0; scroll-margin-top: 20px; }
.yr-room .yr-report-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.yr-room .yr-report-title .cjk { color: var(--jp-gold); font-size: var(--size-md); }
.yr-room .yr-watch-chart { display: flex; align-items: center; gap: 22px; margin: 0 0 18px; }
.yr-room .yr-donut { width: 150px; height: 150px; flex: none; }
.yr-room .yr-ring-track { stroke: color-mix(in srgb, var(--jp-muted) 14%, transparent); }
.yr-room .yr-ring-series { stroke: var(--jp-jade); }
.yr-room .yr-ring-movies { stroke: var(--jp-gold); }
.yr-room .yr-ring-number { fill: var(--jp-ink); font: var(--size-2xl) var(--font-serif); }
.yr-room .yr-ring-label { fill: var(--jp-muted); font: var(--size-2xs) var(--font-sans); }
.yr-room .yr-chart-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.yr-room .yr-legend-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; }
.yr-room .yr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--jp-jade); }
.yr-room .yr-dot.is-gold { background: var(--jp-gold); }
.yr-room .yr-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 0; border-top: 1px solid var(--jp-line);
  border-bottom: 1px solid var(--jp-line); margin-bottom: 14px; }
.yr-room .yr-mini-stat strong { display: block; font: var(--size-2xl)/1.1 var(--font-serif); font-weight: 400; }
.yr-room .yr-mini-stat span { font-size: var(--size-2xs); color: var(--jp-muted); }
.yr-room .yr-award { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.yr-room .yr-award-title { font: var(--size-lg) var(--font-serif); color: var(--jp-ink); text-decoration: none; }
.yr-room .yr-rating { color: var(--jp-gold); font-size: var(--size-md); white-space: nowrap; }
.yr-room .yr-actor { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--jp-line); }
.yr-room .yr-actor-badge { display: grid; place-items: center; height: 35px; width: 35px; color: var(--jp-gold); background: var(--jp-soft); border: 1px solid var(--jp-line);
  border-radius: 50%; font: var(--size-sm)/1 var(--font-serif); flex: none; }
.yr-room .yr-actor-name { color: var(--jp-ink); text-decoration: none; font-weight: 500; margin: 0; display: block; }
.yr-room .yr-actor small { color: var(--jp-muted); font-size: var(--size-2xs); }
.yr-room .yr-country-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.yr-room .yr-country-list span { padding: 3px 9px; border: 1px solid var(--jp-line); border-radius: 12px; font-size: var(--size-2xs); color: var(--jp-muted); }
.yr-room .yr-qi-total, .yr-room .yr-collect-total { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.yr-room .yr-qi-total strong, .yr-room .yr-collect-total strong { font: var(--size-3xl)/1 var(--font-serif); letter-spacing: -.035em; font-weight: 400; }
.yr-room .yr-qi-total span, .yr-room .yr-collect-total span { color: var(--jp-muted); font-size: var(--size-xs); }
.yr-room .yr-bar-chart { margin: 4px 0 12px; }
.yr-room .yr-bar-heading { display: flex; justify-content: space-between; font-size: var(--size-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--jp-muted); margin-bottom: 10px; }
.yr-room .yr-bar-row { margin-bottom: 11px; }
.yr-room .yr-bar-label { display: flex; justify-content: space-between; gap: 10px; font-size: var(--size-xs); margin-bottom: 5px; }
.yr-room .yr-bar-label strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.yr-room .yr-bar-track { height: 7px; background: color-mix(in srgb, var(--jp-muted) 12%, transparent); overflow: hidden; border-radius: 2px; }
.yr-room .yr-bar-fill { height: 100%; background: var(--jp-jade); }
.yr-room .yr-bar-fill.is-gold { background: var(--jp-gold); }
.yr-room .yr-realms { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--jp-line); font: var(--size-md) var(--font-serif); }
.yr-room .yr-arrow { color: var(--jp-gold); }
.yr-room .yr-label-value { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--jp-line); font-size: var(--size-xs); }
.yr-room .yr-label-value strong { font-weight: 500; }
.yr-room .yr-money-highlight { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--jp-line); }
.yr-room .yr-money-highlight strong { font: var(--size-xl) var(--font-serif); font-weight: 400; color: var(--jp-gold); }
.yr-room .yr-money-highlight span { color: var(--jp-muted); font-size: var(--size-xs); }
.yr-room .yr-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: center; background: var(--jp-surface);
  border: 1px solid var(--jp-line); border-radius: 7px; padding: 23px; margin-bottom: 21px; scroll-margin-top: 20px; }
.yr-room .yr-reading p { color: var(--jp-muted); line-height: 1.7; }
.yr-room .yr-reading-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.yr-room .yr-reading-stats strong { display: block; font: var(--size-2xl)/1.1 var(--font-serif); font-weight: 400; }
.yr-room .yr-reading-stats span { font-size: var(--size-2xs); color: var(--jp-muted); }
.yr-room .yr-cta { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 24px; border: 1px solid var(--jp-line);
  border-radius: 7px; background: linear-gradient(120deg, var(--jp-soft), var(--jp-surface)); }
.yr-room .yr-cta p { color: var(--jp-muted); margin-top: 4px; }
@media (max-width: 1000px) {
  .yr-room .yr-book, .yr-room .yr-archive-bottom, .yr-room .yr-chapter-grid, .yr-room .yr-report-grid, .yr-room .yr-reading { grid-template-columns: 1fr; }
  .yr-room .yr-book-cover { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--jp-line); }
}
/* The palace hides its banner at 60rem and narrower: there the avatar
   has nothing to sit on, and stays in the page. */
@media (max-width: 60rem) {
  .jp-room .jp-avatar-column { margin-top: 0; }
  .jp-room .jp-identity { align-items: center; padding-top: 10px; }
}
@media (max-width: 640px) {
  .jp-room .jp-identity { align-items: flex-start; }
  .yr-room .yr-head { flex-direction: column; align-items: flex-start; }
  .yr-room .yr-head-year { text-align: left; }
  .yr-room .yr-summary { grid-template-columns: 1fr; gap: 16px; }
  .yr-room .yr-summary-item { border-left: 0; padding-left: 6px; }
  .yr-room .yr-reading-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yr-room .yr-watch-chart { flex-direction: column; align-items: flex-start; }
}

/* Drop 41: the Sound Garden 樂苑 - the repertoire with its previews, the
   seasons with their characters, engagements counted down, and their
   history. Palace surfaces, the Gardens' jade accent. Prefixed sg-. */
.sg-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.sg-room * { box-sizing: border-box; }
.sg-room h1, .sg-room h2, .sg-room h3, .sg-room p { margin: 0; }
.sg-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.sg-room h2 { font: var(--size-xl) var(--font-serif); }
.sg-room a { color: inherit; }
.sg-room button { font: inherit; color: inherit; cursor: pointer; }
.sg-room .sg-muted { color: var(--mist); font-size: var(--size-xs); }
.sg-room .sg-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; }
.sg-room .sg-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.sg-room .sg-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sg-room .sg-heading .sg-muted { margin-top: 6px; font-size: var(--size-sm); }
.sg-room .sg-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); font-size: var(--size-xs); text-decoration: none; white-space: nowrap; }
.sg-room .sg-button:hover { border-color: var(--accent); }
.sg-room .sg-primary { background: var(--accent); border-color: var(--accent); }
.sg-room .sg-quiet { border: 0; background: transparent; color: var(--accent-jade); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.sg-room .sg-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-room .sg-danger { color: var(--accent-lacquer); }
.sg-room .sg-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-md); }
.sg-room .sg-icon:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--blossom); }
.sg-room .sg-icon.is-on { color: var(--gold); }
.sg-room .sg-icon:disabled { opacity: .3; cursor: default; }
.sg-room .sg-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); }
.sg-room .sg-badge[data-tone="jade"] { background: color-mix(in srgb, var(--accent-jade) 16%, transparent); color: var(--accent-jade); }
.sg-room .sg-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.sg-room .sg-rating { color: var(--gold); font-size: var(--size-xs); white-space: nowrap; }
.sg-room .sg-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.sg-room .sg-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sg-room .sg-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sg-room .sg-stack { display: flex; flex-direction: column; min-width: 0; }
.sg-room .sg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.sg-room .sg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sg-room .sg-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.sg-room .sg-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; }
.sg-room .sg-stat span { font-size: var(--size-xs); color: var(--mist); }
/* songs */
.sg-room .sg-song { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.sg-room .sg-song:first-child { border-top: 0; }
.sg-room .sg-art { position: relative; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  display: grid; place-items: center; color: var(--gold); font-size: var(--size-xl); flex: none; }
.sg-room .sg-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-room .sg-art.is-large { width: 180px; height: 180px; border-radius: 10px; font-size: 64px; }
.sg-room .sg-song-words { min-width: 0; }
.sg-room .sg-song-title { font-weight: 500; font-size: var(--size-sm); text-decoration: none; overflow-wrap: anywhere; }
a.sg-song-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-room .sg-song-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.sg-room .sg-song-acts, .sg-room .sg-inline { display: flex; align-items: center; gap: 2px; }
.sg-room .sg-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--accent-jade);
  font-size: var(--size-xs); display: grid; place-items: center; }
.sg-room .sg-play:hover { border-color: var(--accent-jade); }
.sg-room .sg-play.is-playing { background: var(--accent); color: var(--blossom); border-color: var(--accent); }
.sg-room .sg-play:disabled { opacity: .3; cursor: default; }
.sg-room .sg-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sg-room .sg-tools input[type="search"] { flex: 1; min-width: 220px; min-height: 36px; }
.sg-room .sg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-room .sg-chip { padding: 5px 11px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--mist); font-size: var(--size-xs); }
.sg-room .sg-chip[aria-pressed="true"] { border-color: var(--accent-jade); color: var(--blossom); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sg-room .sg-song-list { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px 16px; }
.sg-room .sg-panel .sg-song-list { background: transparent; border: 0; padding: 0; }
.sg-found { background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.sg-found .sg-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sg-room .sg-song-hero, .sg-room .sg-engagement-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 16px; }
.sg-room .sg-song-hero h2, .sg-room .sg-engagement-hero h2 { font-size: var(--size-2xl); margin: 4px 0; }
.sg-room .sg-notes { margin-top: 12px; line-height: 1.7; white-space: pre-wrap; color: var(--mist); }
.sg-room .sg-memories { margin-top: 12px; font: italic var(--size-md)/1.7 var(--font-serif); white-space: pre-wrap; }
.sg-room .sg-line { padding: 6px 0; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.sg-room .sg-line:first-of-type { border-top: 0; }
/* seasons */
.sg-room .sg-season-card { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
.sg-room .sg-season-glyph { width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; font-size: var(--size-3xl); color: var(--gold);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); }
.sg-room .sg-season.is-current { border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--border)); }
.sg-room .sg-season-head { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
.sg-room .sg-season-head h2 { font-size: var(--size-xl); margin: 2px 0 4px; }
.sg-room .sg-anthem { margin: 10px 0; padding: 8px 12px; border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); border-radius: 0 6px 6px 0; }
.sg-room .sg-anthem small { font-size: var(--size-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.sg-room .sg-anthem .sg-song { border-top: 0; padding: 4px 0 0; }
/* engagements */
.sg-room .sg-engagements { display: flex; flex-direction: column; gap: 10px; }
.sg-room .sg-engagement { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; }
.sg-room .sg-panel .sg-engagement { background: transparent; }
.sg-room .sg-engagement:hover { border-color: var(--accent); }
.sg-room .sg-date-tile { width: 64px; min-height: 66px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid var(--border); }
.sg-room .sg-date-tile strong { font: var(--size-xl)/1 var(--font-serif); font-weight: 400; }
.sg-room .sg-date-tile small { font-size: var(--size-3xs); letter-spacing: .12em; color: var(--gold); }
.sg-room .sg-engagement-words { min-width: 0; }
.sg-room .sg-engagement-words strong { font-size: var(--size-md); font-weight: 500; }
.sg-room .sg-countdown { font: var(--size-md) var(--font-serif); color: var(--gold); white-space: nowrap; }
.sg-room .sg-people { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sg-room .sg-person { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 14px; }
.sg-room .sg-person-name { text-decoration: none; font-size: var(--size-xs); }
.sg-room .sg-person .sg-icon { min-width: 22px; min-height: 22px; font-size: var(--size-xs); }
.sg-room .sg-setlist { list-style: none; margin: 0; padding: 0; }
.sg-room .sg-setlist li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.sg-room .sg-setlist li:first-child { border-top: 0; }
.sg-room .sg-setlist-no { font: var(--size-md) var(--font-serif); color: var(--gold); text-align: right; }
.sg-room .sg-relic { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.sg-room .sg-relic:first-of-type { border-top: 0; }
.sg-room .sg-relic-pic { position: relative; width: 40px; height: 40px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.sg-room .sg-relic-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-room .sg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.sg-room .sg-photo { margin: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sg-room .sg-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sg-room .sg-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; font-size: var(--size-2xs); color: var(--mist); }
/* history */
.sg-room .sg-year { font-size: var(--size-xl); color: var(--gold); margin-bottom: 6px; }
.sg-room .sg-history-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--border); text-decoration: none; }
.sg-room .sg-history-row:first-of-type { border-top: 0; }
.sg-room .sg-history-row strong { font-weight: 500; }
.sg-room .sg-history-row.is-missed { opacity: .6; }
.sg-room .sg-history-date { font-size: var(--size-xs); color: var(--gold); font-variant-numeric: tabular-nums; }
.sg-room .sg-ask { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.sg-room .sg-ask-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.sg-room .sg-ask-row:first-of-type { border-top: 0; }
/* Drop 164: the Concert Hall's rooms - the Ticket Desk, the Report, Artists Seen Live, Venues & Cities, Setlists, the Gallery */
.sg-room .sg-history-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.sg-room .sg-history-date { white-space: nowrap; }
.sg-room .sg-concert-words { display: flex; flex-direction: column; min-width: 0; }
.sg-room .sg-concert-words strong { overflow-wrap: anywhere; }
.sg-room a.sg-stat { color: inherit; text-decoration: none; transition: border-color .15s ease; }
.sg-room a.sg-stat:hover, .sg-room a.sg-stat:focus-visible { border-color: var(--accent); }
.sg-room .sg-stat strong { overflow-wrap: anywhere; }
.sg-room .sg-panel-line { margin: -4px 0 12px; }
.sg-room .sg-panel .sg-history-row:first-of-type { border-top: 0; }
.sg-room .sg-badge { white-space: nowrap; }
.sg-room .sg-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-room .sg-stats.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) { .sg-room .sg-stats.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sg-room .sg-stats.is-3, .sg-room .sg-stats.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a night in a narrow card: its date above its name, its mark to the right */
.sg-room .sg-artist-nights .sg-history-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; }
.sg-room .sg-artist-nights .sg-history-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
.sg-room .sg-artist-nights .sg-history-row > :nth-child(2) { grid-column: 1; grid-row: 2; }
.sg-room .sg-artist-nights .sg-history-row > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
/* the ticket desk */
.sg-room .sg-ticket { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sg-room .sg-ticket .sg-engagement { border: 0; border-radius: 0; }
.sg-room .sg-ticket-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px;
  border-top: 1px dashed color-mix(in srgb, var(--gold) 30%, var(--border)); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.sg-room .sg-ticket-sale { color: var(--gold); font-size: var(--size-xs); }
.sg-room .sg-ticket-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sg-room .sg-ticket-acts .sg-button { min-height: 32px; padding: 5px 11px; }
/* the report */
.sg-room .sg-report-years { margin-bottom: 16px; }
.sg-room .sg-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 170px; }
.sg-room .sg-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.sg-room .sg-bar-fill { width: 100%; max-width: 38px; height: max(var(--h, 0%), 3px); border-radius: 4px 4px 1px 1px;
  background: linear-gradient(0deg, var(--progress-from, var(--accent)), var(--progress-to, var(--gold))); }
.sg-room .sg-bar.is-empty .sg-bar-fill { background: color-mix(in srgb, var(--mist) 18%, transparent); }
.sg-room .sg-bar-n { font: var(--size-sm) var(--font-serif); color: var(--blossom); min-height: 1.2em; }
.sg-room .sg-bar-label { font-size: var(--size-3xs); letter-spacing: .08em; color: var(--mist); }
.sg-room .sg-rank { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.sg-room .sg-rank:first-of-type, .sg-room .sg-panel-head + .sg-rank { border-top: 0; }
.sg-room .sg-rank-n { font: var(--size-md) var(--font-serif); color: var(--gold); white-space: nowrap; }
/* artists seen live */
.sg-room .sg-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sg-room .sg-artist { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.sg-room .sg-artist-face { position: relative; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--gold); font-size: var(--size-xl); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); }
.sg-room .sg-artist-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-room .sg-artist-words { min-width: 0; }
.sg-room .sg-artist-words > .sg-song-title { font-size: var(--size-md); }
.sg-room .sg-artist-nights { margin-top: 8px; }
.sg-room .sg-artist-nights .sg-history-row { padding: 6px 0; font-size: var(--size-xs); }
.sg-room .sg-artist-nights .sg-history-row:first-child { border-top: 0; }
/* venues and cities */
.sg-room .sg-place { border-top: 1px solid var(--border); }
.sg-room .sg-place:first-of-type { border-top: 0; }
.sg-room .sg-place > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; list-style: none; }
.sg-room .sg-place > summary::-webkit-details-marker { display: none; }
.sg-room .sg-place[open] > summary { color: var(--gold); }
.sg-room .sg-place-words { display: flex; flex-direction: column; min-width: 0; }
.sg-room .sg-place-n { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sg-room .sg-place .sg-history-row { padding: 6px 0 6px 12px; font-size: var(--size-xs); }
/* setlists */
.sg-room .sg-heard { list-style: none; margin: 0; padding: 0; }
.sg-room .sg-heard li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--border); }
.sg-room .sg-heard li:first-child { border-top: 0; }
.sg-room .sg-heard-nights { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.sg-room .sg-heard-night { font-size: var(--size-2xs); padding: 2px 8px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--mist); }
.sg-room .sg-heard-night:hover { border-color: var(--accent); color: var(--blossom); }
/* the gallery */
.sg-room .sg-gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sg-room .sg-gallery a { display: block; }
.sg-room .sg-gallery figcaption { padding: 6px 8px; }
.sg-room .sg-gallery-relics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 18px; margin-top: 12px; }
.sg-room .sg-gallery-relics .sg-relic { text-decoration: none; }
.sg-room .sg-gallery-relics .sg-relic:first-of-type { border-top: 0; }
@media (max-width: 900px) {
  .sg-room .sg-columns { grid-template-columns: 1fr; }
  .sg-room .sg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-room .sg-song-hero, .sg-room .sg-engagement-hero { grid-template-columns: 1fr; }
  .sg-room .sg-art.is-large { width: 140px; height: 140px; }
}
@media (pointer: coarse) {
  .sg-room button, .sg-room .sg-button { min-height: 44px; }
  .sg-room .sg-play { width: 44px; height: 44px; }
}

/* Drop 42: the Pavilion of Distant Journeys 行旅亭 - journeys and their
   stops, the register's checklist and budget, the known world, and the
   realms not yet reached. Palace surfaces, the Gardens' jade accent.
   Prefixed dj-. */
.dj-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.dj-room * { box-sizing: border-box; }
.dj-room h1, .dj-room h2, .dj-room h3, .dj-room p { margin: 0; }
.dj-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.dj-room h2 { font: var(--size-xl) var(--font-serif); }
.dj-room h3 { font: var(--size-md) var(--font-serif); }
.dj-room a { color: inherit; }
.dj-room button { font: inherit; color: inherit; cursor: pointer; }
.dj-room .dj-muted { color: var(--mist); font-size: var(--size-xs); }
.dj-room .dj-small { font-size: var(--size-xs); color: var(--mist); margin-top: 3px; }
.dj-room .dj-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; }
.dj-room .dj-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.dj-room .dj-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dj-room .dj-heading .dj-muted { margin-top: 6px; font-size: var(--size-sm); }
.dj-room .dj-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); font-size: var(--size-xs); text-decoration: none; white-space: nowrap; }
.dj-room .dj-button:hover { border-color: var(--accent); }
.dj-room .dj-primary { background: var(--accent); border-color: var(--accent); }
.dj-room .dj-quiet { border: 0; background: transparent; color: var(--accent-jade); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.dj-room .dj-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.dj-room .dj-danger { color: var(--accent-lacquer); }
.dj-room .dj-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-sm); }
.dj-room .dj-icon:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--blossom); }
.dj-room .dj-icon:disabled { opacity: .3; cursor: default; }
.dj-room .dj-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); }
.dj-room .dj-badge[data-tone="jade"] { background: color-mix(in srgb, var(--accent-jade) 16%, transparent); color: var(--accent-jade); }
.dj-room .dj-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.dj-room .dj-rating, .dj-room .dj-stars { color: var(--gold); font-size: var(--size-xs); white-space: nowrap; }
.dj-room .dj-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.dj-room .dj-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dj-room .dj-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dj-room .dj-stack { display: flex; flex-direction: column; min-width: 0; }
.dj-room .dj-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.dj-room .dj-inline { display: inline-flex; align-items: center; gap: 2px; }
.dj-room .dj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dj-room .dj-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.dj-room .dj-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; }
.dj-room .dj-stat span { font-size: var(--size-xs); color: var(--mist); }
.dj-room .dj-line { padding: 6px 0; border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dj-room .dj-line:first-of-type { border-top: 0; }
.dj-room .dj-offer { color: var(--mist); }
/* journeys */
.dj-room .dj-journeys { display: flex; flex-direction: column; gap: 10px; }
.dj-room .dj-journey { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; }
.dj-room .dj-panel .dj-journey { background: transparent; margin-bottom: 8px; }
.dj-room .dj-journey:hover { border-color: var(--accent); }
.dj-room .dj-cover { position: relative; width: 84px; height: 64px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; font-size: var(--size-xl); color: var(--gold);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)); flex: none; }
.dj-room .dj-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dj-room .dj-cover.is-large { width: 220px; height: 160px; border-radius: 10px; font-size: 56px; }
.dj-room .dj-journey-words { min-width: 0; }
.dj-room .dj-journey-words strong { font-size: var(--size-md); font-weight: 500; }
.dj-room .dj-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.dj-room .dj-countdown { font: var(--size-md) var(--font-serif); color: var(--gold); white-space: nowrap; }
.dj-room .dj-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); margin-bottom: 16px; }
.dj-room .dj-hero h2 { font-size: var(--size-2xl); margin: 4px 0; }
.dj-room .dj-notes { margin-top: 12px; line-height: 1.7; white-space: pre-wrap; color: var(--mist); }
.dj-room .dj-memories { margin-top: 12px; font: italic var(--size-md)/1.7 var(--font-serif); white-space: pre-wrap; }
.dj-room .dj-budget { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.dj-room .dj-bar-track { flex: 1; max-width: 260px; height: 7px; border-radius: 3px; background: color-mix(in srgb, var(--mist) 14%, transparent); overflow: hidden; }
.dj-room .dj-bar-fill { height: 100%; background: var(--accent-jade); }
.dj-room .dj-bar-fill.is-over { background: color-mix(in srgb, var(--accent-lacquer) 25%, var(--blossom)); }
.dj-room .dj-stops { list-style: none; margin: 0; padding: 0; }
.dj-room .dj-stops li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border); }
.dj-room .dj-stops li:first-child { border-top: 0; }
.dj-room .dj-stop-no { font: var(--size-md) var(--font-serif); color: var(--gold); text-align: right; padding-top: 2px; }
.dj-room .dj-check-kind { font-size: var(--size-xs); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 4px; }
.dj-room .dj-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; cursor: pointer; }
.dj-room .dj-check.is-done span { color: var(--mist); text-decoration: line-through; }
.dj-room .dj-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.dj-room .dj-photo { margin: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dj-room .dj-photo.is-cover { border-color: var(--gold); }
.dj-room .dj-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dj-room .dj-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; font-size: var(--size-2xs); color: var(--mist); }
/* the known world */
.dj-room .dj-region { color: var(--gold); font-size: var(--size-lg); margin-bottom: 6px; }
.dj-room .dj-country { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.dj-room .dj-country:first-of-type { border-top: 0; }
.dj-room .dj-country-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dj-room .dj-country-head strong { font-size: var(--size-md); }
.dj-room .dj-world-teaser h2 { margin: 4px 0; }
/* wishes */
.dj-room .dj-wishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.dj-room .dj-wish { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.dj-room .dj-wish-head { display: flex; gap: 8px; align-items: baseline; }
.dj-room .dj-wish-head h3 { font-size: var(--size-lg); }
.dj-room .dj-why { line-height: 1.65; }
.dj-room .dj-wish-line { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); }
.dj-room .dj-wish-line:first-of-type { border-top: 0; }
.dj-room .dj-year { font-size: var(--size-xl); color: var(--gold); }
@media (max-width: 900px) {
  .dj-room .dj-columns { grid-template-columns: 1fr; }
  .dj-room .dj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-room .dj-hero { grid-template-columns: 1fr; }
  .dj-room .dj-cover.is-large { width: 100%; max-width: 320px; height: 180px; }
}
/* Drop 163c: the Imperial Gardens' one Dashboard - music and journeys in one board: one row of counts (each a door),
   then the panels of both halls together, each marked with its hall in its kicker. */
.gd-room .gd-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.gd-room a.gd-stat { color: inherit; text-decoration: none; transition: border-color .15s ease; }
.gd-room a.gd-stat:hover, .gd-room a.gd-stat:focus-visible { border-color: var(--accent); }
.gd-room .gd-panel .sg-panel-head { align-items: flex-end; }
.gd-room .gd-panel .sg-panel-head .sg-kicker { margin-bottom: 4px; }
.gd-room .gd-doors { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.gd-room .gd-journey + .sg-engagement, .gd-room .sg-engagement + .gd-journey, .gd-room .sg-engagement + .sg-engagement { margin-top: 10px; }
.gd-room .gd-journey > .dj-muted { margin: 8px 2px 0; }
.gd-room .sg-history-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.gd-room .sg-history-date { white-space: nowrap; }
@media (max-width: 1180px) { .gd-room .gd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .gd-room .gd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-room .gd-panel .sg-panel-head { flex-wrap: wrap; align-items: flex-start; gap: 6px; }
  .gd-room .gd-doors { width: 100%; justify-content: flex-start; }
}

@media (pointer: coarse) {
  .dj-room button, .dj-room .dj-button { min-height: 44px; }
}

/* Drop 43: the Rear Palace Dashboard with tonight's plaque, and the
   Rear Palace Report. Palace surfaces; the plaque in lacquer and gold.
   Prefixed rp-. */
.rp-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.rp-room * { box-sizing: border-box; }
.rp-room h1, .rp-room h2, .rp-room h3, .rp-room p { margin: 0; }
.rp-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.rp-room h2 { font: var(--size-xl) var(--font-serif); }
.rp-room h3 { font: var(--size-xl) var(--font-serif); }
.rp-room a { color: inherit; }
.rp-room button { font: inherit; color: inherit; cursor: pointer; }
.rp-room .rp-muted { color: var(--mist); font-size: var(--size-xs); }
.rp-room .rp-small { font-size: var(--size-2xs); color: var(--mist); margin-top: 10px; }
.rp-room .rp-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; }
.rp-room .rp-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.rp-room .rp-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rp-room .rp-heading .rp-muted { margin-top: 6px; font-size: var(--size-sm); }
.rp-room .rp-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: var(--size-xs); text-decoration: none; }
.rp-room .rp-quiet { border: 0; background: transparent; color: var(--accent); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.rp-room .rp-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.rp-room .rp-strong { font-weight: 500; text-decoration: none; }
.rp-room .rp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.rp-room .rp-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-room .rp-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-room .rp-stack { display: flex; flex-direction: column; min-width: 0; }
/* the ranks */
.rp-room .rp-ranks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rp-room .rp-rank { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); text-decoration: none;
  border-top: 3px solid var(--border); }
.rp-room .rp-rank[data-accent="gold"] { border-top-color: var(--gold); }
.rp-room .rp-rank[data-accent="lacquer"] { border-top-color: var(--accent-lacquer); }
.rp-room .rp-rank[data-accent="jade"] { border-top-color: var(--accent-jade); }
.rp-room .rp-rank[data-accent="moon"] { border-top-color: var(--moon); }
.rp-room .rp-rank[data-accent="mist"] { border-top-color: var(--mist); }
.rp-room .rp-rank strong { font: var(--size-xl)/1.2 var(--font-serif); font-weight: 400; }
.rp-room .rp-rank span { font-size: var(--size-xs); }
.rp-room .rp-rank small { font-size: var(--size-2xs); color: var(--mist); }
.rp-room .rp-rank.is-unranked { opacity: .75; }
/* people and faces */
.rp-room .rp-face { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--gold); font-size: var(--size-md); }
.rp-room .rp-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-room .rp-face.is-large { width: 140px; height: 140px; font-size: var(--size-4xl); border: 3px solid var(--gold); }
.rp-room .rp-person { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); text-decoration: none; }
.rp-room .rp-person:first-of-type { border-top: 0; }
.rp-room .rp-person strong { font-weight: 500; }
.rp-room .rp-edict, .rp-room .rp-moment { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border); }
.rp-room .rp-edict { grid-template-columns: 22px minmax(0, 1fr); }
.rp-room .rp-edict:first-of-type, .rp-room .rp-moment:first-of-type { border-top: 0; }
.rp-room .rp-edict-mark { font-size: var(--size-md); color: var(--mist); text-align: center; }
.rp-room .rp-edict-mark.is-up { color: var(--accent-jade); }
.rp-room .rp-edict-mark.is-down { color: var(--accent-lacquer); }
.rp-room .rp-edict-mark.is-new { color: var(--gold); }
/* the plaque */
.rp-room .rp-plaque { display: grid; grid-template-columns: 56px 140px minmax(0, 1fr); gap: 18px; align-items: center; text-decoration: none; padding: 16px 18px;
  border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-lacquer) 22%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border)); }
.rp-room .rp-plaque-tag { width: 56px; min-height: 150px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 50%, var(--blossom)), color-mix(in srgb, var(--gold) 50%, var(--mist))); display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, color-mix(in srgb, var(--gold) 55%, var(--surface)) 50%, transparent); position: relative; }
.rp-room .rp-plaque-tag::before { content: ''; position: absolute; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 45%, var(--ink)); }
.rp-room .rp-plaque-name { display: flex; flex-direction: column; align-items: center; font: var(--size-md)/1.15 var(--font-serif); color: color-mix(in srgb, var(--gold) 28%, var(--ink)); padding: 18px 0 6px; }
.rp-room .rp-plaque-name span { display: block; }
.rp-room .rp-plaque-words h3 { margin: 4px 0 8px; }
.rp-room .rp-merits { line-height: 1.6; margin-bottom: 8px; }
.rp-room .rp-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.rp-room .rp-twin-cell { display: flex; flex-direction: column; align-items: center; padding: 10px; text-decoration: none; border-radius: 8px; }
.rp-room .rp-twin-cell:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.rp-room .rp-twin-cell strong { font: var(--size-xl) var(--font-serif); font-weight: 400; }
.rp-room .rp-twin-cell span { font-size: var(--size-xs); color: var(--mist); }
/* the report */
.rp-room .rp-month-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.rp-room .rp-month { font-size: var(--size-xl); }
.rp-room .rp-masthead { padding: 16px 20px; border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 10px; background: var(--surface); margin-bottom: 16px; }
.rp-room .rp-summary { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rp-room .rp-summary div { display: flex; flex-direction: column; }
.rp-room .rp-summary strong { font: var(--size-xl)/1.2 var(--font-serif); font-weight: 400; }
.rp-room .rp-summary span { font-size: var(--size-2xs); color: var(--mist); }
@media (max-width: 900px) {
  .rp-room .rp-columns { grid-template-columns: 1fr; }
  .rp-room .rp-ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-room .rp-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rp-room .rp-plaque { grid-template-columns: 56px minmax(0, 1fr); }
  .rp-room .rp-plaque .rp-face.is-large { width: 90px; height: 90px; }
}

/* Drop 44: the rank halls' twelve rooms - portraits, merits, moments,
   roles, charms, seasons, works, rising, promise, trials, retired and
   records. Palace surfaces, the halls' gold. Prefixed hr-. */
.hr-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.hr-room * { box-sizing: border-box; }
.hr-room h1, .hr-room h2, .hr-room p { margin: 0; }
.hr-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.hr-room h2 { font: var(--size-xl) var(--font-serif); }
.hr-room a { color: inherit; }
.hr-room .hr-muted { color: var(--mist); font-size: var(--size-xs); }
.hr-room .hr-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.hr-room .hr-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hr-room .hr-heading .hr-muted { margin-top: 6px; font-size: var(--size-sm); }
.hr-room .hr-count { font-size: var(--size-2xs); color: var(--gold); padding: 3px 9px; border: 1px solid var(--border); border-radius: 12px; white-space: nowrap; }
.hr-room .hr-quiet { color: var(--accent); text-decoration: none; }
.hr-room .hr-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.hr-room .hr-strong { font-weight: 500; text-decoration: none; }
.hr-room .hr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; min-width: 0; }
.hr-room .hr-waiting { border-style: dashed; }
.hr-room .hr-waiting h2 { font-size: var(--size-md); color: var(--mist); margin-bottom: 6px; }
.hr-room .hr-person { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; margin-bottom: 8px; }
.hr-room .hr-person strong { font-size: var(--size-md); font-weight: 500; }
.hr-room .hr-face { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--gold); font-size: var(--size-md); }
.hr-room .hr-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-room .hr-written { line-height: 1.7; white-space: pre-wrap; padding: 4px 0; }
.hr-room .hr-unwritten { padding: 4px 0; }
.hr-room .hr-year { color: var(--gold); font-size: var(--size-xl); margin: 10px 0 8px; }
.hr-room .hr-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px 16px; }
.hr-room .hr-moment, .hr-room .hr-edict { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--border); }
.hr-room .hr-edict { grid-template-columns: 22px minmax(0, 1fr); }
.hr-room .hr-moment:first-of-type, .hr-room .hr-edict:first-of-type { border-top: 0; }
.hr-room .hr-mark { text-align: center; color: var(--mist); }
.hr-room .hr-mark.is-up { color: var(--accent-jade); }
.hr-room .hr-mark.is-down { color: var(--accent-lacquer); }
.hr-room .hr-mark.is-new { color: var(--gold); }
.hr-room .hr-role { padding: 6px 0; border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.hr-room .hr-role:first-of-type { border-top: 0; }
.hr-room .hr-star { color: var(--mist); }
.hr-room .hr-star.is-on { color: var(--gold); }
.hr-room .hr-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 6px; }
.hr-room .hr-shot { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.hr-room .hr-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-room .hr-shot-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: var(--size-2xs); color: var(--blossom);
  background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 70%, transparent)); }
.hr-room .hr-track { height: 7px; border-radius: 3px; background: color-mix(in srgb, var(--mist) 14%, transparent); overflow: hidden; margin: 6px 0; max-width: 360px; }
.hr-room .hr-fill { height: 100%; background: var(--gold); }

/* Drop 46: the Outer Court, Stage 1 - the Hall of Supreme Harmony and the
   planner core, after the brought design. Palace surfaces, the Court's
   mist accent. Prefixed oc-. */
.oc-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.oc-room * { box-sizing: border-box; }
.oc-room h1, .oc-room h2, .oc-room h3, .oc-room p { margin: 0; }
.oc-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.oc-room h2 { font: var(--size-xl) var(--font-serif); }
.oc-room h3 { font: var(--size-md) var(--font-serif); }
.oc-room a { color: inherit; }
.oc-room button, .oc-room select, .oc-room textarea { font: inherit; color: inherit; }
.oc-room button { cursor: pointer; }
.oc-room .oc-muted { color: var(--mist); font-size: var(--size-xs); }
.oc-room .oc-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.oc-room .oc-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.oc-room .oc-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.oc-room .oc-heading .oc-muted { margin-top: 6px; font-size: var(--size-sm); }
.oc-room .oc-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: var(--size-xs); text-decoration: none; white-space: nowrap; }
.oc-room .oc-button:hover { border-color: var(--gold); }
.oc-room .oc-primary { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); }
.oc-room .oc-quiet { border: 0; background: transparent; color: var(--gold); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.oc-room .oc-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.oc-room .oc-danger { color: var(--accent-lacquer); }
.oc-room .oc-strong { font-weight: 500; text-decoration: none; }
.oc-room .oc-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-sm); }
.oc-room .oc-icon:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--blossom); }
.oc-room .oc-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); white-space: nowrap; }
.oc-room .oc-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.oc-room .oc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.oc-room .oc-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.oc-room .oc-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.oc-room .oc-stack { display: flex; flex-direction: column; min-width: 0; }
.oc-room .oc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.oc-room .oc-inline { display: inline-flex; align-items: center; gap: 4px; }
.oc-room .oc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.oc-room .oc-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.oc-room .oc-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; }
.oc-room .oc-stat span { font-size: var(--size-xs); color: var(--mist); }
.oc-room .oc-line { padding: 5px 0; border-top: 1px solid var(--border); }
.oc-room .oc-line:first-of-type { border-top: 0; }
/* tabs and the body */
.oc-room .oc-tabs { display: flex; gap: 0 18px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.oc-room .oc-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 2px 12px; color: var(--mist); font-size: var(--size-xs); }
.oc-room .oc-tab[aria-selected="true"] { color: var(--blossom); border-bottom-color: var(--gold); }
.oc-room .oc-body { min-width: 0; }
.oc-room .oc-intention { font: italic var(--size-md)/1.6 var(--font-serif); color: var(--gold); margin-bottom: 8px; white-space: pre-wrap; }
.oc-room .oc-plain { font-size: var(--size-xs); color: var(--mist); }
.oc-room .oc-block { color: var(--gold); font-size: var(--size-2xs); letter-spacing: .12em; text-transform: uppercase; margin: 12px 0 4px; font-family: var(--font-sans); }
/* sources: a task, a routine, a dated obligation */
.oc-room .oc-source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.oc-room .oc-source:first-of-type { border-top: 0; }
.oc-room .oc-source input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); }
.oc-room .oc-source.is-done strong { text-decoration: line-through; color: var(--mist); font-weight: 400; }
.oc-room .oc-source.is-overdue strong { color: var(--accent-lacquer); }
.oc-room .oc-source-mark { color: var(--gold); width: 17px; text-align: center; }
/* projects */
.oc-room .oc-project { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); text-decoration: none; }
.oc-room .oc-project:first-of-type { border-top: 0; }
.oc-room .oc-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--mist) 14%, transparent); overflow: hidden; }
.oc-room .oc-track.is-wide { margin: 10px 0 6px; max-width: 420px; }
.oc-room .oc-fill { height: 100%; background: var(--gold); }
.oc-room .oc-title { font-size: var(--size-2xl); margin: 4px 0; }
.oc-room .oc-quote { font: italic var(--size-md)/1.7 var(--font-serif); color: var(--mist); white-space: pre-wrap; margin-top: 6px; }
/* the decks */
.oc-room .oc-deck-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.oc-room .oc-deck-nav h2 { font-size: var(--size-xl); }
.oc-room .oc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.oc-room .oc-day { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; min-width: 0; }
.oc-room .oc-day.is-today { border-color: var(--gold); }
.oc-room .oc-day h3 { font-size: var(--size-xs); color: var(--gold); margin-bottom: 4px; font-family: var(--font-sans); }
.oc-room .oc-day .oc-source { grid-template-columns: auto minmax(0, 1fr); font-size: var(--size-xs); }
.oc-room .oc-day .oc-source .oc-badge { display: none; }
.oc-room .oc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.oc-room .oc-month-head { font-size: var(--size-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); padding: 4px; }
.oc-room .oc-month-cell { min-height: 74px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oc-room .oc-month-cell.is-empty { background: transparent; border-color: transparent; }
.oc-room .oc-month-cell.is-today { border-color: var(--gold); }
.oc-room .oc-month-cell strong { font-weight: 400; color: var(--gold); font-size: var(--size-xs); }
.oc-room .oc-dot { font-size: var(--size-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-room .oc-dot.is-done { color: var(--mist); text-decoration: line-through; }
.oc-room .oc-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.oc-room .oc-month-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.oc-room .oc-month-card strong { font: var(--size-md) var(--font-serif); font-weight: 400; }
.oc-room .oc-timeline-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); }
.oc-room .oc-timeline-row:first-of-type { border-top: 0; }
.oc-room .oc-timeline-bar { position: relative; height: 10px; background: color-mix(in srgb, var(--mist) 12%, transparent); border-radius: 5px; }
.oc-room .oc-timeline-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--gold); }
.oc-room .oc-timeline-fill.is-done { background: var(--accent-jade); }
.oc-room .oc-timeline-fill.is-paused { background: var(--mist); }
/* the matrix */
.oc-room .oc-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-room .oc-quadrant { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.oc-room .oc-quadrant.is-unsorted { grid-column: 1 / -1; border-style: dashed; }
.oc-room .oc-matrix-task { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.oc-room .oc-matrix-task:first-of-type { border-top: 0; }
.oc-room .oc-matrix-task select { font-size: var(--size-2xs); min-height: 30px; }
/* focus */
.oc-room .oc-timer { font: 64px/1 var(--font-serif); color: var(--gold); letter-spacing: .04em; text-align: center; padding: 18px 0 8px; font-variant-numeric: tabular-nums; }
.oc-room .oc-source.is-open .oc-source-mark { color: var(--mist); }
/* the review */
.oc-room .oc-textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--ink); color: var(--blossom); resize: vertical; margin-bottom: 10px; }
.oc-room .oc-weather-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.oc-room .oc-weather { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--size-sm); }
.oc-room .oc-weather small { font-size: var(--size-3xs); color: var(--mist); }
.oc-room .oc-weather[data-weather="Bright"] { color: var(--gold); }
.oc-room .oc-weather[data-weather="Stormy"], .oc-room .oc-weather[data-weather="Heavy"] { color: var(--accent-lacquer); }
.oc-room .oc-weather[data-weather="Calm"] { color: var(--accent-jade); }
/* the mandate */
.oc-room .oc-mandate { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 12px; padding: 28px 32px; }
.oc-room .oc-vision { font: var(--size-xl)/1.6 var(--font-serif); white-space: pre-wrap; margin-bottom: 18px; }
.oc-room .oc-values { line-height: 1.75; white-space: pre-wrap; margin-bottom: 14px; }
@media (max-width: 1000px) {
  .oc-room .oc-columns { grid-template-columns: 1fr; }
  .oc-room .oc-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-room .oc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-room .oc-matrix { grid-template-columns: 1fr; }
  .oc-room .oc-timeline-row { grid-template-columns: 1fr; }
  .oc-room .oc-month-cell { min-height: 54px; }
  .oc-room .oc-dot { display: none; }
}
@media (pointer: coarse) {
  .oc-room button, .oc-room .oc-button { min-height: 44px; }
}

/* Drop 47: the Outer Court, Stage 2 - the Study's cards, the Ministry's
   records and attachments, the writing sheet, and the shelf. */
.oc-room .oc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.oc-room .oc-chip { padding: 5px 11px; border: 1px solid var(--border); border-radius: 14px; font-size: var(--size-xs); color: var(--mist); text-decoration: none; }
.oc-room .oc-chip[aria-pressed="true"] { border-color: var(--gold); color: var(--blossom); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.oc-room .oc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.oc-room .oc-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; min-width: 0; }
.oc-room .oc-card:hover { border-color: var(--gold); }
.oc-room .oc-card strong { font: var(--size-md) var(--font-serif); font-weight: 400; }
.oc-room .oc-card p { color: var(--mist); font-size: var(--size-xs); line-height: 1.6; }
.oc-room .oc-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.oc-room .oc-records { display: flex; flex-direction: column; gap: 6px; }
.oc-room .oc-record { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; text-decoration: none; min-width: 0; }
.oc-room .oc-record:hover { border-color: var(--gold); }
.oc-room .oc-record.is-overdue strong { color: var(--accent-lacquer); }
.oc-room .oc-writing { font: var(--size-md)/1.8 var(--font-serif); white-space: pre-wrap; margin: 10px 0 12px; }
.oc-room .oc-facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 12px; margin: 10px 0; }
.oc-room .oc-facts dt { color: var(--mist); font-size: var(--size-xs); }
.oc-room .oc-facts dd { margin: 0; }

/* Drop 48: the Inner Court, Stage 3 - routines checked one day at a time
   with a gentle history, and the journals. Palace surfaces, the Inner
   Court's jade. Prefixed ic-. */
.ic-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.ic-room * { box-sizing: border-box; }
.ic-room h1, .ic-room h2, .ic-room h3, .ic-room p { margin: 0; }
.ic-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.ic-room h2 { font: var(--size-xl) var(--font-serif); }
.ic-room h3 { font: var(--size-md) var(--font-serif); }
.ic-room a { color: inherit; }
.ic-room button, .ic-room select, .ic-room textarea { font: inherit; color: inherit; }
.ic-room button { cursor: pointer; }
.ic-room .ic-muted { color: var(--mist); font-size: var(--size-xs); }
.ic-room .ic-small { color: var(--mist); font-size: var(--size-xs); margin-top: 8px; line-height: 1.6; }
.ic-room .ic-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.ic-room .ic-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.ic-room .ic-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ic-room .ic-heading .ic-muted { margin-top: 6px; font-size: var(--size-sm); }
.ic-room .ic-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: var(--size-xs); text-decoration: none; white-space: nowrap; }
.ic-room .ic-button:hover { border-color: var(--accent); }
.ic-room .ic-primary { background: var(--accent); border-color: var(--accent); }
.ic-room .ic-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-sm); }
.ic-room .ic-icon:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--blossom); }
.ic-room .ic-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); margin-left: 8px; }
.ic-room .ic-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.ic-room .ic-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.ic-room .ic-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ic-room .ic-inline { display: inline-flex; align-items: center; gap: 4px; }
.ic-room .ic-line { padding: 5px 0; border-top: 1px solid var(--border); }
.ic-room .ic-line:first-of-type { border-top: 0; }
.ic-room .ic-big { font: var(--size-3xl)/1.1 var(--font-serif); color: var(--accent-jade); }
.ic-room .ic-block { color: var(--gold); font-size: var(--size-2xs); letter-spacing: .12em; text-transform: uppercase; margin: 12px 0 4px; font-family: var(--font-sans); }
.ic-room .ic-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); cursor: pointer; font-size: var(--size-sm); }
.ic-room .ic-check:first-of-type { border-top: 0; }
.ic-room .ic-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.ic-room .ic-check.is-done span { color: var(--mist); text-decoration: line-through; }
.ic-room .ic-routine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.ic-room .ic-routine:first-of-type { border-top: 0; }
.ic-room .ic-routine.is-aside { opacity: .6; }
.ic-room .ic-routine strong { font-size: var(--size-sm); font-weight: 500; }
.ic-room .ic-routine-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ic-room .ic-history { display: grid; grid-template-columns: repeat(14, 10px); gap: 3px; }
.ic-room .ic-day { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--mist) 18%, transparent); }
.ic-room .ic-day.is-kept { background: var(--accent-jade); }
.ic-room .ic-entry { padding: 12px 0; border-top: 1px solid var(--border); position: relative; }
.ic-room .ic-entry:first-of-type { border-top: 0; }
.ic-room .ic-entry-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ic-room .ic-entry-head strong { font: var(--size-md) var(--font-serif); font-weight: 400; }
.ic-room .ic-text { line-height: 1.7; white-space: pre-wrap; margin-top: 6px; }
.ic-room .ic-entry .ic-inline { position: absolute; top: 8px; right: 0; }
.ic-room .ic-weather-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.ic-room .ic-weather { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--size-sm); }
.ic-room .ic-weather small { font-size: var(--size-3xs); color: var(--mist); }
.ic-room .ic-weather[data-weather="Bright"] { color: var(--gold); }
.ic-room .ic-weather[data-weather="Stormy"], .ic-room .ic-weather[data-weather="Heavy"] { color: var(--accent-lacquer); }
.ic-room .ic-weather[data-weather="Calm"] { color: var(--accent-jade); }
@media (max-width: 760px) {
  .ic-room .ic-routine { grid-template-columns: 1fr; }
  .ic-room .ic-routine-side { align-items: flex-start; }
}
@media (pointer: coarse) {
  .ic-room button, .ic-room .ic-button { min-height: 44px; }
}

/* Drop 49: the Inner Court, Stage 4 - stock and repairs, dishes and the
   dish page, the menu planner, and culinary notes. */
.ic-room .ic-quiet { border: 0; background: transparent; color: var(--accent-jade); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.ic-room .ic-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.ic-room .ic-danger { color: var(--accent-lacquer); }
.ic-room .ic-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ic-room .ic-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ic-room .ic-chip { padding: 5px 11px; border: 1px solid var(--border); border-radius: 14px; background: transparent; font-size: var(--size-xs); color: var(--mist); }
.ic-room .ic-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--blossom); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ic-room .ic-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ic-room .ic-nav h2 { font-size: var(--size-xl); }
.ic-room .ic-stock { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.ic-room .ic-stock:first-of-type { border-top: 0; }
.ic-room .ic-stock.is-overdue strong { color: var(--accent-lacquer); }
.ic-room .ic-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ic-room .ic-dish { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; text-decoration: none; min-width: 0; }
.ic-room .ic-panel .ic-dish { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ic-room .ic-dish:hover { border-color: var(--accent); }
.ic-room .ic-dish strong { font-size: var(--size-sm); font-weight: 500; }
.ic-room .ic-dish-pic { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; font-size: var(--size-xl); color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--surface)); flex: none; }
.ic-room .ic-dish-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ic-room .ic-dish-pic.is-large { width: 220px; height: 220px; border-radius: 12px; font-size: 64px; }
.ic-room .ic-dish-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.ic-room .ic-dish-title { font-size: var(--size-2xl); margin: 4px 0 6px; }
.ic-room .ic-stars { color: var(--gold); letter-spacing: .1em; font-size: var(--size-sm); }
.ic-room .ic-menu-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.ic-room .ic-menu-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.ic-room .ic-menu-day { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 0; min-height: 70px; }
.ic-room .ic-menu-day.is-today { border-color: var(--accent); }
.ic-room .ic-menu-day h3 { font-size: var(--size-xs); color: var(--gold); margin-bottom: 4px; font-family: var(--font-sans); }
.ic-room .ic-menu-slot { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--border); }
.ic-room .ic-menu-slot:first-of-type { border-top: 0; }
.ic-room .ic-menu-slot small { font-size: var(--size-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.ic-room .ic-menu-meal { border: 0; background: transparent; text-align: left; padding: 2px 0; font-size: var(--size-xs); color: var(--blossom); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-room .ic-menu-meal:hover { color: var(--accent-jade); }
.ic-room .ic-menu-add { border: 1px dashed var(--border); background: transparent; color: var(--mist); font-size: var(--size-xs); padding: 1px 0; border-radius: 4px; }
.ic-room .ic-menu-add:hover { border-color: var(--accent); color: var(--blossom); }
.ic-room .ic-waiting { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 1000px) {
  .ic-room .ic-columns { grid-template-columns: 1fr; }
  .ic-room .ic-menu-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-room .ic-dish-hero { grid-template-columns: 1fr; }
  .ic-room .ic-dish-pic.is-large { width: 100%; max-width: 320px; height: 200px; }
  .ic-room .ic-menu-month .ic-menu-slot small { display: none; }
}

/* Drop 50: the Allied Courts - the blog's ideas, drafts, calendar,
   archive and reception; the sanctuary's tasks, events, roster and
   announcements. Palace surfaces, the wing's mist accent. Prefixed ac-. */
.ac-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.ac-room * { box-sizing: border-box; }
.ac-room h1, .ac-room h2, .ac-room p { margin: 0; }
.ac-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.ac-room h2 { font: var(--size-xl) var(--font-serif); }
.ac-room a { color: inherit; }
.ac-room button { font: inherit; color: inherit; cursor: pointer; }
.ac-room .ac-muted { color: var(--mist); font-size: var(--size-xs); }
.ac-room .ac-small { color: var(--mist); font-size: var(--size-xs); margin-top: 4px; line-height: 1.6; white-space: pre-wrap; }
.ac-room .ac-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.ac-room .ac-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.ac-room .ac-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ac-room .ac-heading .ac-muted { margin-top: 6px; font-size: var(--size-sm); }
.ac-room .ac-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: var(--size-xs); text-decoration: none; white-space: nowrap; }
.ac-room .ac-button:hover { border-color: var(--gold); }
.ac-room .ac-primary { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); }
.ac-room .ac-quiet { border: 0; background: transparent; color: var(--gold); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.ac-room .ac-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.ac-room .ac-strong { font-weight: 500; text-decoration: none; }
.ac-room .ac-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-sm); }
.ac-room .ac-icon:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--blossom); }
.ac-room .ac-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); white-space: nowrap; }
.ac-room .ac-badge[data-tone="gold"] { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.ac-room .ac-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.ac-room .ac-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ac-room .ac-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.ac-room .ac-inline { display: inline-flex; align-items: center; gap: 6px; }
.ac-room .ac-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ac-room .ac-nav h2 { font-size: var(--size-xl); }
.ac-room .ac-line { padding: 5px 0; border-top: 1px solid var(--border); }
.ac-room .ac-line:first-of-type { border-top: 0; }
.ac-room .ac-done { color: var(--mist); }
.ac-room .ac-year { color: var(--gold); font-size: var(--size-xl); margin: 10px 0 8px; }
.ac-room .ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ac-room .ac-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.ac-room .ac-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; }
.ac-room .ac-stat span { font-size: var(--size-xs); color: var(--mist); }
.ac-room .ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ac-room .ac-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.ac-room .ac-card strong { font: var(--size-md) var(--font-serif); font-weight: 400; }
.ac-room .ac-card p { color: var(--mist); font-size: var(--size-xs); line-height: 1.6; }
.ac-room .ac-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ac-room .ac-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.ac-room .ac-record:first-of-type { border-top: 0; }
.ac-room .ac-record:has(> input[type="checkbox"]) { grid-template-columns: auto minmax(0, 1fr) auto; }
.ac-room .ac-record input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); }
.ac-room .ac-record.is-overdue strong { color: var(--accent-lacquer); }
.ac-room .ac-record strong { font-size: var(--size-sm); font-weight: 500; }
.ac-room .ac-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.ac-room .ac-month-head { font-size: var(--size-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); padding: 4px; }
.ac-room .ac-month-cell { min-height: 74px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-room .ac-month-cell.is-empty { background: transparent; border-color: transparent; }
.ac-room .ac-month-cell.is-today { border-color: var(--gold); }
.ac-room .ac-month-cell strong { font-weight: 400; color: var(--gold); font-size: var(--size-xs); }
.ac-room .ac-dot { font-size: var(--size-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-room .ac-dot.is-published { color: var(--accent-jade); }
@media (max-width: 900px) {
  .ac-room .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-room .ac-month-cell { min-height: 54px; }
  .ac-room .ac-dot { display: none; }
  .ac-room .ac-record { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .ac-room button, .ac-room .ac-button { min-height: 44px; }
}

/* Drop 52: the BL Pavilion's and Concert Relics' Artist corners - the
   roster, the dossier, and each corner's gatherings. Prefixed c2-. */
.c2-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.c2-room * { box-sizing: border-box; }
.c2-room h1, .c2-room h2, .c2-room p { margin: 0; }
.c2-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.c2-room h2 { font: var(--size-xl) var(--font-serif); }
.c2-room a { color: inherit; }
.c2-room button { font: inherit; color: inherit; cursor: pointer; }
.c2-room .c2-muted { color: var(--mist); font-size: var(--size-xs); }
.c2-room .c2-small { color: var(--mist); font-size: var(--size-xs); margin-top: 4px; }
.c2-room .c2-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.c2-room .c2-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.c2-room .c2-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.c2-room .c2-heading .c2-muted { margin-top: 6px; font-size: var(--size-sm); }
.c2-room .c2-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: var(--size-xs); text-decoration: none; }
.c2-room .c2-button:hover { border-color: var(--gold); }
.c2-room .c2-quiet { border: 0; background: transparent; color: var(--gold); font-size: var(--size-xs); padding: 4px 0; text-decoration: none; }
.c2-room .c2-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.c2-room .c2-strong { font-weight: 500; text-decoration: none; }
.c2-room .c2-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-sm); }
.c2-room .c2-icon:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--blossom); }
.c2-room .c2-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs); background: color-mix(in srgb, var(--mist) 14%, transparent); color: var(--mist); }
.c2-room .c2-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; min-width: 0; }
.c2-room .c2-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.c2-room .c2-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.c2-room .c2-stack { display: flex; flex-direction: column; min-width: 0; }
.c2-room .c2-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.c2-room .c2-line { padding: 5px 0; border-top: 1px solid var(--border); }
.c2-room .c2-line:first-of-type { border-top: 0; }
.c2-room .c2-text { line-height: 1.7; white-space: pre-wrap; padding-top: 6px; }
.c2-room .c2-bio { font: italic var(--size-md)/1.7 var(--font-serif); margin-top: 8px; white-space: pre-wrap; }
.c2-room .c2-title { font-size: var(--size-2xl); margin: 4px 0; }
.c2-room .c2-face { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--gold); font-size: var(--size-lg); }
.c2-room .c2-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c2-room .c2-face.is-large { width: 150px; height: 150px; font-size: 52px; border: 3px solid var(--gold); }
.c2-room .c2-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.c2-room .c2-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.c2-room .c2-person { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; text-decoration: none; }
.c2-room .c2-person:hover { border-color: var(--gold); }
.c2-room .c2-person strong { font-size: var(--size-sm); font-weight: 500; }
.c2-room .c2-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.c2-room .c2-row:first-of-type { border-top: 0; }
.c2-room .c2-concert { padding: 9px 0; border-top: 1px solid var(--border); }
.c2-room .c2-concert:first-of-type { border-top: 0; }
.c2-room .c2-relic { padding-left: 14px; border-top: 0; }
.c2-room .c2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.c2-room .c2-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.c2-room .c2-stat strong { font: var(--size-2xl)/1.2 var(--font-serif); font-weight: 400; }
.c2-room .c2-stat span { font-size: var(--size-xs); color: var(--mist); }
@media (max-width: 900px) {
  .c2-room .c2-columns { grid-template-columns: 1fr; }
  .c2-room .c2-hero { grid-template-columns: 1fr; }
  .c2-room .c2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Drop 53: the Jade Mountain redesign of Immortal Cultivation - the
   brought design's shapes in the palace's own colours. Shared by the
   Cultivation rooms as they are redone. Prefixed jm-. */
.jm-page { color: var(--blossom); font: var(--size-sm)/1.55 var(--font-sans); width: 100%; min-width: 0; }
.jm-page * { box-sizing: border-box; }
.jm-page h2, .jm-page h3, .jm-page h4, .jm-page p { margin: 0; }
.jm-page h2, .jm-page h3 { font-family: var(--font-serif); font-weight: 400; }
.jm-page a { color: inherit; text-decoration: none; }
.jm-grow { flex: 1; min-width: 0; }
.jm-row { display: flex; align-items: center; gap: 10px; }
.jm-between { justify-content: space-between; }
.jm-wrap { flex-wrap: wrap; }
.jm-muted { color: var(--mist); font-size: var(--size-xs); }
.jm-tiny { color: var(--mist); font-size: var(--size-3xs); }
.jm-eyebrow { font-size: var(--size-3xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.jm-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jm-tag { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-size: var(--size-3xs); letter-spacing: 0.02em; color: var(--mist); white-space: nowrap; }
.jm-tag[data-tone="gold"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 32%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.jm-tag[data-tone="jade"] { color: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 32%, transparent); background: color-mix(in srgb, var(--accent-jade) 7%, transparent); }
.jm-page .jm-link { color: var(--gold); font-size: var(--size-xs); }
.jm-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.jm-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; min-height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: var(--size-xs); white-space: nowrap; }
.jm-button:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--blossom); }
.jm-button.is-small { padding: 6px 12px; min-height: 32px; font-size: var(--size-2xs); }
.jm-button.is-primary { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--blossom); }
.jm-panel { background: linear-gradient(140deg, color-mix(in srgb, var(--accent-jade) 5%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 13px; padding: 24px; min-width: 0; }
.jm-panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.jm-panel-title h3 { font-size: var(--size-xl); }
.jm-panel-title p { font-size: var(--size-2xs); color: var(--mist); margin-top: 5px; }
.jm-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 16px; }
.jm-section-title h2 { font-size: var(--size-xl); }
.jm-section-title small { font-family: var(--font-sans); font-size: var(--size-2xs); color: var(--mist); margin-left: 12px; }
.jm-divider { height: 1px; background: var(--border); margin: 18px 0; }
.jm-progress { height: 5px; background: color-mix(in srgb, var(--mist) 14%, transparent); overflow: hidden; border-radius: 8px; margin: 12px 0 7px; }
.jm-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-jade), var(--gold)); border-radius: 8px; }
.jm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
/* the overview: your realm, and the title you wear */
.jm-overview { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; }
.jm-realm { position: relative; overflow: hidden; background: radial-gradient(circle at 0 20%, color-mix(in srgb, var(--accent-jade) 16%, transparent), transparent 62%), var(--surface); }
.jm-realm::after { content: ''; pointer-events: none; position: absolute; right: -55px; top: -75px; width: 250px; height: 250px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 7%, transparent); box-shadow: 0 0 0 25px color-mix(in srgb, var(--gold) 3%, transparent), 0 0 0 50px color-mix(in srgb, var(--gold) 2%, transparent); }
.jm-realm-body { display: flex; gap: 24px; align-items: center; position: relative; z-index: 1; }
.jm-realm-sigil { width: 150px; height: 150px; object-fit: contain; flex: none; }
.jm-realm-name { font-size: var(--size-2xl); margin: 9px 0 4px; }
.jm-realm-sub { font-size: var(--size-xs); color: var(--mist); }
.jm-qi { font: var(--size-2xl)/1.2 var(--font-serif); color: var(--gold); margin-top: 16px; }
.jm-qi small { font: var(--size-3xs) var(--font-sans); letter-spacing: 0.16em; color: var(--mist); margin-left: 9px; text-transform: uppercase; }
.jm-threshold { display: flex; justify-content: space-between; gap: 10px; font-size: var(--size-2xs); color: var(--mist); }
.jm-stage-track { display: flex; justify-content: space-between; gap: 8px; margin-top: 19px; border-top: 1px solid var(--border); padding-top: 16px; position: relative; z-index: 1; }
.jm-stage-track span { color: color-mix(in srgb, var(--mist) 70%, var(--ink)); font-size: var(--size-2xs); }
.jm-stage-track span::before { content: '\25c7'; margin-right: 5px; }
.jm-stage-track .is-passed { color: var(--accent-jade); }
.jm-stage-track .is-current { color: var(--gold); }
.jm-stage-track .is-current::before { content: '\25c6'; }
.jm-worn { background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 13%, var(--surface)), var(--surface)); display: flex; flex-direction: column; }
.jm-worn-body { display: flex; align-items: center; gap: 18px; margin: 14px 0 10px; }
.jm-worn-sigil { width: 104px; height: 104px; object-fit: contain; flex: none; }
.jm-worn h3 { font-size: var(--size-xl); line-height: 1.2; margin-bottom: 4px; }
.jm-worn-chinese { font-size: var(--size-md); color: var(--gold); margin-bottom: 8px; }
.jm-worn-text { font-size: var(--size-xs); color: var(--mist); line-height: 1.7; }
.jm-worn .jm-divider { margin-top: auto; }
/* five equal boxes */
.jm-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; }
.jm-metric { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 16px 19px; min-width: 0; }
.jm-metric-label { display: flex; align-items: center; gap: 8px; font-size: var(--size-2xs); color: var(--mist); }
.jm-metric-label .jm-icon { color: var(--gold); }
.jm-metric-value { display: block; font: var(--size-2xl)/1.3 var(--font-serif); font-weight: 400; margin-top: 7px; }
.jm-metric-foot { font-size: var(--size-3xs); color: var(--mist); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the Eight Paths, in the file's cards */
.jm-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jm-path { position: relative; display: block; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--surface) 80%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 12px; padding: 19px 19px 17px; overflow: hidden; transition: transform var(--fast), border-color var(--fast); }
.jm-path:hover { transform: translateY(-3px); border-color: var(--accent); }
.jm-path-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.jm-path-sigil { width: 66px; height: 66px; object-fit: contain; flex: none; }
.jm-path h3 { font-size: var(--size-lg); color: var(--accent); line-height: 1.2; }
.jm-path-top p { font-size: var(--size-3xs); color: var(--mist); margin-top: 3px; line-height: 1.4; }
.jm-path-zh { font: var(--size-xl) var(--font-serif); color: var(--accent); opacity: 0.22; flex: none; }
.jm-path-rank { font-size: var(--size-3xs); color: var(--mist); }
.jm-mastery { font: var(--size-xl) var(--font-serif); margin-top: 10px; }
.jm-mastery small { font: var(--size-3xs) var(--font-sans); color: var(--mist); margin-left: 5px; letter-spacing: 0.1em; }
.jm-path .jm-progress { height: 3px; margin-top: 10px; }
.jm-path .jm-progress span { background: var(--accent); }
.jm-arrow { position: absolute; right: 18px; bottom: 15px; color: var(--accent); font-size: var(--size-lg); }
/* banners raised */
.jm-quests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jm-quest { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.jm-quest-strip { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; font-size: var(--size-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent); border-bottom: 1px solid var(--border); }
.jm-quest-content { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jm-quest-head { display: flex; gap: 12px; align-items: flex-start; }
.jm-quest-emblem { width: 56px; height: 56px; object-fit: contain; flex: none; }
.jm-quest h3 { font-size: var(--size-lg); margin-top: 6px; line-height: 1.25; }
.jm-reward { color: var(--gold); font-size: var(--size-xs); }
.jm-quest-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
/* the reflection, on paper in our own cream */
/* deeds kept close */
.jm-shelf { display: flex; gap: 14px; overflow-x: auto; padding: 3px 0 13px; }
.jm-shelf-item { flex: 0 0 116px; text-align: center; padding: 10px 8px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--ink) 40%, var(--surface)); }
.jm-shelf-item:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.jm-shelf-sigil { display: block; width: 68px; height: 68px; object-fit: contain; margin: 0 auto 8px; }
.jm-shelf-name { display: block; font: var(--size-sm)/1.45 var(--font-serif); }
.jm-shelf-item small { font-size: var(--size-3xs); color: var(--mist); }
/* the chronicle, and the clearing pool */
.jm-activity { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.jm-activity:last-child { border-bottom: 0; }
.jm-activity-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.jm-activity h4 { font-size: var(--size-sm); font-weight: 500; }
.jm-activity p { font-size: var(--size-2xs); color: var(--mist); margin-top: 2px; }
.jm-amount { font: var(--size-sm) var(--font-serif); color: var(--gold); white-space: nowrap; }
.jm-amount.is-turbid { color: var(--accent-lacquer); }
.jm-cloud { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-lacquer) 22%, var(--surface)), var(--surface)); }
.jm-cloud-glyph { font: var(--size-3xl)/1 var(--font-serif); color: var(--accent-lacquer); }
.jm-cloud-title { font-size: var(--size-2xl); margin: 15px 0 10px; }
.jm-cloud-go { margin-top: 25px; gap: 14px; }
@media (max-width: 1200px) {
  .jm-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .jm-overview, .jm-split, .jm-quests { grid-template-columns: 1fr; }
  .jm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jm-realm-body { flex-direction: column; align-items: flex-start; }
  .jm-realm-sigil { width: 110px; height: 110px; }
}
@media (max-width: 560px) { .jm-paths { grid-template-columns: 1fr; } }

/* Drop 54: the Ten Realms and the Eight Paths, in the Jade Mountain style. */
.jm-back { display: inline-block; font-size: var(--size-xs); color: var(--mist); margin-bottom: 16px; }
.jm-back:hover { color: var(--gold); }
.jm-note { font-size: var(--size-xs); color: var(--mist); margin: 0 0 16px; font-style: italic; }
/* the map of the Ten Realms */
.jm-realm-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 17px; margin-top: 28px; }
.jm-realm-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
  border: 1px solid var(--border); border-radius: 13px; padding: 23px 12px 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent-jade) 7%, transparent), var(--surface)); transition: border-color var(--fast), transform var(--fast); }
.jm-realm-node:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.jm-realm-number { font-size: var(--size-3xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); }
.jm-realm-node-sigil { width: 100px; height: 100px; object-fit: contain; margin: 12px auto 14px; }
.jm-realm-node h3 { font-size: var(--size-lg); margin-bottom: 5px; line-height: 1.25; }
.jm-realm-node .jm-muted { font-size: var(--size-2xs); }
.jm-realm-node .jm-tag { margin-top: auto; }
.jm-realm-node > .jm-muted { margin-bottom: 16px; }
.jm-realm-node.is-current { border-color: var(--gold); background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--surface); }
.jm-realm-node.is-current::before { content: 'YOU ARE HERE'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink);
  padding: 3px 10px; border-radius: 3px; white-space: nowrap; font-size: var(--size-3xs); letter-spacing: 0.1em; font-weight: 600; }
.jm-realm-node.is-past { border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent); }
.jm-realm-node.is-veiled { border-style: dashed; }
.jm-realm-node.is-veiled .jm-realm-node-sigil { opacity: 0.4; }
/* the breakthrough panel beneath the stages: the gate, or the chosen stage */
.stage-block.is-shown { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.jm-gate { margin-top: 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface)); }
.jm-gate-title { font-size: var(--size-2xl); margin: 10px 0 6px; }
.jm-gate-chinese { font-size: var(--size-md); color: var(--gold); margin-left: 12px; }
.jm-gate-meaning { font: italic var(--size-sm)/1.6 var(--font-serif); color: var(--mist); }
.jm-gate-note { font-size: var(--size-xs); color: var(--mist); margin-top: 12px; }
.jm-metrics.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; }
/* the Eight Paths: the file's cards, a larger seal, and our figures */
.jm-paths.is-large .jm-path-top { flex-wrap: wrap; align-items: flex-start; }
.jm-paths.is-large .jm-path-sigil { width: 104px; height: 104px; }
.jm-paths.is-large .jm-path-zh { margin-left: auto; font-size: var(--size-2xl); }
.jm-paths.is-large .jm-path-top .jm-grow { flex-basis: 100%; order: 3; margin-top: 6px; }
.jm-paths.is-large .jm-path h3 { font-size: var(--size-xl); }
.jm-path.is-untrodden { opacity: 0.75; }
.jm-path-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; text-align: center; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.jm-path-info strong { display: block; font: var(--size-xl)/1.2 var(--font-serif); font-weight: 400; }
.jm-path-info span { font-size: var(--size-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.jm-path-last { text-align: center; font-size: var(--size-3xs); color: var(--mist); }
/* one Path */
.jm-path-hero { position: relative; display: grid; grid-template-columns: 290px minmax(0, 1fr) 180px; gap: 28px; align-items: center; padding: 24px; border-top: 2px solid var(--accent); overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--surface) 70%); }
.jm-path-cover { border-radius: 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); line-height: 0; }
.jm-path-cover img { width: 100%; height: auto; display: block; }
.jm-path-eyebrow { color: var(--accent); }
.jm-path-title { font-size: var(--size-3xl); margin: 10px 0 8px; color: var(--blossom); }
.jm-path-standing { margin-top: 22px; }
.jm-path-standing strong { font: var(--size-xl) var(--font-serif); font-weight: 400; }
.jm-path-standing small { font: var(--size-sm) var(--font-sans); color: var(--mist); margin-left: 10px; }
.jm-path-mastery { color: var(--gold); font-size: var(--size-sm); }
.jm-path-hero .jm-progress span { background: var(--accent); }
.jm-path-hero-sigil { width: 180px; height: 180px; object-fit: contain; }
.jm-rule-row { display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--border); padding: 15px 0; }
.jm-rule-row:last-child { border-bottom: 0; }
.jm-rule-row h4, .jm-step h4, .jm-band h4 { font: var(--size-md)/1.3 var(--font-serif); font-weight: 400; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jm-rule-row p, .jm-step p, .jm-band p { font-size: var(--size-2xs); color: var(--mist); margin-top: 4px; }
.jm-reward { display: flex; flex-direction: column; align-items: flex-end; flex: none; color: var(--gold); }
.jm-reward b { font: var(--size-md) var(--font-serif); font-weight: 400; }
.jm-reward small { font-size: var(--size-3xs); color: var(--mist); letter-spacing: 0.06em; }
.jm-steps { max-height: 34rem; overflow-y: auto; padding-right: 4px; }
.jm-step, .jm-band { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--border); padding: 11px 0; }
.jm-step:last-child, .jm-band:last-child { border-bottom: 0; }
.jm-step-level { flex: none; min-width: 52px; font: var(--size-sm) var(--font-serif); color: var(--gold); }
.jm-step-date { flex: none; font-size: var(--size-2xs); color: var(--mist); text-align: right; }
.jm-step.is-milestone { background: color-mix(in srgb, var(--gold) 5%, transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px; }
.jm-band { opacity: 0.55; }
.jm-band.is-held { opacity: 1; }
.jm-band.is-held .jm-step-level { color: var(--accent-jade); }
@media (max-width: 1200px) {
  .jm-realm-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jm-path-hero { grid-template-columns: 220px minmax(0, 1fr); }
  .jm-path-hero-sigil { display: none; }
}
@media (max-width: 900px) {
  .jm-realm-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jm-metrics.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jm-path-hero { grid-template-columns: 1fr; }
  .jm-path-cover { max-width: 300px; }
}

/* Drop 55: the Deeds and the Titles - the categories as equal boxes, the
   file's collectible cards made larger, and the worn title in its own place. */
.jm-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 20px 0; }
.jm-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; min-height: 96px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.jm-cat:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.jm-cat.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.jm-cat .deed-tab-name { font: var(--size-md)/1.3 var(--font-serif); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.jm-cat-chinese { font-size: var(--size-sm); color: var(--gold); opacity: 0.85; }
.jm-cat .deed-tab-count { font-size: var(--size-2xs); color: var(--mist); margin-top: auto; }
.jm-cat .deed-tab-bar { width: 100%; height: 3px; background: color-mix(in srgb, var(--mist) 14%, transparent); border-radius: 3px; overflow: hidden; }
.jm-cat .deed-tab-bar i { display: block; height: 100%; background: var(--gold); }
.jm-page .deeds-panel { background: transparent; border: 0; padding: 0; }
.jm-page .deeds-panel .jm-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 15px; }
.jm-page .jm-collectible { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0;
  padding: 24px 16px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; }
.jm-page button.jm-collectible { cursor: pointer; }
.jm-page .jm-collectible:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.jm-page .jm-collectible .deed-tile-icon, .jm-page .jm-collectible .title-seal { width: 104px; max-width: none; height: 104px; margin: 0 auto 12px; display: grid; place-items: center; }
.jm-page .jm-collectible .deed-tile-icon img, .jm-page .jm-collectible .title-seal img { width: 100%; height: 100%; object-fit: contain; }
.jm-page .jm-collectible .deed-tile-name, .jm-page .jm-collectible .title-name { font: var(--size-lg)/1.3 var(--font-serif); margin: 8px 0 4px; }
.jm-page .jm-collectible .deed-tile-chinese, .jm-page .jm-collectible .title-chinese { font-size: var(--size-sm); color: var(--gold); }
.jm-page .jm-collectible .title-rarity { font-size: var(--size-3xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.jm-page .jm-collectible p, .jm-collectible-text { font-size: var(--size-2xs); line-height: 1.7; color: var(--mist); margin: 8px 0 10px; flex: 1; }
.jm-page .jm-collectible .deed-tile-when, .jm-page .jm-collectible .title-when { font-size: var(--size-3xs); color: var(--mist); margin-top: auto; }
.jm-page .jm-collectible .title-requirement { font-size: var(--size-3xs); color: var(--mist); font-style: italic; margin-top: auto; }
.jm-page .jm-collectible .ghost { margin-top: 12px; }
.jm-page .deed-tile.jm-collectible:not(.is-held) { background: color-mix(in srgb, var(--ink) 40%, var(--surface)); }
.jm-page .deed-tile.jm-collectible:not(.is-held) img, .jm-page .title-card.is-locked img { filter: grayscale(0.8); opacity: 0.5; }
.jm-page .title-card.is-worn { border-color: var(--gold); background: radial-gradient(at 50% 0, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%), var(--surface); }
.jm-page .title-card.is-worn::before { content: 'WORN'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink);
  padding: 2px 12px; border-radius: 4px; font-size: var(--size-3xs); letter-spacing: 0.2em; font-weight: 600; }
.jm-worn-feature { display: flex; gap: 30px; align-items: center; margin-bottom: 4px;
  background: radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--gold) 10%, var(--surface)), var(--surface)); }
.jm-worn-feature-sigil { width: 150px; height: 150px; object-fit: contain; flex: none; }
.jm-worn-feature-name { font-size: var(--size-2xl); margin: 8px 0 4px; }
.jm-worn-feature .jm-worn-text { font-size: var(--size-sm); margin-top: 10px; max-width: 60ch; }

/* Drop 55: Quests, the Library, Reflection, Turbid Qi and the Chronicle -
   restyled in the Jade Mountain manner within their own rooms only. */
.view[data-room^="cultivation/"] .panel { background: linear-gradient(140deg, color-mix(in srgb, var(--accent-jade) 5%, var(--surface)), var(--surface));
  border: 1px solid var(--border); border-radius: 13px; padding: 24px; }
.view[data-room^="cultivation/"] .vault-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 20px; }
.view[data-room^="cultivation/"] .vault-sum { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 16px 19px; min-width: 0; text-align: left; }
.view[data-room^="cultivation/"] .vault-sum-label { font-size: var(--size-2xs); color: var(--mist); letter-spacing: 0.04em; text-transform: none; }
.view[data-room^="cultivation/"] .vault-sum-figure { font: var(--size-2xl)/1.3 var(--font-serif); margin-top: 6px; color: var(--blossom); }
.view[data-room^="cultivation/"] .vault-sum-count { font-size: var(--size-3xs); color: var(--mist); margin-top: 4px; }
.view[data-room^="cultivation/"] .period-row { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; margin: 0 0 18px; width: fit-content; max-width: 100%;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.view[data-room^="cultivation/"] .period-chip { border: 1px solid transparent; background: transparent; padding: 7px 14px; border-radius: 7px; font-size: var(--size-xs); color: var(--mist); }
.view[data-room^="cultivation/"] .period-chip:hover { color: var(--blossom); }
.view[data-room^="cultivation/"] .period-chip.is-on { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--blossom); }
.view[data-room^="cultivation/"] .period-label { font-size: var(--size-3xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
/* Quests and the Library: the file's cards, our emblems kept */
.view[data-room="cultivation/quests"] :has(> .quest) { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.view[data-room="cultivation/quests"] .quest { position: relative; margin: 0; border: 1px solid var(--border); border-top: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 12px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.view[data-room="cultivation/quests"] .quest-emblem, .view[data-room="cultivation/library"] .quest-template-art { width: 64px; height: 64px; object-fit: contain; flex: none; }
.view[data-room="cultivation/quests"] .quest-reward, .view[data-room="cultivation/quests"] .quest-award { color: var(--gold); font-size: var(--size-xs); }
.view[data-room="cultivation/quests"] .quest-crowded { font-size: var(--size-xs); color: var(--mist); font-style: italic; }
.view[data-room="cultivation/library"] .library-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.view[data-room="cultivation/library"] .library-count { font-size: var(--size-xs); color: var(--mist); }
.view[data-room="cultivation/library"] :has(> .quest-template) { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.view[data-room="cultivation/library"] .quest-template { border: 1px solid var(--border); border-top: 3px solid color-mix(in srgb, var(--accent-jade) 55%, transparent);
  border-radius: 12px; background: var(--surface); padding: 16px; min-width: 0; cursor: pointer; }
.view[data-room="cultivation/library"] .quest-template:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.view[data-room="cultivation/library"] .template-title { font: var(--size-lg)/1.3 var(--font-serif); }
.view[data-room="cultivation/library"] .template-text, .view[data-room="cultivation/library"] .template-meta { font-size: var(--size-2xs); color: var(--mist); line-height: 1.6; }
.view[data-room="cultivation/library"] .quest-tier-head { font: var(--size-xl) var(--font-serif); margin: 22px 0 12px; }
/* Inner Reflection: the file's journal - this week's page on paper, the weeks behind beside it */
.view[data-room="cultivation/reflection"] { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.view[data-room="cultivation/reflection"] > * { grid-column: 1; min-width: 0; margin: 0; }
.view[data-room="cultivation/reflection"] > .deeds-panel { grid-column: 2; grid-row: 1 / span 8; }
.view[data-room="cultivation/reflection"] .reflect-summary { border: 1px solid var(--border); border-radius: 13px; padding: 20px; background: var(--surface); }
/* Turbid Qi: the clearing pool, the file's overview and rules */
.view[data-room="cultivation/turbid"] .turbid-banner { display: flex; gap: 26px; align-items: center; padding: 24px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 13px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-lacquer) 22%, var(--surface)), var(--surface)); }
.view[data-room="cultivation/turbid"] .turbid-sigil { width: min(11rem, 32vw); }
.view[data-room="cultivation/turbid"] .turbid-sigil img { background: none; }
.view[data-room="cultivation/turbid"] .turbid-rule { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--border); }
.view[data-room="cultivation/turbid"] .turbid-rule:last-child { border-bottom: 0; }
.view[data-room="cultivation/turbid"] .turbid-amount, .view[data-room="cultivation/turbid"] .turbid-cost { color: var(--accent-lacquer); font-family: var(--font-serif); }
.view[data-room="cultivation/turbid"] .turbid-incident { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--accent-lacquer) 7%, var(--surface)); }
.view[data-room="cultivation/turbid"] .turbid-severity { display: inline-flex; border: 1px solid color-mix(in srgb, var(--accent-lacquer) 40%, transparent); color: var(--accent-lacquer); border-radius: 5px; padding: 1px 7px; font-size: var(--size-3xs); }
/* The Chronicle: the file's filters, day groups and entries */
.view[data-room="cultivation/chronicle"] .flow-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.view[data-room="cultivation/chronicle"] .flow-filters :is(input, select) { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--blossom); }
.view[data-room="cultivation/chronicle"] .chronicle-day { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); padding: 16px 22px; margin-bottom: 14px; }
.view[data-room="cultivation/chronicle"] .chronicle-date { font-size: var(--size-3xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.view[data-room="cultivation/chronicle"] .chronicle-entry { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.view[data-room="cultivation/chronicle"] .chronicle-entry:last-child { border-bottom: 0; }
.view[data-room="cultivation/chronicle"] .chronicle-text { flex: 1; min-width: 0; }
.view[data-room="cultivation/chronicle"] .chronicle-detail { font-size: var(--size-2xs); color: var(--mist); margin-top: 2px; }
.view[data-room="cultivation/chronicle"] .chronicle-value { font: var(--size-sm) var(--font-serif); color: var(--gold); white-space: nowrap; }
.view[data-room="cultivation/chronicle"] .flow-month { font: var(--size-xl) var(--font-serif); margin: 22px 0 12px; }
@media (max-width: 1000px) {
  .view[data-room="cultivation/reflection"] { grid-template-columns: 1fr; }
  .view[data-room="cultivation/reflection"] > .deeds-panel { grid-column: 1; grid-row: auto; }
  .jm-worn-feature { flex-direction: column; align-items: flex-start; }
}
/* Drop 55, finishing: Turbid's tabs as the file's toolbar, its list heading stacked, and last week's intention on the paper. */
.view[data-room="cultivation/turbid"] .flow-month { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px; margin: 0 0 18px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.view[data-room="cultivation/turbid"] .flow-month > button { border: 1px solid transparent; background: transparent; padding: 7px 14px; min-height: 0; border-radius: 7px; font-size: var(--size-xs); color: var(--mist); }
.view[data-room="cultivation/turbid"] .flow-month > button:hover { color: var(--blossom); }
.view[data-room="cultivation/turbid"] .flow-month > button.primary { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--blossom); }
.view[data-room="cultivation/turbid"] .flow-month > button:last-child { border-color: var(--border); }
.view[data-room="cultivation/turbid"] .vault-list-head { margin: 4px 0 14px; }
.view[data-room="cultivation/turbid"] .vault-list-head > div { display: flex; flex-direction: column; gap: 4px; }
.view[data-room="cultivation/turbid"] .vault-list-head strong { font: var(--size-xl) var(--font-serif); font-weight: 400; }
.view[data-room="cultivation/turbid"] .vault-list-head span { font-size: var(--size-xs); color: var(--mist); }

/* Drop 56: Imperially Decreed - Cultivation. Every rule of the wing, edited
   row by row. Prefixed cr-. */
.cr-room { color: var(--blossom); font: var(--size-sm)/1.5 var(--font-sans); width: 100%; min-width: 0; }
.cr-room * { box-sizing: border-box; }
.cr-room h1, .cr-room h2, .cr-room p { margin: 0; }
.cr-room h1 { font: var(--size-2xl)/1.15 var(--font-serif); }
.cr-room h2 { font: var(--size-xl) var(--font-serif); }
.cr-muted { color: var(--mist); font-size: var(--size-xs); }
.cr-cjk { font-size: var(--size-xl); color: var(--accent); margin-left: 10px; }
.cr-heading { margin-bottom: 18px; }
.cr-heading .cr-muted { margin-top: 6px; font-size: var(--size-sm); max-width: 70ch; }
.cr-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.cr-tab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--mist); text-decoration: none; font-size: var(--size-xs); }
.cr-tab:hover { color: var(--blossom); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.cr-tab.is-on { color: var(--blossom); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); }
.cr-tab-cjk { font-family: var(--font-serif); font-size: var(--size-sm); opacity: 0.6; white-space: nowrap; flex: none; }
.cr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 20px 22px; margin-bottom: 16px; min-width: 0; }
.cr-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-panel-head .cr-muted { margin-top: 4px; max-width: 80ch; }
.cr-filter { min-width: 220px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--ink); color: var(--blossom); }
.cr-scroll { overflow-x: auto; }
.cr-table { width: 100%; border-collapse: collapse; }
.cr-table th { text-align: left; font-size: var(--size-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cr-table td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; }
.cr-table tr.is-changed td { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.cr-table td.cr-shown { color: var(--mist); font-size: var(--size-xs); white-space: nowrap; }
.cr-table input[type="text"], .cr-table input[type="number"], .cr-table select { width: 100%; min-width: 7rem; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--ink); color: var(--blossom); font: inherit; font-size: var(--size-xs); }
.cr-table input.is-mid { min-width: 12rem; }
.cr-table input.is-wide { min-width: 18rem; }
.cr-table input.is-number { min-width: 5.5rem; max-width: 8rem; }
.cr-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); }
.cr-table input:focus, .cr-table select:focus { outline: none; border-color: var(--gold); }
.cr-save-col { width: 1%; }
.cr-save { padding: 6px 12px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  color: var(--blossom); font-size: var(--size-2xs); cursor: pointer; }
.cr-save:disabled { opacity: 0.3; cursor: default; }

/* Drop 57: the light boxes go dark. The Court's reflection teaser and the
   Reflection room's page of the week, in warm dark panels of the palace's
   own colours, the gold carrying what the cream once did. */
.jm-journal { background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%), var(--surface);
  border-color: color-mix(in srgb, var(--gold) 30%, var(--border)); color: var(--blossom); }
.jm-journal h3 { font-size: var(--size-xl); margin: 10px 0; }
.jm-journal-quote { font: italic var(--size-xl)/1.6 var(--font-serif); margin: 14px 0 16px; color: color-mix(in srgb, var(--gold) 45%, var(--blossom)); }
.jm-journal-go { margin-top: 20px; }
.view[data-room="cultivation/reflection"] > .panel:not(.deeds-panel) {
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--gold) 11%, transparent), transparent 55%), var(--surface);
  border-color: color-mix(in srgb, var(--gold) 28%, var(--border)); color: var(--blossom); }
.view[data-room="cultivation/reflection"] > .panel:not(.deeds-panel) :is(textarea, input, select) {
  background: var(--ink); color: var(--blossom); border: 1px solid var(--border); border-radius: 8px; }
.view[data-room="cultivation/reflection"] > .panel:not(.deeds-panel) :is(textarea, input, select):focus { outline: none; border-color: var(--gold); }
.view[data-room="cultivation/reflection"] > .panel:not(.deeds-panel) .reflect-quote { font: italic var(--size-xl)/1.6 var(--font-serif); color: color-mix(in srgb, var(--gold) 45%, var(--blossom)); }
.view[data-room="cultivation/reflection"] > .panel:not(.deeds-panel) .reflect-previous { background: color-mix(in srgb, var(--gold) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); border-radius: 10px; }

/* Drop 57: the Jade Register under the new header - the avatar larger, no
   longer lifted over a banner's edge, and the rooms' own titles left to the header. */
.jp-room .jp-avatar { width: 180px; height: 180px; padding: 6px; }
.view[data-hero] .jp-room .jp-avatar-column { margin-top: 0; }
.view[data-hero] .yr-head-copy h1 { display: none; }
@media (max-width: 60rem) { .jp-room .jp-avatar { width: 128px; height: 128px; padding: 4px; } }

/* Drop 58: a year's cover changed from its volume card; the Decreed rooms' own
   headings left to the new header. */
.yr-book-cover { position: relative; }
.yr-cover-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 2; opacity: 0.85; }
.yr-book-cover:hover .yr-cover-tools, .yr-cover-tools:focus-within { opacity: 1; }
.yr-cover-change { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--blossom);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: var(--size-2xs); cursor: pointer; backdrop-filter: blur(2px); }
.yr-cover-change:hover { border-color: var(--gold); }
.view[data-hero] .dc-heading, .view[data-hero] .cr-heading { display: none; }

/* Drop 59: the Eternal Blossom Sanctuary in the Jade Mountain style - the
   Common Room, the Airing Calendar, the record rooms, the scoreboard and the
   costs ledger. Prefixed sv-; the rest is the shared jm- pieces. */
.view[data-hero] .ac-heading h1, .view[data-hero] .ac-heading > div > p, .view[data-hero] .ic-heading h1, .view[data-hero] .ic-heading > div > p { display: none; }
.view[data-hero] .ac-heading, .view[data-hero] .ic-heading { justify-content: flex-end; margin-bottom: 12px; }
.sv-page .jm-panel { margin-top: 0; }
.sv-page .jm-split { margin-top: 16px; }
.sv-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.sv-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sv-chip { border: 1px solid var(--border); background: var(--surface); color: var(--mist); border-radius: 8px; padding: 7px 13px; font: inherit; font-size: var(--size-xs); cursor: pointer; }
.sv-chip:hover { color: var(--blossom); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.sv-chip.is-on { color: var(--blossom); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.sv-line { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); }
.sv-line:first-of-type { border-top: 0; }
.sv-line strong { font-weight: 500; }
.sv-date { min-width: 7rem; color: var(--gold); font-size: var(--size-xs); }
.sv-place { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: var(--size-xs) var(--font-serif); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); flex: none; }
.sv-place.is-1 { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--blossom); }
.sv-figure { margin-left: auto; font: var(--size-md) var(--font-serif); color: var(--gold); }
.sv-standing { align-items: center; }
.sv-icon { border: 0; background: transparent; color: var(--mist); min-width: 30px; min-height: 30px; border-radius: 5px; font-size: var(--size-sm); cursor: pointer; }
.sv-icon:hover { color: var(--blossom); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.sv-record { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--border); }
.sv-record:first-of-type { border-top: 0; }
.sv-record-title { font: var(--size-md)/1.3 var(--font-serif); font-weight: 400; color: var(--blossom); text-decoration: none; }
.sv-record-body { font-size: var(--size-xs); line-height: 1.7; color: var(--mist); white-space: pre-wrap; margin-top: 6px; }
.sv-tools { display: flex; gap: 4px; align-items: center; flex: none; }
.sv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.sv-day { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-width: 0; min-height: 120px; }
.sv-day.is-today { border-color: var(--gold); }
.sv-day h3 { font: var(--size-sm) var(--font-serif); color: var(--gold); margin-bottom: 8px; }
.sv-air { display: block; padding: 6px 0; border-top: 1px solid var(--border); color: var(--blossom); text-decoration: none; font-size: var(--size-xs); }
.sv-air small { display: block; color: var(--mist); font-size: var(--size-3xs); }
.sv-embed { min-width: 0; }
/* the scoreboard: the sheet, with its totals and ranks worked out */
.sv-podiums { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sv-podium { background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%), var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 25%, var(--border)); border-radius: 12px; padding: 14px 16px; }
.sv-podium-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sv-sheet-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sv-sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--size-xs); }
.sv-sheet th, .sv-sheet td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); text-align: right; white-space: nowrap; }
.sv-sheet thead th { font-size: var(--size-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); font-weight: 500; background: var(--surface); }
.sv-sheet thead .sv-period { text-align: center; color: var(--gold); font-size: var(--size-2xs); letter-spacing: 0.14em; border-left: 1px solid var(--border); }
.sv-sheet thead .sv-period small { display: block; font: var(--size-sm) var(--font-serif); letter-spacing: 0; color: var(--blossom); text-transform: none; margin-top: 2px; }
.sv-sheet .sv-member-col { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 500; color: var(--blossom); border-right: 1px solid var(--border); min-width: 9rem; }
.sv-sheet .sv-member-col small { display: block; font-size: var(--size-3xs); color: var(--mist); font-weight: 400; }
.sv-sheet .sv-member-col .sv-icon { min-height: 22px; min-width: 22px; font-size: var(--size-xs); }
.sv-sheet .sv-total-col { background: color-mix(in srgb, var(--accent-jade) 7%, transparent); color: var(--blossom); font-family: var(--font-serif); }
.sv-sheet .sv-rank-col { text-align: center; color: var(--mist); border-right: 1px solid var(--border); min-width: 2.6rem; }
.sv-sheet .sv-rank-col.is-top { color: var(--gold); font-weight: 600; }
.sv-sheet .sv-rank-col.is-1 { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.sv-cell { width: 6.5rem; padding: 5px 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--blossom); font: inherit; text-align: right; }
.sv-cell:hover { border-color: var(--border); }
.sv-cell:focus { outline: none; border-color: var(--gold); background: var(--ink); }
.sv-num { font-variant-numeric: tabular-nums; }
/* the costs ledger */
.sv-costs .sv-quarter-end { border-right: 1px solid var(--border); }
.sv-pay { text-align: center; }
.sv-pay-button { border: 0; background: transparent; color: var(--mist); font: inherit; cursor: pointer; padding: 4px 6px; border-radius: 5px; min-width: 3.5rem; }
.sv-pay-button:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--blossom); }
.sv-pay.is-paid .sv-pay-button { color: var(--accent-jade); }
.sv-costs tfoot th, .sv-costs tfoot td { font-family: var(--font-serif); color: var(--gold); border-bottom: 0; border-top: 1px solid var(--border); }
@media (max-width: 1000px) { .sv-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Drop 62: the Common Room's week - a column for each day, each show airing a block with its time. */
.sv-week-blocks { margin-bottom: 4px; }
.sv-week-blocks .sv-day { display: flex; flex-direction: column; gap: 6px; min-height: 170px; }
.sv-week-blocks .sv-day h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.sv-week-blocks .sv-day h3 small { font: var(--size-3xs) var(--font-sans); color: var(--mist); letter-spacing: 0.04em; }
.sv-block { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--blossom);
  background: color-mix(in srgb, var(--accent-jade) 9%, var(--ink)); border-left: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); }
a.sv-block:hover { background: color-mix(in srgb, var(--gold) 12%, var(--ink)); }
.sv-block-time { display: block; font-size: var(--size-3xs); letter-spacing: 0.08em; color: var(--gold); margin-bottom: 2px; }
.sv-block strong { display: block; font: var(--size-sm)/1.3 var(--font-serif); font-weight: 400; }
.sv-block small { display: block; font-size: var(--size-3xs); color: var(--mist); margin-top: 2px; }
.sv-quiet { text-align: center; margin-top: 8px; }
.sv-party { color: var(--blossom); text-decoration: none; font-weight: 500; }
.sv-party:hover { color: var(--gold); }
.sv-desk { margin-top: 16px; }

/* Drop 64: the Mod Desk, Community Plans, Our Little Circle, News & Content and the
   Watch Club, laid out after the Afterglow design in the palace's own colours. */
.sv-filter .sv-chip { border-color: transparent; background: transparent; }
.sv-filter .sv-chip.is-on { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.sv-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: var(--size-3xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--mist); background: color-mix(in srgb, var(--mist) 12%, transparent); white-space: nowrap; }
.sv-tag.is-gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.sv-tag.is-jade { color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 14%, transparent); }
.sv-tag.is-red { color: var(--accent-lacquer); background: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 18%, transparent); }
.sv-tag.is-quiet { color: var(--mist); }
.sv-link-button { border: 0; background: transparent; color: var(--gold); font: inherit; font-size: var(--size-xs); font-weight: 600; cursor: pointer; padding: 4px 2px; }
.sv-link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the Mod Desk */
.sv-desk-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sv-task { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.sv-task:last-child { border-bottom: 0; }
.sv-task input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.sv-task-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; border: 0; background: transparent; color: var(--blossom); font: inherit; cursor: pointer; padding: 0; }
.sv-task-words strong { font-weight: 500; font-size: var(--size-sm); }
.sv-task-words .is-late { color: var(--accent-lacquer); }
.sv-task.is-done .sv-task-words strong { text-decoration: line-through; color: var(--mist); }
.sv-task-tags { display: flex; gap: 6px; flex: none; }
.sv-notebook-text { white-space: pre-wrap; font-size: var(--size-sm); line-height: 1.7; color: var(--blossom); margin: 10px 0 12px; }
.sv-gap { display: block; margin-top: 22px; }
.sv-house { white-space: pre-wrap; font-size: var(--size-xs); line-height: 1.9; color: var(--blossom); margin: 10px 0 12px; padding: 14px 18px; border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, var(--ink)); border-radius: 0 8px 8px 0; }
/* cards: plans, the circle, the watch club */
.sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sv-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--size-2xs); }
.sv-card-title { border: 0; background: transparent; padding: 0; text-align: left; color: var(--blossom); font: var(--size-md)/1.35 var(--font-serif); cursor: pointer; }
.sv-card-title:hover { color: var(--gold); }
.sv-card-title.is-static { cursor: default; }
.sv-card-title.is-static:hover { color: var(--blossom); }
.sv-card-text { font-size: var(--size-xs); line-height: 1.7; color: var(--mist); white-space: pre-wrap; margin: 0; }
.sv-card-link { font-size: var(--size-xs); color: var(--blossom); text-decoration: none; }
.sv-card-link:hover { color: var(--gold); }
.sv-outcome { color: var(--accent-jade); }
.sv-choices { display: flex; flex-direction: column; }
.sv-choice { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--size-sm); }
.sv-choice:last-child { border-bottom: 0; }
.sv-choice-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: var(--size-3xs); color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); flex: none; }
.sv-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.sv-friend-top { display: flex; gap: 14px; align-items: center; }
.sv-friend-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sv-friend-top strong { font-weight: 500; }
.sv-friend.is-gone { opacity: 0.6; }
.sv-avatar { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; flex: none; font: var(--size-xl) var(--font-serif); color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, var(--ink)); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.sv-avatar.is-small { width: 26px; height: 26px; border-radius: 50%; font-size: var(--size-2xs); margin-right: -6px; border-color: var(--surface); }
.sv-faces { display: flex; }
.sv-going { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.sv-going[hidden] { display: none; }
.sv-card-tools { align-items: center; }
/* News & Content: four columns */
.sv-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sv-column { background: color-mix(in srgb, var(--surface) 60%, var(--ink)); border: 1px solid var(--border); border-radius: 13px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv-column-head { display: flex; justify-content: space-between; font-size: var(--size-2xs); letter-spacing: 0.12em; color: var(--mist); padding: 2px 4px; }
.sv-kcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sv-kcard .sv-card-title { font-size: var(--size-sm); }
.sv-add { border: 0; background: transparent; color: var(--gold); font: inherit; font-size: var(--size-xs); font-weight: 600; text-align: left; padding: 4px; cursor: pointer; }
.sv-add:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .sv-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-desk-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sv-kanban { grid-template-columns: 1fr; } }
/* Drop 64, finishing: buttons take the palace's text, and a narrow card's footer wraps cleanly. */
.jm-page button.jm-button { color: var(--blossom); font: inherit; font-size: var(--size-xs); cursor: pointer; }
.jm-page button.jm-button.is-small { font-size: var(--size-2xs); }
.jm-page button.jm-button.is-primary { color: var(--blossom); }
.sv-kcard .sv-card-foot { flex-wrap: wrap; row-gap: 6px; }
.sv-kcard .sv-card-foot > .jm-muted { white-space: nowrap; }
.sv-kcard .sv-card-foot .sv-chips { gap: 2px; margin-left: auto; }
/* Drop 64c: a room that needs a migration says so. */
.sv-migration { border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 45%, var(--border)); background: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 10%, var(--surface)); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.sv-migration strong { color: var(--accent-lacquer); font-weight: 600; }
.sv-migration p { margin: 6px 0 0; font-size: var(--size-xs); color: var(--blossom); }

/* Drop 65: the Pavilion of Flowing Ink as the studio, after the MPC workspace, in
   the palace's colours. The rest is the shared jm- and sv- pieces. Prefixed ink-. */
.ink-intro { margin-bottom: 14px; }
.ink-intro .jm-muted { margin-top: 4px; }
.ink-hero { background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%), var(--surface); margin-bottom: 16px; }
.ink-hero h2 { font: var(--size-2xl) var(--font-serif); margin: 8px 0 4px; }
.ink-hero .sv-chips { margin-top: 14px; }
.ink-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ink-left { text-align: left; }
.ink-table td { text-align: left; }
.ink-table td.sv-num { text-align: right; }
.ink-in { color: var(--accent-jade); }
.ink-out { color: var(--accent-lacquer); }
.ink-month { font: var(--size-lg) var(--font-serif); padding: 0 10px; }
.ink-calendar-scroll { overflow-x: auto; }
.ink-calendar { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 6px; }
.ink-weekday { font-size: var(--size-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); padding: 4px 6px; }
.ink-day { min-height: 104px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.ink-day.is-empty { background: transparent; border-style: dashed; opacity: 0.4; }
.ink-day.is-today { border-color: var(--gold); }
.ink-day-num { font: var(--size-sm) var(--font-serif); color: var(--mist); }
.ink-day.is-today .ink-day-num { color: var(--gold); }
.ink-event { font-size: var(--size-2xs); line-height: 1.3; padding: 4px 6px; border-radius: 5px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--ink)); }
.ink-event small { display: block; font-size: var(--size-3xs); color: var(--mist); letter-spacing: 0.06em; }
.ink-event.is-jade { border-left-color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 9%, var(--ink)); }
.ink-event.is-red { border-left-color: color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)); background: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 10%, var(--ink)); }
.ink-event.is-quiet { border-left-color: var(--mist); background: color-mix(in srgb, var(--mist) 8%, var(--ink)); }
.ink-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ink-split small { display: block; font-size: var(--size-3xs); }
.ink-split strong { font: var(--size-md) var(--font-serif); font-weight: 400; }
.ink-bars { display: flex; align-items: flex-end; gap: 10px; min-height: 170px; padding-top: 10px; }
.ink-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ink-bar-track { width: 100%; max-width: 40px; height: 120px; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--mist) 8%, transparent); border-radius: 6px; overflow: hidden; }
.ink-bar-track span { display: block; width: 100%; background: linear-gradient(0deg, var(--accent-jade), var(--gold)); border-radius: 6px 6px 0 0; }
.ink-bar-value { font-size: var(--size-3xs); color: var(--blossom); }
.ink-media-frame { aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--ink); display: grid; place-items: center; border: 1px solid var(--border); }
.ink-media-frame img { width: 100%; height: 100%; object-fit: cover; }
.ink-swatches { align-items: center; margin-bottom: 10px; }
.ink-swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); display: inline-block; }
@media (max-width: 1200px) { .ink-five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ink-five { grid-template-columns: 1fr; } }

/* Drop 65b: the Studio Desk copied whole from the MPC workspace - its heading, the
   hero with the pinned note, the four stats, and the two columns of panels - with
   only the colours moved into the palace's. */
.ink-eyebrow { font-size: var(--size-3xs); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 9px; }
.ink-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 27px; flex-wrap: wrap; }
.ink-head h1 { font: var(--size-3xl)/1.15 var(--font-serif); margin: 0; color: var(--blossom); }
.ink-head p:not(.ink-eyebrow) { color: var(--mist); font-size: var(--size-sm); margin: 10px 0 0; }
.ink-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ink-desk-hero { border: 1px solid color-mix(in srgb, var(--accent-jade) 30%, var(--border)); border-radius: 7px; overflow: hidden; margin-bottom: 24px;
  display: grid; grid-template-columns: 1.55fr 1fr; background: color-mix(in srgb, var(--accent-jade) 9%, var(--surface)); }
.ink-hero-copy { padding: 30px 35px; }
.ink-hero-copy h2 { font: var(--size-2xl)/1.15 var(--font-serif); max-width: 540px; margin: 0; color: var(--blossom); }
.ink-hero-copy p:not(.ink-eyebrow) { font-size: var(--size-sm); color: var(--mist); margin: 13px 0 20px; max-width: 430px; }
.ink-hero-side { background: color-mix(in srgb, var(--accent-jade) 14%, var(--surface)); padding: 28px; display: flex; align-items: center; justify-content: center; position: relative;
  border-left: 1px solid color-mix(in srgb, var(--accent-jade) 28%, var(--border)); }
.ink-cover-note { transform: rotate(-5deg); background: color-mix(in srgb, var(--blossom) 7%, var(--ink)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
  box-shadow: 9px 12px 0 color-mix(in srgb, var(--accent-jade) 16%, transparent); padding: 28px; width: 230px; min-height: 178px; position: relative; }
.ink-cover-note::before { content: ''; width: 65px; height: 19px; background: color-mix(in srgb, var(--gold) 55%, transparent); position: absolute; top: -8px; left: 80px; transform: rotate(3deg); }
.ink-cover-note .ink-star { position: absolute; right: 19px; top: 18px; font-size: var(--size-xl); color: var(--gold); }
.ink-cover-note p { font-size: var(--size-3xs); color: var(--mist); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.ink-cover-note p:last-child { text-transform: none; letter-spacing: 0; }
.ink-cover-note h3 { font: var(--size-xl)/1.25 var(--font-serif); margin: 10px 0; color: var(--blossom); }
.ink-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 22px 0; }
.ink-stat { background: var(--surface); border: 1px solid var(--border); padding: 21px 23px; border-radius: 5px; min-width: 0; }
.ink-stat-top { display: flex; justify-content: space-between; color: var(--mist); font-size: var(--size-2xs); }
.ink-stat-icon { color: var(--accent-jade); font-size: var(--size-lg); }
.ink-stat-value { font: var(--size-2xl)/1.2 var(--font-serif); margin: 9px 0 3px; color: var(--blossom); }
.ink-stat-sub { font-size: var(--size-2xs); color: var(--mist); }
.ink-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.ink-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 23px; min-width: 0; margin-bottom: 22px; }
.ink-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 19px; }
.ink-panel-head h2 { font: var(--size-xl) var(--font-serif); margin: 0; color: var(--blossom); }
.ink-panel-head .ink-eyebrow { font-size: var(--size-3xs); }
.ink-row { display: flex; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }
.ink-row:last-child { border-bottom: 0; }
.ink-row-title { flex: 1; min-width: 0; }
.ink-row-name { display: block; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: var(--size-sm); color: var(--blossom); cursor: pointer; }
.ink-row-name:hover { color: var(--gold); }
.ink-row-title small { font-size: var(--size-2xs); color: var(--mist); display: block; margin-top: 4px; }
.ink-datebox { width: 40px; text-align: center; border: 1px solid var(--border); padding: 4px; border-radius: 4px; flex-shrink: 0; background: color-mix(in srgb, var(--accent-jade) 7%, var(--ink)); }
.ink-datebox b { font: var(--size-xl) var(--font-serif); display: block; color: var(--blossom); }
.ink-datebox small { font-size: var(--size-3xs); text-transform: uppercase; display: block; color: var(--mist); }
.ink-check { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; flex: none; }
.ink-badge { font-size: var(--size-3xs); border-radius: 3px; padding: 4px 7px; display: inline-flex; align-items: center; line-height: 1.25; white-space: nowrap;
  background: color-mix(in srgb, var(--accent-jade) 14%, transparent); color: var(--accent-jade); }
.ink-badge.is-draft { background: color-mix(in srgb, color-mix(in srgb, var(--gold) 75%, var(--blossom)) 16%, transparent); color: var(--gold); }
.ink-badge.is-review { background: color-mix(in srgb, color-mix(in srgb, var(--blossom) 65%, var(--ink)) 18%, transparent); color: var(--mist); }
.ink-badge.is-scheduled { background: color-mix(in srgb, var(--lantern) 18%, transparent); color: var(--lantern); }
.ink-badge.is-published { background: color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 16%, transparent); color: var(--accent-jade); }
.ink-badge.is-overdue, .ink-badge.is-high { background: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 18%, transparent); color: var(--accent-lacquer); }
.ink-badge.is-idea, .ink-badge.is-low, .ink-badge.is-normal { background: color-mix(in srgb, var(--mist) 12%, transparent); color: var(--mist); }
.ink-empty { text-align: center; padding: 38px 20px; color: var(--mist); }
.ink-empty > span { color: var(--gold); font-size: var(--size-xl); }
.ink-empty h3 { font: var(--size-xl) var(--font-serif); color: var(--blossom); margin: 8px 0; }
.ink-empty p { font-size: var(--size-sm); max-width: 380px; margin: 0 auto 15px; }
.ink-desk-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 20px 0 0; border-bottom: 1px solid var(--border); }
.ink-bar-group { flex: 1; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; gap: 6px; }
.ink-bar-group b { font-size: var(--size-3xs); font-weight: 400; color: var(--mist); }
.ink-bar-group small { font-size: var(--size-3xs); white-space: nowrap; color: var(--mist); }
.ink-desk-bar { width: 65%; max-width: 40px; background: linear-gradient(0deg, var(--accent-jade), var(--gold)); border-radius: 3px 3px 0 0; min-height: 2px; }
.ink-chart-row { display: flex; align-items: center; gap: 25px; }
.ink-donut { width: 144px; height: 144px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.ink-donut > div { width: 110px; height: 110px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; }
.ink-donut b { font: var(--size-2xl) var(--font-serif); color: var(--blossom); }
.ink-donut small { font-size: var(--size-3xs); color: var(--mist); }
.ink-legend { display: grid; gap: 10px; flex: 1; font-size: var(--size-2xs); color: var(--blossom); }
.ink-legend > div { display: flex; align-items: center; gap: 8px; }
.ink-legend b { margin-left: auto; font-weight: 400; }
.ink-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@media (min-width: 1600px) { .ink-hero-copy { padding: 38px 43px; } .ink-hero-copy h2 { font-size: var(--size-3xl); } .ink-hero-side { padding: 35px; } .ink-cover-note { width: 265px; } }
@media (max-width: 1180px) { .ink-grid2 { grid-template-columns: 1.3fr 1fr; } .ink-stat { padding: 18px; } .ink-hero-copy { padding: 28px; } .ink-hero-copy h2 { font-size: var(--size-2xl); }
  .ink-hero-side { padding: 20px; } .ink-cover-note { width: 190px; padding: 22px; } .ink-chart-row { flex-direction: column; } .ink-legend { width: 100%; } }
@media (max-width: 900px) { .ink-stats { grid-template-columns: 1fr 1fr; } .ink-grid2 { grid-template-columns: 1fr; } .ink-desk-hero { grid-template-columns: 1fr; } .ink-hero-side { display: none; } .ink-chart-row { flex-direction: row; } }

/* ==========================================================
   Drop 65c: the MPC workspace's own styles, ported - scoped to the
   Pavilion of Flowing Ink's rooms and its dialog, its shell left out,
   each shade's lightness inverted with its hue kept, and its base
   colours and typefaces given the palace's.
   ========================================================== */
#mpc-app, #mpc-modal{--bg:color-mix(in srgb, var(--gold) 6%, var(--ink));--paper:color-mix(in srgb, var(--lacquer) 6%, var(--ink));--d-ink:var(--blossom);--muted:var(--mist);--line:color-mix(in srgb, var(--gold) 10%, var(--surface));--d-jade:var(--accent-jade);--d-gold:var(--gold);--pale:color-mix(in srgb, var(--gold) 6%, var(--surface));--rose:color-mix(in srgb, var(--lacquer) 20%, var(--surface));--purple:color-mix(in srgb, var(--blossom) 5%, var(--ink))}
#mpc-app button, #mpc-modal button, #mpc-app input, #mpc-modal input, #mpc-app select, #mpc-modal select, #mpc-app textarea, #mpc-modal textarea{font:inherit}
#mpc-app button, #mpc-modal button, #mpc-app a, #mpc-modal a{touch-action:manipulation}
#mpc-app button, #mpc-modal button{cursor:pointer}
#mpc-app button:disabled, #mpc-modal button:disabled{opacity:.5;cursor:wait}
#mpc-app a, #mpc-modal a{color:inherit}
#mpc-app button:focus-visible, #mpc-modal button:focus-visible, #mpc-app a:focus-visible, #mpc-modal a:focus-visible, #mpc-app input:focus-visible, #mpc-modal input:focus-visible, #mpc-app select:focus-visible, #mpc-modal select:focus-visible, #mpc-app textarea:focus-visible, #mpc-modal textarea:focus-visible{outline:2px solid color-mix(in srgb, var(--gold) 50%, var(--mist));outline-offset:3px}
#mpc-app button, #mpc-modal button{color:inherit}
#mpc-app h1, #mpc-modal h1, #mpc-app h2, #mpc-modal h2, #mpc-app h3, #mpc-modal h3, #mpc-app p, #mpc-modal p{margin:0}
#mpc-app h1, #mpc-modal h1, #mpc-app h2, #mpc-modal h2, #mpc-app h3, #mpc-modal h3{font-family:var(--font-serif);font-weight:400}
#mpc-app h1, #mpc-modal h1{font-size:var(--size-3xl);line-height:1.2;letter-spacing:-1px}
#mpc-app h2, #mpc-modal h2{font-size:var(--size-xl);line-height:1.3}
#mpc-app h3, #mpc-modal h3{font-size:var(--size-xl)}
#mpc-app small, #mpc-modal small{font-size:var(--size-xs)}
#mpc-app .side-quote, #mpc-modal .side-quote{font:italic var(--size-xl)/1.5 var(--font-serif);color:color-mix(in srgb, var(--lantern) 28%, var(--surface));padding:27px 13px;border-top:1px solid color-mix(in srgb, var(--accent-jade) 50%, var(--blossom));margin-top:22px}
#mpc-app .main, #mpc-modal .main{padding:30px 37px 35px;max-width:1630px;margin:auto}
#mpc-app .eyebrow, #mpc-modal .eyebrow{font-size:var(--size-3xs);letter-spacing:2px;text-transform:uppercase;color:var(--d-gold, var(--gold));margin-bottom:9px}
#mpc-app .page-head, #mpc-modal .page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}
#mpc-app .page-head p:not(.eyebrow), #mpc-modal .page-head p:not(.eyebrow){color:var(--muted);font-size:var(--size-sm);margin-top:10px}
#mpc-app .btn, #mpc-modal .btn, #mpc-app .outline, #mpc-modal .outline, #mpc-app .quiet, #mpc-modal .quiet{border:1px solid var(--d-jade, var(--jade));border-radius:4px;padding:10px 16px;background:var(--d-jade, var(--jade));color:color-mix(in srgb, var(--lacquer) 6%, var(--ink));display:inline-flex;gap:8px;align-items:center;justify-content:center;font-size:var(--size-xs);text-decoration:none}
#mpc-app .btn:hover, #mpc-modal .btn:hover{background:color-mix(in srgb, var(--accent-jade) 50%, var(--blossom))}
#mpc-app .outline, #mpc-modal .outline{background:var(--paper);border-color:var(--line);color:var(--d-ink, var(--ink))}
#mpc-app .outline:hover, #mpc-modal .outline:hover{border-color:color-mix(in srgb, var(--accent-jade) 50%, var(--mist));background:var(--pale)}
#mpc-app .quiet, #mpc-modal .quiet{background:none;border:0;color:var(--d-jade, var(--jade));padding:4px 0;font-size:var(--size-xs)}
#mpc-app .small, #mpc-modal .small{padding:6px 10px;font-size:var(--size-2xs)}
#mpc-app .danger, #mpc-modal .danger{color:var(--accent-lacquer)}
#mpc-app .actions, #mpc-modal .actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
#mpc-app .hero, #mpc-modal .hero{border:1px solid color-mix(in srgb, var(--accent-jade) 55%, var(--surface));border-radius:7px;background:color-mix(in srgb, var(--accent-jade) 20%, var(--surface));display:grid;grid-template-columns:1.55fr 1fr;overflow:hidden;margin-bottom:24px}
#mpc-app .hero-copy, #mpc-modal .hero-copy{padding:30px 35px}
#mpc-app .hero h2, #mpc-modal .hero h2{font-size:var(--size-2xl);line-height:1.15;max-width:540px}
#mpc-app .hero p:not(.eyebrow), #mpc-modal .hero p:not(.eyebrow){font-size:var(--size-sm);color:var(--mist);margin:13px 0 20px;max-width:430px}
#mpc-app .hero-side, #mpc-modal .hero-side{background:color-mix(in srgb, var(--accent-jade) 36%, var(--surface));padding:28px;display:flex;align-items:center;justify-content:center;position:relative;border-left:1px solid color-mix(in srgb, var(--accent-jade) 55%, var(--surface))}
#mpc-app .cover-note, #mpc-modal .cover-note{transform:rotate(-5deg);background:color-mix(in srgb, var(--gold) 6%, var(--ink));border:1px solid color-mix(in srgb, var(--accent-jade) 65%, var(--surface));box-shadow:9px 12px 0 color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--mist)) 14.5%, transparent);padding:28px;width:230px;min-height:178px;position:relative}
#mpc-app .cover-note:before, #mpc-modal .cover-note:before{content:'';width:65px;height:19px;background:color-mix(in srgb, var(--mist) 66.7%, transparent);position:absolute;top:-8px;left:80px;transform:rotate(3deg)}
#mpc-app .cover-note .star, #mpc-modal .cover-note .star{position:absolute;right:19px;top:18px;font-size:var(--size-xl);color:var(--gold)}
#mpc-app .cover-note h3, #mpc-modal .cover-note h3{font-size:var(--size-xl);margin:10px 0}
#mpc-app .cover-note p, #mpc-modal .cover-note p{font-size:var(--size-3xs);color:var(--mist)}
#mpc-app .stats, #mpc-modal .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin:22px 0}
#mpc-app .stat, #mpc-modal .stat{background:var(--paper);border:1px solid var(--line);padding:21px 23px;border-radius:5px}
#mpc-app .stat-top, #mpc-modal .stat-top{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--size-2xs)}
#mpc-app .stat .value, #mpc-modal .stat .value{font:var(--size-2xl) var(--font-serif);margin:9px 0 3px;line-height:1.2}
#mpc-app .stat .sub, #mpc-modal .stat .sub{font-size:var(--size-2xs);color:var(--muted)}
#mpc-app .stat .icon, #mpc-modal .stat .icon{color:var(--accent-jade);font-size:var(--size-lg)}
#mpc-app .grid2, #mpc-modal .grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
#mpc-app .equal, #mpc-modal .equal{grid-template-columns:1fr 1fr}
#mpc-app .panel, #mpc-modal .panel{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:23px;min-width:0;margin-bottom:22px}
#mpc-app .panel-head, #mpc-modal .panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:19px}
#mpc-app .panel-head h2, #mpc-modal .panel-head h2{font-size:var(--size-xl)}
#mpc-app .panel-head .eyebrow, #mpc-modal .panel-head .eyebrow{font-size:var(--size-3xs)}
#mpc-app .muted, #mpc-modal .muted{color:var(--muted)}
#mpc-app .badge, #mpc-modal .badge{font-size:var(--size-3xs);border-radius:3px;padding:4px 7px;display:inline-flex;align-items:center;gap:5px;line-height:1.25;background:color-mix(in srgb, var(--gold) 6%, var(--surface));color:var(--mist);white-space:nowrap}
#mpc-app .badge.draft, #mpc-modal .badge.draft{background:color-mix(in srgb, var(--gold) 14%, var(--ink));color:var(--gold)}
#mpc-app .badge.review, #mpc-modal .badge.review{background:color-mix(in srgb, var(--blossom) 5%, var(--ink));color:var(--mist)}
#mpc-app .badge.scheduled, #mpc-modal .badge.scheduled{background:color-mix(in srgb, var(--lantern) 5%, var(--ink));color:var(--lantern)}
#mpc-app .badge.published, #mpc-modal .badge.published, #mpc-app .badge.done, #mpc-modal .badge.done, #mpc-app .badge.paid, #mpc-modal .badge.paid{background:color-mix(in srgb, var(--accent-jade) 14%, var(--surface));color:var(--accent-jade)}
#mpc-app .badge.overdue, #mpc-modal .badge.overdue, #mpc-app .badge.high, #mpc-modal .badge.high{background:color-mix(in srgb, var(--lacquer) 28%, var(--surface));color:var(--accent-lacquer)}
#mpc-app .badge.idea, #mpc-modal .badge.idea{background:color-mix(in srgb, var(--lacquer) 14%, var(--surface));color:var(--mist)}
#mpc-app .badge.active, #mpc-modal .badge.active{background:color-mix(in srgb, var(--accent-jade) 14%, var(--surface));color:var(--accent-jade)}
#mpc-app .row, #mpc-modal .row{display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
#mpc-app .row:last-child, #mpc-modal .row:last-child{border:0}
#mpc-app .row-title, #mpc-modal .row-title{flex:1;min-width:0}
#mpc-app .row-title strong, #mpc-modal .row-title strong{font-size:var(--size-sm);font-weight:400;display:block}
#mpc-app .row-title small, #mpc-modal .row-title small{font-size:var(--size-2xs);color:var(--muted);display:block;margin-top:4px}
#mpc-app .row button.title, #mpc-modal .row button.title{text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
#mpc-app .datebox, #mpc-modal .datebox{width:40px;background:color-mix(in srgb, var(--gold) 6%, var(--ink));text-align:center;border:1px solid var(--line);padding:4px;border-radius:4px;flex-shrink:0}
#mpc-app .datebox b, #mpc-modal .datebox b{font:var(--size-xl) var(--font-serif);display:block}
#mpc-app .datebox small, #mpc-modal .datebox small{font-size:var(--size-3xs);text-transform:uppercase;display:block}
#mpc-app .dot, #mpc-modal .dot{height:7px;width:7px;border-radius:50%;background:color-mix(in srgb, var(--accent-jade) 50%, var(--mist));display:inline-block;flex-shrink:0}
#mpc-app .check, #mpc-modal .check{width:17px;height:17px;accent-color:var(--d-jade, var(--jade));cursor:pointer}
#mpc-app .complete .row-title, #mpc-modal .complete .row-title{text-decoration:line-through;opacity:.55}
#mpc-app .empty, #mpc-modal .empty{text-align:center;padding:38px 20px;color:var(--muted)}
#mpc-app .empty h3, #mpc-modal .empty h3{font-size:var(--size-xl);color:var(--d-ink, var(--ink));margin:8px 0}
#mpc-app .empty p, #mpc-modal .empty p{font-size:var(--size-sm);max-width:380px;margin:0 auto 15px}
#mpc-app .tabs, #mpc-modal .tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#mpc-app .tab, #mpc-modal .tab{padding:7px 12px;border:1px solid var(--line);border-radius:4px;background:none;font-size:var(--size-2xs);color:var(--muted)}
#mpc-app .tab.active, #mpc-modal .tab.active{background:color-mix(in srgb, var(--accent-jade) 14%, var(--surface));border-color:color-mix(in srgb, var(--accent-jade) 50%, var(--mist));color:var(--accent-jade)}
#mpc-app .toolbar, #mpc-modal .toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:20px 0;flex-wrap:wrap}
#mpc-app .toolbar input, #mpc-modal .toolbar input, #mpc-app .toolbar select, #mpc-modal .toolbar select{max-width:250px}
#mpc-app .table-wrap, #mpc-modal .table-wrap{overflow:auto}
#mpc-app .table, #mpc-modal .table{border-collapse:collapse;width:100%;text-align:left;font-size:var(--size-sm);min-width:560px}
#mpc-app .table th, #mpc-modal .table th{font-size:var(--size-3xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:400;padding:12px 12px;border-bottom:1px solid var(--line)}
#mpc-app .table td, #mpc-modal .table td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
#mpc-app .table tbody tr:hover, #mpc-modal .table tbody tr:hover{background:color-mix(in srgb, var(--gold) 6%, var(--ink))}
#mpc-app .table .title-btn, #mpc-modal .table .title-btn{border:0;padding:0;background:none;text-align:left;font:var(--size-md) var(--font-serif);color:var(--d-ink, var(--ink))}
#mpc-app .table small, #mpc-modal .table small{display:block;color:var(--muted);font-size:var(--size-2xs);margin-top:4px}
#mpc-app .mini-btn, #mpc-modal .mini-btn{border:0;background:none;padding:5px;color:var(--muted);font-size:var(--size-md);border-radius:3px}
#mpc-app .mini-btn:hover, #mpc-modal .mini-btn:hover{background:color-mix(in srgb, var(--gold) 6%, var(--surface));color:var(--d-jade, var(--jade))}
#mpc-app .board, #mpc-modal .board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:15px;overflow:auto;padding-bottom:15px}
#mpc-app .column, #mpc-modal .column{background:color-mix(in srgb, var(--gold) 6%, var(--surface));border:1px solid var(--line);border-radius:5px;padding:13px;min-height:360px}
#mpc-app .column.drag-over, #mpc-modal .column.drag-over{background:color-mix(in srgb, var(--accent-jade) 28%, var(--surface));border-color:color-mix(in srgb, var(--accent-jade) 50%, var(--mist))}
#mpc-app .column-head, #mpc-modal .column-head{display:flex;justify-content:space-between;align-items:center;font-size:var(--size-xs);margin-bottom:13px}
#mpc-app .column-head small, #mpc-modal .column-head small{font-size:var(--size-3xs);background:color-mix(in srgb, var(--accent-jade) 20%, var(--surface));padding:1px 5px;border-radius:3px}
#mpc-app .post-card, #mpc-modal .post-card{border:1px solid color-mix(in srgb, var(--accent-jade) 20%, var(--surface));border-radius:4px;background:var(--paper);padding:17px;margin-bottom:12px;cursor:grab;box-shadow:0 2px 3px color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 2%, transparent)}
#mpc-app .post-card h3, #mpc-modal .post-card h3{font-size:var(--size-lg);margin:10px 0 13px}
#mpc-app .post-card p, #mpc-modal .post-card p{font-size:var(--size-2xs);color:var(--muted)}
#mpc-app .post-card .bottom, #mpc-modal .post-card .bottom{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
#mpc-app .calendar-head, #mpc-modal .calendar-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
#mpc-app .calendar-grid, #mpc-modal .calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line)}
#mpc-app .weekday, #mpc-modal .weekday{background:color-mix(in srgb, var(--gold) 6%, var(--surface));padding:10px;text-align:center;font-size:var(--size-3xs);text-transform:uppercase;letter-spacing:1px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
#mpc-app .day, #mpc-modal .day{min-height:130px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;background:var(--paper);min-width:0}
#mpc-app .day.other, #mpc-modal .day.other{background:color-mix(in srgb, var(--gold) 6%, var(--ink));opacity:.65}
#mpc-app .day.today, #mpc-modal .day.today{background:color-mix(in srgb, var(--gold) 6%, var(--ink))}
#mpc-app .day-num, #mpc-modal .day-num{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:var(--size-xs)}
#mpc-app .day-num button, #mpc-modal .day-num button{border:0;background:none;color:var(--mist);font-size:var(--size-lg);padding:0 3px}
#mpc-app .today .day-num>span, #mpc-modal .today .day-num>span{background:var(--d-jade, var(--jade));color:var(--ink);border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
#mpc-app .cal-event, #mpc-modal .cal-event{width:100%;display:block;font-size:var(--size-3xs);line-height:1.4;padding:5px 6px;border:0;border-left:2px solid color-mix(in srgb, var(--accent-jade) 50%, var(--mist));border-radius:2px;margin-bottom:5px;background:color-mix(in srgb, var(--accent-jade) 10%, var(--surface));text-align:left;color:var(--mist);overflow-wrap:anywhere}
#mpc-app .cal-event.social, #mpc-modal .cal-event.social{background:color-mix(in srgb, var(--blossom) 5%, var(--ink));border-color:color-mix(in srgb, var(--blossom) 30%, var(--ink));color:var(--mist)}
#mpc-app .cards, #mpc-modal .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#mpc-app .idea-card, #mpc-modal .idea-card, #mpc-app .generic-card, #mpc-modal .generic-card{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:23px}
#mpc-app .idea-card h3, #mpc-modal .idea-card h3, #mpc-app .generic-card h3, #mpc-modal .generic-card h3{font-size:var(--size-xl);margin:14px 0}
#mpc-app .idea-card p, #mpc-modal .idea-card p, #mpc-app .generic-card p, #mpc-modal .generic-card p{font-size:var(--size-sm);color:var(--muted);white-space:pre-wrap}
#mpc-app .card-meta, #mpc-modal .card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--size-2xs);color:var(--muted)}
#mpc-app .card-footer, #mpc-modal .card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:15px;border-top:1px solid var(--line)}
#mpc-app .progress, #mpc-modal .progress{height:5px;background:color-mix(in srgb, var(--gold) 6%, var(--surface));border-radius:4px;overflow:hidden;margin-top:8px}
#mpc-app .progress>i, #mpc-modal .progress>i{display:block;height:100%;background:color-mix(in srgb, var(--accent-jade) 50%, var(--mist));border-radius:4px}
#mpc-app .bars, #mpc-modal .bars{display:flex;align-items:flex-end;gap:10px;height:160px;padding:20px 0 0;border-bottom:1px solid var(--line)}
#mpc-app .bar-group, #mpc-modal .bar-group{flex:1;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:6px}
#mpc-app .bar, #mpc-modal .bar{width:65%;max-width:40px;background:color-mix(in srgb, var(--accent-jade) 50%, var(--mist));border-radius:3px 3px 0 0;min-height:2px}
#mpc-app .bar-group small, #mpc-modal .bar-group small{font-size:var(--size-3xs);white-space:nowrap}
#mpc-app .bar-group b, #mpc-modal .bar-group b{font-size:var(--size-3xs);font-weight:400;color:var(--muted)}
#mpc-app .donut, #mpc-modal .donut{width:144px;height:144px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
#mpc-app .donut>div, #mpc-modal .donut>div{width:110px;height:110px;border-radius:50%;background:var(--paper);display:grid;place-content:center;text-align:center}
#mpc-app .donut b, #mpc-modal .donut b{font:var(--size-2xl) var(--font-serif)}
#mpc-app .donut small, #mpc-modal .donut small{font-size:var(--size-3xs);color:var(--muted)}
#mpc-app .chart-row, #mpc-modal .chart-row{display:flex;align-items:center;gap:25px}
#mpc-app .legend, #mpc-modal .legend{display:grid;gap:10px;flex:1;font-size:var(--size-2xs)}
#mpc-app .legend>div, #mpc-modal .legend>div{display:flex;align-items:center;gap:8px}
#mpc-app .legend b, #mpc-modal .legend b{margin-left:auto;font-weight:400}
#mpc-app .legend i, #mpc-modal .legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
#mpc-app .chip-list, #mpc-modal .chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#mpc-app .chip, #mpc-modal .chip{background:color-mix(in srgb, var(--gold) 6%, var(--surface));border:1px solid color-mix(in srgb, var(--accent-jade) 20%, var(--surface));border-radius:3px;padding:4px 8px;font-size:var(--size-3xs);color:var(--mist)}
#mpc-app .swatch, #mpc-modal .swatch{width:72px;height:72px;border-radius:5px;border:1px solid color-mix(in srgb, var(--accent-jade) 45%, var(--surface));display:flex;align-items:flex-end;justify-content:center;font-size:var(--size-3xs);padding-bottom:5px}
#mpc-app .media-image, #mpc-modal .media-image{width:100%;height:190px;object-fit:cover;border-radius:3px;margin-bottom:15px;background:color-mix(in srgb, var(--gold) 6%, var(--surface))}
#mpc-app .generic-card .placeholder-image, #mpc-modal .generic-card .placeholder-image{height:160px;background:color-mix(in srgb, var(--gold) 6%, var(--surface));border:1px dashed color-mix(in srgb, var(--accent-jade) 45%, var(--surface));display:grid;place-items:center;color:var(--mist);margin-bottom:15px;font:var(--size-3xl) var(--font-serif)}
#mpc-app .media-file, #mpc-modal .media-file{display:block;color:var(--d-jade, var(--jade));font-size:var(--size-xs);margin-top:12px}
#mpc-app .section-note, #mpc-modal .section-note{font-size:var(--size-xs);color:var(--muted);margin-bottom:20px}
#mpc-app .metric-split, #mpc-modal .metric-split{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;border-top:1px solid var(--line);padding-top:14px;margin-top:15px}
#mpc-app .metric-split b, #mpc-modal .metric-split b{font:var(--size-xl) var(--font-serif);display:block}
#mpc-app .metric-split small, #mpc-modal .metric-split small{font-size:var(--size-3xs);color:var(--muted)}
#mpc-modal{border:1px solid color-mix(in srgb, var(--accent-jade) 65%, var(--surface));border-radius:7px;max-width:calc(100vw - 28px);width:690px;max-height:calc(100dvh - 35px);padding:0;background:var(--paper);color:var(--d-ink, var(--ink));box-shadow:0 30px 110px color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 25.1%, transparent)}
#mpc-modal::backdrop{background:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 60%, transparent);backdrop-filter:blur(3px)}
#mpc-modal.wide{width:1060px}
#mpc-app .dialog-head, #mpc-modal .dialog-head{padding:26px 28px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;background:var(--paper);z-index:2}
#mpc-app .dialog-head h2, #mpc-modal .dialog-head h2{font-size:var(--size-2xl)}
#mpc-app .dialog-body, #mpc-modal .dialog-body{padding:26px 28px}
#mpc-app .close, #mpc-modal .close{border:1px solid var(--line);border-radius:50%;width:29px;height:29px;background:none;font-size:var(--size-lg);color:var(--muted)}
#mpc-app .form-grid, #mpc-modal .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
#mpc-app .field, #mpc-modal .field{display:flex;flex-direction:column;gap:7px;min-width:0}
#mpc-app .field>span, #mpc-modal .field>span{font-size:var(--size-2xs);color:var(--mist)}
#mpc-app .field.full, #mpc-modal .field.full{grid-column:1/-1}
#mpc-app input, #mpc-modal input, #mpc-app select, #mpc-modal select, #mpc-app textarea, #mpc-modal textarea{border:1px solid color-mix(in srgb, var(--accent-jade) 28%, var(--surface));border-radius:4px;padding:10px 11px;background:var(--ink);color:var(--d-ink, var(--ink));min-width:0;max-width:100%}
#mpc-app textarea, #mpc-modal textarea{resize:vertical;line-height:1.7;width:100%}
#mpc-app input[type=checkbox], #mpc-modal input[type=checkbox]{accent-color:var(--d-jade, var(--jade))}
#mpc-app .form-actions, #mpc-modal .form-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
#mpc-app .form-actions .push, #mpc-modal .form-actions .push{flex:1}
#mpc-app .error, #mpc-modal .error{color:var(--accent-lacquer);font-size:var(--size-xs);padding:12px;background:color-mix(in srgb, var(--accent-lacquer) 14%, var(--ink));border:1px solid color-mix(in srgb, var(--moon) 36%, var(--surface));border-radius:4px;margin-top:15px}
#mpc-app .editor-layout, #mpc-modal .editor-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:27px}
#mpc-app .editor-main textarea, #mpc-modal .editor-main textarea{min-height:380px;font:var(--size-md)/1.9 var(--font-serif);width:100%;background:color-mix(in srgb, var(--lacquer) 6%, var(--ink))}
#mpc-app .editor-title, #mpc-modal .editor-title{font:var(--size-2xl) var(--font-serif);border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;width:100%;padding:10px 0 17px;margin-bottom:17px}
#mpc-app .editor-toolbar, #mpc-modal .editor-toolbar{display:flex;align-items:center;gap:6px;margin:15px 0 10px}
#mpc-app .editor-toolbar button, #mpc-modal .editor-toolbar button{font-size:var(--size-2xs);padding:5px 10px;border:1px solid var(--line);border-radius:3px;background:color-mix(in srgb, var(--gold) 6%, var(--ink))}
#mpc-app .editor-stats, #mpc-modal .editor-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--size-3xs);margin:10px 0}
#mpc-app .editor-aside, #mpc-modal .editor-aside{border-left:1px solid var(--line);padding-left:24px;display:grid;gap:18px;align-content:start}
#mpc-app .editor-aside h3, #mpc-modal .editor-aside h3{font-size:var(--size-xl)}
#mpc-app .checklist, #mpc-modal .checklist{display:grid;gap:9px}
#mpc-app .checklist label, #mpc-modal .checklist label{font-size:var(--size-xs);display:flex;gap:8px;align-items:center;color:var(--mist)}
#mpc-app .preview, #mpc-modal .preview{font:var(--size-md)/1.9 var(--font-serif);padding:18px;border:1px solid var(--line);white-space:pre-wrap;min-height:200px;background:color-mix(in srgb, var(--lacquer) 6%, var(--ink))}
#mpc-app .preview h2, #mpc-modal .preview h2{font-size:var(--size-xl);margin:15px 0}
#mpc-app .preview h3, #mpc-modal .preview h3{font-size:var(--size-xl);margin:13px 0}
#mpc-app .preview p, #mpc-modal .preview p{margin:9px 0}
#mpc-app .preview img, #mpc-modal .preview img{max-width:100%}
#mpc-app .upload-preview, #mpc-modal .upload-preview{max-width:100%;max-height:200px;object-fit:contain;border:1px solid var(--line);border-radius:4px;margin:10px 0}
#mpc-app .upload-hint, #mpc-modal .upload-hint{font-size:var(--size-2xs);color:var(--muted);margin-top:6px}
#mpc-app .schedule-note, #mpc-modal .schedule-note{font-size:var(--size-2xs);color:var(--mist);margin-top:9px}
#mpc-app .checkrow, #mpc-modal .checkrow{display:flex;align-items:center;gap:8px;font-size:var(--size-xs)}
#mpc-app .metric-table td input, #mpc-modal .metric-table td input{width:85px}
#mpc-app .source-note, #mpc-modal .source-note{font-size:var(--size-3xs);color:var(--muted);margin-top:16px}
#mpc-app .global-results, #mpc-modal .global-results{position:absolute;top:59px;right:37px;width:370px;max-width:90vw;max-height:380px;overflow:auto;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 32px color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 12.5%, transparent);padding:16px;z-index:40}
#mpc-app .global-results button, #mpc-modal .global-results button{display:block;width:100%;border:0;background:none;text-align:left;padding:12px 8px;border-bottom:1px solid var(--line);font-size:var(--size-sm)}
#mpc-app .global-results small, #mpc-modal .global-results small{display:block;font-size:var(--size-3xs);color:var(--muted)}
#mpc-app .template-list, #mpc-modal .template-list{display:grid;gap:12px}
#mpc-app .template-row, #mpc-modal .template-row{padding:16px;border:1px solid var(--line);border-radius:4px;display:flex;gap:14px;align-items:center;background:color-mix(in srgb, var(--border) 20%, var(--ink))}
#mpc-app .template-row>div, #mpc-modal .template-row>div{flex:1}
#mpc-app .template-row h3, #mpc-modal .template-row h3{font-size:var(--size-xl)}
#mpc-app .template-row p, #mpc-modal .template-row p{font-size:var(--size-xs);color:var(--muted);margin-top:3px}
@media(min-width:1600px){#mpc-app .main, #mpc-modal .main{padding:36px 50px}
#mpc-app .hero-copy, #mpc-modal .hero-copy{padding:38px 43px}
#mpc-app .hero h2, #mpc-modal .hero h2{font-size:var(--size-3xl)}
#mpc-app .hero-side, #mpc-modal .hero-side{padding:35px}
#mpc-app .cover-note, #mpc-modal .cover-note{width:265px}}
@media(max-width:1180px){#mpc-app .main, #mpc-modal .main{padding:25px}
#mpc-app .grid2, #mpc-modal .grid2{grid-template-columns:1.3fr 1fr}
#mpc-app .cards, #mpc-modal .cards{grid-template-columns:1fr 1fr}
#mpc-app .stat, #mpc-modal .stat{padding:18px}
#mpc-app .hero-copy, #mpc-modal .hero-copy{padding:28px}
#mpc-app .hero h2, #mpc-modal .hero h2{font-size:var(--size-2xl)}
#mpc-app .hero-side, #mpc-modal .hero-side{padding:20px}
#mpc-app .cover-note, #mpc-modal .cover-note{width:190px;padding:22px}
#mpc-app .chart-row, #mpc-modal .chart-row{flex-direction:column}
#mpc-app .legend, #mpc-modal .legend{width:100%}}
@media(max-width:900px){#mpc-app .stats, #mpc-modal .stats{grid-template-columns:1fr 1fr}
#mpc-app .grid2, #mpc-modal .grid2, #mpc-app .equal, #mpc-modal .equal{grid-template-columns:1fr}
#mpc-app .hero, #mpc-modal .hero{grid-template-columns:1fr}
#mpc-app .hero-side, #mpc-modal .hero-side{display:none}
#mpc-app .day, #mpc-modal .day{min-height:105px;padding:5px}
#mpc-app .cal-event, #mpc-modal .cal-event{font-size:var(--size-3xs)}
#mpc-app .editor-layout, #mpc-modal .editor-layout{grid-template-columns:1fr}
#mpc-app .editor-aside, #mpc-modal .editor-aside{border-left:0;border-top:1px solid var(--line);padding:23px 0 0;grid-template-columns:1fr 1fr}
#mpc-app .editor-aside>h3, #mpc-modal .editor-aside>h3, #mpc-app .editor-aside>.checklist, #mpc-modal .editor-aside>.checklist{grid-column:1/-1}
#mpc-app .page-head, #mpc-modal .page-head{flex-wrap:wrap}
#mpc-app .page-head h1, #mpc-modal .page-head h1{font-size:var(--size-2xl)}}
@media(max-width:650px){#mpc-app .main, #mpc-modal .main{padding:23px 17px}
#mpc-app .hero-copy, #mpc-modal .hero-copy{padding:24px}
#mpc-app .hero h2, #mpc-modal .hero h2{font-size:var(--size-2xl)}
#mpc-app .hero-copy .eyebrow, #mpc-modal .hero-copy .eyebrow{font-size:var(--size-3xs)}
#mpc-app .stats, #mpc-modal .stats{gap:12px}
#mpc-app .stat, #mpc-modal .stat{padding:17px}
#mpc-app .stat .value, #mpc-modal .stat .value{font-size:var(--size-2xl)}
#mpc-app .stat .stat-top, #mpc-modal .stat .stat-top{font-size:var(--size-3xs)}
#mpc-app .panel, #mpc-modal .panel{padding:18px}
#mpc-app .panel-head h2, #mpc-modal .panel-head h2{font-size:var(--size-xl)}
#mpc-app .panel-head .quiet, #mpc-modal .panel-head .quiet{font-size:var(--size-2xs)}
#mpc-app .cards, #mpc-modal .cards{gap:13px}
#mpc-app .idea-card, #mpc-modal .idea-card, #mpc-app .generic-card, #mpc-modal .generic-card{padding:18px}
#mpc-app .idea-card h3, #mpc-modal .idea-card h3, #mpc-app .generic-card h3, #mpc-modal .generic-card h3{font-size:var(--size-xl)}
#mpc-app .card-footer, #mpc-modal .card-footer{gap:7px;flex-wrap:wrap}
#mpc-app .calendar-grid, #mpc-modal .calendar-grid{min-width:630px}
#mpc-app .calendar-scroll, #mpc-modal .calendar-scroll{overflow:auto}
#mpc-app .calendar-head, #mpc-modal .calendar-head{flex-wrap:wrap}
#mpc-app .calendar-head h2, #mpc-modal .calendar-head h2{font-size:var(--size-xl)}
#mpc-app .dialog-head, #mpc-modal .dialog-head{padding:23px 20px 17px}
#mpc-app .dialog-head h2, #mpc-modal .dialog-head h2{font-size:var(--size-xl)}
#mpc-app .dialog-body, #mpc-modal .dialog-body{padding:22px 20px}
#mpc-app .field input, #mpc-modal .field input, #mpc-app .field select, #mpc-modal .field select, #mpc-app .field textarea, #mpc-modal .field textarea{font-size:var(--size-md)}
#mpc-app .form-grid, #mpc-modal .form-grid{gap:15px 12px}
#mpc-app .form-actions, #mpc-modal .form-actions{flex-wrap:wrap}
#mpc-app .editor-title, #mpc-modal .editor-title{font-size:var(--size-2xl)}
#mpc-app .editor-main textarea, #mpc-modal .editor-main textarea{font-size:var(--size-md)}
#mpc-app .page-head p:not(.eyebrow), #mpc-modal .page-head p:not(.eyebrow){font-size:var(--size-sm)}
#mpc-app .board, #mpc-modal .board{grid-template-columns:repeat(5,230px)}
#mpc-app .chart-row, #mpc-modal .chart-row{flex-direction:row}
#mpc-app .row, #mpc-modal .row{gap:10px}
#mpc-app .row-title strong, #mpc-modal .row-title strong{font-size:var(--size-sm)}
#mpc-app .row-title small, #mpc-modal .row-title small{font-size:var(--size-3xs)}
#mpc-app .badge, #mpc-modal .badge{font-size:var(--size-3xs)}
#mpc-app .table th, #mpc-modal .table th{font-size:var(--size-3xs)}
#mpc-app .table td, #mpc-modal .table td{font-size:var(--size-xs);padding:14px 10px}
#mpc-app .metric-split, #mpc-modal .metric-split{gap:9px}
#mpc-app .metric-split b, #mpc-modal .metric-split b{font-size:var(--size-lg)}
#mpc-app .media-image, #mpc-modal .media-image{height:150px}
#mpc-app .global-results, #mpc-modal .global-results{right:17px}
#mpc-app .section-note, #mpc-modal .section-note{font-size:var(--size-2xs)}}
@media(max-width:420px){#mpc-app .cards, #mpc-modal .cards{grid-template-columns:1fr}
#mpc-app .form-grid, #mpc-modal .form-grid, #mpc-app .editor-aside, #mpc-modal .editor-aside{grid-template-columns:1fr}
#mpc-app .field.full, #mpc-modal .field.full{grid-column:1}
#mpc-app .chart-row, #mpc-modal .chart-row{flex-direction:column}
#mpc-app .hero h2, #mpc-modal .hero h2{font-size:var(--size-2xl)}
#mpc-app .hero-copy, #mpc-modal .hero-copy{padding:23px}
#mpc-app .page-head h1, #mpc-modal .page-head h1{font-size:var(--size-2xl)}
#mpc-app .stat .sub, #mpc-modal .stat .sub{font-size:var(--size-3xs)}
#mpc-app .stat, #mpc-modal .stat{padding:15px}
#mpc-app .toolbar, #mpc-modal .toolbar{gap:10px}
#mpc-app .media-image, #mpc-modal .media-image{height:220px}}
@media print{#mpc-app .page-head .actions, #mpc-modal .page-head .actions, #mpc-app .toolbar, #mpc-modal .toolbar, #mpc-app .btn, #mpc-modal .btn, #mpc-app .outline, #mpc-modal .outline{display:none!important}
#mpc-app .main, #mpc-modal .main{padding:0}
#mpc-app .panel, #mpc-modal .panel{break-inside:avoid}}
/* the workspace's base colours, given the palace's own */
#mpc-app, #mpc-modal { --bg: color-mix(in srgb, var(--surface) 62%, var(--ink)); --paper: var(--surface); --d-ink: var(--blossom); --muted: var(--mist); --line: var(--border); --d-gold: var(--d-gold, var(--gold));
  --d-jade: color-mix(in srgb, var(--accent-jade) 75%, var(--blossom)); --pale: color-mix(in srgb, var(--accent-jade) 12%, var(--surface));
  --rose: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 16%, var(--surface)); --purple: color-mix(in srgb, color-mix(in srgb, var(--blossom) 65%, var(--ink)) 16%, var(--surface)); color: var(--blossom); font: var(--size-sm)/1.55 var(--font-sans); }
#mpc-app .main { padding: 0; max-width: none; }
#mpc-modal { background: var(--surface); color: var(--blossom); }
/* inside the studio, --ink is the workspace's text colour, so the fields' dark ground is written out */
#mpc-app input, #mpc-app select, #mpc-app textarea, #mpc-modal input, #mpc-modal select, #mpc-modal textarea {
  background-color: color-mix(in srgb, var(--surface) 62%, var(--ink)); color: var(--blossom); border-color: var(--border); }
#mpc-app select option, #mpc-modal select option { background: var(--surface); color: var(--blossom); }
/* Drop 66: Scrolls to Critique - the critique desk, in the workspace's own dialog. */
#mpc-modal .crit-head { font: var(--size-xl) var(--font-serif); margin: 26px 0 12px; color: var(--blossom); }
#mpc-modal .crit-tabs { margin-bottom: 14px; }
#mpc-modal .crit-pane[hidden] { display: none; }
#mpc-modal .crit-scales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#mpc-modal .crit-actions { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
#mpc-modal .crit-actions .spacer { flex: 1; }
#mpc-modal .icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--blossom); cursor: pointer; font-size: var(--size-md); }
@media (max-width: 760px) { #mpc-modal .crit-scales { grid-template-columns: 1fr 1fr; } }

/* ==========================================================
   Drop 66b: the approved desk inside the studio, anchored so the
   workspace's page-wide rules cannot restyle it; titles drawn as text,
   not as the browser's white buttons; and a drama's viewing status.
   ========================================================== */
#mpc-app .ink-eyebrow{ font-size: var(--size-3xs); letter-spacing: 2px; text-transform: uppercase; color: var(--d-gold, var(--gold)); margin: 0 0 9px; }
#mpc-app .ink-head{ display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 27px; flex-wrap: wrap; }
#mpc-app .ink-head h1{ font: var(--size-3xl)/1.15 var(--font-serif); margin: 0; color: var(--blossom); }
#mpc-app .ink-head p:not(.ink-eyebrow){ color: var(--mist); font-size: var(--size-sm); margin: 10px 0 0; }
#mpc-app .ink-actions{ display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
#mpc-app .ink-desk-hero{ border: 1px solid color-mix(in srgb, var(--accent-jade) 30%, var(--border)); border-radius: 7px; overflow: hidden; margin-bottom: 24px;
  display: grid; grid-template-columns: 1.55fr 1fr; background: color-mix(in srgb, var(--accent-jade) 9%, var(--surface)); }
#mpc-app .ink-hero-copy{ padding: 30px 35px; }
#mpc-app .ink-hero-copy h2{ font: var(--size-2xl)/1.15 var(--font-serif); max-width: 540px; margin: 0; color: var(--blossom); }
#mpc-app .ink-hero-copy p:not(.ink-eyebrow){ font-size: var(--size-sm); color: var(--mist); margin: 13px 0 20px; max-width: 430px; }
#mpc-app .ink-hero-side{ background: color-mix(in srgb, var(--accent-jade) 14%, var(--surface)); padding: 28px; display: flex; align-items: center; justify-content: center; position: relative;
  border-left: 1px solid color-mix(in srgb, var(--accent-jade) 28%, var(--border)); }
#mpc-app .ink-cover-note{ transform: rotate(-5deg); background: color-mix(in srgb, var(--blossom) 7%, var(--studio-ground)); border: 1px solid color-mix(in srgb, var(--d-gold, var(--gold)) 40%, var(--border));
  box-shadow: 9px 12px 0 color-mix(in srgb, var(--accent-jade) 16%, transparent); padding: 28px; width: 230px; min-height: 178px; position: relative; }
#mpc-app .ink-cover-note::before{ content: ''; width: 65px; height: 19px; background: color-mix(in srgb, var(--d-gold, var(--gold)) 55%, transparent); position: absolute; top: -8px; left: 80px; transform: rotate(3deg); }
#mpc-app .ink-cover-note .ink-star{ position: absolute; right: 19px; top: 18px; font-size: var(--size-xl); color: var(--d-gold, var(--gold)); }
#mpc-app .ink-cover-note p{ font-size: var(--size-3xs); color: var(--mist); letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
#mpc-app .ink-cover-note p:last-child{ text-transform: none; letter-spacing: 0; }
#mpc-app .ink-cover-note h3{ font: var(--size-xl)/1.25 var(--font-serif); margin: 10px 0; color: var(--blossom); }
#mpc-app .ink-stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 22px 0; }
#mpc-app .ink-stat{ background: var(--surface); border: 1px solid var(--border); padding: 21px 23px; border-radius: 5px; min-width: 0; }
#mpc-app .ink-stat-top{ display: flex; justify-content: space-between; color: var(--mist); font-size: var(--size-2xs); }
#mpc-app .ink-stat-icon{ color: var(--accent-jade); font-size: var(--size-lg); }
#mpc-app .ink-stat-value{ font: var(--size-2xl)/1.2 var(--font-serif); margin: 9px 0 3px; color: var(--blossom); }
#mpc-app .ink-stat-sub{ font-size: var(--size-2xs); color: var(--mist); }
#mpc-app .ink-grid2{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
#mpc-app .ink-panel{ background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 23px; min-width: 0; margin-bottom: 22px; }
#mpc-app .ink-panel-head{ display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 19px; }
#mpc-app .ink-panel-head h2{ font: var(--size-xl) var(--font-serif); margin: 0; color: var(--blossom); }
#mpc-app .ink-panel-head .ink-eyebrow{ font-size: var(--size-3xs); }
#mpc-app .ink-row{ display: flex; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }
#mpc-app .ink-row:last-child{ border-bottom: 0; }
#mpc-app .ink-row-title{ flex: 1; min-width: 0; }
#mpc-app .ink-row-name{ display: block; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-size: var(--size-sm); color: var(--blossom); cursor: pointer; }
#mpc-app .ink-row-name:hover{ color: var(--d-gold, var(--gold)); }
#mpc-app .ink-row-title small{ font-size: var(--size-2xs); color: var(--mist); display: block; margin-top: 4px; }
#mpc-app .ink-datebox{ width: 40px; text-align: center; border: 1px solid var(--border); padding: 4px; border-radius: 4px; flex-shrink: 0; background: color-mix(in srgb, var(--accent-jade) 7%, var(--studio-ground)); }
#mpc-app .ink-datebox b{ font: var(--size-xl) var(--font-serif); display: block; color: var(--blossom); }
#mpc-app .ink-datebox small{ font-size: var(--size-3xs); text-transform: uppercase; display: block; color: var(--mist); }
#mpc-app .ink-check{ width: 17px; height: 17px; accent-color: var(--d-gold, var(--gold)); cursor: pointer; flex: none; }
#mpc-app .ink-badge{ font-size: var(--size-3xs); border-radius: 3px; padding: 4px 7px; display: inline-flex; align-items: center; line-height: 1.25; white-space: nowrap;
  background: color-mix(in srgb, var(--accent-jade) 14%, transparent); color: var(--accent-jade); }
#mpc-app .ink-badge.is-draft{ background: color-mix(in srgb, color-mix(in srgb, var(--gold) 75%, var(--blossom)) 16%, transparent); color: var(--gold); }
#mpc-app .ink-badge.is-review{ background: color-mix(in srgb, color-mix(in srgb, var(--blossom) 65%, var(--ink)) 18%, transparent); color: var(--mist); }
#mpc-app .ink-badge.is-scheduled{ background: color-mix(in srgb, var(--lantern) 18%, transparent); color: var(--lantern); }
#mpc-app .ink-badge.is-published{ background: color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 16%, transparent); color: var(--accent-jade); }
#mpc-app .ink-badge.is-overdue, #mpc-app .ink-badge.is-high{ background: color-mix(in srgb, color-mix(in srgb, var(--accent-lacquer) 75%, var(--blossom)) 18%, transparent); color: var(--accent-lacquer); }
#mpc-app .ink-badge.is-idea, #mpc-app .ink-badge.is-low, #mpc-app .ink-badge.is-normal{ background: color-mix(in srgb, var(--mist) 12%, transparent); color: var(--mist); }
#mpc-app .ink-empty{ text-align: center; padding: 38px 20px; color: var(--mist); }
#mpc-app .ink-empty > span{ color: var(--d-gold, var(--gold)); font-size: var(--size-xl); }
#mpc-app .ink-empty h3{ font: var(--size-xl) var(--font-serif); color: var(--blossom); margin: 8px 0; }
#mpc-app .ink-empty p{ font-size: var(--size-sm); max-width: 380px; margin: 0 auto 15px; }
#mpc-app .ink-desk-bars{ display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 20px 0 0; border-bottom: 1px solid var(--border); }
#mpc-app .ink-bar-group{ flex: 1; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; gap: 6px; }
#mpc-app .ink-bar-group b{ font-size: var(--size-3xs); font-weight: 400; color: var(--mist); }
#mpc-app .ink-bar-group small{ font-size: var(--size-3xs); white-space: nowrap; color: var(--mist); }
#mpc-app .ink-desk-bar{ width: 65%; max-width: 40px; background: linear-gradient(0deg, var(--accent-jade), var(--d-gold, var(--gold))); border-radius: 3px 3px 0 0; min-height: 2px; }
#mpc-app .ink-chart-row{ display: flex; align-items: center; gap: 25px; }
#mpc-app .ink-donut{ width: 144px; height: 144px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
#mpc-app .ink-donut > div{ width: 110px; height: 110px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; }
#mpc-app .ink-donut b{ font: var(--size-2xl) var(--font-serif); color: var(--blossom); }
#mpc-app .ink-donut small{ font-size: var(--size-3xs); color: var(--mist); }
#mpc-app .ink-legend{ display: grid; gap: 10px; flex: 1; font-size: var(--size-2xs); color: var(--blossom); }
#mpc-app .ink-legend > div{ display: flex; align-items: center; gap: 8px; }
#mpc-app .ink-legend b{ margin-left: auto; font-weight: 400; }
#mpc-app .ink-legend i{ width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@media (min-width: 1600px){#mpc-app .ink-hero-copy{ padding: 38px 43px; }
#mpc-app .ink-hero-copy h2{ font-size: var(--size-3xl); }
#mpc-app .ink-hero-side{ padding: 35px; }
#mpc-app .ink-cover-note{ width: 265px; }}
@media (max-width: 1180px){#mpc-app .ink-grid2{ grid-template-columns: 1.3fr 1fr; }
#mpc-app .ink-stat{ padding: 18px; }
#mpc-app .ink-hero-copy{ padding: 28px; }
#mpc-app .ink-hero-copy h2{ font-size: var(--size-2xl); }
#mpc-app .ink-hero-side{ padding: 20px; }
#mpc-app .ink-cover-note{ width: 190px; padding: 22px; }
#mpc-app .ink-chart-row{ flex-direction: column; }
#mpc-app .ink-legend{ width: 100%; }}
@media (max-width: 900px){#mpc-app .ink-stats{ grid-template-columns: 1fr 1fr; }
#mpc-app .ink-grid2{ grid-template-columns: 1fr; }
#mpc-app .ink-desk-hero{ grid-template-columns: 1fr; }
#mpc-app .ink-hero-side{ display: none; }
#mpc-app .ink-chart-row{ flex-direction: row; }}
#mpc-app .title-btn, #mpc-modal .title-btn { background: none; border: 0; padding: 0; margin: 0; text-align: left; color: var(--blossom); font: inherit; cursor: pointer; }
#mpc-app .title-btn:hover, #mpc-modal .title-btn:hover { color: var(--d-gold, var(--gold)); }
#mpc-app .ink-row-name { background: none; border: 0; padding: 0; }
#mpc-app .crit-standing { color: var(--d-gold, var(--gold)); }

/* inside the studio --ink is the workspace's text colour; the desk's dark grounds use a name of their own */
#mpc-app, #mpc-modal { --studio-ground: color-mix(in srgb, var(--surface) 62%, var(--ink)); }
/* Drop 66c: titles that open a record are text, never the browser's button - in every
   room, whatever the browser, against any other rule. */
#mpc-app button.title-btn, #mpc-modal button.title-btn, #mpc-app .ink-row-name,
#mpc-app button[data-action="edit"]:not(.btn):not(.quiet):not(.mini-btn):not(.outline):not(.tab) {
  -webkit-appearance: none !important; appearance: none !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0;
  padding: 0; margin: 0; color: var(--blossom); font: inherit; text-align: left; cursor: pointer;
}
#mpc-app button.title-btn:hover, #mpc-app .ink-row-name:hover { color: var(--d-gold, var(--gold)); }
/* Drop 66d: the critique desk's publishing row. */
#mpc-modal .crit-publish { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 4px; }
@media (max-width: 760px) { #mpc-modal .crit-publish { grid-template-columns: 1fr 1fr; } }
/* Drop 69: the Allied Overview's linked lines. */
.sv-page a.ov-reminder, .sv-page a.ov-coming, .sv-page a.sv-task-words { color: inherit; text-decoration: none; }
.sv-page a.ov-reminder:hover strong, .sv-page a.ov-coming:hover strong, .sv-page a.sv-task-words:hover strong { color: var(--gold); }
.ov-reminder { flex-direction: column; gap: 3px; }
/* Drop 69b: the overview's parts - figures, the two columns, the fortnight - an even gap apart. */
.ov-page { display: flex; flex-direction: column; gap: 20px; }
.ov-page > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ov-page .jm-split { gap: 20px; align-items: stretch; }

/* ==========================================================
   Drop 70: the Hall of Appraisal's own styles, ported - scoped to the
   hall and its dialog, its base colours given the palace's.
   ========================================================== */
#gsa-app, #gsa-dialog{color-scheme:dark;--bg:color-mix(in srgb, var(--jade) 14%, var(--ink));--nav:color-mix(in srgb, var(--jade) 10%, var(--ink));--panel:color-mix(in srgb, var(--accent-jade) 10%, var(--surface));--raised:color-mix(in srgb, var(--accent-jade) 20%, var(--surface));--field:color-mix(in srgb, var(--accent-jade) 10%, var(--ink));--line:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 12.9%, transparent);--line2:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 28.2%, transparent);--d-ink:var(--blossom);--muted:var(--mist);--dim:var(--mist);--d-jade:var(--accent-jade);--rose:color-mix(in srgb, var(--accent-lacquer) 50%, var(--blossom));--soft:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 4.7%, transparent);--serif:var(--font-serif);--shadow:0 5px 28px color-mix(in srgb, var(--ink) 13.3%, transparent)}
#gsa-app{margin:0;background:var(--bg);color:var(--d-ink, var(--ink));font:var(--size-sm)/1.6 var(--font-sans)}
#gsa-app button, #gsa-dialog button, #gsa-app input, #gsa-dialog input, #gsa-app textarea, #gsa-dialog textarea, #gsa-app select, #gsa-dialog select{font:inherit}
#gsa-app button, #gsa-dialog button{cursor:pointer;color:inherit}
#gsa-app a, #gsa-dialog a{color:inherit;text-decoration:none}
#gsa-app h1, #gsa-dialog h1, #gsa-app h2, #gsa-dialog h2, #gsa-app h3, #gsa-dialog h3, #gsa-app h4, #gsa-dialog h4, #gsa-app p, #gsa-dialog p{margin:0}
#gsa-app h1, #gsa-dialog h1, #gsa-app h2, #gsa-dialog h2, #gsa-app h3, #gsa-dialog h3, #gsa-app h4, #gsa-dialog h4{font-family:var(--font-serif);font-weight:400}
#gsa-app button, #gsa-dialog button, #gsa-app a, #gsa-dialog a, #gsa-app input, #gsa-dialog input, #gsa-app textarea, #gsa-dialog textarea, #gsa-app select, #gsa-dialog select{-webkit-tap-highlight-color:transparent}
#gsa-app button:focus-visible, #gsa-dialog button:focus-visible, #gsa-app a:focus-visible, #gsa-dialog a:focus-visible, #gsa-app input:focus-visible, #gsa-dialog input:focus-visible, #gsa-app textarea:focus-visible, #gsa-dialog textarea:focus-visible, #gsa-app select:focus-visible, #gsa-dialog select:focus-visible{outline:2px solid var(--d-gold, var(--gold));outline-offset:3px}
#gsa-app button:disabled, #gsa-dialog button:disabled{cursor:not-allowed;opacity:.45}
#gsa-app button svg, #gsa-dialog button svg{pointer-events:none}
#gsa-app svg, #gsa-dialog svg{width:18px;height:18px;display:block;flex-shrink:0}
#gsa-app img, #gsa-dialog img{display:block;max-width:100%}
#gsa-app .shell, #gsa-dialog .shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
#gsa-app .sidebar, #gsa-dialog .sidebar{position:fixed;inset:0 auto 0 0;width:224px;z-index:30;display:flex;flex-direction:column;background:var(--nav);border-right:1px solid var(--line);padding:26px 14px 20px;overflow:auto}
#gsa-app .brand, #gsa-dialog .brand{display:flex;align-items:center;gap:12px;padding:0 10px 25px}
#gsa-app .brand-mark, #gsa-dialog .brand-mark{font-family:var(--font-serif);font-size:var(--size-xl);color:var(--d-gold, var(--gold));width:39px;height:49px;display:grid;place-items:center;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 54.9%, transparent);border-radius:21px 21px 3px 3px;box-shadow:inset 0 0 0 3px var(--nav),inset 0 0 0 4px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 12.5%, transparent)}
#gsa-app .brand strong, #gsa-dialog .brand strong{font:400 var(--size-lg)/1.2 var(--font-serif);display:block}
#gsa-app .brand small, #gsa-dialog .brand small{display:block;color:var(--dim);font-size:var(--size-2xs);letter-spacing:.17em;margin-top:7px}
#gsa-app .side-group, #gsa-dialog .side-group{font-size:var(--size-2xs);letter-spacing:.18em;color:var(--dim);margin:22px 10px 10px}
#gsa-app .nav, #gsa-dialog .nav{display:flex;gap:11px;align-items:center;text-align:left;border:1px solid transparent;background:transparent;color:var(--muted);width:100%;padding:10px;border-radius:6px;margin:3px 0;font-size:var(--size-sm)}
#gsa-app .nav.active, #gsa-dialog .nav.active{color:var(--d-gold, var(--gold));border-color:var(--line2);background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 4.7%, transparent)}
#gsa-app .nav:hover, #gsa-dialog .nav:hover{background:var(--soft);color:var(--d-ink, var(--ink))}
#gsa-app .nav svg, #gsa-dialog .nav svg{width:16px;height:16px}
#gsa-app .nav small, #gsa-dialog .nav small{display:block;font-size:var(--size-2xs);color:var(--dim);margin-top:3px}
#gsa-app .criterion-nav, #gsa-dialog .criterion-nav{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;padding:8px 11px;border-radius:5px;color:var(--muted);font-size:var(--size-xs);text-align:left}
#gsa-app .criterion-nav:hover, #gsa-dialog .criterion-nav:hover{background:var(--soft)}
#gsa-app .criterion-nav .num, #gsa-dialog .criterion-nav .num{font-family:var(--font-serif);font-size:var(--size-xs);color:var(--d-gold, var(--gold));width:20px;flex-shrink:0}
#gsa-app .criterion-nav .nav-dot, #gsa-dialog .criterion-nav .nav-dot{margin-left:auto;width:4px;height:4px;border:1px solid var(--dim);border-radius:50%}
#gsa-app .criterion-nav.scored .nav-dot, #gsa-dialog .criterion-nav.scored .nav-dot{background:var(--d-jade, var(--jade));border-color:var(--d-jade, var(--jade))}
#gsa-app .criterion-nav.selected, #gsa-dialog .criterion-nav.selected{background:var(--soft);color:var(--d-ink, var(--ink))}
#gsa-app .side-bottom, #gsa-dialog .side-bottom{margin-top:auto;padding-top:25px}
#gsa-app .side-motto, #gsa-dialog .side-motto{padding:18px 12px 0;margin-top:17px;border-top:1px solid var(--line);color:var(--dim);font:italic var(--size-sm)/1.7 var(--font-serif)}
#gsa-app .keeper, #gsa-dialog .keeper{display:flex;align-items:center;gap:9px;margin:18px 10px 0;color:var(--muted);font-size:var(--size-xs)}
#gsa-app .keeper-seal, #gsa-dialog .keeper-seal{width:28px;height:28px;border:1px solid var(--line2);display:grid;place-items:center;border-radius:50%;font:var(--size-md) var(--font-serif);color:var(--d-gold, var(--gold))}
#gsa-app .keeper small, #gsa-dialog .keeper small{display:block;color:var(--dim);font-size:var(--size-2xs);letter-spacing:.08em;margin-top:2px}
#gsa-app .workspace, #gsa-dialog .workspace{grid-column:2;min-width:0}
#gsa-app .topbar, #gsa-dialog .topbar{height:66px;border-bottom:1px solid var(--line);padding:0 33px;display:flex;align-items:center;gap:18px}
#gsa-app .crumb, #gsa-dialog .crumb{font-size:var(--size-sm);color:var(--dim);margin-right:auto}
#gsa-app .crumb span, #gsa-dialog .crumb span{color:var(--muted);margin-left:7px}
#gsa-app .saved-state, #gsa-dialog .saved-state{font-size:var(--size-xs);color:var(--dim);display:flex;align-items:center;gap:6px}
#gsa-app .saved-state i, #gsa-dialog .saved-state i{width:4px;height:4px;background:var(--d-jade, var(--jade));border-radius:50%}
#gsa-app .icon-btn, #gsa-dialog .icon-btn{display:inline-grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted)}
#gsa-app .icon-btn svg, #gsa-dialog .icon-btn svg{width:14px;height:14px}
#gsa-app .icon-btn:hover, #gsa-dialog .icon-btn:hover{background:var(--raised);color:var(--d-gold, var(--gold))}
#gsa-app .top-actions, #gsa-dialog .top-actions{display:flex;align-items:center;gap:8px}
#gsa-app .main, #gsa-dialog .main{padding:27px 33px;max-width:1620px;margin:0 auto}
#gsa-app .page-head, #gsa-dialog .page-head{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:22px}
#gsa-app .eyebrow, #gsa-dialog .eyebrow{font-size:var(--size-2xs);color:var(--d-gold, var(--gold));letter-spacing:.21em;text-transform:uppercase}
#gsa-app .page-head h1, #gsa-dialog .page-head h1{font-size:var(--size-2xl);line-height:1.2;margin:6px 0 8px}
#gsa-app .page-head h1 span, #gsa-dialog .page-head h1 span{font-size:var(--size-md);margin-left:12px;color:var(--d-gold, var(--gold));font-family:var(--font-serif);letter-spacing:.1em}
#gsa-app .page-head p:not(.eyebrow), #gsa-dialog .page-head p:not(.eyebrow){color:var(--muted);font-size:var(--size-sm)}
#gsa-app .actions, #gsa-dialog .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#gsa-app .btn, #gsa-dialog .btn, #gsa-app .outline, #gsa-dialog .outline, #gsa-app .soft, #gsa-dialog .soft, #gsa-app .quiet, #gsa-dialog .quiet{border:1px solid transparent;border-radius:5px;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;font-size:var(--size-sm);line-height:1.6;white-space:nowrap}
#gsa-app .btn, #gsa-dialog .btn{background:var(--d-gold, var(--gold));border-color:var(--d-gold, var(--gold));color:color-mix(in srgb, var(--accent-jade) 20%, var(--surface));font-weight:500}
#gsa-app .btn:hover, #gsa-dialog .btn:hover{background:color-mix(in srgb, var(--gold) 50%, var(--blossom))}
#gsa-app .btn svg, #gsa-dialog .btn svg{width:14px;height:14px}
#gsa-app .outline, #gsa-dialog .outline{border-color:var(--line2);color:var(--d-ink, var(--ink))}
#gsa-app .outline:hover, #gsa-dialog .outline:hover, #gsa-app .soft:hover, #gsa-dialog .soft:hover{background:var(--raised)}
#gsa-app .soft, #gsa-dialog .soft{border-color:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 20%, transparent);background:var(--soft);color:var(--d-jade, var(--jade))}
#gsa-app .quiet, #gsa-dialog .quiet{color:var(--muted);padding:5px 0;font-weight:400}
#gsa-app .quiet:hover, #gsa-dialog .quiet:hover{color:var(--d-gold, var(--gold))}
#gsa-app .small, #gsa-dialog .small{font-size:var(--size-xs);padding:5px 9px}
#gsa-app .quiet.small, #gsa-dialog .quiet.small{padding:3px 0}
#gsa-app .quiet svg, #gsa-dialog .quiet svg{width:13px;height:13px}
#gsa-app .full-btn, #gsa-dialog .full-btn{width:100%}
#gsa-app .hero, #gsa-dialog .hero{border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 25.1%, transparent);border-radius:11px;min-height:178px;position:relative;isolation:isolate;overflow:hidden;margin-bottom:22px;background:color-mix(in srgb, var(--accent-jade) 28%, var(--ink))}
#gsa-app .hero>img, #gsa-dialog .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 59%;z-index:-3}
#gsa-app .hero:before, #gsa-dialog .hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb, var(--surface) 94.9%, transparent) 0%,color-mix(in srgb, var(--surface) 87.1%, transparent) 29%,color-mix(in srgb, var(--surface) 36.9%, transparent) 65%,color-mix(in srgb, var(--surface) 6.3%, transparent));z-index:-2}
#gsa-app .hero:after, #gsa-dialog .hero:after{content:'';position:absolute;inset:8px;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 15.7%, transparent);border-radius:5px;pointer-events:none}
#gsa-app .hero-copy, #gsa-dialog .hero-copy{padding:24px 30px;max-width:560px}
#gsa-app .hero .eyebrow, #gsa-dialog .hero .eyebrow{color:var(--gold);font-size:var(--size-2xs)}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-2xl);color:var(--blossom);line-height:1.2;margin:10px 0}
#gsa-app .hero p:not(.eyebrow), #gsa-dialog .hero p:not(.eyebrow){font-size:var(--size-sm);color:var(--blossom);max-width:400px}
#gsa-app .hero-foot, #gsa-dialog .hero-foot{display:flex;gap:18px;align-items:center;margin-top:18px;color:var(--blossom);font-size:var(--size-xs);letter-spacing:.06em}
#gsa-app .hero-foot span+span, #gsa-dialog .hero-foot span+span{border-left:1px solid color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 26.7%, transparent);padding-left:18px}
#gsa-app .hero-seal, #gsa-dialog .hero-seal{position:absolute;right:29px;top:24px;font-family:var(--font-serif);color:var(--gold);writing-mode:vertical-rl;letter-spacing:.14em;font-size:var(--size-md);border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 46.7%, transparent);border-radius:3px;padding:8px 5px}
#gsa-app .scroll-card, #gsa-dialog .scroll-card{display:flex;gap:20px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:19px 22px;margin-bottom:22px}
#gsa-app .poster, #gsa-dialog .poster{width:82px;height:114px;flex-shrink:0;object-fit:cover;border-radius:5px;border:1px solid var(--line2);box-shadow:0 5px 12px color-mix(in srgb, var(--ink) 20%, transparent)}
#gsa-app .poster-empty, #gsa-dialog .poster-empty{background:radial-gradient(ellipse at 60% 10%,color-mix(in srgb, var(--accent-jade) 65%, var(--surface)) 0,transparent 58%),repeating-linear-gradient(0deg,color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 4.7%, transparent) 0px,color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 4.7%, transparent) 1px,transparent 1px,transparent 9px),color-mix(in srgb, var(--accent-jade) 36%, var(--ink));display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:var(--gold);overflow:hidden}
#gsa-app .poster-empty:after, #gsa-dialog .poster-empty:after{content:'';position:absolute;inset:6px;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 26.7%, transparent)}
#gsa-app .poster-empty .moon, #gsa-dialog .poster-empty .moon{width:30px;height:30px;border:1px solid color-mix(in srgb, var(--gold) 25%, var(--blossom));box-shadow:inset -9px -1px 0 color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 65.9%, transparent);border-radius:50%;margin-bottom:13px}
#gsa-app .poster-empty b, #gsa-dialog .poster-empty b{font-family:var(--font-serif);font-size:20px;font-weight:400;letter-spacing:.12em}
#gsa-app .poster-empty small, #gsa-dialog .poster-empty small{font-size:5px;letter-spacing:.22em;margin-top:5px}
#gsa-app .scroll-meta, #gsa-dialog .scroll-meta{flex:1;min-width:0}
#gsa-app .scroll-meta .chips, #gsa-dialog .scroll-meta .chips{margin-bottom:6px}
#gsa-app .scroll-meta h2, #gsa-dialog .scroll-meta h2{font-size:var(--size-2xl);line-height:1.2;overflow-wrap:anywhere}
#gsa-app .scroll-meta .original-title, #gsa-dialog .scroll-meta .original-title{font-family:var(--font-serif);font-size:var(--size-xs);color:var(--dim);margin-top:5px}
#gsa-app .scroll-meta .meta-line, #gsa-dialog .scroll-meta .meta-line{font-size:var(--size-xs);color:var(--muted);margin-top:9px}
#gsa-app .scroll-meta .meta-line span+span:before, #gsa-dialog .scroll-meta .meta-line span+span:before{content:'·';margin:0 8px;color:var(--dim)}
#gsa-app .scroll-meta .hint, #gsa-dialog .scroll-meta .hint{margin-top:9px;max-width:600px}
#gsa-app .scroll-card .actions, #gsa-dialog .scroll-card .actions{max-width:190px;justify-content:flex-end}
#gsa-app .chips, #gsa-dialog .chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#gsa-app .chip, #gsa-dialog .chip{border:1px solid var(--line);border-radius:4px;padding:2px 6px;font-size:var(--size-2xs);color:var(--muted);letter-spacing:.03em;white-space:nowrap}
#gsa-app .chip.gold, #gsa-dialog .chip.gold{color:var(--d-gold, var(--gold));border-color:var(--line2);background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 3.1%, transparent)}
#gsa-app .chip.jade, #gsa-dialog .chip.jade{color:var(--d-jade, var(--jade));border-color:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 20%, transparent);background:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 3.9%, transparent)}
#gsa-app .chip.rose, #gsa-dialog .chip.rose{color:var(--rose);border-color:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--mist)) 20%, transparent)}
#gsa-app .appraisal-grid, #gsa-dialog .appraisal-grid{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:23px;align-items:start}
#gsa-app .criteria-col, #gsa-dialog .criteria-col{min-width:0}
#gsa-app .section-head, #gsa-dialog .section-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:3px 0 15px}
#gsa-app .section-head h2, #gsa-dialog .section-head h2{font-size:var(--size-xl)}
#gsa-app .section-head p, #gsa-dialog .section-head p{font-size:var(--size-xs);color:var(--muted);margin-top:5px}
#gsa-app .section-head .actions, #gsa-dialog .section-head .actions{gap:12px;flex-shrink:0}
#gsa-app .rubric-note, #gsa-dialog .rubric-note{display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid var(--line);background:var(--soft);border-radius:7px;margin-bottom:14px;color:var(--muted);font-size:var(--size-xs);line-height:1.8}
#gsa-app .rubric-note svg, #gsa-dialog .rubric-note svg{color:var(--d-gold, var(--gold));width:16px;height:16px}
#gsa-app .category, #gsa-dialog .category{background:var(--panel);border:1px solid var(--line);border-radius:9px;margin-bottom:11px;overflow:hidden;scroll-margin-top:18px}
#gsa-app .category.open, #gsa-dialog .category.open{border-color:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 28.6%, transparent);box-shadow:var(--shadow)}
#gsa-app .category-head, #gsa-dialog .category-head{display:flex;gap:13px;align-items:center;padding:16px 17px}
#gsa-app .category-toggle, #gsa-dialog .category-toggle{display:flex;align-items:center;gap:13px;border:0;background:none;flex:1;color:inherit;padding:0;min-width:0;text-align:left}
#gsa-app .cat-number, #gsa-dialog .cat-number{width:29px;height:34px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:15px 15px 3px 3px;color:var(--d-gold, var(--gold));font:var(--size-md) var(--font-serif);flex-shrink:0}
#gsa-app .category-text, #gsa-dialog .category-text{flex:1;min-width:0}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-xl);line-height:1.25;overflow-wrap:anywhere}
#gsa-app .category .cat-sub, #gsa-dialog .category .cat-sub{font-size:var(--size-2xs);color:var(--dim);display:flex;gap:7px;align-items:center;margin-top:5px;letter-spacing:.02em}
#gsa-app .cat-sub svg, #gsa-dialog .cat-sub svg{width:10px;height:10px}
#gsa-app .chevron, #gsa-dialog .chevron{width:11px;height:11px;color:var(--dim);transition:transform .15s}
#gsa-app .open .chevron, #gsa-dialog .open .chevron{transform:rotate(90deg)}
#gsa-app .score-compact, #gsa-dialog .score-compact{width:76px;display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-shrink:0}
#gsa-app .score-compact b, #gsa-dialog .score-compact b{font:var(--size-xl) var(--font-serif);color:var(--d-gold, var(--gold));line-height:1}
#gsa-app .score-compact small, #gsa-dialog .score-compact small{font-size:var(--size-xs);color:var(--dim)}
#gsa-app .category-body, #gsa-dialog .category-body{padding:0 20px 20px;border-top:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 2%, transparent),transparent)}
#gsa-app .category-body[hidden], #gsa-dialog .category-body[hidden]{display:none}
#gsa-app .prompts, #gsa-dialog .prompts{margin:17px 0 18px;padding:0;list-style:none}
#gsa-app .prompts li, #gsa-dialog .prompts li{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:var(--size-sm);line-height:1.75;color:var(--muted)}
#gsa-app .prompts li:before, #gsa-dialog .prompts li:before{content:'◇';font-size:var(--size-xs);line-height:2.5;color:var(--d-gold, var(--gold));flex-shrink:0}
#gsa-app .points-caption, #gsa-dialog .points-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 9px;font-size:var(--size-xs)}
#gsa-app .points-caption b, #gsa-dialog .points-caption b{font-weight:400;color:var(--d-ink, var(--ink))}
#gsa-app .points-caption span, #gsa-dialog .points-caption span{font-size:var(--size-xs);color:var(--dim)}
#gsa-app .point-controls, #gsa-dialog .point-controls{display:flex;align-items:center;gap:15px}
#gsa-app .point-options, #gsa-dialog .point-options{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;flex:1}
#gsa-app .point-option, #gsa-dialog .point-option{background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--muted);font:var(--size-xl) var(--font-serif);padding:7px 5px;position:relative;line-height:1.5;transition:background .15s}
#gsa-app .point-option:hover, #gsa-dialog .point-option:hover{border-color:var(--d-gold, var(--gold));color:var(--d-gold, var(--gold))}
#gsa-app .point-option.active, #gsa-dialog .point-option.active{border-color:var(--d-gold, var(--gold));background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 10.2%, transparent);color:var(--d-gold, var(--gold))}
#gsa-app .exact-score, #gsa-dialog .exact-score{display:flex;align-items:center;gap:7px;background:var(--field);border:1px solid var(--line2);border-radius:6px;padding:0 10px;min-height:46px;flex-shrink:0}
#gsa-app .exact-score input, #gsa-dialog .exact-score input{width:64px;border:0;background:none;padding:7px 0;color:var(--d-gold, var(--gold));font:var(--size-xl) var(--font-serif);outline-offset:2px}
#gsa-app .exact-score span, #gsa-dialog .exact-score span{color:var(--dim);font-size:var(--size-sm)}
#gsa-app .score-labels, #gsa-dialog .score-labels{display:flex;justify-content:space-between;color:var(--dim);font-size:var(--size-2xs);margin:6px 0 0;max-width:calc(100% - 135px)}
#gsa-app .cat-note, #gsa-dialog .cat-note{display:block;margin-top:17px}
#gsa-app .cat-note>span, #gsa-dialog .cat-note>span{display:block;font-size:var(--size-xs);color:var(--dim);margin-bottom:7px;letter-spacing:.03em}
#gsa-app .cat-note textarea, #gsa-dialog .cat-note textarea{background:var(--field);border:1px solid var(--line);border-radius:5px;width:100%;color:var(--d-ink, var(--ink));padding:9px 11px;font-size:var(--size-sm);line-height:1.8;resize:vertical;min-height:49px}
#gsa-app .cat-footer, #gsa-dialog .cat-footer{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:var(--size-xs);color:var(--dim)}
#gsa-app .cat-footer .actions, #gsa-dialog .cat-footer .actions{gap:12px}
#gsa-app .cat-error, #gsa-dialog .cat-error{font-size:var(--size-sm);color:var(--rose);margin-top:8px}
#gsa-app .verdict-col, #gsa-dialog .verdict-col{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 36px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;padding-bottom:2px}
#gsa-app .panel, #gsa-dialog .panel{border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;min-width:0}
#gsa-app .panel-head, #gsa-dialog .panel-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:18px 20px 13px}
#gsa-app .panel-head h2, #gsa-dialog .panel-head h2{font-size:var(--size-xl);line-height:1.25}
#gsa-app .panel-head .eyebrow, #gsa-dialog .panel-head .eyebrow{margin-bottom:5px}
#gsa-app .panel-body, #gsa-dialog .panel-body{padding:0 20px 19px}
#gsa-app .verdict-panel, #gsa-dialog .verdict-panel{border-color:var(--line2);position:relative}
#gsa-app .verdict-panel:before, #gsa-dialog .verdict-panel:before{content:'';position:absolute;inset:6px;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 7.8%, transparent);border-radius:5px;pointer-events:none}
#gsa-app .verdict-panel .panel-head, #gsa-dialog .verdict-panel .panel-head{padding-top:23px}
#gsa-app .verdict-core, #gsa-dialog .verdict-core{text-align:center;padding:3px 0 10px}
#gsa-app .score-seal, #gsa-dialog .score-seal{width:136px;height:136px;border-radius:50%;margin:6px auto 13px;position:relative;display:flex;align-items:center;justify-content:center;gap:3px;background:radial-gradient(circle,color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 5.9%, transparent) 0,transparent 70%);border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 31.4%, transparent);box-shadow:inset 0 0 0 7px var(--panel),inset 0 0 0 8px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 16.1%, transparent),0 0 0 5px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 3.1%, transparent)}
#gsa-app .score-seal:before, #gsa-dialog .score-seal:before{content:'✦';position:absolute;left:50%;top:-8px;transform:translateX(-50%);color:var(--d-gold, var(--gold));font-size:var(--size-sm);background:var(--panel);padding:0 7px}
#gsa-app .score-seal b, #gsa-dialog .score-seal b{font:69px/1 var(--font-serif);color:var(--d-gold, var(--gold));letter-spacing:-.06em}
#gsa-app .score-seal b.pending, #gsa-dialog .score-seal b.pending{font-size:var(--size-3xl);letter-spacing:0;color:var(--dim)}
#gsa-app .score-seal small, #gsa-dialog .score-seal small{font:var(--size-xl) var(--font-serif);color:var(--muted);align-self:center;margin-top:29px}
#gsa-app .verdict-core h3, #gsa-dialog .verdict-core h3{font-size:var(--size-xl);color:var(--d-ink, var(--ink));margin-top:9px}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{color:var(--dim);font-size:var(--size-xs);line-height:1.8;margin-top:7px}
#gsa-app .precision-row, #gsa-dialog .precision-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:13px 0}
#gsa-app .precision-row span, #gsa-dialog .precision-row span{font-size:var(--size-xs);color:var(--muted)}
#gsa-app .precision-row b, #gsa-dialog .precision-row b{font:var(--size-2xl)/1 var(--font-serif);color:var(--d-jade, var(--jade))}
#gsa-app .precision-row small, #gsa-dialog .precision-row small{font-size:var(--size-sm);color:var(--dim);margin-left:2px}
#gsa-app .formula, #gsa-dialog .formula{background:var(--field);border:1px solid var(--line);padding:11px 12px;border-radius:6px;font-size:var(--size-sm);color:var(--muted);text-align:center;margin:12px 0}
#gsa-app .formula b, #gsa-dialog .formula b{color:var(--d-ink, var(--ink));font-weight:500}
#gsa-app .band-note, #gsa-dialog .band-note{font-size:var(--size-xs);color:var(--dim);text-align:center;line-height:1.85;margin:8px 0 13px}
#gsa-app .completion, #gsa-dialog .completion{display:flex;align-items:center;gap:10px;font-size:var(--size-xs);color:var(--muted);margin:15px 0}
#gsa-app .progress, #gsa-dialog .progress{height:3px;flex:1;background:var(--line);border-radius:2px;overflow:hidden}
#gsa-app .progress i, #gsa-dialog .progress i{display:block;height:100%;background:var(--d-jade, var(--jade))}
#gsa-app .saved-verdict, #gsa-dialog .saved-verdict{padding:11px 12px;border-left:2px solid var(--d-gold, var(--gold));background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 6.3%, transparent);font-size:var(--size-xs);color:var(--muted);margin:12px 0;line-height:1.85}
#gsa-app .verdict-panel .actions, #gsa-dialog .verdict-panel .actions{justify-content:center;margin-top:11px}
#gsa-app .category-bars, #gsa-dialog .category-bars{display:flex;flex-direction:column;gap:11px}
#gsa-app .category-bar, #gsa-dialog .category-bar{display:grid;grid-template-columns:17px 95px minmax(30px,1fr) 29px;gap:6px;align-items:center;background:transparent;border:0;padding:0;text-align:left;width:100%;color:var(--muted)}
#gsa-app .category-bar .bar-num, #gsa-dialog .category-bar .bar-num{font-size:var(--size-2xs);color:var(--dim)}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:var(--size-xs);line-height:1.5}
#gsa-app .category-bar .bar-track, #gsa-dialog .category-bar .bar-track{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
#gsa-app .category-bar .bar-fill, #gsa-dialog .category-bar .bar-fill{height:100%;display:block;background:var(--d-jade, var(--jade));border-radius:3px}
#gsa-app .category-bar:nth-child(3n) .bar-fill, #gsa-dialog .category-bar:nth-child(3n) .bar-fill{background:var(--d-gold, var(--gold))}
#gsa-app .category-bar b, #gsa-dialog .category-bar b{font-size:var(--size-xs);color:var(--d-ink, var(--ink));font-weight:400;text-align:right}
#gsa-app .category-bar:hover .bar-title, #gsa-dialog .category-bar:hover .bar-title{color:var(--d-gold, var(--gold))}
#gsa-app .chart-tabs, #gsa-dialog .chart-tabs{display:flex;gap:5px}
#gsa-app .chart-tab, #gsa-dialog .chart-tab{background:transparent;border:0;color:var(--dim);font-size:var(--size-xs);padding:4px 6px;border-radius:4px}
#gsa-app .chart-tab.active, #gsa-dialog .chart-tab.active{background:var(--soft);color:var(--d-gold, var(--gold))}
#gsa-app .chart-foot, #gsa-dialog .chart-foot{font-size:var(--size-xs);color:var(--dim);margin-top:15px}
#gsa-app .radar-svg, #gsa-dialog .radar-svg{width:100%;height:auto;max-height:265px}
#gsa-app .radar-svg text, #gsa-dialog .radar-svg text{font:12px var(--font-sans);fill:var(--muted)}
#gsa-app .radar-svg .grid, #gsa-dialog .radar-svg .grid{fill:none;stroke:var(--line);stroke-width:.9}
#gsa-app .radar-svg .shape, #gsa-dialog .radar-svg .shape{fill:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 16.9%, transparent);stroke:var(--d-jade, var(--jade));stroke-width:1.6}
#gsa-app .radar-svg .point, #gsa-dialog .radar-svg .point{fill:var(--d-gold, var(--gold));stroke:var(--panel);stroke-width:1.5}
#gsa-app .radar-legend, #gsa-dialog .radar-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 11px;font-size:var(--size-2xs);color:var(--dim);line-height:1.6}
#gsa-app .radar-legend b, #gsa-dialog .radar-legend b{font-weight:400;color:var(--d-gold, var(--gold));margin-right:5px}
#gsa-app .final-words, #gsa-dialog .final-words{margin-top:23px}
#gsa-app .final-words .panel-body, #gsa-dialog .final-words .panel-body{padding-top:4px}
#gsa-app .review-notes, #gsa-dialog .review-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#gsa-app .field, #gsa-dialog .field{display:flex;flex-direction:column;gap:6px;font-size:var(--size-sm);color:var(--muted)}
#gsa-app .field.full, #gsa-dialog .field.full{grid-column:1/-1}
#gsa-app .field input, #gsa-dialog .field input, #gsa-app .field select, #gsa-dialog .field select, #gsa-app .field textarea, #gsa-dialog .field textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:5px;padding:9px 11px;color:var(--d-ink, var(--ink));font-size:var(--size-xs);min-width:0}
#gsa-app .field textarea, #gsa-dialog .field textarea{resize:vertical;line-height:1.8;min-height:85px}
#gsa-app .field small, #gsa-dialog .field small{font-size:var(--size-xs);color:var(--dim);line-height:1.8}
#gsa-app .field input[type=checkbox], #gsa-dialog .field input[type=checkbox]{width:14px;accent-color:var(--d-jade, var(--jade))}
#gsa-app .spoiler-check, #gsa-dialog .spoiler-check{display:flex;align-items:center;gap:8px;font-size:var(--size-xs);color:var(--dim);margin-top:16px}
#gsa-app .spoiler-check input, #gsa-dialog .spoiler-check input{accent-color:var(--d-jade, var(--jade))}
#gsa-app .tips-list, #gsa-dialog .tips-list{font-size:var(--size-xs);color:var(--muted);padding-left:16px;line-height:1.9}
#gsa-app .tips-list li, #gsa-dialog .tips-list li{margin:8px 0}
#gsa-app .hint, #gsa-dialog .hint{font-size:var(--size-xs);line-height:1.85;color:var(--dim)}
#gsa-app .empty, #gsa-dialog .empty{padding:35px 22px;border:1px dashed var(--line2);border-radius:9px;text-align:center;grid-column:1/-1}
#gsa-app .empty>svg, #gsa-dialog .empty>svg{margin:0 auto 14px;color:var(--d-gold, var(--gold));width:28px;height:28px}
#gsa-app .empty h3, #gsa-dialog .empty h3{font-size:var(--size-xl)}
#gsa-app .empty p, #gsa-dialog .empty p{font-size:var(--size-sm);color:var(--muted);line-height:1.9;margin:10px auto 20px;max-width:500px}
#gsa-app .stats, #gsa-dialog .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:23px}
#gsa-app .stat, #gsa-dialog .stat{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:17px 20px}
#gsa-app .stat-label, #gsa-dialog .stat-label{font-size:var(--size-xs);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
#gsa-app .stat-label svg, #gsa-dialog .stat-label svg{width:15px;height:15px;color:var(--d-gold, var(--gold))}
#gsa-app .stat b, #gsa-dialog .stat b{display:block;font:var(--size-2xl)/1.2 var(--font-serif);margin:8px 0;color:var(--d-ink, var(--ink))}
#gsa-app .stat small, #gsa-dialog .stat small{color:var(--dim);font-size:var(--size-xs)}
#gsa-app .filterbar, #gsa-dialog .filterbar{display:flex;align-items:center;gap:12px;margin:15px 0 20px}
#gsa-app .search-box, #gsa-dialog .search-box{display:flex;gap:9px;align-items:center;background:var(--field);border:1px solid var(--line);border-radius:6px;padding:8px 11px;color:var(--dim);flex:1;max-width:390px}
#gsa-app .search-box svg, #gsa-dialog .search-box svg{width:14px;height:14px}
#gsa-app .search-box input, #gsa-dialog .search-box input{background:none;border:0;outline:0;color:var(--d-ink, var(--ink));font-size:var(--size-sm);width:100%;min-width:0}
#gsa-app .select, #gsa-dialog .select{background:var(--field);border:1px solid var(--line);border-radius:6px;padding:8px 11px;color:var(--muted);font-size:var(--size-sm)}
#gsa-app .review-grid, #gsa-dialog .review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
#gsa-app .review-card, #gsa-dialog .review-card{background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
#gsa-app .review-card-top, #gsa-dialog .review-card-top{display:flex;gap:16px;padding:21px 20px 17px;align-items:flex-start}
#gsa-app .review-card .poster, #gsa-dialog .review-card .poster{width:62px;height:91px;box-shadow:none}
#gsa-app .review-card h3, #gsa-dialog .review-card h3{font-size:var(--size-xl);line-height:1.25;margin:8px 0 7px;overflow-wrap:anywhere}
#gsa-app .review-card .date-line, #gsa-dialog .review-card .date-line{font-size:var(--size-xs);color:var(--dim)}
#gsa-app .review-card-body, #gsa-dialog .review-card-body{padding:0 20px 20px;flex:1;display:flex;flex-direction:column}
#gsa-app .review-score, #gsa-dialog .review-score{display:flex;align-items:flex-end;gap:8px;padding:15px 0 13px;border-top:1px solid var(--line);margin-top:4px}
#gsa-app .review-score b, #gsa-dialog .review-score b{font:var(--size-3xl)/1 var(--font-serif);color:var(--d-gold, var(--gold))}
#gsa-app .review-score small, #gsa-dialog .review-score small{font-size:var(--size-xs);color:var(--muted);margin-bottom:3px}
#gsa-app .review-score .calculated, #gsa-dialog .review-score .calculated{margin-left:auto;text-align:right}
#gsa-app .calculated span, #gsa-dialog .calculated span{display:block;font-size:var(--size-xs);color:var(--dim)}
#gsa-app .calculated strong, #gsa-dialog .calculated strong{font:var(--size-xl) var(--font-serif);color:var(--d-jade, var(--jade))}
#gsa-app .review-card-body>p, #gsa-dialog .review-card-body>p{font-size:var(--size-sm);color:var(--muted);line-height:1.8;margin:8px 0 16px;white-space:pre-wrap}
#gsa-app .review-card .actions, #gsa-dialog .review-card .actions{margin-top:auto;padding-top:5px}
#gsa-app .review-card .verdict-tier, #gsa-dialog .review-card .verdict-tier{font-size:var(--size-sm);color:var(--d-ink, var(--ink))}
#gsa-app .table-wrap, #gsa-dialog .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px}
#gsa-app .scale-table, #gsa-dialog .scale-table{width:100%;border-collapse:collapse;min-width:780px;background:var(--panel)}
#gsa-app .scale-table th, #gsa-dialog .scale-table th{font-size:var(--size-xs);color:var(--muted);letter-spacing:.1em;font-weight:400;text-align:left;padding:13px 17px;border-bottom:1px solid var(--line);background:var(--field)}
#gsa-app .scale-table td, #gsa-dialog .scale-table td{padding:12px 17px;border-bottom:1px solid var(--line);font-size:var(--size-sm);vertical-align:middle}
#gsa-app .scale-table tr:last-child td, #gsa-dialog .scale-table tr:last-child td{border-bottom:0}
#gsa-app .scale-table input, #gsa-dialog .scale-table input{background:var(--field);border:1px solid var(--line);padding:8px 10px;border-radius:4px;color:var(--d-ink, var(--ink));width:100%;font-size:var(--size-sm)}
#gsa-app .scale-table input[type=number], #gsa-dialog .scale-table input[type=number]{width:89px;color:var(--d-gold, var(--gold))}
#gsa-app .scale-table .tier-number, #gsa-dialog .scale-table .tier-number{font:var(--size-xl) var(--font-serif);color:var(--d-gold, var(--gold));white-space:nowrap}
#gsa-app .scale-table .range, #gsa-dialog .scale-table .range{font-size:var(--size-sm);white-space:nowrap;color:var(--muted)}
#gsa-app .scale-table .range small, #gsa-dialog .scale-table .range small{display:block;color:var(--dim);font-size:var(--size-2xs);margin-top:4px}
#gsa-app .scale-table tr.selected, #gsa-dialog .scale-table tr.selected{background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 4.7%, transparent)}
#gsa-app .notice, #gsa-dialog .notice{padding:14px 17px;border:1px solid var(--line2);background:var(--soft);border-radius:8px;color:var(--muted);font-size:var(--size-sm);line-height:1.85;margin:17px 0}
#gsa-app .notice strong, #gsa-dialog .notice strong{font-weight:500;color:var(--d-gold, var(--gold))}
#gsa-app .grid2, #gsa-dialog .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:23px 0}
#gsa-app .grid2 .prose, #gsa-dialog .grid2 .prose{font-size:var(--size-sm);color:var(--muted);line-height:1.9}
#gsa-app .settings-actions, #gsa-dialog .settings-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
#gsa-app .archive-row, #gsa-dialog .archive-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--size-sm)}
#gsa-app .archive-row:last-child, #gsa-dialog .archive-row:last-child{border:0}
#gsa-app .footer, #gsa-dialog .footer{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:var(--size-xs);color:var(--dim);margin-top:30px;padding-top:17px;border-top:1px solid var(--line)}
#gsa-app .footer em, #gsa-dialog .footer em{font:italic var(--size-sm) var(--font-serif)}
#gsa-app .error, #gsa-dialog .error{font-size:var(--size-sm);color:var(--rose);margin:12px 0}
#gsa-app .loading, #gsa-dialog .loading{padding:90px 30px;text-align:center}
#gsa-app .loading h1, #gsa-dialog .loading h1{font-size:var(--size-3xl)}
#gsa-app .loading p, #gsa-dialog .loading p{margin:15px auto;max-width:600px;color:var(--muted);font-size:var(--size-xs)}
#gsa-app .menu-button, #gsa-dialog .menu-button{display:none}
#gsa-app .shade, #gsa-dialog .shade{display:none}
#gsa-dialog{background:var(--bg);color:var(--d-ink, var(--ink));border:1px solid var(--line2);border-radius:12px;padding:0;width:min(750px,calc(100vw - 30px));max-height:90vh;box-shadow:0 25px 100px color-mix(in srgb, var(--ink) 53.3%, transparent)}
#gsa-dialog::backdrop{background:color-mix(in srgb, var(--surface) 80.8%, transparent);backdrop-filter:blur(6px)}
#gsa-app .dialog-head, #gsa-dialog .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 25px;background:var(--panel);border-bottom:1px solid var(--line)}
#gsa-app .dialog-head h2, #gsa-dialog .dialog-head h2{font-size:var(--size-xl)}
#gsa-app .dialog-head .eyebrow, #gsa-dialog .dialog-head .eyebrow{margin-bottom:5px}
#gsa-app .dialog-body, #gsa-dialog .dialog-body{padding:24px 25px}
#gsa-app .close, #gsa-dialog .close{background:var(--soft);border:1px solid var(--line);border-radius:50%;width:29px;height:29px;color:var(--muted);font-size:var(--size-xl)}
#gsa-app .form-grid, #gsa-dialog .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 19px}
#gsa-app .form-actions, #gsa-dialog .form-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}
#gsa-app .form-actions .quiet:first-child, #gsa-dialog .form-actions .quiet:first-child{margin-right:auto}
#gsa-app .upload-preview, #gsa-dialog .upload-preview{display:flex;align-items:center;gap:16px}
#gsa-app .upload-preview img, #gsa-dialog .upload-preview img{height:120px;max-width:200px;object-fit:contain;border-radius:5px}
#gsa-app .toast, #gsa-dialog .toast{visibility:hidden;opacity:0;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 23px;max-width:90vw;z-index:100;background:color-mix(in srgb, var(--accent-jade) 45%, var(--surface));border:1px solid color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 40%, transparent);color:var(--blossom);box-shadow:0 6px 30px color-mix(in srgb, var(--ink) 33.3%, transparent);border-radius:8px;font-size:var(--size-sm);transition:opacity .2s}
#gsa-app .toast.show, #gsa-dialog .toast.show{visibility:visible;opacity:1}
#gsa-app .detail-prose, #gsa-dialog .detail-prose{font-size:var(--size-xs);line-height:1.9;color:var(--muted);white-space:pre-wrap}
#gsa-app .copy-area, #gsa-dialog .copy-area{width:100%;min-height:300px;resize:vertical;background:var(--field);color:var(--d-ink, var(--ink));border:1px solid var(--line);padding:16px;border-radius:7px;font:var(--size-sm)/1.8 var(--font-mono)}
#gsa-app .history-item, #gsa-dialog .history-item{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:13px;align-items:center}
#gsa-app .history-item .mini-seal, #gsa-dialog .history-item .mini-seal{font:var(--size-xl) var(--font-serif);color:var(--d-gold, var(--gold));width:66px;flex-shrink:0}
#gsa-app .history-item .history-text, #gsa-dialog .history-item .history-text{flex:1;font-size:var(--size-sm)}
#gsa-app .history-item small, #gsa-dialog .history-item small{display:block;color:var(--dim);font-size:var(--size-xs);margin-top:4px}
#gsa-app .mini-breakdown, #gsa-dialog .mini-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;margin-top:20px}
#gsa-app .mini-breakdown>div, #gsa-dialog .mini-breakdown>div{display:flex;justify-content:space-between;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--size-sm);color:var(--muted)}
#gsa-app .mini-breakdown b, #gsa-dialog .mini-breakdown b{color:var(--d-gold, var(--gold));font-weight:500}
#gsa-app .detail-score, #gsa-dialog .detail-score{display:flex;gap:20px;align-items:center;margin:10px 0 20px}
#gsa-app .detail-score .score-seal, #gsa-dialog .detail-score .score-seal{width:110px;height:110px;margin:0}
#gsa-app .detail-score .score-seal b, #gsa-dialog .detail-score .score-seal b{font-size:53px}
#gsa-app .detail-score h3, #gsa-dialog .detail-score h3{font-size:var(--size-xl)}
#gsa-app .text-label, #gsa-dialog .text-label{font-size:var(--size-xs);letter-spacing:.1em;color:var(--d-gold, var(--gold));margin:17px 0 7px}
#gsa-app .scoreguide, #gsa-dialog .scoreguide{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:15px 0}
#gsa-app .scoreguide div, #gsa-dialog .scoreguide div{background:var(--field);border:1px solid var(--line);border-radius:7px;padding:13px 7px;text-align:center}
#gsa-app .scoreguide b, #gsa-dialog .scoreguide b{font:var(--size-2xl) var(--font-serif);color:var(--d-gold, var(--gold));display:block}
#gsa-app .scoreguide small, #gsa-dialog .scoreguide small{font-size:var(--size-xs);color:var(--muted);display:block;margin-top:6px}
#gsa-app .copy-controls, #gsa-dialog .copy-controls{margin-bottom:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--size-sm);color:var(--muted)}
#gsa-app .copy-controls input, #gsa-dialog .copy-controls input{accent-color:var(--d-jade, var(--jade))}
#gsa-app .print-only, #gsa-dialog .print-only{display:none}
#gsa-app .hidden, #gsa-dialog .hidden{display:none!important}
#gsa-app .scaled-preview, #gsa-dialog .scaled-preview{font:var(--size-xl) var(--font-serif);color:var(--d-gold, var(--gold))}
#gsa-app .light .sidebar, #gsa-dialog .light .sidebar{--d-ink:var(--blossom);--muted:var(--blossom);--dim:var(--mist);--d-gold:var(--gold);--line:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 16.1%, transparent);--line2:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 33.3%, transparent);--soft:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 4.3%, transparent)}
#gsa-app .light .topbar, #gsa-dialog .light .topbar{background:var(--blossom)}
#gsa-app .light .hero .eyebrow, #gsa-dialog .light .hero .eyebrow{color:var(--gold)}
#gsa-app .light .hero h2, #gsa-dialog .light .hero h2{color:var(--blossom)}
#gsa-app .light .hero-seal, #gsa-dialog .light .hero-seal{color:var(--gold)}
#gsa-app .light .poster-empty, #gsa-dialog .light .poster-empty{color:var(--gold)}
#gsa-app .light .score-seal, #gsa-dialog .light .score-seal{background:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 3.5%, transparent)}
#gsa-app .light .btn, #gsa-dialog .light .btn{background:color-mix(in srgb, var(--gold) 75%, var(--blossom));color:var(--jade)}
#gsa-app .light .poster-empty small, #gsa-dialog .light .poster-empty small{color:var(--gold)}
#gsa-app .light .poster-empty .moon, #gsa-dialog .light .poster-empty .moon{border-color:color-mix(in srgb, var(--gold) 25%, var(--blossom))}
#gsa-app .light .hero-foot, #gsa-dialog .light .hero-foot{color:var(--blossom)}
#gsa-app .light .radar-svg .shape, #gsa-dialog .light .radar-svg .shape{fill:color-mix(in srgb, var(--accent-jade) 12.5%, transparent)}
@media(min-width:1650px){#gsa-app .main, #gsa-dialog .main{padding:32px 40px}
#gsa-app .topbar, #gsa-dialog .topbar{padding-inline:40px}
#gsa-app .appraisal-grid, #gsa-dialog .appraisal-grid{grid-template-columns:minmax(0,1fr) 352px;gap:28px}
#gsa-app .hero, #gsa-dialog .hero{min-height:207px}
#gsa-app .hero-copy, #gsa-dialog .hero-copy{padding:29px 35px}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-3xl)}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-xl)}
#gsa-app .category-head, #gsa-dialog .category-head{padding:18px 21px}
#gsa-app .category-body, #gsa-dialog .category-body{padding-inline:25px}
#gsa-app .prompts li, #gsa-dialog .prompts li{font-size:var(--size-xs)}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:18px 104px minmax(30px,1fr) 30px}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:var(--size-xs)}
#gsa-app .page-head h1, #gsa-dialog .page-head h1{font-size:var(--size-3xl)}
#gsa-app .score-seal, #gsa-dialog .score-seal{width:149px;height:149px}
#gsa-app .score-seal b, #gsa-dialog .score-seal b{font-size:77px}
#gsa-app .verdict-col, #gsa-dialog .verdict-col{gap:18px}}
@media(max-width:1270px){#gsa-app .shell, #gsa-dialog .shell{grid-template-columns:205px minmax(0,1fr)}
#gsa-app .sidebar, #gsa-dialog .sidebar{width:205px;padding-inline:11px}
#gsa-app .brand strong, #gsa-dialog .brand strong{font-size:var(--size-lg)}
#gsa-app .main, #gsa-dialog .main, #gsa-app .topbar, #gsa-dialog .topbar{padding-inline:24px}
#gsa-app .appraisal-grid, #gsa-dialog .appraisal-grid{grid-template-columns:minmax(0,1fr) 278px;gap:18px}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-lg)}
#gsa-app .category-head, #gsa-dialog .category-head{padding:15px}
#gsa-app .category-toggle, #gsa-dialog .category-toggle{gap:10px}
#gsa-app .score-compact, #gsa-dialog .score-compact{width:65px}
#gsa-app .score-compact b, #gsa-dialog .score-compact b{font-size:var(--size-xl)}
#gsa-app .category-body, #gsa-dialog .category-body{padding-inline:17px}
#gsa-app .prompts li, #gsa-dialog .prompts li{font-size:var(--size-sm)}
#gsa-app .point-controls, #gsa-dialog .point-controls{gap:10px}
#gsa-app .point-options, #gsa-dialog .point-options{gap:5px}
#gsa-app .point-option, #gsa-dialog .point-option{font-size:var(--size-lg);padding:6px 3px}
#gsa-app .exact-score, #gsa-dialog .exact-score{padding:0 7px;min-height:42px}
#gsa-app .exact-score input, #gsa-dialog .exact-score input{width:53px;font-size:var(--size-xl)}
#gsa-app .score-labels, #gsa-dialog .score-labels{max-width:calc(100% - 110px)}
#gsa-app .section-head, #gsa-dialog .section-head{align-items:flex-start}
#gsa-app .section-head h2, #gsa-dialog .section-head h2{font-size:var(--size-xl)}
#gsa-app .section-head .actions, #gsa-dialog .section-head .actions{max-width:150px;gap:4px 11px;justify-content:flex-end}
#gsa-app .panel-head, #gsa-dialog .panel-head, #gsa-app .panel-body, #gsa-dialog .panel-body{padding-inline:17px}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:14px 84px minmax(30px,1fr) 29px;gap:5px}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:var(--size-2xs)}
#gsa-app .scroll-card, #gsa-dialog .scroll-card{padding:17px 20px}
#gsa-app .scroll-meta h2, #gsa-dialog .scroll-meta h2{font-size:var(--size-xl)}
#gsa-app .scroll-card .actions, #gsa-dialog .scroll-card .actions{max-width:135px}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-2xl)}
#gsa-app .review-grid, #gsa-dialog .review-grid{grid-template-columns:1fr 1fr}
#gsa-app .review-card-top, #gsa-dialog .review-card-top{gap:15px}
#gsa-app .score-seal, #gsa-dialog .score-seal{width:125px;height:125px}
#gsa-app .score-seal b, #gsa-dialog .score-seal b{font-size:64px}
#gsa-app .verdict-core h3, #gsa-dialog .verdict-core h3{font-size:var(--size-xl)}}
@media(max-width:1050px){#gsa-app .appraisal-grid, #gsa-dialog .appraisal-grid{grid-template-columns:1fr}
#gsa-app .verdict-col, #gsa-dialog .verdict-col{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr;align-items:start}
#gsa-app .verdict-panel, #gsa-dialog .verdict-panel{grid-row:span 2}
#gsa-app .verdict-col .help-panel, #gsa-dialog .verdict-col .help-panel{grid-column:2}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-xl)}
#gsa-app .category-head, #gsa-dialog .category-head{padding:16px 20px}
#gsa-app .category-body, #gsa-dialog .category-body{padding-inline:23px}
#gsa-app .prompts li, #gsa-dialog .prompts li{font-size:var(--size-sm)}
#gsa-app .point-controls, #gsa-dialog .point-controls{gap:17px}
#gsa-app .exact-score input, #gsa-dialog .exact-score input{width:66px}
#gsa-app .point-options, #gsa-dialog .point-options{gap:9px}
#gsa-app .category-bars, #gsa-dialog .category-bars{gap:12px}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:18px 95px minmax(25px,1fr) 30px}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:var(--size-xs)}
#gsa-app .hero-copy, #gsa-dialog .hero-copy{max-width:455px}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-2xl)}
#gsa-app .hero p:not(.eyebrow), #gsa-dialog .hero p:not(.eyebrow){font-size:var(--size-sm)}
#gsa-app .hero-copy, #gsa-dialog .hero-copy{padding:24px 27px}
#gsa-app .scroll-card .actions, #gsa-dialog .scroll-card .actions{max-width:150px}
#gsa-app .section-head .actions, #gsa-dialog .section-head .actions{max-width:none}
#gsa-app .score-seal, #gsa-dialog .score-seal{width:143px;height:143px}
#gsa-app .score-seal b, #gsa-dialog .score-seal b{font-size:72px}
#gsa-app .scale-table, #gsa-dialog .scale-table{min-width:760px}
#gsa-app .stats, #gsa-dialog .stats{gap:11px}
#gsa-app .stat, #gsa-dialog .stat{padding:15px}
#gsa-app .stat-label, #gsa-dialog .stat-label{font-size:var(--size-2xs)}
#gsa-app .stat b, #gsa-dialog .stat b{font-size:var(--size-2xl)}}
@media(max-width:800px){#gsa-app .shell, #gsa-dialog .shell{grid-template-columns:182px minmax(0,1fr)}
#gsa-app .sidebar, #gsa-dialog .sidebar{width:182px;padding-inline:9px}
#gsa-app .brand, #gsa-dialog .brand{gap:9px;padding-inline:5px}
#gsa-app .brand-mark, #gsa-dialog .brand-mark{width:32px;height:43px;font-size:var(--size-xl)}
#gsa-app .brand strong, #gsa-dialog .brand strong{font-size:var(--size-md)}
#gsa-app .brand small, #gsa-dialog .brand small{font-size:var(--size-2xs)}
#gsa-app .nav, #gsa-dialog .nav{font-size:var(--size-xs);padding:9px;gap:9px}
#gsa-app .criterion-nav, #gsa-dialog .criterion-nav{font-size:var(--size-xs);padding:8px;gap:6px}
#gsa-app .criterion-nav .num, #gsa-dialog .criterion-nav .num{width:18px;font-size:var(--size-sm)}
#gsa-app .main, #gsa-dialog .main, #gsa-app .topbar, #gsa-dialog .topbar{padding-inline:18px}
#gsa-app .topbar, #gsa-dialog .topbar{gap:10px}
#gsa-app .saved-state, #gsa-dialog .saved-state{font-size:var(--size-2xs)}
#gsa-app .crumb, #gsa-dialog .crumb{font-size:var(--size-xs)}
#gsa-app .page-head, #gsa-dialog .page-head{align-items:flex-start;gap:15px}
#gsa-app .page-head h1, #gsa-dialog .page-head h1{font-size:var(--size-2xl)}
#gsa-app .page-head .actions, #gsa-dialog .page-head .actions{max-width:140px;justify-content:flex-end}
#gsa-app .hero-copy, #gsa-dialog .hero-copy{max-width:390px;padding:23px}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-2xl)}
#gsa-app .hero p:not(.eyebrow), #gsa-dialog .hero p:not(.eyebrow){max-width:280px}
#gsa-app .hero-seal, #gsa-dialog .hero-seal{right:20px;top:20px;font-size:var(--size-sm)}
#gsa-app .scroll-card, #gsa-dialog .scroll-card{gap:16px;padding:17px}
#gsa-app .scroll-card .poster, #gsa-dialog .scroll-card .poster{width:68px;height:99px}
#gsa-app .scroll-meta h2, #gsa-dialog .scroll-meta h2{font-size:var(--size-xl)}
#gsa-app .scroll-card, #gsa-dialog .scroll-card{flex-wrap:wrap}
#gsa-app .scroll-card .actions, #gsa-dialog .scroll-card .actions{max-width:none;justify-content:flex-start;margin-left:84px;margin-top:-5px}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-xl)}
#gsa-app .category-head, #gsa-dialog .category-head{padding:15px 17px}
#gsa-app .category-body, #gsa-dialog .category-body{padding-inline:18px}
#gsa-app .category-text, #gsa-dialog .category-text{max-width:none}
#gsa-app .review-notes, #gsa-dialog .review-notes{grid-template-columns:1fr}
#gsa-app .field.full, #gsa-dialog .field.full{grid-column:auto}
#gsa-app .verdict-col, #gsa-dialog .verdict-col{gap:13px}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:13px 76px minmax(20px,1fr) 28px;gap:4px}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:var(--size-2xs)}
#gsa-app .scoreguide, #gsa-dialog .scoreguide{grid-template-columns:repeat(3,1fr)}
#gsa-app .filterbar, #gsa-dialog .filterbar{flex-wrap:wrap}
#gsa-app .search-box, #gsa-dialog .search-box{max-width:none;min-width:150px}
#gsa-app .review-card h3, #gsa-dialog .review-card h3{font-size:var(--size-xl)}
#gsa-app .review-card-top, #gsa-dialog .review-card-top{padding:18px 16px;gap:11px}
#gsa-app .review-card-body, #gsa-dialog .review-card-body{padding-inline:16px}
#gsa-app .review-card .poster, #gsa-dialog .review-card .poster{width:49px;height:77px}
#gsa-app .review-score b, #gsa-dialog .review-score b{font-size:var(--size-2xl)}
#gsa-app .review-card .date-line, #gsa-dialog .review-card .date-line{font-size:var(--size-2xs)}
#gsa-app .grid2, #gsa-dialog .grid2{grid-template-columns:1fr}
#gsa-app .panel-head h2, #gsa-dialog .panel-head h2{font-size:var(--size-xl)}
#gsa-app .stats, #gsa-dialog .stats{grid-template-columns:1fr 1fr}
#gsa-app .stat-label, #gsa-dialog .stat-label{font-size:var(--size-xs)}
#gsa-app .section-head .actions, #gsa-dialog .section-head .actions{max-width:155px;justify-content:flex-end}
#gsa-app .mini-breakdown, #gsa-dialog .mini-breakdown{grid-template-columns:1fr}}
@media(max-width:650px){#gsa-app .shell, #gsa-dialog .shell{display:block}
#gsa-app .sidebar, #gsa-dialog .sidebar{width:224px;padding:25px 14px 18px;transform:translateX(-100%);transition:transform .2s}
#gsa-app .menu-open .sidebar, #gsa-dialog .menu-open .sidebar{transform:translateX(0)}
#gsa-app .menu-open .shade, #gsa-dialog .menu-open .shade{display:block;position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 60%, transparent);backdrop-filter:blur(3px);z-index:25}
#gsa-app .sidebar .brand, #gsa-dialog .sidebar .brand{gap:12px;padding-inline:10px}
#gsa-app .brand-mark, #gsa-dialog .brand-mark{width:39px;height:49px;font-size:var(--size-xl)}
#gsa-app .brand strong, #gsa-dialog .brand strong{font-size:var(--size-lg)}
#gsa-app .brand small, #gsa-dialog .brand small{font-size:var(--size-2xs)}
#gsa-app .nav, #gsa-dialog .nav{font-size:var(--size-sm);padding:10px}
#gsa-app .criterion-nav, #gsa-dialog .criterion-nav{font-size:var(--size-xs);padding:8px 11px;gap:10px}
#gsa-app .criterion-nav .num, #gsa-dialog .criterion-nav .num{font-size:var(--size-xs);width:20px}
#gsa-app .menu-button, #gsa-dialog .menu-button{display:inline-grid;min-width:28px;width:28px;border:0}
#gsa-app .topbar, #gsa-dialog .topbar{padding:0 15px;height:56px;gap:12px}
#gsa-app .topbar .saved-state, #gsa-dialog .topbar .saved-state{display:none}
#gsa-app .topbar .crumb, #gsa-dialog .topbar .crumb{font-size:var(--size-xs)}
#gsa-app .main, #gsa-dialog .main{padding:22px 15px}
#gsa-app .page-head, #gsa-dialog .page-head{display:block;margin-bottom:20px}
#gsa-app .page-head .actions, #gsa-dialog .page-head .actions{max-width:none;justify-content:flex-start;margin-top:15px}
#gsa-app .page-head h1, #gsa-dialog .page-head h1{font-size:var(--size-2xl)}
#gsa-app .page-head h1 span, #gsa-dialog .page-head h1 span{font-size:var(--size-sm);margin-left:8px}
#gsa-app .page-head p:not(.eyebrow), #gsa-dialog .page-head p:not(.eyebrow){font-size:var(--size-sm);max-width:370px}
#gsa-app .hero, #gsa-dialog .hero{min-height:193px}
#gsa-app .hero-copy, #gsa-dialog .hero-copy{padding:24px;max-width:350px}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-2xl);max-width:290px}
#gsa-app .hero p:not(.eyebrow), #gsa-dialog .hero p:not(.eyebrow){max-width:260px;font-size:var(--size-sm)}
#gsa-app .hero:before, #gsa-dialog .hero:before{background:linear-gradient(90deg,color-mix(in srgb, var(--surface) 94.9%, transparent),color-mix(in srgb, var(--surface) 77.3%, transparent) 53%,color-mix(in srgb, var(--surface) 18.8%, transparent))}
#gsa-app .hero-seal, #gsa-dialog .hero-seal{right:15px;top:19px;font-size:var(--size-xs)}
#gsa-app .hero-foot, #gsa-dialog .hero-foot{gap:12px;font-size:var(--size-2xs);margin-top:17px}
#gsa-app .hero-foot span+span, #gsa-dialog .hero-foot span+span{padding-left:12px}
#gsa-app .scroll-card, #gsa-dialog .scroll-card{padding:16px;gap:14px;margin-bottom:23px}
#gsa-app .scroll-card .poster, #gsa-dialog .scroll-card .poster{width:66px;height:97px}
#gsa-app .scroll-meta h2, #gsa-dialog .scroll-meta h2{font-size:var(--size-xl)}
#gsa-app .scroll-meta .meta-line, #gsa-dialog .scroll-meta .meta-line{font-size:var(--size-xs)}
#gsa-app .scroll-meta .meta-line span+span:before, #gsa-dialog .scroll-meta .meta-line span+span:before{margin:0 5px}
#gsa-app .scroll-meta .hint, #gsa-dialog .scroll-meta .hint{font-size:var(--size-xs)}
#gsa-app .scroll-card .actions, #gsa-dialog .scroll-card .actions{margin-left:80px;margin-top:0;gap:9px}
#gsa-app .scroll-card .actions .small, #gsa-dialog .scroll-card .actions .small{font-size:var(--size-xs)}
#gsa-app .section-head h2, #gsa-dialog .section-head h2{font-size:var(--size-xl)}
#gsa-app .section-head .actions, #gsa-dialog .section-head .actions{max-width:125px;gap:5px}
#gsa-app .section-head p, #gsa-dialog .section-head p{font-size:var(--size-xs)}
#gsa-app .rubric-note, #gsa-dialog .rubric-note{font-size:var(--size-xs);padding:10px 12px;gap:9px}
#gsa-app .category-head, #gsa-dialog .category-head{padding:14px 13px;gap:9px}
#gsa-app .category-toggle, #gsa-dialog .category-toggle{gap:10px}
#gsa-app .cat-number, #gsa-dialog .cat-number{width:25px;height:31px;font-size:var(--size-sm)}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-lg)}
#gsa-app .category .cat-sub, #gsa-dialog .category .cat-sub{font-size:var(--size-2xs);margin-top:5px;gap:5px}
#gsa-app .score-compact, #gsa-dialog .score-compact{width:57px;gap:3px}
#gsa-app .score-compact b, #gsa-dialog .score-compact b{font-size:var(--size-xl)}
#gsa-app .score-compact small, #gsa-dialog .score-compact small{font-size:var(--size-xs)}
#gsa-app .category-body, #gsa-dialog .category-body{padding:0 16px 18px}
#gsa-app .prompts, #gsa-dialog .prompts{margin:14px 0}
#gsa-app .prompts li, #gsa-dialog .prompts li{font-size:var(--size-sm);padding:5px 0;line-height:1.8;gap:9px}
#gsa-app .points-caption, #gsa-dialog .points-caption{font-size:var(--size-xs);display:block}
#gsa-app .points-caption span, #gsa-dialog .points-caption span{display:block;font-size:var(--size-2xs);margin-top:5px}
#gsa-app .point-controls, #gsa-dialog .point-controls{gap:9px}
#gsa-app .point-options, #gsa-dialog .point-options{gap:5px}
#gsa-app .point-option, #gsa-dialog .point-option{font-size:var(--size-lg);padding:5px 3px;min-height:39px}
#gsa-app .exact-score, #gsa-dialog .exact-score{padding:0 7px;min-height:41px;gap:4px}
#gsa-app .exact-score input, #gsa-dialog .exact-score input{width:49px;font-size:var(--size-lg)}
#gsa-app .exact-score span, #gsa-dialog .exact-score span{font-size:var(--size-xs)}
#gsa-app .score-labels, #gsa-dialog .score-labels{font-size:var(--size-2xs);max-width:calc(100% - 93px)}
#gsa-app .cat-note textarea, #gsa-dialog .cat-note textarea{font-size:var(--size-sm);min-height:57px}
#gsa-app .cat-footer .quiet, #gsa-dialog .cat-footer .quiet{font-size:var(--size-xs)}
#gsa-app .verdict-col, #gsa-dialog .verdict-col{grid-template-columns:1fr;margin-top:1px}
#gsa-app .verdict-panel, #gsa-dialog .verdict-panel{grid-row:auto}
#gsa-app .verdict-col .help-panel, #gsa-dialog .verdict-col .help-panel{grid-column:auto}
#gsa-app .verdict-panel .panel-body, #gsa-dialog .verdict-panel .panel-body{padding-inline:26px}
#gsa-app .verdict-panel .panel-head, #gsa-dialog .verdict-panel .panel-head{padding:23px 25px 12px}
#gsa-app .score-seal, #gsa-dialog .score-seal{width:152px;height:152px;margin-top:7px}
#gsa-app .score-seal b, #gsa-dialog .score-seal b{font-size:79px}
#gsa-app .verdict-core h3, #gsa-dialog .verdict-core h3{font-size:var(--size-xl)}
#gsa-app .precision-row b, #gsa-dialog .precision-row b{font-size:var(--size-2xl)}
#gsa-app .precision-row span, #gsa-dialog .precision-row span{font-size:var(--size-sm)}
#gsa-app .formula, #gsa-dialog .formula{font-size:var(--size-xs);padding:13px}
#gsa-app .band-note, #gsa-dialog .band-note{font-size:var(--size-xs)}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:var(--size-sm)}
#gsa-app .completion, #gsa-dialog .completion{font-size:var(--size-xs)}
#gsa-app .verdict-panel .btn, #gsa-dialog .verdict-panel .btn{font-size:var(--size-sm)}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:20px 115px minmax(35px,1fr) 32px;gap:7px}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:var(--size-sm)}
#gsa-app .category-bar .bar-num, #gsa-dialog .category-bar .bar-num{font-size:var(--size-xs)}
#gsa-app .category-bar b, #gsa-dialog .category-bar b{font-size:var(--size-sm)}
#gsa-app .category-bars, #gsa-dialog .category-bars{gap:13px}
#gsa-app .chart-foot, #gsa-dialog .chart-foot{font-size:var(--size-xs)}
#gsa-app .radar-svg, #gsa-dialog .radar-svg{max-height:290px}
#gsa-app .radar-legend, #gsa-dialog .radar-legend{font-size:var(--size-xs)}
#gsa-app .panel-head, #gsa-dialog .panel-head{padding:20px 21px 13px}
#gsa-app .panel-body, #gsa-dialog .panel-body{padding-inline:21px}
#gsa-app .panel-head h2, #gsa-dialog .panel-head h2{font-size:var(--size-xl)}
#gsa-app .final-words .panel-head h2, #gsa-dialog .final-words .panel-head h2{font-size:var(--size-xl)}
#gsa-app .tips-list, #gsa-dialog .tips-list{font-size:var(--size-sm)}
#gsa-app .review-grid, #gsa-dialog .review-grid{grid-template-columns:1fr}
#gsa-app .review-card-top, #gsa-dialog .review-card-top{padding:21px;gap:18px}
#gsa-app .review-card-body, #gsa-dialog .review-card-body{padding:0 21px 21px}
#gsa-app .review-card .poster, #gsa-dialog .review-card .poster{width:67px;height:96px}
#gsa-app .review-card h3, #gsa-dialog .review-card h3{font-size:var(--size-xl)}
#gsa-app .review-card .date-line, #gsa-dialog .review-card .date-line{font-size:var(--size-xs)}
#gsa-app .review-score b, #gsa-dialog .review-score b{font-size:var(--size-3xl)}
#gsa-app .review-card-body>p, #gsa-dialog .review-card-body>p{font-size:var(--size-sm)}
#gsa-app .review-card .verdict-tier, #gsa-dialog .review-card .verdict-tier{font-size:var(--size-xs)}
#gsa-app .calculated strong, #gsa-dialog .calculated strong{font-size:var(--size-2xl)}
#gsa-app .stat, #gsa-dialog .stat{padding:17px}
#gsa-app .stat b, #gsa-dialog .stat b{font-size:var(--size-2xl)}
#gsa-app .stats, #gsa-dialog .stats{gap:11px}
#gsa-app .filterbar, #gsa-dialog .filterbar{gap:9px}
#gsa-app .search-box, #gsa-dialog .search-box{flex-basis:100%}
#gsa-app .select, #gsa-dialog .select{font-size:var(--size-sm);flex:1}
#gsa-app .scale-table th, #gsa-dialog .scale-table th, #gsa-app .scale-table td, #gsa-dialog .scale-table td{padding-inline:14px}
#gsa-app .notice, #gsa-dialog .notice{font-size:var(--size-sm);padding:13px 15px}
#gsa-app .footer, #gsa-dialog .footer{align-items:flex-start;font-size:var(--size-2xs);gap:20px}
#gsa-app .footer em, #gsa-dialog .footer em{font-size:var(--size-sm);text-align:right;max-width:145px}
#gsa-app .form-grid, #gsa-dialog .form-grid{grid-template-columns:1fr}
#gsa-app .dialog-head, #gsa-dialog .dialog-head{padding:20px}
#gsa-app .dialog-body, #gsa-dialog .dialog-body{padding:21px 20px}
#gsa-app .dialog-head h2, #gsa-dialog .dialog-head h2{font-size:var(--size-xl)}
#gsa-app .field, #gsa-dialog .field{font-size:var(--size-sm)}
#gsa-app .form-actions, #gsa-dialog .form-actions{gap:9px}
#gsa-app .detail-score, #gsa-dialog .detail-score{gap:16px}
#gsa-app .detail-score h3, #gsa-dialog .detail-score h3{font-size:var(--size-xl)}
#gsa-app .mini-breakdown, #gsa-dialog .mini-breakdown{gap:5px}
#gsa-app .scoreguide, #gsa-dialog .scoreguide{gap:8px}
#gsa-app .scoreguide div, #gsa-dialog .scoreguide div{padding:12px}
#gsa-app .scoreguide small, #gsa-dialog .scoreguide small{font-size:var(--size-xs)}
#gsa-app .chart-tabs, #gsa-dialog .chart-tabs{gap:3px}
#gsa-app .history-item .mini-seal, #gsa-dialog .history-item .mini-seal{width:55px;font-size:var(--size-xl)}
#gsa-app .history-item .actions, #gsa-dialog .history-item .actions{max-width:120px;justify-content:flex-end}}
@media(max-width:370px){#gsa-app .page-head h1, #gsa-dialog .page-head h1{font-size:var(--size-2xl)}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:var(--size-lg)}
#gsa-app .score-compact, #gsa-dialog .score-compact{width:51px}
#gsa-app .category-toggle, #gsa-dialog .category-toggle{gap:8px}
#gsa-app .cat-number, #gsa-dialog .cat-number{width:23px}
#gsa-app .category .cat-sub, #gsa-dialog .category .cat-sub{display:none}
#gsa-app .point-controls, #gsa-dialog .point-controls{flex-wrap:wrap}
#gsa-app .point-options, #gsa-dialog .point-options{min-width:100%}
#gsa-app .exact-score, #gsa-dialog .exact-score{margin-top:4px}
#gsa-app .score-labels, #gsa-dialog .score-labels{max-width:100%}
#gsa-app .hero h2, #gsa-dialog .hero h2{font-size:var(--size-2xl)}
#gsa-app .hero-foot, #gsa-dialog .hero-foot{font-size:var(--size-2xs)}
#gsa-app .scroll-meta h2, #gsa-dialog .scroll-meta h2{font-size:var(--size-xl)}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:18px 102px minmax(25px,1fr) 30px}}
@media print{#gsa-app{background:#fff;color:#273a2b;--bg:#fff;--panel:#fff;--field:#fff;--d-ink:#273a2b;--muted:#52644c;--dim:#69795e;--d-gold:#836733;--d-jade:#507659;--line:#d7dbcf;--line2:#b4a985}
#gsa-app .sidebar, #gsa-dialog .sidebar, #gsa-app .topbar, #gsa-dialog .topbar, #gsa-app .footer, #gsa-dialog .footer, #gsa-app .toast, #gsa-dialog .toast, #gsa-app .shade, #gsa-dialog .shade, #gsa-app .page-head>.actions, #gsa-dialog .page-head>.actions, #gsa-app .hero, #gsa-dialog .hero, #gsa-app .actions, #gsa-dialog .actions, #gsa-app .btn, #gsa-dialog .btn, #gsa-app .outline, #gsa-dialog .outline, #gsa-app .soft, #gsa-dialog .soft, #gsa-app .quiet, #gsa-dialog .quiet, #gsa-app .point-controls, #gsa-dialog .point-controls, #gsa-app .points-caption, #gsa-dialog .points-caption, #gsa-app .score-labels, #gsa-dialog .score-labels, #gsa-app .cat-footer, #gsa-dialog .cat-footer, #gsa-app .cat-note, #gsa-dialog .cat-note, #gsa-app .category-body, #gsa-dialog .category-body, #gsa-app .section-head, #gsa-dialog .section-head, #gsa-app .rubric-note, #gsa-dialog .rubric-note{display:none!important}
#gsa-app .shell, #gsa-dialog .shell{display:block}
#gsa-app .workspace, #gsa-dialog .workspace{margin:0}
#gsa-app .main, #gsa-dialog .main{padding:0;max-width:none}
#gsa-app .appraisal-grid, #gsa-dialog .appraisal-grid{grid-template-columns:1fr 260px;gap:20px}
#gsa-app .verdict-col, #gsa-dialog .verdict-col{display:block;position:static;max-height:none;overflow:visible}
#gsa-app .verdict-col .panel, #gsa-dialog .verdict-col .panel{margin-bottom:15px;break-inside:avoid}
#gsa-app .category-head, #gsa-dialog .category-head{padding:11px 13px}
#gsa-app .category h3, #gsa-dialog .category h3{font-size:16px}
#gsa-app .category, #gsa-dialog .category{margin-bottom:7px;break-inside:avoid}
#gsa-app .category .cat-sub, #gsa-dialog .category .cat-sub{display:none}
#gsa-app .cat-number, #gsa-dialog .cat-number{height:25px;width:24px}
#gsa-app .scroll-card, #gsa-dialog .scroll-card{margin-bottom:20px;box-shadow:none}
#gsa-app .score-seal, #gsa-dialog .score-seal{width:120px;height:120px}
#gsa-app .score-seal b, #gsa-dialog .score-seal b{font-size:65px}
#gsa-app .category-bar .bar-title, #gsa-dialog .category-bar .bar-title{font-size:12px}
#gsa-app .category-bar, #gsa-dialog .category-bar{grid-template-columns:16px 88px minmax(20px,1fr) 30px}
#gsa-app .panel, #gsa-dialog .panel{box-shadow:none}
#gsa-app .verdict-panel, #gsa-dialog .verdict-panel{break-inside:avoid}
#gsa-app .help-panel, #gsa-dialog .help-panel, #gsa-app .final-words, #gsa-dialog .final-words{display:none!important}
#gsa-app .print-only, #gsa-dialog .print-only{display:block;margin:20px 0}
#gsa-app .print-only p, #gsa-dialog .print-only p{white-space:pre-wrap;font-size:13px;line-height:1.8;color:var(--muted)}
#gsa-app .print-only h2, #gsa-dialog .print-only h2{font-size:25px;margin-bottom:10px}
#gsa-app .poster-empty, #gsa-dialog .poster-empty, #gsa-app .bar-fill, #gsa-dialog .bar-fill, #gsa-app .shape, #gsa-dialog .shape{print-color-adjust:exact;-webkit-print-color-adjust:exact}
#gsa-app .scale-table, #gsa-dialog .scale-table{min-width:0}
#gsa-app .review-grid, #gsa-dialog .review-grid{grid-template-columns:1fr 1fr}
#gsa-app .review-card, #gsa-dialog .review-card{break-inside:avoid}
#gsa-app .filterbar, #gsa-dialog .filterbar{display:none}
#gsa-app .score-compact b, #gsa-dialog .score-compact b{font-size:23px}
#gsa-app .category-bar b, #gsa-dialog .category-bar b{font-size:12px}
#gsa-app .page-head h1, #gsa-dialog .page-head h1{font-size:29px}}
#gsa-app .sr-only, #gsa-dialog .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#gsa-app .category-toggle h3, #gsa-dialog .category-toggle h3{margin:0}
#gsa-app .category-text h3, #gsa-dialog .category-text h3{display:block}
#gsa-app .scale-table .tier-number small, #gsa-dialog .scale-table .tier-number small{font-size:var(--size-xs);color:var(--muted);margin-left:2px}
#gsa-app .main-verdict-tile, #gsa-dialog .main-verdict-tile{display:block;width:133px;height:213px;object-fit:contain;margin:1px auto 9px;filter:drop-shadow(0 6px 12px color-mix(in srgb, var(--ink) 20%, transparent))}
#gsa-app .personal-impressions, #gsa-dialog .personal-impressions{padding:19px;border:1px solid var(--line2);border-radius:10px;background:linear-gradient(125deg,color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 3.1%, transparent),transparent),var(--panel);margin:0 0 24px;scroll-margin-top:22px}
#gsa-app .personal-impressions .section-head, #gsa-dialog .personal-impressions .section-head{margin:0 0 10px;align-items:center}
#gsa-app .personal-impressions h2, #gsa-dialog .personal-impressions h2{font-size:var(--size-xl)}
#gsa-app .personal-impressions .eyebrow, #gsa-dialog .personal-impressions .eyebrow{font-size:var(--size-2xs);margin-bottom:5px}
#gsa-app .personal-intro, #gsa-dialog .personal-intro{font-size:var(--size-sm);line-height:1.8;color:var(--muted);margin-bottom:16px;max-width:600px}
#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{background:var(--field);border:1px solid var(--line);border-radius:7px;overflow:hidden;padding:13px 11px}
#gsa-app .feeling-heading, #gsa-dialog .feeling-heading{display:flex;align-items:center;gap:7px}
#gsa-app .feeling-heading h3, #gsa-dialog .feeling-heading h3{font-size:var(--size-lg);line-height:1.2}
#gsa-app .feeling-heading .chip, #gsa-dialog .feeling-heading .chip{font-size:var(--size-2xs);padding:1px 4px;margin-left:auto}
#gsa-app .feeling-symbol, #gsa-dialog .feeling-symbol{font-family:var(--font-serif);color:var(--d-gold, var(--gold));font-size:var(--size-md);line-height:1.2}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{display:flex;align-items:center;text-align:left;gap:10px;padding:14px 0 12px;border:0;background:none;width:100%;color:inherit;min-height:130px}
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile{width:65px;height:104px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 6px color-mix(in srgb, var(--ink) 13.3%, transparent))}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{min-width:0;display:flex;flex-direction:column;gap:5px}
#gsa-app .feeling-caption strong, #gsa-dialog .feeling-caption strong{font:var(--size-lg)/1.2 var(--font-serif);color:var(--d-gold, var(--gold));overflow-wrap:anywhere}
#gsa-app .feeling-caption small, #gsa-dialog .feeling-caption small{font-size:var(--size-xs);color:var(--dim);line-height:1.7}
#gsa-app .feeling-blank, #gsa-dialog .feeling-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:65px;height:104px;flex-shrink:0;border:1px dashed var(--line2);border-radius:36px 36px 5px 5px;color:var(--dim);padding:7px}
#gsa-app .feeling-blank svg, #gsa-dialog .feeling-blank svg{width:23px;height:23px;color:var(--d-gold, var(--gold));opacity:.55}
#gsa-app .feeling-blank small, #gsa-dialog .feeling-blank small{text-align:center;font-size:var(--size-2xs);line-height:1.6}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}
#gsa-app .feeling-controls .outline, #gsa-dialog .feeling-controls .outline{font-size:var(--size-xs);padding:4px 9px}
#gsa-app .feeling-controls .quiet, #gsa-dialog .feeling-controls .quiet{font-size:var(--size-xs)}
#gsa-app .personal-note, #gsa-dialog .personal-note{margin-top:14px}
#gsa-app .personal-note textarea, #gsa-dialog .personal-note textarea{min-height:43px;max-height:160px}
#gsa-app .personal-note>span, #gsa-dialog .personal-note>span{font-size:var(--size-xs)}
#gsa-app .rating-tile, #gsa-dialog .rating-tile{width:100%;height:auto;aspect-ratio:5/8;object-fit:contain;display:block}
#gsa-app .tile-picker, #gsa-dialog .tile-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 9px}
#gsa-app .tile-option, #gsa-dialog .tile-option{position:relative;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:14px 15px 12px;color:var(--d-ink, var(--ink));transition:background .15s,border-color .15s;min-width:0}
#gsa-app .tile-option:hover, #gsa-dialog .tile-option:hover{background:var(--raised);border-color:var(--d-gold, var(--gold))}
#gsa-app .tile-option.selected, #gsa-dialog .tile-option.selected{border-color:var(--d-gold, var(--gold));background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 7.1%, transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 8.2%, transparent)}
#gsa-app .tile-option .rating-tile, #gsa-dialog .tile-option .rating-tile{max-height:220px;margin:0 auto 9px;filter:drop-shadow(0 5px 8px color-mix(in srgb, var(--ink) 13.3%, transparent))}
#gsa-app .tile-option-label, #gsa-dialog .tile-option-label{display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:1px solid var(--line);padding-top:10px;text-align:left}
#gsa-app .tile-option-label b, #gsa-dialog .tile-option-label b{font:var(--size-lg)/1.2 var(--font-serif);color:var(--d-gold, var(--gold))}
#gsa-app .tile-option-label small, #gsa-dialog .tile-option-label small{font-size:var(--size-sm);color:var(--muted)}
#gsa-app .chosen-marker, #gsa-dialog .chosen-marker{position:absolute;right:9px;top:9px;background:var(--d-gold, var(--gold));border-radius:10px;color:color-mix(in srgb, var(--accent-jade) 20%, var(--surface));padding:2px 7px;font-size:var(--size-xs)}
#gsa-app .tile-catalogue, #gsa-dialog .tile-catalogue{margin:20px 0 25px;scroll-margin-top:20px}
#gsa-app .tile-catalogue .panel-head, #gsa-dialog .tile-catalogue .panel-head{padding-bottom:19px;border-bottom:1px solid var(--line);margin-bottom:18px}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px 22px;padding:0 25px 24px}
#gsa-app .catalogue-rank, #gsa-dialog .catalogue-rank{text-align:center;background:var(--field);border:1px solid var(--line);border-radius:7px;padding:15px 12px}
#gsa-app .catalogue-rank .rating-tile, #gsa-dialog .catalogue-rank .rating-tile{max-height:230px;margin:auto}
#gsa-app .catalogue-rank strong, #gsa-dialog .catalogue-rank strong{display:block;font:var(--size-xl) var(--font-serif);color:var(--d-gold, var(--gold));margin-top:10px}
#gsa-app .catalogue-rank span, #gsa-dialog .catalogue-rank span{font-size:var(--size-sm);display:block;color:var(--muted);margin-top:3px}
#gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
#gsa-app .catalogue-personal article, #gsa-dialog .catalogue-personal article{min-width:0;text-align:center;border:1px solid var(--line);background:var(--field);border-radius:7px;padding:13px 10px 10px}
#gsa-app .catalogue-personal .rating-tile, #gsa-dialog .catalogue-personal .rating-tile{max-height:235px}
#gsa-app .catalogue-personal strong, #gsa-dialog .catalogue-personal strong{display:block;font:var(--size-lg)/1.4 var(--font-serif);color:var(--d-gold, var(--gold));margin:13px 0 8px}
#gsa-app .catalogue-personal .actions, #gsa-dialog .catalogue-personal .actions{justify-content:center;gap:13px;padding-top:8px;border-top:1px solid var(--line)}
#gsa-app .empty-tile-set, #gsa-dialog .empty-tile-set{text-align:center;padding:26px 20px 25px;border:1px dashed var(--line2);border-radius:8px}
#gsa-app .empty-tile-set>svg, #gsa-dialog .empty-tile-set>svg{margin:0 auto 15px;width:28px;height:28px;color:var(--d-gold, var(--gold))}
#gsa-app .empty-tile-set h3, #gsa-dialog .empty-tile-set h3{font-size:var(--size-xl)}
#gsa-app .empty-tile-set p, #gsa-dialog .empty-tile-set p{color:var(--muted);font-size:var(--size-sm);line-height:1.9;max-width:470px;margin:10px auto 18px}
#gsa-app .tile-upload-preview, #gsa-dialog .tile-upload-preview{background:var(--field);border:1px dashed var(--line2);border-radius:8px;padding:15px;min-height:80px;display:flex;justify-content:center;align-items:center}
#gsa-app .tile-upload-preview .rating-tile, #gsa-dialog .tile-upload-preview .rating-tile{height:230px;width:auto}
#gsa-app .scale-row-tile, #gsa-dialog .scale-row-tile{width:55px;height:88px;object-fit:contain;margin:0 auto}
#gsa-app .scale-table .tier-number, #gsa-dialog .scale-table .tier-number{font-size:var(--size-xl)}
#gsa-app .personal-summary, #gsa-dialog .personal-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0 5px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
#gsa-app .personal-summary-item, #gsa-dialog .personal-summary-item{min-width:0;display:flex;gap:7px;align-items:center}
#gsa-app .personal-summary small, #gsa-dialog .personal-summary small{display:block;color:var(--dim);font-size:var(--size-xs);margin-bottom:4px}
#gsa-app .personal-summary strong, #gsa-dialog .personal-summary strong{display:block;font-weight:400;color:var(--muted);font-size:var(--size-xs);line-height:1.5;overflow-wrap:anywhere}
#gsa-app .tiny-rating-tile, #gsa-dialog .tiny-rating-tile{width:31px;height:50px;object-fit:contain;flex-shrink:0}
#gsa-app .sealed-personal .personal-summary, #gsa-dialog .sealed-personal .personal-summary{margin-top:8px;margin-bottom:20px;padding:15px 0}
#gsa-app .sealed-personal .personal-summary small, #gsa-dialog .sealed-personal .personal-summary small{font-size:var(--size-sm)}
#gsa-app .sealed-personal .personal-summary strong, #gsa-dialog .sealed-personal .personal-summary strong{font-size:var(--size-xs);color:var(--d-gold, var(--gold))}
#gsa-app .sealed-personal .tiny-rating-tile, #gsa-dialog .sealed-personal .tiny-rating-tile{width:62px;height:100px}
#gsa-app .sealed-personal .detail-prose, #gsa-dialog .sealed-personal .detail-prose{margin:17px 0}
#gsa-app .review-card .personal-summary, #gsa-dialog .review-card .personal-summary{gap:6px}
#gsa-app .review-card .personal-summary-item, #gsa-dialog .review-card .personal-summary-item{flex-direction:column;align-items:flex-start}
#gsa-app .review-card .tiny-rating-tile, #gsa-dialog .review-card .tiny-rating-tile{width:35px;height:56px}
#gsa-app .feeling-choice:hover .feeling-caption strong, #gsa-dialog .feeling-choice:hover .feeling-caption strong{color:var(--d-jade, var(--jade))}
@media(min-width:1650px){#gsa-app .main-verdict-tile, #gsa-dialog .main-verdict-tile{width:145px;height:232px}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{gap:15px}
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile, #gsa-app .feeling-blank, #gsa-dialog .feeling-blank{width:77px;height:124px}
#gsa-app .personal-impressions h2, #gsa-dialog .personal-impressions h2{font-size:var(--size-xl)}
#gsa-app .feeling-caption strong, #gsa-dialog .feeling-caption strong{font-size:var(--size-xl)}
#gsa-app .personal-intro, #gsa-dialog .personal-intro{font-size:var(--size-sm)}
#gsa-app .feeling-heading h3, #gsa-dialog .feeling-heading h3{font-size:var(--size-xl)}
#gsa-app .personal-note>span, #gsa-dialog .personal-note>span{font-size:var(--size-sm)}}
@media(max-width:1270px){#gsa-app .personal-impressions, #gsa-dialog .personal-impressions{padding:16px}
#gsa-app .personal-impressions h2, #gsa-dialog .personal-impressions h2{font-size:var(--size-xl)}
#gsa-app .personal-impressions .section-head>.chip, #gsa-dialog .personal-impressions .section-head>.chip{font-size:var(--size-2xs)}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{padding:11px 9px}
#gsa-app .feeling-heading .chip, #gsa-dialog .feeling-heading .chip{display:none}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-direction:column;gap:9px;text-align:center;padding:12px 0}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:center}
#gsa-app .feeling-caption strong, #gsa-dialog .feeling-caption strong{font-size:var(--size-lg)}
#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{gap:8px}
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile, #gsa-app .feeling-blank, #gsa-dialog .feeling-blank{width:60px;height:96px}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{justify-content:center;gap:8px;flex-wrap:wrap}
#gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:repeat(3,minmax(0,1fr))}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks{gap:14px;padding-inline:20px}
#gsa-app .catalogue-rank, #gsa-dialog .catalogue-rank{padding:12px 8px}
#gsa-app .catalogue-rank strong, #gsa-dialog .catalogue-rank strong{font-size:var(--size-xl)}}
@media(max-width:1050px){#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-direction:row;text-align:left;gap:12px}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:flex-start}
#gsa-app .feeling-heading .chip, #gsa-dialog .feeling-heading .chip{display:block}
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile, #gsa-app .feeling-blank, #gsa-dialog .feeling-blank{width:65px;height:104px}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{justify-content:space-between}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks{grid-template-columns:repeat(3,minmax(0,1fr))}
#gsa-app .main-verdict-tile, #gsa-dialog .main-verdict-tile{width:143px;height:229px}
#gsa-app .catalogue-rank .rating-tile, #gsa-dialog .catalogue-rank .rating-tile{max-height:250px}}
@media(max-width:800px){#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-direction:column;text-align:center}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:center}
#gsa-app .feeling-heading .chip, #gsa-dialog .feeling-heading .chip{display:none}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{justify-content:center}
#gsa-app .personal-impressions h2, #gsa-dialog .personal-impressions h2{font-size:var(--size-xl)}
#gsa-app .personal-impressions .section-head, #gsa-dialog .personal-impressions .section-head{gap:10px;flex-wrap:wrap}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks{gap:12px}
#gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{gap:11px}
#gsa-app .catalogue-personal strong, #gsa-dialog .catalogue-personal strong{font-size:var(--size-md)}
#gsa-app .sealed-personal .tiny-rating-tile, #gsa-dialog .sealed-personal .tiny-rating-tile{width:45px;height:72px}}
@media(max-width:650px){#gsa-app .personal-impressions, #gsa-dialog .personal-impressions{padding:16px;margin-bottom:25px}
#gsa-app .personal-impressions h2, #gsa-dialog .personal-impressions h2{font-size:var(--size-xl)}
#gsa-app .personal-impressions .section-head>.chip, #gsa-dialog .personal-impressions .section-head>.chip{font-size:var(--size-2xs)}
#gsa-app .personal-impressions .eyebrow, #gsa-dialog .personal-impressions .eyebrow{font-size:var(--size-2xs)}
#gsa-app .personal-intro, #gsa-dialog .personal-intro{font-size:var(--size-sm)}
#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{gap:8px}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{padding:11px 7px}
#gsa-app .feeling-heading, #gsa-dialog .feeling-heading{justify-content:center}
#gsa-app .feeling-heading h3, #gsa-dialog .feeling-heading h3{font-size:var(--size-lg)}
#gsa-app .feeling-symbol, #gsa-dialog .feeling-symbol{font-size:var(--size-sm)}
#gsa-app .feeling-caption strong, #gsa-dialog .feeling-caption strong{font-size:var(--size-lg)}
#gsa-app .feeling-caption small, #gsa-dialog .feeling-caption small{font-size:var(--size-xs)}
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile, #gsa-app .feeling-blank, #gsa-dialog .feeling-blank{width:63px;height:101px}
#gsa-app .feeling-controls .outline, #gsa-dialog .feeling-controls .outline{font-size:var(--size-xs);padding:4px 7px}
#gsa-app .feeling-controls .quiet, #gsa-dialog .feeling-controls .quiet{font-size:var(--size-xs)}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{gap:8px;min-height:42px}
#gsa-app .personal-note>span, #gsa-dialog .personal-note>span{font-size:var(--size-xs)}
#gsa-app .tile-picker, #gsa-dialog .tile-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#gsa-app .tile-option, #gsa-dialog .tile-option{padding:12px}
#gsa-app .tile-option .rating-tile, #gsa-dialog .tile-option .rating-tile{max-height:210px}
#gsa-app .tile-option-label b, #gsa-dialog .tile-option-label b{font-size:var(--size-lg)}
#gsa-app .tile-option-label small, #gsa-dialog .tile-option-label small{font-size:var(--size-sm)}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-inline:17px}
#gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
#gsa-app .catalogue-personal .rating-tile, #gsa-dialog .catalogue-personal .rating-tile{max-height:260px}
#gsa-app .catalogue-rank strong, #gsa-dialog .catalogue-rank strong{font-size:var(--size-xl)}
#gsa-app .catalogue-rank span, #gsa-dialog .catalogue-rank span{font-size:var(--size-sm)}
#gsa-app .catalogue-personal strong, #gsa-dialog .catalogue-personal strong{font-size:var(--size-lg)}
#gsa-app .main-verdict-tile, #gsa-dialog .main-verdict-tile{width:160px;height:256px}
#gsa-app .tile-catalogue .panel-head h2, #gsa-dialog .tile-catalogue .panel-head h2{font-size:var(--size-xl)}
#gsa-app .tile-catalogue .panel-head>.outline, #gsa-dialog .tile-catalogue .panel-head>.outline{font-size:var(--size-xs);white-space:normal;max-width:105px}
#gsa-app .sealed-personal .personal-summary, #gsa-dialog .sealed-personal .personal-summary{grid-template-columns:1fr;gap:13px}
#gsa-app .sealed-personal .personal-summary-item, #gsa-dialog .sealed-personal .personal-summary-item{gap:17px}
#gsa-app .sealed-personal .tiny-rating-tile, #gsa-dialog .sealed-personal .tiny-rating-tile{width:51px;height:82px}
#gsa-app .personal-summary strong, #gsa-dialog .personal-summary strong{font-size:var(--size-sm)}
#gsa-app .personal-summary small, #gsa-dialog .personal-summary small{font-size:var(--size-xs)}
#gsa-app .review-card .personal-summary-item, #gsa-dialog .review-card .personal-summary-item{flex-direction:row;gap:7px}
#gsa-app .review-card .tiny-rating-tile, #gsa-dialog .review-card .tiny-rating-tile{width:32px;height:52px}}
@media(max-width:370px){#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{grid-template-columns:1fr}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-direction:row;text-align:left;justify-content:center}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:flex-start}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{padding:15px}
#gsa-app .feeling-heading, #gsa-dialog .feeling-heading{justify-content:flex-start}
#gsa-app .feeling-heading .chip, #gsa-dialog .feeling-heading .chip{display:block}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{justify-content:flex-start}
#gsa-app .personal-summary, #gsa-dialog .personal-summary{gap:5px}
#gsa-app .review-card .personal-summary-item, #gsa-dialog .review-card .personal-summary-item{flex-direction:column}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks{gap:9px}
#gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{gap:10px}}
@media print{#gsa-app .personal-impressions, #gsa-dialog .personal-impressions{break-inside:avoid;padding:15px}
#gsa-app .personal-impressions .section-head, #gsa-dialog .personal-impressions .section-head{display:block!important}
#gsa-app .personal-intro, #gsa-dialog .personal-intro{font-size:12px}
#gsa-app .personal-impressions h2, #gsa-dialog .personal-impressions h2{font-size:22px}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls, #gsa-app .personal-note, #gsa-dialog .personal-note{display:none!important}
#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{gap:10px}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{display:flex;flex-direction:column;gap:7px;text-align:center}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:center}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{padding:10px}
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile{height:94px;width:59px}
#gsa-app .feeling-blank, #gsa-dialog .feeling-blank{height:94px;width:59px}
#gsa-app .feeling-caption strong, #gsa-dialog .feeling-caption strong{font-size:16px}
#gsa-app .feeling-heading h3, #gsa-dialog .feeling-heading h3{font-size:17px}
#gsa-app .feeling-caption small, #gsa-dialog .feeling-caption small{font-size:12px}
#gsa-app .main-verdict-tile, #gsa-dialog .main-verdict-tile{height:180px;width:112px}
#gsa-app .personal-summary, #gsa-dialog .personal-summary{break-inside:avoid}
#gsa-app .tile-picker, #gsa-dialog .tile-picker, #gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks, #gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:repeat(4,minmax(0,1fr))}
#gsa-app .tile-catalogue .rating-tile, #gsa-dialog .tile-catalogue .rating-tile{height:140px}
#gsa-app .tile-catalogue, #gsa-dialog .tile-catalogue{break-inside:avoid}
#gsa-app .catalogue-personal article, #gsa-dialog .catalogue-personal article, #gsa-app .catalogue-rank, #gsa-dialog .catalogue-rank{break-inside:avoid}}
#gsa-app .sealed-verdict-tile, #gsa-dialog .sealed-verdict-tile{width:115px;height:184px;object-fit:contain;flex-shrink:0}
#gsa-app .journal-verdict-tile, #gsa-dialog .journal-verdict-tile{width:39px;height:63px;object-fit:contain;flex-shrink:0;margin-right:5px}
#gsa-app .review-score:has(.journal-verdict-tile), #gsa-dialog .review-score:has(.journal-verdict-tile){align-items:center}
#gsa-app .review-score:has(.journal-verdict-tile) b, #gsa-dialog .review-score:has(.journal-verdict-tile) b{font-size:var(--size-2xl)}
#gsa-app .review-score:has(.journal-verdict-tile) .calculated strong, #gsa-dialog .review-score:has(.journal-verdict-tile) .calculated strong{font-size:var(--size-xl)}
@media(max-width:650px){#gsa-app .journal-verdict-tile, #gsa-dialog .journal-verdict-tile{width:47px;height:75px}
#gsa-app .review-score:has(.journal-verdict-tile) b, #gsa-dialog .review-score:has(.journal-verdict-tile) b{font-size:var(--size-3xl)}
#gsa-app .review-score:has(.journal-verdict-tile) .calculated strong, #gsa-dialog .review-score:has(.journal-verdict-tile) .calculated strong{font-size:var(--size-2xl)}
#gsa-app .sealed-verdict-tile, #gsa-dialog .sealed-verdict-tile{width:95px;height:152px}}
#gsa-app .meaning-intro, #gsa-dialog .meaning-intro{padding:15px 17px;border:1px solid var(--line2);border-radius:8px;background:var(--soft);margin-bottom:18px}
#gsa-app .meaning-intro strong, #gsa-dialog .meaning-intro strong{display:block;font:var(--size-xl)/1.3 var(--font-serif);color:var(--d-gold, var(--gold));margin-bottom:7px}
#gsa-app .meaning-intro p, #gsa-dialog .meaning-intro p{font-size:var(--size-xs);line-height:1.8;color:var(--muted);margin-bottom:7px}
#gsa-app .meaning-intro small, #gsa-dialog .meaning-intro small{font-size:var(--size-sm);line-height:1.7;color:var(--dim);display:block}
#gsa-app .tile-option, #gsa-dialog .tile-option{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
#gsa-app .tile-option .rating-tile, #gsa-dialog .tile-option .rating-tile{flex-shrink:0;max-height:207px}
#gsa-app .tile-meaning, #gsa-dialog .tile-meaning{display:block;text-align:left;font-size:var(--size-sm);line-height:1.8;color:var(--muted);margin-top:9px;white-space:normal}
#gsa-app .tile-option-label, #gsa-dialog .tile-option-label{flex-shrink:0}
#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{font-size:var(--size-sm);line-height:1.8;color:var(--muted);margin:0 0 12px;min-height:69px;overflow-wrap:anywhere}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{display:flex;flex-direction:column}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{margin-top:auto}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-shrink:0}
#gsa-app .catalogue-meaning, #gsa-dialog .catalogue-meaning{font-size:var(--size-sm);line-height:1.8;color:var(--muted);margin:9px 0 0;overflow-wrap:anywhere}
#gsa-app .catalogue-personal article, #gsa-dialog .catalogue-personal article, #gsa-app .catalogue-rank, #gsa-dialog .catalogue-rank{display:flex;flex-direction:column;align-items:stretch}
#gsa-app .catalogue-personal .catalogue-meaning, #gsa-dialog .catalogue-personal .catalogue-meaning{margin-bottom:14px;flex:1}
#gsa-app .catalogue-personal .rating-tile, #gsa-dialog .catalogue-personal .rating-tile{flex-shrink:0}
#gsa-app .summary-meaning, #gsa-dialog .summary-meaning{display:none}
#gsa-app .sealed-personal .summary-meaning, #gsa-dialog .sealed-personal .summary-meaning{display:block;color:var(--muted);font-size:var(--size-sm);line-height:1.8;margin-top:8px}
#gsa-app .sealed-personal .personal-summary-item, #gsa-dialog .sealed-personal .personal-summary-item{align-items:flex-start}
#gsa-app .sealed-meaning, #gsa-dialog .sealed-meaning{font-size:var(--size-xs);line-height:1.8;color:var(--muted);margin:8px 0 12px;max-width:400px}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:var(--size-sm);line-height:1.85}
#gsa-app .tile-catalogue .catalogue-ranks .catalogue-meaning, #gsa-dialog .tile-catalogue .catalogue-ranks .catalogue-meaning{font-size:var(--size-sm)}
#gsa-app .scale-table td:last-child, #gsa-dialog .scale-table td:last-child{min-width:280px}
#gsa-app .scale-table input[name^=description-], #gsa-dialog .scale-table input[name^=description-]{min-width:235px}
#gsa-app .tile-option.selected .tile-meaning, #gsa-dialog .tile-option.selected .tile-meaning{color:var(--d-ink, var(--ink))}
@media(min-width:1650px){#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{font-size:var(--size-sm)}
#gsa-app .catalogue-meaning, #gsa-dialog .catalogue-meaning{font-size:var(--size-sm)}}
@media(max-width:650px){#gsa-app .meaning-intro, #gsa-dialog .meaning-intro{padding:15px}
#gsa-app .meaning-intro strong, #gsa-dialog .meaning-intro strong{font-size:var(--size-xl)}
#gsa-app .meaning-intro p, #gsa-dialog .meaning-intro p{font-size:var(--size-xs)}
#gsa-app .meaning-intro small, #gsa-dialog .meaning-intro small{font-size:var(--size-sm)}
#gsa-app .tile-meaning, #gsa-dialog .tile-meaning{font-size:var(--size-sm);line-height:1.8}
#gsa-app .tile-option .rating-tile, #gsa-dialog .tile-option .rating-tile{max-height:193px}
#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{font-size:var(--size-sm);line-height:1.8;min-height:100px}
#gsa-app .catalogue-meaning, #gsa-dialog .catalogue-meaning, #gsa-app .tile-catalogue .catalogue-ranks .catalogue-meaning, #gsa-dialog .tile-catalogue .catalogue-ranks .catalogue-meaning{font-size:var(--size-sm)}
#gsa-app .catalogue-personal strong, #gsa-dialog .catalogue-personal strong{font-size:var(--size-lg)}
#gsa-app .sealed-personal .summary-meaning, #gsa-dialog .sealed-personal .summary-meaning{font-size:var(--size-sm)}
#gsa-app .sealed-meaning, #gsa-dialog .sealed-meaning{font-size:var(--size-sm)}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:var(--size-sm)}}
@media(max-width:370px){#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{min-height:0;font-size:var(--size-sm)}
#gsa-app .tile-option-label, #gsa-dialog .tile-option-label{align-items:flex-start}
#gsa-app .tile-option-label b, #gsa-dialog .tile-option-label b{font-size:var(--size-lg)}
#gsa-app .tile-option-label small, #gsa-dialog .tile-option-label small{font-size:var(--size-xs)}}
@media print{#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{font-size:12px;line-height:1.65;min-height:0;margin-bottom:0}
#gsa-app .personal-intro, #gsa-dialog .personal-intro{font-size:12px}
#gsa-app .tile-meaning, #gsa-dialog .tile-meaning, #gsa-app .catalogue-meaning, #gsa-dialog .catalogue-meaning{font-size:12px}
#gsa-app .meaning-intro, #gsa-dialog .meaning-intro{display:none}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:12px}
#gsa-app .personal-impressions, #gsa-dialog .personal-impressions{break-inside:avoid}
#gsa-app .tile-option, #gsa-dialog .tile-option{break-inside:avoid}}
#gsa-app .scale-intro, #gsa-dialog .scale-intro{color:var(--muted);font-size:var(--size-xs);line-height:1.7;margin-top:7px}
#gsa-app .tile-subtitle, #gsa-dialog .tile-subtitle, #gsa-app .feeling-subtitle, #gsa-dialog .feeling-subtitle, #gsa-app .catalogue-subtitle, #gsa-dialog .catalogue-subtitle, #gsa-app .sealed-subtitle, #gsa-dialog .sealed-subtitle, #gsa-app .summary-subtitle, #gsa-dialog .summary-subtitle{font-family:var(--font-serif);font-weight:400;color:var(--d-gold, var(--gold));line-height:1.45;overflow-wrap:break-word}
#gsa-app .tile-subtitle, #gsa-dialog .tile-subtitle{font-size:var(--size-lg);display:block;margin-top:7px;text-align:left}
#gsa-app .feeling-subtitle, #gsa-dialog .feeling-subtitle{font-size:var(--size-lg);margin:1px 0 8px}
#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{font-size:var(--size-xs);line-height:1.8;min-height:0}
#gsa-app .feeling-heading h3, #gsa-dialog .feeling-heading h3{white-space:normal}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks, #gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:repeat(3,minmax(0,1fr))}
#gsa-app .catalogue-subtitle, #gsa-dialog .catalogue-subtitle, #gsa-app .catalogue-rank .catalogue-subtitle, #gsa-dialog .catalogue-rank .catalogue-subtitle{display:block;font-size:var(--size-lg);color:var(--d-gold, var(--gold));margin-top:9px;line-height:1.45}
#gsa-app .catalogue-meaning, #gsa-dialog .catalogue-meaning, #gsa-app .tile-catalogue .catalogue-ranks .catalogue-meaning, #gsa-dialog .tile-catalogue .catalogue-ranks .catalogue-meaning{font-size:var(--size-xs);line-height:1.8;text-align:left}
#gsa-app .catalogue-rank .rating-tile, #gsa-dialog .catalogue-rank .rating-tile{margin:0 auto}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks, #gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{align-items:stretch}
#gsa-app .tile-meaning, #gsa-dialog .tile-meaning{font-size:var(--size-xs);line-height:1.8}
#gsa-app .verdict-core .verdict-subtitle, #gsa-dialog .verdict-core .verdict-subtitle{font:var(--size-xl)/1.4 var(--font-serif);color:var(--d-gold, var(--gold));margin:8px 0}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:var(--size-xs)}
#gsa-app .sealed-subtitle, #gsa-dialog .sealed-subtitle{font-size:var(--size-xl);margin-top:7px}
#gsa-app .summary-subtitle, #gsa-dialog .summary-subtitle{display:none}
#gsa-app .sealed-personal .summary-subtitle, #gsa-dialog .sealed-personal .summary-subtitle{display:block;font-size:var(--size-lg);margin-top:7px}
#gsa-app .sealed-personal .summary-meaning, #gsa-dialog .sealed-personal .summary-meaning{font-size:var(--size-xs);line-height:1.8}
#gsa-app .sealed-personal .personal-summary, #gsa-dialog .sealed-personal .personal-summary{grid-template-columns:1fr;gap:19px}
#gsa-app .sealed-personal .personal-summary-item, #gsa-dialog .sealed-personal .personal-summary-item{gap:20px}
#gsa-app .sealed-personal .tiny-rating-tile, #gsa-dialog .sealed-personal .tiny-rating-tile{width:68px;height:109px}
#gsa-app .scale-subtitle-field, #gsa-dialog .scale-subtitle-field{display:block;margin-top:10px;min-width:190px}
#gsa-app .scale-subtitle-field>span, #gsa-dialog .scale-subtitle-field>span{font-size:var(--size-sm);color:var(--dim)}
#gsa-app .scale-table textarea, #gsa-dialog .scale-table textarea{display:block;width:100%;resize:vertical;min-height:70px;background:var(--field);color:var(--d-ink, var(--ink));border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-size:var(--size-xs);line-height:1.65;white-space:pre-wrap}
#gsa-app .scale-table td:last-child, #gsa-dialog .scale-table td:last-child{min-width:310px}
#gsa-app .scale-table textarea[name^=description-], #gsa-dialog .scale-table textarea[name^=description-]{min-height:125px}
#gsa-dialog:has(.tile-picker){width:min(960px,calc(100vw - 30px))}
@media(max-width:800px){#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks, #gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:repeat(2,minmax(0,1fr))}
#gsa-app .tile-picker, #gsa-dialog .tile-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
#gsa-app .tile-subtitle, #gsa-dialog .tile-subtitle{font-size:var(--size-lg)}}
@media(max-width:650px){#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{grid-template-columns:1fr;gap:14px}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{padding:16px}
#gsa-app .feeling-heading, #gsa-dialog .feeling-heading{justify-content:flex-start}
#gsa-app .feeling-heading .chip, #gsa-dialog .feeling-heading .chip{display:block;margin-left:auto}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-direction:row;justify-content:flex-start;text-align:left;gap:18px}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:flex-start}
#gsa-app .feeling-controls, #gsa-dialog .feeling-controls{justify-content:flex-start;min-height:0;padding-top:3px}
#gsa-app .feeling-subtitle, #gsa-dialog .feeling-subtitle{font-size:var(--size-xl)}
#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning{font-size:var(--size-xs);min-height:0}
#gsa-app .catalogue-subtitle, #gsa-dialog .catalogue-subtitle, #gsa-app .catalogue-rank .catalogue-subtitle, #gsa-dialog .catalogue-rank .catalogue-subtitle{font-size:var(--size-lg)}
#gsa-app .tile-option .rating-tile, #gsa-dialog .tile-option .rating-tile{max-height:183px}
#gsa-app .tile-option-label b, #gsa-dialog .tile-option-label b{font-size:var(--size-lg)}
#gsa-app .catalogue-rank .rating-tile, #gsa-dialog .catalogue-rank .rating-tile, #gsa-app .catalogue-personal .rating-tile, #gsa-dialog .catalogue-personal .rating-tile{max-height:220px}
#gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:var(--size-xs)}
#gsa-app .sealed-personal .summary-meaning, #gsa-dialog .sealed-personal .summary-meaning{font-size:var(--size-xs)}
#gsa-app .sealed-personal .tiny-rating-tile, #gsa-dialog .sealed-personal .tiny-rating-tile{width:59px;height:95px}}
@media(max-width:400px){#gsa-app .tile-picker, #gsa-dialog .tile-picker, #gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks, #gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:1fr}
#gsa-app .tile-option .rating-tile, #gsa-dialog .tile-option .rating-tile{height:190px;width:auto;margin:0 auto}
#gsa-app .tile-option, #gsa-dialog .tile-option{padding:18px}
#gsa-app .catalogue-rank, #gsa-dialog .catalogue-rank, #gsa-app .catalogue-personal article, #gsa-dialog .catalogue-personal article{padding:18px}}
@media print{#gsa-app .personal-impressions, #gsa-dialog .personal-impressions, #gsa-app .tile-catalogue, #gsa-dialog .tile-catalogue{break-inside:auto}
#gsa-app .feeling-cards, #gsa-dialog .feeling-cards{grid-template-columns:1fr}
#gsa-app .feeling-card, #gsa-dialog .feeling-card{break-inside:avoid}
#gsa-app .feeling-choice, #gsa-dialog .feeling-choice{flex-direction:row;justify-content:flex-start;text-align:left}
#gsa-app .feeling-caption, #gsa-dialog .feeling-caption{align-items:flex-start}
#gsa-app .feeling-meaning, #gsa-dialog .feeling-meaning, #gsa-app .tile-meaning, #gsa-dialog .tile-meaning, #gsa-app .catalogue-meaning, #gsa-dialog .catalogue-meaning, #gsa-app .verdict-core p, #gsa-dialog .verdict-core p{font-size:13px}
#gsa-app .feeling-subtitle, #gsa-dialog .feeling-subtitle{font-size:17px}
#gsa-app .catalogue-ranks, #gsa-dialog .catalogue-ranks, #gsa-app .catalogue-personal, #gsa-dialog .catalogue-personal{grid-template-columns:repeat(2,minmax(0,1fr))}
#gsa-app .scale-table textarea, #gsa-dialog .scale-table textarea{border:0;overflow:visible}
#gsa-app .catalogue-rank, #gsa-dialog .catalogue-rank, #gsa-app .catalogue-personal article, #gsa-dialog .catalogue-personal article{break-inside:avoid}}
/* the hall's base colours, given the palace's own (its --ink is text; the palace's dark ground is written out) */
#gsa-app, #gsa-dialog { --bg: color-mix(in srgb, var(--surface) 62%, var(--ink)); --nav: var(--surface); --panel: var(--surface); --raised: color-mix(in srgb, var(--surface) 88%, var(--blossom));
  --field: color-mix(in srgb, var(--surface) 62%, var(--ink)); --line: var(--border); --line2: color-mix(in srgb, var(--d-gold, var(--gold)) 35%, transparent); --d-ink: var(--blossom); --muted: var(--mist);
  --dim: var(--mist); --d-jade: var(--accent-jade); --serif: var(--font-serif); color: var(--blossom); }
#gsa-app { background: transparent; min-height: 0; }
/* the design's two columns stay, inside the palace's page: its side column scrolls with the page instead of
   pinning itself to the viewport's edge (where the palace's own sidebar is), and its brand block goes */
#gsa-app .shell { display: grid !important; grid-template-columns: 224px minmax(0, 1fr); gap: 22px; min-height: 0; }
#gsa-app .sidebar { position: sticky !important; inset: auto !important; top: 12px; align-self: start; width: auto !important; max-height: calc(100vh - 24px); overflow: auto; z-index: 1;
  border: 1px solid var(--border); border-radius: 12px; transform: none !important; }
#gsa-app .sidebar .brand, #gsa-app .shade, #gsa-app .topbar .menu, #gsa-app [data-action="menu"], #gsa-app [data-action="close-menu"] { display: none !important; }
#gsa-app .main { margin: 0; padding: 0 0 0 2px; max-width: none; }
@media (max-width: 900px) { #gsa-app .shell { grid-template-columns: 1fr; } #gsa-app .sidebar { position: static !important; max-height: none; } }
/* dramas and posters come from Golden Shadows */
#gsa-app [data-action="new"], #gsa-app [data-action="archive"], #gsa-app [data-action="import"], #gsa-app [data-action="restore"],
#gsa-app [data-action="poster-upload"], #gsa-app [data-action="remove-poster"], #gsa-dialog [data-action="poster-upload"], #gsa-dialog [data-action="remove-poster"],
#gsa-app [data-action="theme"] { display: none !important; }
#gsa-dialog { background: var(--surface); color: var(--blossom); }
/* Drop 70: Golden Shadows' note that the scales are given in the hall. */
.gs-hall-note { font-size: var(--size-xs); color: var(--mist); margin: 8px 0 14px; padding: 10px 14px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: 0 8px 8px 0; }
.gs-hall-note a, .realm-fact b a { color: var(--gold); text-decoration: none; }
/* Drop 70b: the hall without the design's own top bar, page head, hero, footer, side lists and
   settings - the palace's header, width and menus serve instead - and its setups at the bottom. */
#gsa-app .topbar, #gsa-app .page-head, #gsa-app .hero, #gsa-app .footer, #gsa-app .side-group, #gsa-app #side-categories,
#gsa-app .nav[data-view="settings"], #gsa-app .side-bottom .nav[data-view="settings"] { display: none !important; }
#gsa-app .sidebar { display: flex; flex-direction: column; }
#gsa-app .sidebar .nav[data-view="scale"], #gsa-app .sidebar .nav[data-view="tiles"] { order: 8; opacity: 0.85; }
#gsa-app .sidebar .side-bottom, #gsa-app .sidebar > *:last-child { order: 9; }
#gsa-app .sidebar .nav[data-view="scale"] { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; }
#gsa-app .main > *:first-child { margin-top: 0; }
/* Drop 70c: the hall's pages as a row of buttons across the top; the side column goes, and the appraisal has the whole width. */
#gsa-app .shell { display: block !important; }
#gsa-app .sidebar { position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none; overflow: visible; inset: auto !important;
  padding: 0 0 18px !important; margin: 0 0 6px; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0; background: transparent !important; box-shadow: none; }
#gsa-app .sidebar .nav { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 9px; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 9px 16px !important; border: 1px solid var(--border) !important; border-radius: 999px !important; background: var(--surface) !important; text-align: left; order: 0; opacity: 1; }
#gsa-app .sidebar .nav.active { border-color: var(--d-gold, var(--gold)) !important; background: color-mix(in srgb, var(--d-gold, var(--gold)) 12%, var(--surface)) !important; }
#gsa-app .sidebar .nav svg { width: 16px; height: 16px; margin: 0 !important; }
#gsa-app .sidebar .nav span { display: inline; }
#gsa-app .sidebar .nav small, #gsa-app .sidebar .nav .nav-dot { display: none !important; }
#gsa-app .sidebar .nav[data-view="scale"] { margin-left: auto !important; border-top: 0 !important; padding-top: 9px !important; }
#gsa-app .sidebar .nav[data-view="scale"], #gsa-app .sidebar .nav[data-view="tiles"] { opacity: 0.8; }
#gsa-app .sidebar .side-bottom, #gsa-app .sidebar .side-foot, #gsa-app .sidebar > p, #gsa-app .sidebar > em, #gsa-app .sidebar > *:not(.nav):not(.side-group) { display: none !important; }
#gsa-app .main { padding: 0 !important; }

/* Drop 70d: the hall's drop-downs in the palace's colours; the lasting-impression fields are not needed;
   the tiles' pictures sit on no ground of their own. */
#gsa-app select, #gsa-dialog select { background-color: color-mix(in srgb, var(--surface) 62%, var(--ink)); color: var(--blossom); }
#gsa-app select option, #gsa-dialog select option { background: var(--surface); color: var(--blossom); }
#gsa-app select option:checked, #gsa-dialog select option:checked { background: var(--d-gold, var(--gold)) linear-gradient(0deg, var(--d-gold, var(--gold)), var(--d-gold, var(--gold))); color: color-mix(in srgb, var(--lantern) 6%, var(--ink)); }
#gsa-app select:focus, #gsa-dialog select:focus { outline: 1px solid var(--d-gold, var(--gold)); accent-color: var(--d-gold, var(--gold)); }
#gsa-app label:has(> textarea[data-field="summary"]), #gsa-app label:has(> textarea[data-field="loved"]), #gsa-app label:has(> textarea[data-field="lacked"]) { display: none !important; }
#gsa-app img[src*="/assets/img/appraisal/"] { background: transparent; }
/* Drop 71b: the hall's side boxes show everything they hold (flex was squeezing each panel to fit
   the viewport, hiding the seal button and half of At a glance); the pages ordered with My verdicts
   first; a seal button under Madame's final words; the feeling tiles larger so their numbers read. */
#gsa-app .verdict-col > .panel, #gsa-dialog .verdict-col > .panel { flex-shrink: 0; }
#gsa-app .sidebar .nav[data-view="verdicts"] { order: 1; }
#gsa-app .sidebar .nav[data-view="appraisal"] { order: 2; }
#gsa-app .sidebar .nav[data-personal="jump"] { order: 3; }
#gsa-app .sidebar .nav[data-view="scale"] { order: 4; }
#gsa-app .sidebar .nav[data-view="tiles"] { order: 5; }
#gsa-app .selected-feeling-tile, #gsa-dialog .selected-feeling-tile,
#gsa-app .feeling-blank, #gsa-dialog .feeling-blank { width: 96px; height: 154px; }
#gsa-app .feeling-caption small, #gsa-dialog .feeling-caption small { font-size: var(--size-xs); letter-spacing: 0.04em; }
#gsa-app .seal-row { margin-top: 14px; display: grid; gap: 8px; }
#gsa-app .seal-row .seal-row-hint:empty { display: none; }
/* Drop 71c: the hall reads at the palace's size (the design's 6-11px text raised to 11-13px above);
   the side column flows with the page - no scrollbar of its own; the guide panel and the
   weighting note go; the radar's text in the palace's own face. */
#gsa-app .help-panel, #gsa-dialog .help-panel { display: none !important; }
#gsa-app .rubric-note, #gsa-dialog .rubric-note { display: none !important; }
#gsa-app .verdict-col, #gsa-dialog .verdict-col { position: static; max-height: none; overflow: visible; }
/* Drop 72: the My Verdicts view from Madame's Moving Scrolls, ported as given - the journal
   heading, filter pills (with the palace's Watching and Finished), search, sort, cards/list
   layouts, rating cells, mini impressions and the tile-meaning dialog. Fonts on the palace floor. */
#gsa-app .verdict-heading, #gsa-dialog .verdict-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:23px}
#gsa-app .verdict-heading .eyebrow, #gsa-dialog .verdict-heading .eyebrow{font-size:var(--size-xs);letter-spacing:.16em}
#gsa-app .verdict-heading h1, #gsa-dialog .verdict-heading h1{font-size:var(--size-3xl);line-height:1.15;margin:7px 0 10px}
#gsa-app .verdict-heading h1 [lang], #gsa-dialog .verdict-heading h1 [lang]{font:var(--size-lg) var(--font-serif);color:var(--d-gold, var(--gold));margin-left:12px;letter-spacing:.12em}
#gsa-app .verdict-overview, #gsa-dialog .verdict-overview{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--size-xs);color:var(--muted)}
#gsa-app .verdict-overview>span+span, #gsa-dialog .verdict-overview>span+span{border-left:1px solid var(--line2);padding-left:16px}
#gsa-app .verdict-overview b, #gsa-dialog .verdict-overview b{font-weight:500;color:var(--d-ink, var(--ink));font-variant-numeric:tabular-nums}
#gsa-app .verdict-overview small, #gsa-dialog .verdict-overview small{font-size:var(--size-sm);margin-left:2px;color:var(--dim)}
#gsa-app .verdict-heading>.btn, #gsa-dialog .verdict-heading>.btn{font-size:var(--size-xs);padding:9px 14px}
#gsa-app .verdict-toolbar, #gsa-dialog .verdict-toolbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
#gsa-app .verdict-filters, #gsa-dialog .verdict-filters{display:flex;align-items:center;gap:5px;flex-shrink:0}
#gsa-app .verdict-filter, #gsa-dialog .verdict-filter{border:1px solid transparent;background:transparent;border-radius:6px;padding:7px 9px;display:flex;gap:8px;align-items:center;font-size:var(--size-xs);color:var(--muted);white-space:nowrap}
#gsa-app .verdict-filter span, #gsa-dialog .verdict-filter span{font-size:var(--size-sm);color:var(--dim);font-variant-numeric:tabular-nums}
#gsa-app .verdict-filter:hover, #gsa-dialog .verdict-filter:hover, #gsa-app .verdict-filter.active, #gsa-dialog .verdict-filter.active{color:var(--d-gold, var(--gold));background:var(--soft)}
#gsa-app .verdict-filter.active, #gsa-dialog .verdict-filter.active{border-color:var(--line2)}
#gsa-app .verdict-filter.active span, #gsa-dialog .verdict-filter.active span{color:var(--d-gold, var(--gold))}
#gsa-app .verdict-tools, #gsa-dialog .verdict-tools{display:flex;align-items:center;gap:10px;flex:1;min-width:440px}
#gsa-app .verdict-search, #gsa-dialog .verdict-search{display:flex;gap:8px;align-items:center;min-width:180px;flex:1;background:var(--field);border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:var(--dim)}
#gsa-app .verdict-search svg, #gsa-dialog .verdict-search svg{width:14px;height:14px}
#gsa-app .verdict-search:focus-within, #gsa-dialog .verdict-search:focus-within{border-color:var(--d-gold, var(--gold))}
#gsa-app .verdict-search input, #gsa-dialog .verdict-search input{color:var(--d-ink, var(--ink));background:none;border:0;outline:0;width:100%;min-width:0;font-size:var(--size-xs);height:22px}
#gsa-app .verdict-search input::placeholder, #gsa-dialog .verdict-search input::placeholder{color:var(--dim)}
#gsa-app .verdict-sort select, #gsa-dialog .verdict-sort select{color:var(--muted);border:1px solid var(--line);border-radius:6px;background:var(--field);padding:8px 10px;font-size:var(--size-sm);max-width:160px;height:38px}
#gsa-app .verdict-layout, #gsa-dialog .verdict-layout{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--field)}
#gsa-app .verdict-layout button, #gsa-dialog .verdict-layout button{display:flex;align-items:center;gap:6px;color:var(--muted);border:0;border-radius:4px;background:none;padding:6px 8px;font-size:var(--size-sm);line-height:1.5}
#gsa-app .verdict-layout svg, #gsa-dialog .verdict-layout svg{width:13px;height:13px}
#gsa-app .verdict-layout button.active, #gsa-dialog .verdict-layout button.active{background:var(--raised);color:var(--d-gold, var(--gold))}
#gsa-app .verdict-list-caption, #gsa-dialog .verdict-list-caption{display:flex;gap:15px;justify-content:space-between;align-items:center;margin:13px 0;font-size:var(--size-sm);color:var(--muted)}
#gsa-app .verdict-hint, #gsa-dialog .verdict-hint{font-size:var(--size-sm);color:var(--dim)}
#gsa-app .verdict-entries, #gsa-dialog .verdict-entries{display:grid;gap:14px;align-items:start}
#gsa-app .verdict-entries.is-cards, #gsa-dialog .verdict-entries.is-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
#gsa-app .verdict-entry, #gsa-dialog .verdict-entry{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr)81px;grid-template-areas:'identity score' 'impressions impressions' 'foot foot';align-items:start;gap:11px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:14px;transition:border-color .15s,background .15s}
#gsa-app .verdict-entry:hover, #gsa-dialog .verdict-entry:hover, #gsa-app .verdict-entry:focus-within, #gsa-dialog .verdict-entry:focus-within{border-color:var(--line2);background:var(--raised)}
#gsa-app .verdict-entry.no-feelings, #gsa-dialog .verdict-entry.no-feelings{grid-template-areas:'identity score' 'foot foot'}
#gsa-app .verdict-identity, #gsa-dialog .verdict-identity{grid-area:identity;min-width:0;display:flex;align-items:center;gap:11px;background:transparent;border:0;padding:0;text-align:left;color:inherit;border-radius:4px}
#gsa-app .verdict-identity .poster, #gsa-dialog .verdict-identity .poster{width:53px;height:79px;border-radius:4px;box-shadow:none;object-fit:cover}
#gsa-app .verdict-identity .poster-empty b, #gsa-dialog .verdict-identity .poster-empty b{font-size:22px}
#gsa-app .verdict-identity .poster-empty .moon, #gsa-dialog .verdict-identity .poster-empty .moon{width:19px;height:19px}
#gsa-app .verdict-identity .poster-empty small, #gsa-dialog .verdict-identity .poster-empty small{font-size:4px}
#gsa-app .verdict-identity-copy, #gsa-dialog .verdict-identity-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
#gsa-app .verdict-badges, #gsa-dialog .verdict-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#gsa-app .verdict-state, #gsa-dialog .verdict-state{display:inline-flex;align-items:center;gap:4px;border-radius:3px;padding:1px 5px;border:1px solid var(--line2);color:var(--d-gold, var(--gold));font-size:var(--size-xs);line-height:1.4}
#gsa-app .verdict-state.sealed, #gsa-dialog .verdict-state.sealed{color:var(--d-jade, var(--jade));border-color:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 23.1%, transparent);background:color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 3.9%, transparent)}
#gsa-app .verdict-state.revising, #gsa-dialog .verdict-state.revising{color:var(--rose);border-color:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 33.3%, transparent)}
#gsa-app .verdict-example, #gsa-dialog .verdict-example{font-size:var(--size-xs);color:var(--dim)}
#gsa-app .verdict-title, #gsa-dialog .verdict-title{font:var(--size-xl)/1.2 var(--font-serif);color:var(--d-ink, var(--ink));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#gsa-app .verdict-identity:hover .verdict-title, #gsa-dialog .verdict-identity:hover .verdict-title{color:var(--d-gold, var(--gold))}
#gsa-app .verdict-meta, #gsa-dialog .verdict-meta{font-size:var(--size-sm);line-height:1.4;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gsa-app .verdict-rating-cell, #gsa-dialog .verdict-rating-cell{grid-area:score;text-align:right;align-self:center;min-width:0}
#gsa-app .verdict-tea, #gsa-dialog .verdict-tea{background:none;border:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0;border-radius:4px;color:var(--d-gold, var(--gold));width:100%}
#gsa-app .verdict-tea-tile, #gsa-dialog .verdict-tea-tile{width:27px;height:44px;object-fit:contain;flex-shrink:0}
#gsa-app .verdict-tea-copy, #gsa-dialog .verdict-tea-copy{display:block}
#gsa-app .verdict-whole, #gsa-dialog .verdict-whole{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;line-height:1}
#gsa-app .verdict-whole b, #gsa-dialog .verdict-whole b{font:var(--size-2xl)/1 var(--font-serif);font-variant-numeric:tabular-nums}
#gsa-app .verdict-whole small, #gsa-dialog .verdict-whole small{font-size:var(--size-sm);color:var(--muted)}
#gsa-app .verdict-exact, #gsa-dialog .verdict-exact{font-size:var(--size-xs);font-variant-numeric:tabular-nums;color:var(--d-jade, var(--jade));display:block;margin-top:5px}
#gsa-app .verdict-exact small, #gsa-dialog .verdict-exact small{font-size:var(--size-xs);color:var(--dim)}
#gsa-app .verdict-tier-name, #gsa-dialog .verdict-tier-name{display:block;color:var(--muted);font-size:var(--size-sm);margin-top:5px;line-height:1.4}
#gsa-app .verdict-tea:hover .verdict-whole b, #gsa-dialog .verdict-tea:hover .verdict-whole b{color:var(--d-ink, var(--ink))}
#gsa-app .verdict-progress>span:first-child, #gsa-dialog .verdict-progress>span:first-child{display:block;line-height:1.2;color:var(--muted)}
#gsa-app .verdict-progress b, #gsa-dialog .verdict-progress b{font:var(--size-2xl)/1 var(--font-serif);color:var(--d-gold, var(--gold))}
#gsa-app .verdict-progress small, #gsa-dialog .verdict-progress small{font-size:var(--size-sm);margin-left:3px}
#gsa-app .verdict-progress-label, #gsa-dialog .verdict-progress-label{display:block;font-size:var(--size-sm);color:var(--dim);margin-top:4px}
#gsa-app .verdict-progress-track, #gsa-dialog .verdict-progress-track{display:block;width:65px;height:3px;background:var(--line);border-radius:4px;margin:9px 0 0 auto;overflow:hidden}
#gsa-app .verdict-progress-track i, #gsa-dialog .verdict-progress-track i{display:block;height:100%;background:var(--d-gold, var(--gold));border-radius:4px}
#gsa-app .verdict-impressions, #gsa-dialog .verdict-impressions{grid-area:impressions;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:9px;border-top:1px solid var(--line);min-width:0}
#gsa-app .verdict-feeling, #gsa-dialog .verdict-feeling{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;border-radius:4px;min-width:0;text-align:left;color:var(--d-ink, var(--ink))}
#gsa-app .verdict-feeling>span, #gsa-dialog .verdict-feeling>span{min-width:0;display:block}
#gsa-app .verdict-mini-tile, #gsa-dialog .verdict-mini-tile{width:24px;height:39px;object-fit:contain;flex-shrink:0}
#gsa-app .verdict-feeling-label, #gsa-dialog .verdict-feeling-label{display:block;color:var(--dim);font-size:var(--size-xs);line-height:1.5;white-space:nowrap}
#gsa-app .verdict-feeling-label b, #gsa-dialog .verdict-feeling-label b{font-weight:400;color:var(--muted);margin-left:2px}
#gsa-app .verdict-feeling-level, #gsa-dialog .verdict-feeling-level{display:block;font:var(--size-sm)/1.35 var(--font-serif);color:var(--d-ink, var(--ink));margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gsa-app .verdict-feeling:hover .verdict-feeling-level, #gsa-dialog .verdict-feeling:hover .verdict-feeling-level{color:var(--d-gold, var(--gold))}
#gsa-app .verdict-feeling.empty-feeling, #gsa-dialog .verdict-feeling.empty-feeling{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:5px;color:var(--dim)}
#gsa-app .empty-feeling .verdict-feeling-level, #gsa-dialog .empty-feeling .verdict-feeling-level{color:var(--dim)}
#gsa-app .verdict-entry-foot, #gsa-dialog .verdict-entry-foot{grid-area:foot;display:flex;gap:10px;align-items:center;min-width:0;padding-top:9px;border-top:1px solid var(--line)}
#gsa-app .verdict-date, #gsa-dialog .verdict-date{font-size:var(--size-xs);color:var(--dim);line-height:1.5;flex:1;min-width:0}
#gsa-app .verdict-open, #gsa-dialog .verdict-open{background:none;border:0;padding:3px 0;color:var(--d-gold, var(--gold));font-size:var(--size-sm);display:flex;align-items:center;gap:5px;white-space:nowrap}
#gsa-app .verdict-open svg, #gsa-dialog .verdict-open svg{width:13px;height:13px}
#gsa-app .verdict-open:hover, #gsa-dialog .verdict-open:hover{color:var(--d-ink, var(--ink))}
#gsa-app .verdict-more, #gsa-dialog .verdict-more{position:relative;flex-shrink:0}
#gsa-app .verdict-more>summary, #gsa-dialog .verdict-more>summary{list-style:none;color:var(--dim);padding:3px 5px;line-height:1.2;font-size:var(--size-sm);cursor:pointer;letter-spacing:1px;border:1px solid transparent;border-radius:4px}
#gsa-app .verdict-more>summary::-webkit-details-marker, #gsa-dialog .verdict-more>summary::-webkit-details-marker{display:none}
#gsa-app .verdict-more[open]>summary, #gsa-dialog .verdict-more[open]>summary, #gsa-app .verdict-more>summary:hover, #gsa-dialog .verdict-more>summary:hover{color:var(--d-gold, var(--gold));border-color:var(--line2)}
#gsa-app .verdict-menu, #gsa-dialog .verdict-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:15;width:158px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);box-shadow:0 9px 25px color-mix(in srgb, var(--ink) 26.7%, transparent);padding:6px}
#gsa-app .verdict-menu .quiet, #gsa-dialog .verdict-menu .quiet{display:flex;width:100%;padding:7px 8px;border-radius:3px;justify-content:flex-start;font-size:var(--size-sm);gap:8px}
#gsa-app .verdict-menu .quiet:hover, #gsa-dialog .verdict-menu .quiet:hover{background:var(--soft)}
#gsa-app .verdict-menu .quiet svg, #gsa-dialog .verdict-menu .quiet svg{width:13px;height:13px}
#gsa-app .verdict-column-head, #gsa-dialog .verdict-column-head{display:none}
#gsa-app .verdict-empty, #gsa-dialog .verdict-empty{grid-column:1/-1;text-align:center;padding:45px 20px;border:1px dashed var(--line2);border-radius:9px;background:var(--panel)}
#gsa-app .verdict-empty>svg, #gsa-dialog .verdict-empty>svg{margin:0 auto 15px;color:var(--d-gold, var(--gold));width:26px;height:26px}
#gsa-app .verdict-empty h2, #gsa-dialog .verdict-empty h2{font-size:var(--size-xl)}
#gsa-app .verdict-empty p, #gsa-dialog .verdict-empty p{font-size:var(--size-xs);color:var(--muted);margin:8px 0 19px}
#gsa-app .verdict-entries.is-list, #gsa-dialog .verdict-entries.is-list{grid-template-columns:1fr;gap:8px}
#gsa-app .is-list .verdict-column-head, #gsa-dialog .is-list .verdict-column-head, #gsa-app .is-list .verdict-entry, #gsa-dialog .is-list .verdict-entry{grid-template-columns:minmax(230px,1fr)110px minmax(270px,.85fr)165px;gap:18px}
#gsa-app .is-list .verdict-column-head, #gsa-dialog .is-list .verdict-column-head{display:grid;color:var(--dim);font-size:var(--size-xs);letter-spacing:.1em;padding:0 15px 3px;align-items:center}
#gsa-app .is-list .verdict-entry, #gsa-dialog .is-list .verdict-entry{grid-template-areas:'identity score impressions foot';padding:10px 14px;align-items:center}
#gsa-app .is-list .verdict-identity .poster, #gsa-dialog .is-list .verdict-identity .poster{width:40px;height:60px}
#gsa-app .is-list .verdict-title, #gsa-dialog .is-list .verdict-title{font-size:var(--size-xl);-webkit-line-clamp:1}
#gsa-app .is-list .verdict-identity-copy, #gsa-dialog .is-list .verdict-identity-copy{gap:4px}
#gsa-app .is-list .verdict-badges, #gsa-dialog .is-list .verdict-badges{gap:7px}
#gsa-app .is-list .verdict-state, #gsa-dialog .is-list .verdict-state{font-size:var(--size-xs)}
#gsa-app .is-list .verdict-meta, #gsa-dialog .is-list .verdict-meta{font-size:var(--size-sm)}
#gsa-app .is-list .verdict-rating-cell, #gsa-dialog .is-list .verdict-rating-cell{text-align:left}
#gsa-app .is-list .verdict-tea, #gsa-dialog .is-list .verdict-tea{justify-content:flex-start}
#gsa-app .is-list .verdict-tea-copy, #gsa-dialog .is-list .verdict-tea-copy{text-align:left}
#gsa-app .is-list .verdict-whole, #gsa-dialog .is-list .verdict-whole{justify-content:flex-start}
#gsa-app .is-list .verdict-whole b, #gsa-dialog .is-list .verdict-whole b{font-size:var(--size-2xl)}
#gsa-app .is-list .verdict-exact, #gsa-dialog .is-list .verdict-exact{font-size:var(--size-sm);margin-top:2px}
#gsa-app .is-list .verdict-tier-name, #gsa-dialog .is-list .verdict-tier-name{font-size:var(--size-xs);margin-top:2px;padding-left:32px}
#gsa-app .is-list .verdict-tea-tile, #gsa-dialog .is-list .verdict-tea-tile{width:25px;height:40px}
#gsa-app .is-list .verdict-impressions, #gsa-dialog .is-list .verdict-impressions{border:0;padding:0;gap:12px;align-items:center}
#gsa-app .is-list .verdict-progress-track, #gsa-dialog .is-list .verdict-progress-track{margin-left:0;margin-top:5px}
#gsa-app .is-list .verdict-progress-label, #gsa-dialog .is-list .verdict-progress-label{margin-top:2px}
#gsa-app .is-list .verdict-entry-foot, #gsa-dialog .is-list .verdict-entry-foot{display:grid;grid-template-columns:1fr auto;border:0;padding:0;gap:5px 8px}
#gsa-app .is-list .verdict-date, #gsa-dialog .is-list .verdict-date{grid-column:1/-1;font-size:var(--size-sm)}
#gsa-app .is-list .verdict-open, #gsa-dialog .is-list .verdict-open{justify-self:start;font-size:var(--size-sm)}
#gsa-app .is-list .verdict-more, #gsa-dialog .is-list .verdict-more{justify-self:end}
#gsa-app .verdict-rating-detail, #gsa-dialog .verdict-rating-detail{display:flex;gap:26px;align-items:flex-start}
#gsa-app .verdict-detail-tile, #gsa-dialog .verdict-detail-tile{width:120px;height:192px;object-fit:contain;flex-shrink:0}
#gsa-app .verdict-detail-intro, #gsa-dialog .verdict-detail-intro{color:var(--muted);font-size:var(--size-xs);line-height:1.6;margin-bottom:13px}
#gsa-app .verdict-rating-detail h3, #gsa-dialog .verdict-rating-detail h3{font-size:var(--size-2xl);color:var(--d-gold, var(--gold));line-height:1.2}
#gsa-app .verdict-detail-subtitle, #gsa-dialog .verdict-detail-subtitle{font:var(--size-xl)/1.35 var(--font-serif);margin:9px 0 12px}
#gsa-app .verdict-detail-meaning, #gsa-dialog .verdict-detail-meaning{font-size:var(--size-sm);line-height:1.85;color:var(--muted)}
#gsa-app .verdict-detail-context, #gsa-dialog .verdict-detail-context{font-size:var(--size-sm);color:var(--dim);margin-top:20px;padding-top:13px;border-top:1px solid var(--line)}
@media(min-width:1800px){
#gsa-app .verdict-entries.is-cards, #gsa-dialog .verdict-entries.is-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1380px){
#gsa-app .verdict-entries.is-cards, #gsa-dialog .verdict-entries.is-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#gsa-app .verdict-tools, #gsa-dialog .verdict-tools{min-width:440px}
#gsa-app .verdict-filters, #gsa-dialog .verdict-filters{flex:1}
#gsa-app .is-list .verdict-column-head, #gsa-dialog .is-list .verdict-column-head, #gsa-app .is-list .verdict-entry, #gsa-dialog .is-list .verdict-entry{grid-template-columns:minmax(180px,1fr)90px minmax(245px,1fr)125px;gap:12px}
#gsa-app .is-list .verdict-impressions, #gsa-dialog .is-list .verdict-impressions{gap:6px}
#gsa-app .is-list .verdict-feeling, #gsa-dialog .is-list .verdict-feeling{gap:4px}
#gsa-app .is-list .verdict-mini-tile, #gsa-dialog .is-list .verdict-mini-tile{width:21px;height:34px}
#gsa-app .is-list .verdict-feeling-label, #gsa-dialog .is-list .verdict-feeling-label{font-size:var(--size-xs)}
#gsa-app .is-list .verdict-feeling-level, #gsa-dialog .is-list .verdict-feeling-level{font-size:var(--size-sm)}
}
@media(max-width:1120px){
#gsa-app .verdict-toolbar, #gsa-dialog .verdict-toolbar{gap:10px}
#gsa-app .verdict-filters, #gsa-dialog .verdict-filters{flex-basis:100%}
#gsa-app .verdict-tools, #gsa-dialog .verdict-tools{flex-basis:100%;min-width:0}
#gsa-app .is-list .verdict-column-head, #gsa-dialog .is-list .verdict-column-head{display:none}
#gsa-app .is-list .verdict-entry, #gsa-dialog .is-list .verdict-entry{grid-template-columns:minmax(180px,1fr)85px 155px;grid-template-areas:'identity score foot' 'impressions impressions impressions';gap:8px 12px}
#gsa-app .is-list .verdict-entry.no-feelings, #gsa-dialog .is-list .verdict-entry.no-feelings{grid-template-areas:'identity score foot'}
#gsa-app .is-list .verdict-impressions, #gsa-dialog .is-list .verdict-impressions{padding-top:8px;border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#gsa-app .is-list .verdict-mini-tile, #gsa-dialog .is-list .verdict-mini-tile{width:21px;height:33px}
#gsa-app .is-list .verdict-feeling-label, #gsa-dialog .is-list .verdict-feeling-label{font-size:var(--size-sm)}
#gsa-app .is-list .verdict-feeling-level, #gsa-dialog .is-list .verdict-feeling-level{font-size:var(--size-sm)}
#gsa-app .is-list .verdict-date, #gsa-dialog .is-list .verdict-date{font-size:var(--size-xs)}
}
@media(max-width:850px){
#gsa-app .verdict-entries.is-cards, #gsa-dialog .verdict-entries.is-cards{grid-template-columns:1fr}
#gsa-app .verdict-heading h1, #gsa-dialog .verdict-heading h1{font-size:var(--size-2xl)}
#gsa-app .verdict-heading, #gsa-dialog .verdict-heading{gap:14px;margin-bottom:18px}
#gsa-app .verdict-heading .eyebrow, #gsa-dialog .verdict-heading .eyebrow{font-size:var(--size-xs)}
#gsa-app .verdict-heading>.btn, #gsa-dialog .verdict-heading>.btn{font-size:var(--size-sm)}
#gsa-app .verdict-overview, #gsa-dialog .verdict-overview{gap:10px;font-size:var(--size-sm)}
#gsa-app .verdict-overview>span+span, #gsa-dialog .verdict-overview>span+span{padding-left:10px}
#gsa-app .verdict-tools, #gsa-dialog .verdict-tools{gap:7px}
#gsa-app .verdict-layout button span, #gsa-dialog .verdict-layout button span{display:none}
#gsa-app .verdict-layout button, #gsa-dialog .verdict-layout button{padding:8px}
#gsa-app .verdict-sort select, #gsa-dialog .verdict-sort select{max-width:145px}
#gsa-app .verdict-filter, #gsa-dialog .verdict-filter{font-size:var(--size-sm);padding:6px 9px}
#gsa-app .verdict-title, #gsa-dialog .verdict-title{font-size:var(--size-xl)}
#gsa-app .is-list .verdict-title, #gsa-dialog .is-list .verdict-title{font-size:var(--size-xl)}
#gsa-app .verdict-rating-detail, #gsa-dialog .verdict-rating-detail{gap:18px}
#gsa-app .verdict-detail-tile, #gsa-dialog .verdict-detail-tile{width:90px;height:144px}
}
@media(max-width:650px){
#gsa-app .verdict-heading, #gsa-dialog .verdict-heading{align-items:flex-start}
#gsa-app .verdict-heading h1, #gsa-dialog .verdict-heading h1{font-size:var(--size-2xl)}
#gsa-app .verdict-heading h1 [lang], #gsa-dialog .verdict-heading h1 [lang]{font-size:var(--size-sm);margin-left:7px}
#gsa-app .verdict-heading .eyebrow, #gsa-dialog .verdict-heading .eyebrow{max-width:225px;line-height:1.7;font-size:var(--size-2xs)}
#gsa-app .verdict-heading>.btn, #gsa-dialog .verdict-heading>.btn{font-size:var(--size-sm);padding:7px 10px;margin-top:24px}
#gsa-app .verdict-overview, #gsa-dialog .verdict-overview{font-size:var(--size-sm);gap:9px}
#gsa-app .verdict-overview>span+span, #gsa-dialog .verdict-overview>span+span{padding-left:9px}
#gsa-app .verdict-filters, #gsa-dialog .verdict-filters{justify-content:space-between;gap:2px}
#gsa-app .verdict-filter, #gsa-dialog .verdict-filter{gap:6px;padding:7px 8px;font-size:var(--size-sm)}
#gsa-app .verdict-tools, #gsa-dialog .verdict-tools{flex-wrap:wrap;gap:8px}
#gsa-app .verdict-search, #gsa-dialog .verdict-search{flex-basis:100%;padding:7px 10px}
#gsa-app .verdict-sort, #gsa-dialog .verdict-sort{flex:1}
#gsa-app .verdict-sort select, #gsa-dialog .verdict-sort select{max-width:none;width:100%;height:35px}
#gsa-app .verdict-layout button span, #gsa-dialog .verdict-layout button span{display:inline}
#gsa-app .verdict-layout button, #gsa-dialog .verdict-layout button{padding:6px 11px;font-size:var(--size-sm)}
#gsa-app .verdict-list-caption, #gsa-dialog .verdict-list-caption{font-size:var(--size-sm);align-items:flex-start;gap:10px}
#gsa-app .verdict-hint, #gsa-dialog .verdict-hint{font-size:var(--size-xs);text-align:right;max-width:155px}
#gsa-app .verdict-entry, #gsa-dialog .verdict-entry{padding:14px;gap:11px 10px;grid-template-columns:minmax(0,1fr)80px}
#gsa-app .verdict-title, #gsa-dialog .verdict-title{font-size:var(--size-xl)}
#gsa-app .verdict-identity .poster, #gsa-dialog .verdict-identity .poster{width:48px;height:72px}
#gsa-app .verdict-identity, #gsa-dialog .verdict-identity{gap:10px}
#gsa-app .verdict-mini-tile, #gsa-dialog .verdict-mini-tile{width:25px;height:40px}
#gsa-app .verdict-feeling-label, #gsa-dialog .verdict-feeling-label{font-size:var(--size-xs)}
#gsa-app .verdict-feeling-level, #gsa-dialog .verdict-feeling-level{font-size:var(--size-md)}
#gsa-app .verdict-impressions, #gsa-dialog .verdict-impressions{gap:8px}
#gsa-app .verdict-date, #gsa-dialog .verdict-date{font-size:var(--size-xs)}
#gsa-app .verdict-open, #gsa-dialog .verdict-open{font-size:var(--size-sm)}
#gsa-app .is-list .verdict-entry, #gsa-dialog .is-list .verdict-entry{grid-template-columns:minmax(0,1fr)80px;grid-template-areas:'identity score' 'impressions impressions' 'foot foot';padding:11px 13px;gap:8px 10px}
#gsa-app .is-list .verdict-entry.no-feelings, #gsa-dialog .is-list .verdict-entry.no-feelings{grid-template-areas:'identity score' 'foot foot'}
#gsa-app .is-list .verdict-identity .poster, #gsa-dialog .is-list .verdict-identity .poster{width:34px;height:51px}
#gsa-app .is-list .verdict-title, #gsa-dialog .is-list .verdict-title{font-size:var(--size-xl);-webkit-line-clamp:2}
#gsa-app .is-list .verdict-entry-foot, #gsa-dialog .is-list .verdict-entry-foot{display:flex;padding-top:7px;border-top:1px solid var(--line)}
#gsa-app .is-list .verdict-date, #gsa-dialog .is-list .verdict-date{flex:1}
#gsa-app .is-list .verdict-rating-cell, #gsa-dialog .is-list .verdict-rating-cell{text-align:right}
#gsa-app .is-list .verdict-tea, #gsa-dialog .is-list .verdict-tea{justify-content:flex-end}
#gsa-app .is-list .verdict-tier-name, #gsa-dialog .is-list .verdict-tier-name{padding-left:0}
#gsa-app .is-list .verdict-progress-track, #gsa-dialog .is-list .verdict-progress-track{margin-left:auto}
#gsa-app .is-list .verdict-mini-tile, #gsa-dialog .is-list .verdict-mini-tile{width:20px;height:32px}
#gsa-app .is-list .verdict-feeling-label, #gsa-dialog .is-list .verdict-feeling-label{font-size:var(--size-xs)}
#gsa-app .is-list .verdict-feeling-level, #gsa-dialog .is-list .verdict-feeling-level{font-size:var(--size-sm)}
#gsa-app .is-list .verdict-impressions, #gsa-dialog .is-list .verdict-impressions{gap:6px}
#gsa-app .verdict-rating-detail, #gsa-dialog .verdict-rating-detail{display:block}
#gsa-app .verdict-detail-tile, #gsa-dialog .verdict-detail-tile{float:left;width:70px;height:112px;margin:0 17px 8px 0}
#gsa-app .verdict-rating-detail h3, #gsa-dialog .verdict-rating-detail h3{font-size:var(--size-xl)}
#gsa-app .verdict-detail-subtitle, #gsa-dialog .verdict-detail-subtitle{font-size:var(--size-xl)}
#gsa-app .verdict-detail-meaning, #gsa-dialog .verdict-detail-meaning{clear:both;font-size:var(--size-sm);padding-top:10px}
#gsa-app .verdict-detail-intro, #gsa-dialog .verdict-detail-intro{font-size:var(--size-sm)}
#gsa-app .verdict-more>summary, #gsa-dialog .verdict-more>summary{padding:5px 6px}
}
@media(max-width:370px){
#gsa-app .verdict-heading h1, #gsa-dialog .verdict-heading h1{font-size:var(--size-2xl)}
#gsa-app .verdict-heading h1 [lang], #gsa-dialog .verdict-heading h1 [lang]{display:none}
#gsa-app .verdict-heading .eyebrow, #gsa-dialog .verdict-heading .eyebrow{font-size:var(--size-2xs)}
#gsa-app .verdict-filter, #gsa-dialog .verdict-filter{padding:6px;font-size:var(--size-sm);gap:5px}
#gsa-app .verdict-entry, #gsa-dialog .verdict-entry{padding:12px;grid-template-columns:minmax(0,1fr)70px;gap:10px 8px}
#gsa-app .verdict-title, #gsa-dialog .verdict-title{font-size:var(--size-lg)}
#gsa-app .verdict-identity .poster, #gsa-dialog .verdict-identity .poster{width:40px;height:60px}
#gsa-app .verdict-identity, #gsa-dialog .verdict-identity{gap:8px}
#gsa-app .verdict-tea-tile, #gsa-dialog .verdict-tea-tile{width:23px;height:37px}
#gsa-app .verdict-whole b, #gsa-dialog .verdict-whole b{font-size:var(--size-2xl)}
#gsa-app .verdict-mini-tile, #gsa-dialog .verdict-mini-tile{width:19px;height:31px}
#gsa-app .verdict-feeling, #gsa-dialog .verdict-feeling{gap:4px}
#gsa-app .verdict-feeling-label, #gsa-dialog .verdict-feeling-label{font-size:var(--size-xs)}
#gsa-app .verdict-feeling-level, #gsa-dialog .verdict-feeling-level{font-size:var(--size-sm)}
#gsa-app .verdict-impressions, #gsa-dialog .verdict-impressions{gap:4px}
#gsa-app .verdict-overview, #gsa-dialog .verdict-overview{font-size:var(--size-sm)}
}
@media(prefers-reduced-motion:reduce){
#gsa-app .verdict-entry, #gsa-dialog .verdict-entry{transition:none}
}
@media print{
#gsa-app .verdict-heading>.btn, #gsa-dialog .verdict-heading>.btn, #gsa-app .verdict-toolbar, #gsa-dialog .verdict-toolbar, #gsa-app .verdict-list-caption, #gsa-dialog .verdict-list-caption, #gsa-app .verdict-more, #gsa-dialog .verdict-more, #gsa-app .verdict-open, #gsa-dialog .verdict-open{display:none!important}
#gsa-app .verdict-heading, #gsa-dialog .verdict-heading{margin-bottom:18px}
#gsa-app .verdict-heading h1, #gsa-dialog .verdict-heading h1{font-size:28px}
#gsa-app .verdict-entries.is-cards, #gsa-dialog .verdict-entries.is-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#gsa-app .verdict-entry, #gsa-dialog .verdict-entry{break-inside:avoid;border-color:#ccc;background:#fff}
#gsa-app .verdict-identity, #gsa-dialog .verdict-identity, #gsa-app .verdict-tea, #gsa-dialog .verdict-tea, #gsa-app .verdict-feeling, #gsa-dialog .verdict-feeling{color:inherit;appearance:none}
#gsa-app .verdict-title, #gsa-dialog .verdict-title{display:block;overflow:visible}
#gsa-app .verdict-menu, #gsa-dialog .verdict-menu{display:none}
#gsa-app .verdict-column-head, #gsa-dialog .verdict-column-head{display:none!important}
#gsa-app .verdict-entries.is-list .verdict-entry, #gsa-dialog .verdict-entries.is-list .verdict-entry{grid-template-columns:minmax(200px,1fr)90px 260px;grid-template-areas:'identity score impressions' 'foot foot foot'}
#gsa-app .verdict-entries.is-list .verdict-entry-foot, #gsa-dialog .verdict-entries.is-list .verdict-entry-foot{display:block}
#gsa-app .verdict-entries.is-list .verdict-impressions, #gsa-dialog .verdict-entries.is-list .verdict-impressions{border:0;padding:0;grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Drop 72c: one toolbar row - the design's state pills, with watching status and BL
   as two slim dropdowns beside the sort. */
#gsa-app .verdict-search, #gsa-dialog .verdict-search { flex: 1 1 120px; min-width: 120px; }
#gsa-app .verdict-tools, #gsa-dialog .verdict-tools { flex-wrap: wrap; min-width: 0; }
@media (max-width: 1700px) { #gsa-app .verdict-layout button span, #gsa-dialog .verdict-layout button span { display: none; } }
/* Drop 73: Upcoming Shows - the horizon gallery inside News & Content. */
.sv-upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.sv-upcard { display: flex; gap: 14px; align-items: stretch; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; min-width: 0; }
.sv-upposter { flex: 0 0 96px; width: 96px; height: 144px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 70%, var(--ink));
  color: var(--mist); font-family: var(--font-serif); font-size: var(--size-xl); text-decoration: none; }
.sv-upposter img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-upbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sv-upbody .sv-card-title { text-align: left; }
.sv-upthumbs { display: flex; gap: 7px; flex-wrap: wrap; }
.sv-upthumb { position: relative; display: inline-flex; }
.sv-upthumb img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.sv-upthumb .sv-upthumb-remove { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; line-height: 1;
  font-size: var(--size-xs); padding: 0; border-radius: 50%; }
.sv-upbody .sv-card-foot { margin-top: auto; }
@media (max-width: 560px) { .sv-upcoming { grid-template-columns: 1fr; } }
/* Drop 73c: the dossier grows - native title, cast, pilot/trailer, and notes over time. */
.sv-upnative { font-size: var(--size-sm); letter-spacing: 0.06em; }
.sv-upcast { row-gap: 5px; }
.sv-link-button.is-named { color: var(--gold); }
.sv-uplog { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; display: grid; gap: 6px; }
.sv-uplog-head { font-size: var(--size-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist); }
.sv-uplog-entry { display: flex; gap: 9px; align-items: baseline; }
.sv-uplog-date { flex: 0 0 auto; background: none; border: 0; padding: 0; color: var(--gold); font-size: var(--size-xs);
  font-variant-numeric: tabular-nums; cursor: pointer; }
.sv-uplog-text { flex: 1; min-width: 0; color: var(--blossom); font-size: var(--size-sm); line-height: 1.55; white-space: pre-wrap; }
.sv-uplog-entry .sv-icon { flex: 0 0 auto; align-self: center; }
/* Drop 73d: the dossier's reading room - a full record dialog; cards open it, Edit lives inside. */
.sv-updetail { max-width: 720px; }
.sv-updetail-body { display: grid; gap: 10px; }
.sv-updetail .sv-upnative { font-size: var(--size-md); }
.sv-updetail-prose, .sv-updetail-row { color: var(--blossom); font-size: var(--size-sm); line-height: 1.65; white-space: pre-wrap; }
.sv-uprich a:not(.sv-link-button) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.sv-updetail-pictures img { width: 92px; height: 92px; }
.sv-updetail .sv-uplog { max-height: 300px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
/* ==========================================================
   Drop 74: the Precinct of Letters' own styles, ported - scoped to
   the precinct and its dialog, its base colours given the palace's,
   fonts on the palace floor. */
#plt-app, #plt-modal{color-scheme:dark;--plt-bg:transparent;--plt-nav:var(--surface);--plt-panel:var(--surface);--plt-raised:var(--surface-2);--plt-field:color-mix(in srgb, var(--surface) 58%, var(--ink));--plt-line:var(--border);--plt-ink:var(--blossom);--plt-muted:var(--mist);--plt-paper:var(--blossom);--plt-jade:var(--accent-jade);--plt-soft:color-mix(in srgb, var(--gold) 9%, transparent);--plt-danger:var(--accent-lacquer);--plt-shadow:var(--shadow-mid);font:var(--size-sm)/1.6 var(--font-sans)}
#plt-app .sidebar, #plt-app .precinct-masthead, #plt-app .page-head > .page-hero, #plt-app .footer{display:none !important}
#plt-app .shell{display:block;min-height:0}
#plt-app .main{padding:0}
#plt-app *, #plt-modal *{box-sizing:border-box;}
#plt-app, #plt-modal{margin:0;background:var(--plt-bg);color:var(--plt-ink);font:var(--size-sm)/1.65 var(--font-sans)}
#plt-app button, #plt-modal button, #plt-app input, #plt-modal input, #plt-app select, #plt-modal select, #plt-app textarea, #plt-modal textarea{font:inherit}
#plt-app button, #plt-modal button, #plt-app a, #plt-modal a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#plt-app button, #plt-modal button{cursor:pointer}
#plt-app button:disabled, #plt-modal button:disabled{opacity:.45;cursor:wait}
#plt-app button:focus-visible, #plt-modal button:focus-visible, #plt-app a:focus-visible, #plt-modal a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#plt-app input:focus, #plt-modal input:focus, #plt-app select:focus, #plt-modal select:focus, #plt-app textarea:focus, #plt-modal textarea:focus{outline:2px solid color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 19.6%, transparent);outline-offset:0;border-color:var(--plt-jade)!important}
#plt-app button, #plt-modal button, #plt-app a, #plt-modal a{transition:background .15s,color .15s}
#plt-app a, #plt-modal a{color:var(--plt-jade);text-decoration:none}
#plt-app a:hover, #plt-modal a:hover{text-decoration:underline}
#plt-app h1, #plt-modal h1, #plt-app h2, #plt-modal h2, #plt-app h3, #plt-modal h3, #plt-app h4, #plt-modal h4, #plt-app p, #plt-modal p{margin:0}
#plt-app h1, #plt-modal h1, #plt-app h2, #plt-modal h2, #plt-app .serif, #plt-modal .serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.035em}
#plt-app h1, #plt-modal h1{font-size:var(--size-3xl);line-height:1.16}
#plt-app h2, #plt-modal h2{font-size:var(--size-xl);line-height:1.3}
#plt-app h3, #plt-modal h3{font-size:var(--size-sm);line-height:1.5}
#plt-app p+p, #plt-modal p+p{margin-top:9px}
#plt-app small, #plt-modal small{font-size:var(--size-sm)}
#plt-app .muted, #plt-modal .muted{color:var(--plt-muted)}
#plt-app .eyebrow, #plt-modal .eyebrow{font-size:var(--size-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
#plt-app .shell, #plt-modal .shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}
#plt-app .sidebar, #plt-modal .sidebar{position:fixed;inset:0 auto 0 0;width:230px;background:var(--plt-nav);color:var(--blossom);padding:27px 16px 18px;display:flex;flex-direction:column;overflow:auto;z-index:40;border-right:1px solid color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 7.1%, transparent)}
#plt-app .brand, #plt-modal .brand{padding:0 9px 23px;display:flex;gap:12px;align-items:center}
#plt-app .brand-mark, #plt-modal .brand-mark{width:36px;height:46px;display:grid;place-items:center;color:var(--gold);border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 40%, transparent);border-radius:16px 16px 3px 3px;font-family:var(--font-serif);font-size:var(--size-xl);flex-shrink:0}
#plt-app .brand strong, #plt-modal .brand strong{font-family:var(--font-serif);font-weight:400;line-height:1.2;font-size:var(--size-lg);display:block}
#plt-app .brand small, #plt-modal .brand small{font-size:var(--size-2xs);letter-spacing:.2em;color:var(--mist);display:block;margin-top:5px}
#plt-app .nav-group, #plt-modal .nav-group{font-size:var(--size-xs);color:var(--mist);letter-spacing:.15em;margin:17px 12px 7px}
#plt-app .nav, #plt-modal .nav{width:100%;padding:10px 11px;border:0;border-radius:6px;background:none;color:var(--mist);font-size:var(--size-sm);display:flex;gap:10px;align-items:center;text-align:left;margin:2px 0}
#plt-app .nav.active, #plt-modal .nav.active{background:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 9.8%, transparent);color:var(--blossom)}
#plt-app .nav.active:before, #plt-modal .nav.active:before{content:'';width:3px;height:18px;background:color-mix(in srgb, var(--gold) 50%, var(--blossom));position:absolute;left:0}
#plt-app .nav:hover, #plt-modal .nav:hover{background:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 4.3%, transparent);color:var(--blossom)}
#plt-app .nav .icon, #plt-modal .nav .icon{font-size:var(--size-md);width:19px;text-align:center}
#plt-app .nav small, #plt-modal .nav small{margin-left:auto;font-size:var(--size-xs);color:var(--blossom);background:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 6.3%, transparent);padding:0 5px;border-radius:3px}
#plt-app .sidebar-bottom, #plt-modal .sidebar-bottom{margin-top:auto;padding:26px 8px 0}
#plt-app .reader, #plt-modal .reader{display:flex;gap:11px;align-items:center;border-top:1px solid color-mix(in srgb, var(--mist) 18.8%, transparent);padding-top:17px}
#plt-app .reader b, #plt-modal .reader b{font-size:var(--size-sm);font-weight:500}
#plt-app .reader small, #plt-modal .reader small{display:block;color:var(--mist);font-size:var(--size-xs)}
#plt-app .avatar, #plt-modal .avatar{display:grid;place-items:center;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 18.8%, transparent);width:33px;height:33px;background:color-mix(in srgb, var(--blossom) 28%, var(--surface));color:var(--blossom);border-radius:50%;overflow:hidden;flex-shrink:0}
#plt-app .avatar img, #plt-modal .avatar img{width:100%;height:100%;object-fit:cover}
#plt-app .workspace, #plt-modal .workspace{grid-column:2;min-width:0}
#plt-app .topbar, #plt-modal .topbar{height:70px;padding:0 34px;border-bottom:1px solid var(--plt-line);display:flex;align-items:center;gap:22px;position:relative}
#plt-app .crumb, #plt-modal .crumb{font-size:var(--size-sm);color:var(--plt-muted);white-space:nowrap}
#plt-app .crumb b, #plt-modal .crumb b{color:var(--plt-ink);font-weight:400}
#plt-app .search, #plt-modal .search{margin-left:auto;display:flex;gap:9px;align-items:center;background:var(--plt-field);border:1px solid var(--plt-line);border-radius:6px;padding:7px 12px;color:var(--plt-muted);width:265px}
#plt-app .search input, #plt-modal .search input{background:none;border:0;outline:none;font-size:var(--size-sm);width:100%;color:var(--plt-ink)}
#plt-app .top-note, #plt-modal .top-note{font-size:var(--size-xs);color:var(--plt-muted);white-space:nowrap}
#plt-app .main, #plt-modal .main{padding:31px 34px;max-width:1610px;margin:0 auto}
#plt-app .page-head, #plt-modal .page-head{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:25px}
#plt-app .page-head p:not(.eyebrow), #plt-modal .page-head p:not(.eyebrow){font-size:var(--size-xs);color:var(--plt-muted);margin-top:10px;max-width:760px}
#plt-app .actions, #plt-modal .actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
#plt-app .btn, #plt-modal .btn, #plt-app .outline, #plt-modal .outline, #plt-app .soft, #plt-modal .soft, #plt-app .quiet, #plt-modal .quiet, #plt-app .icon-btn, #plt-modal .icon-btn{font-size:var(--size-sm);font-weight:500;padding:9px 14px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;white-space:nowrap;line-height:1.5}
#plt-app .btn, #plt-modal .btn{background:var(--gold);border-color:var(--gold);color:color-mix(in srgb, var(--blossom) 6%, var(--surface))}
#plt-app .btn:hover, #plt-modal .btn:hover{filter:brightness(1.09)}
#plt-app .outline, #plt-modal .outline{background:transparent;border-color:var(--plt-line);color:var(--plt-muted)}
#plt-app .outline:hover, #plt-modal .outline:hover{background:var(--plt-raised);color:var(--plt-ink)}
#plt-app .soft, #plt-modal .soft{background:var(--plt-soft);color:var(--plt-jade);border-color:var(--plt-line)}
#plt-app .quiet, #plt-modal .quiet{background:none;color:var(--plt-jade);border:0;padding:3px 0;font-size:var(--size-sm)}
#plt-app .quiet:hover, #plt-modal .quiet:hover{color:var(--gold)}
#plt-app .icon-btn, #plt-modal .icon-btn{font-size:var(--size-lg);background:none;color:var(--plt-muted);padding:3px 8px}
#plt-app .small, #plt-modal .small{font-size:var(--size-sm);padding:7px 10px}
#plt-app .demo, #plt-modal .demo{background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 3.9%, transparent);border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 14.9%, transparent);color:var(--plt-muted);font-size:var(--size-sm);padding:8px 13px;border-radius:5px;display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:23px}
#plt-app .demo .quiet, #plt-modal .demo .quiet{color:var(--gold);font-size:var(--size-xs)}
#plt-app .hero-grid, #plt-modal .hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:21px;margin-bottom:23px}
#plt-app .hero, #plt-modal .hero{background:linear-gradient(100deg,color-mix(in srgb, var(--blossom) 10%, var(--surface)),color-mix(in srgb, var(--blossom) 6%, var(--surface)));position:relative;overflow:hidden;min-height:280px;border:1px solid color-mix(in srgb, var(--mist) 26.3%, transparent);border-radius:12px;padding:31px;color:var(--blossom);isolation:isolate}
#plt-app .hero .eyebrow, #plt-modal .hero .eyebrow{color:var(--gold)}
#plt-app .hero h2, #plt-modal .hero h2{font-size:var(--size-2xl);max-width:63%;line-height:1.12;margin:17px 0 13px}
#plt-app .hero p, #plt-modal .hero p{font-size:var(--size-sm);color:var(--mist);max-width:58%}
#plt-app .hero .actions, #plt-modal .hero .actions{margin-top:23px}
#plt-app .hero-art, #plt-modal .hero-art{position:absolute;right:-8px;bottom:0;height:96%;width:41%;z-index:-1;opacity:.9}
#plt-app .hero-upload, #plt-modal .hero-upload{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:-1}
#plt-app .reading-card, #plt-modal .reading-card{border:1px solid var(--plt-line);background:var(--plt-panel);border-radius:12px;padding:24px;display:flex;gap:20px;align-items:center;position:relative;min-width:0}
#plt-app .reading-card .book-cover, #plt-modal .reading-card .book-cover{width:106px;min-width:106px;height:158px;box-shadow:7px 9px 12px color-mix(in srgb, var(--ink) 20%, transparent)}
#plt-app .reading-copy, #plt-modal .reading-copy{min-width:0;flex:1}
#plt-app .reading-copy h2, #plt-modal .reading-copy h2{font-size:var(--size-xl);margin:6px 0}
#plt-app .reading-copy p, #plt-modal .reading-copy p{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .reading-copy .actions, #plt-modal .reading-copy .actions{margin-top:15px}
#plt-app .stats, #plt-modal .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:23px}
#plt-app .stat, #plt-modal .stat{background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:8px;padding:18px 20px;box-shadow:var(--plt-shadow)}
#plt-app .stat-label, #plt-modal .stat-label{display:flex;justify-content:space-between;color:var(--plt-muted);font-size:var(--size-xs);letter-spacing:.09em;text-transform:uppercase}
#plt-app .stat-label i, #plt-modal .stat-label i{font-style:normal;color:var(--gold);font-size:var(--size-xs)}
#plt-app .stat b, #plt-modal .stat b{font-size:var(--size-2xl);font-family:var(--font-serif);font-weight:400;line-height:1.2;display:block;margin:8px 0}
#plt-app .stat small, #plt-modal .stat small{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .grid2, #plt-modal .grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:21px;margin-bottom:23px}
#plt-app .grid2.equal, #plt-modal .grid2.equal{grid-template-columns:1fr 1fr}
#plt-app .grid3, #plt-modal .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:21px;margin-bottom:23px}
#plt-app .panel, #plt-modal .panel{background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:10px;overflow:hidden;box-shadow:var(--plt-shadow);min-width:0}
#plt-app .panel-head, #plt-modal .panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 22px 17px}
#plt-app .panel-head h2, #plt-modal .panel-head h2{font-size:var(--size-xl)}
#plt-app .panel-head .eyebrow, #plt-modal .panel-head .eyebrow{font-size:var(--size-xs);margin:0 0 6px}
#plt-app .panel-body, #plt-modal .panel-body{padding:0 22px 22px}
#plt-app .note, #plt-modal .note{color:var(--plt-muted);font-size:var(--size-sm);line-height:1.8;margin-bottom:18px}
#plt-app .toolbar, #plt-modal .toolbar{display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
#plt-app .tabs, #plt-modal .tabs{display:flex;gap:5px;flex-wrap:wrap}
#plt-app .tab, #plt-modal .tab{border:1px solid transparent;background:transparent;color:var(--plt-muted);padding:7px 12px;border-radius:5px;font-size:var(--size-sm);white-space:nowrap}
#plt-app .tab.active, #plt-modal .tab.active{background:var(--plt-soft);border-color:var(--plt-line);color:var(--plt-jade)}
#plt-app .tab:hover, #plt-modal .tab:hover{color:var(--plt-ink);background:var(--plt-raised)}
#plt-app .progress, #plt-modal .progress{height:4px;border-radius:4px;background:var(--plt-line);overflow:hidden;margin:13px 0 6px}
#plt-app .progress i, #plt-modal .progress i{display:block;height:100%;background:var(--plt-jade);border-radius:4px}
#plt-app .progress.gold i, #plt-modal .progress.gold i{background:var(--gold)}
#plt-app .progress-caption, #plt-modal .progress-caption{font-size:var(--size-xs);color:var(--plt-muted);display:flex;justify-content:space-between;gap:10px}
#plt-app .badge, #plt-modal .badge{display:inline-block;border-radius:4px;padding:3px 7px;background:var(--plt-soft);color:var(--plt-jade);font-size:var(--size-xs);letter-spacing:.03em;white-space:nowrap;line-height:1.5}
#plt-app .badge.finished, #plt-modal .badge.finished, #plt-app .badge.done, #plt-modal .badge.done, #plt-app .badge.owned, #plt-modal .badge.owned{color:var(--plt-jade);background:color-mix(in srgb, var(--mist) 9.4%, transparent)}
#plt-app .badge.reading, #plt-modal .badge.reading, #plt-app .badge.on-the-way, #plt-modal .badge.on-the-way, #plt-app .badge.high, #plt-modal .badge.high{color:var(--gold);background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 10.2%, transparent)}
#plt-app .badge.dnf, #plt-modal .badge.dnf, #plt-app .badge.overdue, #plt-modal .badge.overdue, #plt-app .badge.need-it, #plt-modal .badge.need-it{color:var(--plt-danger);background:color-mix(in srgb, var(--mist) 7.5%, transparent)}
#plt-app .badge.paused, #plt-modal .badge.paused, #plt-app .badge.borrowed, #plt-modal .badge.borrowed{color:var(--mist);background:color-mix(in srgb, var(--blossom) 8.6%, transparent)}
#plt-app .chips, #plt-modal .chips{display:flex;gap:5px;flex-wrap:wrap}
#plt-app .chip, #plt-modal .chip{font-size:var(--size-xs);padding:3px 7px;border:1px solid var(--plt-line);color:var(--plt-muted);border-radius:4px}
#plt-app .row, #plt-modal .row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--plt-line)}
#plt-app .row:last-child, #plt-modal .row:last-child{border-bottom:0}
#plt-app .row-main, #plt-modal .row-main{flex:1;min-width:0}
#plt-app .row-main small, #plt-modal .row-main small{font-size:var(--size-sm);display:block;color:var(--plt-muted);margin-top:3px}
#plt-app .title-link, #plt-modal .title-link{border:0;background:none;color:var(--plt-ink);font-size:var(--size-xs);font-weight:500;text-align:left;padding:0;line-height:1.5}
#plt-app .title-link:hover, #plt-modal .title-link:hover{color:var(--gold);text-decoration:underline}
#plt-app .book-cover, #plt-modal .book-cover{position:relative;width:100%;height:225px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px 18px;background:color-mix(in srgb, var(--blossom) 28%, var(--surface));color:var(--blossom);border-radius:3px 8px 8px 3px;box-shadow:inset 5px 0 7px color-mix(in srgb, var(--ink) 27.1%, transparent),inset 7px 0 0 color-mix(in srgb, var(--blossom) 7.1%, transparent),4px 4px 0 color-mix(in srgb, var(--surface) 12.5%, transparent);isolation:isolate}
#plt-app .book-cover:before, #plt-modal .book-cover:before{content:'';position:absolute;inset:14px 12px 14px 16px;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 26.7%, transparent);border-radius:45% 45% 0 0;z-index:-1}
#plt-app .book-cover:after, #plt-modal .book-cover:after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 10.2%, transparent);top:-52px;left:35%;box-shadow:0 0 0 17px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 3.5%, transparent),0 0 0 35px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 2%, transparent);z-index:-1}
#plt-app .book-cover .cover-symbol, #plt-modal .book-cover .cover-symbol{font-size:24px;color:color-mix(in srgb, var(--blossom) 47.8%, transparent);margin-bottom:14px;font-family:var(--font-serif);line-height:1}
#plt-app .book-cover .cover-title, #plt-modal .book-cover .cover-title{font-family:var(--font-serif);font-size:24px;line-height:1.08;text-align:center;font-weight:400;letter-spacing:-.035em;max-width:100%;overflow-wrap:anywhere}
#plt-app .book-cover .cover-author, #plt-modal .book-cover .cover-author{font-size:11px;text-transform:uppercase;letter-spacing:.16em;margin-top:17px;opacity:.8;text-align:center}
#plt-app .book-cover img, #plt-modal .book-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:2}
#plt-app .cover-0, #plt-modal .cover-0{background:linear-gradient(150deg,var(--jade),color-mix(in srgb, var(--jade) 28%, var(--surface)))}
#plt-app .cover-1, #plt-modal .cover-1{background:linear-gradient(145deg,color-mix(in srgb, var(--moon) 75%, var(--surface)),color-mix(in srgb, var(--accent-lacquer) 14%, var(--surface)))}
#plt-app .cover-2, #plt-modal .cover-2{background:linear-gradient(155deg,color-mix(in srgb, var(--lantern) 55%, var(--ink)),color-mix(in srgb, var(--gold) 28%, var(--ink)))}
#plt-app .cover-3, #plt-modal .cover-3{background:linear-gradient(145deg,color-mix(in srgb, var(--blossom) 28%, var(--ink)),color-mix(in srgb, var(--lacquer) 20%, var(--ink)))}
#plt-app .cover-4, #plt-modal .cover-4{background:linear-gradient(145deg,var(--moon),color-mix(in srgb, var(--lacquer) 45%, var(--ink)))}
#plt-app .cover-5, #plt-modal .cover-5{background:linear-gradient(145deg,color-mix(in srgb, var(--blossom) 20%, var(--surface)),var(--surface))}
#plt-app .mini-cover, #plt-modal .mini-cover{width:35px;height:49px;border-radius:2px;flex-shrink:0;padding:5px}
#plt-app .mini-cover .cover-title, #plt-modal .mini-cover .cover-title{font-size:11px}
#plt-app .mini-cover .cover-author, #plt-modal .mini-cover .cover-author, #plt-app .mini-cover .cover-symbol, #plt-modal .mini-cover .cover-symbol, #plt-app .mini-cover:before, #plt-modal .mini-cover:before, #plt-app .mini-cover:after, #plt-modal .mini-cover:after{display:none}
#plt-app .reading-card .cover-title, #plt-modal .reading-card .cover-title{font-size:17px}
#plt-app .reading-card .cover-author, #plt-modal .reading-card .cover-author{font-size:5px}
#plt-app .reading-card .cover-symbol, #plt-modal .reading-card .cover-symbol{font-size:18px;margin-bottom:10px}
#plt-app .book-grid, #plt-modal .book-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 21px}
#plt-app .book-card, #plt-modal .book-card{min-width:0}
#plt-app .book-card .cover-button, #plt-modal .book-card .cover-button{padding:0;border:0;background:none;width:100%;display:block;transition:transform .2s;position:relative}
#plt-app .book-card .cover-button:hover, #plt-modal .book-card .cover-button:hover{transform:translateY(-4px)}
#plt-app .cover-badge, #plt-modal .cover-badge{position:absolute;left:8px;top:8px;z-index:3}
#plt-app .book-card h3, #plt-modal .book-card h3{margin:12px 0 2px;font-size:var(--size-xs)}
#plt-app .book-card p, #plt-modal .book-card p{color:var(--plt-muted);font-size:var(--size-sm)}
#plt-app .book-card .book-footer, #plt-modal .book-card .book-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
#plt-app .stars, #plt-modal .stars{color:var(--gold);font-size:var(--size-sm);letter-spacing:.08em}
#plt-app .book-card .progress, #plt-modal .book-card .progress{height:3px;margin-top:10px}
#plt-app .bookshelf, #plt-modal .bookshelf{padding:21px;background:linear-gradient(var(--plt-panel),var(--plt-field));border:1px solid var(--plt-line);border-radius:10px;margin-bottom:23px}
#plt-app .shelf-head, #plt-modal .shelf-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
#plt-app .shelf-head h2, #plt-modal .shelf-head h2{font-size:var(--size-xl)}
#plt-app .shelf, #plt-modal .shelf{display:flex;align-items:flex-end;gap:19px;min-height:195px;padding:0 22px 12px;border-bottom:8px solid color-mix(in srgb, var(--blossom) 36%, var(--surface));box-shadow:0 6px 0 color-mix(in srgb, var(--mist) 6%, var(--surface)),0 10px 12px color-mix(in srgb, var(--ink) 13.3%, transparent);overflow:auto;position:relative}
#plt-app .shelf.jade, #plt-modal .shelf.jade{border-bottom-color:color-mix(in srgb, var(--mist) 75%, var(--ink))}
#plt-app .shelf.warm, #plt-modal .shelf.warm{border-bottom-color:color-mix(in srgb, var(--mist) 85%, var(--ink))}
#plt-app .shelf.midnight, #plt-modal .shelf.midnight{border-bottom-color:color-mix(in srgb, var(--blossom) 35%, var(--ink))}
#plt-app .shelf .shelf-book, #plt-modal .shelf .shelf-book{width:92px;min-width:92px;padding:0;border:0;background:none;transition:transform .15s;position:relative}
#plt-app .shelf-book:hover, #plt-modal .shelf-book:hover{transform:translateY(-7px)}
#plt-app .shelf-book .book-cover, #plt-modal .shelf-book .book-cover{height:138px;padding:15px 10px}
#plt-app .shelf-book .cover-title, #plt-modal .shelf-book .cover-title{font-size:15px}
#plt-app .shelf-book .cover-author, #plt-modal .shelf-book .cover-author{font-size:5px}
#plt-app .shelf-book .cover-symbol, #plt-modal .shelf-book .cover-symbol{font-size:16px;margin-bottom:9px}
#plt-app .spine, #plt-modal .spine{height:160px;width:37px;border-radius:3px 3px 0 0;border:1px solid color-mix(in srgb, var(--blossom) 20%, transparent);box-shadow:inset 5px 0 8px color-mix(in srgb, var(--ink) 20%, transparent);position:relative;display:flex;justify-content:center;align-items:center;color:var(--blossom);background:color-mix(in srgb, var(--blossom) 20%, var(--surface));overflow:hidden}
#plt-app .spine span, #plt-modal .spine span{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-serif);font-size:var(--size-sm);max-height:135px;overflow:hidden;white-space:nowrap}
#plt-app .spine:before, #plt-modal .spine:before, #plt-app .spine:after, #plt-modal .spine:after{content:'';position:absolute;height:1px;left:5px;right:5px;background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 40%, transparent);top:12px}
#plt-app .spine:after, #plt-modal .spine:after{top:auto;bottom:12px}
#plt-app .spine img, #plt-modal .spine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
#plt-app .shelf.spines, #plt-modal .shelf.spines{gap:6px}
#plt-app .shelf.spines .shelf-book, #plt-modal .shelf.spines .shelf-book{width:37px;min-width:37px}
#plt-app .shelf-decor, #plt-modal .shelf-decor{flex-shrink:0;width:70px;align-self:flex-end;margin-left:auto;color:var(--plt-jade);display:grid;place-items:center;opacity:.75}
#plt-app .shelf-caption, #plt-modal .shelf-caption{font-size:var(--size-sm);color:var(--plt-muted);padding-top:18px}
#plt-app .chart-bars, #plt-modal .chart-bars{display:flex;gap:12px;height:154px;align-items:flex-end;padding:7px 0 22px;border-bottom:1px solid var(--plt-line);position:relative}
#plt-app .bar, #plt-modal .bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;gap:5px}
#plt-app .bar i, #plt-modal .bar i{width:64%;min-height:2px;background:linear-gradient(0deg,var(--mist),color-mix(in srgb, var(--blossom) 85%, var(--ink)));border-radius:3px 3px 0 0}
#plt-app .bar b, #plt-modal .bar b{font-size:var(--size-xs);font-weight:400;color:var(--plt-muted)}
#plt-app .bar small, #plt-modal .bar small{position:absolute;bottom:-19px;font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .goal-ring, #plt-modal .goal-ring{width:118px;height:118px;border-radius:50%;padding:9px;display:grid;place-items:center;flex-shrink:0;background:conic-gradient(var(--plt-jade) calc(var(--pct)*1%),var(--plt-line) 0)}
#plt-app .goal-ring>div, #plt-modal .goal-ring>div{background:var(--plt-panel);border-radius:50%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.5}
#plt-app .goal-ring b, #plt-modal .goal-ring b{font-size:var(--size-2xl);font-family:var(--font-serif);font-weight:400}
#plt-app .goal-ring small, #plt-modal .goal-ring small{font-size:var(--size-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--plt-muted)}
#plt-app .goal-layout, #plt-modal .goal-layout{display:flex;align-items:center;gap:24px;padding:4px 0 6px}
#plt-app .goal-layout h3, #plt-modal .goal-layout h3{font-family:var(--font-serif);font-weight:400;font-size:var(--size-xl);margin-bottom:6px}
#plt-app .habit-strip, #plt-modal .habit-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:12px 0 16px}
#plt-app .habit-day, #plt-modal .habit-day{display:flex;align-items:center;flex-direction:column;gap:7px;font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .habit-day i, #plt-modal .habit-day i{display:grid;place-items:center;font-style:normal;width:29px;height:29px;border:1px solid var(--plt-line);border-radius:50%;background:transparent;font-size:var(--size-sm)}
#plt-app .habit-day.read i, #plt-modal .habit-day.read i{background:var(--plt-soft);border-color:var(--plt-jade);color:var(--plt-jade)}
#plt-app .habit-day.freeze i, #plt-modal .habit-day.freeze i{border-color:color-mix(in srgb, var(--blossom) 25%, var(--mist));color:var(--mist)}
#plt-app .habit-day.current i, #plt-modal .habit-day.current i{outline:2px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 18.8%, transparent);outline-offset:3px}
#plt-app .quote-card, #plt-modal .quote-card{padding:24px;background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:9px;position:relative}
#plt-app .quote-card blockquote, #plt-modal .quote-card blockquote{font-family:var(--font-serif);font-size:var(--size-xl);line-height:1.5;letter-spacing:-.02em;margin:8px 0 18px;white-space:pre-wrap}
#plt-app .quote-mark, #plt-modal .quote-mark{font-family:var(--font-serif);font-size:var(--size-4xl);line-height:.6;color:var(--gold);opacity:.6}
#plt-app .quote-card small, #plt-modal .quote-card small{color:var(--plt-muted);font-size:var(--size-xs)}
#plt-app .quote-card p, #plt-modal .quote-card p{font-size:var(--size-xs);color:var(--plt-muted);white-space:pre-wrap}
#plt-app .cards, #plt-modal .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}
#plt-app .card, #plt-modal .card{background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:9px;padding:22px;min-width:0}
#plt-app .card h3, #plt-modal .card h3{font-family:var(--font-serif);font-size:var(--size-xl);font-weight:400;margin:9px 0}
#plt-app .card p, #plt-modal .card p{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .card-top, #plt-modal .card-top, #plt-app .card-foot, #plt-modal .card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
#plt-app .card-foot, #plt-modal .card-foot{border-top:1px solid var(--plt-line);padding-top:14px;margin-top:18px}
#plt-app .card-foot small, #plt-modal .card-foot small{color:var(--plt-muted);font-size:var(--size-xs)}
#plt-app .series-covers, #plt-modal .series-covers{display:flex;gap:9px;align-items:flex-end;overflow:auto;padding:13px 0}
#plt-app .series-covers .book-cover, #plt-modal .series-covers .book-cover{width:62px;height:94px;padding:8px;flex-shrink:0}
#plt-app .series-covers .cover-title, #plt-modal .series-covers .cover-title{font-size:13px}
#plt-app .series-covers .cover-author, #plt-modal .series-covers .cover-author{font-size:4px;margin-top:9px}
#plt-app .series-covers .cover-symbol, #plt-modal .series-covers .cover-symbol{font-size:14px;margin-bottom:6px}
#plt-app .series-covers button, #plt-modal .series-covers button{background:transparent;border:0;padding:0;position:relative}
#plt-app .volume-number, #plt-modal .volume-number{font-size:var(--size-xs);color:var(--plt-muted);text-align:center;display:block;margin-top:8px}
#plt-app .missing-volume, #plt-modal .missing-volume{width:62px;height:94px;border:1px dashed var(--plt-line);border-radius:3px;display:grid;place-items:center;color:var(--plt-muted);font-family:var(--font-serif);font-size:var(--size-xl)}
#plt-app .collection-visual, #plt-modal .collection-visual{display:flex;align-items:flex-end;gap:9px;min-height:125px;border-bottom:1px solid var(--plt-line);padding-bottom:18px}
#plt-app .collection-visual .book-cover, #plt-modal .collection-visual .book-cover{height:107px;width:72px;padding:10px;flex-shrink:0}
#plt-app .collection-visual .cover-title, #plt-modal .collection-visual .cover-title{font-size:13px}
#plt-app .collection-visual .cover-author, #plt-modal .collection-visual .cover-author{font-size:4px;margin-top:10px}
#plt-app .collection-visual .cover-symbol, #plt-modal .collection-visual .cover-symbol{font-size:16px;margin-bottom:9px}
#plt-app .collection-visual .book-cover:nth-child(2), #plt-modal .collection-visual .book-cover:nth-child(2){height:115px}
#plt-app .collection-visual .book-cover:nth-child(3), #plt-modal .collection-visual .book-cover:nth-child(3){height:100px}
#plt-app .empty, #plt-modal .empty{padding:34px 20px;text-align:center;border:1px dashed var(--plt-line);border-radius:8px;color:var(--plt-muted)}
#plt-app .empty .mark, #plt-modal .empty .mark{font-size:var(--size-xl);color:var(--gold);margin-bottom:10px}
#plt-app .empty h3, #plt-modal .empty h3{font-family:var(--font-serif);font-size:var(--size-xl);font-weight:400;margin-bottom:7px;color:var(--plt-ink)}
#plt-app .empty p, #plt-modal .empty p{font-size:var(--size-sm);max-width:470px;margin:0 auto 15px}
#plt-app .table-wrap, #plt-modal .table-wrap{overflow:auto}
#plt-app .table, #plt-modal .table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--size-sm)}
#plt-app .table th, #plt-modal .table th{font-size:var(--size-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--plt-muted);font-weight:500;border-bottom:1px solid var(--plt-line);padding:10px 12px}
#plt-app .table td, #plt-modal .table td{padding:13px 12px;border-bottom:1px solid var(--plt-line)}
#plt-app .table tr:last-child td, #plt-modal .table tr:last-child td{border:0}
#plt-app .table td small, #plt-modal .table td small{display:block;color:var(--plt-muted);font-size:var(--size-xs);margin-top:3px}
#plt-app .table td .title-link, #plt-modal .table td .title-link{font-size:var(--size-sm)}
#plt-app .table .book-cell, #plt-modal .table .book-cell{display:flex;align-items:center;gap:12px}
#plt-app .filters, #plt-modal .filters{background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:8px;padding:15px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:21px}
#plt-app .filters label, #plt-modal .filters label{font-size:var(--size-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--plt-muted)}
#plt-app .filters select, #plt-modal .filters select, #plt-app .filters input, #plt-modal .filters input{display:block;width:100%;font-size:var(--size-sm);letter-spacing:0;text-transform:none;margin-top:5px;padding:7px 8px;border:1px solid var(--plt-line);border-radius:4px;background:var(--plt-field);color:var(--plt-ink);min-width:0}
#plt-app .filter-search, #plt-modal .filter-search{min-width:180px;flex:1;border:1px solid var(--plt-line);background:var(--plt-field);color:var(--plt-ink);border-radius:5px;font-size:var(--size-sm);padding:9px 12px}
#plt-app .metric-row, #plt-modal .metric-row{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:var(--size-sm)}
#plt-app .metric-row span, #plt-modal .metric-row span{color:var(--plt-muted);width:90px;flex-shrink:0}
#plt-app .metric-row .track, #plt-modal .metric-row .track{height:7px;flex:1;background:var(--plt-line);border-radius:5px;overflow:hidden}
#plt-app .metric-row .track i, #plt-modal .metric-row .track i{display:block;height:100%;background:var(--plt-jade);border-radius:5px}
#plt-app .metric-row b, #plt-modal .metric-row b{font-weight:400;width:23px;color:var(--gold);text-align:right}
#plt-app .check, #plt-modal .check{width:15px;height:15px;accent-color:var(--plt-jade);flex-shrink:0}
#plt-app .done .title-link, #plt-modal .done .title-link{text-decoration:line-through;color:var(--plt-muted)}
#plt-app .datebox, #plt-modal .datebox{border:1px solid var(--plt-line);border-radius:5px;width:40px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.5;background:var(--plt-raised);flex-shrink:0}
#plt-app .datebox b, #plt-modal .datebox b{font-size:var(--size-md);font-weight:400;color:var(--gold)}
#plt-app .datebox small, #plt-modal .datebox small{font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .section-gap, #plt-modal .section-gap{margin-top:23px}
#plt-app .calendar-head, #plt-modal .calendar-head{display:flex;justify-content:space-between;align-items:center;padding:21px;gap:15px}
#plt-app .calendar-scroll, #plt-modal .calendar-scroll{overflow:auto}
#plt-app .calendar, #plt-modal .calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:660px}
#plt-app .weekday, #plt-modal .weekday{text-align:center;padding:10px;font-size:var(--size-xs);color:var(--plt-muted);border-bottom:1px solid var(--plt-line)}
#plt-app .day, #plt-modal .day{padding:8px;border:0;border-right:1px solid var(--plt-line);border-bottom:1px solid var(--plt-line);background:transparent;color:var(--plt-ink);min-height:129px;text-align:left;display:flex;flex-direction:column;gap:8px}
#plt-app .day:nth-child(7n), #plt-modal .day:nth-child(7n){border-right:0}
#plt-app .day:hover, #plt-modal .day:hover{background:var(--plt-raised)}
#plt-app .day.other, #plt-modal .day.other{opacity:.4}
#plt-app .day.today, #plt-modal .day.today{background:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 4.7%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 27.1%, transparent)}
#plt-app .day-num, #plt-modal .day-num{font-size:var(--size-xs);color:var(--plt-muted);display:flex;justify-content:space-between}
#plt-app .day-covers, #plt-modal .day-covers{display:flex;gap:4px;align-items:flex-start}
#plt-app .day .mini-cover, #plt-modal .day .mini-cover{width:29px;height:41px}
#plt-app .day small, #plt-modal .day small{font-size:var(--size-xs);color:var(--plt-jade)}
#plt-app .heatmap, #plt-modal .heatmap{display:grid;grid-template-columns:30px repeat(31,minmax(7px,1fr));gap:4px;min-width:560px}
#plt-app .heatcell, #plt-modal .heatcell{height:16px;background:var(--plt-field);border:1px solid var(--plt-line);border-radius:2px;padding:0}
#plt-app .heatcell.read, #plt-modal .heatcell.read{background:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 50.2%, transparent);border-color:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 69%, transparent)}
#plt-app .heatcell.freeze, #plt-modal .heatcell.freeze{background:color-mix(in srgb, var(--blossom) 43.1%, transparent);border-color:color-mix(in srgb, var(--blossom) 60%, var(--ink))}
#plt-app .heatlabel, #plt-modal .heatlabel{color:var(--plt-muted);font-size:var(--size-xs);text-align:center;align-self:center}
#plt-app .heatcell.blank, #plt-modal .heatcell.blank{visibility:hidden}
#plt-app .challenge-grid, #plt-modal .challenge-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:17px 0}
#plt-app .challenge-cell, #plt-modal .challenge-cell{display:grid;place-items:center;height:27px;border:1px solid var(--plt-line);border-radius:4px;color:var(--plt-muted);font-size:var(--size-sm)}
#plt-app .challenge-cell.met, #plt-modal .challenge-cell.met{background:var(--plt-soft);border-color:color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 31.4%, transparent);color:var(--plt-jade)}
#plt-app .checklist, #plt-modal .checklist{margin:13px 0}
#plt-app .checklist label, #plt-modal .checklist label{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .graph-toolbar, #plt-modal .graph-toolbar{display:flex;align-items:center;gap:12px;padding:18px 21px;border-bottom:1px solid var(--plt-line);flex-wrap:wrap}
#plt-app .graph-wrap, #plt-modal .graph-wrap{overflow:auto;background-image:radial-gradient(var(--plt-line) 1px,transparent 1px);background-size:20px 20px;min-height:470px}
#plt-app .graph-stage, #plt-modal .graph-stage{position:relative;width:1000px;height:570px;transform-origin:top left}
#plt-app .graph-stage svg, #plt-modal .graph-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#plt-app .graph-node, #plt-modal .graph-node{position:absolute;width:151px;min-height:89px;background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:8px;padding:12px;box-shadow:var(--plt-shadow);touch-action:none;user-select:none;cursor:grab}
#plt-app .graph-node:active, #plt-modal .graph-node:active{cursor:grabbing}
#plt-app .graph-node h3, #plt-modal .graph-node h3{font-size:var(--size-xs);margin:6px 0 2px}
#plt-app .graph-node small, #plt-modal .graph-node small{font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .graph-node .avatar, #plt-modal .graph-node .avatar{width:29px;height:29px;font-size:var(--size-sm)}
#plt-app .graph-edge-label, #plt-modal .graph-edge-label{font-size:var(--size-sm);fill:var(--gold);paint-order:stroke;stroke:var(--plt-panel);stroke-width:4px;stroke-linejoin:round}
#plt-app .footer, #plt-modal .footer{border-top:1px solid var(--plt-line);padding-top:16px;margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--plt-muted);font-size:var(--size-xs)}
#plt-app .global-results, #plt-modal .global-results{position:absolute;right:145px;top:61px;width:360px;max-height:410px;overflow:auto;background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:7px;box-shadow:0 10px 40px color-mix(in srgb, var(--ink) 33.3%, transparent);z-index:50}
#plt-app .result, #plt-modal .result{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--plt-line);background:transparent;color:var(--plt-ink);font-size:var(--size-xs);padding:13px 17px}
#plt-app .result small, #plt-modal .result small{color:var(--plt-muted);display:block;font-size:var(--size-xs)}
#plt-app .result:hover, #plt-modal .result:hover{background:var(--plt-raised)}
#plt-app dialog, #plt-modal dialog{width:min(790px,calc(100vw - 32px));max-height:91vh;border:1px solid var(--plt-line);border-radius:12px;background:var(--plt-panel);color:var(--plt-ink);padding:0;box-shadow:0 30px 140px color-mix(in srgb, var(--ink) 40%, transparent)}
#plt-app dialog.wide, #plt-modal dialog.wide{width:min(1130px,calc(100vw - 32px))}
#plt-app dialog::backdrop, #plt-modal dialog::backdrop{background:color-mix(in srgb, var(--ink) 74.9%, transparent);backdrop-filter:blur(4px)}
#plt-app .dialog-head, #plt-modal .dialog-head{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:21px 26px;border-bottom:1px solid var(--plt-line);background:var(--plt-raised)}
#plt-app .dialog-head h2, #plt-modal .dialog-head h2{font-size:var(--size-xl)}
#plt-app .dialog-head .eyebrow, #plt-modal .dialog-head .eyebrow{font-size:var(--size-xs)}
#plt-app .dialog-body, #plt-modal .dialog-body{padding:24px 26px}
#plt-app .close, #plt-modal .close{border:0;border-radius:50%;background:var(--plt-soft);color:var(--plt-muted);width:30px;height:30px;font-size:var(--size-xl);flex-shrink:0}
#plt-app .form-grid, #plt-modal .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 22px}
#plt-app .field, #plt-modal .field{display:flex;flex-direction:column;gap:6px;font-size:var(--size-sm);color:var(--plt-muted);min-width:0}
#plt-app .field.full, #plt-modal .field.full{grid-column:1/-1}
#plt-app .field>span, #plt-modal .field>span{font-weight:500}
#plt-app .field input, #plt-modal .field input, #plt-app .field select, #plt-modal .field select, #plt-app .field textarea, #plt-modal .field textarea, #plt-app .select, #plt-modal .select{padding:9px 11px;border:1px solid var(--plt-line);border-radius:5px;background:var(--plt-field);color:var(--plt-ink);font-size:var(--size-xs);width:100%;min-width:0}
#plt-app .field input[type=checkbox], #plt-modal .field input[type=checkbox]{width:15px;accent-color:var(--plt-jade)}
#plt-app .field small, #plt-modal .field small{font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .field textarea, #plt-modal .field textarea{resize:vertical;min-height:80px}
#plt-app .checkbox-label, #plt-modal .checkbox-label{display:flex;gap:10px;align-items:center;padding:6px 0}
#plt-app .form-actions, #plt-modal .form-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;border-top:1px solid var(--plt-line);padding-top:20px;margin-top:24px;flex-wrap:wrap}
#plt-app .archive-btn, #plt-modal .archive-btn{margin-right:auto}
#plt-app .error, #plt-modal .error{color:var(--plt-danger);font-size:var(--size-sm);white-space:pre-wrap}
#plt-app .error:not(:empty), #plt-modal .error:not(:empty){padding:12px;background:color-mix(in srgb, var(--accent-lacquer) 6.3%, transparent);border:1px solid color-mix(in srgb, var(--accent-lacquer) 14.5%, transparent);border-radius:5px;margin-top:17px}
#plt-app .editor-tabs, #plt-modal .editor-tabs{padding:13px 20px;background:var(--plt-field);border-bottom:1px solid var(--plt-line);display:flex;gap:5px;overflow:auto}
#plt-app .editor-tabs .tab, #plt-modal .editor-tabs .tab{font-size:var(--size-sm)}
#plt-app .editor-section, #plt-modal .editor-section{display:none}
#plt-app .editor-section.active, #plt-modal .editor-section.active{display:block}
#plt-app .editor-intro, #plt-modal .editor-intro{padding:11px 15px;border:1px solid var(--plt-line);background:var(--plt-soft);border-radius:5px;font-size:var(--size-sm);color:var(--plt-muted);margin-bottom:19px}
#plt-app .upload-preview, #plt-modal .upload-preview{max-height:160px;max-width:190px;object-fit:cover;border-radius:5px;margin-top:7px}
#plt-app .detail-header, #plt-modal .detail-header{display:flex;gap:29px;align-items:center;padding:25px;background:var(--plt-field);border:1px solid var(--plt-line);border-radius:9px;margin-bottom:23px}
#plt-app .detail-header>.book-cover, #plt-modal .detail-header>.book-cover{width:139px;min-width:139px;height:208px;padding:20px}
#plt-app .detail-header .cover-title, #plt-modal .detail-header .cover-title{font-size:21px}
#plt-app .detail-copy, #plt-modal .detail-copy{flex:1}
#plt-app .detail-copy h2, #plt-modal .detail-copy h2{font-size:var(--size-2xl);margin:8px 0}
#plt-app .detail-copy p, #plt-modal .detail-copy p{font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .detail-copy .actions, #plt-modal .detail-copy .actions{margin-top:19px}
#plt-app .detail-copy .chips, #plt-modal .detail-copy .chips{margin-top:12px}
#plt-app .detail-nav, #plt-modal .detail-nav{margin-bottom:23px;border-bottom:1px solid var(--plt-line);padding-bottom:12px}
#plt-app .detail-section, #plt-modal .detail-section{margin-bottom:23px}
#plt-app .detail-section h3, #plt-modal .detail-section h3{font-family:var(--font-serif);font-size:var(--size-xl);font-weight:400;margin-bottom:10px}
#plt-app .detail-section p, #plt-modal .detail-section p{color:var(--plt-muted);font-size:var(--size-xs);white-space:pre-wrap}
#plt-app .definition, #plt-modal .definition{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
#plt-app .definition>div, #plt-modal .definition>div{padding:9px 0;border-bottom:1px solid var(--plt-line);display:flex;justify-content:space-between;gap:16px;font-size:var(--size-sm)}
#plt-app .definition span, #plt-modal .definition span{color:var(--plt-muted)}
#plt-app .definition b, #plt-modal .definition b{font-weight:400;text-align:right}
#plt-app .note-box, #plt-modal .note-box{padding:16px 18px;border-left:2px solid var(--gold);background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 3.1%, transparent);border-radius:0 5px 5px 0;color:var(--plt-muted);font-size:var(--size-xs);white-space:pre-wrap}
#plt-app .timeline .row, #plt-modal .timeline .row{align-items:flex-start}
#plt-app .list-picker, #plt-modal .list-picker{max-height:260px;overflow:auto;border:1px solid var(--plt-line);padding:10px 14px;border-radius:5px}
#plt-app .list-picker label, #plt-modal .list-picker label{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--plt-muted);font-size:var(--size-sm)}
#plt-app .list-picker input, #plt-modal .list-picker input{width:15px!important;accent-color:var(--plt-jade)}
#plt-app .hint, #plt-modal .hint{border:1px solid var(--plt-line);border-radius:6px;padding:13px 15px;font-size:var(--size-sm);color:var(--plt-muted);background:var(--plt-field);margin:16px 0}
#plt-app .toast, #plt-modal .toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border:1px solid color-mix(in srgb, var(--mist) 40%, transparent);background:color-mix(in srgb, var(--blossom) 20%, var(--surface));color:var(--blossom);border-radius:7px;padding:12px 22px;font-size:var(--size-xs);max-width:90vw;z-index:100;box-shadow:0 6px 30px color-mix(in srgb, var(--ink) 20%, transparent)}
#plt-app .loading, #plt-modal .loading{text-align:center;padding:90px 20px}
#plt-app .loading p, #plt-modal .loading p{margin:15px auto;max-width:600px;color:var(--plt-muted)}
#plt-app .menu-btn, #plt-modal .menu-btn{display:none;background:none;border:0;color:var(--plt-muted);font-size:var(--size-xl)}
#plt-app .shade, #plt-modal .shade{display:none}
#plt-app .import-preview, #plt-modal .import-preview{max-height:260px;overflow:auto;border:1px solid var(--plt-line);border-radius:6px;margin-top:17px}
#plt-app .mapping, #plt-modal .mapping{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
#plt-app .quote-type, #plt-modal .quote-type{font-size:var(--size-xs);color:var(--gold);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
#plt-app .record-list, #plt-modal .record-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#plt-app .preview-banner, #plt-modal .preview-banner{height:145px;width:100%;object-fit:cover;border-radius:6px;margin-bottom:18px}
#plt-app .link-list, #plt-modal .link-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;font-size:var(--size-sm)}
#plt-app .budget-label, #plt-modal .budget-label{color:var(--gold);font-size:var(--size-xl);font-family:var(--font-serif);line-height:1.5}
#plt-app .quote-favourite, #plt-modal .quote-favourite{font-size:var(--size-lg);color:var(--gold)}
#plt-app .choice-grid, #plt-modal .choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#plt-app .choice-grid button, #plt-modal .choice-grid button{padding:20px;border:1px solid var(--plt-line);background:var(--plt-field);border-radius:8px;color:var(--plt-ink);text-align:left}
#plt-app .choice-grid button:hover, #plt-modal .choice-grid button:hover{background:var(--plt-soft);border-color:var(--plt-jade)}
#plt-app .choice-grid b, #plt-modal .choice-grid b{display:block;font-size:var(--size-sm);margin-bottom:7px}
#plt-app .choice-grid small, #plt-modal .choice-grid small{color:var(--plt-muted);font-size:var(--size-sm);display:block}
#plt-app .rating-dots, #plt-modal .rating-dots{font-size:var(--size-sm);letter-spacing:.13em;color:var(--gold)}
#plt-app .release-note, #plt-modal .release-note{font-size:var(--size-xs);color:var(--plt-muted);margin-top:10px}
#plt-app .sr-only, #plt-modal .sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
@media(min-width:1600px){#plt-app .book-grid, #plt-modal .book-grid{grid-template-columns:repeat(6,1fr)}
#plt-app .book-cover, #plt-modal .book-cover{height:242px}
#plt-app .hero, #plt-modal .hero{min-height:294px}}
@media(max-width:1260px){#plt-app .book-grid, #plt-modal .book-grid{grid-template-columns:repeat(4,1fr)}
#plt-app .book-cover, #plt-modal .book-cover{height:222px}
#plt-app .hero-grid, #plt-modal .hero-grid{grid-template-columns:1.35fr 1fr}
#plt-app .hero, #plt-modal .hero{padding:27px}
#plt-app .hero h2, #plt-modal .hero h2{font-size:var(--size-2xl)}
#plt-app .reading-card, #plt-modal .reading-card{padding:20px;gap:16px}
#plt-app .reading-card .book-cover, #plt-modal .reading-card .book-cover{width:86px;min-width:86px;height:135px}
#plt-app .reading-card .cover-title, #plt-modal .reading-card .cover-title{font-size:15px}
#plt-app .reading-copy h2, #plt-modal .reading-copy h2{font-size:var(--size-xl)}
#plt-app .filters, #plt-modal .filters{grid-template-columns:repeat(4,1fr)}
#plt-app .top-note, #plt-modal .top-note{display:none}
#plt-app .main, #plt-modal .main, #plt-app .topbar, #plt-modal .topbar{padding-left:26px;padding-right:26px}
#plt-app .hero-art, #plt-modal .hero-art{opacity:.68}
#plt-app .cards, #plt-modal .cards{gap:17px}
#plt-app .grid2, #plt-modal .grid2{grid-template-columns:1.2fr 1fr}
#plt-app .grid3, #plt-modal .grid3{grid-template-columns:1fr 1fr}
#plt-app .book-grid .book-cover .cover-title, #plt-modal .book-grid .book-cover .cover-title{font-size:22px}}
@media(max-width:1000px){#plt-app .shell, #plt-modal .shell{grid-template-columns:195px 1fr}
#plt-app .sidebar, #plt-modal .sidebar{width:195px;padding-inline:11px}
#plt-app .brand strong, #plt-modal .brand strong{font-size:var(--size-md)}
#plt-app .brand, #plt-modal .brand{gap:8px;padding-inline:6px}
#plt-app .brand-mark, #plt-modal .brand-mark{width:31px;height:42px}
#plt-app .nav, #plt-modal .nav{font-size:var(--size-sm)}
#plt-app .crumb, #plt-modal .crumb{display:none}
#plt-app .search, #plt-modal .search{margin-left:0;flex:1}
#plt-app .hero-grid, #plt-modal .hero-grid{grid-template-columns:1fr}
#plt-app .reading-card, #plt-modal .reading-card{display:none}
#plt-app .hero, #plt-modal .hero{min-height:265px}
#plt-app .hero h2, #plt-modal .hero h2{font-size:var(--size-2xl)}
#plt-app .book-grid, #plt-modal .book-grid{grid-template-columns:repeat(3,1fr)}
#plt-app .cards, #plt-modal .cards{grid-template-columns:repeat(2,1fr)}
#plt-app .stats, #plt-modal .stats{grid-template-columns:repeat(2,1fr)}
#plt-app .grid2, #plt-modal .grid2, #plt-app .grid2.equal, #plt-modal .grid2.equal{grid-template-columns:1fr}
#plt-app .main, #plt-modal .main{padding:25px 20px}
#plt-app .page-head h1, #plt-modal .page-head h1{font-size:var(--size-2xl)}
#plt-app .page-head, #plt-modal .page-head{align-items:flex-start}
#plt-app .page-head .actions, #plt-modal .page-head .actions{justify-content:flex-end}
#plt-app .filters, #plt-modal .filters{grid-template-columns:repeat(3,1fr)}
#plt-app .global-results, #plt-modal .global-results{right:20px}
#plt-app .record-list, #plt-modal .record-list{grid-template-columns:1fr}}
@media(max-width:720px){#plt-app .shell, #plt-modal .shell{display:block}
#plt-app .sidebar, #plt-modal .sidebar{width:230px;transform:translateX(-100%);transition:transform .2s}
#plt-app .sidebar.open, #plt-modal .sidebar.open{transform:translateX(0)}
#plt-app .shade.show, #plt-modal .shade.show{display:block;position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 60%, transparent);z-index:39}
#plt-app .menu-btn, #plt-modal .menu-btn{display:block}
#plt-app .topbar, #plt-modal .topbar{height:62px;padding:0 17px;gap:12px}
#plt-app .search, #plt-modal .search{width:100px;padding:7px 9px}
#plt-app .main, #plt-modal .main{padding:24px 17px}
#plt-app .page-head, #plt-modal .page-head{display:block;margin-bottom:22px}
#plt-app .page-head .actions, #plt-modal .page-head .actions{justify-content:flex-start;margin-top:18px}
#plt-app .page-head h1, #plt-modal .page-head h1{font-size:var(--size-2xl)}
#plt-app .demo, #plt-modal .demo{font-size:var(--size-xs);align-items:flex-start;gap:14px}
#plt-app .demo .quiet, #plt-modal .demo .quiet{font-size:var(--size-xs)}
#plt-app .hero, #plt-modal .hero{padding:25px;min-height:277px}
#plt-app .hero h2, #plt-modal .hero h2{font-size:var(--size-2xl)}
#plt-app .hero .btn, #plt-modal .hero .btn{font-size:var(--size-sm)}
#plt-app .hero-art, #plt-modal .hero-art{right:-16px;width:42%;opacity:.65}
#plt-app .stats, #plt-modal .stats{gap:10px}
#plt-app .stat, #plt-modal .stat{padding:15px}
#plt-app .stat b, #plt-modal .stat b{font-size:var(--size-2xl)}
#plt-app .stat-label, #plt-modal .stat-label{font-size:var(--size-xs)}
#plt-app .stat small, #plt-modal .stat small{font-size:var(--size-xs)}
#plt-app .book-grid, #plt-modal .book-grid{grid-template-columns:repeat(3,1fr);gap:23px 14px}
#plt-app .book-cover, #plt-modal .book-cover{height:175px;padding:19px 13px}
#plt-app .book-grid .book-cover .cover-title, #plt-modal .book-grid .book-cover .cover-title{font-size:17px}
#plt-app .book-cover .cover-author, #plt-modal .book-cover .cover-author{font-size:5px;margin-top:13px}
#plt-app .book-cover .cover-symbol, #plt-modal .book-cover .cover-symbol{font-size:19px;margin-bottom:10px}
#plt-app .book-card .title-link, #plt-modal .book-card .title-link{font-size:var(--size-sm)}
#plt-app .book-card p, #plt-modal .book-card p{font-size:var(--size-xs)}
#plt-app .book-card .badge, #plt-modal .book-card .badge{font-size:var(--size-2xs)}
#plt-app .cover-badge, #plt-modal .cover-badge{top:5px;left:5px}
#plt-app .cards, #plt-modal .cards{grid-template-columns:1fr}
#plt-app .grid3, #plt-modal .grid3{grid-template-columns:1fr}
#plt-app .panel-head, #plt-modal .panel-head{padding:19px 18px 16px}
#plt-app .panel-body, #plt-modal .panel-body{padding:0 18px 19px}
#plt-app .panel-head h2, #plt-modal .panel-head h2{font-size:var(--size-xl)}
#plt-app .toolbar, #plt-modal .toolbar{gap:12px}
#plt-app .tab, #plt-modal .tab{padding:6px 9px;font-size:var(--size-xs)}
#plt-app .filters, #plt-modal .filters{grid-template-columns:repeat(2,1fr);gap:11px}
#plt-app .shelf, #plt-modal .shelf{padding-inline:10px;gap:13px;min-height:179px}
#plt-app .bookshelf, #plt-modal .bookshelf{padding:18px}
#plt-app .shelf-decor, #plt-modal .shelf-decor{width:45px}
#plt-app .shelf-head, #plt-modal .shelf-head{align-items:flex-start}
#plt-app .footer, #plt-modal .footer{display:block}
#plt-app .footer .quiet, #plt-modal .footer .quiet{margin-top:9px}
#plt-app .dialog-head, #plt-modal .dialog-head{padding:18px}
#plt-app .dialog-body, #plt-modal .dialog-body{padding:22px 18px}
#plt-app .form-grid, #plt-modal .form-grid{grid-template-columns:1fr}
#plt-app .field.full, #plt-modal .field.full{grid-column:auto}
#plt-app .editor-tabs, #plt-modal .editor-tabs{padding:11px 12px}
#plt-app .detail-header, #plt-modal .detail-header{padding:18px;gap:19px;align-items:flex-start}
#plt-app .detail-header>.book-cover, #plt-modal .detail-header>.book-cover{width:100px;min-width:100px;height:153px;padding:15px}
#plt-app .detail-header .cover-title, #plt-modal .detail-header .cover-title{font-size:17px}
#plt-app .detail-header .cover-author, #plt-modal .detail-header .cover-author{font-size:5px}
#plt-app .detail-copy h2, #plt-modal .detail-copy h2{font-size:var(--size-xl)}
#plt-app .detail-copy .actions, #plt-modal .detail-copy .actions{gap:7px}
#plt-app .detail-copy .btn, #plt-modal .detail-copy .btn, #plt-app .detail-copy .outline, #plt-modal .detail-copy .outline{font-size:var(--size-xs);padding:7px 9px}
#plt-app .definition, #plt-modal .definition{grid-template-columns:1fr}
#plt-app .global-results, #plt-modal .global-results{width:calc(100vw - 32px);right:16px}
#plt-app .mapping, #plt-modal .mapping{grid-template-columns:1fr 1fr}
#plt-app .choice-grid, #plt-modal .choice-grid{grid-template-columns:1fr 1fr}
#plt-app .goal-layout, #plt-modal .goal-layout{gap:21px}
#plt-app .stat-label i, #plt-modal .stat-label i{font-size:var(--size-sm)}}
@media(max-width:430px){#plt-app .book-grid, #plt-modal .book-grid{grid-template-columns:repeat(2,1fr)}
#plt-app .book-cover, #plt-modal .book-cover{height:211px}
#plt-app .book-grid .book-cover .cover-title, #plt-modal .book-grid .book-cover .cover-title{font-size:22px}
#plt-app .hero h2, #plt-modal .hero h2{font-size:var(--size-2xl);max-width:75%}
#plt-app .hero p, #plt-modal .hero p{max-width:70%}
#plt-app .hero-art, #plt-modal .hero-art{opacity:.4}
#plt-app .detail-header>.book-cover, #plt-modal .detail-header>.book-cover{width:80px;min-width:80px;height:127px}
#plt-app .detail-header .cover-title, #plt-modal .detail-header .cover-title{font-size:14px}
#plt-app .detail-header .cover-symbol, #plt-modal .detail-header .cover-symbol{font-size:15px}
#plt-app .detail-copy h2, #plt-modal .detail-copy h2{font-size:var(--size-xl)}}
@media print{#plt-app .sidebar, #plt-modal .sidebar, #plt-app .topbar, #plt-modal .topbar, #plt-app .footer, #plt-modal .footer, #plt-app .demo, #plt-modal .demo, #plt-app .page-head .actions, #plt-modal .page-head .actions, #plt-app button, #plt-modal button, #plt-app .toolbar, #plt-modal .toolbar, #plt-app .filters, #plt-modal .filters{display:none!important}
#plt-app .shell, #plt-modal .shell{display:block}
#plt-app .main, #plt-modal .main{padding:0;max-width:none}
#plt-app *, #plt-modal *{}
#plt-app .panel, #plt-modal .panel, #plt-app .card, #plt-modal .card, #plt-app .stats, #plt-modal .stats, #plt-app .quote-card, #plt-modal .quote-card{break-inside:avoid}
#plt-app .graph-stage, #plt-modal .graph-stage{transform:none!important}}
#plt-app .small-book .book-cover, #plt-modal .small-book .book-cover{height:143px;padding:17px 10px}
#plt-app .small-book .cover-title, #plt-modal .small-book .cover-title{font-size:15px}
#plt-app .small-book .cover-author, #plt-modal .small-book .cover-author{font-size:5px}
#plt-app .small-book .cover-symbol, #plt-modal .small-book .cover-symbol{font-size:17px;margin-bottom:10px}
#plt-app .book-cover.cover-1 .cover-title, #plt-modal .book-cover.cover-1 .cover-title{color:var(--blossom)}
#plt-app .page-head>.actions, #plt-modal .page-head>.actions{flex-shrink:0}
#plt-app .book-grid, #plt-modal .book-grid{align-items:start}
#plt-app .editor-section .row .actions, #plt-modal .editor-section .row .actions{flex-shrink:0}
#plt-app .graph-node .title-link, #plt-modal .graph-node .title-link{font-size:var(--size-xs)}
#plt-app dialog .book-grid, #plt-modal dialog .book-grid{grid-template-columns:repeat(4,1fr)}
#plt-app dialog .book-grid .book-cover, #plt-modal dialog .book-grid .book-cover{height:205px}
@media(max-width:720px){#plt-app dialog .book-grid, #plt-modal dialog .book-grid{grid-template-columns:repeat(2,1fr)}
#plt-app .page-head>.actions, #plt-modal .page-head>.actions{flex-shrink:1}}
@media print{#plt-app .title-link, #plt-modal .title-link, #plt-app .shelf-book, #plt-modal .shelf-book, #plt-app .cover-button, #plt-modal .cover-button{display:inline-block!important;color:var(--plt-ink)!important}
#plt-app .chart-bars .bar i, #plt-modal .chart-bars .bar i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
#plt-app .book-cover, #plt-modal .book-cover, #plt-app .badge, #plt-modal .badge{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
#plt-app *, #plt-modal *{}
#plt-app button, #plt-modal button{touch-action:manipulation}
#plt-app h1, #plt-modal h1, #plt-app h2, #plt-modal h2, #plt-app h3, #plt-modal h3, #plt-app h4, #plt-modal h4{font-family:var(--font-serif)}
#plt-app button:focus-visible, #plt-modal button:focus-visible, #plt-app a:focus-visible, #plt-modal a:focus-visible, #plt-app summary:focus-visible, #plt-modal summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#plt-app .btn, #plt-modal .btn{background:var(--gold);border-color:var(--gold);color:var(--surface)}
#plt-app .btn:hover, #plt-modal .btn:hover{filter:brightness(1.08)}
#plt-app .gold, #plt-modal .gold{color:var(--gold)}
#plt-app .precinct-shell, #plt-modal .precinct-shell{min-height:100vh}
#plt-app .precinct-masthead, #plt-modal .precinct-masthead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:21px max(32px,calc((100vw - 1480px)/2));background:var(--plt-nav);border-bottom:1px solid var(--plt-line)}
#plt-app .precinct-brand, #plt-modal .precinct-brand{display:flex;align-items:center;gap:14px;border:0;background:none;color:var(--plt-ink);text-align:left;white-space:nowrap}
#plt-app .precinct-brand>span, #plt-modal .precinct-brand>span{width:47px;height:52px;display:grid;place-items:center;border:1px solid var(--gold);outline:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 18.8%, transparent);outline-offset:-5px;border-radius:22px 22px 3px 3px;font:var(--size-2xl) var(--font-serif);color:var(--gold)}
#plt-app .precinct-brand strong, #plt-modal .precinct-brand strong{font:var(--size-xl)/1.2 var(--font-serif)}
#plt-app .precinct-brand small, #plt-modal .precinct-brand small{display:block;margin-top:6px;color:var(--plt-muted);font-size:var(--size-xs);letter-spacing:.2em}
#plt-app .masthead-tools, #plt-modal .masthead-tools{display:flex;align-items:center;gap:10px}
#plt-app .masthead-tools .search, #plt-modal .masthead-tools .search{width:275px;min-width:120px;border:1px solid var(--plt-line);background:var(--plt-field);padding:6px 10px}
#plt-app .masthead-tools .search input, #plt-modal .masthead-tools .search input{font-size:var(--size-sm)}
#plt-app .masthead-tools .global-results, #plt-modal .masthead-tools .global-results{top:85%;right:35px;width:380px;z-index:90}
#plt-app .precinct-primary, #plt-modal .precinct-primary{display:flex;padding:0 max(32px,calc((100vw - 1480px)/2));background:var(--plt-nav);border-bottom:1px solid var(--plt-line);gap:4px;overflow-x:auto}
#plt-app .precinct-primary>button, #plt-modal .precinct-primary>button{border:0;border-bottom:2px solid transparent;background:transparent;display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--plt-muted);font-size:var(--size-xs);padding:16px 17px}
#plt-app .precinct-primary>button>span, #plt-modal .precinct-primary>button>span{font:var(--size-md) var(--font-serif);color:var(--gold)}
#plt-app .precinct-primary>button.active, #plt-modal .precinct-primary>button.active{background:var(--plt-soft);color:var(--gold);border-bottom-color:var(--gold)}
#plt-app .precinct-primary>button:hover, #plt-modal .precinct-primary>button:hover{color:var(--plt-ink);background:var(--plt-panel)}
#plt-app .precinct-secondary, #plt-modal .precinct-secondary{display:flex;flex-wrap:wrap;justify-content:center;padding:9px 25px;gap:4px 8px;background:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 6.3%, transparent);border-bottom:1px solid var(--plt-line)}
#plt-app .precinct-secondary>button, #plt-modal .precinct-secondary>button{border:1px solid transparent;background:transparent;border-radius:4px;padding:5px 11px;font-size:var(--size-sm);white-space:nowrap;color:var(--plt-muted)}
#plt-app .precinct-secondary>button.active, #plt-modal .precinct-secondary>button.active{border-color:var(--plt-line);color:var(--gold);background:var(--plt-panel)}
#plt-app .precinct-secondary>button:hover, #plt-modal .precinct-secondary>button:hover{color:var(--gold)}
#plt-app .precinct-main, #plt-modal .precinct-main{max-width:1480px;margin:auto;padding:24px 32px 15px}
#plt-app .precinct-demo, #plt-modal .precinct-demo{border:1px solid var(--plt-line);background:var(--plt-panel);color:var(--plt-muted);font-size:var(--size-sm);padding:8px 13px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;border-radius:5px}
#plt-app .precinct-demo .quiet, #plt-modal .precinct-demo .quiet{font-size:var(--size-sm);white-space:nowrap}
#plt-app .precinct-hero, #plt-modal .precinct-hero{min-height:195px;position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--mist)) 40%, transparent);border-radius:9px;margin-bottom:23px;background:color-mix(in srgb, var(--blossom) 6%, var(--surface))}
#plt-app .precinct-hero>img, #plt-modal .precinct-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
#plt-app .precinct-hero:before, #plt-modal .precinct-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb, var(--ink) 92.9%, transparent) 0,color-mix(in srgb, var(--surface) 86.3%, transparent) 27%,color-mix(in srgb, var(--surface) 40.4%, transparent) 61%,color-mix(in srgb, var(--surface) 9%, transparent) 88%);z-index:-2}
#plt-app .precinct-hero:after, #plt-modal .precinct-hero:after{content:'';position:absolute;inset:8px;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 23.9%, transparent);border-radius:4px;pointer-events:none}
#plt-app .hero-text, #plt-modal .hero-text{padding:29px 33px;max-width:850px}
#plt-app .hero-text .eyebrow, #plt-modal .hero-text .eyebrow{font-size:var(--size-xs);letter-spacing:.17em;color:var(--gold)}
#plt-app .hero-text h1, #plt-modal .hero-text h1{font:var(--size-2xl)/1.18 var(--font-serif);color:var(--blossom);margin:10px 0 11px}
#plt-app .hero-text>p:last-of-type, #plt-modal .hero-text>p:last-of-type{font-size:var(--size-xs);line-height:1.8;color:var(--blossom);max-width:660px}
#plt-app .hero-actions, #plt-modal .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:19px}
#plt-app .hero-actions .outline, #plt-modal .hero-actions .outline{border-color:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 50.2%, transparent);background:color-mix(in srgb, var(--surface) 50.2%, transparent);color:var(--blossom)}
#plt-app .home-hero, #plt-modal .home-hero{min-height:257px}
#plt-app .home-hero>img, #plt-modal .home-hero>img{object-position:67% 47%}
#plt-app .home-hero:before, #plt-modal .home-hero:before{background:linear-gradient(90deg,color-mix(in srgb, var(--ink) 94.9%, transparent) 0,color-mix(in srgb, var(--surface) 80%, transparent) 32%,color-mix(in srgb, var(--surface) 32.2%, transparent) 63%,color-mix(in srgb, var(--surface) 0%, transparent))}
#plt-app .home-hero .hero-text, #plt-modal .home-hero .hero-text{max-width:760px;padding:33px}
#plt-app .home-hero h1, #plt-modal .home-hero h1{max-width:650px;font-size:var(--size-3xl)}
#plt-app .home-hero .hero-text>p:last-of-type, #plt-modal .home-hero .hero-text>p:last-of-type{font:italic var(--size-md)/1.75 var(--font-serif);max-width:470px}
#plt-app .vertical-seal, #plt-modal .vertical-seal{position:absolute;right:25px;top:22px;bottom:22px;writing-mode:vertical-rl;text-orientation:upright;font:var(--size-xs) var(--font-serif);color:var(--gold);letter-spacing:.28em;border:1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 39.6%, transparent);padding:12px 5px}
#plt-app .precinct-stats, #plt-modal .precinct-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 27px}
#plt-app .precinct-stats>div, #plt-modal .precinct-stats>div{border:1px solid var(--plt-line);border-radius:7px;background:var(--plt-panel);padding:17px 21px;min-width:0}
#plt-app .precinct-stats span, #plt-modal .precinct-stats span{display:block;font-size:var(--size-xs);letter-spacing:.1em;color:var(--plt-muted)}
#plt-app .precinct-stats b, #plt-modal .precinct-stats b{display:block;font:var(--size-2xl)/1.3 var(--font-serif);color:var(--gold);margin:5px 0 4px;font-variant-numeric:tabular-nums}
#plt-app .precinct-stats small, #plt-modal .precinct-stats small{display:block;font-size:var(--size-sm);color:var(--plt-muted);line-height:1.5}
#plt-app .precinct-stats:has(>div:nth-child(3):last-child), #plt-modal .precinct-stats:has(>div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .section-heading, #plt-modal .section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:23px 0 15px}
#plt-app .section-heading h2, #plt-modal .section-heading h2{font:var(--size-xl)/1.25 var(--font-serif);color:var(--plt-ink)}
#plt-app .section-heading p, #plt-modal .section-heading p{font-size:var(--size-xs);color:var(--plt-muted);margin-top:5px}
#plt-app .section-heading>.quiet, #plt-modal .section-heading>.quiet{font-size:var(--size-sm)}
#plt-app .dashboard-grid, #plt-modal .dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:28px}
#plt-app .dashboard-grid .section-heading, #plt-modal .dashboard-grid .section-heading{margin-top:0}
#plt-app .reading-preview, #plt-modal .reading-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
#plt-app .work-card, #plt-modal .work-card{min-width:0;background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
#plt-app .work-cover, #plt-modal .work-cover{position:relative;display:block;width:100%;border:0;border-bottom:1px solid var(--plt-line);background:radial-gradient(ellipse at top,color-mix(in srgb, var(--mist) 16.9%, transparent),transparent),var(--plt-field);padding:18px 36px;text-align:left}
#plt-app .work-cover .book-cover, #plt-modal .work-cover .book-cover{aspect-ratio:2/3;height:220px;width:auto;max-width:100%;margin:0 auto;border-radius:3px;box-shadow:7px 8px 17px color-mix(in srgb, var(--ink) 20%, transparent)}
#plt-app .work-cover .book-cover:has(img), #plt-modal .work-cover .book-cover:has(img){background:transparent}
#plt-app .book-cover:has(img) .cover-title, #plt-modal .book-cover:has(img) .cover-title, #plt-app .book-cover:has(img) .cover-author, #plt-modal .book-cover:has(img) .cover-author, #plt-app .book-cover:has(img) .cover-symbol, #plt-modal .book-cover:has(img) .cover-symbol{display:none}
#plt-app .work-cover-status, #plt-modal .work-cover-status{position:absolute;left:11px;top:11px;background:color-mix(in srgb, var(--ink) 90.2%, transparent);color:var(--blossom);border:1px solid color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 37.6%, transparent);border-radius:3px;padding:2px 7px;font-size:var(--size-xs)}
#plt-app .work-copy, #plt-modal .work-copy{padding:15px;flex:1;display:flex;flex-direction:column}
#plt-app .book-kind, #plt-modal .book-kind{font-size:var(--size-xs);letter-spacing:.05em;color:var(--gold)}
#plt-app .work-copy h3, #plt-modal .work-copy h3{font-size:var(--size-xl);line-height:1.2;margin:7px 0 5px;overflow-wrap:anywhere}
#plt-app .work-copy h3 .title-link, #plt-modal .work-copy h3 .title-link{font:inherit;color:var(--plt-ink);text-align:left}
#plt-app .work-author, #plt-modal .work-author{font-size:var(--size-sm);color:var(--plt-muted);line-height:1.5}
#plt-app .work-meta, #plt-modal .work-meta{font-size:var(--size-sm);color:var(--plt-muted);margin-top:7px;line-height:1.5}
#plt-app .work-foot, #plt-modal .work-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:auto;padding-top:13px}
#plt-app .work-foot .quiet, #plt-modal .work-foot .quiet{font-size:var(--size-sm)}
#plt-app .book-tea, #plt-modal .book-tea{font:var(--size-xl) var(--font-serif);color:var(--gold)}
#plt-app .book-tea small, #plt-modal .book-tea small{display:block;font:var(--size-xs) var(--font-sans);color:var(--plt-jade)}
#plt-app .work-copy .progress, #plt-modal .work-copy .progress{margin-top:12px;height:4px}
#plt-app .work-copy .progress-caption, #plt-modal .work-copy .progress-caption{font-size:var(--size-xs);margin-top:5px}
#plt-app .work-grid, #plt-modal .work-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:start}
#plt-app .reading-work-grid, #plt-modal .reading-work-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#plt-app .work-grid .work-cover, #plt-modal .work-grid .work-cover{padding:18px 27px}
#plt-app .work-grid .work-cover .book-cover, #plt-modal .work-grid .work-cover .book-cover{height:217px}
#plt-app .work-grid .work-copy h3, #plt-modal .work-grid .work-copy h3{font-size:var(--size-xl)}
#plt-app .work-grid .work-foot, #plt-modal .work-grid .work-foot{flex-wrap:wrap}
#plt-app .reading-intention, #plt-modal .reading-intention{border:1px solid var(--plt-line);border-radius:7px;background:var(--plt-soft);padding:20px;margin-top:16px}
#plt-app .reading-intention>div:not(.progress), #plt-modal .reading-intention>div:not(.progress){display:flex;align-items:baseline;gap:9px;margin:8px 0}
#plt-app .reading-intention b, #plt-modal .reading-intention b{font:var(--size-2xl) var(--font-serif);color:var(--gold)}
#plt-app .reading-intention span:not(.eyebrow), #plt-modal .reading-intention span:not(.eyebrow){font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .reading-intention .progress, #plt-modal .reading-intention .progress{margin:10px 0 15px}
#plt-app .desk-preview, #plt-modal .desk-preview{padding:9px 18px;margin:0}
#plt-app .desk-preview .row, #plt-modal .desk-preview .row{padding:13px 0}
#plt-app .desk-preview .row-main .title-link, #plt-modal .desk-preview .row-main .title-link{font-size:var(--size-sm)}
#plt-app .desk-preview .row-main small, #plt-modal .desk-preview .row-main small{font-size:var(--size-sm)}
#plt-app .precinct-link-grid, #plt-modal .precinct-link-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#plt-app .precinct-link, #plt-modal .precinct-link{display:flex;align-items:center;gap:12px;min-width:0;background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:6px;padding:8px;text-align:left;color:var(--plt-ink)}
#plt-app .precinct-link>img, #plt-modal .precinct-link>img{width:76px;height:60px;object-fit:cover;border-radius:3px}
#plt-app .precinct-link>span, #plt-modal .precinct-link>span{min-width:0}
#plt-app .precinct-link small, #plt-modal .precinct-link small{font:var(--size-xs) var(--font-serif);color:var(--gold);display:block;margin-bottom:4px}
#plt-app .precinct-link strong, #plt-modal .precinct-link strong{font:var(--size-lg)/1.2 var(--font-serif);display:block}
#plt-app .precinct-link>b, #plt-modal .precinct-link>b{font-size:var(--size-sm);color:var(--gold);margin-left:auto;margin-right:4px}
#plt-app .precinct-link:hover, #plt-modal .precinct-link:hover{border-color:var(--gold);background:var(--plt-raised)}
#plt-app .dashboard-bottom, #plt-modal .dashboard-bottom{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
#plt-app .dashboard-bottom .panel, #plt-modal .dashboard-bottom .panel{padding:20px}
#plt-app .dashboard-bottom .section-heading, #plt-modal .dashboard-bottom .section-heading{margin-top:0}
#plt-app .quote-feature, #plt-modal .quote-feature{border:1px solid var(--plt-line);border-radius:7px;background:var(--plt-panel);padding:25px 30px}
#plt-app .quote-feature blockquote, #plt-modal .quote-feature blockquote{font:italic var(--size-xl)/1.5 var(--font-serif);margin:15px 0;color:var(--plt-ink)}
#plt-app .quote-feature>p:not(.eyebrow), #plt-modal .quote-feature>p:not(.eyebrow){font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .quote-feature>.quiet, #plt-modal .quote-feature>.quiet{margin-top:14px}
#plt-app .precinct-footer, #plt-modal .precinct-footer{margin-top:35px;border-top:1px solid var(--plt-line);padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--plt-muted);font-size:var(--size-sm)}
#plt-app .precinct-footer em, #plt-modal .precinct-footer em{font:italic var(--size-sm) var(--font-serif)}
#plt-app .precinct-footer>div, #plt-modal .precinct-footer>div{display:flex;gap:17px}
#plt-app .precinct-footer .quiet, #plt-modal .precinct-footer .quiet{font-size:var(--size-sm)}
#plt-app .registry-gates, #plt-modal .registry-gates{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}
#plt-app .registry-gate, #plt-modal .registry-gate, #plt-app .reading-gate, #plt-modal .reading-gate{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--plt-line);background:var(--plt-panel);border-radius:8px;min-height:151px;color:var(--blossom);padding:23px;text-align:left}
#plt-app .registry-gate img, #plt-modal .registry-gate img, #plt-app .reading-gate img, #plt-modal .reading-gate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
#plt-app .registry-gate:before, #plt-modal .registry-gate:before, #plt-app .reading-gate:before, #plt-modal .reading-gate:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb, var(--surface) 93.7%, transparent),color-mix(in srgb, var(--surface) 28.6%, transparent));z-index:-1}
#plt-app .registry-gate>span, #plt-modal .registry-gate>span{display:flex;flex-direction:column;gap:9px;position:relative}
#plt-app .registry-gate small, #plt-modal .registry-gate small{font-size:var(--size-xs);letter-spacing:.12em;color:var(--gold)}
#plt-app .registry-gate strong, #plt-modal .registry-gate strong{font:var(--size-2xl) var(--font-serif)}
#plt-app .registry-gate strong em, #plt-modal .registry-gate strong em{font:var(--size-xl) var(--font-serif);margin-left:7px}
#plt-app .registry-gate>span>span, #plt-modal .registry-gate>span>span{font-size:var(--size-sm);color:var(--blossom)}
#plt-app .registry-gate.active, #plt-modal .registry-gate.active, #plt-app .reading-gate.active, #plt-modal .reading-gate.active{border-color:var(--gold);box-shadow:inset 0 0 0 2px color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 26.7%, transparent)}
#plt-app .precinct-toolbar, #plt-modal .precinct-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 17px;padding-bottom:13px;border-bottom:1px solid var(--plt-line);flex-wrap:wrap}
#plt-app .filter-pills, #plt-modal .filter-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#plt-app .filter-pill, #plt-modal .filter-pill{font-size:var(--size-xs);border:1px solid var(--plt-line);border-radius:20px;background:none;color:var(--plt-muted);padding:6px 13px}
#plt-app .filter-pill.active, #plt-modal .filter-pill.active{color:var(--plt-jade);border-color:color-mix(in srgb, var(--mist) 46.7%, transparent);background:var(--plt-soft)}
#plt-app .precinct-search, #plt-modal .precinct-search{display:flex;gap:9px;align-items:center;border:1px solid var(--plt-line);background:var(--plt-field);border-radius:5px;padding:7px 10px;width:280px;color:var(--plt-muted)}
#plt-app .precinct-search input, #plt-modal .precinct-search input{width:100%;min-width:0;border:0;outline:0;background:none;color:var(--plt-ink);font-size:var(--size-sm)}
#plt-app .precinct-toolbar .select, #plt-modal .precinct-toolbar .select{width:auto;min-width:110px;font-size:var(--size-sm)}
#plt-app .result-caption, #plt-modal .result-caption{font-size:var(--size-sm);color:var(--plt-muted);margin-bottom:16px}
#plt-app .reading-gates, #plt-modal .reading-gates{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
#plt-app .reading-gate, #plt-modal .reading-gate{min-height:162px;display:flex;align-items:flex-end}
#plt-app .reading-gate>span, #plt-modal .reading-gate>span{display:flex;flex-direction:column}
#plt-app .reading-gate b, #plt-modal .reading-gate b{font:var(--size-3xl) var(--font-serif)}
#plt-app .reading-gate strong, #plt-modal .reading-gate strong{font:var(--size-xl) var(--font-serif);margin:3px 0}
#plt-app .reading-gate small, #plt-modal .reading-gate small{font-size:var(--size-sm);color:var(--blossom)}
#plt-app .book-breadcrumb, #plt-modal .book-breadcrumb{display:flex;gap:15px;align-items:center;margin:0 0 20px;font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .book-profile-top, #plt-modal .book-profile-top{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.5fr);gap:35px}
#plt-app .profile-visual, #plt-modal .profile-visual{min-width:0}
#plt-app .profile-cover, #plt-modal .profile-cover{min-height:320px;height:420px;display:flex;justify-content:center;align-items:center;padding:20px;border:1px solid var(--plt-line);border-radius:9px;background:radial-gradient(ellipse at top,color-mix(in srgb, var(--blossom) 14%, var(--surface)),var(--plt-panel));overflow:hidden}
#plt-app .profile-cover>img, #plt-modal .profile-cover>img{height:100%;width:100%;object-fit:contain}
#plt-app .profile-cover>.book-cover, #plt-modal .profile-cover>.book-cover{width:245px;max-width:85%;height:366px;box-shadow:7px 12px 28px color-mix(in srgb, var(--ink) 33.3%, transparent)}
#plt-app .gallery-caption, #plt-modal .gallery-caption{display:flex;align-items:center;justify-content:space-between;font-size:var(--size-sm);color:var(--plt-muted);margin:9px 0}
#plt-app .gallery-caption .quiet, #plt-modal .gallery-caption .quiet{font-size:var(--size-sm)}
#plt-app .book-gallery, #plt-modal .book-gallery{display:flex;gap:9px;overflow-x:auto;padding:5px 1px}
#plt-app .book-gallery button, #plt-modal .book-gallery button{width:60px;height:76px;padding:5px;border:1px solid var(--plt-line);border-radius:4px;background:var(--plt-panel);flex-shrink:0}
#plt-app .book-gallery button.active, #plt-modal .book-gallery button.active{border-color:var(--gold)}
#plt-app .book-gallery img, #plt-modal .book-gallery img{width:100%;height:100%;object-fit:contain}
#plt-app .profile-info, #plt-modal .profile-info{padding-top:7px}
#plt-app .profile-info h1, #plt-modal .profile-info h1{font:var(--size-3xl)/1.15 var(--font-serif);margin:14px 0 8px}
#plt-app .byline, #plt-modal .byline{font-size:var(--size-sm);color:var(--plt-jade)}
#plt-app .book-summary, #plt-modal .book-summary{font-size:var(--size-sm);color:var(--plt-muted);line-height:1.9;margin:18px 0}
#plt-app .book-facts, #plt-modal .book-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;padding:20px 0;margin:18px 0;border-top:1px solid var(--plt-line);border-bottom:1px solid var(--plt-line)}
#plt-app .book-facts small, #plt-modal .book-facts small{font-size:var(--size-xs);color:var(--plt-muted);display:block;text-transform:uppercase;letter-spacing:.07em}
#plt-app .book-facts strong, #plt-modal .book-facts strong{font:var(--size-lg)/1.45 var(--font-serif);display:block;margin-top:4px}
#plt-app .profile-tags, #plt-modal .profile-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:19px}
#plt-app .profile-tabs, #plt-modal .profile-tabs{display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--plt-line);padding:15px 0;margin:15px 0 23px}
#plt-app .profile-tabs .tab, #plt-modal .profile-tabs .tab{padding:7px 16px;font-size:var(--size-xs)}
#plt-app .profile-content>.panel, #plt-modal .profile-content>.panel{margin-top:23px}
#plt-app .profile-content .precinct-stats, #plt-modal .profile-content .precinct-stats{max-width:750px}
#plt-app .edition-list, #plt-modal .edition-list{border:1px solid var(--plt-line);border-radius:8px;background:var(--plt-panel);overflow:hidden}
#plt-app .edition-row, #plt-modal .edition-row{display:flex;align-items:center;gap:17px;padding:18px 22px;border-bottom:1px solid var(--plt-line)}
#plt-app .edition-row:last-child, #plt-modal .edition-row:last-child{border-bottom:0}
#plt-app .edition-row>img, #plt-modal .edition-row>img{width:55px;height:82px;object-fit:contain;flex-shrink:0}
#plt-app .edition-monogram, #plt-modal .edition-monogram{width:55px;height:75px;border:1px solid var(--plt-line);background:var(--plt-soft);display:grid;place-items:center;font:var(--size-xl) var(--font-serif);color:var(--gold);border-radius:4px;flex-shrink:0}
#plt-app .edition-copy, #plt-modal .edition-copy{flex:1;min-width:0}
#plt-app .edition-copy h3, #plt-modal .edition-copy h3{font:var(--size-xl) var(--font-serif);margin:7px 0 5px}
#plt-app .edition-copy p, #plt-modal .edition-copy p{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .edition-copy small, #plt-modal .edition-copy small{display:block;font-size:var(--size-sm);color:var(--plt-muted);margin:4px 0}
#plt-app .edition-right, #plt-modal .edition-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#plt-app .edition-right>strong, #plt-modal .edition-right>strong{color:var(--gold);font-size:var(--size-sm)}
#plt-app .edition-right .quiet, #plt-modal .edition-right .quiet{font-size:var(--size-sm)}
#plt-app .legacy-note, #plt-modal .legacy-note{padding:15px 20px;border:1px solid var(--plt-line);color:var(--plt-muted);font-size:var(--size-xs);margin-top:15px}
#plt-app .character-mini-grid, #plt-modal .character-mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
#plt-app .character-mini-grid>button, #plt-modal .character-mini-grid>button{padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;border:1px solid var(--plt-line);border-radius:8px;background:var(--plt-panel)}
#plt-app .character-mini-grid .avatar, #plt-modal .character-mini-grid .avatar{width:68px;height:68px;margin-bottom:11px}
#plt-app .character-mini-grid strong, #plt-modal .character-mini-grid strong{font:var(--size-lg) var(--font-serif)}
#plt-app .character-mini-grid small, #plt-modal .character-mini-grid small{font-size:var(--size-sm);color:var(--plt-muted);margin-top:5px}
#plt-app .universe-grid, #plt-modal .universe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#plt-app .universe-card, #plt-modal .universe-card{border:1px solid var(--plt-line);background:var(--plt-panel);border-radius:9px;overflow:hidden}
#plt-app .universe-card>img, #plt-modal .universe-card>img{height:155px;object-fit:cover;width:100%}
#plt-app .universe-card>div, #plt-modal .universe-card>div{padding:21px}
#plt-app .universe-card h2, #plt-modal .universe-card h2{font:var(--size-2xl)/1.2 var(--font-serif);margin:7px 0}
#plt-app .universe-card p, #plt-modal .universe-card p{font-size:var(--size-xs);color:var(--plt-muted);line-height:1.8}
#plt-app .universe-counts, #plt-modal .universe-counts{display:flex;gap:11px;padding:12px 0;margin:8px 0 10px;font-size:var(--size-sm);color:var(--gold);border-top:1px solid var(--plt-line);border-bottom:1px solid var(--plt-line)}
#plt-app .world-profile, #plt-modal .world-profile{position:relative;isolation:isolate;min-height:260px;padding:34px;border:1px solid var(--plt-line);border-radius:9px;overflow:hidden;margin:15px 0 23px}
#plt-app .world-profile>img, #plt-modal .world-profile>img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:-2}
#plt-app .world-profile:before, #plt-modal .world-profile:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb, var(--ink) 94.9%, transparent),color-mix(in srgb, var(--surface) 25.9%, transparent));z-index:-1}
#plt-app .world-profile>div, #plt-modal .world-profile>div{max-width:650px}
#plt-app .world-profile h1, #plt-modal .world-profile h1{font:var(--size-3xl)/1.2 var(--font-serif);margin:12px 0;color:var(--blossom)}
#plt-app .world-profile p, #plt-modal .world-profile p{color:var(--blossom);font-size:var(--size-sm);line-height:1.9}
#plt-app .world-profile .outline, #plt-modal .world-profile .outline{margin-top:18px;color:var(--blossom);border-color:color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--mist)) 40%, transparent)}
#plt-app .adaptation-grid, #plt-modal .adaptation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:25px}
#plt-app .adaptation, #plt-modal .adaptation{padding:22px;margin:0}
#plt-app .adaptation h3, #plt-modal .adaptation h3{font:var(--size-xl) var(--font-serif);margin:12px 0}
#plt-app .adaptation p, #plt-modal .adaptation p{font-size:var(--size-xs);color:var(--plt-muted);margin:12px 0}
#plt-app .adaptation>div, #plt-modal .adaptation>div{display:flex;gap:6px}
#plt-app .wishlist-grid, #plt-modal .wishlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#plt-app .wish-card, #plt-modal .wish-card{display:flex;gap:20px;align-items:center;border:1px solid var(--plt-line);background:var(--plt-panel);padding:20px;border-radius:8px}
#plt-app .wish-card>button, #plt-modal .wish-card>button{border:0;background:none;padding:0;width:85px;min-width:85px}
#plt-app .wish-card>button img, #plt-modal .wish-card>button img{width:100%;height:125px;object-fit:contain}
#plt-app .wish-card .book-cover, #plt-modal .wish-card .book-cover{height:125px;width:85px}
#plt-app .wish-card>div, #plt-modal .wish-card>div{flex:1;min-width:0}
#plt-app .wish-card h3, #plt-modal .wish-card h3{font:var(--size-xl) var(--font-serif);margin:8px 0 5px}
#plt-app .wish-card h3 .title-link, #plt-modal .wish-card h3 .title-link{font:inherit}
#plt-app .wish-card p, #plt-modal .wish-card p{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .wish-card small, #plt-modal .wish-card small{font-size:var(--size-sm);color:var(--plt-muted);display:block;margin-top:6px}
#plt-app .wish-card strong, #plt-modal .wish-card strong{font-size:var(--size-sm);color:var(--gold);display:block;margin:9px 0}
#plt-app .wish-card .actions, #plt-modal .wish-card .actions{gap:13px}
#plt-app .wish-card .btn, #plt-modal .wish-card .btn, #plt-app .wish-card .quiet, #plt-modal .wish-card .quiet{font-size:var(--size-sm)}
#plt-app .quote-card, #plt-modal .quote-card{background:var(--plt-panel);border-color:var(--plt-line)}
#plt-app .quote-card blockquote, #plt-modal .quote-card blockquote{font:italic var(--size-xl)/1.5 var(--font-serif);margin:18px 0}
#plt-app .quote-source, #plt-modal .quote-source{font-size:var(--size-sm)!important;color:var(--gold)!important}
#plt-app .review-grid-new, #plt-modal .review-grid-new{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
#plt-app .review-paper, #plt-modal .review-paper{border:1px solid var(--plt-line);background:var(--plt-panel);padding:24px;border-radius:8px}
#plt-app .review-paper-head, #plt-modal .review-paper-head{display:flex;gap:15px;align-items:center;margin-bottom:20px}
#plt-app .review-paper-head .book-cover, #plt-modal .review-paper-head .book-cover{width:48px;height:72px;flex-shrink:0}
#plt-app .review-paper-head h3, #plt-modal .review-paper-head h3{font:var(--size-xl)/1.2 var(--font-serif);margin:6px 0}
#plt-app .review-paper-head .title-link, #plt-modal .review-paper-head .title-link{font-size:var(--size-xs);color:var(--plt-jade)}
#plt-app .review-body, #plt-modal .review-body, #plt-app .review-paper>p, #plt-modal .review-paper>p{white-space:pre-wrap;font-size:var(--size-sm);line-height:1.9;color:var(--plt-muted)}
#plt-app .review-paper h4, #plt-modal .review-paper h4{font:var(--size-xl) var(--font-serif);margin:15px 0 6px}
#plt-app .review-paper .card-foot, #plt-modal .review-paper .card-foot{margin-top:18px}
#plt-app .review-paper .card-foot small, #plt-modal .review-paper .card-foot small{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .review-waiting, #plt-modal .review-waiting{border:1px solid var(--plt-line);background:var(--plt-soft);border-radius:7px;padding:15px 20px;margin-bottom:20px}
#plt-app .review-waiting strong, #plt-modal .review-waiting strong{font-size:var(--size-xs);font-weight:400}
#plt-app .review-waiting>div, #plt-modal .review-waiting>div{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
#plt-app .currency-line, #plt-modal .currency-line{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 20px;font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .currency-line label, #plt-modal .currency-line label{display:flex;align-items:center;gap:10px;white-space:nowrap}
#plt-app .currency-line select, #plt-modal .currency-line select{width:100px}
#plt-app .ledger-table td strong, #plt-modal .ledger-table td strong{font-weight:400}
#plt-app .ledger-table td small, #plt-modal .ledger-table td small{display:block;font-size:var(--size-sm);color:var(--plt-muted);margin-top:4px}
#plt-app .money-cell, #plt-modal .money-cell{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
#plt-app .history-list, #plt-modal .history-list{max-width:1000px;margin:auto}
#plt-app .history-entry, #plt-modal .history-entry{display:flex;gap:22px;padding:20px 0;align-items:center;border-bottom:1px solid var(--plt-line)}
#plt-app .history-entry time, #plt-modal .history-entry time{width:95px;color:var(--plt-muted);font-size:var(--size-xs);flex-shrink:0}
#plt-app .history-dot, #plt-modal .history-dot{width:8px;height:8px;flex-shrink:0;border:2px solid var(--gold);border-radius:50%;position:relative}
#plt-app .history-entry>div, #plt-modal .history-entry>div{flex:1}
#plt-app .history-entry h3, #plt-modal .history-entry h3{font:var(--size-xl) var(--font-serif);margin:3px 0}
#plt-app .history-entry h3 .title-link, #plt-modal .history-entry h3 .title-link{font:inherit}
#plt-app .history-entry p, #plt-modal .history-entry p{font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .history-entry>.quiet, #plt-modal .history-entry>.quiet{font-size:var(--size-sm)}
#plt-app .book-rating-ribbon, #plt-modal .book-rating-ribbon{display:flex;flex-wrap:wrap;gap:15px;padding:13px 0}
#plt-app .book-rating-ribbon>button, #plt-modal .book-rating-ribbon>button{display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;text-align:left;color:var(--plt-ink)}
#plt-app .reading-rating-tile, #plt-modal .reading-rating-tile{width:50px;height:80px;object-fit:contain}
#plt-app .book-rating-ribbon .reading-rating-tile, #plt-modal .book-rating-ribbon .reading-rating-tile{width:44px;height:70px}
#plt-app .book-rating-ribbon span, #plt-modal .book-rating-ribbon span{display:flex;flex-direction:column;gap:3px}
#plt-app .book-rating-ribbon b, #plt-modal .book-rating-ribbon b{font:var(--size-lg) var(--font-serif);color:var(--gold)}
#plt-app .book-rating-ribbon small, #plt-modal .book-rating-ribbon small{font-size:var(--size-xs);color:var(--plt-muted)}
#plt-app .ratings-intro, #plt-modal .ratings-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border:1px solid var(--plt-line);background:var(--plt-panel);border-radius:7px;margin-bottom:20px}
#plt-app .ratings-intro h2, #plt-modal .ratings-intro h2{font:var(--size-xl) var(--font-serif);margin-bottom:8px}
#plt-app .ratings-intro p, #plt-modal .ratings-intro p{font-size:var(--size-xs);color:var(--plt-muted);max-width:730px}
#plt-app .ratings-grid, #plt-modal .ratings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#plt-app .book-rating-card, #plt-modal .book-rating-card{padding:18px;background:var(--plt-panel);border:1px solid var(--plt-line);border-radius:8px}
#plt-app .book-rating-card .row, #plt-modal .book-rating-card .row{border:0;padding:0}
#plt-app .book-rating-card .book-cover, #plt-modal .book-rating-card .book-cover{width:45px;height:68px;flex-shrink:0}
#plt-app .book-rating-card h3, #plt-modal .book-rating-card h3{font:var(--size-xl) var(--font-serif);margin:5px 0}
#plt-app .book-rating-card h3 .title-link, #plt-modal .book-rating-card h3 .title-link{font:inherit}
#plt-app .book-rating-card .book-rating-ribbon, #plt-modal .book-rating-card .book-rating-ribbon{border-top:1px solid var(--plt-line);border-bottom:1px solid var(--plt-line);margin:14px 0 10px;gap:10px}
#plt-app .book-rating-card .reading-rating-tile, #plt-modal .book-rating-card .reading-rating-tile{width:29px;height:46px}
#plt-app .book-rating-card .book-rating-ribbon b, #plt-modal .book-rating-card .book-rating-ribbon b{font-size:var(--size-md)}
#plt-app .book-rating-card .book-rating-ribbon small, #plt-modal .book-rating-card .book-rating-ribbon small{font-size:var(--size-xs)}
#plt-app .book-rating-card .card-foot, #plt-modal .book-rating-card .card-foot{font-size:var(--size-sm)}
#plt-app .book-rating-card .card-foot .quiet, #plt-modal .book-rating-card .card-foot .quiet{font-size:var(--size-sm)}
#plt-app .rating-form-layout, #plt-modal .rating-form-layout{display:grid;grid-template-columns:minmax(0,1fr)285px;gap:25px}
#plt-app .rating-meta, #plt-modal .rating-meta{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:17px}
#plt-app .book-criteria, #plt-modal .book-criteria{display:flex;flex-direction:column;gap:10px}
#plt-app .book-criterion, #plt-modal .book-criterion{display:flex;align-items:flex-start;gap:17px;border:1px solid var(--plt-line);border-radius:7px;background:var(--plt-panel);padding:20px}
#plt-app .criterion-number, #plt-modal .criterion-number{font:var(--size-xl) var(--font-serif);color:var(--gold);width:35px;flex-shrink:0}
#plt-app .book-criterion>div, #plt-modal .book-criterion>div{flex:1;min-width:0}
#plt-app .book-criterion h3, #plt-modal .book-criterion h3{font:var(--size-xl)/1.25 var(--font-serif);margin:1px 0 6px}
#plt-app .book-criterion p, #plt-modal .book-criterion p{font-size:var(--size-xs);color:var(--plt-muted);line-height:1.8}
#plt-app .book-criterion details, #plt-modal .book-criterion details{margin-top:11px}
#plt-app .book-criterion summary, #plt-modal .book-criterion summary{font-size:var(--size-sm);color:var(--plt-jade);cursor:pointer}
#plt-app .book-criterion textarea, #plt-modal .book-criterion textarea{width:100%;margin-top:8px;padding:8px;background:var(--plt-field);border:1px solid var(--plt-line);border-radius:4px;color:var(--plt-ink);font-size:var(--size-xs);resize:vertical}
#plt-app .criterion-score, #plt-modal .criterion-score{display:flex;gap:6px;align-items:center;flex-shrink:0}
#plt-app .criterion-score input, #plt-modal .criterion-score input{width:72px;padding:10px 4px 10px 10px;font-size:var(--size-md);background:var(--plt-field);border:1px solid var(--plt-line);border-radius:5px;color:var(--gold)}
#plt-app .criterion-score>span, #plt-modal .criterion-score>span{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .book-verdict, #plt-modal .book-verdict{align-self:start;position:sticky;top:18px;padding:23px;border:1px solid var(--plt-line);background:var(--plt-panel);border-radius:8px;text-align:center}
#plt-app .book-verdict-tile, #plt-modal .book-verdict-tile{height:224px;width:140px;object-fit:contain;margin:15px auto}
#plt-app .pending-verdict, #plt-modal .pending-verdict{width:120px;height:155px;border:1px solid var(--plt-line);display:grid;place-items:center;margin:20px auto;font:var(--size-2xl) var(--font-serif);color:var(--gold);border-radius:60px 60px 6px 6px}
#plt-app .book-verdict h2, #plt-modal .book-verdict h2{font:var(--size-xl) var(--font-serif);margin:10px 0}
#plt-app .book-verdict h3, #plt-modal .book-verdict h3{font:var(--size-xl)/1.4 var(--font-serif);color:var(--gold);margin:10px 0}
#plt-app .book-verdict p, #plt-modal .book-verdict p{font-size:var(--size-xs);color:var(--plt-muted);line-height:1.8}
#plt-app .book-verdict>.note, #plt-modal .book-verdict>.note{font-size:var(--size-sm);line-height:1.75;margin:16px 0}
#plt-app .calculated-book-score, #plt-modal .calculated-book-score{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid var(--plt-line);border-bottom:1px solid var(--plt-line);margin:16px 0}
#plt-app .calculated-book-score>span, #plt-modal .calculated-book-score>span{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .calculated-book-score>b, #plt-modal .calculated-book-score>b{font:var(--size-2xl) var(--font-serif);color:var(--plt-jade)}
#plt-app .calculated-book-score small, #plt-modal .calculated-book-score small{font:var(--size-xs) var(--font-sans);margin-left:3px;color:var(--plt-muted)}
#plt-app .seal-choice, #plt-modal .seal-choice{display:flex;gap:8px;align-items:center;text-align:left;font-size:var(--size-sm);margin:16px 0}
#plt-app .book-verdict>.btn, #plt-modal .book-verdict>.btn{width:100%}
#plt-app .book-verdict>.quiet, #plt-modal .book-verdict>.quiet{margin-top:12px;font-size:var(--size-sm)}
#plt-app .personal-book-ratings, #plt-modal .personal-book-ratings{margin-top:23px}
#plt-app .personal-book-grid, #plt-modal .personal-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:18px}
#plt-app .personal-book-grid>article, #plt-modal .personal-book-grid>article{min-width:0;border:1px solid var(--plt-line);background:var(--plt-panel);padding:16px;border-radius:7px}
#plt-app .personal-book-grid h3, #plt-modal .personal-book-grid h3{font:var(--size-xl) var(--font-serif);margin-bottom:10px}
#plt-app .personal-book-choice, #plt-modal .personal-book-choice{display:flex;align-items:center;gap:9px;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--plt-ink)}
#plt-app .personal-book-choice span, #plt-modal .personal-book-choice span{flex:1;min-width:0}
#plt-app .personal-book-choice b, #plt-modal .personal-book-choice b{font:var(--size-lg)/1.3 var(--font-serif);color:var(--gold);display:block}
#plt-app .personal-book-choice small, #plt-modal .personal-book-choice small{font-size:var(--size-sm);line-height:1.6;color:var(--plt-muted);display:block;margin-top:5px}
#plt-app .feeling-placeholder, #plt-modal .feeling-placeholder{width:50px;height:80px;flex:0 0 50px!important;display:grid;place-items:center;border:1px dashed var(--plt-line);color:var(--gold);font:var(--size-xl) var(--font-serif)}
#plt-app .personal-book-grid article>p, #plt-modal .personal-book-grid article>p{font-size:var(--size-sm);line-height:1.85;color:var(--plt-muted);margin:12px 0}
#plt-app .personal-book-grid .outline, #plt-modal .personal-book-grid .outline{margin:12px 10px 0 0}
#plt-app .personal-book-grid .quiet, #plt-modal .personal-book-grid .quiet{font-size:var(--size-sm)}
#plt-app .reading-tile-picker, #plt-modal .reading-tile-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}
#plt-app .reading-tile-picker>button, #plt-modal .reading-tile-picker>button, #plt-app .reading-tile-picker>article, #plt-modal .reading-tile-picker>article{padding:17px;border:1px solid var(--plt-line);background:var(--plt-panel);border-radius:7px;text-align:left;color:var(--plt-ink)}
#plt-app .reading-tile-picker>button[aria-pressed=true], #plt-modal .reading-tile-picker>button[aria-pressed=true]{border-color:var(--gold);background:var(--plt-soft)}
#plt-app .reading-tile-picker .reading-rating-tile, #plt-modal .reading-tile-picker .reading-rating-tile{width:105px;height:168px;margin:0 auto 13px}
#plt-app .reading-tile-picker strong, #plt-modal .reading-tile-picker strong{font-size:var(--size-xs);color:var(--gold);display:block;margin-bottom:6px}
#plt-app .reading-tile-picker h3, #plt-modal .reading-tile-picker h3{font:var(--size-xl)/1.3 var(--font-serif);margin:7px 0}
#plt-app .reading-tile-picker p, #plt-modal .reading-tile-picker p{font-size:var(--size-xs);line-height:1.8;color:var(--plt-muted)}
#plt-app .reading-scale-catalogue, #plt-modal .reading-scale-catalogue{margin-bottom:32px}
#plt-app .reading-scale-catalogue>h2, #plt-modal .reading-scale-catalogue>h2{font:var(--size-2xl) var(--font-serif);margin:8px 0}
#plt-app .reading-scale-catalogue>p, #plt-modal .reading-scale-catalogue>p{font-size:var(--size-sm);color:var(--plt-muted)}
#plt-app .meaning-detail, #plt-modal .meaning-detail{display:flex;gap:25px;align-items:flex-start}
#plt-app .meaning-detail .reading-rating-tile, #plt-modal .meaning-detail .reading-rating-tile{width:110px;height:176px;flex-shrink:0}
#plt-app .meaning-detail h2, #plt-modal .meaning-detail h2{font:var(--size-2xl) var(--font-serif);color:var(--gold);margin:10px 0}
#plt-app .meaning-detail h3, #plt-modal .meaning-detail h3{font:var(--size-xl) var(--font-serif);margin-bottom:12px}
#plt-app .meaning-detail p:not(.eyebrow), #plt-modal .meaning-detail p:not(.eyebrow){font-size:var(--size-sm);line-height:1.9;color:var(--plt-muted)}
#plt-app .pick-book-list, #plt-modal .pick-book-list{display:flex;flex-direction:column;gap:9px}
#plt-app .pick-book-list>button, #plt-modal .pick-book-list>button{display:flex;align-items:center;gap:14px;background:var(--plt-panel);border:1px solid var(--plt-line);padding:12px 15px;border-radius:6px;text-align:left;color:var(--plt-ink)}
#plt-app .pick-book-list .book-cover, #plt-modal .pick-book-list .book-cover{width:40px;height:60px;flex-shrink:0}
#plt-app .pick-book-list>button>span:nth-child(2), #plt-modal .pick-book-list>button>span:nth-child(2){flex:1}
#plt-app .pick-book-list b, #plt-modal .pick-book-list b{font:var(--size-xl) var(--font-serif);display:block}
#plt-app .pick-book-list small, #plt-modal .pick-book-list small{font-size:var(--size-sm);color:var(--plt-muted);display:block;margin-top:4px}
#plt-app .historical-verdict, #plt-modal .historical-verdict{padding:20px 0;border-bottom:1px solid var(--plt-line)}
#plt-app .historical-verdict h3, #plt-modal .historical-verdict h3{font:var(--size-xl) var(--font-serif)}
#plt-app .panel, #plt-modal .panel{border-color:var(--plt-line);background:var(--plt-panel);border-radius:8px}
#plt-app .panel h2, #plt-modal .panel h2{font-size:var(--size-xl)}
#plt-app .stats .stat, #plt-modal .stats .stat{background:var(--plt-panel)}
#plt-app .stats, #plt-modal .stats{gap:15px}
#plt-app .stat, #plt-modal .stat{border-color:var(--plt-line)}
#plt-app .graph-toolbar, #plt-modal .graph-toolbar{flex-wrap:wrap}
#plt-app .graph-wrap, #plt-modal .graph-wrap{max-width:100%;overflow:auto}
#plt-app .editor-tabs, #plt-modal .editor-tabs{overflow:auto}
#plt-app .dialog-body, #plt-modal .dialog-body{padding:25px}
#plt-app dialog, #plt-modal dialog{background:var(--plt-bg);border-color:var(--plt-line);max-height:92vh}
#plt-app dialog:has(.reading-tile-picker), #plt-modal dialog:has(.reading-tile-picker){width:min(1040px,95vw)}
#plt-app .dialog-head h2, #plt-modal .dialog-head h2{font-size:var(--size-2xl)}
#plt-app .field input, #plt-modal .field input, #plt-app .field select, #plt-modal .field select, #plt-app .field textarea, #plt-modal .field textarea{font-size:var(--size-sm)}
#plt-app .field>span, #plt-modal .field>span{font-size:var(--size-sm)}
#plt-app .notice, #plt-modal .notice{border:1px solid var(--plt-line);padding:14px 18px;background:var(--plt-soft);border-radius:5px;color:var(--plt-muted);font-size:var(--size-xs);margin-bottom:18px}
#plt-app .prose, #plt-modal .prose{white-space:pre-wrap;line-height:1.9;font-size:var(--size-sm);color:var(--plt-muted)}
@media(min-width:1750px){#plt-app .precinct-main, #plt-modal .precinct-main{max-width:1620px}
#plt-app .precinct-link-grid, #plt-modal .precinct-link-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1250px){#plt-app .precinct-masthead, #plt-modal .precinct-masthead{padding:18px 25px}
#plt-app .precinct-primary, #plt-modal .precinct-primary{padding-inline:20px}
#plt-app .precinct-primary>button, #plt-modal .precinct-primary>button{font-size:var(--size-sm);padding-inline:12px;gap:7px}
#plt-app .precinct-primary>button>span, #plt-modal .precinct-primary>button>span{font-size:var(--size-sm)}
#plt-app .precinct-main, #plt-modal .precinct-main{padding-inline:25px}
#plt-app .work-grid, #plt-modal .work-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#plt-app .reading-work-grid, #plt-modal .reading-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .precinct-link-grid, #plt-modal .precinct-link-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .dashboard-grid, #plt-modal .dashboard-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px}
#plt-app .reading-preview, #plt-modal .reading-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
#plt-app .reading-preview .work-card:nth-child(3), #plt-modal .reading-preview .work-card:nth-child(3){display:none}
#plt-app .ratings-grid, #plt-modal .ratings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#plt-app .universe-grid, #plt-modal .universe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#plt-app .book-profile-top, #plt-modal .book-profile-top{gap:27px}
#plt-app .profile-info h1, #plt-modal .profile-info h1{font-size:var(--size-3xl)}
#plt-app .personal-book-grid, #plt-modal .personal-book-grid{grid-template-columns:1fr}
#plt-app .personal-book-choice, #plt-modal .personal-book-choice{gap:17px}
#plt-app .personal-book-grid .reading-rating-tile, #plt-modal .personal-book-grid .reading-rating-tile{width:46px;height:74px}
#plt-app .personal-book-grid article>p, #plt-modal .personal-book-grid article>p{font-size:var(--size-xs)}
#plt-app .personal-book-grid>article, #plt-modal .personal-book-grid>article{padding:20px}
#plt-app .character-mini-grid, #plt-modal .character-mini-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:950px){#plt-app .masthead-tools .search, #plt-modal .masthead-tools .search{display:none}
#plt-app .precinct-masthead, #plt-modal .precinct-masthead{padding:17px 21px}
#plt-app .precinct-brand strong, #plt-modal .precinct-brand strong{font-size:var(--size-xl)}
#plt-app .precinct-primary>button, #plt-modal .precinct-primary>button{flex-shrink:0}
#plt-app .precinct-secondary, #plt-modal .precinct-secondary{justify-content:flex-start;padding:8px 17px}
#plt-app .precinct-main, #plt-modal .precinct-main{padding:20px}
#plt-app .precinct-hero, #plt-modal .precinct-hero{min-height:190px}
#plt-app .hero-text, #plt-modal .hero-text{padding:27px;max-width:700px}
#plt-app .hero-text h1, #plt-modal .hero-text h1{font-size:var(--size-2xl)}
#plt-app .home-hero h1, #plt-modal .home-hero h1{font-size:var(--size-3xl);max-width:500px}
#plt-app .home-hero, #plt-modal .home-hero{min-height:235px}
#plt-app .precinct-stats, #plt-modal .precinct-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
#plt-app .dashboard-grid, #plt-modal .dashboard-grid{grid-template-columns:1fr}
#plt-app .reading-preview, #plt-modal .reading-preview{grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .reading-preview .work-card:nth-child(3), #plt-modal .reading-preview .work-card:nth-child(3){display:flex}
#plt-app .dashboard-grid>aside, #plt-modal .dashboard-grid>aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}
#plt-app .dashboard-grid>aside>.section-heading, #plt-modal .dashboard-grid>aside>.section-heading{grid-column:1/-1;margin:0}
#plt-app .reading-intention, #plt-modal .reading-intention{margin:0}
#plt-app .work-grid, #plt-modal .work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .work-grid .work-cover .book-cover, #plt-modal .work-grid .work-cover .book-cover{height:210px}
#plt-app .precinct-link-grid, #plt-modal .precinct-link-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .precinct-link>img, #plt-modal .precinct-link>img{width:58px;height:56px}
#plt-app .precinct-link strong, #plt-modal .precinct-link strong{font-size:var(--size-md)}
#plt-app .precinct-link small, #plt-modal .precinct-link small{font-size:var(--size-sm)}
#plt-app .precinct-link, #plt-modal .precinct-link{gap:9px}
#plt-app .book-profile-top, #plt-modal .book-profile-top{grid-template-columns:240px minmax(0,1fr);gap:23px}
#plt-app .profile-cover, #plt-modal .profile-cover{height:350px;min-height:0;padding:15px}
#plt-app .profile-cover>.book-cover, #plt-modal .profile-cover>.book-cover{height:285px;width:190px}
#plt-app .book-facts, #plt-modal .book-facts{grid-template-columns:1fr 1fr;gap:14px;padding:15px 0}
#plt-app .profile-info h1, #plt-modal .profile-info h1{font-size:var(--size-2xl)}
#plt-app .book-summary, #plt-modal .book-summary{font-size:var(--size-xs)}
#plt-app .book-rating-ribbon, #plt-modal .book-rating-ribbon{gap:10px}
#plt-app .book-rating-ribbon .reading-rating-tile, #plt-modal .book-rating-ribbon .reading-rating-tile{width:33px;height:53px}
#plt-app .book-rating-ribbon b, #plt-modal .book-rating-ribbon b{font-size:var(--size-md)}
#plt-app .registry-gate strong em, #plt-modal .registry-gate strong em{font-size:var(--size-xl)}
#plt-app .rating-form-layout, #plt-modal .rating-form-layout{grid-template-columns:minmax(0,1fr)245px;gap:17px}
#plt-app .book-verdict, #plt-modal .book-verdict{padding:17px}
#plt-app .book-criterion, #plt-modal .book-criterion{gap:10px;padding:16px}
#plt-app .book-criterion h3, #plt-modal .book-criterion h3{font-size:var(--size-xl)}
#plt-app .criterion-number, #plt-modal .criterion-number{width:24px;font-size:var(--size-xl)}
#plt-app .criterion-score input, #plt-modal .criterion-score input{width:59px;padding-left:7px}
#plt-app .precinct-footer, #plt-modal .precinct-footer{flex-wrap:wrap}
#plt-app .wishlist-grid, #plt-modal .wishlist-grid{grid-template-columns:1fr}
#plt-app .review-grid-new, #plt-modal .review-grid-new{grid-template-columns:1fr}
#plt-app .adaptation-grid, #plt-modal .adaptation-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){#plt-app .precinct-brand strong, #plt-modal .precinct-brand strong{font-size:var(--size-lg)}
#plt-app .precinct-brand small, #plt-modal .precinct-brand small{font-size:var(--size-2xs)}
#plt-app .precinct-brand>span, #plt-modal .precinct-brand>span{width:34px;height:43px;font-size:var(--size-xl)}
#plt-app .precinct-brand, #plt-modal .precinct-brand{gap:9px}
#plt-app .precinct-masthead, #plt-modal .precinct-masthead{padding:14px 16px;gap:10px}
#plt-app .masthead-tools, #plt-modal .masthead-tools{gap:5px}
#plt-app .masthead-tools .outline, #plt-modal .masthead-tools .outline{font-size:var(--size-xs);padding:6px}
#plt-app .masthead-tools .icon-btn, #plt-modal .masthead-tools .icon-btn{width:29px;height:29px}
#plt-app .precinct-primary, #plt-modal .precinct-primary{padding:0 12px;gap:0}
#plt-app .precinct-primary>button, #plt-modal .precinct-primary>button{font-size:var(--size-sm);padding:12px}
#plt-app .precinct-secondary, #plt-modal .precinct-secondary{padding:7px 12px;gap:3px}
#plt-app .precinct-secondary>button, #plt-modal .precinct-secondary>button{font-size:var(--size-sm);padding:5px 8px}
#plt-app .precinct-main, #plt-modal .precinct-main{padding:16px}
#plt-app .precinct-demo, #plt-modal .precinct-demo{align-items:flex-start;gap:9px;font-size:var(--size-xs);flex-direction:column}
#plt-app .precinct-demo .quiet, #plt-modal .precinct-demo .quiet{font-size:var(--size-xs)}
#plt-app .precinct-hero, #plt-modal .precinct-hero{min-height:190px;margin-bottom:18px}
#plt-app .hero-text, #plt-modal .hero-text{padding:24px 22px;max-width:90%}
#plt-app .hero-text h1, #plt-modal .hero-text h1{font-size:var(--size-2xl)}
#plt-app .hero-text>p:last-of-type, #plt-modal .hero-text>p:last-of-type{font-size:var(--size-sm);line-height:1.7}
#plt-app .hero-text .eyebrow, #plt-modal .hero-text .eyebrow{font-size:var(--size-2xs)}
#plt-app .vertical-seal, #plt-modal .vertical-seal{right:12px;top:15px;bottom:15px;font-size:var(--size-sm);padding-inline:2px}
#plt-app .home-hero, #plt-modal .home-hero{min-height:240px}
#plt-app .home-hero h1, #plt-modal .home-hero h1{font-size:var(--size-2xl)}
#plt-app .home-hero .hero-text, #plt-modal .home-hero .hero-text{padding:25px 22px}
#plt-app .home-hero .hero-text>p:last-of-type, #plt-modal .home-hero .hero-text>p:last-of-type{font-size:var(--size-sm);max-width:310px}
#plt-app .home-hero:before, #plt-modal .home-hero:before{background:linear-gradient(90deg,color-mix(in srgb, var(--surface) 94.9%, transparent),color-mix(in srgb, var(--surface) 80%, transparent) 50%,color-mix(in srgb, var(--surface) 44.7%, transparent))}
#plt-app .hero-actions, #plt-modal .hero-actions{gap:8px}
#plt-app .hero-actions .btn, #plt-modal .hero-actions .btn, #plt-app .hero-actions .outline, #plt-modal .hero-actions .outline{font-size:var(--size-sm);padding:7px 10px}
#plt-app .precinct-stats, #plt-modal .precinct-stats{gap:10px;margin-bottom:21px}
#plt-app .precinct-stats>div, #plt-modal .precinct-stats>div{padding:13px}
#plt-app .precinct-stats span, #plt-modal .precinct-stats span{font-size:var(--size-xs)}
#plt-app .precinct-stats b, #plt-modal .precinct-stats b{font-size:var(--size-2xl)}
#plt-app .precinct-stats small, #plt-modal .precinct-stats small{font-size:var(--size-sm)}
#plt-app .section-heading h2, #plt-modal .section-heading h2{font-size:var(--size-xl)}
#plt-app .section-heading p, #plt-modal .section-heading p{font-size:var(--size-sm)}
#plt-app .section-heading .btn, #plt-modal .section-heading .btn, #plt-app .section-heading .quiet, #plt-modal .section-heading .quiet{font-size:var(--size-sm)}
#plt-app .reading-preview, #plt-modal .reading-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#plt-app .reading-preview .work-card:nth-child(3), #plt-modal .reading-preview .work-card:nth-child(3){display:none}
#plt-app .dashboard-grid>aside, #plt-modal .dashboard-grid>aside{grid-template-columns:1fr}
#plt-app .dashboard-grid>aside>.section-heading, #plt-modal .dashboard-grid>aside>.section-heading{grid-column:auto}
#plt-app .reading-intention, #plt-modal .reading-intention{padding:17px}
#plt-app .precinct-link-grid, #plt-modal .precinct-link-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#plt-app .precinct-link, #plt-modal .precinct-link{padding:7px;gap:8px}
#plt-app .precinct-link>img, #plt-modal .precinct-link>img{width:48px;height:49px}
#plt-app .precinct-link strong, #plt-modal .precinct-link strong{font-size:var(--size-md)}
#plt-app .precinct-link>b, #plt-modal .precinct-link>b{display:none}
#plt-app .precinct-link small, #plt-modal .precinct-link small{font-size:var(--size-xs)}
#plt-app .dashboard-bottom, #plt-modal .dashboard-bottom{grid-template-columns:1fr}
#plt-app .quote-feature blockquote, #plt-modal .quote-feature blockquote{font-size:var(--size-xl)}
#plt-app .work-grid, #plt-modal .work-grid, #plt-app .reading-work-grid, #plt-modal .reading-work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
#plt-app .work-cover, #plt-modal .work-cover, #plt-app .work-grid .work-cover, #plt-modal .work-grid .work-cover{padding:20px 18px}
#plt-app .work-cover .book-cover, #plt-modal .work-cover .book-cover, #plt-app .work-grid .work-cover .book-cover, #plt-modal .work-grid .work-cover .book-cover{height:195px}
#plt-app .work-copy, #plt-modal .work-copy{padding:12px}
#plt-app .work-copy h3, #plt-modal .work-copy h3, #plt-app .work-grid .work-copy h3, #plt-modal .work-grid .work-copy h3{font-size:var(--size-xl)}
#plt-app .work-author, #plt-modal .work-author{font-size:var(--size-sm)}
#plt-app .work-meta, #plt-modal .work-meta{font-size:var(--size-xs)}
#plt-app .work-foot, #plt-modal .work-foot{align-items:flex-start;gap:7px}
#plt-app .registry-gates, #plt-modal .registry-gates{gap:11px}
#plt-app .registry-gate, #plt-modal .registry-gate{padding:17px 13px;min-height:160px}
#plt-app .registry-gate small, #plt-modal .registry-gate small{font-size:var(--size-2xs)}
#plt-app .registry-gate strong, #plt-modal .registry-gate strong{font-size:var(--size-2xl)}
#plt-app .registry-gate strong em, #plt-modal .registry-gate strong em{display:block;font-size:var(--size-xl);margin:5px 0 0}
#plt-app .registry-gate>span>span, #plt-modal .registry-gate>span>span{font-size:var(--size-sm)}
#plt-app .precinct-toolbar, #plt-modal .precinct-toolbar{gap:12px}
#plt-app .precinct-toolbar>.actions, #plt-modal .precinct-toolbar>.actions{width:100%;flex-wrap:wrap}
#plt-app .precinct-search, #plt-modal .precinct-search{width:auto;flex:1;min-width:170px}
#plt-app .filter-pill, #plt-modal .filter-pill{font-size:var(--size-sm);padding:5px 10px}
#plt-app .reading-gates, #plt-modal .reading-gates{gap:9px}
#plt-app .reading-gate, #plt-modal .reading-gate{padding:16px 13px;min-height:150px}
#plt-app .reading-gate b, #plt-modal .reading-gate b{font-size:var(--size-2xl)}
#plt-app .reading-gate strong, #plt-modal .reading-gate strong{font-size:var(--size-xl)}
#plt-app .reading-gate small, #plt-modal .reading-gate small{font-size:var(--size-xs);line-height:1.5}
#plt-app .reading-gate img, #plt-modal .reading-gate img{object-position:60% center}
#plt-app .book-profile-top, #plt-modal .book-profile-top{grid-template-columns:1fr}
#plt-app .profile-visual, #plt-modal .profile-visual{max-width:450px;width:100%;margin:auto}
#plt-app .profile-cover, #plt-modal .profile-cover{height:340px}
#plt-app .profile-info h1, #plt-modal .profile-info h1{font-size:var(--size-2xl)}
#plt-app .book-facts, #plt-modal .book-facts{grid-template-columns:repeat(3,1fr);gap:13px}
#plt-app .book-facts strong, #plt-modal .book-facts strong{font-size:var(--size-md)}
#plt-app .book-facts small, #plt-modal .book-facts small{font-size:var(--size-xs)}
#plt-app .byline, #plt-modal .byline{font-size:var(--size-sm)}
#plt-app .book-rating-ribbon .reading-rating-tile, #plt-modal .book-rating-ribbon .reading-rating-tile{width:37px;height:59px}
#plt-app .book-rating-ribbon, #plt-modal .book-rating-ribbon{gap:12px}
#plt-app .book-tabs, #plt-modal .book-tabs{gap:6px}
#plt-app .profile-tabs .tab, #plt-modal .profile-tabs .tab{font-size:var(--size-sm);padding:6px 12px}
#plt-app .profile-content .precinct-stats>div, #plt-modal .profile-content .precinct-stats>div{padding:12px}
#plt-app .profile-content .precinct-stats b, #plt-modal .profile-content .precinct-stats b{font-size:var(--size-2xl)}
#plt-app .edition-row, #plt-modal .edition-row{padding:15px;align-items:flex-start;gap:12px;flex-wrap:wrap}
#plt-app .edition-copy, #plt-modal .edition-copy{min-width:160px}
#plt-app .edition-right, #plt-modal .edition-right{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;width:100%;padding-left:62px}
#plt-app .edition-copy h3, #plt-modal .edition-copy h3{font-size:var(--size-xl)}
#plt-app .edition-row>img, #plt-modal .edition-row>img, #plt-app .edition-monogram, #plt-modal .edition-monogram{width:44px;height:64px}
#plt-app .character-mini-grid, #plt-modal .character-mini-grid{grid-template-columns:repeat(3,1fr);gap:10px}
#plt-app .character-mini-grid>button, #plt-modal .character-mini-grid>button{padding:12px}
#plt-app .character-mini-grid strong, #plt-modal .character-mini-grid strong{font-size:var(--size-lg)}
#plt-app .character-mini-grid .avatar, #plt-modal .character-mini-grid .avatar{width:54px;height:54px}
#plt-app .universe-grid, #plt-modal .universe-grid{grid-template-columns:1fr}
#plt-app .universe-card>img, #plt-modal .universe-card>img{height:160px}
#plt-app .world-profile, #plt-modal .world-profile{padding:25px;min-height:230px}
#plt-app .world-profile h1, #plt-modal .world-profile h1{font-size:var(--size-2xl)}
#plt-app .world-profile p, #plt-modal .world-profile p{font-size:var(--size-xs)}
#plt-app .adaptation-grid, #plt-modal .adaptation-grid{grid-template-columns:1fr}
#plt-app .wish-card, #plt-modal .wish-card{gap:15px;padding:16px}
#plt-app .wish-card>button, #plt-modal .wish-card>button{width:68px;min-width:68px}
#plt-app .wish-card .book-cover, #plt-modal .wish-card .book-cover{width:68px;height:104px}
#plt-app .wish-card h3, #plt-modal .wish-card h3{font-size:var(--size-xl)}
#plt-app .currency-line, #plt-modal .currency-line{align-items:flex-start;flex-direction:column;gap:10px}
#plt-app .ledger-page .precinct-stats, #plt-modal .ledger-page .precinct-stats{grid-template-columns:1fr}
#plt-app .precinct-stats:has(>div:nth-child(3):last-child), #plt-modal .precinct-stats:has(>div:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
#plt-app .precinct-stats:has(>div:nth-child(3):last-child) b, #plt-modal .precinct-stats:has(>div:nth-child(3):last-child) b{font-size:var(--size-xl);overflow-wrap:anywhere}
#plt-app .history-entry, #plt-modal .history-entry{gap:12px;padding:17px 0;align-items:flex-start}
#plt-app .history-entry time, #plt-modal .history-entry time{font-size:var(--size-sm);width:73px;margin-top:4px}
#plt-app .history-entry h3, #plt-modal .history-entry h3{font-size:var(--size-xl)}
#plt-app .history-entry p, #plt-modal .history-entry p{font-size:var(--size-sm)}
#plt-app .history-dot, #plt-modal .history-dot{margin-top:9px}
#plt-app .history-entry>.quiet, #plt-modal .history-entry>.quiet{font-size:var(--size-sm)}
#plt-app .review-paper, #plt-modal .review-paper{padding:19px}
#plt-app .review-paper .card-foot, #plt-modal .review-paper .card-foot{flex-wrap:wrap;gap:14px}
#plt-app .rating-form-layout, #plt-modal .rating-form-layout{display:flex;flex-direction:column-reverse}
#plt-app .book-verdict, #plt-modal .book-verdict{width:100%;position:static;display:block;padding:21px;text-align:left}
#plt-app .book-verdict-tile, #plt-modal .book-verdict-tile{width:86px;height:138px;float:left;margin:6px 19px 12px 0}
#plt-app .book-verdict h2, #plt-modal .book-verdict h2{font-size:var(--size-xl)}
#plt-app .book-verdict h3, #plt-modal .book-verdict h3{font-size:var(--size-xl)}
#plt-app .book-verdict p, #plt-modal .book-verdict p{font-size:var(--size-xs)}
#plt-app .book-verdict>.note, #plt-modal .book-verdict>.note{font-size:var(--size-sm)}
#plt-app .calculated-book-score, #plt-modal .calculated-book-score{clear:both;padding:11px 0}
#plt-app .book-verdict>.btn, #plt-modal .book-verdict>.btn{width:auto;padding:9px 23px}
#plt-app .book-verdict>.quiet, #plt-modal .book-verdict>.quiet{margin-left:12px}
#plt-app .book-criterion, #plt-modal .book-criterion{padding:17px 14px;gap:9px}
#plt-app .book-criterion h3, #plt-modal .book-criterion h3{font-size:var(--size-xl)}
#plt-app .book-criterion p, #plt-modal .book-criterion p{font-size:var(--size-sm)}
#plt-app .criterion-number, #plt-modal .criterion-number{width:24px;font-size:var(--size-xl)}
#plt-app .criterion-score, #plt-modal .criterion-score{gap:3px}
#plt-app .criterion-score input, #plt-modal .criterion-score input{width:58px;padding:8px 4px 8px 7px;font-size:var(--size-sm)}
#plt-app .rating-meta, #plt-modal .rating-meta{gap:13px}
#plt-app .ratings-intro, #plt-modal .ratings-intro{align-items:flex-start;flex-direction:column;padding:20px}
#plt-app .ratings-intro h2, #plt-modal .ratings-intro h2{font-size:var(--size-xl)}
#plt-app .ratings-grid, #plt-modal .ratings-grid{grid-template-columns:1fr}
#plt-app .book-rating-card .book-rating-ribbon, #plt-modal .book-rating-card .book-rating-ribbon{justify-content:space-between;gap:10px}
#plt-app .book-rating-card .reading-rating-tile, #plt-modal .book-rating-card .reading-rating-tile{width:32px;height:51px}
#plt-app .book-rating-card .book-rating-ribbon b, #plt-modal .book-rating-card .book-rating-ribbon b{font-size:var(--size-md)}
#plt-app .reading-tile-picker, #plt-modal .reading-tile-picker{grid-template-columns:1fr 1fr;gap:12px}
#plt-app .reading-tile-picker>button, #plt-modal .reading-tile-picker>button, #plt-app .reading-tile-picker>article, #plt-modal .reading-tile-picker>article{padding:13px}
#plt-app .reading-tile-picker .reading-rating-tile, #plt-modal .reading-tile-picker .reading-rating-tile{width:85px;height:136px}
#plt-app .reading-tile-picker h3, #plt-modal .reading-tile-picker h3{font-size:var(--size-xl)}
#plt-app .reading-tile-picker p, #plt-modal .reading-tile-picker p{font-size:var(--size-xs)}
#plt-app .meaning-detail, #plt-modal .meaning-detail{gap:15px}
#plt-app .meaning-detail .reading-rating-tile, #plt-modal .meaning-detail .reading-rating-tile{width:70px;height:112px}
#plt-app .meaning-detail h2, #plt-modal .meaning-detail h2{font-size:var(--size-xl)}
#plt-app .meaning-detail h3, #plt-modal .meaning-detail h3{font-size:var(--size-xl)}
#plt-app .meaning-detail p:not(.eyebrow), #plt-modal .meaning-detail p:not(.eyebrow){font-size:var(--size-sm)}
#plt-app .dialog-body, #plt-modal .dialog-body{padding:19px}
#plt-app .dialog-head h2, #plt-modal .dialog-head h2{font-size:var(--size-xl)}
#plt-app .precinct-footer, #plt-modal .precinct-footer{font-size:var(--size-sm);gap:13px}
#plt-app .precinct-footer em, #plt-modal .precinct-footer em{display:none}
#plt-app .precinct-footer>div, #plt-modal .precinct-footer>div{gap:11px}
#plt-app .precinct-footer .quiet, #plt-modal .precinct-footer .quiet{font-size:var(--size-xs)}
#plt-app .quote-card blockquote, #plt-modal .quote-card blockquote{font-size:var(--size-xl)}}
@media(max-width:390px){#plt-app .precinct-main, #plt-modal .precinct-main{padding:12px}
#plt-app .precinct-brand strong, #plt-modal .precinct-brand strong{font-size:var(--size-md)}
#plt-app .precinct-brand small, #plt-modal .precinct-brand small{font-size:var(--size-3xs)}
#plt-app .precinct-brand>span, #plt-modal .precinct-brand>span{display:none}
#plt-app .precinct-masthead, #plt-modal .precinct-masthead{padding:13px}
#plt-app .precinct-secondary>button, #plt-modal .precinct-secondary>button{font-size:var(--size-xs)}
#plt-app .home-hero h1, #plt-modal .home-hero h1{font-size:var(--size-2xl)}
#plt-app .hero-text, #plt-modal .hero-text{max-width:96%;padding:22px 18px}
#plt-app .vertical-seal, #plt-modal .vertical-seal{display:none}
#plt-app .precinct-stats>div, #plt-modal .precinct-stats>div{padding:11px}
#plt-app .precinct-stats b, #plt-modal .precinct-stats b{font-size:var(--size-2xl)}
#plt-app .work-grid .work-cover, #plt-modal .work-grid .work-cover, #plt-app .work-cover, #plt-modal .work-cover{padding:17px 12px}
#plt-app .work-cover .book-cover, #plt-modal .work-cover .book-cover, #plt-app .work-grid .work-cover .book-cover, #plt-modal .work-grid .work-cover .book-cover{height:167px}
#plt-app .work-copy h3, #plt-modal .work-copy h3, #plt-app .work-grid .work-copy h3, #plt-modal .work-grid .work-copy h3{font-size:var(--size-lg)}
#plt-app .precinct-link>img, #plt-modal .precinct-link>img{width:39px;height:47px}
#plt-app .precinct-link strong, #plt-modal .precinct-link strong{font-size:var(--size-sm)}
#plt-app .precinct-link small, #plt-modal .precinct-link small{font-size:var(--size-xs)}
#plt-app .reading-gate, #plt-modal .reading-gate{padding:13px 9px}
#plt-app .reading-gate strong, #plt-modal .reading-gate strong{font-size:var(--size-xl)}
#plt-app .reading-gate small, #plt-modal .reading-gate small{font-size:var(--size-xs)}
#plt-app .registry-gate strong em, #plt-modal .registry-gate strong em{font-size:var(--size-xl)}
#plt-app .reading-tile-picker, #plt-modal .reading-tile-picker{grid-template-columns:1fr}
#plt-app .book-rating-card .book-rating-ribbon, #plt-modal .book-rating-card .book-rating-ribbon{display:grid;grid-template-columns:1fr 1fr}
#plt-app .criterion-number, #plt-modal .criterion-number{display:none}
#plt-app .book-facts, #plt-modal .book-facts{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){#plt-app *, #plt-modal *{}}
@media print{#plt-app .precinct-masthead, #plt-modal .precinct-masthead, #plt-app .precinct-primary, #plt-modal .precinct-primary, #plt-app .precinct-secondary, #plt-modal .precinct-secondary, #plt-app .precinct-demo, #plt-modal .precinct-demo, #plt-app .precinct-footer, #plt-modal .precinct-footer, #plt-app .precinct-toolbar, #plt-modal .precinct-toolbar, #plt-app .hero-actions, #plt-modal .hero-actions, #plt-app .profile-tabs, #plt-modal .profile-tabs, #plt-app .gallery-caption>.quiet, #plt-modal .gallery-caption>.quiet{display:none!important}
#plt-app .precinct-main, #plt-modal .precinct-main{padding:0;max-width:none}
#plt-app .precinct-hero, #plt-modal .precinct-hero{min-height:135px;break-inside:avoid}
#plt-app .precinct-hero .hero-text, #plt-modal .precinct-hero .hero-text{padding:20px}
#plt-app .precinct-hero .hero-text h1, #plt-modal .precinct-hero .hero-text h1{font-size:28px}
#plt-app .precinct-stats, #plt-modal .precinct-stats{grid-template-columns:repeat(4,1fr)}
#plt-app .precinct-stats b, #plt-modal .precinct-stats b{font-size:25px}
#plt-app .work-grid, #plt-modal .work-grid{grid-template-columns:repeat(4,1fr)}
#plt-app .work-card, #plt-modal .work-card, #plt-app .edition-row, #plt-modal .edition-row, #plt-app .review-paper, #plt-modal .review-paper, #plt-app .quote-card, #plt-modal .quote-card{break-inside:avoid}
#plt-app .work-grid .work-cover .book-cover, #plt-modal .work-grid .work-cover .book-cover{height:155px}
#plt-app .rating-form-layout, #plt-modal .rating-form-layout{display:block}
#plt-app .book-verdict, #plt-modal .book-verdict{position:static}
#plt-app .book-criterion, #plt-modal .book-criterion{break-inside:avoid}
#plt-app .book-criterion details, #plt-modal .book-criterion details{display:none}
#plt-app .personal-book-grid, #plt-modal .personal-book-grid{grid-template-columns:1fr}
#plt-app .reading-tile-picker, #plt-modal .reading-tile-picker{grid-template-columns:repeat(3,1fr)}
#plt-app .book-profile-top, #plt-modal .book-profile-top{grid-template-columns:240px 1fr}
#plt-app .profile-cover, #plt-modal .profile-cover{height:320px}
#plt-app .book-rating-ribbon button, #plt-modal .book-rating-ribbon button{color:inherit}
#plt-app .reading-scale-catalogue, #plt-modal .reading-scale-catalogue, #plt-app .personal-book-ratings, #plt-modal .personal-book-ratings{break-inside:auto}}
/* Drop 74 (shape): the palace carries the header and the sidebar menu - the design's own
   strip and page heroes compact to their actions; the home hero keeps its chamber art. */
#plt-app .precinct-primary, #plt-app .precinct-secondary, #plt-app .precinct-footer { display: none !important; }
#plt-app .precinct-hero { min-height: 0; padding: 0 0 12px; background: none !important; border: 0; box-shadow: none; }
#plt-app .precinct-hero img, #plt-app .precinct-hero .eyebrow,
#plt-app .precinct-hero h1, #plt-app .precinct-hero .hero-text > p { display: none !important; }
#plt-app .precinct-hero .hero-text { padding: 0; }
#plt-app .precinct-hero .hero-actions { margin: 0; }
#plt-app .precinct-hero .vertical-seal { display: none !important; }
/* Drop 74b: the precinct wears one header (the palace's); the design's own sidebar menu,
   named as decreed; the dialog in palace dress. */
@media (max-width: 1100px) { #plt-app .precinct-shell { grid-template-columns: 1fr; }  }
#plt-modal { background: var(--plt-panel); color: var(--plt-ink); border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 33.3%, transparent); border-radius: 12px; padding: 0;
  box-shadow: 0 24px 80px color-mix(in srgb, var(--ink) 80%, transparent); }
#plt-modal::backdrop { background: color-mix(in srgb, var(--ink) 85.1%, transparent); }
#plt-modal, #plt-modal * { font-family: var(--font-sans); }
/* Drop 74b: the Sovereign's frames crown the vault's covers - the cover sits in each
   frame's own window; the tome, the e-reader, the illustrated volume. */
#plt-app .plt-framed { position: relative; display: block; width: 100%; aspect-ratio: 1312 / 1199; }
#plt-app .plt-framed .plt-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#plt-app .work-cover:has(.plt-framed) { background: none; border: 0; aspect-ratio: auto; height: auto; }
#plt-app .work-cover .work-cover-status { z-index: 2; }
#plt-app .work-grid:has(.plt-framed) { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
#plt-app .precinct-hero .hero-actions, #plt-app .precinct-hero .hero-text { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0; }
/* Drop 74b: the cover caged in the frame's window - clipped, filling, never past the gilt. */
#plt-app .plt-framed .plt-window { position: absolute; overflow: hidden; border-radius: 3px; display: block; contain: layout paint; }
#plt-app .plt-framed[data-frame="book"] .plt-window { left: 9.2%; right: 33.6%; top: 14.5%; bottom: 7.5%; }
#plt-app .plt-framed[data-frame="ebook"] .plt-window { left: 12.9%; right: 33.6%; top: 12.6%; bottom: 9.2%; }
#plt-app .plt-framed[data-frame="illustrated"] .plt-window { left: 7.2%; right: 34.4%; top: 14.4%; bottom: 15.6%; }
#plt-app .plt-framed .plt-window > * { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  margin: 0 !important; aspect-ratio: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 0 !important; }
#plt-app .plt-framed .plt-window .book-cover img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================
   Drop 74f: the precinct in the palace's own dress - no second header
   frame, full width, the desk's stacks spaced, covers visible. */
#plt-app .precinct-hero::before, #plt-app .precinct-hero::after { display: none !important; content: none !important; }
#plt-app .precinct-hero { padding: 0 0 10px !important; min-height: 0 !important; margin: 0 !important; }
#plt-app .precinct-hero .hero-text, #plt-app .precinct-hero .hero-actions { margin: 0 !important; padding: 0 !important; max-width: none !important; }
#plt-app .precinct-main { max-width: none !important; padding: 0 !important; }
#plt-app .history-list, #plt-app .ratings-intro p, #plt-app .world-profile > div, #plt-app .profile-content .precinct-stats { max-width: none !important; }
#plt-app .grid2 > div { display: grid; gap: 18px; align-content: start; }
#plt-app .grid2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 980px) { #plt-app .grid2 { grid-template-columns: 1fr; } }
#plt-app .panel + .panel, #plt-app .card + .card { margin-top: 0; }
#plt-app .day-covers { display: flex; gap: 3px; margin: 4px 0; min-height: 0; }
#plt-app .day-covers .book-cover.mini-cover { width: 22px; height: 32px; border-radius: 2px; font-size: 0; box-shadow: var(--shadow-low); }
#plt-app .day-covers .book-cover.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .day-covers .book-cover.mini-cover .cover-symbol, #plt-app .day-covers .book-cover.mini-cover .cover-title, #plt-app .day-covers .book-cover.mini-cover .cover-author { display: none; }
#plt-app .quote-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
#plt-app .quote-card > .quote-face { grid-row: 1 / span 4; }
#plt-app .quote-card .quote-face .book-cover { width: 56px; height: 82px; border-radius: 4px; font-size: 0; box-shadow: var(--shadow-low); }
#plt-app .quote-card .quote-face .book-cover .cover-symbol, #plt-app .quote-card .quote-face .book-cover .cover-title, #plt-app .quote-card .quote-face .book-cover .cover-author { display: none; }
#plt-app .quote-card .quote-face .book-cover img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .profile-cover:has(.plt-framed) { background: none; border: 0; box-shadow: none; aspect-ratio: auto; padding: 0; }
#plt-app .reading-work-grid:has(.plt-framed) { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
/* Drop 74f: quests - spent books as chips, the spend dialog, the goals form */
#plt-app .plt-claims { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#plt-app .plt-claim { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--plt-line); border-radius: 8px; background: var(--plt-raised); font-size: var(--size-xs); max-width: 100%; }
#plt-app .plt-claim .book-cover.mini-cover { width: 22px; height: 32px; font-size: 0; border-radius: 2px; flex: 0 0 auto; }
#plt-app .plt-claim .book-cover.mini-cover .cover-symbol, #plt-app .plt-claim .book-cover.mini-cover .cover-title, #plt-app .plt-claim .book-cover.mini-cover .cover-author { display: none; }
#plt-app .plt-claim .book-cover.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-claim-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
#plt-app .plt-claim-name b { color: var(--gold); margin-left: 4px; }
#plt-app .plt-unclaim { border: 0; background: none; color: var(--plt-muted); cursor: pointer; font-size: var(--size-sm); line-height: 1; padding: 0 2px; }
#plt-app .plt-unclaim:hover { color: var(--plt-danger); }
#plt-app .plt-quest-actions { display: inline-flex; gap: 8px; align-items: center; }
#plt-app .plt-quest.is-sealed { border-color: color-mix(in srgb, var(--gold) 55%, var(--plt-line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
#plt-app .plt-quest-note { margin-top: 12px; font-size: var(--size-xs); }
#plt-modal .plt-spend-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--plt-line); border-radius: 10px; background: var(--plt-raised); color: var(--plt-ink); cursor: pointer; font: inherit; }
#plt-modal .plt-spend-row:hover { border-color: var(--gold); }
#plt-modal .plt-spend-row .book-cover.mini-cover { width: 36px; height: 52px; font-size: 0; border-radius: 3px; }
#plt-modal .plt-spend-row .book-cover.mini-cover .cover-symbol, #plt-modal .plt-spend-row .book-cover.mini-cover .cover-title, #plt-modal .plt-spend-row .book-cover.mini-cover .cover-author { display: none; }
#plt-modal .plt-spend-row .book-cover.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
#plt-modal .plt-spend-text { display: grid; gap: 2px; min-width: 0; }
#plt-modal .plt-spend-text small { color: var(--plt-muted); font-size: var(--size-xs); }
#plt-modal .plt-slot { font-size: var(--size-xs); color: var(--gold); border: 1px solid var(--plt-line); border-radius: 999px; padding: 2px 8px; }
#plt-modal .plt-slot.is-taken { color: var(--plt-muted); text-decoration: line-through; }
#plt-modal .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 12px 0 4px; }
#plt-modal .form-grid label { display: grid; gap: 6px; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .form-grid input { width: 100%; padding: 9px 11px; border: 1px solid var(--plt-line); border-radius: 8px; background: var(--plt-field); color: var(--plt-ink); font: inherit; }
#plt-modal .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* Drop 74f: the Sapphire dress inside the precinct - faces are book covers, art is framed */
#plt-app .plt-kd .kd-face.plt-face { width: 30px; height: 42px; border-radius: 4px; overflow: hidden; }
#plt-app .plt-kd .kd-face.plt-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plt-app .plt-kd .kd-face.plt-face .book-cover.mini-cover { width: 100%; height: 100%; font-size: 0; border-radius: 0; }
#plt-app .plt-kd .kd-face .cover-symbol, #plt-app .plt-kd .kd-face .cover-title, #plt-app .plt-kd .kd-face .cover-author { display: none; }
#plt-app .plt-face-door { border: 0; background: none; padding: 0; cursor: pointer; display: block; color: inherit; font: inherit; text-align: inherit; }
#plt-app .plt-order-title { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
#plt-app .plt-kd .kd-period button, #plt-app .plt-wl .wl-button, #plt-app .plt-wl .wl-filters button, #plt-app .plt-wl .wl-tabs button, #plt-app .plt-db .db-button, #plt-app .plt-db .db-tabs button { cursor: pointer; }
#plt-app .plt-wl .wl-art.plt-wl-art { border-radius: 8px; aspect-ratio: 3 / 4; width: 62px; }
#plt-app .plt-wl .wl-art.plt-wl-art img, #plt-app .plt-wl .wl-art.plt-wl-art .book-cover { width: 100%; height: 100%; object-fit: cover; font-size: 0; border-radius: 0; }
#plt-app .plt-wl .wl-art .cover-symbol, #plt-app .plt-wl .wl-art .cover-title, #plt-app .plt-wl .wl-art .cover-author { display: none; }
#plt-app .plt-wl .wl-wish-name { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; text-align: left; }
#plt-app .plt-db .db-art { aspect-ratio: 1312 / 1199; background: none; border: 0; box-shadow: none; border-radius: 0; width: 100%; }
#plt-app .plt-db .db-art .plt-framed { position: absolute; inset: 0; }
#plt-app .plt-db .db-title.plt-db-title { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; display: block; }
#plt-app .plt-db .db-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
#plt-app .plt-wl .wl-stat-value, #plt-app .plt-kd .kd-budget-amount strong { font-family: var(--font-serif); }
/* Drop 74h: the precinct's dialog stands in the middle of the screen. The design's
   own dialog rules were scoped to dialogs inside it, and a reset took its auto margin;
   both are given back to the dialog itself. */
#plt-modal { margin: auto !important; width: min(790px, calc(100vw - 32px)); max-height: 91vh; overflow: auto;
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 33.3%, transparent); border-radius: 12px; background: var(--surface); color: var(--blossom); padding: 0;
  box-shadow: 0 30px 140px color-mix(in srgb, var(--ink) 60%, transparent); }
#plt-modal.wide { width: min(1130px, calc(100vw - 32px)); }
#plt-modal:has(.reading-tile-picker) { width: min(1040px, 95vw); }
#plt-modal::backdrop { background: color-mix(in srgb, var(--ink) 85.1%, transparent); backdrop-filter: blur(4px); }
#plt-modal .book-grid { grid-template-columns: repeat(4, 1fr); }
#plt-modal .book-grid .book-cover { height: 205px; }
@media (max-width: 760px) { #plt-modal .book-grid { grid-template-columns: repeat(2, 1fr); } }
/* The palace's larger-text appearance zooms the page; 80vh keeps the dialog inside the screen at any zoom. */
#plt-modal { max-height: 80vh; }
/* Drop 75: an author's face in the Open Library chooser */
.lookup-row .ol-author-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--border); }
.lookup-row .ol-author-face.is-blank { display: grid; place-items: center; color: var(--gold); background: var(--surface-2); font-size: var(--size-lg); }
/* ==========================================================
   Drop 75: Look one up, covers three ways, the court line, the BL note
   ========================================================== */
#plt-modal .plt-look .note { color: var(--mist); font-size: var(--size-sm); line-height: 1.6; margin: 0 0 14px; }
#plt-modal .plt-look-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
#plt-modal .plt-look-bar input, #plt-modal .plt-look-bar select, #plt-modal .plt-cover-ways input {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--ink); color: var(--blossom); font: inherit; font-size: var(--size-sm); }
#plt-modal .plt-look-bar input:focus, #plt-modal .plt-cover-ways input:focus { outline: none; border-color: var(--gold); }
#plt-modal .plt-look-results { margin-top: 14px; display: grid; gap: 8px; max-height: 52vh; overflow: auto; padding-right: 4px; }
#plt-modal .plt-look-results > .muted { font-size: var(--size-xs); color: var(--mist); margin: 0; }
#plt-modal .plt-look-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 9px 12px;
  text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--blossom); font: inherit; cursor: pointer; }
#plt-modal .plt-look-row:hover:not(:disabled) { border-color: var(--gold); }
#plt-modal .plt-look-row:disabled { opacity: 0.6; cursor: progress; }
#plt-modal .plt-look-face { width: 46px; height: 66px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--ink); color: var(--gold); font-size: var(--size-lg); }
#plt-modal .plt-look-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plt-modal .plt-look-text { display: grid; gap: 3px; min-width: 0; }
#plt-modal .plt-look-text strong { font-size: var(--size-sm); font-weight: 500; }
#plt-modal .plt-look-text em { color: var(--mist); font-style: normal; font-weight: 400; }
#plt-modal .plt-look-text small { color: var(--mist); font-size: var(--size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-modal .plt-look-text .plt-look-src { color: var(--gold); letter-spacing: 0.04em; }
#plt-modal .plt-look-row b { color: var(--gold); font-weight: 500; font-size: var(--size-xs); white-space: nowrap; }
#plt-modal .plt-cover-ways { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin-top: 8px; }
#plt-modal .plt-cover-found .muted { color: var(--mist); font-size: var(--size-xs); margin: 8px 0 0; }
#plt-modal .plt-cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 10px; }
#plt-modal .plt-cover-grid button { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--ink); cursor: pointer; color: var(--mist); }
#plt-modal .plt-cover-grid button:hover { border-color: var(--gold); }
#plt-modal .plt-cover-grid img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; }
#plt-modal .plt-cover-grid small { font-size: var(--size-2xs); text-align: center; }
@media (max-width: 640px) { #plt-modal .plt-look-bar, #plt-modal .plt-cover-ways { grid-template-columns: 1fr; } }
#plt-app .plt-court-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
#plt-app .plt-court-line > span { color: var(--mist); font-size: var(--size-xs); letter-spacing: 0.08em; margin-right: 4px; }
#plt-app .plt-court-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--blossom); text-decoration: none; font-size: var(--size-sm); }
#plt-app .plt-court-chip:hover { border-color: var(--gold); color: var(--gold); }
#plt-app .plt-court-chip small { color: var(--mist); font-size: var(--size-2xs); }
#plt-app .plt-bl-note { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-lacquer) 45%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--lacquer) 18%, var(--surface)); font-size: var(--size-sm); }
#plt-app .plt-bl-note b { color: var(--blossom); letter-spacing: 0.1em; font-size: var(--size-xs); padding: 2px 8px; border-radius: 999px; background: var(--lacquer); }
#plt-app .plt-bl-note span { color: var(--blossom); flex: 1 1 320px; }
#plt-app .plt-bl-note a { color: var(--gold); text-decoration: none; }

/* ==========================================================================
   Drop 76: 演文亭 Page to Screen 書而影, and a drama's "From the book 原著"
   ========================================================================== */
#plt-app .plt-screen-bar .filter-pill small { color: var(--mist); font-size: var(--size-2xs); margin-left: 2px; }
#plt-app .plt-screen-note { margin: 0 0 14px; color: var(--mist); }
#plt-app .plt-screen-note a { color: var(--gold); }
#plt-app .plt-screen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
#plt-app .plt-screen-pair { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, var(--gold)); }
#plt-app .plt-screen-pair[hidden] { display: none; }
#plt-app .plt-screen-faces { display: grid; grid-template-columns: minmax(0, 1.75fr) auto minmax(0, 0.8fr); align-items: center; gap: 10px; }
#plt-app .plt-screen-book { display: block; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; }
#plt-app .plt-screen-book.is-empty { cursor: default; opacity: 0.8; }
#plt-app .plt-screen-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold); font-size: var(--size-xl); letter-spacing: 0.1em;
  background: color-mix(in srgb, var(--surface) 80%, var(--ink)); }
#plt-app .plt-screen-arrow { color: var(--gold); font-size: var(--size-xl); }
#plt-app .plt-screen-drama { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--surface) 80%, var(--ink)); color: var(--gold); font-size: var(--size-xl); }
#plt-app .plt-screen-drama img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-screen-drama span:not(.cjk) { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 4px; font-size: var(--size-xs);
  background: color-mix(in srgb, var(--ink) 65%, transparent); color: var(--blossom); }
#plt-app .plt-screen-drama:hover { border-color: var(--gold); }
#plt-app .plt-screen-text h3 { margin: 0 0 4px; font-size: var(--size-lg); line-height: 1.3; }
#plt-app .plt-screen-text h3 a { color: var(--blossom); }
#plt-app .plt-screen-text h3 a:hover { color: var(--gold); }
#plt-app .plt-screen-text h3 small { color: var(--mist); font-size: var(--size-xs); font-weight: 400; }
#plt-app .plt-screen-from { margin: 0 0 8px; color: var(--mist); font-size: var(--size-sm); }
#plt-app .plt-screen-from em { color: var(--blossom); }
#plt-app .plt-screen-title { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; cursor: pointer; text-align: left; }
#plt-app .plt-screen-title:hover { text-decoration: underline; }
#plt-app .plt-screen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#plt-app .plt-screen-chip { padding: 2px 8px; border-radius: 4px; font-size: var(--size-xs); color: var(--blossom);
  background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
#plt-app .plt-screen-chip.is-origin { color: var(--gold); }
#plt-app .plt-screen-chip.is-quiet { color: var(--mist); background: none; }
#plt-app .plt-screen-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#plt-modal .field { display: grid; gap: 6px; margin: 0 0 14px; color: var(--mist); font-size: var(--size-sm); }

/* The drama's page: its book, and finding it */
.adapt-row .ghost + .ghost { margin-left: 2px; }
.adapt-search { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.adapt-search input { flex: 1 1 auto; min-width: 0; }
.adapt-results { display: flex; flex-direction: column; }
.adapt-results .lookup-row { cursor: default; align-items: center; }
.adapt-results .lookup-row > .ghost { margin-left: auto; flex: none; }
.adapt-result-cover { flex: none; width: 46px; height: 66px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border); }
.adapt-result-cover.is-blank { display: grid; place-items: center; color: var(--gold); background: var(--surface-2); font-size: var(--size-lg); }
.adapt-results .lookup-sub { color: var(--mist); font-size: var(--size-sm); }
.adapt-results .lookup-sub.is-source { color: var(--gold); }

/* Drop 78: Scrolls to Critique holds dramas and books, each under its own heading. */
#mpc-app .crit-group { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; font: var(--size-lg) var(--font-serif); color: var(--blossom); }
#mpc-app .crit-group:first-of-type { margin-top: 4px; }
#mpc-app .crit-group small { font: var(--size-xs) var(--font-sans); letter-spacing: 0.06em; color: var(--mist); }

/* Drop 79: one book, two doors - a BL book's copy in the Pavilion shows its book. */
.ci-book { margin: 14px 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 90%, var(--gold)); }
.ci-book-head { display: flex; gap: 12px; align-items: flex-start; }
.ci-book-seal { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-size: var(--size-lg); }
.ci-book-words { display: grid; gap: 2px; min-width: 0; }
.ci-book-eyebrow { font-size: var(--size-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.ci-book-title { font: var(--size-lg) var(--font-serif); color: var(--blossom); }
.ci-book-title:hover { color: var(--gold); }
.ci-book-line { font-size: var(--size-sm); color: var(--mist); }
.ci-book-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ci-book-note { margin: 10px 0 0; font-size: var(--size-xs); color: var(--mist); }
#plt-app .plt-bl-tag { margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: var(--size-2xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--blossom); background: color-mix(in srgb, var(--accent-lacquer) 55%, transparent); }
#plt-embed { display: contents; }

/* Drop 80: Reading History - an audit, framed, each line with its book's face. */
#plt-app .plt-history-frame { border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
  box-shadow: inset 0 0 0 5px var(--plt-panel), inset 0 0 0 6px color-mix(in srgb, var(--gold) 16%, transparent); }
#plt-app .plt-history-frame .history-list { max-width: none; }
#plt-app .plt-history-frame .history-entry:last-child { border-bottom: 0; }
#plt-app .plt-hist-entry { align-items: center; }
#plt-app .plt-hist-face { flex: none; display: block; padding: 0; border: 0; background: none; border-radius: 3px; }
#plt-app .plt-hist-face .book-cover.mini-cover { width: 44px; height: 64px; border-radius: 3px; box-shadow: var(--shadow-low); }
#plt-app .plt-hist-face .book-cover.mini-cover img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-hist-face.is-gone { display: grid; place-items: center; width: 44px; height: 64px; border: 1px dashed var(--plt-line); color: var(--plt-muted); font-family: var(--font-cjk); }
#plt-app .plt-hist-face:hover .book-cover { outline: 1px solid var(--gold); outline-offset: 2px; }
#plt-app .plt-hist-text { flex: 1; min-width: 0; }
#plt-app .history-entry .plt-hist-by { margin: 0 0 2px; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .history-entry > .plt-hist-door { flex: none; white-space: nowrap; font-size: var(--size-sm); }
#plt-app .plt-hist-count { font-size: var(--size-xs); color: var(--plt-muted); white-space: nowrap; }
#plt-app .plt-hist-more { text-align: center; padding: 16px 0 4px; }
#plt-app .plt-hist-foot { margin: 0; padding: 12px 21px 16px; font-size: var(--size-xs); color: var(--plt-muted); border-top: 1px solid var(--plt-line); }
@media (max-width: 640px) {
  #plt-app .plt-hist-entry { flex-wrap: wrap; }
  #plt-app .plt-hist-entry time { width: 100%; margin: 0; }
  #plt-app .plt-hist-entry .history-dot { display: none; }
  #plt-app .history-entry > .plt-hist-door { margin-left: 56px; }
}

/* Drop 80: the Reading Calendar wears the palace calendar's own colours - the grid's
   lines in the border colour, each day on the surface, chips with an accent bar.
   (Before, the palace's .calendar rule painted the whole grid in --border, brown,
   because the precinct's day cells were transparent.) */
#plt-app .plt-cal-panel .calendar-scroll { padding: 0 21px 21px; }
#plt-app .calendar.plt-cal { gap: 1px; background: var(--border); border: var(--hairline); border-radius: var(--radius-sm); overflow: hidden; min-width: 660px; }
#plt-app .plt-cal .calendar-day { font-size: var(--size-3xs); padding: 0.4rem; }
#plt-app .plt-cal .calendar-cell { min-height: 6.4rem; padding: 0.3rem; gap: 0.2rem; }
#plt-app .plt-cal-top { display: flex; justify-content: space-between; align-items: center; min-height: 1rem; }
#plt-app .plt-cal .calendar-number { font-size: var(--size-2xs); }
#plt-app .plt-cal-mark { font-size: var(--size-3xs); color: var(--accent); }
#plt-app .plt-cal-mark.is-freeze { color: var(--mist); }
#plt-app .plt-cal .day-event { align-items: center; gap: 0.25rem; padding: 0.12rem 0.25rem; }
#plt-app .plt-cal-read img { flex: none; width: 0.8rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 1px; }
#plt-app .plt-cal .day-what { font-size: var(--size-3xs); }
#plt-app .plt-cal .day-time { font-size: var(--size-3xs); white-space: nowrap; }
#plt-app .plt-cal-words { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
#plt-app .plt-cal-words .day-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#plt-app .plt-cal-read img { width: 0.95rem; }

/* Drop 80: the Reading Bracket - the owner's design, in palace colours. */
#plt-app .plt-bk-summary { display: grid; gap: 10px; }
#plt-app .plt-bk-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; max-width: 640px; }
#plt-app .plt-bk-chip { display: grid; gap: 4px; justify-items: center; font-size: var(--size-3xs); color: var(--plt-muted); letter-spacing: 0.06em; text-transform: uppercase; }
#plt-app .plt-bk-chip > img, #plt-app .plt-bk-chip > b { width: 100%; max-width: 40px; aspect-ratio: 35 / 52; border-radius: 4px; object-fit: cover; }
#plt-app .plt-bk-chip > b { display: grid; place-items: center; font: 600 var(--size-sm) var(--font-serif); color: var(--plt-muted);
  border: 1px dashed color-mix(in srgb, var(--mist) 35%, transparent); background: color-mix(in srgb, var(--blossom) 4%, var(--surface)); }
#plt-app .plt-bk-line { margin: 0; font-size: var(--size-sm); color: var(--plt-ink); }
#plt-app .plt-bk-line b { color: var(--gold); font-weight: 600; }
#plt-app .plt-bk-steps { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; font: var(--size-md) var(--font-serif); color: var(--plt-ink); }
#plt-app .plt-bk-steps button:disabled { opacity: 0.35; cursor: default; }
#plt-modal.plt-bk-modal { width: min(770px, calc(100vw - 24px)); border-radius: 16px; }
#plt-modal.plt-bk-modal .dialog-head { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 0; border: 0; background: none; }
#plt-modal.plt-bk-modal .dialog-head > div { display: none; }
#plt-modal.plt-bk-modal .dialog-head .close { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blossom) 8%, var(--surface)); color: var(--plt-muted); font-size: var(--size-lg); line-height: 1; }
#plt-modal.plt-bk-modal .dialog-head .close:hover { color: var(--blossom); }
#plt-modal .plt-bk-wrap { position: relative; padding: 22px 20px 20px; text-align: center; }
#plt-modal .plt-bk-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 700 var(--size-2xs)/1 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); }
#plt-modal .plt-bk-eyebrow svg { width: 13px; height: 13px; }
#plt-modal .plt-bk-year { margin: 12px 0 6px; font: 700 var(--size-xl)/1.1 var(--font-serif); color: var(--gold); }
#plt-modal .plt-bk-lede { max-width: 310px; margin: 0 auto; font-size: var(--size-xs); line-height: 1.55; color: var(--plt-muted); }
#plt-modal .plt-bk-scroll { overflow-x: auto; }
#plt-modal .plt-bk { display: flex; justify-content: center; align-items: center; gap: 12px; width: max-content; margin: 22px auto 0; }
#plt-modal .plt-bk-side { display: flex; flex-direction: column; gap: 25px; }
#plt-modal .plt-bk-quarter { display: flex; align-items: center; }
#plt-modal .plt-bk-col { display: flex; flex-direction: column; justify-content: center; }
#plt-modal .plt-bk-months { gap: 8px; }
#plt-modal .plt-bk-month { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#plt-modal .plt-bk-label { font: 700 var(--size-3xs)/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plt-muted); }
#plt-modal .plt-bk-r1 { gap: 19px; }
#plt-modal .plt-bk-link { flex: none; width: 10px; height: 1px; margin: 0 1px; background: color-mix(in srgb, var(--mist) 30%, transparent); }
#plt-modal .plt-bk-slot { position: relative; display: grid; place-items: center; width: 35px; height: 52px; padding: 0; overflow: hidden; border-radius: 4px;
  border: 1px dashed color-mix(in srgb, var(--mist) 32%, transparent); background: color-mix(in srgb, var(--blossom) 4%, var(--surface)); color: var(--plt-muted); }
#plt-modal .plt-bk-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plt-modal .plt-bk-slot.is-set { border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); background: var(--surface); box-shadow: var(--shadow-low); }
#plt-modal .plt-bk-slot.is-ready { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); animation: plt-bk-call 2.4s var(--ease) infinite; }
#plt-modal .plt-bk-slot.is-quiet { cursor: default; }
#plt-modal .plt-bk-slot:not(.is-quiet):hover { border-color: var(--gold); }
#plt-modal .plt-bk-word { padding: 2px; font-size: var(--size-3xs); line-height: 1.2; color: var(--blossom); overflow: hidden; }
@keyframes plt-bk-call { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); } }
#plt-modal .plt-bk-centre { display: flex; align-items: center; gap: 13px; }
#plt-modal .plt-bk-crownwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#plt-modal .plt-bk-crownyear { font: 700 var(--size-2xs)/1 var(--font-serif); letter-spacing: 0.08em; color: var(--plt-muted); }
#plt-modal .plt-bk-crownword { font: 600 var(--size-2xs)/1 var(--font-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--blossom); }
#plt-modal .plt-bk-slot.is-crown { width: 62px; height: 90px; border: 1px dashed var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); color: var(--gold); border-radius: 6px; }
#plt-modal .plt-bk-slot.is-crown.is-set { border-style: solid; }
#plt-modal .plt-bk-trophy svg { width: 18px; height: 18px; }
#plt-modal .plt-bk-foot { margin-top: 22px; }
#plt-modal .plt-bk-final { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--plt-line); border-radius: 999px; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-bk-pick { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; border-radius: 16px;
  background: color-mix(in srgb, var(--ink) 80%, transparent); }
#plt-modal .plt-bk-card { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 20px; text-align: left; border-radius: 12px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); box-shadow: var(--shadow-high); }
#plt-modal .plt-bk-x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--blossom) 8%, var(--surface)); color: var(--plt-muted); font-size: var(--size-md); line-height: 1; }
#plt-modal .plt-bk-kicker { margin: 0 30px 6px 0; font: 700 var(--size-2xs)/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
#plt-modal .plt-bk-ask { margin: 0 0 12px; font: var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
#plt-modal .plt-bk-options { display: grid; gap: 8px; }
#plt-modal .plt-bk-options.is-duel { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#plt-modal .plt-bk-option { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid var(--plt-line); border-radius: 10px; background: color-mix(in srgb, var(--blossom) 3%, var(--surface)); color: var(--plt-ink); }
#plt-modal .plt-bk-options.is-duel .plt-bk-option { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 10px; }
#plt-modal .plt-bk-options.is-duel .plt-bk-optface { width: 84px; height: 124px; }
#plt-modal .plt-bk-option:hover { border-color: var(--gold); }
#plt-modal .plt-bk-optface { display: block; width: 40px; height: 58px; overflow: hidden; border-radius: 4px; }
#plt-modal .plt-bk-optface img, #plt-modal .plt-bk-optface .book-cover { width: 100%; height: 100%; object-fit: cover; }
#plt-modal .plt-bk-opttext { display: grid; gap: 2px; min-width: 0; }
#plt-modal .plt-bk-opttext strong { font: var(--size-md)/1.25 var(--font-serif); color: var(--blossom); }
#plt-modal .plt-bk-opttext small { font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-bk-chosen { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
#plt-modal .plt-bk-chosen .book-cover { flex: none; width: 56px; height: 82px; }
#plt-modal .plt-bk-chosen h3 { margin: 0 0 2px; font: var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); }
#plt-modal .plt-bk-chosen p { margin: 0; font-size: var(--size-sm); color: var(--plt-muted); }
#plt-modal .plt-bk-chosen small { display: block; margin-top: 6px; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-bk-warn { margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); font-size: var(--size-sm); color: var(--plt-ink); }
#plt-modal .plt-bk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Drop 81: a book in a picker is a book, not a face - upright, its cover. */
.picker-face.is-book { width: 1.45rem; height: 2.1rem; border-radius: 2px; }
#plt-modal .picker-label, #plt-app .picker-label { font-size: var(--size-sm); }
#plt-modal .picker-hint, #plt-app .picker-hint { font-size: var(--size-2xs); }
#plt-modal .picker-row, #plt-app .picker-row { padding: 6px 10px; }
#plt-modal .picker-list, #plt-app .picker-list { max-height: 320px; border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
#plt-modal .picker-face.is-book, #plt-app .picker-face.is-book { width: 26px; height: 38px; }

/* Drop 81: lists of books, narrowed by typing. */
#plt-modal .plt-finder { display: grid; gap: 10px; }
#plt-modal .plt-finder-q { width: 100%; position: sticky; top: 0; z-index: 2; }
#plt-modal .plt-finder-rows { display: grid; gap: 8px; }
#plt-modal .plt-finder-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; text-align: left;
  padding: 10px 14px; border: 1px solid var(--plt-line); border-radius: 8px; background: var(--plt-panel); color: var(--plt-ink); }
#plt-modal .plt-finder-row:hover { border-color: var(--gold); }
#plt-modal .plt-finder-row .book-cover { width: 40px; height: 60px; }
#plt-modal .plt-finder-text { display: grid; gap: 3px; min-width: 0; }
#plt-modal .plt-finder-text b { font: var(--size-lg)/1.25 var(--font-serif); color: var(--blossom); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-modal .plt-finder-text small { font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-finder .plt-spend-row { margin-top: 0; }
#plt-modal .plt-finder-more, #plt-modal .plt-finder-none { margin: 4px 2px; }
#plt-modal .plt-bookpick .picker { margin-top: 6px; }
#plt-modal .plt-bookpick-chosen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
#plt-modal .plt-bookpick-chip { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px;
  border: 1px solid var(--plt-line); border-radius: 8px; background: color-mix(in srgb, var(--blossom) 3%, var(--surface)); }
#plt-modal .plt-bookpick-chip .book-cover { width: 30px; height: 44px; }
#plt-modal .plt-bookpick-name { display: grid; min-width: 0; }
#plt-modal .plt-bookpick-name b { font-size: var(--size-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-modal .plt-bookpick-name small { font-size: var(--size-2xs); color: var(--plt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-modal .plt-bookpick-drop { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--plt-muted); font-size: var(--size-md); line-height: 1; }
#plt-modal .plt-bookpick-drop:hover { color: var(--blossom); background: color-mix(in srgb, var(--accent-lacquer) 30%, transparent); }
#plt-modal .plt-bookpick-count { display: block; margin-top: 8px; font-size: var(--size-xs); color: var(--plt-muted); }

/* Drop 81: the Pavilion of Transforming Tales - its worlds are Collected Works' works. */
#plt-app .plt-world-card h2 .plt-bl-tag, #plt-app .plt-world-profile h1 .plt-bl-tag { font-size: var(--size-xs); vertical-align: middle; }
#plt-app .plt-world-card .plt-world-original { margin: -4px 0 6px; font-style: italic; }
#plt-app .plt-world-doors { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#plt-app .plt-world-cw { font-size: var(--size-sm); color: var(--plt-muted); text-decoration: none; }
#plt-app .plt-world-cw:hover { color: var(--gold); }
#plt-app .plt-world-back { margin: 4px 0 0; }
#plt-app .plt-world-wait { padding: 30px 0; }
#plt-app .plt-world-profile .plt-world-original { margin: -6px 0 8px; font-style: italic; color: var(--blossom); }
#plt-app .plt-world-profile .plt-world-facts { font-size: var(--size-sm); letter-spacing: 0.04em; color: var(--blossom); }
#plt-app .plt-world-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
#plt-app .plt-world-tools .outline { margin-top: 0; }
#plt-app a.outline.plt-world-cw { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--mist)) 40%, transparent); border-radius: 6px; color: var(--blossom); }
#plt-app .plt-world-journey { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; padding: 12px 16px; border: 1px solid var(--plt-line);
  border-radius: 8px; font-size: var(--size-sm); color: var(--plt-muted); background: color-mix(in srgb, var(--gold) 4%, var(--plt-panel)); }
#plt-app .plt-world-journey b { color: var(--plt-ink); font-weight: 600; }
#plt-app .plt-exists { margin-bottom: 26px; }
#plt-app .plt-exists-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 180px; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--plt-line); }
#plt-app .plt-exists-row:last-of-type { border-bottom: 0; }
#plt-app .plt-exists-face { display: grid; place-items: center; width: 52px; height: 74px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--gold) 8%, var(--surface)); border: 1px solid var(--plt-line); }
#plt-app .plt-exists-face img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-exists-face .cjk { font: var(--size-xl) var(--font-cjk); color: var(--gold); }
#plt-app .plt-exists-text h3 { margin: 0 0 4px; font: var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
#plt-app .plt-exists-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: var(--size-sm); color: var(--plt-muted); }
#plt-app .plt-exists-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--size-2xs); border: 1px solid var(--plt-line); color: var(--plt-ink);
  background: color-mix(in srgb, var(--blossom) 4%, transparent); }
#plt-app .plt-exists-badge.is-known { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
#plt-app .plt-exists-badge.is-some { color: var(--blossom); border-color: color-mix(in srgb, var(--blossom) 33.3%, transparent); }
#plt-app .plt-exists-badge.is-whole { color: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 50%, transparent); }
#plt-app .plt-exists-titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#plt-app .plt-exists-title { position: relative; display: grid; place-items: center; width: 30px; height: 44px; padding: 0; overflow: hidden; border-radius: 3px;
  border: 1px solid var(--plt-line); background: var(--surface); color: var(--plt-muted); font-size: var(--size-2xs); text-decoration: none; }
#plt-app .plt-exists-title img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-exists-title:hover { border-color: var(--gold); }
#plt-app .plt-exists-state { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-exists-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--blossom) 8%, transparent); overflow: hidden; }
#plt-app .plt-exists-bar i { display: block; height: 100%; background: var(--gold); }
#plt-app .plt-exists-sub { margin: 18px 0 4px; font: var(--size-lg) var(--font-serif); color: var(--blossom); }
#plt-app .plt-unplaced { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; }
#plt-app .plt-unplaced-one { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px dashed var(--plt-line); border-radius: 8px; }
#plt-app .plt-unplaced-one img { width: 38px; height: 56px; object-fit: cover; border-radius: 3px; }
#plt-app .plt-unplaced-one > div { display: grid; gap: 4px; min-width: 0; flex: 1; }
#plt-app .plt-unplaced-one small { color: var(--plt-muted); font-size: var(--size-xs); }
#plt-app .plt-world-book { display: grid; gap: 6px; align-content: start; }
#plt-app .plt-world-out { justify-self: start; padding: 2px 0; border: 0; background: none; font-size: var(--size-xs); color: var(--plt-muted); cursor: pointer; }
#plt-app .plt-world-out:hover { color: var(--accent-lacquer); }
#plt-app .plt-world-screen { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
#plt-app .plt-world-poster { display: grid; place-items: center; width: 72px; height: 104px; border-radius: 5px; overflow: hidden; border: 1px solid var(--plt-line); background: var(--surface); }
#plt-app .plt-world-poster img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-world-poster .cjk { font: var(--size-xl) var(--font-cjk); color: var(--gold); }
#plt-app .plt-world-screen-text h3 { margin: 10px 0 4px; font: var(--size-xl)/1.25 var(--font-serif); }
#plt-app .plt-world-screen-text h3 a { color: var(--blossom); text-decoration: none; }
#plt-app .plt-world-screen-text h3 a:hover { color: var(--gold); }
#plt-app .plt-world-screen-text p { margin: 0 0 8px; }
#plt-app .plt-world-screen-text > div { display: flex; flex-wrap: wrap; gap: 6px; }
#plt-app .plt-world-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
#plt-app .plt-world-person { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 0; background: none; text-align: center; color: var(--plt-ink); text-decoration: none; cursor: pointer; }
#plt-app .plt-world-face { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 1px solid var(--plt-line); background: var(--surface); }
#plt-app .plt-world-face img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-world-face .cjk { font: var(--size-xl) var(--font-cjk); color: var(--gold); }
#plt-app .plt-world-person b { font-size: var(--size-sm); font-weight: 600; }
#plt-app .plt-world-person small { font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-world-person:hover b { color: var(--gold); }
#plt-app .plt-world-notes { white-space: pre-wrap; }
#plt-app .plt-court-chip.is-quiet { color: var(--plt-muted); }
#plt-app button.plt-court-chip { cursor: pointer; font-family: inherit; font-size: var(--size-sm); }
#plt-app button.plt-court-chip.is-quiet { background: none; }
#plt-modal .plt-world-field .note { margin: 4px 0 0; }
@media (max-width: 760px) {
  #plt-app .plt-exists-row { grid-template-columns: 44px minmax(0, 1fr); }
  #plt-app .plt-exists-state { grid-column: 2; justify-items: start; text-align: left; }
  #plt-app .plt-world-screen { grid-template-columns: 56px minmax(0, 1fr); }
  #plt-app .plt-world-poster { width: 56px; height: 82px; }
}
/* Drop 81: Collected Works' side of the same record - its books and the Pavilion's door. */
.cw-room .cw-tales-door { display: inline-block; margin-top: 12px; font-size: var(--size-sm); }
.cw-room .cw-row-title.is-book span { font-size: var(--size-xs); color: var(--mist); }
.cw-room .cw-unlink { font-size: var(--size-2xs); }
.cw-pick-search { margin-bottom: 12px; }
#plt-app .plt-world-profile h1 { font: var(--size-3xl)/1.2 var(--font-serif); margin: 12px 0 8px; color: var(--blossom); }
#plt-app .plt-world-card h2 { font: var(--size-xl)/1.2 var(--font-serif); }
#plt-app .adaptation.plt-world-screen > .plt-world-screen-text { display: block; min-width: 0; }
#plt-app .plt-world-screen-text > div { display: flex; flex-wrap: wrap; gap: 6px; }
#plt-app .plt-world-screen-text p { font-size: var(--size-xs); }

/* Drop 82: a cover keeps its own shape inside a frame - fitted from top to bottom,
   centred, never stretched across the window; what is left either side is the mat. */
#plt-app .plt-framed .plt-window { background: var(--ink); }
#plt-app .plt-framed .plt-window > img.plt-face-img { left: 50% !important; right: auto !important; top: 0 !important; bottom: 0 !important;
  width: auto !important; max-width: none !important; height: 100% !important; transform: translateX(-50%); object-fit: contain; }

/* Drop 82: the precinct's buttons in the palace's own dress - green to act, quiet to look -
   and a page's own actions in its right-hand corner. */
#plt-app .btn, #plt-modal .btn { background: var(--accent-jade); border-color: var(--accent-jade); color: var(--ink); font-weight: 600; border-radius: 6px; }
#plt-app .btn:hover, #plt-modal .btn:hover { background: var(--accent-jade); filter: brightness(1.07); }
#plt-app .outline, #plt-modal .outline { background: transparent; border: 1px solid var(--border); color: var(--mist); border-radius: 6px; }
#plt-app .outline:hover, #plt-modal .outline:hover { background: var(--surface); color: var(--blossom); }
#plt-app .precinct-hero .hero-text { width: 100%; }
#plt-app .precinct-hero .hero-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
#plt-app .precinct-hero .hero-actions button { font-size: var(--size-sm); padding: 8px 14px; min-height: 36px; border-radius: 6px; cursor: pointer; font-weight: 500; }
#plt-app .precinct-hero .hero-actions .btn, #plt-app .precinct-hero .hero-actions .db-primary, #plt-app .precinct-hero .hero-actions .primary {
  background: var(--accent-jade); border: 1px solid var(--accent-jade); color: var(--ink); font-weight: 600; }
#plt-app .precinct-hero .hero-actions .outline, #plt-app .precinct-hero .hero-actions .db-button:not(.db-primary), #plt-app .precinct-hero .hero-actions .ghost {
  background: color-mix(in srgb, var(--surface) 70%, var(--ink)); border: 1px solid var(--border); color: var(--blossom); }
#plt-app .precinct-hero .hero-actions .outline:hover, #plt-app .precinct-hero .hero-actions .db-button:not(.db-primary):hover { background: var(--surface); }

/* Drop 82: Scrolls in Hand - Moving Scrolls' bar and filters, the stories beneath. */
#plt-app .plt-hand-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
#plt-app .plt-hand-bar .plt-hand-gap { flex: 1; }
#plt-app .plt-hand-bar .ghost, #plt-app .plt-hand-bar .primary { font-size: var(--size-sm); padding: 8px 14px; min-height: 36px; border-radius: 6px; }
#plt-app .plt-hand-bar .scroll-search { max-width: 22rem; font-size: var(--size-sm); padding: 8px 12px; }
#plt-app .plt-hand-gates { margin-bottom: 14px; }
#plt-app .plt-hand-filters .period-chip { font-size: var(--size-xs); padding: 4px 11px; cursor: pointer; }
#plt-app .plt-hand-filters .period-label { font-size: var(--size-2xs); width: 4rem; }
#plt-app .plt-hand-clear { margin-left: 8px; }
#plt-app .plt-hand-boxes { margin-top: 18px; }
#plt-app .plt-box-line .plt-court-chip { cursor: default; }
#plt-app .primary, #plt-modal .primary { background: var(--accent-jade); color: var(--ink); border: 1px solid var(--accent-jade); }
#plt-app .primary:hover, #plt-modal .primary:hover { background: var(--accent-jade); filter: brightness(1.07); }
#plt-app .plt-hand-filters .period-chip.is-on { color: var(--accent-jade); border-color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 12%, transparent); }

/* Drop 83: The Pavilion Report, in the Sovereign's design. */
#plt-app .plt-rep { --rp-bg: color-mix(in srgb, var(--jade) 10%, var(--surface)); --rp-panel: color-mix(in srgb, var(--accent-jade) 10%, var(--surface)); --rp-line: color-mix(in srgb, var(--accent-jade) 28%, var(--surface)); --rp-gold: var(--gold); --rp-sage: var(--accent-jade); --rp-sage-dim: color-mix(in srgb, var(--accent-jade) 28%, var(--surface));
  --rp-ink: var(--blossom); --rp-muted: var(--mist); --rp-faint: var(--mist); --rp-serif: var(--font-serif);
  background: var(--rp-bg); color: var(--rp-ink); border-radius: 12px; padding: 16px; font-family: var(--font-sans); }
#plt-app .plt-rep h2 { margin: 0; font: 400 var(--size-xl)/1.15 var(--font-serif); letter-spacing: -0.02em; color: var(--rp-ink); }
#plt-app .plt-rep h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; color: var(--rp-ink); }
#plt-app .plt-rep p { margin: 0; }
#plt-app .plt-rep button { font-family: inherit; cursor: pointer; }
#plt-app .plt-rep-card, #plt-app .plt-rep-bar, #plt-app .plt-rep-stat, #plt-app .plt-rep-sup, #plt-app .plt-rep-fav { background: var(--rp-panel); border: 1px solid var(--rp-line); border-radius: 8px; }
#plt-app .plt-rep-card { padding: 20px 22px; min-width: 0; }
#plt-app .plt-rep-sub { margin: 6px 0 14px !important; font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-none { font-size: var(--size-xs); color: var(--rp-faint); }
#plt-app .plt-rep-cap { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--rp-line); font-size: var(--size-2xs); color: var(--rp-muted); }
/* the chooser */
#plt-app .plt-rep-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; }
#plt-app .plt-rep-seg { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--rp-line); border-radius: 6px; }
#plt-app .plt-rep-seg button { border: 0; background: none; color: var(--rp-muted); font-size: var(--size-sm); padding: 6px 15px; border-radius: 4px; }
#plt-app .plt-rep-seg button.is-on { background: var(--rp-gold); color: var(--surface); }
#plt-app .plt-rep-step { display: inline-flex; align-items: center; gap: 10px; }
#plt-app .plt-rep-step > button { border: 0; background: none; color: var(--rp-ink); font-size: var(--size-sm); padding: 4px 6px; }
#plt-app .plt-rep-step > button:disabled { opacity: 0.3; cursor: default; }
#plt-app .plt-rep-step select { background: var(--rp-bg); color: var(--rp-ink); border: 1px solid var(--rp-line); border-radius: 5px; padding: 6px 8px; font-size: var(--size-sm); }
#plt-app .plt-rep-step .plt-rep-now { font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-gap { flex: 1; }
#plt-app .plt-rep-compare { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-2xs); color: var(--rp-muted); cursor: pointer; }
#plt-app .plt-rep-compare input { accent-color: var(--rp-sage); width: 14px; height: 14px; }
#plt-app .plt-rep-note { margin: 8px 2px 14px !important; font-size: var(--size-2xs); color: var(--rp-muted); }
/* the six */
#plt-app .plt-rep-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
#plt-app .plt-rep-stat { padding: 16px 16px 14px; display: grid; align-content: start; gap: 4px; min-width: 0; }
#plt-app .plt-rep-stat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; font-size: var(--size-3xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--rp-muted); }
#plt-app .plt-rep-stat-head i { flex: none; font: normal var(--size-lg)/1 var(--font-cjk); color: var(--rp-gold); }
#plt-app .plt-rep-stat > b { font: 400 var(--size-2xl)/1.2 var(--font-serif); color: var(--rp-gold); margin: 6px 0 2px; }
#plt-app .plt-rep-stat > p { font-size: var(--size-xs); color: var(--rp-muted); }
#plt-app .plt-rep-delta { display: block; margin-top: 6px; font-size: var(--size-3xs); color: var(--rp-sage); }
#plt-app .plt-rep-delta.is-down { color: var(--accent-lacquer); }
/* the favourite and the rhythm */
#plt-app .plt-rep-mid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
#plt-app .plt-rep-fav { display: grid; justify-items: center; align-content: start; text-align: center; padding: 26px 18px 22px; border-color: color-mix(in srgb, var(--rp-gold) 35%, var(--rp-line));
  background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 12%, transparent), transparent 60%), var(--rp-panel); }
#plt-app .plt-rep-kicker { font-size: var(--size-3xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-gold); margin-bottom: 14px !important; }
#plt-app .plt-rep-favcover { border: 0; background: none; padding: 0; }
#plt-app .plt-rep-bigface { display: block; width: 108px; height: 162px; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 50%, transparent); }
#plt-app .plt-rep-bigface img, #plt-app .plt-rep-bigface .book-cover { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-rep-fav h3 { margin-top: 18px; font-size: var(--size-xl); line-height: 1.2; }
#plt-app .plt-rep-favby { margin-top: 6px !important; font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-favtea { display: flex; align-items: baseline; gap: 12px; width: 100%; justify-content: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rp-line); font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-favtea b { font: 400 var(--size-2xl)/1 var(--font-serif); color: var(--rp-gold); margin-right: 2px; }
#plt-app .plt-rep-favtea span + span { padding-left: 12px; border-left: 1px solid var(--rp-line); color: var(--rp-sage); }
#plt-app .plt-rep-favgenre { margin-top: 12px !important; font: italic var(--size-sm) var(--font-serif); color: var(--rp-muted); }
#plt-app .plt-rep-midright { display: grid; gap: 14px; align-content: start; min-width: 0; }
#plt-app .plt-rep-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#plt-app .plt-rep-pill { border: 1px solid var(--rp-line); background: none; color: var(--rp-muted); border-radius: 4px; padding: 5px 10px; font-size: var(--size-2xs); }
#plt-app .plt-rep-pill.is-on { color: var(--rp-gold); border-color: color-mix(in srgb, var(--rp-gold) 70%, transparent); background: color-mix(in srgb, var(--rp-gold) 8%, transparent); }
#plt-app .plt-rep-total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--size-2xs); color: var(--rp-muted); margin-bottom: 8px; }
#plt-app .plt-rep-total b { font: 400 var(--size-2xl)/1 var(--font-serif); color: var(--rp-gold); margin-right: 6px; }
#plt-app .plt-rep-peak { color: var(--rp-sage); }
#plt-app .plt-rep-chart { display: grid; gap: 8px; height: 170px; align-items: end; padding-top: 18px;
  background: repeating-linear-gradient(to top, transparent 0, transparent 37px, color-mix(in srgb, var(--blossom) 5%, transparent) 37px, color-mix(in srgb, var(--blossom) 5%, transparent) 38px); background-position: 0 -19px; }
#plt-app .plt-rep-chart.is-dense { gap: 3px; }
#plt-app .plt-rep-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; border: 0; background: none; padding: 0 0 18px; }
#plt-app .plt-rep-col:disabled { cursor: default; }
#plt-app .plt-rep-col::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 1px; background: color-mix(in srgb, color-mix(in srgb, var(--gold) 50%, var(--blossom)) 35%, transparent); }
#plt-app .plt-rep-colval { font-size: var(--size-3xs); color: var(--rp-muted); text-align: center; margin-bottom: 4px; min-height: 12px; }
#plt-app .plt-rep-fill { display: block; border-radius: 3px 3px 0 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--gold) 25%, var(--blossom)), color-mix(in srgb, var(--gold) 25%, var(--mist))); min-height: 0; }
#plt-app .plt-rep-col:hover .plt-rep-fill { filter: brightness(1.1); }
#plt-app .plt-rep-collabel { position: absolute; left: 0; right: 0; bottom: 0; font-size: var(--size-3xs); color: var(--rp-muted); text-align: center; white-space: nowrap; }
#plt-app .plt-rep-col.is-future .plt-rep-collabel { color: color-mix(in srgb, var(--blossom) 28%, var(--surface)); }
#plt-app .plt-rep-col.is-future::after { background: color-mix(in srgb, var(--blossom) 6%, transparent); }
#plt-app .plt-rep-foot { margin-top: 10px !important; font-size: var(--size-3xs); color: var(--rp-muted); }
#plt-app .plt-rep-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--rp-sage-dim); border: 1px solid var(--rp-line); border-radius: 8px; padding: 12px 0; }
#plt-app .plt-rep-strip > div { padding: 2px 18px; border-left: 1px solid color-mix(in srgb, color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)) 18%, transparent); }
#plt-app .plt-rep-strip > div:first-child { border-left: 0; }
#plt-app .plt-rep-strip b { display: block; font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--rp-sage); }
#plt-app .plt-rep-strip small { font-size: var(--size-3xs); color: var(--rp-muted); }
/* the superlatives */
#plt-app .plt-rep-sups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
#plt-app .plt-rep-sup { display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-width: 0; }
#plt-app .plt-rep-supface { border: 0; background: none; padding: 0; flex: none; }
#plt-app .plt-rep-mini { display: block; width: 34px; height: 50px; border-radius: 3px; overflow: hidden; box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 45%, transparent); }
#plt-app .plt-rep-mini img, #plt-app .plt-rep-mini .book-cover { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-rep-supglyph { flex: none; display: grid; place-items: center; width: 34px; height: 50px; border: 1px solid var(--rp-line); border-radius: 3px; font: var(--size-xl) var(--font-cjk); color: var(--rp-sage); }
#plt-app .plt-rep-sup > div { display: grid; gap: 3px; min-width: 0; }
#plt-app .plt-rep-sup small { font-size: var(--size-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rp-gold); }
#plt-app .plt-rep-sup strong { font-size: var(--size-sm); font-weight: 700; color: var(--rp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-app .plt-rep-sup span { font-size: var(--size-2xs); color: var(--rp-muted); }
/* three and two across */
#plt-app .plt-rep-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
#plt-app .plt-rep-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
#plt-app .plt-rep-wide { margin-bottom: 16px; }
#plt-app .plt-rep-barrow { margin-bottom: 12px; }
#plt-app .plt-rep-barrow > div { display: flex; justify-content: space-between; font-size: var(--size-xs); margin-bottom: 6px; }
#plt-app .plt-rep-barrow small { font-size: var(--size-3xs); color: var(--rp-muted); }
#plt-app .plt-rep-track { display: block; height: 5px; border-radius: 3px; background: var(--rp-sage-dim); overflow: hidden; }
#plt-app .plt-rep-track i { display: block; height: 100%; border-radius: 3px; }
#plt-app .plt-rep-track i.is-gold { background: color-mix(in srgb, var(--gold) 50%, var(--blossom)); }
#plt-app .plt-rep-track i.is-sage { background: var(--rp-sage); }
#plt-app .plt-rep-donutrow { display: flex; align-items: center; gap: 24px; }
#plt-app .plt-rep-donut { width: 110px; height: 110px; flex: none; }
#plt-app .plt-rep-donut-n { font: 400 var(--size-xl) var(--font-serif); fill: var(--rp-gold); }
#plt-app .plt-rep-donut-l { font-size: var(--size-3xs); fill: var(--rp-muted); }
#plt-app .plt-rep-legends { flex: 1; display: grid; gap: 8px; }
#plt-app .plt-rep-legend { display: flex; justify-content: space-between; font-size: var(--size-xs); color: var(--rp-muted); }
#plt-app .plt-rep-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; }
#plt-app .plt-rep-legend b { font-weight: 400; color: var(--rp-ink); }
#plt-app .plt-rep-split { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rp-line); font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-split b { font: 700 var(--size-md) var(--font-sans); color: var(--rp-sage); margin-right: 4px; }
#plt-app .plt-rep-mean { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
#plt-app .plt-rep-mean > b { font: 400 var(--size-3xl)/1 var(--font-serif); color: var(--rp-gold); }
#plt-app .plt-rep-mean > span { font-size: var(--size-sm); color: var(--rp-muted); margin-right: 14px; }
#plt-app .plt-rep-mean p { font-size: var(--size-2xs); line-height: 1.8; color: var(--rp-muted); }
#plt-app .plt-rep-mean p em { font-style: normal; color: var(--rp-sage); }
#plt-app .plt-rep-hist { display: grid; gap: 10px; height: 150px; align-items: end; border-bottom: 1px solid var(--rp-line); }
#plt-app .plt-rep-hcol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 22px; }
#plt-app .plt-rep-hcol::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: color-mix(in srgb, var(--blossom) 8%, transparent); }
#plt-app .plt-rep-hval { font-size: var(--size-3xs); color: var(--rp-muted); text-align: center; margin-bottom: 4px; min-height: 12px; }
#plt-app .plt-rep-hbar { display: block; border-radius: 3px 3px 0 0; margin: 0 4px; }
#plt-app .plt-rep-hbar.is-gold { background: color-mix(in srgb, var(--gold) 50%, var(--blossom)); }
#plt-app .plt-rep-hbar.is-sage { background: color-mix(in srgb, var(--accent-jade) 50%, var(--blossom)); }
#plt-app .plt-rep-hlabel { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: var(--size-3xs); color: var(--rp-muted); }
#plt-app .plt-rep-list { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--rp-line); }
#plt-app .plt-rep-rank, #plt-app .plt-rep-stirrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
#plt-app .plt-rep-rankno { width: 14px; font: var(--size-md) var(--font-serif); color: var(--rp-muted); }
#plt-app .plt-rep-rank > div, #plt-app .plt-rep-stirrow > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
#plt-app .plt-rep-rank > b { font: 400 var(--size-xl) var(--font-serif); color: var(--rp-gold); }
#plt-app .plt-rep .plt-rep-booklink { border: 0; background: none; padding: 0; text-align: left; font: var(--size-sm) var(--font-serif); color: var(--rp-ink); }
#plt-app .plt-rep-booklink:hover { color: var(--rp-gold); }
#plt-app .plt-rep-rank small, #plt-app .plt-rep-stirrow small { font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-tile { width: 34px; height: 40px; object-fit: contain; flex: none; }
#plt-app .plt-rep-box { padding: 6px 8px; border: 1px solid var(--rp-line); border-radius: 4px; font-size: var(--size-xs); color: var(--rp-muted); }
#plt-app .plt-rep-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rp-line); }
#plt-app .plt-rep-trio b { display: block; font: 400 var(--size-xl) var(--font-serif); color: var(--rp-sage); }
#plt-app .plt-rep-trio small { font-size: var(--size-3xs); color: var(--rp-muted); }
#plt-app .plt-rep-series { margin-bottom: 14px; }
#plt-app .plt-rep-series > div { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
#plt-app .plt-rep-series strong { font: 400 var(--size-md) var(--font-serif); }
#plt-app .plt-rep-series small { font-size: var(--size-3xs); color: var(--rp-sage); }
#plt-app .plt-rep-series p { margin-top: 8px !important; font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
#plt-app .plt-rep-table > div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rp-line); font-size: var(--size-xs); color: var(--rp-muted); }
#plt-app .plt-rep-table b { font: 400 var(--size-md) var(--font-serif); color: var(--rp-ink); }
#plt-app .plt-rep-moods { display: flex; flex-wrap: wrap; gap: 8px; }
#plt-app .plt-rep-mood { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--rp-line); border-radius: 4px; font-size: var(--size-xs); }
#plt-app .plt-rep-mood b { padding-left: 10px; border-left: 1px solid var(--rp-line); font-weight: 400; font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-mood[data-tone="0"] { color: var(--gold); }
#plt-app .plt-rep-mood[data-tone="1"] { color: var(--accent-jade); }
#plt-app .plt-rep-mood[data-tone="2"] { color: var(--mist); }
#plt-app .plt-rep-mood[data-tone="3"] { color: var(--accent-lacquer); }
#plt-app .plt-rep-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 18px 22px; }
#plt-app .plt-rep-shelfbook { display: grid; gap: 4px; align-content: start; }
#plt-app .plt-rep-shelfcover { border: 0; background: none; padding: 0; justify-self: start; }
#plt-app .plt-rep-bookface { display: block; width: 102px; height: 153px; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 45%, transparent); }
#plt-app .plt-rep-bookface img, #plt-app .plt-rep-bookface .book-cover { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-rep-shelfbook h3 { margin-top: 8px; font-size: var(--size-md); line-height: 1.25; }
#plt-app .plt-rep-shelfbook p { font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-rep-shelfbook small { font-size: var(--size-3xs); color: var(--rp-muted); margin-top: 4px; }
#plt-app .plt-rep-shelftea b { color: var(--rp-gold); font-weight: 400; margin-right: 4px; }
#plt-modal .plt-rep-dlg-h { margin: 14px 0 6px; font-size: var(--size-md); }
@media (max-width: 1250px) {
  #plt-app .plt-rep-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #plt-app .plt-rep-sups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #plt-app .plt-rep-mid, #plt-app .plt-rep-two, #plt-app .plt-rep-three { grid-template-columns: 1fr; }
  #plt-app .plt-rep-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}
@media (max-width: 560px) {
  #plt-app .plt-rep { padding: 10px; }
  #plt-app .plt-rep-stats, #plt-app .plt-rep-sups { grid-template-columns: 1fr 1fr; }
  #plt-app .plt-rep-table { grid-template-columns: 1fr; }
  #plt-app .plt-rep-chart .plt-rep-collabel { font-size: var(--size-3xs); }
}
#plt-app .plt-rep-mini .book-cover, #plt-app .plt-rep-bigface .book-cover, #plt-app .plt-rep-bookface .book-cover { margin: 0; aspect-ratio: auto; }
#plt-app .plt-rep-mini .book-cover { font-size: 3px; }
/* Drop 83 — drawn covers scaled to the report's small faces; stat numbers on one line */
#plt-app .plt-rep-stat-head { min-height: 26px; }
#plt-app .plt-rep-bigface .book-cover, #plt-app .plt-rep-bookface .book-cover { padding: 14px 9px; }
#plt-app .plt-rep-bigface .book-cover:before, #plt-app .plt-rep-bookface .book-cover:before { inset: 8px 7px 8px 9px; }
#plt-app .plt-rep-bigface .book-cover:after, #plt-app .plt-rep-bookface .book-cover:after { width: 90px; height: 90px; top: -30px; box-shadow: none; }
#plt-app .plt-rep-bigface .cover-title, #plt-app .plt-rep-bookface .cover-title { font-size: 14px; line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: normal; word-break: normal; hyphens: auto; }
#plt-app .plt-rep-bigface .cover-symbol, #plt-app .plt-rep-bookface .cover-symbol { font-size: 13px; margin-bottom: 6px; }
#plt-app .plt-rep-bigface .cover-author, #plt-app .plt-rep-bookface .cover-author { font-size: 7px; letter-spacing: 0.12em; margin-top: 8px; }
#plt-app .plt-rep-mini .book-cover { padding: 4px 3px; }
#plt-app .plt-rep-mini .book-cover:before { inset: 3px; }
#plt-app .plt-rep-mini .book-cover:after, #plt-app .plt-rep-mini .cover-symbol, #plt-app .plt-rep-mini .cover-author { display: none; }
#plt-app .plt-rep-mini .cover-title { font-size: 6.5px; line-height: 1.1; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
#plt-app .plt-rep-seg button { white-space: nowrap; }
@media (max-width: 560px) { #plt-app .plt-rep-seg button { padding: 6px 10px; } }

/* ==========================================================
   Drop 84: one palace style. Every wing's colours, sizes and type are
   the palace's own tokens (tokens.css); what is chosen is shown one
   way, after the Sovereign's samples:
   - a tab is jade words over a jade line (Hall of Sapphire Devotion);
   - a chosen chip is jade, softly filled (its "All orders");
   - a switch - Month/Year, GBP/PLN, list/grid - is filled cream (the
     Overview's "This year");
   - the Jade Mountain rooms (Immortal Cultivation, its Decreed rules,
     the Sanctuary) keep their gold touch (the Chronicle's "Everything").
   ========================================================== */

/* Chips. */
.period-chip.is-on, .scroll-count.is-on, .court-rank.is-on,
.jr-room .jr-chip[aria-pressed="true"], .lt-room .lt-chips button[aria-pressed="true"],
.jp-room .jp-filter[aria-pressed="true"], .sg-room .sg-chip[aria-pressed="true"],
.oc-room .oc-chip[aria-pressed="true"], .ic-room .ic-chip[aria-pressed="true"],
#gsa-app .nav.active, #gsa-dialog .nav.active, #gsa-app .chart-tab.active, #gsa-dialog .chart-tab.active,
#gsa-app .verdict-filter.active, #gsa-dialog .verdict-filter.active,
#gsa-app .point-option.active, #gsa-dialog .point-option.active,
#gsa-app .tile-option.selected, #gsa-dialog .tile-option.selected,
#plt-app .tab.active, #plt-modal .tab.active, #plt-app .filter-pill.active, #plt-modal .filter-pill.active,
#plt-app .plt-rep-pill.is-on, #plt-app .registry-gate.active, #plt-modal .registry-gate.active,
#plt-app .reading-gate.active, #plt-modal .reading-gate.active,
#plt-app .precinct-secondary > button.active, #plt-modal .precinct-secondary > button.active {
  background: color-mix(in srgb, var(--accent-jade) 18%, var(--surface));
  color: var(--accent-jade);
  border-color: var(--accent-jade);
}
#gsa-app .verdict-filter.active span, #gsa-dialog .verdict-filter.active span { color: var(--accent-jade); }
#gsa-app .scale-table tr.selected, #gsa-dialog .scale-table tr.selected { background: color-mix(in srgb, var(--accent-jade) 12%, transparent); }
#plt-app .book-gallery button.active, #plt-modal .book-gallery button.active { border-color: var(--accent-jade); }

/* Tabs. */
.jp-room .jp-tab[aria-selected="true"], .oc-room .oc-tab[aria-selected="true"],
.lt-room .lt-tabs button[aria-selected="true"],
#plt-app .precinct-primary > button.active, #plt-modal .precinct-primary > button.active {
  color: var(--accent-jade);
  border-bottom-color: var(--accent-jade);
  background: transparent;
}

/* Switches. */
.ps-room .ps-view-switch button[aria-pressed="true"], .dc-room .dc-segment[aria-pressed="true"],
#plt-app .plt-rep-seg button.is-on, #gsa-app .verdict-layout button.active, #gsa-dialog .verdict-layout button.active,
.mv-modes .ghost.is-on, .pager-page.is-on, .track-source.is-on {
  background: var(--blossom);
  color: var(--ink);
  border-color: var(--blossom);
}

/* Headings are set in the serif, wherever a design left one in the plain face. */
#plt-app h1, #plt-app h2, #plt-app h3, #plt-modal h1, #plt-modal h2, #plt-modal h3,
#gsa-app h1, #gsa-app h2, #gsa-app h3, #gsa-dialog h1, #gsa-dialog h2, #gsa-dialog h3 { font-family: var(--font-serif); }

/* The hall's row of pages keeps each name on one line at the palace's size. */
#gsa-app .nav, #gsa-dialog .nav { white-space: nowrap; }
#gsa-app .sidebar .nav.active { color: var(--accent-jade); border-color: var(--accent-jade) !important; background: color-mix(in srgb, var(--accent-jade) 18%, var(--surface)) !important; }

/* The studio's dialog dims the palace behind it as every palace dialog does. */
#mpc-modal::backdrop { background: var(--veil); }

/* Jade words are the palace's jade in the studio too. */
#mpc-app, #mpc-modal { --d-jade: var(--accent-jade); }

/* ==========================================================
   Drop 85: Reading History as the Chronicle keeps it - a day at a time,
   each line its book's cover, what happened, and the Qi it earned.
   ========================================================== */
#plt-app .plt-hday { padding: 4px 0 10px; }
#plt-app .plt-hday + .plt-hday { margin-top: 10px; }
#plt-app .plt-hday-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
#plt-app .plt-hday-head strong { font: 400 var(--size-md) var(--font-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
#plt-app .plt-hday-head span { font: 400 var(--size-2xs) var(--font-serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-jade); white-space: nowrap; }
#plt-app .plt-hrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--blossom); text-align: left; font: inherit; cursor: pointer; }
#plt-app .plt-hrow:last-child { border-bottom: 0; }
#plt-app .plt-hrow:hover .plt-hrow-what { color: var(--gold); }
#plt-app .plt-hrow-face { flex: none; display: grid; place-items: center; width: 34px; height: 46px; border-radius: 3px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-low); }
#plt-app .plt-hrow-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plt-app .plt-hrow-face .book-cover { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; padding: 3px; }
#plt-app .plt-hrow-face .book-cover .cover-title { font-size: 6px; line-height: 1.1; letter-spacing: 0; overflow-wrap: normal; }
#plt-app .plt-hrow-face .book-cover .cover-author, #plt-app .plt-hrow-face .book-cover .cover-symbol, #plt-app .plt-hrow-face .book-cover::after { display: none; }
#plt-app .plt-hrow-face .cjk { font-size: var(--size-sm); color: var(--mist); }
#plt-app .plt-hrow-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
#plt-app .plt-hrow-what { font-size: var(--size-sm); color: var(--blossom); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--fast) var(--ease); }
#plt-app .plt-hrow-dot { color: var(--mist); }
#plt-app .plt-hrow-detail { font-size: var(--size-2xs); color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-app .plt-hrow-qi { flex: none; min-width: 44px; text-align: right; font: 400 var(--size-sm) var(--font-serif); color: var(--accent-jade); font-variant-numeric: tabular-nums; }

/* Drop 85: the Pavilion Report reads as the Hall of Sapphire Devotion's overview does -
   the outer frame only a line, the panels inside on the palace's surface, the charts
   in jade and gold. */
#plt-app .plt-rep { --rp-bg: transparent; --rp-panel: var(--surface); --rp-line: var(--border); --rp-sage-dim: color-mix(in srgb, var(--blossom) 9%, var(--surface));
  background: none; border: 1px solid var(--border); }
#plt-app .plt-rep-step select { background: var(--ink); }
#plt-app .plt-rep-strip { background: var(--surface); }
#plt-app .plt-rep-fill { background: linear-gradient(to bottom, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--ink))); border-radius: 3px 3px 0 0; }
#plt-app .plt-rep-col::after { background: var(--border); }
#plt-app .plt-rep-track i.is-gold { background: var(--gold); }
#plt-app .plt-rep-track i.is-sage { background: var(--accent-jade); }
#plt-app .plt-rep-hbar.is-gold { background: linear-gradient(to bottom, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--ink))); }
#plt-app .plt-rep-hbar.is-sage { background: linear-gradient(to bottom, var(--accent-jade), color-mix(in srgb, var(--accent-jade) 70%, var(--ink))); }
#plt-app .plt-rep-hcol::after { background: var(--border); }
#plt-app .plt-rep-legend i { border-radius: 50%; }

/* Drop 85: a year of showing up - reading days in jade, freezes in gold, today ringed. */
#plt-app .heatcell.read, #plt-modal .heatcell.read { background: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 70%, var(--blossom)); }
#plt-app .heatcell.freeze, #plt-modal .heatcell.freeze { background: color-mix(in srgb, var(--gold) 55%, var(--surface)); border-color: var(--gold); }

/* Drop 85: each book read on a day shows its cover beside its name. */
#plt-app .plt-cal-read { display: flex; align-items: center; gap: 7px; }
#plt-app .plt-cal-face { flex: none; display: block; width: 22px; height: 31px; border-radius: 2px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow-low); }
#plt-app .plt-cal-face img, #plt-app .plt-cal-read .plt-cal-face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
#plt-app .plt-cal-face .book-cover { width: 100%; height: 100%; margin: 0; padding: 2px; aspect-ratio: auto; }
#plt-app .plt-cal-face .book-cover .cover-title, #plt-app .plt-cal-face .book-cover .cover-author, #plt-app .plt-cal-face .book-cover .cover-symbol, #plt-app .plt-cal-face .book-cover::after { display: none; }

/* ==========================================================
   Drop 85: the Imperial Library's editions as the Hall of Sapphire Devotion's
   items database shows things - equal boxes, the cover alone, fitted top to
   bottom, the seal beside the standing. And the wishlist's seals.
   ========================================================== */
#plt-app .plt-db .db-grid { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
#plt-app .plt-db .db-art.plt-db-art { aspect-ratio: 1; padding: 0; border-radius: 11px; border: 1px solid var(--border); background: var(--ink); box-shadow: none; overflow: hidden; cursor: pointer; }
#plt-app .plt-plain-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#plt-app .plt-db .db-art .plt-plain-cover img { position: static; inset: auto; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
#plt-app .plt-plain-cover .book-cover { width: auto; height: 100%; aspect-ratio: 2 / 3; margin: 0; padding: 18px 12px; border-radius: 0; }
#plt-app .plt-plain-cover .book-cover .cover-title { font-size: var(--size-lg); }
#plt-app .plt-plain-cover .book-cover .cover-author { font-size: 8px; letter-spacing: 0.12em; }
#plt-app .plt-db .db-status { white-space: nowrap; }
#plt-app .plt-db .db-status[data-status="way"] { background: color-mix(in srgb, var(--blossom) 10%, var(--surface)); color: var(--blossom); }
#plt-app .plt-db-menu .db-menu-box { z-index: 5; }
#plt-app .plt-db-menu .plt-danger { color: var(--accent-lacquer); }

#plt-app .plt-wl .plt-seal { width: 30px; height: 30px; object-fit: contain; flex: none; }
#plt-app .plt-wl .plt-got-button { gap: 8px; padding-left: 10px; min-height: 44px; font-size: var(--size-sm); }
#plt-app .plt-wl .plt-got-button img { width: 28px; height: 28px; object-fit: contain; }
#plt-app .plt-wl .plt-in-collection { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-xs); color: var(--accent-jade); }
#plt-app .plt-wl .plt-in-collection .plt-seal { width: 34px; height: 34px; }
#plt-app .plt-wl .wl-row-secondary { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
#plt-app .edition-copy .chips .plt-seal { width: 26px; height: 26px; object-fit: contain; }
#plt-app .plt-got-small { display: inline-flex; align-items: center; gap: 6px; }
#plt-app .plt-got-small img { width: 22px; height: 22px; object-fit: contain; }
/* History, a little closer together. */
#plt-app .plt-hday { padding: 0 0 4px; }
#plt-app .plt-hday + .plt-hday { margin-top: 14px; }
#plt-app .plt-hrow { padding: 8px 0; }

/* ==========================================================
   Drop 86: a series by its original print - each volume a square, jade once
   read, with whatever holds it (a single, an omnibus, both) beneath its number.
   ========================================================== */
#plt-modal .plt-orig-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; }
#plt-modal .plt-orig-head h3 { margin: 0; font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }
#plt-modal .plt-orig-head span { font-size: var(--size-xs); color: var(--accent-jade); }
#plt-modal .plt-orig-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 8px; }
#plt-modal .plt-orig { display: grid; align-content: start; gap: 6px; min-height: 6.4rem; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
#plt-modal .plt-orig > b { font: 400 var(--size-lg)/1 var(--font-serif); color: var(--blossom); }
#plt-modal .plt-orig.is-read { border-color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 22%, var(--surface)); }
#plt-modal .plt-orig.is-read > b { color: var(--accent-jade); }
#plt-modal .plt-orig.is-gap { border-style: dashed; background: none; }
#plt-modal .plt-orig.is-gap > b { color: var(--mist); }
#plt-modal .plt-orig-holders { display: grid; gap: 4px; }
#plt-modal .plt-orig-holders button { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--blossom); text-align: left; cursor: pointer; }
#plt-modal .plt-orig-holders button:hover small { color: var(--gold); }
#plt-modal .plt-orig-holders .plt-seal { width: 20px; height: 20px; object-fit: contain; flex: none; }
#plt-modal .plt-orig-holders small { min-width: 0; font-size: var(--size-3xs); line-height: 1.2; color: var(--blossom); overflow-wrap: anywhere; }
#plt-modal .plt-orig-none { font-size: var(--size-3xs); color: var(--mist); }
#plt-modal .plt-orig-seals .plt-seal { width: 22px; height: 22px; object-fit: contain; margin-right: 2px; }
#plt-app .plt-holds-line, #plt-modal .plt-holds-line, #plt-app .edition-copy p.plt-holds-line, #plt-modal .edition-copy p.plt-holds-line { margin: 2px 0 4px; font-size: var(--size-xs); color: var(--accent-jade); }
#plt-app .plt-db .db-version .plt-holds { flex-basis: 100%; color: var(--accent-jade); }

/* Drop 87: an amount and its own currency, side by side */
#plt-modal .plt-money-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 7rem); gap: 8px; }
#plt-modal .plt-money-pair select { min-width: 0; }

/* ============================================================
   Drop 88: one law for every popup that is filled in. Its title
   stays in view at the top, and its Save sits under a hairline at
   the foot, however long the form; only the middle scrolls. The
   palace's own .modal already keeps this law; the three engine
   dialogs lent to the wings (the Precinct of Letters, the Flowing
   Ink studio and the Hall of Appraisal) now keep it as well.
   ============================================================ */
:is(#plt-modal, #mpc-modal, #gsa-dialog) { --dlg-bg: var(--surface); }
#plt-modal { --dlg-bg: var(--plt-panel); }
:is(#plt-modal, #mpc-modal, #gsa-dialog)[open] { display: flex; flex-direction: column; }
:is(#plt-modal, #mpc-modal, #gsa-dialog)[open] > * { flex: none; }
:is(#plt-modal, #mpc-modal, #gsa-dialog)[open] > :is(form, .dialog-body) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
:is(#plt-modal, #mpc-modal, #gsa-dialog) :is(.form-actions, .dialog-actions, .actions:has([type="submit"])) {
  position: sticky; bottom: 0; z-index: 3;
  margin-top: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3);
  border-top: 0; background: var(--dlg-bg);
  /* the bar runs edge to edge and down to the foot, whatever the body's padding */
  box-shadow: 0 0 0 100vmax var(--dlg-bg); clip-path: inset(0 -100vmax -100vmax);
}
:is(#plt-modal, #mpc-modal, #gsa-dialog) :is(.form-actions, .dialog-actions, .actions:has([type="submit"]))::before {
  content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; border-top: var(--hairline);
}
/* a choice that does not apply here is shut, and says so */
#plt-modal .field.plt-shut select { opacity: 0.45; cursor: not-allowed; }
#plt-modal .field.plt-shut .plt-shut-note { color: var(--mist); }
/* A zoomed page zooms the screen's height with it: every popup's height is
   taken back by the same zoom, so its title and its foot stay on the screen
   at Standard and at Larger text alike. */
#mpc-modal { max-height: calc(100dvh / var(--text-zoom) - 35px); }
#gsa-dialog { max-height: calc(90dvh / var(--text-zoom)); }
#plt-modal { max-height: calc(90dvh / var(--text-zoom)); }

/* ============================================================
   Drop 89: Universes. A universe's story lines and its merch, in
   the Universes rooms and the Pavilion of Transforming Tales; the
   story line's own window names its universe and its part.
   ============================================================ */
.cw-room .cw-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 12px; }
.cw-room .cw-line { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; text-align: left;
  border: 1px solid var(--cw-line); border-radius: 8px; background: var(--cw-soft); color: var(--blossom); font: inherit; cursor: pointer; }
.cw-room .cw-line:hover { border-color: var(--gold); }
.cw-room .cw-line-face { width: 58px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--gold); }
.cw-room .cw-line-face img { width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-line-text { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.cw-room .cw-line-text strong { font: 400 var(--size-lg) var(--font-serif); overflow-wrap: anywhere; }
.cw-room .cw-line-text small { font-size: var(--size-xs); color: var(--cw-muted); }
.cw-room .cw-merch { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 12px; }
.cw-room .cw-merch-item { display: grid; gap: 4px; color: var(--blossom); text-decoration: none; }
.cw-room .cw-merch-item:hover strong { color: var(--gold); }
.cw-room .cw-merch-art { aspect-ratio: 1; border: 1px solid var(--cw-line); border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--gold); }
.cw-room .cw-merch-art img { width: 100%; height: 100%; object-fit: cover; }
.cw-room .cw-merch-item strong { font-size: var(--size-sm); font-weight: 500; overflow-wrap: anywhere; }
.cw-room .cw-merch-item small { font-size: var(--size-xs); color: var(--cw-muted); }

#plt-app .plt-lines, #plt-modal .plt-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 14px; margin-bottom: 28px; }
#plt-app .plt-line-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
#plt-app .plt-line-face { width: 74px; aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 5px; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); color: var(--gold); font-size: var(--size-xl); cursor: pointer; }
#plt-app .plt-line-face img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-line-text { display: grid; gap: 4px; align-content: start; min-width: 0; justify-items: start; }
#plt-app .plt-line-text h4 { margin: 0; }
#plt-app .plt-line-name { padding: 0; border: 0; background: none; color: var(--blossom); font: 400 var(--size-lg) var(--font-serif); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
#plt-app .plt-line-name:hover { color: var(--gold); }
#plt-app .plt-line-text p { margin: 0; font-size: var(--size-xs); color: var(--mist); }
#plt-app .plt-line-tools { margin-top: 4px; }
#plt-app .plt-line-role, #plt-modal .plt-line-role { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: var(--size-2xs); letter-spacing: 0.04em;
  border: 1px solid var(--border); color: var(--mist); }
#plt-app .plt-line-role.is-main, #plt-modal .plt-line-role.is-main { border-color: var(--accent-jade); color: var(--accent-jade); }
#plt-app .plt-lines-group { margin-bottom: 26px; }
#plt-app .plt-lines-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#plt-app .plt-lines-head h3 { margin: 0; font: 400 var(--size-xl) var(--font-serif); color: var(--blossom); }
#plt-app .plt-lines-head span { font-size: var(--size-xs); color: var(--mist); }
#plt-app .plt-lines-group.is-loose .plt-lines-head h3 { color: var(--gold); }
#plt-app .plt-world-merch { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 14px; margin-bottom: 28px; }
#plt-app .plt-merch { display: grid; gap: 4px; color: var(--blossom); text-decoration: none; }
#plt-app .plt-merch:hover strong { color: var(--gold); }
#plt-app .plt-merch-art { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--gold); font-size: var(--size-xl); }
#plt-app .plt-merch-art img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-merch strong { font-size: var(--size-sm); font-weight: 500; overflow-wrap: anywhere; }
#plt-app .plt-merch small { font-size: var(--size-xs); color: var(--mist); }
#plt-modal .plt-line-of { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--mist); font-size: var(--size-sm); }
#plt-modal .plt-court-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--blossom); text-decoration: none; font: inherit; font-size: var(--size-sm); cursor: pointer; }
#plt-modal .plt-court-chip:hover { border-color: var(--gold); color: var(--gold); }
#plt-modal .plt-court-chip.is-quiet { background: none; color: var(--mist); }
#plt-app .plt-heading-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ============================================================
   Drop 90: the original run, volume by volume with its first-edition
   cover; the copies connected from the collection; a copy's volumes
   ticked from the run.
   ============================================================ */
#plt-modal .plt-orig-strip { grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 12px; }
#plt-modal .plt-orig { padding: 6px; gap: 5px; min-height: 0; }
#plt-modal .plt-orig-cover { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 5px;
  overflow: hidden; background: var(--surface-2); color: var(--mist); cursor: pointer; }
#plt-modal .plt-orig-cover img { width: 100%; height: 100%; object-fit: cover; }
#plt-modal .plt-orig-cover:hover { outline: 1px solid var(--gold); }
#plt-modal .plt-orig-cover b { position: absolute; left: 5px; top: 4px; min-width: 1.5em; padding: 1px 5px; border-radius: 4px; text-align: center;
  font: 400 var(--size-sm)/1.3 var(--font-serif); color: var(--blossom); background: color-mix(in srgb, var(--ink) 70%, transparent); }
#plt-modal .plt-orig-blank { font: 400 var(--size-2xl) var(--font-serif); color: var(--mist); }
#plt-modal .plt-orig.is-read .plt-orig-cover b { color: var(--accent-jade); }
#plt-modal .plt-orig.is-gap .plt-orig-cover img { opacity: 0.55; }
#plt-modal .plt-orig-title { font-size: var(--size-2xs); line-height: 1.25; color: var(--blossom); overflow-wrap: anywhere; }
#plt-modal .plt-orig-date { font-size: var(--size-3xs); color: var(--mist); }
#plt-modal .plt-copies-head { margin-top: 26px; }
#plt-modal .plt-copies td { vertical-align: middle; }
#plt-modal .plt-copy-name { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 0; border: 0; background: none;
  color: var(--blossom); text-align: left; font: inherit; cursor: pointer; }
#plt-modal .plt-copy-name img, #plt-modal .plt-copy-blank { width: 34px; aspect-ratio: 2 / 3; border-radius: 3px; object-fit: cover; display: grid; place-items: center;
  background: var(--surface-2); color: var(--gold); }
#plt-modal .plt-copy-name span { display: grid; gap: 2px; min-width: 0; }
#plt-modal .plt-copy-name small { color: var(--mist); font-size: var(--size-xs); }
#plt-modal .plt-copy-name:hover strong { color: var(--gold); }
#plt-modal .plt-vol-chip { display: inline-grid; place-items: center; min-width: 1.7em; margin: 0 3px 3px 0; padding: 1px 6px; border: 1px solid var(--border);
  border-radius: 999px; font-size: var(--size-xs); color: var(--blossom); }
#plt-modal .plt-copy-standing { display: inline-flex; align-items: center; gap: 6px; }
#plt-modal .plt-copy-standing .plt-seal { width: 22px; height: 22px; object-fit: contain; }
#plt-modal .plt-copy-tools { text-align: right; white-space: nowrap; }
#plt-modal .plt-vol-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: 8px; margin-top: 6px; }
#plt-modal .plt-vol-tick { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer; }
#plt-modal .plt-vol-tick input { position: absolute; opacity: 0; pointer-events: none; }
#plt-modal .plt-vol-tick span { font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }
#plt-modal .plt-vol-tick small { font-size: var(--size-3xs); color: var(--mist); text-align: center; overflow-wrap: anywhere; }
#plt-modal .plt-vol-tick:has(input:checked) { border-color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 20%, var(--surface)); }
#plt-modal .plt-vol-tick:has(input:checked) span { color: var(--accent-jade); }
#plt-modal .plt-vol-tick:has(input:focus-visible) { outline: 2px solid var(--gold); }
#plt-modal .plt-vols-field > small { margin-top: 6px; }
#plt-modal .plt-orig.is-read .plt-orig-blank { color: var(--accent-jade); }

/* ============================================================
   Drop 91: a copy under its printed title; a reading read in an
   omnibus; a universe's reading orders, publication and
   chronological.
   ============================================================ */
#plt-app .edition-row .plt-copy-of { margin: 2px 0 4px; font-size: var(--size-xs); color: var(--mist); }
#plt-modal .plt-copy-read { font-size: var(--size-xs); color: var(--accent-jade); white-space: nowrap; }
#plt-modal .plt-runcopy-field select { width: 100%; }
#plt-app .plt-orders { margin: 6px 0 30px; }
#plt-app .plt-order-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
#plt-app .plt-order-tabs button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--mist);
  font: inherit; font-size: var(--size-sm); cursor: pointer; }
#plt-app .plt-order-tabs button[aria-selected="true"] { border-color: var(--gold); color: var(--gold); background: var(--surface-2); }
#plt-app .plt-order-wait { margin: 0 0 10px; }
#plt-app .plt-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#plt-app .plt-order-row { display: grid; grid-template-columns: 2.2em 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
#plt-app .plt-order-row.is-unheld { background: none; }
#plt-app .plt-order-n { font: 400 var(--size-lg) var(--font-serif); color: var(--mist); text-align: right; }
#plt-app .plt-order-row.is-read .plt-order-n { color: var(--accent-jade); }
#plt-app .plt-order-face { width: 40px; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--gold); }
#plt-app .plt-order-face img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-order-row.is-unheld .plt-order-face img { opacity: 0.6; }
#plt-app .plt-order-text { display: grid; gap: 2px; min-width: 0; justify-items: start; }
#plt-app .plt-order-name { padding: 0; border: 0; background: none; color: var(--blossom); font: 400 var(--size-md) var(--font-serif); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
#plt-app .plt-order-name:hover { color: var(--gold); }
#plt-app .plt-order-text small { font-size: var(--size-xs); color: var(--mist); }
#plt-app .plt-order-state { display: inline-flex; align-items: center; gap: 8px; }
#plt-app .plt-order-state .plt-seal { width: 24px; height: 24px; object-fit: contain; }
#plt-app .plt-order-read { font-size: var(--size-xs); color: var(--accent-jade); }
#plt-app .plt-order-move { display: inline-flex; gap: 2px; }
#plt-app .plt-order-move button { min-width: 2.2em; padding: 4px 6px; }
#plt-app .plt-order-move button[disabled] { opacity: 0.35; cursor: default; }
@media (max-width: 640px) {
  #plt-app .plt-orders .section-heading { flex-wrap: wrap; align-items: flex-start; }
  #plt-app .plt-orders .plt-heading-tools { justify-content: flex-start; }
  #plt-app .plt-order-row { grid-template-columns: 1.8em 34px minmax(0, 1fr) auto; gap: 10px; }
  #plt-app .plt-order-state { display: none; }
}

/* ============================================================
   Drop 92: a copy's own page in the Imperial Library - an item,
   not a reading: what it is, who made it, where it stands in the
   collection, and the volumes it holds in Scrolls in Hand. Court
   Collaborators: companies at court.
   ============================================================ */
#plt-app .plt-item-back { margin: 0 0 18px; }
#plt-app .book-profile-top.plt-item-top { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.4fr) minmax(250px, .8fr); gap: 30px; }
#plt-app .plt-item-top .profile-info h1 { margin-bottom: 4px; }
#plt-app .plt-item-edition { margin: 0 0 4px; font: 400 var(--size-lg) var(--font-serif); color: var(--gold); }
#plt-app .plt-item-holds { margin: 0 0 6px; font-size: var(--size-sm); color: var(--accent-jade); }
#plt-app .plt-item-by { margin: 6px 0 0; }
#plt-app .plt-item-link { padding: 0; border: 0; background: none; color: var(--accent-jade); font: inherit; text-decoration: none; cursor: pointer; }
#plt-app .plt-item-link:hover { color: var(--gold); }
#plt-app .plt-item-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; }
#plt-app .plt-item-links span { display: inline-flex; align-items: baseline; gap: 8px; }
#plt-app .plt-item-links small { font-size: var(--size-xs); color: var(--plt-muted); text-transform: uppercase; letter-spacing: .07em; }
#plt-app .plt-item-facts strong { overflow-wrap: anywhere; }
#plt-app .plt-item-facts strong .plt-item-link { font: inherit; }
#plt-app .plt-item-extras { margin: 0 0 14px; color: var(--plt-ink); }
#plt-app .plt-item-extras small { display: block; font-size: var(--size-xs); color: var(--plt-muted); text-transform: uppercase; letter-spacing: .07em; }
#plt-app .plt-mine { padding: 16px; border: 1px solid var(--plt-line); border-radius: 9px; background: var(--plt-panel); }
#plt-app .plt-mine-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
#plt-app .plt-mine-head h2 { margin: 0; font: 400 var(--size-xl) var(--font-serif); color: var(--plt-ink); }
#plt-app .plt-mine-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 5px; font-size: var(--size-xs);
  background: var(--plt-raised); color: var(--plt-muted); }
#plt-app .plt-mine-status .plt-seal { width: 24px; height: 24px; object-fit: contain; }
#plt-app .plt-mine[data-tone="got"] .plt-mine-status { color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 14%, var(--plt-panel)); }
#plt-app .plt-mine[data-tone="way"] .plt-mine-status { color: var(--gold); background: var(--plt-soft); }
#plt-app .plt-mine-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 0 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--plt-line); }
#plt-app .plt-mine-counts strong { display: block; font: var(--size-xl)/1.2 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--plt-ink); }
#plt-app .plt-mine-counts span { display: block; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-mine-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#plt-app .plt-mine-actions > * { flex: 1; justify-content: center; }
#plt-app .plt-mine-note { margin: 10px 0 0; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-mine-paid { margin: 12px 0 0; font-size: var(--size-xs); color: var(--plt-muted); overflow-wrap: anywhere; }
#plt-app .plt-inside { margin-top: 30px; }
#plt-app .plt-inside-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 12px; }
#plt-app .plt-inside-one { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; text-align: left;
  border: 1px solid var(--plt-line); border-radius: 8px; background: var(--plt-panel); color: var(--plt-ink); font: inherit; cursor: pointer; }
#plt-app button.plt-inside-one:hover { border-color: var(--gold); }
#plt-app .plt-inside-one.is-gap { cursor: default; opacity: .7; }
#plt-app .plt-inside-face { width: 46px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; display: grid; place-items: center;
  background: var(--plt-raised); color: var(--gold); font-family: var(--font-serif); }
#plt-app .plt-inside-face img { width: 100%; height: 100%; object-fit: cover; }
#plt-app .plt-inside-text { display: grid; gap: 2px; min-width: 0; }
#plt-app .plt-inside-text strong { font: 400 var(--size-md) var(--font-serif); overflow-wrap: anywhere; }
#plt-app .plt-inside-text small { font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-item-notes { margin-top: 26px; padding: 18px; }
#plt-app .plt-item-notes h2 { margin: 0 0 8px; font: 400 var(--size-xl) var(--font-serif); }
#plt-app .plt-item-notes p { margin: 0; white-space: pre-wrap; }
#plt-modal .plt-company-field small, #plt-modal .plt-country-field small { margin-top: 4px; }
@media (max-width: 1150px) {
  #plt-app .book-profile-top.plt-item-top { grid-template-columns: 240px minmax(0, 1fr); }
  #plt-app .plt-item-side { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #plt-app .book-profile-top.plt-item-top { grid-template-columns: 1fr; }
}
.court-rank-tag.is-company, .court-badge.is-company strong { letter-spacing: .02em; }

/* ============================================================
   Drop 93: a copy's page holds My collection under its title,
   above its facts, with the volumes it holds beside its edition.
   Tags and tropes are chosen from what is known, or added new.
   A wish for this month wears the blossom.
   ============================================================ */
#plt-app .book-profile-top.plt-item-top { grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr); align-items: start; }
/* A field beside one with a hint keeps its own height. */
#plt-modal .form-grid > .field { align-self: start; }
#plt-app .plt-item-vols { color: var(--accent-jade); font-size: .85em; white-space: nowrap; }
#plt-app .plt-item-top .plt-mine { margin: 18px 0 4px; max-width: 40rem; }
#plt-modal .plt-chips-field { gap: 8px; }
#plt-modal .plt-picks { display: flex; flex-wrap: wrap; gap: 6px; }
#plt-modal .plt-pick { padding: 5px 10px; border: 1px solid var(--plt-line); border-radius: 999px; background: var(--plt-panel);
  color: var(--plt-muted); font: inherit; font-size: var(--size-xs); cursor: pointer; }
#plt-modal .plt-pick:hover { border-color: var(--gold); color: var(--plt-ink); }
#plt-modal .plt-pick.is-on { border-color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 16%, var(--plt-panel)); color: var(--plt-ink); }
#plt-modal .plt-pick.is-on::before { content: '✓ '; color: var(--accent-jade); }
#plt-modal .plt-pick-new { max-width: 24rem; }
#plt-modal .plt-pub-year, #plt-modal .plt-lang-field small { margin-top: 4px; }
.wl-room .wl-badge[data-tone="month"] { background: var(--wl-purple-soft); color: var(--wl-purple); }
@media (max-width: 1150px) {
  #plt-app .book-profile-top.plt-item-top { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  #plt-app .book-profile-top.plt-item-top { grid-template-columns: 1fr; }
  #plt-app .plt-item-top .plt-mine { max-width: none; }
}

/* ============================================================
   Drop 94: every cover field takes a pasted picture - the Paste
   button stands beside the address it can also take.
   ============================================================ */
#plt-modal .plt-cover-ways.has-paste { grid-template-columns: minmax(0, 1fr) auto auto auto; }
#plt-modal .plt-paste-btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 640px) {
  #plt-modal .plt-cover-ways.has-paste { grid-template-columns: 1fr 1fr; }
  #plt-modal .plt-cover-ways.has-paste .plt-cover-url { grid-column: 1 / -1; }
}
/* A record's editor on a phone is one column (a later rule had held it at two). */
@media (max-width: 720px) {
  #plt-modal #record-form .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Drop 95: a story line is put into To be read from its window.
   ============================================================ */
#plt-modal .plt-orig-head:has(.plt-line-toread) { gap: 12px; flex-wrap: wrap; align-items: center; }
#plt-modal .plt-line-toread { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#plt-modal .plt-line-toread small { font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-line-toread small.is-all { color: var(--accent-jade); }
#plt-modal .plt-line-kind { max-width: 22rem; margin: 6px 0 14px; }
#plt-modal .plt-line-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }

/* ============================================================
   Drop 96: a story line's editor holds what every volume shares.
   ============================================================ */
#plt-modal .plt-form-section { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--plt-line); }
#plt-modal .plt-form-section h3 { margin: 0; font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }
#plt-modal .plt-form-section small { color: var(--plt-muted); }

/* ============================================================
   Drop 98: the Royal Academy holds the written appraisal.
   What worked / What did not beside each mark, a note on each
   feeling, and the written appraisal under Madame's final words.
   ============================================================ */
#gsa-app .gsa-tally { font-weight: 400; color: var(--d-gold, var(--gold)); letter-spacing: .02em; }
#gsa-app .gsa-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
#gsa-app .gsa-linebox { border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 12px 13px 13px; min-width: 0; }
#gsa-app .gsa-linebox-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: var(--size-sm); }
#gsa-app .gsa-linebox-head b { font-weight: 500; }
#gsa-app .gsa-sign { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 4px; font-weight: 600; line-height: 1; border: 1px solid var(--line2); }
#gsa-app .gsa-worked .gsa-sign, #gsa-app .gsa-worked .gsa-linebox-head b, #gsa-app .gsa-wside.gsa-worked .gsa-wlabel { color: var(--d-jade, var(--jade)); }
#gsa-app .gsa-didnot .gsa-sign, #gsa-app .gsa-didnot .gsa-linebox-head b, #gsa-app .gsa-wside.gsa-didnot .gsa-wlabel { color: var(--rose); }
#gsa-app .gsa-worked .gsa-sign { border-color: color-mix(in srgb, var(--d-jade, var(--jade)) 45%, transparent); }
#gsa-app .gsa-didnot .gsa-sign { border-color: color-mix(in srgb, var(--rose) 45%, transparent); }
#gsa-app .gsa-draft, #gsa-app .gsa-line-edit { display: block; width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: 5px; color: var(--d-ink, var(--ink)); padding: 9px 11px; font-size: var(--size-sm); line-height: 1.7; resize: vertical; min-height: 64px; }
#gsa-app .gsa-line-edit { min-height: 52px; }
#gsa-app .gsa-linebox-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
#gsa-app .gsa-linebox-foot small { font-size: var(--size-2xs); color: var(--dim); }
#gsa-app .gsa-lines { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
#gsa-app .gsa-lines:empty { display: none; }
#gsa-app .gsa-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px 9px 12px; font-size: var(--size-sm); line-height: 1.6; color: var(--d-ink, var(--ink)); }
#gsa-app .gsa-line.editing { grid-template-columns: minmax(0, 1fr); }
#gsa-app .gsa-line.editing .gsa-line-tools { display: none; }
#gsa-app .gsa-line-cat { grid-column: 1 / -1; font-size: var(--size-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
#gsa-app .gsa-didnot .gsa-line-cat { color: color-mix(in srgb, var(--rose) 70%, var(--dim)); }
#gsa-app .gsa-line-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
#gsa-app .gsa-line-tools { display: flex; gap: 2px; }
#gsa-app .gsa-line-tool { border: 0; background: transparent; color: var(--dim); width: 24px; height: 24px; border-radius: 4px; padding: 0; font-size: var(--size-sm); line-height: 1; }
#gsa-app .gsa-line-tool:hover { color: var(--d-gold, var(--gold)); background: var(--raised); }
#gsa-app .gsa-lines-empty { font-size: var(--size-xs); color: var(--dim); padding: 4px 0; }
#gsa-app .gsa-old-note > span, #gsa-app .gsa-legacy > span { color: var(--dim); }
#gsa-app .gsa-legacy { margin-top: 16px; }
#gsa-app .gsa-feeling-note { margin-top: 12px; }
#gsa-app .gsa-feeling-note textarea { min-height: 49px; }
#gsa-app .final-words .field > small { font-size: var(--size-2xs); color: var(--dim); line-height: 1.6; }
#gsa-app .gsa-written { margin-top: 23px; border-color: var(--line2); }
#gsa-app .gsa-written[hidden] { display: none; }
#gsa-app .gsa-written .panel-body { padding-top: 2px; }
#gsa-app .gsa-written-intro { font-size: var(--size-sm); color: var(--muted); margin: 0 0 16px; }
#gsa-app .gsa-written-count { grid-column: 1 / -1; font-size: var(--size-xs); color: var(--dim); border: 1px solid var(--line); border-radius: 7px; padding: 10px 13px; background: var(--soft); margin: 0; }
#gsa-app .gsa-written-count b { font-weight: 400; color: var(--d-jade, var(--jade)); }
#gsa-app .gsa-wfield { border: 1px solid var(--line); border-radius: 8px; padding: 14px 15px 15px; background: var(--soft); gap: 5px; }
#gsa-app .gsa-wlabel { display: flex; align-items: center; gap: 8px; font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--d-ink, var(--ink)); }
#gsa-app .gsa-wfield > small { font-size: var(--size-xs); color: var(--dim); margin-bottom: 5px; }
#gsa-app .gsa-wfield textarea { font-size: var(--size-sm); }
#gsa-app .gsa-wside .gsa-lines { margin: 4px 0 6px; }
#gsa-app .gsa-connect { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: var(--size-xs); color: var(--muted); }
#gsa-app .gsa-verdict-field { border-color: var(--line2); }
#gsa-app .gsa-verdict-field .gsa-wlabel { color: var(--d-gold, var(--gold)); }
#gsa-app .gsa-words { align-self: flex-end; font-size: var(--size-2xs); color: var(--dim); }
#gsa-app .gsa-written-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  #gsa-app .gsa-evidence { grid-template-columns: 1fr; }
  #gsa-app .gsa-linebox-foot { flex-wrap: wrap; }
}
@media print {
  #gsa-app .gsa-draft, #gsa-app .gsa-linebox-foot, #gsa-app .gsa-line-tools { display: none !important; }
}

/* ============================================================
   Drop 100: a story line of standalone novels (its genres, tags and
   tropes are each book's own); a line's author on its books; a year alone.
   ============================================================ */
#plt-modal #record-form.plt-standalones [data-plt-own] { display: none; }
#plt-modal .plt-line-author { color: var(--plt-muted, var(--mist)); }
#plt-modal input[readonly] { opacity: .78; cursor: default; }
#plt-modal .plt-year-only { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#plt-modal .plt-year-only small { color: var(--plt-muted, var(--mist)); white-space: nowrap; }
#plt-modal .plt-year-only input { max-width: 120px; }

/* ============================================================
   Drop 102: a group of standalone novels - its books, in her order.
   ============================================================ */
#plt-modal #record-form.plt-standalones [data-plt-vols] { display: none; }
#plt-modal .plt-solo-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#plt-modal .plt-solo { display: grid; grid-template-columns: 28px 52px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--plt-line); border-radius: 10px; background: var(--plt-panel); }
#plt-modal .plt-solo.is-read { border-color: color-mix(in srgb, var(--plt-jade) 45%, var(--plt-line)); }
#plt-modal .plt-solo-n { font: 400 var(--size-lg) var(--font-serif); color: var(--gold); text-align: center; }
#plt-modal .plt-solo-face { width: 52px; height: 72px; padding: 0; border: 1px solid var(--plt-line); border-radius: 5px; overflow: hidden; background: var(--plt-field); display: grid; place-items: center; color: var(--gold); }
#plt-modal .plt-solo-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plt-modal .plt-solo-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#plt-modal .plt-solo-title { border: 0; background: none; padding: 0; text-align: left; color: var(--plt-ink); font: 400 var(--size-md) var(--font-serif); cursor: pointer; overflow-wrap: anywhere; }
#plt-modal .plt-solo-title:hover { color: var(--gold); }
#plt-modal .plt-solo-text > small { color: var(--plt-muted); }
#plt-modal .plt-solo-copies { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
#plt-modal .plt-solo-copy { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--plt-line); border-radius: 999px; background: transparent; color: var(--plt-ink); padding: 2px 8px 2px 4px; cursor: pointer; }
#plt-modal .plt-solo-tools { display: flex; align-items: center; gap: 4px; }
#plt-modal .plt-solo-tools button[disabled] { opacity: .35; cursor: default; }
@media (max-width: 720px) {
  #plt-modal .plt-solo { grid-template-columns: 22px 44px minmax(0, 1fr); }
  #plt-modal .plt-solo-face { width: 44px; height: 62px; }
  #plt-modal .plt-solo-state, #plt-modal .plt-solo-tools { grid-column: 3; }
}

/* Drop 103: the library's quiet buttons wherever they stand in the precinct (no grey buttons) */
#plt-app .db-quiet:not(.db-room *) { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 4px 6px;
  min-height: 29px; font: inherit; font-size: var(--size-xs); color: var(--accent-jade); border-radius: 4px; cursor: pointer; }
#plt-app .db-quiet:not(.db-room *):hover { background: color-mix(in srgb, var(--blossom) 7%, var(--surface)); }
#plt-app .plt-hand-boxes .db-quiet { padding: 0 3px; min-height: 0; font-size: inherit; vertical-align: baseline; }
/* a scroll's page: back to the shelf; its facts as an item's */
#plt-app .plt-fact-change { margin-left: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--size-xs); color: var(--plt-muted);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#plt-app .plt-fact-change:hover { color: var(--gold); }
#plt-app .plt-book-box { margin: 8px 0 0; }
/* the Pavilion of Transforming Tales */
#plt-app .plt-tales-bar .scroll-search { flex: 1 1 18rem; max-width: 26rem; }
#plt-app .plt-tales-loose { margin-top: 28px; }
@media (max-width: 720px) {
  #plt-app .plt-tales-bar .scroll-search { max-width: none; }
}

/* Drop 104: the Dashboard in ten boxes, in the palace's dress */
#plt-app .plt-dash { display: grid; gap: 21px; margin-bottom: 23px; }
#plt-app .plt-dash > .stats { margin: 0; }
#plt-app .plt-dash-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 21px; }
#plt-app .plt-dash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 21px; align-items: stretch; }
#plt-app .plt-dash-row.is-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
#plt-app .plt-dash .panel { margin: 0; }
#plt-app .plt-dash .panel-head h2 { font-family: var(--font-serif); font-weight: 400; }
#plt-app .plt-dash-link { font-size: var(--size-xs); white-space: nowrap; }
/* a quiet moment */
#plt-app .plt-dash-welcome { position: relative; overflow: hidden; min-height: 290px; display: flex; align-items: center; border: 1px solid var(--plt-line);
  border-radius: 12px; background: var(--plt-panel); box-shadow: var(--plt-shadow); }
#plt-app .plt-dash-art { position: absolute; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; }
#plt-app .plt-dash-welcome::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--plt-panel) 40%, color-mix(in srgb, var(--plt-panel) 82%, transparent) 54%, color-mix(in srgb, var(--plt-panel) 12%, transparent) 84%); }
#plt-app .plt-dash-welcome-text { position: relative; z-index: 1; padding: 32px 36px; max-width: 31rem; }
#plt-app .plt-dash-welcome h2 { font: 400 var(--size-3xl)/1.12 var(--font-serif); margin: 4px 0 14px; color: var(--blossom); }
#plt-app .plt-dash-welcome p:not(.eyebrow) { color: var(--plt-muted); font-size: var(--size-sm); margin: 0 0 20px; max-width: 21rem; }
#plt-app .plt-dash-welcome .primary { padding: 10px 18px; border-radius: 6px; font-size: var(--size-sm); }
/* the reading stand */
#plt-app .plt-dash-stand { display: flex; gap: 22px; align-items: center; min-width: 0; padding: 24px; border: 1px solid var(--plt-line); border-radius: 12px;
  background: var(--plt-panel); box-shadow: var(--plt-shadow); }
#plt-app .plt-dash-stand.is-empty { display: block; }
#plt-app .plt-dash-stand.is-empty h2 { font: 400 var(--size-xl) var(--font-serif); margin: 0 0 6px; }
#plt-app .plt-dash-stand-cover { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }
#plt-app .plt-dash-stand-cover .book-cover { width: 110px; min-width: 110px; height: 164px; box-shadow: 7px 9px 14px color-mix(in srgb, var(--ink) 45%, transparent); }
#plt-app .plt-dash-stand-cover .cover-title { font-size: 15px; }
#plt-app .plt-dash-stand-cover .cover-author { font-size: 6px; }
#plt-app .plt-dash-stand-copy { flex: 1; min-width: 0; }
#plt-app .plt-dash-stand h2 { margin: 0; }
#plt-app .plt-dash-title { padding: 0; border: 0; background: none; color: var(--blossom); font: 400 var(--size-xl)/1.25 var(--font-serif); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
#plt-app .plt-dash-title:hover { color: var(--gold); }
#plt-app .plt-dash-by { margin: 4px 0 0; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-dash-stand .actions { margin-top: 14px; }
#plt-app .plt-dash-steps { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-dash-step { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--plt-line); background: transparent; color: var(--blossom); font: inherit;
  font-size: var(--size-md); line-height: 1; cursor: pointer; }
#plt-app .plt-dash-step:hover { border-color: var(--gold); color: var(--gold); }
/* the counts */
#plt-app .plt-dash-counts .stat b em { font-style: normal; font-family: var(--font-sans); font-size: var(--size-sm); color: var(--plt-muted); }
/* the reading habit */
#plt-app .plt-dash-today { margin: 0 0 13px; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-app .plt-dash-done { font-size: var(--size-xs); color: var(--accent-jade); padding: 6px 0; }
#plt-app .plt-dash-freeze { margin: 12px 0 0; font-size: var(--size-xs); }
/* the yearly intention */
#plt-app .plt-dash-goal { display: flex; align-items: center; gap: 24px; }
#plt-app .plt-dash-goal h3 { font: 400 var(--size-lg)/1.35 var(--font-serif); margin: 0 0 6px; }
#plt-app .plt-dash-goal .note { margin: 0 0 6px; }
/* a line worth keeping */
#plt-app .plt-dash-quote { position: relative; }
#plt-app .plt-dash-quote-mark { display: block; font: 400 var(--size-3xl)/1 var(--font-serif); color: var(--gold); height: 26px; }
#plt-app .plt-dash-quote blockquote { margin: 6px 0 14px; font: italic 400 var(--size-xl)/1.45 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
#plt-app .plt-dash-quote .note { margin: 0; }
/* recently closed */
#plt-app .plt-dash-shelf { display: flex; gap: 18px; align-items: flex-end; overflow-x: auto; padding: 18px 6px 0; min-height: 150px; scrollbar-width: thin; }
#plt-app .plt-dash-shelf-book { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s; }
#plt-app .plt-dash-shelf-book:hover { transform: translateY(-4px); }
#plt-app .plt-dash-shelf-book .book-cover { width: 88px; min-width: 88px; height: 130px; box-shadow: 5px 7px 12px color-mix(in srgb, var(--ink) 45%, transparent); }
#plt-app .plt-dash-shelf-book .cover-title { font-size: 12px; }
#plt-app .plt-dash-shelf-book .cover-author { font-size: 5px; }
#plt-app .plt-dash-plank { height: 8px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 55%, var(--surface)), color-mix(in srgb, var(--gold) 25%, var(--ink)));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ink) 60%, transparent); }
#plt-app .plt-dash-closed .panel-head .note { margin: 0; font-size: var(--size-xs); }
#plt-app .plt-dash-desk .row:last-child { border-bottom: 0; }
@media (max-width: 1100px) {
  #plt-app .plt-dash-top, #plt-app .plt-dash-row.is-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #plt-app .plt-dash-row { grid-template-columns: minmax(0, 1fr); }
  #plt-app .plt-dash-art { width: 100%; opacity: .35; }
  #plt-app .plt-dash-welcome::after { background: linear-gradient(90deg, var(--plt-panel) 10%, color-mix(in srgb, var(--plt-panel) 55%, transparent)); }
  #plt-app .plt-dash-welcome-text { padding: 24px 22px; }
  #plt-app .plt-dash-welcome h2 { font-size: var(--size-2xl); }
  #plt-app .plt-dash-stand { padding: 18px; gap: 16px; }
  #plt-app .plt-dash-stand-cover .book-cover { width: 84px; min-width: 84px; height: 126px; }
  #plt-app .plt-dash-goal { gap: 16px; }
  #plt-app .plt-dash .habit-strip { gap: 4px; }
  #plt-app .plt-dash .chart-bars { gap: 3px; }
  #plt-app .plt-dash .chart-bars small { font-size: var(--size-3xs); letter-spacing: 0; }
  #plt-app .plt-dash .panel-head { flex-wrap: wrap; }
}
/* Drop 104b: the yearly intention's ring - its words inside it, centred; the box's content in the middle of its height */
#plt-app .plt-dash-row > .panel { display: flex; flex-direction: column; }
#plt-app .plt-dash-row > .panel > .panel-body { flex: 1; }
#plt-app .plt-dash-goal { min-height: 100%; }
#plt-app .plt-dash-goal .goal-ring { width: 132px; height: 132px; padding: 8px; }
#plt-app .plt-dash-goal .goal-ring > div { padding: 0 14px; text-align: center; }
#plt-app .plt-dash-goal .goal-ring b { line-height: 1.1; }
#plt-app .plt-dash-goal .goal-ring small { font-size: var(--size-3xs); letter-spacing: .12em; line-height: 1.35; margin-top: 4px; max-width: 76px; }
@media (max-width: 720px) {
  #plt-app .plt-dash-goal .goal-ring { width: 112px; height: 112px; }
}

/* Drop 105: the timeline - The Chronicle and Reading History. A day is one box beside its date on the line. */
.tl { display: flex; flex-direction: column; }
.tl-day { display: grid; grid-template-columns: 6.6rem 22px minmax(0, 1fr); gap: 0 14px; }
.tl-when { padding-top: 4px; text-align: right; }
.tl-when b { font-size: var(--size-xs); font-weight: 400; color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: color-mix(in srgb, var(--gold) 28%, var(--border)); }
.tl-day:first-child .tl-rail::before { top: 10px; }
.tl-day:last-child .tl-rail::before { bottom: auto; height: 14px; }
.tl-rail i { position: relative; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, var(--ink)); }
.tl-box { min-width: 0; margin-bottom: 22px; padding: 16px 22px 6px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-low); }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; }
.tl-head + .tl-entry { border-top: 0; padding-top: 8px; }
.tl-kicker { display: block; font-size: var(--size-3xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tl-qi { font-size: var(--size-xs); letter-spacing: .08em; color: var(--accent-jade); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-entry { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--border);
  background: none; color: inherit; font: inherit; text-align: left; }
button.tl-entry { cursor: pointer; }
button.tl-entry:disabled { cursor: default; }
button.tl-entry:hover .tl-title { color: var(--gold); }
.tl-face { flex: none; display: grid; place-items: center; width: 40px; height: 58px; overflow: hidden; border-radius: 3px; box-shadow: var(--shadow-low);
  color: var(--mist); font-family: var(--font-cjk); }
.tl-face img { width: 100%; height: 100%; object-fit: cover; }
.tl-face .book-cover { width: 40px !important; min-width: 0 !important; height: 58px !important; border-radius: 3px; }
.tl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-text .tl-kicker { font-size: var(--size-3xs); letter-spacing: .14em; }
.tl-title { font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; transition: color var(--fast) var(--ease); }
.tl-note { font-size: var(--size-xs); color: var(--mist); overflow-wrap: anywhere; }
.tl-value { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.tl-value b { font: 400 var(--size-md) var(--font-serif); color: var(--accent-jade); }
.tl-value b.is-spent { color: var(--mist); }
.tl-value span { display: block; font-size: var(--size-3xs); }
.tl-value .is-turbid { color: var(--moon); }
.tl-value .is-clean { color: var(--accent-jade); }
.tl-undo { flex: none; width: 1.4rem; height: 1.4rem; background: transparent; border: none; color: var(--mist); font-size: var(--size-sm); line-height: 1;
  opacity: 0; cursor: pointer; transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease); }
.tl-entry:hover .tl-undo, .tl-undo:focus-visible { opacity: 1; }
.tl-undo:hover { color: var(--accent-lacquer); }
.tl-entry.is-reversed { opacity: .5; }
.tl-entry.is-reversed .tl-title { text-decoration: line-through; }
.tl-entry.is-reversed .tl-undo { opacity: .8; color: var(--accent-jade); }
#plt-app .plt-history-frame.plt-tl-frame { border: 0; background: none; box-shadow: none; padding: 0; }
#plt-app .plt-tl-frame .result-caption { margin: 0 0 16px; }
#plt-app .plt-tl-frame .plt-hist-foot { border-top: 0; padding: 4px 0 0; }
@media (max-width: 720px) {
  .tl-day { grid-template-columns: 16px minmax(0, 1fr); gap: 0 10px; }
  .tl-when { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 6px; }
  .tl-rail { grid-column: 1; grid-row: 1 / span 2; }
  .tl-box { grid-column: 2; grid-row: 2; padding: 14px 16px 4px; }
  .tl-day:last-child .tl-rail::before { height: 14px; }
  .tl-title { font-size: var(--size-md); }
  .tl-undo { opacity: .6; }
}

/* Drop 106: the Rear Palace, revamped to Madame's illustrated court - its own pages in the palace's dress. Prefixed rv-. */
.rv-page { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.rv-page h2, .rv-page h3, .rv-page p { margin: 0; }
.rv-wait, .rv-hint { color: var(--mist); font-size: var(--size-sm); line-height: 1.6; }
.rv-hint { font-size: var(--size-xs); }
.rv-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: -8px; }
.rv-button, a.primary, a.ghost { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.rv-page .ghost.small, .rv-page .primary.small { padding: 0.35rem 0.75rem; font-size: var(--size-xs); }
.rv-page .primary { font-size: var(--size-sm); }
.rv-link { padding: 0; border: 0; background: none; color: var(--accent-jade); font: inherit; font-size: var(--size-xs); text-decoration: none; cursor: pointer; }
.rv-link:hover { color: var(--gold); }
.rv-strong { color: var(--blossom); text-decoration: none; font-weight: 500; }
.rv-strong:hover { color: var(--gold); }
.rv-eyebrow { display: block; font-size: var(--size-3xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.rv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-badge { display: inline-block; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); border-radius: 3px;
  font-size: var(--size-3xs); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); white-space: nowrap; }
.rv-badge.is-jade { color: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 50%, var(--border)); background: color-mix(in srgb, var(--accent-jade) 10%, transparent); }
.rv-badge.is-rose { color: color-mix(in srgb, var(--accent-lacquer) 55%, var(--blossom)); border-color: color-mix(in srgb, var(--accent-lacquer) 45%, var(--border)); background: color-mix(in srgb, var(--accent-lacquer) 10%, transparent); }
.rv-badge.is-cold { color: var(--moon); border-color: color-mix(in srgb, var(--moon) 45%, var(--border)); background: color-mix(in srgb, var(--moon) 8%, transparent); }

/* the four counts */
.rv-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rv-count { padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-low); min-width: 0; }
.rv-count span { display: block; font-size: var(--size-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.rv-count strong { display: block; margin: 8px 0 4px; font: 400 var(--size-2xl)/1.15 var(--font-serif); color: var(--gold); }
.rv-count small { display: block; font-size: var(--size-xs); color: var(--mist); }

/* a section's head */
.rv-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.rv-head h2 { font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.rv-head p { margin-top: 4px; font-size: var(--size-xs); color: var(--mist); }
.rv-head > .rv-link, .rv-head > a, .rv-head > button { flex: none; white-space: nowrap; }
.rv-panel .rv-head { margin-bottom: 14px; }
.rv-panel-title { margin: 4px 0 14px; font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.rv-subhead { margin: 0 0 12px; font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }

/* the picture cards */
.rv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rv-tiles.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rv-tiles.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rv-tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: inherit; text-decoration: none; box-shadow: var(--shadow-low); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.rv-tile:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); transform: translateY(-2px); }
.rv-tile-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.rv-tiles.is-four .rv-tile-img { aspect-ratio: 3 / 2; }
.rv-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-tile-text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.rv-tile-text strong { font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); }
.rv-tile-text small { font-size: var(--size-xs); color: var(--mist); line-height: 1.5; }
.rv-tile-text em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: var(--size-3xs); letter-spacing: .08em; color: var(--accent-jade); }
.rv-seals .rv-tile-img { aspect-ratio: 4 / 3; }

/* panels and pairs of them */
.rv-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rv-grid2.is-top { align-items: start; }
.rv-panel-title + .rv-bars, .rv-panel-title + .rv-empty { margin-top: 12px; }
.rv-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-panel { padding: 22px 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-low); min-width: 0; }
.rv-small-panel { padding: 16px 20px; }
.rv-small-panel h3 { margin-bottom: 10px; font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }
.rv-divider { height: 1px; margin: 20px 0; background: var(--border); }
.rv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; }
.rv-empty .cjk { color: var(--gold); font-size: var(--size-lg); }
.rv-empty h3 { font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }
.rv-empty p { font-size: var(--size-xs); color: var(--mist); max-width: 26rem; }

/* faces */
.rv-face { flex: none; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--gold) 12%, var(--ink));
  color: var(--gold); font-family: var(--font-cjk); }
.rv-face img { width: 100%; height: 100%; object-fit: cover; }
.rv-face.is-large { width: 120px; height: 120px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); font-size: var(--size-2xl); }
.rv-minis { display: flex; flex-direction: column; gap: 8px; }
.rv-mini { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 80%, var(--ink)); color: inherit; text-decoration: none; }
.rv-mini:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.rv-mini > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-mini strong { font: 400 var(--size-md) var(--font-serif); color: var(--blossom); }
.rv-mini small { font-size: var(--size-xs); color: var(--mist); }
.rv-arrow { flex: none; padding: 0; border: 0; background: none; color: var(--accent-jade); font-size: var(--size-sm); text-decoration: none; cursor: pointer; }

/* dispatches */
.rv-dispatches { display: flex; flex-direction: column; }
.rv-dispatch { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); }
.rv-dispatch:first-child { border-top: 0; padding-top: 0; }
.rv-dispatch-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rv-dispatch-top time { font-size: var(--size-3xs); color: var(--mist); }
.rv-dispatch h3 { font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); }
.rv-dispatch p { font-size: var(--size-xs); color: var(--mist); line-height: 1.6; }
.rv-dispatch-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-dispatch-foot > span { display: inline-flex; align-items: center; gap: 12px; }

/* a little attention */
.rv-steps { display: flex; flex-direction: column; gap: 10px; }
.rv-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--surface) 80%, var(--ink)); }
.rv-step input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent-jade); flex: none; }
.rv-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-step strong { font-weight: 500; color: var(--blossom); font-size: var(--size-sm); }
.rv-step small { font-size: var(--size-3xs); color: var(--mist); }
.rv-step p { font-size: var(--size-xs); color: var(--mist); }
.rv-step.is-done strong { text-decoration: line-through; color: var(--mist); }

/* the thread on Madame's mind */
.rv-thread { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 320px; border: 1px solid var(--border); border-radius: 10px; background: var(--ink); }
.rv-thread img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-thread::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--ink) 92%, transparent) 88%); }
.rv-thread > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; }
.rv-thread h2 { font: 400 var(--size-2xl)/1.15 var(--font-serif); color: var(--blossom); }
.rv-thread p { font: italic 400 var(--size-md)/1.5 var(--font-serif); color: var(--blossom); }

/* the timeline of decrees */
.rv-timeline { display: flex; flex-direction: column; }
.rv-event { position: relative; padding: 14px 0 14px 24px; border-top: 1px solid var(--border); }
.rv-event:first-child { border-top: 0; padding-top: 2px; }
.rv-event::before { content: ''; position: absolute; left: 2px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, var(--ink)); }
.rv-event:first-child::before { top: 8px; }
.rv-event time { display: block; font-size: var(--size-3xs); color: var(--mist); }
.rv-event strong { display: block; margin: 4px 0; font-weight: 500; color: var(--blossom); font-size: var(--size-sm); }
.rv-event strong a { color: inherit; text-decoration: none; }
.rv-event strong a:hover { color: var(--gold); }
.rv-event p { font-size: var(--size-xs); color: var(--mist); }

/* the residents */
.rv-residents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rv-resident { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-low); }
.rv-arch { display: grid; place-items: center; margin: 14px 14px 0; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 160px 160px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, var(--ink)); color: var(--gold);
  font: 400 var(--size-4xl) var(--font-cjk); text-decoration: none; }
.rv-arch img { width: 100%; height: 100%; object-fit: cover; }
.rv-resident-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 20px 20px; }
.rv-resident-text h3 { font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); }
.rv-resident-text p { font: italic 400 var(--size-sm)/1.55 var(--font-serif); color: var(--blossom); opacity: .9; }
.rv-pin { position: absolute; top: 22px; right: 22px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--border)); background: color-mix(in srgb, var(--ink) 75%, transparent); color: var(--gold); font-size: var(--size-sm); cursor: pointer; }
.rv-pin:hover { background: color-mix(in srgb, var(--gold) 20%, var(--ink)); }

/* written notes: merits, impressions, the journals, exiles */
.rv-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rv-note { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.rv-date { font-size: var(--size-3xs); color: var(--mist); letter-spacing: .04em; }
.rv-note h3 { font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); }
.rv-note p { font: 400 var(--size-sm)/1.6 var(--font-serif); color: var(--blossom); opacity: .9; }
.rv-note footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }

/* the pairs */
.rv-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rv-pair { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-low); }
.rv-pair-img { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ink); }
.rv-pair-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-pair .rv-pin { top: 14px; right: 14px; }
.rv-pair-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; }
.rv-pair-text h3 { font: 400 var(--size-2xl)/1.15 var(--font-serif); color: var(--blossom); }
.rv-pair-who { font: italic 400 var(--size-sm) var(--font-serif); color: var(--mist); }
.rv-pair-quote { font: italic 400 var(--size-md)/1.5 var(--font-serif); color: var(--blossom); }

/* keeping the records alive, the bars */
.rv-refreshes { display: flex; flex-direction: column; gap: 10px; }
.rv-refresh { display: flex; flex-direction: column; gap: 8px; }
.rv-refresh > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; }
.rv-refresh > div span { font-size: var(--size-3xs); color: var(--gold); }
.rv-bars { display: flex; flex-direction: column; gap: 12px; }
.rv-bar-title { display: flex; justify-content: space-between; gap: 10px; font-size: var(--size-xs); color: var(--blossom); margin-bottom: 6px; }
.rv-bar-title strong { color: var(--gold); font-weight: 500; }
.rv-bar-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--border) 70%, var(--ink)); overflow: hidden; }
.rv-bar-track i { display: block; height: 100%; border-radius: 3px; background: var(--accent-jade); }

/* letters: petitions, returns, the winter register */
.rv-letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rv-letter { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.rv-letter h3 { font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.rv-letter p { font: 400 var(--size-sm)/1.6 var(--font-serif); color: var(--blossom); opacity: .9; }
.rv-letter footer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 6px; }
.rv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.rv-facts.is-wide { gap: 16px 24px; }
.rv-facts dt { font-size: var(--size-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.rv-facts dd { margin: 3px 0 0; font: 400 var(--size-md) var(--font-serif); color: var(--blossom); }
.rv-facts.is-wide dd { font-size: var(--size-xl); color: var(--gold); }
.rv-decree { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rv-decree > img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* the register, the pager, the report's controls */
.rv-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.rv-table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.rv-table th { padding: 12px 16px; text-align: left; font-size: var(--size-3xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); border-bottom: 1px solid var(--border); }
.rv-table td { padding: 12px 16px; vertical-align: top; color: var(--blossom); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.rv-table tr:last-child td { border-bottom: 0; }
.rv-table small { display: block; margin-top: 3px; font-size: var(--size-3xs); color: var(--mist); }
.rv-pager { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 14px; font-size: var(--size-xs); color: var(--mist); }
.rv-report-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.rv-seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); }
.rv-seg button { padding: 6px 14px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--mist); font-size: var(--size-xs); }
.rv-seg button[aria-pressed="true"] { background: var(--blossom); color: var(--ink); }
.rv-report-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-xs); color: var(--mist); }
.rv-report-bar input, .rv-report-bar select, .rv-toolbar input, .rv-toolbar select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--blossom); font: inherit; font-size: var(--size-xs); }
.rv-columns { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; margin-top: 8px; }
.rv-columns > div { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.rv-columns strong { font-size: var(--size-3xs); color: var(--mist); font-weight: 400; }
.rv-column-track { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; border-radius: 4px; background: color-mix(in srgb, var(--border) 50%, transparent); }
.rv-column-track i { display: block; width: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 45%, var(--ink))); }
.rv-columns span { font-size: var(--size-3xs); color: var(--mist); }
.rv-form-label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: var(--size-xs); color: var(--mist); }
.rv-form-label textarea { min-height: 110px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--surface) 80%, var(--ink));
  color: var(--blossom); font: 400 var(--size-sm)/1.6 var(--font-serif); resize: vertical; }
.rv-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-toolbar input[type="search"] { flex: 1 1 18rem; padding: 9px 12px; font-size: var(--size-sm); }
.rv-row { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: var(--size-sm); color: var(--blossom); }
.rv-row:first-of-type { border-top: 0; }
.rv-row time { flex: none; width: 3.6rem; color: var(--mist); font-size: var(--size-xs); }
.rv-chronicle .tl-value { min-width: 9rem; }

/* tonight's plaque */
.rv-plaque { display: flex; align-items: center; gap: 22px; padding: 20px; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border)); border-radius: 8px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface)); color: inherit; text-decoration: none; }
.rv-plaque-tag { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 46px; padding: 22px 0 14px; border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 75%, var(--blossom)), color-mix(in srgb, var(--gold) 55%, var(--ink))); color: var(--ink); font-size: var(--size-md); }
.rv-plaque-words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-plaque-words strong { font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); }
.rv-plaque-words small { font-size: var(--size-sm); color: var(--blossom); }
.rv-plaque-words em { font-size: var(--size-xs); color: var(--mist); }

@media (max-width: 1100px) {
  .rv-tiles.is-four, .rv-tiles.is-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-residents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rv-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-grid2, .rv-decree, .rv-pairs, .rv-notes, .rv-letters { grid-template-columns: minmax(0, 1fr); }
  .rv-tiles, .rv-tiles.is-four, .rv-tiles.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rv-tiles, .rv-tiles.is-four, .rv-tiles.is-five, .rv-residents { grid-template-columns: minmax(0, 1fr); }
  .rv-head { flex-direction: column; align-items: flex-start; }
  .rv-panel { padding: 18px; }
  .rv-columns { gap: 3px; }
  .rv-plaque { flex-wrap: wrap; }
  .rv-face.is-large { width: 88px; height: 88px; }
}

/* Drop 107: the Rear Palace Dashboard in Madame's order - the rank boxes with their numbers; tonight's
   plaque beside this week's birthdays (as tall as the plaque, scrolling past it); a row of three. */
.rv-rankboxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.rv-rankbox { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; border: 1px solid var(--border); border-top: 3px solid var(--rank, var(--gold));
  border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-low); color: var(--blossom); text-decoration: none; min-width: 0; }
.rv-rankbox:hover { border-color: color-mix(in srgb, var(--rank, var(--gold)) 55%, var(--border)); border-top-color: var(--rank, var(--gold)); }
.rv-rankbox strong { font: 400 var(--size-2xl)/1.15 var(--font-serif); color: var(--rank, var(--gold)); }
.rv-rankbox > span { font-size: var(--size-sm); color: var(--blossom); }
.rv-rankbox small { font-size: var(--size-xs); color: var(--mist); }
.rv-rankbox.is-unranked { --rank: var(--mist); border-top-style: dashed; }

.rv-tonight { align-items: stretch; }
.rv-bday-panel { display: flex; flex-direction: column; min-height: 0; }
.rv-bday-body { position: relative; flex: 1 1 auto; min-height: 180px; }
.rv-bday-list { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.rv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; align-items: stretch; }
.rv-grid3 .rv-small-panel { display: flex; flex-direction: column; min-width: 0; }
.rv-small-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }

@media (max-width: 1100px) {
  .rv-rankboxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .rv-bday-body { min-height: 0; }
  .rv-bday-list { position: static; max-height: 340px; }
}
@media (max-width: 560px) {
  .rv-rankboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Drop 108: one Year · Month · Day bar - The Chronicle, Reading History, Historical Records - sitting evenly
   in its frame: the same space above, below and on each side; each label centred on its row and set in as
   far as the words of the chips beside it. */
.period-bar.is-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.period-bar.is-tabs > .period-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; width: fit-content; max-width: 100%;
  border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--ink) 22%, var(--surface)); }
.period-bar.is-tabs .period-label { flex: none; box-sizing: border-box; width: 5.5rem; margin: 0; padding: 2px 8px 0 14px; align-self: center; line-height: 1;
  font-size: var(--size-3xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.period-bar.is-tabs .period-chip { margin: 0; border: 1px solid transparent; background: transparent; padding: 7px 14px; border-radius: 7px;
  font-size: var(--size-xs); line-height: 1.2; color: var(--mist); cursor: pointer; }
.period-bar.is-tabs .period-chip:hover { color: var(--blossom); }
.period-bar.is-tabs .period-chip.is-on { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--blossom); }
#plt-app .plt-hist-period { margin: 0 0 16px; }
.rv-page > .period-bar.is-tabs { margin: 0; }   /* the Rear Palace page spaces its own sections */
/* the precinct's buttons take their font whole (font: inherit); the chips keep the Chronicle's size */
#plt-app .period-bar.is-tabs .period-chip { font-size: var(--size-xs); line-height: 1.2; }
@media (max-width: 40rem) {
  .period-bar.is-tabs .period-label { width: 100%; padding: 6px 10px 4px 14px; }
}

/* Drop 109: Tonight's plaque 翻牌子 in Madame's painted frame (rooms/plaque-frame-enchong.webp, 1617 x 741 before scaling - Drop 111: the tablet reads 今日恩寵).
   The portrait sits behind the frame's round window (centre 31.66% across, 47.54% down; radius 11.54% of the
   width); the words sit on the dark ground to the right. The painted tablet on the left stays bare. */
.rv-plaque.is-framed { position: relative; display: block; aspect-ratio: 1617 / 741; padding: 0; gap: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--blossom); text-decoration: none; container-type: inline-size; isolation: isolate; }
.rv-plaque.is-framed:hover { border: 0; background: none; }
.rv-plaque-portrait { position: absolute; left: 19.96%; top: 22.01%; width: 23.4%; height: 51.07%; z-index: 0; overflow: hidden; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 16%, var(--ink)); }
.rv-plaque-portrait img { width: 100%; height: 100%; object-fit: cover; }
.rv-plaque-portrait .cjk { font: 400 var(--size-3xl)/1 var(--font-serif); color: var(--gold); }
.rv-plaque-frame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; user-select: none;
  transition: filter var(--fast, .15s) ease; }
.rv-plaque.is-framed:hover .rv-plaque-frame { filter: brightness(1.08); }
.rv-plaque.is-framed .rv-plaque-words { text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 85%, transparent); }
.rv-plaque.is-framed .rv-plaque-words { position: absolute; z-index: 2; left: 49%; right: 9%; top: 8%; bottom: 16%;
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.rv-plaque.is-framed .rv-plaque-words .rv-eyebrow { font-size: var(--size-3xs); }
.rv-plaque.is-framed .rv-plaque-words strong { font: 400 var(--size-lg)/1.15 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.rv-plaque.is-framed .rv-plaque-words small { font-size: var(--size-xs); line-height: 1.4; color: var(--blossom); opacity: .9;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rv-plaque.is-framed .rv-plaque-words em { display: none; font-size: var(--size-2xs); color: var(--mist);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (min-width: 440px) {
  .rv-plaque.is-framed .rv-plaque-words strong { font-size: var(--size-xl); }
  .rv-plaque.is-framed .rv-plaque-words small { font-size: var(--size-sm); -webkit-line-clamp: 2; }
  .rv-plaque.is-framed .rv-plaque-words em { display: block; }
}
@container (min-width: 640px) {
  .rv-plaque.is-framed .rv-plaque-words { gap: 8px; }
  .rv-plaque.is-framed .rv-plaque-words strong { font-size: var(--size-2xl); }
  .rv-plaque-portrait .cjk { font-size: var(--size-4xl); }
}
@container (max-width: 340px) {
  .rv-plaque.is-framed .rv-plaque-words small { display: none; }
  .rv-plaque-portrait .cjk { font-size: var(--size-2xl); }
}
/* the plaque takes the wider share of its row, so the painting is not cramped */
@media (min-width: 861px) {
  .rv-tonight { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* Drop 113: the literary pop-ups (and the two other engine dialogs, which share their frame).
   1. No sideways scroll. The Save bar's hairline was drawn by a ::before reaching 100vmax to each side,
      and an element that wide makes the scrolling body scroll sideways too (a body that scrolls up and
      down cannot let its sides overflow). The hairline is now a second shadow, which takes no room;
      the body is also told never to scroll sideways.
   2. The × sits in the middle of its circle: drawn as two strokes from the centre, not a letter whose
      line height pushed it low. */
:is(#plt-modal, #mpc-modal, #gsa-dialog) :is(.form-actions, .dialog-actions, .actions:has([type="submit"])) {
  /* the bar's ground from its top edge down and out to both sides; beneath it, the same shape 1px higher in the line colour */
  box-shadow: 0 100vmax 0 100vmax var(--dlg-bg), 0 calc(100vmax - 1px) 0 100vmax var(--border);
  clip-path: inset(-1px -100vmax -100vmax);
}
:is(#plt-modal, #mpc-modal, #gsa-dialog) :is(.form-actions, .dialog-actions, .actions:has([type="submit"]))::before { content: none; }
:is(#plt-modal, #mpc-modal, #gsa-dialog)[open] { overflow-x: hidden; }
:is(#plt-modal, #mpc-modal, #gsa-dialog)[open] > :is(form, .dialog-body) { overflow-x: hidden; }

:is(#plt-modal, #mpc-modal, #gsa-dialog) .dialog-head .close, #plt-modal .plt-bk-x, #plt-modal .plt-bookpick-drop {
  position: relative; display: inline-grid; place-items: center; padding: 0; font-size: 0; line-height: 0; color: var(--plt-muted, var(--mist)); }
:is(#plt-modal, #mpc-modal, #gsa-dialog) .dialog-head .close::before, :is(#plt-modal, #mpc-modal, #gsa-dialog) .dialog-head .close::after,
#plt-modal .plt-bk-x::before, #plt-modal .plt-bk-x::after, #plt-modal .plt-bookpick-drop::before, #plt-modal .plt-bookpick-drop::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 1.5px; border-radius: 1px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg); }
:is(#plt-modal, #mpc-modal, #gsa-dialog) .dialog-head .close::after, #plt-modal .plt-bk-x::after, #plt-modal .plt-bookpick-drop::after {
  transform: translate(-50%, -50%) rotate(-45deg); }
:is(#plt-modal, #mpc-modal, #gsa-dialog) .dialog-head .close:hover { color: var(--blossom); }

/* Drop 115: better book lookups - the Hardcover line and the services' credit in Look one up; Find the volumes. */
#plt-modal .plt-look-hc { margin: 10px 0 0; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-look-hc .is-on { color: var(--accent-jade); }
#plt-modal .plt-look-hc b { color: var(--plt-ink); font-weight: 500; }
#plt-modal .plt-look-hc button { margin-left: 6px; padding: 2px 8px; font-size: var(--size-xs); }
#plt-modal .plt-look-credit { margin: 12px 0 0; font-size: var(--size-2xs); color: var(--plt-muted); }
#plt-modal .plt-vol-results { margin-top: 14px; }
#plt-modal .plt-vol-results > .muted { font-size: var(--size-xs); color: var(--plt-muted); margin: 0 0 10px; }
#plt-modal .plt-vol-opts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; font-size: var(--size-xs); color: var(--plt-ink); }
#plt-modal .plt-vol-opts label { display: inline-flex; align-items: center; gap: 6px; }
#plt-modal .plt-vol-list { display: grid; gap: 10px; }
#plt-modal .plt-vol-row { display: grid; grid-template-columns: 7rem fit-content(45%) minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px;
  border: 1px solid var(--plt-line); border-radius: 10px; background: var(--plt-panel); }
#plt-modal .plt-vol-row.is-off { opacity: .5; }
#plt-modal .plt-vol-use { display: grid; gap: 8px; justify-items: start; }
#plt-modal .plt-vol-use > input { margin: 0; }
#plt-modal .plt-vol-use b { font: 400 var(--size-lg) var(--font-serif); color: var(--gold); }
#plt-modal .plt-vol-mine { width: 46px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; opacity: .8; }
#plt-modal .plt-vol-covers { display: flex; flex-wrap: wrap; gap: 8px; }
#plt-modal .plt-vol-cover { position: relative; display: grid; justify-items: center; gap: 3px; width: 68px; cursor: pointer; }
#plt-modal .plt-vol-cover input { position: absolute; opacity: 0; pointer-events: none; }
#plt-modal .plt-vol-cover img { width: 68px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; border: 2px solid transparent; background: var(--plt-field); }
#plt-modal .plt-vol-cover small { font-size: var(--size-3xs); color: var(--plt-muted); text-align: center; line-height: 1.2; }
#plt-modal .plt-vol-cover:has(input:checked) img { border-color: var(--accent-jade); }
#plt-modal .plt-vol-cover:has(input:focus-visible) img { outline: 2px solid var(--gold); }
#plt-modal .plt-vol-cover.is-none span { display: grid; place-items: center; width: 68px; aspect-ratio: 2 / 3; border: 1px dashed var(--plt-line); border-radius: 4px;
  font-size: var(--size-3xs); color: var(--plt-muted); text-align: center; }
#plt-modal .plt-vol-cover.is-none:has(input:checked) span { border: 2px solid var(--accent-jade); color: var(--plt-ink); }
#plt-modal .plt-vol-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
#plt-modal .plt-vol-field { align-content: start; }
#plt-modal .plt-vol-field { display: grid; gap: 3px; font-size: var(--size-3xs); color: var(--plt-muted); min-width: 0; }
#plt-modal .plt-vol-field input { width: 100%; padding: 6px 9px; border: 1px solid var(--plt-line); border-radius: 6px; background: var(--plt-field); color: var(--plt-ink); font: inherit; font-size: var(--size-xs); }
#plt-modal .plt-vol-field small { font-size: var(--size-3xs); line-height: 1.3; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#plt-modal .plt-vol-from { grid-column: 1 / -1; font-size: var(--size-3xs); color: var(--plt-muted); }
@media (max-width: 760px) {
  #plt-modal .plt-vol-row { grid-template-columns: minmax(0, 1fr); }
  #plt-modal .plt-vol-use { grid-auto-flow: column; align-items: center; justify-content: start; }
}
@media (max-width: 480px) {
  #plt-modal .plt-vol-fields { grid-template-columns: minmax(0, 1fr); }
}
/* the search bars never push their dialog wider than the screen */
#plt-modal .plt-look-bar > * { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { #plt-modal .plt-look-bar { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Drop 116: agencies and labels. Each of an artist's companies is
   a row with its logo, the kind of tie, a note, and "former"
   dimmed; the facts line opens the company; a company's page
   lists its artists, the former ones dimmed.
   ============================================================ */
.court-firm-fact a { color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.court-firm-fact a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.court-firm-list { margin-top: var(--space-2); }
.member-roll-row.court-firm { align-items: center; flex-wrap: nowrap; }
.court-firm-logo { flex: none; width: 2.75rem; aspect-ratio: 1; overflow: hidden;
  display: grid; place-items: center; text-decoration: none; color: var(--mist);
  border-radius: var(--radius-sm); border: var(--hairline);
  background: color-mix(in srgb, var(--ink) 60%, var(--surface)); }
.court-firm-logo img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surface); }
.court-firm-words { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.court-firm-words .member-roll-name { font-weight: 400; overflow-wrap: anywhere; }
.court-firm-under { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.1rem var(--space-2); font-size: var(--size-xs); }
.court-firm-under .sub { overflow-wrap: anywhere; }
.court-firm-role, .court-firm-former { font-size: var(--size-2xs); letter-spacing: .06em; text-transform: uppercase; }
.court-firm-role { color: var(--accent); }
.court-firm-former { color: var(--mist); }
.court-firm > .credit-drop { flex: none; font-size: var(--size-md); }
.court-card.is-former { opacity: 0.55; }
.court-card.is-former:hover { opacity: 0.85; }
.court-firm-tie { margin-top: 0.15rem; }

/* ============================================================
   Drop 117: the drawn world. The Map of the Known World and each
   journey's way, drawn by the palace in its own colours: the sea in
   ink with a faint gold graticule, lands in a quiet surface, countries
   walked in gold, home in jade, ahead in a softer jade, wished for in
   lacquer; pins and the arcs of each way keep their size at any zoom.
   ============================================================ */
.dj-room .dj-world { padding: 16px; }
.dj-room .dj-world > .period-bar.is-tabs { margin: 0 0 12px; padding: 0; background: transparent; border: 0; }
.dj-room .dj-map { position: relative; }
.dj-room .dj-map-stage { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border);
  background: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; }
.dj-room .dj-map-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 450; cursor: grab; }
.dj-room .dj-map.is-dragging .dj-map-svg { cursor: grabbing; }
.dj-room .dj-sea { fill: var(--ink); }
.dj-room .dj-graticule path { fill: none; stroke: color-mix(in srgb, var(--gold) 10%, transparent); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.dj-room .dj-land { fill: color-mix(in srgb, var(--blossom) 8%, var(--surface)); stroke: var(--ink); stroke-width: 0.5;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill var(--fast) var(--ease); }
.dj-room .dj-land:hover, .dj-room .dj-land.is-lit { fill: color-mix(in srgb, var(--blossom) 16%, var(--surface)); }
.dj-room .dj-land.is-walked { fill: var(--gold); }
.dj-room .dj-land.is-home { fill: var(--accent-jade); }
.dj-room .dj-land.is-ahead { fill: color-mix(in srgb, var(--accent-jade) 42%, var(--surface)); }
.dj-room .dj-land.is-wished { fill: color-mix(in srgb, var(--accent-lacquer) 45%, var(--surface)); }
.dj-room .dj-land.is-walked:hover, .dj-room .dj-land.is-walked.is-lit { fill: var(--lantern); }
.dj-room .dj-land.is-home:hover, .dj-room .dj-land.is-home.is-lit,
.dj-room .dj-land.is-ahead:hover, .dj-room .dj-land.is-ahead.is-lit,
.dj-room .dj-land.is-wished:hover, .dj-room .dj-land.is-wished.is-lit { stroke: var(--blossom); stroke-width: 1; }
.dj-room .dj-tiny { stroke: var(--ink); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.dj-room .dj-tiny.is-walked { fill: var(--gold); }
.dj-room .dj-tiny.is-home { fill: var(--accent-jade); }
.dj-room .dj-tiny.is-ahead { fill: color-mix(in srgb, var(--accent-jade) 60%, var(--surface)); }
.dj-room .dj-tiny.is-wished { fill: var(--accent-lacquer); }
.dj-room .dj-route { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; pointer-events: none; }
.dj-room .dj-route.is-walked { stroke: color-mix(in srgb, var(--lantern) 80%, transparent); stroke-dasharray: 5 4; }
.dj-room .dj-route.is-ahead { stroke: color-mix(in srgb, var(--accent-jade) 90%, var(--blossom)); stroke-dasharray: 2 4; }
.dj-room .dj-pin { cursor: pointer; stroke: var(--ink); outline: none; }
.dj-room .dj-pin.is-walked { fill: var(--lantern); }
.dj-room .dj-pin.is-ahead { fill: var(--ink); stroke: color-mix(in srgb, var(--accent-jade) 85%, var(--blossom)); }
.dj-room .dj-pin.is-wished { fill: var(--ink); stroke: var(--accent-lacquer); }
.dj-room .dj-pin:hover, .dj-room .dj-pin:focus-visible, .dj-room .dj-pin.is-lit { fill: var(--blossom); }
.dj-room .dj-map-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.dj-room .dj-map-tool { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--blossom); font-size: 16px; line-height: 1; }
.dj-room .dj-map-tool:hover { border-color: var(--gold); color: var(--gold); }
.dj-room .dj-map-tip { position: absolute; z-index: 2; max-width: min(260px, calc(100% - 12px)); padding: 9px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--blossom)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 70%, transparent); display: grid; gap: 2px; overflow-wrap: anywhere; }
.dj-room .dj-map-tip strong { font: 15px var(--font-serif); color: var(--blossom); }
.dj-room .dj-map-tip .dj-tip-home { color: var(--accent-jade); font-size: 12px; }
.dj-room .dj-map-tip .dj-small a { color: var(--gold); text-decoration: none; }
.dj-room .dj-map-tip .dj-small a:hover { text-decoration: underline; }
.dj-room .dj-map-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; }
.dj-room .dj-map-layer { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--mist); font-size: 12px; }
.dj-room .dj-map-layer.is-on { color: var(--blossom); border-color: color-mix(in srgb, var(--gold) 35%, var(--border)); }
.dj-room .dj-map-layer:not(.is-on) .dj-map-swatch { opacity: .35; }
.dj-room .dj-map-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.dj-room .dj-map-layer.is-walked .dj-map-swatch { background: var(--gold); }
.dj-room .dj-map-layer.is-ahead .dj-map-swatch { background: color-mix(in srgb, var(--accent-jade) 42%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent-jade); }
.dj-room .dj-map-layer.is-wished .dj-map-swatch { background: color-mix(in srgb, var(--accent-lacquer) 45%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent-lacquer); }
.dj-room .dj-map-layer.is-home .dj-map-swatch { background: var(--accent-jade); }
.dj-room .dj-map-credit { margin-left: auto; font-size: 11px; color: var(--mist); opacity: .8; }
.dj-room .dj-map-lost { margin-top: 10px; }
.dj-room .dj-map-lost strong { color: var(--blossom); font-weight: 500; }
.dj-room .dj-map-missing { margin-bottom: 14px; }
.dj-room .dj-way-map { margin-top: 14px; }
.dj-room .dj-map.is-small .dj-map-tool { width: 28px; height: 28px; font-size: 14px; }
@media (max-width: 640px) {
  .dj-room .dj-map-svg { aspect-ratio: 4 / 3; }   /* a phone sees part of the world, and moves across it */
  .dj-room .dj-world { padding: 12px; }
  .dj-room .dj-map-tools { top: 6px; right: 6px; }
  .dj-room .dj-map-tool { width: 28px; height: 28px; }
  .dj-room .dj-map-credit { margin-left: 0; width: 100%; }
}

/* ============================================================
   Drop 119: no browser blue in any dropdown. Where the browser can
   dress its own list (Chrome and Edge 135 and later), every dropdown
   in the palace opens as a palace panel: the surface, a gold hairline,
   the chosen line in soft gold, the hovered one lighter, no blue.
   The drawn arrow stays; the browser's own is hidden.
   ============================================================ */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]) { appearance: base-select; }
  select:not([multiple]):not([size])::picker-icon { display: none; }
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
    background: var(--surface); color: var(--blossom);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); border-radius: 8px;
    padding: 4px; margin-block: 4px; max-height: min(60vh, 24rem); overflow-y: auto;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 75%, transparent);
  }
  select:not([multiple]):not([size]) option {
    padding: 7px 12px; border-radius: 6px; background: transparent; color: var(--blossom);
    font-size: var(--size-sm); line-height: 1.35; white-space: normal; cursor: pointer;
  }
  select:not([multiple]):not([size]) option::checkmark { display: none; }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { background: color-mix(in srgb, var(--gold) 13%, transparent); outline: none; }
  select:not([multiple]):not([size]) option:checked { background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--blossom); }
  select:not([multiple]):not([size]) option:disabled { color: var(--mist); cursor: default; }
  select:not([multiple]):not([size]) optgroup { color: var(--gold); font-size: var(--size-2xs); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px 2px; }
}

/* ============================================================
   Drop 119: the Rear Palace keeps one green for its buttons (never
   the wing's lacquer red), and its pop-ups wear Madame's design:
   a deep jade sheet with a gold hairline, a large serif title, the
   line beneath it, a close cross, the fields in two columns with
   small labels above them, and the hairline over Cancel and Save.
   Set by the room on the page, so every pop-up opened there - the
   palace's forms, its confirmations, the portrait dialog - is dressed.
   ============================================================ */
:root { --rv-green: var(--accent-jade); --rv-green-ink: color-mix(in srgb, var(--jade) 45%, var(--ink)); }
#view[data-room^="rear-palace/"] .primary,
:root:has(#view[data-room^="rear-palace/"]) .modal-host .primary {
  background: var(--rv-green); border-color: var(--rv-green); color: var(--rv-green-ink); font-weight: 600;
}
#view[data-room^="rear-palace/"] .primary:hover,
:root:has(#view[data-room^="rear-palace/"]) .modal-host .primary:hover {
  background: color-mix(in srgb, var(--rv-green) 82%, var(--blossom)); border-color: color-mix(in srgb, var(--rv-green) 82%, var(--blossom));
}
#view[data-room^="rear-palace/"] .primary:disabled { opacity: .55; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host { background: color-mix(in srgb, var(--ink) 80%, var(--jade)); backdrop-filter: blur(6px); }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal {
  width: min(45rem, 100%); position: relative;
  background: color-mix(in srgb, var(--jade) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 11px;
  box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 55%, transparent);
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-head { padding: 29px 64px 4px 29px; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-head h3 { font: 400 30px/1.2 var(--font-serif); color: var(--blossom); letter-spacing: -.01em; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-head p { margin-top: 8px; font-size: var(--size-xs); color: var(--mist); }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-close {
  position: absolute; top: 17px; right: 18px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: none; color: var(--mist); cursor: pointer;
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-close::before,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-close::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 1.6px; border-radius: 1px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-close:hover { color: var(--blossom); background: color-mix(in srgb, var(--blossom) 8%, transparent); }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-content: start; padding: 20px 29px 18px;
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body > * { grid-column: 1 / -1; min-width: 0; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body > .field { grid-column: auto; margin: 0; align-self: start; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body > .field-full,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body > .field:has(textarea) { grid-column: 1 / -1; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body > .modal-intro { margin: -14px 0 4px; font-size: var(--size-xs); color: var(--mist); }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field label { font-size: 11px; color: color-mix(in srgb, var(--mist) 70%, var(--blossom)); margin-bottom: 7px; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field input,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field select,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field textarea {
  background: color-mix(in srgb, var(--ink) 55%, var(--surface)); color: var(--blossom);
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 5px; padding: 10px 12px; font-size: var(--size-sm);
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field select { padding-right: 2rem; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field textarea { min-height: 114px; line-height: 1.7; }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field input:focus,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field select:focus,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 9%, transparent); outline: none;
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-actions {
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); margin: 0 29px; padding: 18px 0 24px; background: transparent; gap: 12px;
}
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-actions .ghost,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-actions .primary,
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-actions .danger { min-height: 35px; padding: 8px 14px; border-radius: 5px; font-size: var(--size-xs); }
@media (max-width: 640px) {
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-head { padding: 22px 56px 4px 18px; }
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-head h3 { font-size: 26px; }
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 16px 18px; }
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-body > .field { grid-column: 1 / -1; }
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal-actions { margin: 0 18px; flex-wrap: wrap; }
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field input,
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field select,
  :root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .field textarea { font-size: 16px; }
}
/* Drop 119: every room of the Rear Palace now opens under the framed header with its own name, so the
   rooms' own headings step aside (their counts stay). */
.view[data-hero] .hr-heading h1, .view[data-hero] .hr-heading > div > p { display: none; }
.view[data-hero] .hr-heading { justify-content: flex-end; margin-bottom: 12px; }

/* ============================================================
   Drop 120: the portrait finder - a rank and a craft to choose
   from, a name to search, and the ones missing a portrait ticked
   below; those resting (nothing found today) and those with no
   lookup id are greyed and say why; a found one shows its face.
   ============================================================ */
.court-finder .modal-body { gap: 10px; }
.court-finder-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.court-finder-row .period-label { width: 4.2rem; flex: none; font-size: var(--size-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.court-finder-row .period-chip { padding: 5px 11px; border-radius: 6px; font-size: var(--size-xs); }
.court-finder-search { width: 100%; }
.court-finder-said { margin: 2px 0 0; font-size: var(--size-xs); color: var(--mist); }
.court-finder-ticks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.court-finder-warn { font-size: var(--size-xs); color: var(--gold); }
.court-finder-list { max-height: min(46vh, 26rem); overflow-y: auto; overscroll-behavior: contain; border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent);
  border-radius: 8px; padding: 4px; background: color-mix(in srgb, var(--ink) 40%, transparent); }
.court-finder-one { display: grid; grid-template-columns: auto 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.court-finder-one:hover { background: color-mix(in srgb, var(--blossom) 5%, transparent); }
.court-finder-one input { width: 16px; height: 16px; accent-color: var(--accent-jade); }
.court-finder-face { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: var(--mist);
  background: color-mix(in srgb, var(--ink) 60%, var(--surface)); border: 1px solid var(--border); font-size: var(--size-sm); }
.court-finder-face img { width: 100%; height: 100%; object-fit: cover; }
.court-finder-words { display: grid; min-width: 0; }
.court-finder-words b { font-weight: 500; color: var(--blossom); overflow-wrap: anywhere; }
.court-finder-words small { font-size: var(--size-2xs); color: var(--mist); }
.court-finder-state { font-size: var(--size-2xs); color: var(--mist); text-align: right; max-width: 15rem; }
.court-finder-one.is-off { cursor: default; }
.court-finder-one.is-off .court-finder-words, .court-finder-one.is-off .court-finder-face { opacity: .55; }
.court-finder-one.is-found .court-finder-state { color: var(--accent-jade); }
@media (max-width: 640px) {
  .court-finder-one { grid-template-columns: auto 30px minmax(0, 1fr); }
  .court-finder-state { grid-column: 3; text-align: left; max-width: none; }
}

/* ============================================================
   Drop 121: inviting an artist - the name, their art and "Look
   them up" across the top, the places to ask as small chips, each
   match as a card (portrait, name, native name, what they are
   known for, the place it came from), the one chosen with its
   portrait and where it was filled from, then the record in two
   columns. Prefixed aa-.
   ============================================================ */
.aa-modal { width: min(52rem, 100%); }
:root:is(:has(#view[data-room^="rear-palace/"]), :has(#view[data-room^="gardens/golden-shadows/"])) .modal-host .modal.aa-modal { width: min(52rem, 100%); }
.aa-body > section, .aa-body > .aa-part { grid-column: 1 / -1; }
.aa-look { display: grid; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); }
.aa-look-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 13rem) auto; gap: 12px; align-items: end; }
.aa-modal .aa-look-row .field { margin: 0; }
.aa-look-go { min-height: 40px; white-space: nowrap; }
.aa-places { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aa-places-label { font-size: var(--size-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.aa-place { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--size-xs); color: var(--mist); cursor: pointer; }
.aa-place input { width: 13px; height: 13px; accent-color: var(--accent-jade); margin: 0; }
.aa-place.is-on { color: var(--blossom); border-color: color-mix(in srgb, var(--accent-jade) 55%, var(--border)); background: color-mix(in srgb, var(--accent-jade) 10%, transparent); }
.aa-said { margin: 0; font-size: var(--size-xs); color: var(--mist); }
.aa-said.is-bad, .aa-chosen small.is-bad { color: var(--gold); }
.aa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 8px; margin-top: 8px; max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; }
.aa-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 14%, var(--border)); background: color-mix(in srgb, var(--ink) 35%, transparent); color: inherit; font: inherit; cursor: pointer; }
.aa-card:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.aa-card.is-chosen { border-color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 12%, transparent); }
.aa-face { width: 48px; height: 60px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  color: var(--mist); font-family: var(--font-serif); font-size: var(--size-lg); }
.aa-face img { width: 100%; height: 100%; object-fit: cover; }
.aa-words { display: grid; gap: 1px; min-width: 0; }
.aa-words b { font-weight: 500; color: var(--blossom); overflow-wrap: anywhere; }
.aa-native { font-size: var(--size-xs); color: var(--gold); }
.aa-words small { font-size: var(--size-2xs); color: var(--mist); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aa-source { align-self: start; font-size: var(--size-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-jade); white-space: nowrap; }
.aa-chosen-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, var(--border)); background: color-mix(in srgb, var(--accent-jade) 8%, transparent); }
.aa-portrait { width: 96px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 60%, var(--surface));
  color: var(--mist); font: 400 var(--size-2xl) var(--font-serif); }
.aa-portrait img { width: 100%; height: 100%; object-fit: cover; }
.aa-chosen-words { display: grid; gap: 4px; min-width: 0; }
.aa-chosen-words b { font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.aa-chosen-words small { font-size: var(--size-xs); color: var(--mist); }
.aa-keep { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-xs); color: var(--blossom); cursor: pointer; margin-top: 4px; }
.aa-keep input { accent-color: var(--accent-jade); }
.aa-already { margin: 6px 0 0; font-size: var(--size-xs); color: var(--gold); }
.aa-already a { color: var(--accent-jade); }
.aa-part { margin: 6px 0 -4px; font: 400 var(--size-md) var(--font-serif); color: var(--gold); }
@media (max-width: 640px) {
  .aa-look-row { grid-template-columns: minmax(0, 1fr); }
  .aa-grid { grid-template-columns: minmax(0, 1fr); max-height: none; }
}

/* ============================================================
   Drop 122 — the Whole Court and its craft rooms: her tile, with
   the portrait whole in a column of its own. The room's buttons on
   their own row, the four counters, our rank boxes, the search.
   ============================================================ */
.court-actions { margin: 4px 0 14px; }
.court-stats { margin: 0 0 16px; }
.court-stats .rv-count.is-door { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--fast) var(--ease); }
.court-stats .rv-count.is-door:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.court-stats .rv-count.is-on { border-color: var(--accent-jade); box-shadow: inset 0 0 0 1px var(--accent-jade); }
.court-toolbar { align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 16px; }
.court-toolbar .scroll-search { flex: 1 1 18rem; min-width: 0; }
.court-overview { white-space: nowrap; margin-left: 4px; }

.court-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 29rem), 1fr)); gap: 16px; margin-top: 4px; }
.court-tile { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-low);
  transition: border-color var(--fast) var(--ease); }
.court-tile:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.court-tile.is-ranked { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.court-tile-art { position: relative; display: block; align-self: start; width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  padding: 0; border: 0; border-radius: 0 0 6px 0; background: color-mix(in srgb, var(--ink) 65%, var(--surface)); cursor: pointer; }
.court-tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.court-tile-back { object-fit: cover; filter: blur(14px) saturate(.8) brightness(.55); transform: scale(1.15); }
.court-tile-face { object-fit: contain; object-position: center; transition: transform var(--fast) var(--ease); }
.court-tile:hover .court-tile-face { transform: scale(1.02); }
.court-tile-art.is-fill .court-tile-face { object-fit: cover; object-position: center 30%; }
.court-tile-art.is-fill .court-tile-back { display: none; }
.court-tile-art.is-bare { display: grid; place-items: center; }
.court-tile-art .court-noface { font-family: var(--font-serif); font-size: var(--size-3xl, 2.6rem); }
.court-tile-art .scroll-fav { position: absolute; top: 8px; right: 8px; z-index: 1; }
.court-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; min-width: 0; }
.court-tile-craft { font-size: var(--size-3xs); }
.court-tile-name { padding: 0; border: 0; background: none; color: var(--blossom); text-align: left; cursor: pointer;
  font: 400 var(--size-xl)/1.15 var(--font-serif); overflow-wrap: anywhere; margin-top: 2px; }
.court-tile-name:hover { color: var(--gold); }
.court-tile-native { font-size: var(--size-xs); color: var(--gold); margin-top: -3px; }
.court-tile-from { margin: 0; font-size: var(--size-xs); color: var(--mist); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.court-tile-from.is-empty { font-style: italic; opacity: .75; }
.court-tile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.court-tile-badges .rv-badge { font-size: var(--size-3xs); }
.court-tile-badges .rv-badge.is-count { color: var(--mist); border-color: var(--border); background: transparent; }
.court-tile-meter { margin-top: auto; padding-top: 8px; font-size: var(--size-3xs); color: var(--mist); }
.court-tile-meter i { display: block; height: 3px; margin-top: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-jade) var(--fill), color-mix(in srgb, var(--border) 70%, var(--ink)) var(--fill)); }
.court-tile-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.court-tile-links .rv-link { font-size: var(--size-xs); }
@media (max-width: 860px) {
  .court-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .court-roster { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .court-tile { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .court-tile-body { padding: 12px 12px 11px; gap: 5px; }
  .court-tile-name { font-size: var(--size-lg); }
  .court-stats .rv-count { padding: 12px 14px; }
  .court-overview { margin-left: 0; }
}

/* ============================================================
   Drop 123 — the artist page: a header by their craft, four tabs
   (Artist profile · Works & credits · News & updates · Court
   connections), every fact and button in its place.
   ============================================================ */
.court-page-actions { justify-content: space-between; align-items: center; margin: 4px 0 14px; }
.court-page-gap { flex: 1; }
.court-page-actions a.primary { text-decoration: none; display: inline-flex; align-items: center; }
.court-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.court-tabs::-webkit-scrollbar { display: none; }
.court-tab { flex: none; padding: 12px 16px 11px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mist);
  font: inherit; font-size: var(--size-sm); cursor: pointer; white-space: nowrap; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.court-tab:hover { color: var(--blossom); }
.court-tab.is-on { color: var(--blossom); border-bottom-color: var(--gold); }
.court-tab-count { display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 999px; font-size: var(--size-3xs); line-height: 1.6;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.court-tab-pane { display: grid; gap: 16px; margin-top: 18px; min-width: 0; }

.court-profile { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 16px; align-items: start; }
.court-profile-portrait { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.court-tile-art.court-profile-art { aspect-ratio: 3 / 4; border-radius: 6px; }
.court-profile-meter { margin-top: 0; padding: 0 4px 4px; }
.court-profile-record { display: flex; flex-direction: column; gap: 8px; }
.court-profile-record .court-detail-name { font: 400 var(--size-2xl)/1.15 var(--font-serif); color: var(--blossom); margin-top: 6px; }
.realm-facts.court-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.court-facts .realm-fact b { font-size: var(--size-sm); overflow-wrap: anywhere; }
.court-profile-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.court-profile-tools { margin-top: 4px; }
.court-chamber-invite { display: flex; align-items: center; gap: 18px; padding: 14px; }
.court-chamber-invite > img { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; flex: none; }
.court-chamber-invite h3 { font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); margin: 4px 0; }
.court-chamber-invite p { font-size: var(--size-xs); color: var(--mist); margin: 0 0 6px; }
.court-charms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.court-charms .vault-sum-label { margin-right: 4px; }
.court-refreshes { display: grid; gap: 0; margin-top: 12px; }
.court-refresh { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: var(--size-xs); }
.court-refresh:first-child { border-top: 0; }
.court-refresh time { color: var(--gold); }
.court-refresh span, .court-refresh a { color: var(--blossom); overflow-wrap: anywhere; }

.court-works-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.court-ring { width: 116px; height: 116px; }
.court-ring-track { fill: none; stroke: color-mix(in srgb, var(--border) 80%, var(--ink)); stroke-width: 10; }
.court-ring-fill { fill: none; stroke: var(--accent-jade); stroke-width: 10; stroke-linecap: round; }
.court-ring-text { fill: var(--blossom); font-family: var(--font-serif); font-size: 24px; }
.court-works-words { display: grid; gap: 6px; min-width: 0; }
.court-works-words h2 { font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.court-works-words h2 span { font: 400 var(--size-sm) var(--font-sans, inherit); color: var(--mist); }
.court-works-words p { font-size: var(--size-sm); color: var(--blossom); }
.court-works-words p.sub { font-size: var(--size-xs); color: var(--mist); }
.court-works-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.court-work-filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.court-work-list { list-style: none; margin: 14px 0 0; padding: 0; }
.court-work { display: grid; grid-template-columns: 22px 44px 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 6px;
  border-top: 1px solid var(--border); }
.court-work:first-child { border-top: 0; }
.court-work.is-none { display: block; color: var(--mist); font-size: var(--size-xs); }
.court-work-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--mist) 60%, transparent);
  display: grid; place-items: center; font-size: 11px; line-height: 1; }
.court-work.is-held .court-work-mark { border: 0; background: var(--accent-jade); color: var(--rv-green-ink, var(--ink)); font-weight: 700; }
.court-work-year { font-size: var(--size-xs); color: var(--mist); font-variant-numeric: tabular-nums; }
.court-work-thumb { width: 32px; height: 46px; border-radius: 3px; overflow: hidden; }
.court-work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.court-work-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.court-work-title { font: 400 var(--size-md) var(--font-serif); color: var(--mist); text-decoration: none; overflow-wrap: anywhere; }
.court-work.is-held .court-work-title { color: var(--blossom); }
a.court-work-title:hover { color: var(--gold); }
.court-work-words small { flex-basis: 100%; font-size: var(--size-2xs); color: var(--mist); overflow-wrap: anywhere; }
.court-work-defining { font-size: var(--size-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.court-work-end { display: flex; align-items: center; gap: 10px; justify-self: end; }
.court-work-rating { font-size: var(--size-xs); color: var(--gold); white-space: nowrap; }
.court-work-status { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: var(--size-3xs); letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; color: var(--mist); }
.court-work-status.is-finished { color: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--border)); background: color-mix(in srgb, var(--accent-jade) 10%, transparent); }
.court-work-status.is-plan, .court-work-status.is-want { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.court-work-status.is-watching, .court-work-status.is-reading { color: var(--blossom); border-color: color-mix(in srgb, var(--blossom) 35%, var(--border)); }
.court-work-status.is-gap { text-transform: none; letter-spacing: 0; border-style: dashed; }
.court-work-plan { white-space: nowrap; }
.court-work-marks { display: flex; gap: 2px; }
.court-work-star, .court-work-hide { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mist);
  font-size: var(--size-md); line-height: 1; cursor: pointer; }
.court-work-star:hover, .court-work-hide:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.court-work-star.is-on { color: var(--gold); }
.court-work.is-hidden { opacity: .5; }
.court-noted-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.court-noted-list li { display: grid; gap: 2px; }
.court-noted-list a, .court-noted-list span { color: var(--blossom); }
.court-noted-list small { font-size: var(--size-2xs); color: var(--mist); }

.court-dispatch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.court-news .rv-dispatches { margin-top: 14px; }
.court-costar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 10px; margin-top: 14px; }
.court-costar { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: inherit; text-decoration: none;
  transition: border-color var(--fast) var(--ease); }
.court-costar:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.court-costar-face { width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface)); color: var(--mist); }
.court-costar-face img { width: 100%; height: 100%; object-fit: cover; }
.court-costar-words { display: grid; min-width: 0; }
.court-costar-words b { font: 400 var(--size-md) var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.court-costar-words small { font-size: var(--size-2xs); color: var(--mist); }
.court-threads .pairing-mini-grid, .court-ships { margin-top: 14px; }
@media (max-width: 860px) { .court-ships .rv-pairs { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) {
  .court-profile { grid-template-columns: minmax(0, 1fr); }
  .court-profile-portrait { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
  .court-profile-portrait .court-profile-art { grid-row: span 3; }
}
@media (max-width: 560px) {
  .realm-facts.court-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .court-chamber-invite { align-items: flex-start; }
  .court-chamber-invite > img { width: 92px; }
  .court-works-head { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }
  .court-ring { width: 92px; height: 92px; }
  .court-work { grid-template-columns: 20px 38px minmax(0, 1fr) auto; gap: 8px; }
  .court-work-thumb { display: none; }
  .court-work-end { grid-column: 3 / 4; justify-self: start; flex-wrap: wrap; }
  .court-work-marks { grid-column: 4; grid-row: 1 / span 2; }
  .court-work-filters { justify-content: flex-start; }
  .court-refresh { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .court-page-actions .primary { font-size: var(--size-xs); }
}

/* ============================================================
   Drop 124 — Works & credits, her "Artist Filmography" design:
   insights in a column on the left, the filmography in our
   compact rows on the right (newest first, ratings kept), and
   her viewing journey across the whole width below.
   ============================================================ */
.court-film { display: grid; grid-template-columns: minmax(0, 268px) minmax(0, 1fr); gap: 20px; align-items: start; }
.court-film.is-empty { grid-template-columns: minmax(0, 1fr); }
.court-film-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.court-film-side .rv-panel { padding: 18px; }
.court-film-side .rv-eyebrow { font-size: var(--size-3xs); margin-bottom: 12px; }
.court-film-side h3 { font: 400 var(--size-lg)/1.25 var(--font-serif); color: var(--blossom); margin: 0 0 12px; }
.court-fine { margin: 8px 0 0; font-size: var(--size-2xs); line-height: 1.65; color: var(--mist); }
.court-glance-cover { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.court-glance-ring { position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent-jade) calc(var(--progress) * 1%), color-mix(in srgb, var(--border) 80%, var(--ink)) 0); }
.court-glance-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.court-glance-ring > div { position: relative; text-align: center; }
.court-glance-ring strong { display: block; font: 400 var(--size-xl)/1.1 var(--font-serif); color: var(--accent-jade); }
.court-glance-ring small { display: block; font-size: var(--size-3xs); color: var(--mist); margin-top: 2px; }
.court-glance-copy b { display: block; font-size: var(--size-xs); font-weight: 500; color: var(--blossom); }
.court-glance-copy span { display: block; font-size: var(--size-2xs); color: var(--mist); line-height: 1.6; margin-top: 3px; }
.court-glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.court-glance-cell strong { display: block; font: 400 var(--size-xl)/1.15 var(--font-serif); color: var(--blossom); }
.court-glance-cell small { display: block; font-size: var(--size-2xs); color: var(--mist); margin-top: 3px; }
.court-glance-library { margin-top: 14px; }
.court-glance-label { display: flex; justify-content: space-between; gap: 8px; font-size: var(--size-2xs); color: var(--mist); }
.court-glance-label b { font-weight: 500; color: var(--gold); }
.court-glance-track { height: 4px; margin: 8px 0; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--border) 80%, var(--ink)); }
.court-glance-track i { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--gold) 70%, var(--ink)); }
.court-taste-average { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.court-taste-average strong { font: 400 2.4rem/1 var(--font-serif); color: var(--gold); }
.court-taste-average span { font: 400 var(--size-lg) var(--font-serif); color: var(--mist); }
.court-taste-average small { margin-left: auto; font-size: var(--size-2xs); color: var(--mist); }
.court-taste-top { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.court-taste-top .court-work-thumb { width: 36px; height: 52px; flex: none; }
.court-taste-name { flex: 1; min-width: 0; }
.court-taste-name small { display: block; font-size: var(--size-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.court-taste-name a { font: 400 var(--size-sm)/1.35 var(--font-serif); color: var(--blossom); text-decoration: none; }
.court-taste-name a:hover { color: var(--gold); }
.court-taste-top > strong { font-weight: 500; color: var(--gold); }
.court-year-bars { display: grid; gap: 8px; }
.court-year-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 9px; align-items: center; font-size: var(--size-2xs); color: var(--mist); }
.court-year-track { height: 6px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--border) 60%, transparent); }
.court-year-track i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-jade) 60%, var(--ink)), var(--accent-jade)); }
.court-year-bar em { font-style: normal; text-align: right; color: var(--blossom); }
.court-year-bar.is-undated { grid-template-columns: minmax(0, 1fr) auto; padding-top: 8px; border-top: 1px solid var(--border); }
.court-notes-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.court-notes-head h3 { margin: 0; }
.court-notes-edit { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--mist); cursor: pointer; font-size: var(--size-md); }
.court-notes-edit:hover { color: var(--gold); border-color: var(--border); }
.court-notes-text { margin: 10px 0 0; font-size: var(--size-xs); line-height: 1.75; color: var(--blossom); white-space: pre-wrap; overflow-wrap: anywhere; }
.court-notes-text.is-empty { color: var(--mist); font-style: italic; }
.court-about-credits { font-size: var(--size-2xs); line-height: 1.7; color: var(--mist); padding: 0 4px; }
.court-about-credits summary { cursor: pointer; color: var(--mist); }
.court-about-credits p { margin: 8px 0 0; }

.court-film-main { min-width: 0; }
.court-film-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.court-film-head .rv-eyebrow { font-size: var(--size-3xs); }
.court-film-head h2 { font: 400 var(--size-2xl)/1.2 var(--font-serif); color: var(--blossom); margin: 4px 0 0; }
.court-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; margin-left: 8px; padding: 0 6px; vertical-align: middle;
  border: 1px solid var(--border); border-radius: 4px; font: 400 var(--size-2xs) var(--font-sans, inherit); color: var(--gold); }
.court-film-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.court-sort { padding: 4px 2px; border: 0; background: none; color: var(--mist); font: inherit; font-size: var(--size-2xs); cursor: pointer; white-space: nowrap; }
.court-sort:hover { color: var(--gold); }
.court-film-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.court-film-controls .scroll-search { flex: 1 1 auto; min-width: 0; }
.court-film-controls select { flex: none; max-width: 11rem; }
.court-film-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.court-film-filters .court-work-filters { justify-content: flex-start; flex: 1 1 auto; }
.court-filter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid transparent; border-radius: 4px; background: none;
  color: var(--mist); font: inherit; font-size: var(--size-2xs); cursor: pointer; }
.court-filter span { font-size: var(--size-3xs); color: color-mix(in srgb, var(--mist) 70%, transparent); }
.court-filter:hover { background: color-mix(in srgb, var(--blossom) 4%, transparent); }
.court-filter.is-on { color: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 45%, transparent); background: color-mix(in srgb, var(--accent-jade) 14%, transparent); }
.court-filter.is-on span { color: var(--accent-jade); }
.court-film-shown { font-size: var(--size-2xs); color: var(--mist); }
.court-film-main .court-work-list { margin-top: 4px; }
.court-work.is-none b { color: var(--blossom); font-weight: 500; }
.court-work-rating { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 8px; min-height: 28px; align-items: center; border-radius: 4px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--gold); }
.court-work-rating strong { font: 400 var(--size-md) var(--font-serif); }
.court-work-rating small { font-size: var(--size-3xs); color: var(--mist); }
.court-work-rating.is-unrated { color: var(--mist); border-color: var(--border); background: transparent; font-size: var(--size-2xs); }

.court-journey { min-width: 0; margin-top: 10px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); }
.court-journey-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 20px; }
.court-journey-tools p { margin: 0; font-size: var(--size-xs); color: var(--mist); }
.court-journey-tools select { flex: none; }
.court-journey-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); gap: 22px 16px; }
.court-journey-card { min-width: 0; }
.court-journey-date { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--size-2xs); color: var(--gold); }
.court-journey-date::before { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--accent-jade); }
.court-journey-date::after { content: ""; flex: 1; height: 1px; background: var(--border); margin-left: 4px; }
.court-journey-poster { position: relative; display: grid; place-items: center; aspect-ratio: 76 / 112; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, var(--surface)); box-shadow: var(--shadow-low); text-decoration: none; }
.court-journey-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.court-journey-poster::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 75%, transparent)); pointer-events: none; }
.court-journey-blank { color: var(--mist); font-size: var(--size-2xl); }
.court-journey-ribbon { position: absolute; left: 6px; top: 6px; z-index: 1; padding: 3px 6px; border-radius: 3px; font-size: var(--size-3xs); letter-spacing: .04em;
  color: var(--blossom); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent); }
.court-journey-rating { position: absolute; right: 7px; bottom: 7px; z-index: 1; padding: 3px 7px; border-radius: 4px; font-size: var(--size-sm); color: var(--gold);
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.court-journey-rating small { font-size: var(--size-3xs); color: var(--mist); }
.court-journey-card h3 { margin: 10px 0 3px; font: 400 var(--size-md)/1.3 var(--font-serif); }
.court-journey-card h3 a { color: var(--blossom); text-decoration: none; }
.court-journey-card h3 a:hover { color: var(--gold); }
.court-journey-card p { margin: 0; font-size: var(--size-2xs); line-height: 1.5; color: var(--mist); overflow-wrap: anywhere; }
.court-journey-card .court-journey-when { font-size: var(--size-3xs); margin-top: 5px; opacity: .85; }
.court-journey .rv-empty { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .court-film { grid-template-columns: minmax(0, 1fr); }
  .court-film-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .court-film-side .court-glance, .court-film-side .court-artist-notes, .court-film-side .court-about-credits { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .court-film-side { grid-template-columns: minmax(0, 1fr); }
  .court-film-controls { flex-wrap: wrap; }
  .court-film-controls select { max-width: none; flex: 1 1 100%; }
  .court-journey-shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr)); gap: 18px 12px; }
  .court-work-end { flex-wrap: wrap; }
}
.court-work .court-work-plan { font-size: var(--size-2xs); padding: 5px 11px; min-height: 0; }

/* ============================================================
   Drop 125 — the Hall of Paired Fates in her design: the shelves'
   boxes on top and square tiles; each ship's shared chamber with its
   own banner, boxes on top and seven tabs. Everything spaced so no
   button or frame touches another.
   ============================================================ */
.pair-page { gap: 26px; }
.pair-actions { justify-content: space-between; align-items: center; margin: 0; }
.pair-actions a.ghost { text-decoration: none; display: inline-flex; align-items: center; }
.pair-gap { flex: 1; }
.pair-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pair-shelves { display: flex; flex-wrap: wrap; gap: 8px; }
.pair-shelves .period-chip { text-decoration: none; }
.pair-toolbar .scroll-search { flex: 1 1 14rem; min-width: 0; }
.pair-head-buttons, .pair-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pair-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pair-fine { margin: 0; font-size: var(--size-2xs); color: var(--mist); line-height: 1.6; }

.pair-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 20px; }
.pair-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-low); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.pair-tile:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); transform: translateY(-2px); }
.pair-tile-art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--border); }
.pair-tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-tile-art.is-faces { display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent-lacquer) 22%, var(--surface)), var(--ink) 75%); }
.pair-tile-art.is-faces .pairing-face { width: 5.5rem; }
.pair-tile-art.is-faces .pairing-knot { font-size: var(--size-2xl); }
.pair-tile-score { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 4px; font: 400 var(--size-sm) var(--font-serif);
  color: var(--gold); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.pair-tile-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; min-width: 0; }
.pair-tile-body h3 { margin: 2px 0 0; font: 400 var(--size-lg)/1.25 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.pair-tile-chinese { margin-left: 8px; font-size: var(--size-sm); color: var(--gold); }
.pair-tile-who { margin: 0; font: italic 400 var(--size-sm)/1.45 var(--font-serif); color: var(--mist); overflow-wrap: anywhere; }
.pair-tile-counts { margin: 0; font-size: var(--size-2xs); color: var(--mist); }
.pair-enter { align-self: flex-start; margin-top: auto; text-decoration: none; display: inline-flex; align-items: center; }
/* Drop 127: at most three ships in a row (fewer when narrow), and "Enter their shared chamber →" on one line;
   in a tile too narrow for the whole of it, the button says "Enter →" (and, with a wider font, never breaks: the
   middle words fade to "…" before the line would). */
.pair-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(14rem, calc((100% - 40px) / 3))), 1fr)); }
.pair-tile-body { container-type: inline-size; }
.pair-enter { align-self: stretch; justify-content: center; gap: .3em; white-space: nowrap; min-width: 0; max-width: 100%; }
.pair-enter-long { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 17rem) { .pair-enter-long { display: none; } }
.pair-tile-body .pair-badges + h3 { margin-top: 4px; }

.pair-pane { display: grid; gap: 26px; min-width: 0; margin-top: 4px; }
.pair-thread { display: flex; justify-content: center; align-items: center; gap: 36px; flex-wrap: wrap; padding: 8px 0 0; }
.pair-side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.pair-side .pairing-face { width: 6.5rem; border-width: 2px; }
.pair-side .pairing-face .court-noface { font-size: var(--size-2xl); }
.pair-side strong { font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); text-align: center; }
.pair-side small { font-size: var(--size-2xs); color: var(--accent-jade); }
a.pair-side:hover strong { color: var(--gold); }
.pair-thread .pair-knot { font: 400 2.6rem/1 var(--font-serif); color: color-mix(in srgb, var(--accent-lacquer) 60%, var(--blossom)); }
.pair-quote { margin: 0; text-align: center; font: italic 400 var(--size-xl)/1.45 var(--font-serif); color: color-mix(in srgb, var(--accent-lacquer) 35%, var(--blossom)); }
.pair-letters { gap: 18px; }
.pair-letter { gap: 12px; }
.pair-letter .rv-eyebrow { font-size: var(--size-3xs); }
.pair-why { margin: 0; font: 400 var(--size-md)/1.7 var(--font-serif) !important; white-space: pre-wrap; }
.pair-why.is-empty { color: var(--mist); font-style: italic; }
.pair-seal { align-self: flex-start; margin-top: 4px; padding: 3px 12px; transform: rotate(-3deg); border: 1px solid color-mix(in srgb, var(--accent-lacquer) 60%, var(--border));
  color: color-mix(in srgb, var(--accent-lacquer) 55%, var(--blossom)); font: italic 400 var(--size-sm) var(--font-serif); }
.pair-facts { gap: 16px 22px; }
.pair-facts dd { font-size: var(--size-sm); }
.pair-letter .pair-buttons { margin-top: 6px; }

.pair-journal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pair-memory { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.pair-memory.is-legacy { border-style: dashed; }
.pair-date { font-size: var(--size-3xs); letter-spacing: .08em; color: var(--gold); }
.pair-memory h3 { margin: 0; font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.pair-memory p { margin: 0; font: 400 var(--size-sm)/1.6 var(--font-serif); color: var(--blossom); opacity: .85; white-space: pre-wrap; }
.pair-memory footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border); font-size: var(--size-2xs); color: var(--mist); }

.pair-works { display: grid; gap: 14px; }
.pair-work { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); min-width: 0; }
.pair-work-poster { display: grid; place-items: center; width: 90px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--ink); color: var(--mist); text-decoration: none; }
.pair-work-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-work-words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pair-work-words .rv-eyebrow { font-size: var(--size-3xs); }
.pair-work-words h3 { margin: 0; font: 400 var(--size-lg)/1.3 var(--font-serif); }
.pair-work-words h3 a { color: var(--blossom); text-decoration: none; }
.pair-work-words h3 a:hover { color: var(--gold); }
.pair-work-where { margin: 0; font-size: var(--size-xs); color: var(--blossom); }
.pair-work-where.is-empty { color: var(--mist); font-style: italic; }
.pair-work-words .pair-badges { gap: 14px; }
.pair-work-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pair-work-end .pair-buttons a.ghost { text-decoration: none; }

.pair-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 18px; }
.pair-keepsake { margin: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.pair-keepsake.is-banner { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.pair-keepsake-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.pair-keepsake-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-banner-mark { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 4px; font-size: var(--size-3xs); color: var(--gold);
  background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.pair-keepsake figcaption { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.pair-keepsake figcaption strong { font: 400 var(--size-md) var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.pair-keepsake .pair-buttons { gap: 14px; }

.pair-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 18px; }
.pair-video { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.pair-video .embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.pair-video-link { display: block; padding: 18px 16px 6px; color: var(--accent-jade); overflow-wrap: anywhere; }
.pair-video-under { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; font-size: var(--size-xs); color: var(--mist); }
.pair-video-under > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* Drop 126: the Bond chronicle in the dress of Historical Records 舊錄 - each day a box beside its date on the gold rail. */
.pair-chron-years.period-bar.is-tabs { margin: 0; }
.pair-chronicle .tl-day:last-child .tl-box { margin-bottom: 0; }
.pair-chronicle .tl-value .pair-buttons { display: flex; justify-content: flex-end; gap: 14px; font-size: inherit; }
@media (max-width: 560px) {   /* a phone: the door or her Edit / Remove go under the words, so the title keeps the width */
  .pair-chronicle .tl-entry { flex-wrap: wrap; gap: 8px 14px; }
  .pair-chronicle .tl-value { flex: 1 1 100%; min-width: 0; text-align: left; }
  .pair-chronicle .tl-value .pair-buttons { justify-content: flex-start; }
}
.pair-notes { gap: 12px; }
.pair-notes-label { display: flex; flex-direction: column; gap: 8px; font-size: var(--size-xs); color: var(--mist); }
.pair-notes-label textarea { width: 100%; min-height: 9rem; resize: vertical; }
.pair-notes-save { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border); }
.pair-bond { display: flex; flex-direction: column; gap: 14px; }
.pair-bond .court-rank-row { margin: 0; }
@media (max-width: 860px) {
  .pair-letters, .pair-journal { grid-template-columns: minmax(0, 1fr); }
  .pair-work { grid-template-columns: 70px minmax(0, 1fr); }
  .pair-work-poster { width: 70px; }
  .pair-work-end { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .pair-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pair-tile-body { padding: 12px; gap: 6px; }
  .pair-tile-body h3 { font-size: var(--size-md); }
  .pair-tile-art.is-faces .pairing-face { width: 3.5rem; }
  .pair-enter { font-size: var(--size-2xs); padding: 6px 10px; }
  .pair-thread { gap: 18px; }
  .pair-side .pairing-face { width: 5rem; }
  .pair-quote { font-size: var(--size-lg); }
  .pair-actions .ghost, .pair-actions .primary { font-size: var(--size-xs); }
}
.pair-tabs { flex-wrap: wrap; overflow: visible; gap: 8px 6px; }
.pair-tabs .court-tab { padding: 10px 12px 9px; font-size: var(--size-xs); }
@media (max-width: 560px) {
  .pair-tile-art.is-faces .pairing-face { width: 3rem; }
  .pair-tile-art.is-faces .pairing-knot { font-size: var(--size-lg); }
  .pair-enter-long { display: none; }
  .pair-thread { flex-wrap: nowrap; gap: 10px; }
  .pair-side { flex: 1 1 0; }
  .pair-side .pairing-face { width: 4.5rem; }
  .pair-side strong { font-size: var(--size-md); }
  .pair-side small { font-size: var(--size-3xs); text-align: center; }
  .pair-thread .pair-knot { font-size: 1.8rem; }
}

/* ============================================================
   Drop 128 — the Rear Palace's pictures, at her word.
   The big arches: four to a line, taller, the uncropped portrait where it is kept.
   Noble Companions, Court Beauties and New Faces: tall portraits in their palace's own colour frame, six to a line.
   Promising Talents: two to a line, the whole picture beside their words.
   Trial Appearances: her design - a shelf of first watches, listens and reads.
   ============================================================ */
.rv-residents { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rv-arch { aspect-ratio: 3 / 4; margin: 12px 12px 0; }
.rv-arch img { object-position: center 18%; }
.rv-resident-text { padding: 14px 16px 18px; }
.rv-resident-text h3 { font-size: var(--size-lg); }
@media (max-width: 1280px) { .rv-residents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .rv-residents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rv-residents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rv-resident-text { padding: 12px 12px 14px; } .rv-arch { margin: 8px 8px 0; } }

.rv-room-actions { justify-content: space-between; align-items: center; margin-bottom: 0; }
.rv-room-count { font-size: var(--size-xs); color: var(--mist); letter-spacing: .04em; }
.rv-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(8.5rem, calc((100% - 100px) / 6))), 1fr)); gap: 26px 20px; }
.rv-frame { --frame: var(--accent-jade); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; color: inherit; text-decoration: none; }
.rv-frame.is-imperial { --frame: var(--gold); }
.rv-frame.is-high { --frame: var(--accent-lacquer); }
.rv-frame.is-regular { --frame: var(--accent-jade); }
.rv-frame.is-awaiting { --frame: color-mix(in srgb, var(--mist) 70%, var(--blossom)); }
.rv-frame.is-cold { --frame: var(--moon); }
.rv-frame-pic { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 6px; margin-bottom: 8px; border-radius: 10px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--frame) 55%, var(--blossom)) 0%, var(--frame) 40%, color-mix(in srgb, var(--frame) 55%, var(--ink)) 100%);
  box-shadow: var(--shadow-low), 0 0 0 1px color-mix(in srgb, var(--frame) 40%, var(--border));
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.rv-frame-pic::after { content: ''; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--gold) 75%, transparent); border-radius: 4px; pointer-events: none; }
.rv-frame-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: 5px; }
.rv-frame-pic .cjk { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 5px; background: var(--ink); color: var(--frame); font-size: var(--size-3xl); }
.rv-frame:hover .rv-frame-pic { transform: translateY(-3px);
  box-shadow: var(--shadow-low), 0 0 0 1px var(--frame), 0 10px 24px color-mix(in srgb, var(--frame) 28%, transparent); }
.rv-frame strong { font-size: var(--size-sm); font-weight: 500; line-height: 1.3; color: var(--blossom); overflow-wrap: anywhere; }
.rv-frame small { font-size: var(--size-2xs); color: var(--mist); }
.rv-frame .rv-frame-hangul { color: color-mix(in srgb, var(--frame) 65%, var(--blossom)); }
@media (max-width: 560px) {
  .rv-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .rv-frame-pic { padding: 4px; margin-bottom: 6px; }
  .rv-frame-pic::after { inset: 7px; }
  .rv-frame strong { font-size: var(--size-xs); }
}
@media (max-width: 400px) { .rv-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hr-room a.primary { color: var(--ink); text-decoration: none; }
.hr-room a.ghost { color: var(--mist); text-decoration: none; }
.hr-room a.ghost:hover { color: var(--blossom); }
.hr-room .hr-talents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hr-room .hr-talent { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 20px; min-width: 0; padding: 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-low); }
.hr-room .hr-talent-art { position: relative; display: grid; place-items: center; align-self: start; width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 8px; background: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); text-decoration: none; }
.hr-room .hr-talent-back { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(16px) brightness(.55); }
.hr-room .hr-talent-face { position: relative; width: 100%; height: 100%; object-fit: contain; }
.hr-room .hr-talent-art.is-fill .hr-talent-face { object-fit: cover; object-position: center 20%; }
.hr-room .hr-talent-art.is-fill .hr-talent-back { display: none; }
.hr-room .hr-talent-art.is-empty .cjk { font-size: var(--size-3xl); color: var(--gold); }
.hr-room .hr-talent-words { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.hr-room .hr-talent-eyebrow { font-size: var(--size-3xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hr-room .hr-talent-name { margin: 0; font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.hr-room .hr-talent-name a { font-weight: 400; }
.hr-room .hr-talent-hangul { margin-left: 8px; font-family: var(--font-sans); font-size: var(--size-sm); color: var(--mist); }
.hr-room .hr-talent-door { margin-top: auto; font-size: var(--size-xs); }
@media (max-width: 860px) { .hr-room .hr-talents { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .hr-room .hr-talent { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; padding: 12px; } }

.hr-room .hr-trial-add { margin-left: auto; }
.hr-room .hr-trial-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hr-room .hr-trials { display: flex; flex-direction: column; gap: 14px; }
.hr-room .hr-trial { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 20px 16px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-low); min-width: 0; }
.hr-room .hr-trial-art { display: grid; place-items: center; width: 76px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); color: var(--gold); font: 400 var(--size-xl) var(--font-cjk); text-decoration: none; }
.hr-room .hr-trial-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hr-room .hr-trial-words { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hr-room .hr-trial-type { font-size: var(--size-3xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hr-room .hr-trial h3 { margin: 0; font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.hr-room .hr-trial h3 a { font-weight: 400; text-decoration: none; }
.hr-room .hr-trial h3 a:hover { color: var(--gold); }
.hr-room .hr-trial-note { font-size: var(--size-sm); color: var(--mist); }
.hr-room .hr-trial-people { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.hr-room .hr-trial-person { color: var(--accent-jade); font-size: var(--size-sm); text-decoration: none; }
.hr-room .hr-trial-person:hover { color: var(--gold); }
.hr-room .hr-trial-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hr-room .hr-trial-status { padding: 3px 9px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); font-size: var(--size-2xs); color: var(--gold); white-space: nowrap; }
.hr-room .hr-trial-status.is-exploring { color: var(--accent-jade); border-color: color-mix(in srgb, var(--accent-jade) 55%, var(--border)); }
.hr-room .hr-trial-status.is-finished { color: var(--blossom); border-color: var(--border); }
.hr-room .hr-trial-status.is-paused, .hr-room .hr-trial-status.is-dropped { color: var(--mist); border-color: var(--border); }
.hr-room .hr-trial-tools { display: flex; align-items: center; gap: 14px; }
.hr-room .hr-trial-tools .ghost { padding: 7px 14px; font-size: var(--size-xs); white-space: nowrap; text-decoration: none; }
.hr-room .hr-trial-remove { padding: 0; border: 0; background: none; color: var(--mist); font-size: var(--size-2xs); cursor: pointer; }
.hr-room .hr-trial-remove:hover { color: var(--accent-lacquer); }
.hr-room .hr-trial-hint { margin-top: 12px; }
.hr-room .hr-after { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; padding: 26px 26px 24px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); border-radius: 10px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-jade) 9%, var(--surface)), var(--surface)); }
.hr-room .hr-after h2 { font: 400 var(--size-2xl)/1.2 var(--font-serif); color: var(--blossom); }
.hr-room .hr-after p { font-size: var(--size-sm); color: var(--blossom); opacity: .85; }
@media (max-width: 640px) {
  .hr-room .hr-trial { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .hr-room .hr-trial-art { width: 64px; }
  .hr-room .hr-trial-end { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .hr-room .hr-trial h3 { font-size: var(--size-lg); }
  .hr-room .hr-after { padding: 20px; }
}

/* ============================================================
   Drop 129 — a resident's private chamber, in her design (assets/js/chamber.js). Prefixed ch-.
   ============================================================ */
.ch-actions { justify-content: flex-start; align-items: center; margin-bottom: 0; }
.ch-gap { flex: 1 1 auto; }
.ch-actions a.ghost { text-decoration: none; }
.ch-pane { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.ch-layout { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: 20px; align-items: start; }
.ch-side, .ch-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ch-portrait { display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--border)); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-low); }
.ch-arch { display: grid; place-items: center; aspect-ratio: 4 / 5; margin: 14px 14px 0; overflow: hidden; border-radius: 180px 180px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 10%, var(--ink));
  color: var(--gold); font: 400 var(--size-4xl) var(--font-cjk); text-decoration: none; }
.ch-arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.ch-portrait-words { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 16px 18px; text-align: center; }
.ch-portrait-words h2 { margin: 0; font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.ch-small { padding: 6px 12px; font-size: var(--size-xs); }
.ch-mirror h3 { margin: 0 0 14px; font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.ch-facts { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; }
.ch-facts dt { font-size: var(--size-3xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.ch-facts dd { margin: 4px 0 0; font-size: var(--size-sm); color: var(--blossom); overflow-wrap: anywhere; }
.ch-facts dd.is-empty { color: var(--mist); }
.ch-devotion { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px;
  background: linear-gradient(130deg, color-mix(in srgb, var(--accent-jade) 8%, var(--surface)), var(--surface) 60%); }
.ch-badges { margin-bottom: 4px; }
.ch-quote { margin: 6px 0 10px; padding: 0; border: 0; font: italic 400 var(--size-2xl)/1.35 var(--font-serif); color: var(--blossom); }
.ch-quote.is-empty { color: var(--mist); }
.ch-prose { margin: 0; font: 400 var(--size-md)/1.7 var(--font-serif); color: var(--blossom); white-space: pre-line; overflow-wrap: anywhere; }
.ch-prose.is-empty { color: var(--mist); font-style: italic; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ch-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ch-mini { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; }
.ch-mini h3 { margin: 0; font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--blossom); }
.ch-mini h3.is-empty { color: var(--mist); }
.ch-mini .ch-prose { font-size: var(--size-sm); }
.ch-small-words { margin: 0; font-size: var(--size-xs); color: var(--mist); }
.ch-private { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ch-private .ch-prose { font-size: var(--size-sm); }
.ch-treasures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ch-keepsake-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ch-keepsake-words strong { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); }
.ch-keepsake-words small { font-size: var(--size-2xs); color: var(--mist); }
.rv-section.ch-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ch-grid2 > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ch-grid2 .rv-notes { grid-template-columns: minmax(0, 1fr); }
.ch-notes .rv-date { font-size: var(--size-2xs); color: var(--mist); }
.ch-merit.is-legacy { border-style: dashed; }
.ch-moment-source { font-size: var(--size-2xs); color: var(--mist); min-width: 0; overflow-wrap: anywhere; }
.ch-moment-who { font-size: var(--size-xs); color: var(--accent-jade); }
.ch-members { display: flex; flex-wrap: wrap; gap: 10px; }
.ch-members a.ghost { text-decoration: none; }
.ch-shelf { width: 100%; }
.ch-shelf .hr-trial-people { display: none; }
.hr-room .hr-trial-rating { font: 400 var(--size-sm) var(--font-serif); color: var(--gold); white-space: nowrap; }
.ch-decree { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.ch-decree-art img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); box-shadow: var(--shadow-low); }
.ch-investiture { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 28px; }
.ch-investiture h2 { margin: 0; font: 400 var(--size-2xl)/1.2 var(--font-serif); color: var(--blossom); }
.ch-investiture .ch-prose { font-size: var(--size-sm); }
.ch-chronicle .tl-value { min-width: 0; }
@media (max-width: 1100px) {
  .ch-layout { grid-template-columns: minmax(0, 1fr); }
  .ch-side { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  .ch-decree, .rv-section.ch-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ch-treasures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ch-side { grid-template-columns: minmax(0, 1fr); }
  .ch-minis { grid-template-columns: minmax(0, 1fr); }
  .ch-devotion, .ch-investiture { padding: 20px; }
  .ch-quote { font-size: var(--size-xl); }
  .ch-actions .ch-gap { flex-basis: 100%; height: 0; }
}
@media (max-width: 480px) { .ch-treasures { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Drop 130 — the Hall of Precious Curios' own Dashboard, every hall at a glance. Prefixed cd-, in the
   halls' own dashboard dress (kd-).
   ============================================================ */
.cd-room .cd-page { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-room .cd-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cd-room button.cd-kpi { width: 100%; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--fast) var(--ease); }
.cd-room button.cd-kpi:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--kd-line)); }
.cd-room .cd-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cd-room .cd-dispatched { color: var(--kd-jade); border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--kd-line)); }
.cd-room .cd-doors { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--kd-line); gap: 6px 16px; }
.cd-room .cd-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kd-line); }
.cd-room .cd-bar { display: block; color: inherit; text-decoration: none; }
.cd-room .cd-bar-head { display: flex; justify-content: space-between; gap: 10px; font-size: var(--size-xs); }
.cd-room .cd-bar-head span:last-child { color: var(--kd-muted); }
.cd-room .cd-bar:hover .cd-bar-head span:first-child { color: var(--gold); }
.cd-room .cd-track { display: block; margin-top: 6px; height: 6px; }
.cd-room .cd-track span { background: var(--gold); }
.cd-room .cd-halls { margin-top: 16px; }
.cd-room .cd-hall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 14px; margin-top: 12px; }
.cd-room .cd-hall-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border: 1px solid var(--kd-line); border-radius: 9px;
  background: color-mix(in srgb, var(--gold) 4%, var(--kd-panel)); min-width: 0; }
.cd-room .cd-hall-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--kd-ink); text-decoration: none;
  font: 400 var(--size-md)/1.3 var(--font-serif); }
.cd-room .cd-hall-name:hover { color: var(--gold); }
.cd-room .cd-hall-cjk { flex: none; font-size: var(--size-sm); color: var(--gold); }
.cd-room .cd-hall-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.cd-room .cd-hall-figures dt { font-size: var(--size-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--kd-muted); }
.cd-room .cd-hall-figures dd { margin: 2px 0 0; font: 400 var(--size-md) var(--font-serif); color: var(--kd-ink); }
.cd-room .cd-hall-links { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px; border-top: 1px solid var(--kd-line); }

/* Drop 131: the Hall Chronicle - every hall's record, in the Historical Records dress. */
.hc-room .hc-bar { margin: 0 0 18px; }
.hc-room a.tl-entry { text-decoration: none; cursor: pointer; }
.hc-room a.tl-entry:hover .tl-title, .hc-room a.tl-entry:focus-visible .tl-title { color: var(--gold); }
.hc-room .hc-face { background: var(--surface-2); }
.hc-room .hc-face .cjk { font-size: var(--size-lg); color: var(--gold); }
.hc-room .hc-entry.is-deal .hc-face .cjk { color: var(--accent-jade); }
.hc-room .hc-entry.is-payment .hc-face .cjk { color: var(--blossom); }
.hc-room .tl-value b { white-space: nowrap; }
.hc-room .hc-more { display: flex; justify-content: center; padding: 6px 0 14px; }
.hc-room .hc-foot { font-size: var(--size-xs); color: var(--mist); text-align: center; padding: 4px 0 8px; }
.hc-room .hc-empty { margin-top: 4px; }
@media (max-width: 720px) { .hc-room .rv-chronicle .tl-value { min-width: 0; } }
/* Drop 182: the Hall Chronicle's month in her own words. */
.hc-room .hc-written { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--kd-line); border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 4%, var(--kd-panel)); min-width: 0; }
.hc-room .hc-written.is-written { border-color: color-mix(in srgb, var(--gold) 35%, var(--kd-line)); }
.hc-room .hc-written-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hc-room .hc-written-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-room .hc-written-eyebrow { font-size: var(--size-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hc-room .hc-written h3 { margin: 0; font: 400 var(--size-xl)/1.25 var(--font-serif); color: var(--kd-ink); }
.hc-room .hc-written-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--size-md)/1.65 var(--font-serif); color: var(--kd-ink); }
.hc-room .hc-written-quiet { margin: 0; font-size: var(--size-sm); color: var(--mist); }
.hc-room .hc-written-foot { margin: 0; font-size: var(--size-2xs); color: var(--mist); }

/* ==========================================================================
   Drop 133, at her word: the Hall of Precious Curios dressed as the Imperial
   Library - every button, chip, field and card title at the Library's size;
   item pictures shown whole in the dark box; the wishlist's covers, seals and
   Got it door as the Library's; the artist line in the Library's colour,
   except Sapphire's blue.
   ========================================================================== */
/* action buttons: the Library's 13.76px, its line and padding */
.view[data-room^="precious-curios/"] :is(.db-button, .wl-button, .sh-button, .pm-button, .dg-button, .sp-button, .ah-btn, .ci-button, .kd-button):not([role="tab"]):not([aria-pressed]):not(.kd-small-button):not(:is(.ah-tabs, .sp-tabs, .sh-tabs, .pm-tabs, .wl-tabs) *) {
  font-size: var(--size-sm); line-height: 1.65; padding: 8px 14px; }
.view[data-room^="precious-curios/"] .db-actions .db-button { font-weight: 500; }
.view[data-room^="precious-curios/"] .db-actions .db-primary { font-weight: 600; }
/* the chips that filter: as the Library's wishlist chips */
.view[data-room^="precious-curios/"] :is(.wl-filters, .pm-filters, .dg-filters, .dg-view, .sh-pills, .sp-pills) button {
  font-size: var(--size-sm); line-height: 1.65; padding: 6px 9px; }
/* the quiet doors */
.view[data-room^="precious-curios/"] :is(.db-quiet, .wl-quiet, .sh-quiet, .ci-quiet, .kd-text-button, .ah-text-btn):not(.ci-favorite):not(summary) { font-size: var(--size-sm); }
.view[data-room^="precious-curios/"] summary:is(.wl-quiet, .sh-quiet, .ci-quiet) { font-size: var(--size-md); line-height: 1; }
/* the fields of a filter row: the Library's small words */
.view[data-room^="precious-curios/"] :is(.db-control, .wl-control, .pm-control, .dg-control) :is(input, select),
.view[data-room^="precious-curios/"] :is(.sp-search input, .sp-sort select, .sh-search input, select.ah-jump, .db-room .picker-field) { font-size: var(--size-2xs); }
/* the period and coin toggles: as the Library's ledger */
.view[data-room^="precious-curios/"] :is(.kd-period, .tre-period):not(.is-small) button { font-size: var(--size-sm); line-height: 1.65; padding: 7px 14px; }
.view[data-room^="precious-curios/"] .kd-period.is-small button { font-size: var(--size-xs); padding: 3px 9px; }
.view[data-room^="precious-curios/"] .kd-small-button { font-size: var(--size-sm); padding: 5px 12px; }

/* the item cards: the Library's - the picture whole in the dark box, the title at its size */
.view[data-room^="precious-curios/"] .db-room .db-art { background: var(--ink); }
.view[data-room^="precious-curios/"] .db-room .db-art img { object-fit: contain; }
.view[data-room^="precious-curios/"] .db-room .db-title { font-size: var(--size-sm); font-weight: 400; line-height: 1.5; }
.view[data-room^="precious-curios/"] .db-room:not([data-board="sapphire"]) .db-artist,
.view[data-room^="precious-curios/"] .wl-room:not([data-board="sapphire"]) .wl-wish-meta { color: color-mix(in srgb, var(--gold) 25%, var(--blossom)); }

/* the wishlist: the Library's covers, seals and Got it door */
.view[data-room^="precious-curios/"] .wl-room .wl-art.is-cover { border-radius: 8px; aspect-ratio: 3 / 4; width: 62px; }
.view[data-room^="precious-curios/"] .wl-room .wl-wish-name { font: 400 var(--size-sm)/1.65 var(--font-sans); }
.view[data-room^="precious-curios/"] .wl-room .wl-seal { width: 30px; height: 30px; object-fit: contain; flex: none; }
.view[data-room^="precious-curios/"] .wl-room .wl-got-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-left: 10px; min-height: 44px; }
.view[data-room^="precious-curios/"] .wl-room .wl-got-button img { width: 28px; height: 28px; object-fit: contain; }
.view[data-room^="precious-curios/"] .wl-room .wl-in-collection { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-xs); color: var(--accent-jade); }
.view[data-room^="precious-curios/"] .wl-room .wl-in-collection .wl-seal { width: 34px; height: 34px; }
.view[data-room^="precious-curios/"] .wl-room .wl-row-secondary { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* Drop 134, at her word: the Reading History look shared by every History page (FIC.historyLook, and the
   Golden Shadows, Sound Garden, Distant Journeys and Precious Curios histories) - the Imperial Library's dress. */
.hl-look { display: flex; flex-direction: column; min-width: 0; }
.hl-look > .period-bar.is-tabs { margin: 0 0 4px; }
.hl-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 22px 0 17px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.hl-pills .hl-pill { font-size: var(--size-xs); line-height: 1.65; border: 1px solid var(--border); border-radius: 20px; background: none; color: var(--mist); padding: 6px 13px; cursor: pointer; }
.hl-pills .hl-pill:hover { color: var(--blossom); }
.hl-pills .hl-pill.is-on { color: var(--accent-jade); border-color: color-mix(in srgb, var(--mist) 46.7%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.hl-look .hl-caption { font-size: var(--size-sm); color: var(--mist); margin: 0 0 16px; }
.hl-look > .period-bar.is-tabs + .hl-caption, .hl-look > .period-bar.is-tabs + .hl-empty { margin-top: 18px; }
.hl-look a.tl-entry { text-decoration: none; cursor: pointer; }
.hl-look a.tl-entry:hover .tl-title, .hl-look a.tl-entry:focus-visible .tl-title { color: var(--gold); }
.hl-face { background: var(--surface-2); }
.hl-face .cjk { font-size: var(--size-lg); color: var(--gold); }
.hl-look .tl-value b { white-space: nowrap; }
.hl-look .tl-entry.is-missed .tl-title { color: var(--mist); }
.hl-more { display: flex; justify-content: center; padding: 6px 0 14px; }
.hl-foot { font-size: var(--size-xs); color: var(--mist); text-align: center; padding: 4px 0 8px; margin: 0; }
.hl-empty h3 { margin: 0 0 6px; font: 400 var(--size-xl) var(--font-serif); }
.hl-empty p { margin: 0; color: var(--mist); }
@media (max-width: 720px) { .hl-look .rv-chronicle .tl-value { min-width: 0; } }

/* ==========================================================================
   Drop 136, at her word: the Hall of Precious Curios' Dashboard in her design -
   filter buttons for its parts, hall cards that focus the page, the task desk,
   the purse with its limit, the collection in colour. Prefixed pd-.
   ========================================================================== */
.pd-room { --pd-line: color-mix(in srgb, var(--gold) 22%, var(--border)); }
.pd-room .pd-hall-bl { --pd-hall: var(--hall-bl); }
.pd-room .pd-hall-sapphire { --pd-hall: var(--hall-sapphire); }
.pd-room .pd-hall-stars { --pd-hall: color-mix(in srgb, var(--hall-bl) 45%, var(--blossom)); }
.pd-room .pd-hall-relics { --pd-hall: var(--gold); }
.pd-room .pd-hall-archives { --pd-hall: color-mix(in srgb, var(--hall-sapphire) 55%, var(--hall-bl)); }
.pd-room .pd-hall-oddities { --pd-hall: var(--hall-oddities); }
.pd-room .pd-hall-all { --pd-hall: var(--mist); }
.pd-page { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; }

/* the doors and the filter buttons */
.pd-doors { display: flex; gap: 10px; flex-wrap: wrap; }
/* Drop 184: the Hall Chronicle of the month, from the Dashboard - gold once written */
.pd-doors .pd-chronicle.is-written { color: var(--gold); }
.pd-doors .kd-button { display: inline-flex; align-items: center; gap: 8px; }
.pd-room .pd-primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pd-room .pd-primary:hover { filter: brightness(1.06); }
.pd-nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--pd-line); }
.pd-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 2px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--mist); font: inherit; font-size: var(--size-sm); cursor: pointer; }
.pd-nav-btn:hover { color: var(--blossom); }
.pd-nav-btn[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.pd-count { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--pd-line); border-radius: 4px; font: 400 var(--size-2xs)/1.6 var(--font-sans);
  color: var(--blossom); vertical-align: middle; }
.pd-today { margin-left: auto; font-size: var(--size-2xs); color: var(--mist); }
.pd-context { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-context-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-month { min-height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--blossom); font: inherit;
  font-size: var(--size-xs); color-scheme: dark; }

/* the counts */
.pd-room .pd-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pd-room button.pd-kpi { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--fast) var(--ease); }
.pd-room button.pd-kpi:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.pd-room .pd-task-kpi { background: color-mix(in srgb, var(--accent-jade) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent-jade) 35%, var(--border)); }

/* your halls */
.pd-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pd-section-head h2 { font: 400 var(--size-xl)/1.2 var(--font-serif); }
.pd-cjk { font-size: var(--size-xs); color: var(--gold); margin-left: 4px; }
.pd-all-halls:disabled { opacity: .7; cursor: default; }
.pd-hall-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1760px) { .pd-hall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-hall { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border: 1px solid var(--pd-line); border-radius: 8px;
  background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.pd-hall:hover { border-color: color-mix(in srgb, var(--pd-hall) 55%, var(--border)); }
.pd-hall[aria-pressed="true"] { border-color: var(--pd-hall); background: color-mix(in srgb, var(--pd-hall) 9%, var(--surface)); }
.pd-hall-picture { flex: none; width: 64px; height: 74px; overflow: hidden; border-radius: 4px; border: 1px solid var(--border); }
.pd-hall-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-hall-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-hall-cjk { font-size: var(--size-2xs); color: var(--pd-hall); }
.pd-hall-words strong { font: 400 var(--size-sm)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.pd-hall-words small { font-size: var(--size-2xs); color: var(--mist); }
.pd-hall-words small b { color: var(--blossom); font-weight: 500; }
.pd-hall-dot { position: absolute; top: 7px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 1px solid var(--pd-hall);
  color: var(--pd-hall); font-size: var(--size-3xs); line-height: 18px; text-align: center; }

/* the panels */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pd-main, .pd-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pd-panel-head h2 { font: 400 var(--size-xl)/1.25 var(--font-serif); margin: 2px 0 4px; }
.pd-eyebrow { margin: 0; font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pd-icon-button { width: 34px; height: 34px; border: 1px solid var(--pd-line); border-radius: 6px; background: transparent; color: var(--blossom); font-size: var(--size-md); cursor: pointer; }
.pd-icon-button:hover { border-color: var(--gold); color: var(--gold); }
.pd-empty { padding: 26px 12px; text-align: center; }
.pd-empty h3 { font: 400 var(--size-lg) var(--font-serif); margin: 0 0 6px; }
.pd-empty p { color: var(--mist); font-size: var(--size-xs); }

/* the filter buttons show one part at a time */
.pd-page:not([data-show="all"]) .pd-kpis, .pd-page:not([data-show="all"]) .pd-panel { display: none; }
.pd-page:not([data-show="all"]) .pd-grid { grid-template-columns: minmax(0, 1fr); }
.pd-page[data-show="tasks"] .pd-panel[data-part="tasks"], .pd-page[data-show="arrivals"] .pd-panel[data-part="arrivals"],
.pd-page[data-show="wishlist"] .pd-panel[data-part="wishlist"], .pd-page[data-show="purse"] .pd-panel[data-part="purse"],
.pd-page[data-show="shelf"] .pd-panel[data-part="shelf"] { display: block; }

/* the task desk */
.pd-task-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--pd-line); }
.pd-task-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--mist); font: inherit; font-size: var(--size-sm); cursor: pointer; }
.pd-task-tab span { font-size: var(--size-2xs); color: var(--mist); }
.pd-task-tab:hover { color: var(--blossom); }
.pd-task-tab[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--border)); background: color-mix(in srgb, var(--accent-jade) 12%, transparent); color: var(--blossom); }
.pd-task-tab.is-overdue span { color: var(--accent-lacquer); }
.pd-task-tools { display: flex; gap: 10px; margin: 14px 0 6px; }
.pd-task-search { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--ink); color: var(--blossom); font: inherit; font-size: var(--size-2xs); }
.pd-task-section { min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--ink); color: var(--blossom); font: inherit; font-size: var(--size-2xs); }
.pd-task { display: grid; grid-template-columns: auto 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pd-line); }
.pd-task input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-jade); cursor: pointer; }
.pd-task-thumb { width: 40px; height: 40px; overflow: hidden; border-radius: 4px; border: 1px solid var(--border); }
.pd-task-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-task-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-task-title { border: 0; padding: 0; background: none; color: var(--blossom); font: inherit; font-size: var(--size-sm); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.pd-task-title:hover { color: var(--gold); }
.pd-task-source { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-2xs); color: var(--mist); }
.pd-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pd-hall); flex: none; }
.pd-task-note { font-size: var(--size-2xs); color: var(--mist); overflow-wrap: anywhere; }
.pd-task-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.pd-due { font-size: var(--size-2xs); color: var(--blossom); white-space: nowrap; }
.pd-due.is-overdue { color: var(--accent-lacquer); }
.pd-due.is-today { color: var(--gold); }
.pd-tag { font-size: var(--size-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.pd-tag.is-high { color: var(--accent-lacquer); }
.pd-task.is-done .pd-task-title { color: var(--mist); text-decoration: line-through; }
.pd-task-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.pd-task-remove { margin-right: auto; }

/* freshly on the shelf */
.pd-shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-shelf-card { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--pd-line); border-radius: 8px; color: inherit; text-decoration: none; min-width: 0; }
.pd-shelf-card:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.pd-shelf-picture { flex: none; display: grid; place-items: center; width: 90px; height: 100px; overflow: hidden; border-radius: 4px; background: var(--ink); border: 1px solid var(--border); }
.pd-shelf-picture img { width: 100%; height: 100%; object-fit: contain; }
.pd-shelf-picture .cjk { color: var(--gold); font-size: var(--size-xl); }
.pd-shelf-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-shelf-words strong { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.pd-added { font-size: var(--size-2xs); color: var(--accent-jade); }

/* on your radar, on the way */
.pd-wish, .pd-arrival { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pd-line); }
.pd-wish:last-of-type, .pd-arrival:last-of-type { border-bottom: 0; }
.pd-wish-words, .pd-arrival-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-wish-name, .pd-arrival-name { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); text-decoration: none; overflow-wrap: anywhere; }
.pd-wish-name:hover, .pd-arrival-name:hover { color: var(--gold); }
.pd-wish-tag { font-size: var(--size-2xs); color: var(--gold); }
.pd-room .pd-wide { margin-top: 10px; }

/* the purse */
.pd-purse-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pd-purse-amount strong { font: 400 var(--size-3xl)/1.1 var(--font-serif); color: var(--blossom); }
.pd-compare { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; font-size: var(--size-2xs); color: var(--mist); }
.pd-compare strong { color: var(--blossom); font-weight: 400; }
.pd-track { display: block; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--blossom) 9%, var(--surface)); overflow: hidden; }
.pd-track i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--gold) 60%, var(--blossom)); }
.pd-compare.is-now .pd-track i { background: var(--gold); }
.pd-budget { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pd-line); display: flex; flex-direction: column; gap: 8px; }
.pd-budget-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--size-2xs); color: var(--mist); }
.pd-limit i { background: var(--accent-jade); }
.pd-limit.is-over i { background: var(--accent-lacquer); }
.pd-over { color: var(--accent-lacquer); }
.pd-purse-doors { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }

/* the collection, in colour */
.pd-colour-wrap { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 14px; }
.pd-donut-box { position: relative; width: 130px; height: 130px; }
.pd-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.pd-donut circle { fill: none; stroke-width: 8; }
.pd-donut .pd-donut-track { stroke: color-mix(in srgb, var(--blossom) 9%, var(--surface)); }
.pd-donut .pd-seg { stroke: var(--pd-hall); }
.pd-donut .pd-seg.is-faint { opacity: .3; }
.pd-donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pd-donut-centre strong { font: 400 var(--size-2xl)/1 var(--font-serif); color: var(--blossom); }
.pd-donut-centre span { font-size: var(--size-3xs); color: var(--mist); margin-top: 4px; }
.pd-legend { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-legend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 4px; border: 0; border-radius: 4px; background: transparent;
  color: var(--mist); font: inherit; font-size: var(--size-2xs); text-align: left; cursor: pointer; }
.pd-legend-row:hover, .pd-legend-row.is-on { color: var(--blossom); background: color-mix(in srgb, var(--pd-hall) 10%, transparent); }
.pd-legend-row strong { color: var(--blossom); font-weight: 400; }

/* a date to keep */
.pd-date { background: color-mix(in srgb, var(--accent-jade) 9%, var(--surface)); }
.pd-date-title { display: block; margin: 8px 0 6px; font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); text-decoration: none; }
.pd-date-title:hover { color: var(--gold); }
.pd-date h3 { margin: 8px 0 6px; font: 400 var(--size-lg)/1.3 var(--font-serif); }
.pd-date-on { display: inline-block; margin-top: 10px; font-size: var(--size-2xs); color: var(--accent-jade); }

@media (max-width: 1200px) {
  .pd-room .pd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-shelf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pd-room .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-hall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-hall-picture { width: 46px; height: 54px; }
  .pd-task { grid-template-columns: auto 34px minmax(0, 1fr); }
  .pd-task-right { grid-column: 3; align-items: flex-start; text-align: left; flex-direction: row; gap: 10px; flex-wrap: wrap; }
  .pd-task-thumb { width: 34px; height: 34px; }
  .pd-today { margin-left: 0; width: 100%; }
  .pd-nav { gap: 10px 18px; padding-bottom: 8px; }
  .pd-nav-btn { margin-bottom: 0; padding: 8px 2px; }
  .pd-colour-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pd-wish, .pd-arrival { grid-template-columns: auto minmax(0, 1fr); }
  .pd-wish > button, .pd-arrival > button { grid-column: 2; justify-self: start; }
  .pd-task-tools { flex-direction: column; }
}
.pd-room .pd-wish .kd-face, .pd-room .pd-arrival .kd-face { width: 48px; height: 48px; border-radius: 4px; border: 1px solid var(--border); }

/* ================================================================
   Drop 137, at her word: every hall's own Dashboard in her BL Pavilion
   design - what the hall collects by, the collection with a search,
   the collection by type or by group, the hall's notes. Built on the
   Drop 136 pd- pieces; tokens only.
   ================================================================ */
.hd-stories { margin: 6px 0 22px; }
.hd-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hd-story { position: relative; display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--pd-line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 82%, transparent); min-width: 0; }
.hd-story:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.hd-story-picture { flex: none; display: grid; place-items: center; width: 67px; height: 63px; overflow: hidden; border-radius: 5px; background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold) 25%, var(--border)); }
.hd-story-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-story-picture .cjk { color: var(--gold); font-size: var(--size-lg); }
.hd-story-words { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-story-words strong { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.hd-story-words small { font-size: var(--size-2xs); color: var(--mist); }
.hd-story-arrow { flex: none; color: var(--gold); margin-right: 3px; }
.hd-story-add { border-style: dashed; background: linear-gradient(135deg, color-mix(in srgb, var(--hall-oddities) 8%, transparent), transparent); }
.hd-story-add .hd-story-picture { background: color-mix(in srgb, var(--hall-oddities) 5%, transparent); border-color: color-mix(in srgb, var(--hall-oddities) 25%, transparent); color: var(--hall-oddities); font-size: var(--size-xl); }

/* the filter buttons: the hall's own parts */
.hd-page:not([data-show="all"]) .hd-stories { display: none; }
.hd-page[data-show="collection"] .pd-panel[data-part="collection"] { display: block; }
.hd-page[data-show="collection"] .hd-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-shelf-tools { margin: 0 0 14px; }

/* the task desk's little marks */
.hd-task-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.hd-task-icon .pd-icon { width: 15px; height: 15px; }

/* the quiet empties */
.hd-calm { display: flex; gap: 14px; align-items: flex-start; padding: 16px 4px 6px; }
.hd-calm-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: var(--size-lg); }
.hd-calm h3 { font: 400 var(--size-lg) var(--font-serif); margin: 2px 0 4px; }
.hd-calm .kd-text-button { margin-top: 6px; padding-left: 0; }
.hd-zero { margin: 12px 0; color: var(--mist); font-size: var(--size-xs); }

/* inside the hall: by type, or by its groups */
.hd-by { margin: 0 0 16px; }
.hd-room .hd-slice-0 { --pd-hall: var(--hall-oddities); }
.hd-room .hd-slice-1 { --pd-hall: var(--gold); }
.hd-room .hd-slice-2 { --pd-hall: var(--hall-bl); }
.hd-room .hd-slice-3 { --pd-hall: var(--hall-sapphire); }
.hd-room .hd-slice-4 { --pd-hall: var(--lantern); }
.hd-room .hd-slice-5 { --pd-hall: color-mix(in srgb, var(--hall-oddities) 50%, var(--gold)); }
.pd-donut .hd-seg { stroke: var(--pd-hall); }
.hd-unique { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--pd-line); }
.hd-month-arrivals { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--pd-line); }
.hd-month-arrivals strong { font: 400 var(--size-xl)/1 var(--font-serif); color: var(--hall-oddities); }

/* the hall's notes */
.hd-note-box { display: block; width: 100%; min-height: 118px; resize: vertical; padding: 13px; border-radius: 6px; font: inherit; font-size: var(--size-sm); line-height: 1.8;
  color: var(--blossom); background: color-mix(in srgb, var(--ink) 60%, transparent); border: 1px solid var(--pd-line); box-sizing: border-box; }
.hd-note-box::placeholder { color: var(--mist); }
.hd-note-box:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hd-room .pd-panel[data-part="notes"] .pd-task-foot { margin-top: 12px; }

@media (max-width: 1230px) {
  .hd-story-picture { width: 54px; height: 58px; }
  .hd-story-grid { gap: 10px; }
}
@media (max-width: 720px) {
  .hd-story-grid, .hd-page[data-show="collection"] .hd-shelf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   Drop 138, at her word ("time for the golden shadow hall"): the
   lantern hall's own pieces, gl-, shared by its new pages, and the
   Dashboard in her design. Tokens only.
   ================================================================ */
.gl-room { --gl-line: color-mix(in srgb, var(--gold) 17%, transparent); --gl-jade: color-mix(in srgb, var(--accent-jade) 62%, var(--blossom));
  --gl-panel: color-mix(in srgb, var(--surface) 88%, var(--accent-jade)); --gl-muted: color-mix(in srgb, var(--mist) 70%, var(--blossom));
  font-size: var(--size-sm); color: var(--blossom); }
.gl-room .gl-icon { width: 15px; height: 15px; flex: none; }
.gl-num { font-family: var(--font-serif); font-weight: 400; font-variant-numeric: lining-nums; }
.gl-eyebrow { margin: 0; font-size: var(--size-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); line-height: 1.5; }
.gl-caption { margin: 5px 0 0; font-size: var(--size-xs); color: var(--gl-muted); }
.gl-quiet { margin: 6px 0; font-size: var(--size-xs); color: var(--gl-muted); }
.gl-footnote { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--gl-line); font-size: var(--size-2xs); line-height: 1.8; color: var(--gl-muted); }
.gl-empty { padding: 22px 10px; text-align: center; }
.gl-empty h3 { margin: 0 0 6px; font: 400 var(--size-lg) var(--font-serif); }

.gl-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; white-space: nowrap; cursor: pointer;
  font: 500 var(--size-xs) var(--font-sans); color: var(--ink); background: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 6px; }
.gl-button:hover { background: color-mix(in srgb, var(--gold) 85%, var(--blossom)); }
.gl-button.is-subtle { background: transparent; color: var(--blossom); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.gl-button.is-subtle:hover { border-color: var(--gold); color: var(--gold); }
.gl-button.is-small { padding: 7px 11px; font-size: var(--size-2xs); }
.gl-button:disabled { opacity: 0.55; cursor: default; }
.gl-text-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: var(--size-xs); color: var(--blossom); }
.gl-text-button:hover { color: var(--gold); }
.gl-text-button:disabled { opacity: 0.6; cursor: default; }
.gl-badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 3px 7px; border-radius: 4px; font: inherit; font-size: var(--size-3xs);
  letter-spacing: 0.04em; color: var(--gl-muted); border: 1px solid color-mix(in srgb, var(--gold) 27%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.gl-badge.is-gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.gl-badge.is-jade { color: var(--gl-jade); border-color: color-mix(in srgb, var(--gl-jade) 35%, transparent); background: color-mix(in srgb, var(--gl-jade) 8%, transparent); }
.gl-badge.is-button { cursor: pointer; text-transform: uppercase; }
.gl-badge.is-button:hover { color: var(--gold); border-color: var(--gold); }

.gl-track { height: 5px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--mist) 14%, transparent); }
.gl-track > span { display: block; height: 100%; border-radius: inherit; background: var(--gl-jade); }
.gl-track.is-gold > span { background: var(--gold); }
.gl-track-label { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: var(--size-2xs); color: var(--gl-muted); }

.gl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 17px; }
.gl-context { font-size: var(--size-xs); color: var(--gl-muted); }
.gl-context strong { color: var(--blossom); font-weight: 500; }
.gl-toolbar-doors { display: flex; gap: 9px; flex-wrap: wrap; }

.gl-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.gl-stat { display: block; padding: 16px 17px; border: 1px solid var(--gl-line); border-radius: 8px; color: inherit; text-decoration: none; min-width: 0;
  background: linear-gradient(130deg, color-mix(in srgb, var(--gl-panel) 60%, transparent), var(--gl-panel)); }
a.gl-stat:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.gl-stat.is-highlight { background: linear-gradient(120deg, color-mix(in srgb, var(--accent-jade) 26%, transparent), var(--gl-panel)); border-color: color-mix(in srgb, var(--gl-jade) 30%, transparent); }
.gl-stat-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-stat-label .gl-icon { color: var(--gold); width: 14px; height: 14px; }
.gl-stat strong { display: block; margin: 6px 0 5px; font-size: var(--size-2xl); line-height: 1.2; color: var(--blossom); }
.gl-suffix { font-size: var(--size-md); color: var(--gl-muted); }
.gl-stat small { font-size: var(--size-2xs); color: var(--gl-muted); }

.gl-columns { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.gl-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.gl-two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.gl-panel { padding: 21px; min-width: 0; border: 1px solid var(--gl-line); border-radius: 8px;
  background: linear-gradient(130deg, color-mix(in srgb, var(--gl-panel) 55%, transparent), var(--gl-panel)); }
.gl-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.gl-panel-head h2 { margin: 3px 0 0; font: 400 var(--size-xl)/1.3 var(--font-serif); letter-spacing: -0.01em; color: var(--blossom); }
.gl-panel-head > :last-child:not(:first-child) { flex: none; white-space: nowrap; }
.gl-head-doors { display: flex; gap: 14px; align-items: center; }
.gl-more { margin-top: 14px; }

/* the lantern banner says the room's name; a room's own old heading keeps only its buttons */
.view[data-lantern] .cw-heading h1, .view[data-lantern] .cw-heading > div > p { display: none; }
.view[data-lantern] .cw-heading { justify-content: flex-end; margin-bottom: 12px; }

/* pick up where you left off */
.gl-watch-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; }
.gl-watch { min-width: 0; }
.gl-watch-cover { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.gl-cover { display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.gl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-cover-blank { font: 400 var(--size-xl) var(--font-serif); color: var(--gold); }
.gl-watch .gl-cover { aspect-ratio: 2 / 3; width: 100%; }
.gl-ep-tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; font-size: var(--size-3xs); color: var(--blossom);
  background: color-mix(in srgb, var(--ink) 88%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.gl-watch h3 { margin: 8px 0 7px; min-height: 2.9em; font: 400 var(--size-xs)/1.45 var(--font-sans); color: var(--blossom); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-watch-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-watch-foot > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-plus { flex: none; width: 26px; height: 24px; padding: 0; border-radius: 4px; cursor: pointer; font: inherit; font-size: var(--size-md); line-height: 1;
  color: var(--gl-jade); background: none; border: 1px solid color-mix(in srgb, var(--gl-jade) 32%, transparent); }
.gl-plus:hover { border-color: var(--gl-jade); background: color-mix(in srgb, var(--gl-jade) 10%, transparent); }
.gl-plus:disabled { opacity: 0.5; cursor: default; }

/* tonight's focus */
.gl-focus-card { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 15px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--gl-line); }
.gl-focus-cover { padding: 0; border: 0; background: none; cursor: pointer; }
.gl-focus-cover .gl-cover { aspect-ratio: 2 / 3; width: 80px; }
.gl-focus-words h3 { margin: 8px 0 4px; font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); }
.gl-focus-words .gl-button { margin-top: 10px; }
.gl-focus-line { margin: 0; font: italic var(--size-md)/1.6 var(--font-serif); color: color-mix(in srgb, var(--blossom) 85%, var(--mist)); }
.gl-focus-by { display: inline-block; margin-top: 6px; font-size: var(--size-2xs); color: var(--gl-muted); text-decoration: none; }
.gl-focus-by:hover { color: var(--gold); }

/* the year's vows */
.gl-vow-main { display: flex; align-items: center; gap: 18px; margin: 2px 0 16px; }
.gl-ring { position: relative; flex: none; display: grid; place-items: center; width: 91px; height: 91px; border-radius: 50%;
  background: conic-gradient(var(--progress-from) 0%, var(--progress-to) var(--gl-progress, 0%), color-mix(in srgb, var(--mist) 12%, transparent) 0); }
.gl-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--gl-panel); }
.gl-ring strong { position: relative; font-size: var(--size-xl); color: var(--blossom); }
.gl-vow-copy b { font-size: var(--size-xl); color: var(--blossom); }
.gl-vow-copy b span { color: var(--gl-muted); }
.gl-vow-copy small { display: block; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-vow-row { margin: 12px 0; }
/* Drop 182: a vow she can lock herself */
.gl-vow-lock { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--gl-line); }
.gl-vow-lock-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 14rem; }
.gl-vow-lock-words strong { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); }
.gl-vow-lock-words small { font-size: var(--size-2xs); line-height: 1.5; color: var(--gl-muted); }
.gl-vow-lock.is-locked strong { color: var(--gold); }

/* one month at a time */
.gl-legend { display: flex; gap: 14px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--gl-jade); }
.gl-legend .is-gold::before { background: var(--gold); }
.gl-month-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; }
.gl-month-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; justify-content: flex-end; }
.gl-month-bars { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: min(28px, 85%); height: 112px; }
.gl-month-value { font-size: var(--size-3xs); color: var(--blossom); margin-bottom: 4px; }
.gl-bar { display: block; width: 100%; }
.gl-bar.is-jade { background: var(--gl-jade); }
.gl-bar.is-gold { background: var(--gold); }
.gl-bar:first-of-type { border-radius: 3px 3px 0 0; }
.gl-month-name { font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-month-col.is-ahead .gl-month-name { opacity: 0.45; }
.gl-month-col.is-now .gl-month-name { color: var(--gold); }

/* a few things to tend to */
.gl-intents { display: flex; flex-direction: column; }
.gl-intent { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gl-line); cursor: pointer; }
.gl-intent input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent-jade); cursor: pointer; }
.gl-intent-title { flex: 1; min-width: 0; font-size: var(--size-sm); overflow-wrap: anywhere; }
.gl-intent-due { flex: none; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-intent-due.is-late { color: var(--accent-lacquer); }
.gl-intent-due.is-today { color: var(--gold); }

/* your viewing rhythm */
.gl-streak { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.gl-streak b { font-size: var(--size-2xl); color: var(--blossom); }
.gl-streak small { margin-left: 6px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.gl-day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-day-face { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: var(--size-2xs); color: var(--gl-muted);
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.gl-day-face img { width: 22px; height: 22px; object-fit: contain; }
.gl-day.is-watched .gl-day-face { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.gl-day.is-today .gl-day-face { border-color: var(--blossom); color: var(--blossom); }
.gl-day.is-ahead { opacity: 0.6; }
.gl-month-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; text-align: center; }
.gl-mday-head { font-size: var(--size-3xs); color: var(--gold); }
.gl-mday { padding: 5px 0; border-radius: 4px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-mday.is-watched { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--blossom); }
.gl-mday.is-today { outline: 1px solid var(--blossom); }
.gl-mday.is-ahead { opacity: 0.45; }
.gl-mark .gl-icon { color: var(--gold); }

/* airing in the hall */
.gl-air { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--gl-line);
  color: inherit; text-decoration: none; }
a.gl-air:hover strong { color: var(--gold); }
.gl-air-time { font: 400 var(--size-lg) var(--font-serif); color: var(--gold); }
.gl-air-copy strong { display: block; font-size: var(--size-sm); font-weight: 400; color: var(--blossom); overflow-wrap: anywhere; }
.gl-air-copy span { display: block; font-size: var(--size-2xs); color: var(--gl-muted); }

/* recently finished */
.gl-recent-list { display: flex; flex-direction: column; }
.gl-recent { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gl-line); color: inherit; text-decoration: none; }
.gl-recent:first-child { padding-top: 0; }
.gl-recent:hover strong { color: var(--gold); }
.gl-recent-cover { flex: none; width: 38px; height: 50px; }
.gl-recent-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-recent-words strong { font-size: var(--size-sm); font-weight: 400; color: var(--blossom); overflow-wrap: anywhere; }
.gl-recent-words small { font-size: var(--size-2xs); color: var(--gl-muted); }

/* a note for tomorrow */
.gl-note-box { display: block; width: 100%; min-height: 110px; resize: vertical; box-sizing: border-box; padding: 11px 12px; border-radius: 6px;
  font: inherit; font-size: var(--size-sm); line-height: 1.7; color: var(--blossom); background: color-mix(in srgb, var(--ink) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 27%, transparent); }
.gl-note-box::placeholder { color: var(--mist); }
.gl-note-box:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gl-note-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; font-size: var(--size-2xs); color: var(--gl-muted); }

@media (max-width: 1400px) {
  .gl-watch-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .gl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-columns { grid-template-columns: minmax(0, 1fr); }
  .gl-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .gl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .gl-two-up, .gl-side { grid-template-columns: minmax(0, 1fr); }
  .gl-watch-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gl-panel { padding: 16px; }
  .gl-month-chart { gap: 4px; }
  .gl-focus-card { grid-template-columns: 65px minmax(0, 1fr); }
  .gl-focus-cover .gl-cover { width: 65px; }
}

/* ================================================================
   Drop 138, at her word: "a progress bar throughout the whole system
   should look like enclosed from green to gold mixed in". Every bar
   that measures how far something has come wears --progress-fill.
   Charts, money limits and second segments (on the way) keep theirs.
   ================================================================ */
.orb-bar i, .deed-tab-bar i, .jm-cat .deed-tab-bar i, .scroll-bar i, .court-glance-track i,
.quest .ledger-bar i, .path-card .ledger-bar i, .ledger-bar.cult-realm-bar i,
.hr-room .hr-fill, .oc-room .oc-fill,
#gsa-app .progress i, #gsa-dialog .progress i, #gsa-app .verdict-progress-track i, #gsa-dialog .verdict-progress-track i,
#mpc-app .progress > i, #mpc-modal .progress > i, #plt-app .progress i, #plt-modal .progress i, #plt-app .progress.gold i, #plt-modal .progress.gold i,
.ah-room .ah-progress i, .cw-room .cw-progress span, .dg-room .dg-progress span, .ap-room .dg-progress span, .pm-room .dg-progress span,
.jm-progress span, .jm-path .jm-progress span, .jm-path-hero .jm-progress span, .kd-room .kd-progress span, .lt-room .lt-progress span,
.ps-room .ps-progress span, .sh-room .sh-progress span, .sp-room .sp-progress span, .sp-room .sp-detail-progress > div,
.gl-track > span, .gl-track.is-gold > span {
  background: var(--progress-fill); border-radius: 999px;
}

/* Drop 138: the pop-ups' gold line above the title and the note box beneath the fields */
.modal-eyebrow { margin: 0 0 6px; font-size: var(--size-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.modal-note { margin: 4px 0 0; padding: 13px 15px; font-size: var(--size-xs); line-height: 1.6; color: color-mix(in srgb, var(--mist) 70%, var(--blossom));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
:root:has(#view[data-room^="gardens/golden-shadows/"]) .modal-host .modal-head { border-bottom: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); padding-bottom: 18px; }
:root:has(#view[data-room^="gardens/golden-shadows/"]) .modal-host .modal-eyebrow { margin-bottom: 4px; }
:root:has(#view[data-room^="gardens/golden-shadows/"]) .modal-host .modal-head .modal-eyebrow {
  margin: 0 0 4px; font-size: var(--size-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* Drop 138: Log an episode - what is being watched, and how far each has come */
.gl-log-modal { width: min(42rem, 100%); }
.gl-log-list { display: flex !important; flex-direction: column; gap: 0 !important; }
.gl-log-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 15%, transparent); }
.gl-log-row:last-child { border-bottom: 0; }
.gl-log-cover { width: 46px; height: 66px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.gl-log-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-log-words { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gl-log-words strong { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gl-log-words small { font-size: var(--size-2xs); color: color-mix(in srgb, var(--mist) 70%, var(--blossom)); }
.gl-log-words .gl-track { height: 5px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--mist) 14%, transparent); }
.gl-log-words .gl-track > span { display: block; height: 100%; }
.gl-log-button { min-width: 8.5rem; }
@media (max-width: 640px) {
  .gl-log-row { grid-template-columns: 40px minmax(0, 1fr); }
  .gl-log-button { grid-column: 2; justify-self: start; }
}
.gl-button .gl-icon, .gl-text-button .gl-icon { width: 15px; height: 15px; flex: none; }

/* Drop 138: in the Hall of Golden Shadows the pop-up's main button is gold, as her design has it */
:root:has(#view[data-room^="gardens/golden-shadows/"]) .modal-host .primary { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
:root:has(#view[data-room^="gardens/golden-shadows/"]) .modal-host .primary:hover { background: color-mix(in srgb, var(--gold) 85%, var(--blossom)); border-color: color-mix(in srgb, var(--gold) 85%, var(--blossom)); }

/* ================================================================
   Drop 139, at her word: the Golden Shadows task desk in her design.
   ================================================================ */
.gl-icon-button { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; cursor: pointer; font: inherit; font-size: var(--size-md);
  color: color-mix(in srgb, var(--mist) 70%, var(--blossom)); background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: 5px; }
.gl-icon-button:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gl-badge.is-rose { color: color-mix(in srgb, var(--hall-bl) 75%, var(--blossom)); border-color: color-mix(in srgb, var(--hall-bl) 40%, transparent); }
.gl-fine { margin: 12px 0 0; font-size: var(--size-2xs); line-height: 1.75; color: var(--gl-muted, var(--mist)); }

.gl-queue-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
.gl-queue { min-width: 0; padding: 14px 14px 11px; text-align: left; cursor: pointer; font: inherit; color: var(--blossom);
  border: 1px solid var(--gl-line); border-radius: 7px; background: color-mix(in srgb, var(--gl-panel) 80%, transparent); }
.gl-queue:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.gl-queue[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  background: linear-gradient(130deg, color-mix(in srgb, var(--gold) 12%, transparent), var(--gl-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent); }
.gl-queue-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--gold); }
.gl-queue-top b { font-size: var(--size-2xl); line-height: 1; color: var(--blossom); }
.gl-queue strong { display: block; margin-top: 8px; font-size: var(--size-sm); font-weight: 400; }
.gl-queue small { display: block; margin-top: 2px; font-size: var(--size-3xs); color: var(--gl-muted); }

.gl-desk-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(270px, 0.85fr); gap: 20px; align-items: start; }
.gl-desk-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gl-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.gl-filter-row select { font-size: var(--size-xs); padding: 8px 10px; color: var(--blossom); background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 5px; }
.gl-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 45%, transparent); border: 1px solid var(--gl-line); color: var(--gl-muted); }
.gl-search input { width: 100%; min-width: 0; padding: 9px 0; border: 0; background: none; color: var(--blossom); font: inherit; font-size: var(--size-sm); }
.gl-search input:focus { outline: none; }
.gl-search:focus-within { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gl-month-step { display: flex; align-items: center; gap: 8px; font-size: var(--size-xs); color: var(--blossom); }

.gl-task { display: grid; grid-template-columns: 18px 42px minmax(0, 1fr) 96px 32px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--gl-line); }
.gl-task input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent-jade); cursor: pointer; }
.gl-task-face { display: grid; place-items: center; width: 42px; height: 54px; overflow: hidden; border-radius: 4px; background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.gl-task-face.is-blank { height: 42px; background: color-mix(in srgb, var(--gold) 4%, transparent); }
.gl-task-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-task-words { min-width: 0; }
.gl-task-words h3 { margin: 0; font-size: var(--size-md); font-weight: 400; }
.gl-task-name { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--blossom); text-align: left; overflow-wrap: anywhere; }
.gl-task-name:hover { color: var(--gold); }
.gl-task-words p { margin: 2px 0 0; font-size: var(--size-xs); color: var(--gl-muted); }
.gl-task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-task-acts { display: flex; gap: 8px; margin-top: 8px; }
.gl-task.is-done .gl-task-name { text-decoration: line-through; color: var(--gl-muted); }
.gl-due { text-align: right; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-due b { display: block; margin-top: 3px; font-size: var(--size-3xs); font-weight: 500; letter-spacing: 0.08em; }
.gl-due.is-today { color: var(--blossom); }
.gl-due.is-overdue, .gl-due.is-overdue b { color: var(--accent-lacquer); }
.gl-queue-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-empty-mark { width: 22px !important; height: 22px !important; color: var(--gold); }

.gl-corner { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--gl-line); font-size: var(--size-xs); color: var(--gl-muted); }
.gl-corner span { flex: 1; }
.gl-corner .gl-icon { color: var(--gl-jade); }
.gl-corner small { font-size: var(--size-3xs); letter-spacing: 0.08em; color: var(--gl-jade); }
.gl-corner.is-on span { color: var(--gold); }
.gl-task-guide { margin: 6px 0 12px; font: italic var(--size-lg)/1.6 var(--font-serif); color: color-mix(in srgb, var(--blossom) 85%, var(--hall-oddities)); }
.gl-intent.is-done .gl-intent-title { text-decoration: line-through; color: var(--gl-muted); }

@media (max-width: 1400px) { .gl-queue-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .gl-desk-layout { grid-template-columns: minmax(0, 1fr); }
  .gl-desk-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .gl-queue-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gl-desk-side { grid-template-columns: minmax(0, 1fr); }
  .gl-task { grid-template-columns: 17px 36px minmax(0, 1fr) 32px; gap: 10px; }
  .gl-task .gl-due { grid-column: 3; grid-row: 2; text-align: left; display: flex; gap: 8px; margin-top: -6px; }
  .gl-task .gl-due b { margin: 0; }
  .gl-task > .gl-icon-button { grid-column: 4; grid-row: 1; }
  .gl-task-face { width: 36px; height: 46px; }
  .gl-filter-row select { max-width: 150px; }
}

/* ================================================================
   Drop 140, her answer: the docked player - at the foot of every
   page, outside the rooms, until she closes it. Tokens only.
   ================================================================ */
.player-dock { position: fixed; z-index: calc(var(--z-corner) - 1); bottom: 14px; left: calc(var(--sidebar-width) + 24px); right: calc(var(--orb-size) + 44px);
  max-width: 60rem; display: grid; grid-template-columns: 48px minmax(0, 14rem) minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-jade)); border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 12px; box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 65%, transparent); }
.player-dock[hidden] { display: none; }
.player-art { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--ink); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: var(--size-lg); }
.player-art img { width: 100%; height: 100%; object-fit: cover; }
.player-words { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player-eyebrow { font-size: var(--size-3xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.player-name { font: 400 var(--size-md)/1.25 var(--font-serif); color: var(--blossom); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-under { font-size: var(--size-2xs); color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-slot { min-width: 0; }
.player-audio { display: block; width: 100%; height: 40px; }
.player-frame { display: block; width: 100%; height: 80px; border: 0; border-radius: 12px; }
.player-frame:not(.is-track):not(.is-episode) { height: 152px; }
.player-close { width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer; font-size: var(--size-lg); line-height: 1; color: var(--mist);
  background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.player-close:hover { color: var(--blossom); border-color: var(--gold); }
:root[data-dock] .view { padding-bottom: 120px; }
:root[data-dock]:not([data-dock="track"]):not([data-dock="apple"]):not([data-dock="episode"]) .view { padding-bottom: 190px; }
@media (max-width: 960px) {
  .player-dock { left: 10px; right: calc(var(--orb-size) + 26px); bottom: 10px; grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 10px; }
  .player-art { width: 40px; height: 40px; }
  .player-slot { grid-column: 1 / -1; grid-row: 2; }
  .player-close { grid-column: 3; grid-row: 1; width: 30px; height: 30px; }
}

/* ================================================================
   Drop 140, at her word: the Soundtracks room in her design.
   ================================================================ */
.gl-music-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, 0.86fr); gap: 20px; align-items: start; }
.gl-music-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gl-view-toggle { display: flex; gap: 4px; padding: 2px; border: 1px solid var(--gl-line); border-radius: 5px; }
.gl-view-button { padding: 6px 10px; border: 0; border-radius: 4px; cursor: pointer; font: inherit; font-size: var(--size-2xs); color: var(--gl-muted); background: transparent; }
.gl-view-button[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 75%, var(--blossom)); color: var(--ink); }
.gl-wide-select { flex: 1 1 180px; min-width: 0; max-width: 360px; }
.gl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 14px; }
.gl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 5px; cursor: pointer; font: inherit; font-size: var(--size-xs);
  color: var(--gl-muted); background: transparent; border: 1px solid var(--gl-line); }
.gl-chip:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.gl-chip[aria-pressed="true"] { color: var(--blossom); border-color: color-mix(in srgb, var(--gold) 47%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.gl-chip-num { font-size: var(--size-3xs); color: var(--gold); }

.gl-song-list { display: flex; flex-direction: column; gap: 9px; }
.gl-song-list.is-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gl-song { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 13px; border-radius: 7px;
  border: 1px solid var(--gl-line); background: color-mix(in srgb, var(--gl-panel) 85%, transparent); }
.gl-song.is-selected { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(130deg, color-mix(in srgb, var(--gold) 9%, transparent), var(--gl-panel)); }
.gl-song-cover { position: relative; width: 66px; height: 66px; padding: 0; border: 0; background: none; cursor: pointer; }
.gl-song-art { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 5px; background: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.gl-song-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-song-blank { color: var(--gold); font-size: var(--size-xl); }
.gl-song-mark { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: var(--size-2xs); color: var(--blossom); background: color-mix(in srgb, var(--ink) 88%, transparent); }
.gl-song-words { min-width: 0; }
.gl-song-words h3 { margin: 0 0 3px; font: 400 var(--size-lg)/1.3 var(--font-serif); }
.gl-song-name { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--blossom); text-align: left; overflow-wrap: anywhere; }
.gl-song-name:hover { color: var(--gold); }
.gl-song-words p { margin: 0; font-size: var(--size-xs); color: var(--gl-muted); }
.gl-song-words .gl-song-scroll { line-height: 1.6; }
.gl-song-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.gl-song-time { font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-song-acts { display: flex; align-items: center; gap: 7px; }
.gl-heart[aria-pressed="true"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.gl-song-list.is-grid .gl-song { grid-template-columns: 60px minmax(0, 1fr); align-items: start; }
.gl-song-list.is-grid .gl-song-cover { width: 60px; height: 60px; }
.gl-song-list.is-grid .gl-song-acts { grid-column: 1 / -1; justify-content: flex-end; padding-top: 9px; border-top: 1px solid var(--gl-line); }

.gl-p-spotlight { background: radial-gradient(circle at 85% 0, color-mix(in srgb, var(--gold) 13%, transparent), transparent 50%), color-mix(in srgb, var(--gl-panel) 80%, var(--accent-jade));
  border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.gl-disc { display: grid; place-items: center; width: 108px; height: 108px; margin: 14px auto 18px; border-radius: 50%;
  background: repeating-radial-gradient(circle at center, var(--ink) 0, var(--ink) 2px, color-mix(in srgb, var(--surface) 70%, var(--accent-jade)) 3px, var(--ink) 4px);
  border: 1px solid color-mix(in srgb, var(--gold) 27%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 60%, transparent); }
.gl-disc-art { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--blossom) 80%, transparent); background: var(--ink); }
.gl-disc-art img { width: 100%; height: 100%; object-fit: cover; }
.gl-spot-heading { text-align: center; }
.gl-spot-heading h2 { margin: 12px 0 4px; font: 400 var(--size-2xl)/1.2 var(--font-serif); color: var(--blossom); }
.gl-spot-artist { margin: 0 0 6px; font-size: var(--size-sm); color: var(--gl-muted); }
.gl-spot-scroll { display: inline-block; margin-bottom: 16px; font-size: var(--size-xs); color: var(--gold); text-decoration: none; }
.gl-listen { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 6px; }
.gl-listen-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gl-listen-label { font-size: var(--size-xs); color: var(--gl-muted); }
.gl-spotify-frame { display: block; width: 100%; height: 80px; border: 0; border-radius: 12px; }
.gl-listen-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.gl-listen-links a { font-size: var(--size-xs); color: var(--blossom); text-decoration: none; }
.gl-listen-links a:hover { color: var(--gold); }
.gl-spot-notes { margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--gl-line); font-size: var(--size-xs); line-height: 1.75; white-space: pre-wrap; color: var(--gl-muted); }
.gl-p-spotlight .mv-item { margin-top: 14px; }

.gl-playlist { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gl-line); }
.gl-playlist-art { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 5px; background: var(--ink); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.gl-playlist-art img { width: 100%; height: 100%; object-fit: cover; }
.gl-playlist-words { min-width: 0; display: flex; flex-direction: column; }
.gl-playlist-words strong { font-size: var(--size-sm); font-weight: 400; color: var(--blossom); overflow-wrap: anywhere; }
.gl-playlist-words small { font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-heart-mark { color: var(--gold); font-size: var(--size-lg); }
.gl-repeat { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--gl-line);
  background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.gl-repeat-art { flex: none; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 4px; background: var(--ink); }
.gl-repeat-art img { width: 100%; height: 100%; object-fit: cover; }
.gl-repeat-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-repeat-words strong { font-size: var(--size-sm); font-weight: 400; color: var(--blossom); }
.gl-repeat-words small { font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-repeat-arrow { color: var(--gold); }

@media (max-width: 1180px) {
  .gl-music-layout { grid-template-columns: minmax(0, 1fr); }
  .gl-music-side { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .gl-music-side .gl-p-spotlight { grid-row: span 2; }
}
@media (max-width: 760px) {
  .gl-music-side { grid-template-columns: minmax(0, 1fr); }
  .gl-music-side .gl-p-spotlight { grid-row: auto; }
  .gl-song { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .gl-song-cover { width: 52px; height: 52px; }
  .gl-song-acts { grid-column: 1 / -1; justify-content: flex-end; }
  .gl-song-list.is-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-filter-row select { min-width: 0; max-width: 100%; }
  .gl-filter-row > select:not(.gl-wide-select) { flex: 0 1 auto; }
}
@media (max-width: 760px) { .gl-room .gl-filter-row select { min-width: 0 !important; max-width: 100%; } }   /* the dressed dropdowns size to their longest line (ui.js); on a phone the line wraps instead */
.player-dock { color-scheme: dark; }

/* ================================================================
   Drop 141, at her word: the Hall Report in her design.
   ================================================================ */
.gl-period-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-period-controls .gl-chips { margin: 0; }
.gl-period-label { min-width: 150px; text-align: center; font: 400 var(--size-xl) var(--font-serif); color: var(--blossom); }
.gl-basis { display: flex; align-items: center; gap: 10px; }
.gl-basis select, .gl-period-controls select { font-size: var(--size-xs); padding: 8px 10px; color: var(--blossom); background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 5px; }
.gl-report .gl-toolbar .gl-chips { margin: 0; }
.gl-report-overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); margin-bottom: 18px; overflow: hidden; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: linear-gradient(115deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gl-panel) 90%, var(--accent-jade)) 55%, var(--gl-panel)); }
.gl-report-lead { padding: 23px 26px; border-right: 1px solid var(--gl-line); }
.gl-big-time { margin: 8px 0; font-size: var(--size-4xl); line-height: 1.15; color: var(--blossom); }
.gl-report-lead p { margin: 6px 0 12px; font-size: var(--size-xs); color: var(--gl-muted); }
.gl-report-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 16px; }
.gl-report-number b { display: block; font-size: var(--size-2xl); color: var(--blossom); }
.gl-report-number span { display: block; font-size: var(--size-xs); color: var(--blossom); }
.gl-report-number small { display: block; margin-top: 2px; font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-coverage { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; padding: 11px 14px; border-radius: 5px; font-size: var(--size-2xs); line-height: 1.75;
  color: var(--gl-muted); border: 1px solid var(--gl-line); background: color-mix(in srgb, var(--gold) 3%, transparent); }
.gl-coverage strong { color: var(--blossom); font-weight: 500; }
.gl-coverage .gl-icon { color: var(--gold); margin-top: 2px; }
.gl-report-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.gl-report-grid > .is-wide { grid-column: 1 / -1; }
.gl-p-rhythm .gl-month-chart { height: 135px; }
.gl-p-rhythm .gl-month-bars { height: 100px; }
.gl-month-col.is-dim { opacity: 0.45; }
.gl-split-meter { display: flex; height: 14px; margin: 20px 0 12px; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--mist) 14%, transparent); }
.gl-split-meter .is-gold { background: var(--gold); }
.gl-split-meter .is-jade { background: var(--gl-jade); }
.gl-split-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.gl-split-details b { font-size: var(--size-2xl); color: var(--blossom); }
.gl-split-details b span { font: var(--size-xs) var(--font-sans); color: var(--gl-muted); }
.gl-split-details small { display: block; margin-top: 4px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-ratings-chart { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 9px; height: 150px; align-items: end; margin-top: 12px; }
.gl-feeling .gl-ratings-chart { grid-template-columns: repeat(6, minmax(0, 1fr)); height: 135px; }
.gl-rating-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.gl-bar-area { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; height: 72px; }
.gl-bar-area strong { margin-bottom: 5px; font-size: var(--size-2xs); font-weight: 400; color: var(--blossom); }
.gl-rating-bar { display: block; width: 80%; min-height: 1px; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, var(--progress-from), color-mix(in srgb, var(--progress-from) 60%, var(--blossom))); }
.gl-rating-col.is-empty .gl-rating-bar { background: color-mix(in srgb, var(--mist) 25%, transparent); }
.gl-scale-mark { width: 30px; height: 32px; object-fit: contain; opacity: 0.85; }
.gl-rating-col.is-empty .gl-scale-mark { opacity: 0.45; }
.gl-rating-col small { font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-ratings-summary { display: flex; gap: 25px; flex-wrap: wrap; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--gl-line); font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-ratings-summary strong { margin-right: 6px; font-size: var(--size-xl); color: var(--blossom); }
.gl-hbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; align-items: center; gap: 13px; margin: 13px 0; font-size: var(--size-xs); color: var(--gl-muted); }
.gl-hbar .gl-track { height: 6px; }
.gl-hbar-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; color: var(--blossom); }
.gl-hbar-value { text-align: right; font-size: var(--size-2xs); }
.gl-feelings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.gl-feeling h3 { margin: 0; font: 400 var(--size-lg) var(--font-serif); color: var(--blossom); }
.gl-rank-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 23px; }
.gl-rank { display: grid; grid-template-columns: 24px 37px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gl-line);
  color: inherit; text-decoration: none; }
.gl-rank:hover .gl-rank-title { color: var(--gold); }
.gl-rank-no { font: 400 var(--size-md) var(--font-serif); color: var(--gold); }
.gl-rank-cover { width: 37px; height: 53px; overflow: hidden; border-radius: 3px; background: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.gl-rank-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-rank-words { min-width: 0; }
.gl-rank-title { display: block; font-size: var(--size-sm); line-height: 1.5; color: var(--blossom); overflow-wrap: anywhere; }
.gl-rank-words small { display: block; margin-top: 3px; font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-score { font-size: var(--size-xl); color: var(--blossom); }
.gl-score small { font: var(--size-3xs) var(--font-sans); color: var(--gl-muted); }
.gl-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-tag-cloud span { padding: 6px 10px; border-radius: 5px; font-size: var(--size-xs); color: var(--blossom); border: 1px solid var(--gl-line); background: color-mix(in srgb, var(--gold) 4%, transparent); }
/* Drop 145, at her word ("use the long pix so we can fit more people per page instead of circles"): tall portraits, many to a row. */
.gl-actor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px 12px; }
.gl-actor { min-width: 0; text-align: left; color: inherit; text-decoration: none; }
.gl-actor strong { display: block; font-size: var(--size-xs); font-weight: 400; line-height: 1.35; color: var(--blossom); overflow-wrap: anywhere; }
.gl-actor small { display: block; margin-top: 2px; font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-actor-portrait { display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3; margin: 0 0 8px; overflow: hidden; border-radius: 6px; background: var(--ink); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: var(--size-2xl); }
.gl-actor-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform var(--mid) var(--ease); }
.gl-actor:hover strong { color: var(--gold); }
.gl-actor:hover .gl-actor-portrait { border-color: var(--gold); }
.gl-actor:hover .gl-actor-portrait img { transform: scale(1.03); }

@media (max-width: 1180px) {
  .gl-report-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-report-overview { grid-template-columns: minmax(0, 1fr); }
  .gl-report-lead { border-right: 0; border-bottom: 1px solid var(--gl-line); }
}
@media (max-width: 760px) {
  .gl-report-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-feelings-grid, .gl-rank-list { grid-template-columns: minmax(0, 1fr); }
  .gl-actor-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 14px 10px; }
  .gl-ratings-chart { gap: 3px; }
  .gl-scale-mark { width: 22px; height: 26px; }
  .gl-hbar { grid-template-columns: 90px minmax(0, 1fr) 56px; gap: 8px; }
  .gl-period-label { min-width: 0; font-size: var(--size-lg); }
}
@media print {
  .gl-report .gl-toolbar-doors, .gl-report .gl-icon-button, .gl-report .gl-basis, .player-dock { display: none !important; }
}

/* ================================================================
   Drop 142, at her word ("implement also new view for the challenges
   just keep our pix with their transparent bgs"): Challenges of the
   Golden Shadows in her design. The year beside its vows, the trials
   as enclosed cards, the long roads, the sixteen roads with our own
   sigils (transparent, never boxed), and the sheets each trial opens
   into: cards side by side, never one long line. Tokens only.
   ================================================================ */
.gl-challenges > .gl-panel { margin-top: 20px; }
.gl-year-controls .gl-year-label { min-width: 90px; }
.gl-snapshot { display: inline-flex; align-items: center; gap: 7px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-snapshot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gl-jade); }
.gl-year-jump { font-size: var(--size-2xs); }
.gl-challenges .gl-filter-row .picker, .gl-pool-sheet .gl-filter-row .picker { flex: 0 1 250px; min-width: 180px; }
.gl-h2-cjk { margin-left: 10px; font-size: var(--size-xs); color: var(--gold); letter-spacing: 0.08em; }

/* the year's seal, the year's vows */
.gl-challenge-summary { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.gl-trial-year { display: flex; align-items: center; gap: 24px; padding: 24px; min-width: 0; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold) 9%, var(--gl-panel)), var(--gl-panel)); }
.gl-trial-year .gl-ring { width: 104px; height: 104px; }
.gl-trial-year .gl-ring strong { font-size: var(--size-2xl); }
.gl-trial-year-words { min-width: 0; }
.gl-trial-year-words h2 { margin: 4px 0 2px; font: 400 var(--size-2xl)/1.2 var(--font-serif); color: var(--blossom); }
.gl-trial-year-words .gl-badge { margin-top: 10px; }
.gl-track.is-thick { height: 6px; }
.gl-goal-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.gl-goal b { display: block; font-size: var(--size-xl); color: var(--blossom); }
.gl-goal b span { font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-goal small { display: block; margin-top: 3px; font-size: var(--size-3xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gl-muted); }
.gl-vow-kept { margin-top: 14px; }
.gl-vow-months { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* the trials, as cards */
.gl-trial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gl-trial { position: relative; display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 16px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); background: color-mix(in srgb, var(--accent-jade) 9%, var(--gl-panel)); }
.gl-trial.is-sealed { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--gold) 8%, var(--gl-panel)), var(--gl-panel)); }
.gl-trial.is-template { border-style: dashed; background: color-mix(in srgb, var(--gl-panel) 55%, transparent); }
.gl-trial-top { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.gl-trial.is-sealed .gl-trial-top { padding-right: 40px; }
.gl-trial-sigil { display: grid; place-items: center; width: 52px; height: 52px; }
.gl-trial-sigil img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gl-trial-words { min-width: 0; }
.gl-trial-words h3 { margin: 3px 0 0; font: 400 var(--size-lg)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gl-trial-stamp { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.gl-trial-text { flex: 1; margin: 0; font-size: var(--size-xs); line-height: 1.6; color: var(--gl-muted); }
.gl-trial-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-trial-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-trial-slots:empty { display: none; }
.gl-slot { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 8px; border-radius: 4px; font-size: var(--size-3xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gl-muted); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); }
.gl-slot b { color: var(--gold); font-weight: 600; }
.gl-slot.is-kept { display: inline-block; color: var(--blossom); background: color-mix(in srgb, var(--gl-jade) 13%, transparent); border-color: color-mix(in srgb, var(--gl-jade) 32%, transparent); }
.gl-slot.is-kept b { margin-right: 5px; }
.gl-slot.is-waiting { border-style: dashed; }
.gl-slot.is-note { font-style: italic; white-space: normal; }
.gl-trial-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gl-line); }
.gl-trial-bottom .gl-badge { text-transform: uppercase; }

/* the tiers, each its own quiet colour */
.gl-tier.is-minor { color: var(--gl-muted); }
.gl-tier.is-standard { color: var(--blossom); }
.gl-tier.is-difficult { color: var(--lantern); border-color: color-mix(in srgb, var(--lantern) 40%, transparent); }
.gl-tier.is-grand { color: color-mix(in srgb, var(--moon) 45%, var(--blossom)); border-color: color-mix(in srgb, var(--moon) 60%, transparent); }
.gl-tier.is-legendary { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* the long roads */
.gl-milestones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.gl-milestone { padding: 14px 0; border-bottom: 1px solid var(--gl-line); min-width: 0; }
.gl-milestone-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.gl-milestone h3 { margin: 0 0 6px; font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); }
.gl-milestone-count { font-size: var(--size-lg); color: var(--gold); white-space: nowrap; }
.gl-milestone.is-sealed .gl-milestone-count { color: var(--gl-jade); }

/* the sixteen roads, our sigils as they are */
.gl-road-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gl-road { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 12px; cursor: pointer;
  text-align: left; font: inherit; color: var(--blossom); border-radius: 6px; border: 1px solid var(--gl-line); background: color-mix(in srgb, var(--accent-jade) 7%, var(--gl-panel)); }
.gl-road:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.gl-road:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gl-road.is-earned { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gl-road-sigil { display: grid; place-items: center; width: 62px; height: 62px; }
.gl-road-sigil img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gl-road-words { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gl-road-words strong { font: 400 var(--size-sm)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gl-road-words small { font-size: var(--size-3xs); color: var(--gl-muted); }
.gl-road-words .gl-road-title { color: var(--gold); }

/* the sheets: the hall's own measures, carried outside the room */
.gl-sheet { --gl-line: color-mix(in srgb, var(--gold) 17%, transparent); --gl-jade: color-mix(in srgb, var(--accent-jade) 62%, var(--blossom));
  --gl-panel: color-mix(in srgb, var(--surface) 88%, var(--accent-jade)); --gl-muted: color-mix(in srgb, var(--mist) 70%, var(--blossom)); }
.gl-sheet .gl-icon { width: 15px; height: 15px; flex: none; }
:root:has(#view[data-room^="gardens/golden-shadows/"]) .modal-host .modal.gl-sheet { width: min(52rem, 100%); }
.gl-sheet .modal-actions .gl-sheet-aside, .gl-sheet .modal-actions .gl-pool-count { margin-right: auto; }
.gl-pool-count { align-self: center; font-size: var(--size-2xs); color: var(--mist); }
.gl-sheet-label { margin: 4px 0 -6px !important; font-size: var(--size-3xs) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold) !important; }
.gl-sheet .gl-search { min-height: 38px; }
.gl-sheet .gl-filter-row { margin: 0; }
.gl-trial-detail { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); background: color-mix(in srgb, var(--accent-jade) 10%, transparent); }
.gl-trial-detail-sigil { display: grid; place-items: center; width: 84px; height: 84px; }
.gl-trial-detail-sigil img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gl-trial-detail-words { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gl-trial-detail-seal { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gl-trial-detail-stamp { width: 58px; height: 58px; object-fit: contain; }
.gl-trial-detail-seal small { font-size: var(--size-3xs); color: var(--gold); white-space: nowrap; }
.gl-claim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-claim { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border-radius: 6px; text-align: left; font: inherit; color: var(--blossom);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); background: color-mix(in srgb, var(--accent-jade) 12%, var(--surface)); }
.gl-claim-words { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gl-claim-words strong, .gl-claim.is-waiting strong { font: 400 var(--size-md)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gl-claim small, .gl-claim-words small { font-size: var(--size-2xs); color: var(--gl-muted, var(--mist)); }
.gl-claim-off { width: 28px; height: 28px; font-size: var(--size-md); }
.gl-claim.is-waiting { flex-direction: column; align-items: flex-start; gap: 3px; cursor: pointer; border-style: dashed; background: transparent; }
.gl-claim.is-waiting strong { color: var(--mist); }
.gl-claim.is-waiting:hover { border-color: var(--gold); }
.gl-claim.is-waiting:hover strong { color: var(--gold); }
.gl-claim.is-more { justify-content: center; border-style: dashed; background: transparent; font-size: var(--size-2xs); color: var(--mist); }
.gl-trial-note-keep { margin-top: 10px; }
.gl-trial-note textarea { min-height: 70px !important; }

.gl-spend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-spend { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 13px; cursor: pointer; text-align: left; font: inherit; color: var(--blossom);
  border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); background: color-mix(in srgb, var(--accent-jade) 10%, var(--surface)); }
.gl-spend:hover { border-color: var(--gold); }
.gl-spend:disabled { opacity: 0.55; cursor: default; }
.gl-spend[hidden] { display: none; }
.gl-spend-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.gl-spend-top strong { font: 400 var(--size-md)/1.3 var(--font-serif); overflow-wrap: anywhere; }
.gl-spend small { font-size: var(--size-2xs); color: var(--mist); }

.gl-pool { display: flex; flex-direction: column; gap: 18px; }
.gl-pool-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 400 var(--size-md) var(--font-serif); color: var(--blossom); }
.gl-pool-head strong { font-weight: 400; }
.gl-pool-head .cjk { font-size: var(--size-xs); color: var(--gold); }
.gl-pool-sigil { display: grid; place-items: center; width: 40px; height: 40px; }
.gl-pool-sigil img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gl-pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-pool-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 13px; cursor: pointer; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); background: color-mix(in srgb, var(--accent-jade) 8%, var(--surface)); }
.gl-pool-item:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gl-pool-item.is-chosen { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.gl-pool-item input { margin-top: 3px; accent-color: var(--gold); flex: none; }
.gl-pool-words { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.gl-pool-name { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.gl-pool-name strong { font: 400 var(--size-sm)/1.35 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gl-pool-words small { font-size: var(--size-2xs); line-height: 1.5; color: var(--mist); }

.gl-road-trial { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px 13px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); background: color-mix(in srgb, var(--accent-jade) 8%, var(--surface)); }
.gl-road-trial .gl-pool-name { align-self: stretch; }
.gl-road-trial.is-sealed { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gl-road-trial small { font-size: var(--size-2xs); line-height: 1.5; color: var(--mist); }
.gl-road-seal { font-size: var(--size-2xs); color: var(--gold); }
.gl-road-wait { font-size: var(--size-2xs); font-style: italic; color: var(--mist); }

@media (max-width: 1180px) {
  .gl-trial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-road-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gl-challenge-summary, .gl-milestones { grid-template-columns: minmax(0, 1fr); }
  .gl-road-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gl-trial-grid, .gl-road-grid, .gl-claim-grid, .gl-spend-grid, .gl-pool-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-trial-year { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px; }
  .gl-trial-detail { grid-template-columns: 60px minmax(0, 1fr); }
  .gl-trial-detail-sigil { width: 60px; height: 60px; }
  .gl-trial-detail-seal { grid-column: 1 / -1; flex-direction: row; }
  .gl-goal b { font-size: var(--size-lg); }
  .gl-challenges .gl-filter-row .picker, .gl-pool-sheet .gl-filter-row .picker { flex: 1 1 100%; }
}

/* ================================================================
   Drop 143, at her word ("dropdowns should show full list on click -
   and type in ones should be empty on click to type"): every picker
   opens on its whole list, the chosen one marked and in view; the box
   is empty to type in, what it held shown softly as its placeholder.
   ================================================================ */
.picker-row.is-chosen { background: color-mix(in srgb, var(--gold) 13%, transparent); }
.picker-row.is-chosen .picker-label { color: var(--gold); }
.picker-row.is-chosen .picker-label::after { content: ' \2713'; }
.picker-label.is-blank { color: var(--mist); font-style: italic; }
.picker-field::placeholder, input[list]::placeholder { color: color-mix(in srgb, var(--mist) 85%, transparent); opacity: 1; }

/* ================================================================
   Drop 144, at her word ("posters should be there in history"): in the
   hall's History, a scroll's deed wears its poster and opens it.
   ================================================================ */
.hl-face.has-poster { background: var(--ink); }
a.hl-face { text-decoration: none; transition: box-shadow var(--fast) var(--ease); }
a.hl-face:hover, a.hl-face:focus-visible { box-shadow: 0 0 0 1px var(--gold), var(--shadow-low); }

/* ================================================================
   Drop 146, at her word ("add a page to the music shelf that shows the
   songs by the scroll they are connected to"): By scroll - each scroll
   enclosed with its poster, its name, how many songs and how long,
   then its songs as on the shelf.
   ================================================================ */
.gl-by-scroll { display: flex; flex-direction: column; gap: 14px; }
.gl-scroll-group { padding: 13px 14px 6px; border-radius: 8px; border: 1px solid var(--gl-line); background: color-mix(in srgb, var(--accent-jade) 6%, transparent); }
.gl-scroll-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--gl-line); }
.gl-scroll-poster { display: grid; place-items: center; width: 48px; height: 72px; overflow: hidden; border-radius: 4px; background: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); text-decoration: none; }
.gl-scroll-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-scroll-poster:hover { border-color: var(--gold); }
.gl-scroll-words { min-width: 0; }
.gl-scroll-words h3 { margin: 0 0 4px; font: 400 var(--size-lg)/1.3 var(--font-serif); }
.gl-scroll-title { color: var(--blossom); text-decoration: none; overflow-wrap: anywhere; }
.gl-scroll-title:hover { color: var(--gold); }
.gl-scroll-words p { margin: 0; font-size: var(--size-2xs); color: var(--gl-muted); }
.gl-scroll-group .gl-song-list { gap: 10px; margin: 10px 0 8px; }
.gl-scroll-group .gl-song-scroll { display: none; }   /* the scroll is named once, above its songs */
@media (max-width: 900px) { .gl-scroll-group .gl-song-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .gl-scroll-head { grid-template-columns: 44px minmax(0, 1fr); }
  .gl-scroll-head .gl-text-button { grid-column: 2; justify-self: start; }
  .gl-scroll-poster { width: 44px; height: 66px; }
}

/* ================================================================
   Drop 149, at her word ("Character Maps should work and look like the
   one in Literary section"): the Golden Shadows Characters Map in the
   Literary map's own dress - the title chosen above the map, the
   toolbar, the dotted ground, the cards with their round faces, the
   threads with their words halfway, and the table of threads below.
   ================================================================ */
.gc-room { display: flex; flex-direction: column; gap: 16px; }
.gc-top { display: flex; justify-content: flex-end; }
.gc-panel { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-width: 0; background: var(--surface);
  box-shadow: 0 5px 28px color-mix(in srgb, var(--ink) 13%, transparent); }
.gc-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 21px; border-bottom: 1px solid var(--border); }
.gc-toolbar > .picker, .gc-toolbar > .gc-select { flex: 1 1 260px; min-width: 200px; max-width: 520px; }
.gc-toolbar .gc-select { font-size: var(--size-sm); padding: 8px 10px; color: var(--blossom); background: color-mix(in srgb, var(--surface) 58%, var(--ink));
  border: 1px solid var(--border); border-radius: 6px; }
.gc-zoom { width: 30px; height: 30px; }
.gc-zoom-said { font-size: var(--size-3xs); color: var(--mist); min-width: 34px; text-align: center; }
.gc-arrange { color: var(--accent-jade); font-size: var(--size-sm); }
.gc-arrange:disabled { opacity: 0.45; }
.gc-wrap { overflow: auto; min-height: 470px; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; }
.gc-sizer { position: relative; }
.gc-stage { position: relative; transform-origin: top left; }
.gc-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gc-line { fill: none; stroke: var(--accent-jade); }
.gc-line.is-against { stroke: var(--accent-lacquer); }
.gc-arrow-head { fill: color-mix(in srgb, var(--gold) 50%, var(--blossom)); }
.gc-line-label { font-size: var(--size-sm); fill: var(--gold); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.gc-node { position: absolute; width: 151px; min-height: 89px; box-sizing: border-box; padding: 12px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 5px 28px color-mix(in srgb, var(--ink) 13%, transparent); touch-action: none; user-select: none; cursor: grab; }
.gc-node.is-dragging { cursor: grabbing; border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); z-index: 2; }
.gc-node.is-still { cursor: default; }
.gc-node h3 { margin: 6px 0 2px; font: 400 var(--size-xs)/1.3 var(--font-serif); color: var(--blossom); }
.gc-node small { display: block; font-size: var(--size-xs); line-height: 1.4; color: var(--mist); overflow-wrap: anywhere; }
.gc-node small.gc-actor { margin-top: 2px; font-size: var(--size-3xs); }
.gc-name { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.gc-name:hover, .gc-name:focus-visible { color: var(--gold); }
.gc-avatar { display: grid; place-items: center; width: 29px; height: 29px; overflow: hidden; border-radius: 50%; font-size: var(--size-sm); color: var(--blossom);
  background: color-mix(in srgb, var(--blossom) 28%, var(--surface)); border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--blossom) 50%, var(--mist)) 18.8%, transparent); }
.gc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gc-empty { padding: 46px 20px; text-align: center; }
.gc-empty h3 { margin: 0 0 6px; font: 400 var(--size-xl) var(--font-serif); color: var(--blossom); }
.gc-empty p { margin: 0 0 16px; color: var(--mist); }
.gc-empty-doors { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gc-note { margin: 0; font-size: var(--size-xs); color: var(--mist); }
.gc-threads { padding: 26px 50px 30px; }
.gc-threads h2 { margin: 18px 0 22px; font: 400 var(--size-xl)/1.3 var(--font-serif); color: var(--blossom); letter-spacing: -0.01em; }
.gc-quiet { margin: 0; color: var(--mist); font-size: var(--size-sm); }
.gc-table-wrap { overflow: auto; }
.gc-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--size-sm); }
.gc-table th { padding: 10px 12px; font-size: var(--size-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); border-bottom: 1px solid var(--border); }
.gc-table td { padding: 13px 12px; color: var(--blossom); border-bottom: 1px solid var(--border); }
.gc-table tr:last-child td { border-bottom: 0; }
.gc-edit-cell { text-align: right; }
.gc-edit { color: var(--accent-jade); font-size: var(--size-sm); }
.gc-portrait-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.gc-mini { display: block; position: relative; overflow: hidden; margin-top: var(--space-2); border-radius: 8px; border: 1px solid var(--border); text-decoration: none;
  background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; }
.gc-mini-stage { transform-origin: top left; }
.gc-offer { display: inline-block; text-decoration: none; }
/* a tick in a form (FIC.form type check): the box before its words */
.modal-host .field.field-check { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; grid-column: 1 / -1; }
.modal-host .field.field-check label { margin: 0 !important; }
.modal-host .field.field-check input[type="checkbox"] { width: 16px !important; height: 16px; padding: 0 !important; margin: 0; flex: none; accent-color: var(--gold); }
.modal-host .modal-actions .gc-off { margin-right: auto; }
@media (max-width: 640px) {
  .gc-toolbar { padding: 14px; gap: 8px; }
  .gc-toolbar > .picker, .gc-toolbar > .gc-select { flex-basis: 100%; max-width: none; }
  .gc-threads { padding: 18px 16px 20px; }
  .gc-portrait-row { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   Drop 151, at her word ("memorable line should have a filter and search
   to look up where stuff is from and to sort it and display it like that"):
   Memorable Lines as a Golden Shadows room - search, Where from, Who said
   it, five orders, One by one or By title; scenes the same, smaller.
   ================================================================ */
.gl-lines-modes .gl-view-button { display: inline-flex; align-items: center; gap: 7px; }
.gl-view-button[aria-pressed="true"] .gl-chip-num { color: var(--ink); }
.gl-lines-list.lines-book { margin: 4px 0 12px; }
.gl-lines-list.gl-by-scroll, .gl-scene-list.gl-by-scroll { margin: 4px 0 12px; }
.lines-book.is-grouped { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 8px; margin: 10px 0 8px; }
.lines-book.is-grouped .line-card { padding: 10px 12px; background: color-mix(in srgb, var(--gl-panel) 85%, transparent); }
.lines-book.is-grouped .line-said { font-size: var(--size-md); }
.gl-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; margin: 4px 0 12px; }
.gl-scroll-group .gl-scene-grid { margin: 10px 0 8px; }
.gl-scene { min-width: 0; padding: 8px; border-radius: 7px; border: 1px solid var(--gl-line); background: color-mix(in srgb, var(--gl-panel) 85%, transparent); }
.gl-scene .embed { border-radius: 5px; }
.gl-scene .mv-caption { margin-top: 7px; font-size: var(--size-2xs); }
.gl-scene .mv-caption strong { font-weight: 500; color: var(--blossom); overflow-wrap: anywhere; }
.gl-scene .video-link { display: block; padding: 22px 10px; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .gl-scene-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-lines .gl-toolbar .gl-view-toggle { width: 100%; }
  .gl-lines .gl-toolbar .gl-view-button { flex: 1; justify-content: center; }
  .gl-lines .gl-filter-row .gl-search { flex-basis: 100%; }
  .gl-lines .gl-filter-row select { flex: 1 1 140px; max-width: none; }
}

/* ================================================================
   Drop 152 ("same of character maps"): The map | Every character - every
   character on every map, searched, narrowed to a title, ordered, shown as
   cards or by title; a name opens its own map with its card picked out.
   ================================================================ */
.gc-top { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gc-modes .gl-view-button { display: inline-flex; align-items: center; gap: 7px; }
.gc-finder-bar .gl-search { flex: 1 1 260px; min-width: 200px; }
.gc-finder-bar > .gc-select.gc-where { flex: 1 1 200px; min-width: 170px; max-width: 320px; }
.gc-finder-bar > .gc-select.gc-order { flex: 0 1 170px; min-width: 150px; }
.gc-finder-list { padding: 18px 21px 6px; }
.gc-finder-wait { padding: 30px 21px; }
.gc-finder-foot { padding: 4px 21px 18px; }
.gc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.gl-scroll-group .gc-card-grid { margin: 12px 0 8px; }
.gc-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px; border-radius: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 5px 28px color-mix(in srgb, var(--ink) 13%, transparent); }
.gc-card .gc-avatar { width: 44px; height: 44px; font-size: var(--size-md); }
.gc-card-words { min-width: 0; }
.gc-card h3 { margin: 2px 0 3px; font: 400 var(--size-sm)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gc-card small { display: block; font-size: var(--size-2xs); line-height: 1.45; color: var(--mist); overflow-wrap: anywhere; }
.gc-card small.gc-actor { font-size: var(--size-3xs); }
.gc-card small.gc-card-meta { margin-top: 4px; font-size: var(--size-3xs); color: var(--gold); }
.gc-from { display: inline-block; margin-top: 4px; font-size: var(--size-2xs); color: var(--accent-jade); text-decoration: none; overflow-wrap: anywhere; }
.gc-from:hover { color: var(--gold); text-decoration: underline; }
.gc-node.is-found { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent), 0 5px 28px color-mix(in srgb, var(--ink) 13%, transparent); }
@media (max-width: 640px) {
  .gc-top .gc-modes { flex: 1 1 100%; }
  .gc-top .gc-modes .gl-view-button { flex: 1; justify-content: center; }
  .gc-top .gc-add { flex: 1 1 100%; }
  .gc-finder-bar .gl-search, .gc-finder-bar > .gc-select.gc-where, .gc-finder-bar > .gc-select.gc-order { flex: 1 1 100%; max-width: none; min-width: 0; }
  .gc-finder-list { padding: 14px 14px 4px; }
  .gc-finder-foot { padding: 4px 14px 14px; }
}

/* ================================================================
   Drop 153, at her word ("tasks give me tile view not just list view"):
   the task desk as List or Tiles - each tile the poster (or the queue's
   mark) with the tick and the pen on it, then the task, its meta, its
   day and its doing. Remembered on this device.
   ================================================================ */
.gl-head-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.gl-task-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-items: stretch; }
.gl-task-tiles > .gl-empty { grid-column: 1 / -1; }
.gl-task-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 8px; border: 1px solid var(--gl-line);
  background: color-mix(in srgb, var(--gl-panel) 85%, transparent); }
.gl-task-tile:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.gl-task-tile.is-high { border-color: color-mix(in srgb, var(--accent-lacquer) 45%, transparent); }
.gl-tile-art { position: relative; }
.gl-tile-face { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); color: var(--gold); border-bottom: 1px solid var(--gl-line); }
.gl-tile-face.is-blank { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--gold) 10%, transparent), color-mix(in srgb, var(--gold) 3%, transparent) 70%); }
.gl-tile-face.is-blank .gl-icon { width: 34px; height: 34px; }
.gl-tile-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.gl-tile-tick { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 74%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.gl-tile-tick input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent-jade); cursor: pointer; }
.gl-icon-button.gl-tile-edit { position: absolute; top: 8px; right: 8px; background: color-mix(in srgb, var(--ink) 74%, transparent); }
.gl-tile-body { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; padding: 11px 12px 12px; }
.gl-task-tile .gl-task-words h3 { font-size: var(--size-sm); line-height: 1.35; }
.gl-task-tile .gl-task-acts { flex-wrap: wrap; }
.gl-task-tile .gl-due { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 9px; text-align: left; border-top: 1px solid var(--gl-line); }
.gl-task-tile .gl-due b { margin: 0; }
.gl-task-tile.is-done .gl-task-name { text-decoration: line-through; color: var(--gl-muted); }
.gl-task-tile.is-done .gl-tile-face img { opacity: 0.5; }
@media (max-width: 640px) {
  .gl-task-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 126px), 1fr)); gap: 10px; }
  .gl-p-queue .gl-panel-head { flex-wrap: wrap; }
  .gl-p-queue .gl-head-tools { justify-content: flex-start; }
}

/* ================================================================
   Drop 154, at her word ("I asked for shows to be shown not characters with
   maps ... just add before THE MAP a button for show names"): Shows | The
   map | Every character. Every show with its poster, its map's size and
   the faces on it; With a map / No map yet / Every show; Cards or List.
   ================================================================ */
.gc-show-chips { padding: 14px 21px 0; margin: 0; }
.gc-finder-bar > .gc-select.gc-country, .gc-finder-bar > .gc-select.gc-status { flex: 0 1 170px; min-width: 140px; }
.gc-show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; align-items: stretch; }
.gc-show { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 5px 28px color-mix(in srgb, var(--ink) 13%, transparent); }
.gc-show:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.gc-show-poster { display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 3; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--ink); border: 0; border-bottom: 1px solid var(--border); color: var(--gold); }
.gc-show-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-show-poster .gl-song-blank { font-size: var(--size-2xl); }
.gc-show.is-unmapped .gc-show-poster img { opacity: 0.55; filter: grayscale(0.35); }
.gc-show-words { flex: 1; min-width: 0; padding: 11px 12px 4px; }
.gc-show-words h3 { margin: 0 0 3px; font: 400 var(--size-sm)/1.3 var(--font-serif); color: var(--blossom); overflow-wrap: anywhere; }
.gc-show-words small { display: block; font-size: var(--size-2xs); line-height: 1.45; color: var(--mist); }
.gc-show-words small.gc-show-size { margin-top: 2px; color: var(--gold); }
.gc-show.is-unmapped small.gc-show-size { color: var(--mist); font-style: italic; }
.gc-show-faces { display: flex; align-items: center; margin-top: 9px; padding-left: 2px; }
.gc-show-faces .gc-avatar { width: 26px; height: 26px; margin-right: -6px; font-size: var(--size-3xs); border: 2px solid var(--surface); }
.gc-show-more { margin-left: 12px; font-size: var(--size-3xs); color: var(--mist); }
.gc-show-acts { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; padding: 8px 12px 12px; }
.gc-show-list { display: flex; flex-direction: column; gap: 8px; }
.gc-show-list .gc-show { flex-direction: row; align-items: center; gap: 14px; padding: 8px 12px; }
.gc-show-list .gc-show-poster { flex: none; width: 44px; border: 1px solid var(--border); border-radius: 4px; }
.gc-show-list .gc-show-poster .gl-song-blank { font-size: var(--size-md); }
.gc-show-list .gc-show-words { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px; column-gap: 16px; align-items: center; padding: 0; }
.gc-show-list .gc-show-words h3 { grid-column: 1; grid-row: 1; }
.gc-show-list .gc-show-words > small:not(.gc-show-size) { grid-column: 1; grid-row: 2; }
.gc-show-list .gc-show-words small.gc-show-size { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.gc-show-list .gc-show-faces { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.gc-show-list .gc-show-acts { flex: none; flex-wrap: nowrap; padding: 0; }
@media (max-width: 900px) {
  .gc-show-list .gc-show-words { grid-template-columns: minmax(0, 1fr); }
  .gc-show-list .gc-show-words small.gc-show-size, .gc-show-list .gc-show-faces { grid-column: 1; grid-row: auto; margin-top: 4px; }
}
@media (max-width: 640px) {
  .gc-show-chips { padding: 12px 14px 0; }
  .gc-finder-bar > .gc-select.gc-country, .gc-finder-bar > .gc-select.gc-status { flex: 1 1 130px; }
  .gc-show-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 10px; }
  .gc-show-list .gc-show { flex-wrap: wrap; }
  .gc-show-list .gc-show-words { flex: 1 1 160px; }
  .gc-show-list .gc-show-acts { flex: 1 1 100%; flex-wrap: wrap; }
}

/* ============================================================
   Drop 165: the Pavilion of Distant Journeys after her sample (Pavilion-of-Distant-Journeys.html) - the
   interactive atlas (flat or a globe, drag, zoom, reset, countries and cities), the directory and the
   continent chapters, the journeys and their pages, On the road, the Treasury of memories, and the
   journey desk in the Gardens' Dashboard. The palace's colours by name only. Prefixed pj-.
   ============================================================ */
.pj-room {
  --pj-sea: color-mix(in srgb, var(--jade) 34%, var(--ink));
  --pj-deep: color-mix(in srgb, var(--jade) 20%, var(--ink));
  --pj-land: color-mix(in srgb, var(--jade) 72%, var(--surface-3));
  --pj-edge: color-mix(in srgb, var(--jade) 45%, var(--ink));
  --pj-visited: color-mix(in srgb, var(--accent-jade) 60%, var(--blossom));
  --pj-wishlist: color-mix(in srgb, var(--gold) 76%, var(--mist));
  --pj-lived: color-mix(in srgb, var(--hall-bl) 60%, var(--mist));
  --pj-lit: color-mix(in srgb, var(--lantern) 52%, var(--blossom));
  --pj-raised: color-mix(in srgb, var(--surface) 92%, var(--blossom));
}
.pj-room .pj-ico, .modal .pj-ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; }
.pj-room .sg-button .pj-ico, .modal .sg-button .pj-ico { width: 15px; height: 15px; }
.pj-room .pj-toolbar { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.pj-room .pj-waiting { color: var(--mist); }
.pj-room .pj-panel-head { align-items: flex-end; }
.pj-room .pj-panel-head .sg-kicker { margin-bottom: 4px; }
.pj-room .pj-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.pj-room .pj-section-head .sg-kicker { margin-bottom: 4px; }
.pj-room .pj-section-head .sg-muted { margin-top: 6px; font-size: var(--size-sm); }
.pj-room .pj-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-room .pj-push, .modal .pj-push { flex: 1; }
.pj-room .pj-fine, .modal .pj-fine { color: var(--mist); font-size: var(--size-2xs); margin-top: 12px; }
.pj-room .pj-fine a, .modal .pj-fine a, .modal .pj-fine button { color: var(--accent-jade); font-size: inherit; }
.pj-room .pj-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 16px; }
.pj-room .pj-empty h3 { font: var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); }
.pj-room .pj-empty .pj-empty-mark { width: 34px; height: 34px; color: var(--gold); }
.pj-room .pj-empty .sg-button { margin-top: 6px; }
.pj-room .pj-progress { height: 5px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--mist) 16%, transparent); overflow: hidden; }
.pj-room .pj-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--progress-fill); }
.pj-room .pj-stats { margin-bottom: 16px; }
.pj-room .pj-stat { flex-direction: row; align-items: flex-start; gap: 12px; color: inherit; text-decoration: none; }
.pj-room .pj-stat > .pj-ico { width: 20px; height: 20px; color: var(--gold); margin-top: 6px; }
.pj-room .pj-stat > div { display: flex; flex-direction: column; min-width: 0; }
.pj-room a.pj-stat:hover { border-color: var(--accent); }
.pj-room .pj-legend { display: flex; align-items: center; gap: 18px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pj-room .pj-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.pj-room .pj-dot.is-visited { background: var(--pj-visited); }
.pj-room .pj-dot.is-wishlist { background: var(--pj-wishlist); }
.pj-room .pj-dot.is-lived { background: var(--pj-lived); }
.pj-room .pj-segments { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--ink); }
.pj-room .pj-segments button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 5px; background: transparent;
  color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-segments button.is-active { background: var(--surface-2); color: var(--blossom); }
.pj-room .pj-segments button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pj-room .pj-filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pj-room .pj-filter-row .pj-search { flex: 1 1 260px; }
.pj-room .pj-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; border: 1px solid var(--border); border-radius: 7px; background: var(--ink); }
.pj-room .pj-search .pj-ico { color: var(--mist); }
.pj-room .pj-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--blossom); font: inherit; outline: none; min-height: 38px; }
.pj-room .pj-chips { margin-bottom: 14px; }
.pj-room .pj-continent-filter[hidden] { display: none; }

/* five stars, halves allowed */
.pj-room .pj-stars { display: flex; gap: 6px; margin-top: 8px; }
.pj-room .pj-star, .pj-room .pj-stars-line .pj-star { position: relative; display: inline-block; font-size: 19px; line-height: 1; color: color-mix(in srgb, var(--mist) 40%, transparent); }
.pj-room .pj-star.is-full { color: var(--gold); }
.pj-room .pj-star.is-half { background: linear-gradient(90deg, var(--gold) 50%, color-mix(in srgb, var(--mist) 40%, transparent) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pj-room .pj-star-half { position: absolute; top: -3px; bottom: -3px; width: 50%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pj-room .pj-star-half.is-left { left: 0; }
.pj-room .pj-star-half.is-right { right: 0; }
.pj-room .pj-star-half:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pj-room .pj-stars-line .pj-star { font-size: var(--size-sm); }

/* the dialogs */
.modal.pj-modal { width: min(36rem, 100%); }
.modal.pj-modal.is-wide { width: min(46rem, 100%); }
.modal.pj-modal .modal-head { position: relative; padding-right: 3.2rem; }
.modal.pj-modal .modal-sub { margin-top: 4px; }
.modal.pj-modal .pj-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--mist); cursor: pointer; }
.modal.pj-modal .pj-close:hover { color: var(--blossom); background: var(--surface-2); }
.modal.pj-modal .pj-close .pj-ico { width: 18px; height: 18px; }
.modal .pj-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.modal .pj-form-grid > .is-wide, .modal .pj-upload.is-wide { grid-column: 1 / -1; }
.modal .pj-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.modal .pj-field-label { font-size: var(--size-xs); color: var(--mist); }
.modal .pj-field input, .modal .pj-field textarea, .modal .pj-field select { width: 100%; }
.modal .pj-check-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--size-sm); color: var(--blossom); align-self: end; min-height: 40px; }
.modal .pj-form-error { margin-top: 12px; color: var(--accent-lacquer); font-size: var(--size-sm); }
.modal .pj-actions { align-items: center; }
.modal .pj-danger-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--accent-lacquer); font-size: var(--size-sm); cursor: pointer; padding: 6px 0; }
.modal .pj-upload { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.modal .pj-upload-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.modal .pj-upload-target { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--gold) 60%, var(--border));
  border-radius: 9px; background: var(--ink); cursor: pointer; }
.modal .pj-upload-target:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.modal .pj-upload-target .pj-ico { width: 22px; height: 22px; color: var(--gold); }
.modal .pj-upload-target > span { display: flex; flex-direction: column; gap: 2px; }
.modal .pj-upload-main { color: var(--gold); font-size: var(--size-sm); }
.modal .pj-upload-target small { color: var(--mist); font-size: var(--size-3xs); }
.modal .pj-upload-target input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.modal .pj-upload-clear { align-self: flex-start; }
.modal .pj-flag-large { display: block; font-size: 40px; line-height: 1; margin-bottom: 8px; }
.modal.pj-country-sheet h3 { font: var(--size-2xl)/1.15 var(--font-serif); color: var(--blossom); }
.modal .pj-mark-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.modal .pj-mark-choices button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--ink); color: var(--mist); font-size: var(--size-xs); cursor: pointer; }
.modal .pj-mark-choices button .pj-ico { width: 21px; height: 21px; }
.modal .pj-mark-choices button.is-active { border-color: var(--gold); color: var(--blossom); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.modal .pj-mark-choices button.is-active .pj-ico { color: var(--gold); }
.pj-room .pj-facts, .modal .pj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 18px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-facts b, .modal .pj-facts b { display: block; margin-top: 4px; color: var(--blossom); font-weight: 400; font-size: var(--size-sm); }
.pj-room .pj-facts > span:last-child, .modal .pj-facts > span:last-child { grid-column: 1 / -1; }
.modal .pj-country-kept { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid var(--border); }
.modal .pj-kept-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent;
  color: var(--blossom); text-decoration: none; font-size: var(--size-sm); text-align: left; cursor: pointer; }
.modal .pj-kept-row small { margin-left: auto; color: var(--mist); font-size: var(--size-2xs); }
.modal .pj-kept-row .pj-ico { color: var(--gold); }
.modal .pj-wish-fields { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.modal .pj-wish-fields > .sg-kicker { color: var(--gold); font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.modal .pj-wish-fields[hidden] { display: none; }
.modal .pj-left { margin-top: 10px; }
.modal .pj-picture-large { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; }
.modal .sg-button { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 13px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--blossom); font-size: var(--size-xs); cursor: pointer; }
.modal .sg-quiet { border: 0; background: transparent; color: var(--accent-jade); padding: 0; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.modal .sg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.modal .sg-chip { padding: 5px 11px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--mist); font-size: var(--size-xs); cursor: pointer; }

/* the atlas */
.pj-room .pj-canvas { position: relative; overflow: hidden; min-height: 220px; border-radius: 8px; background: var(--pj-deep); }
.pj-room .pj-map { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.pj-room .pj-canvas.is-dragging .pj-map { cursor: grabbing; }
.pj-room .pj-ocean { fill: var(--pj-sea); stroke: var(--pj-edge); stroke-width: .5px; }
.pj-room .pj-graticule { fill: none; stroke: var(--mist); stroke-width: .35px; opacity: .2; pointer-events: none; }
.pj-room .pj-country { fill: var(--pj-land); stroke: var(--pj-edge); stroke-width: .5px; cursor: pointer; transition: fill .15s ease; outline: none; }
.pj-room .pj-country.is-visited { fill: var(--pj-visited); }
.pj-room .pj-country.is-wishlist { fill: var(--pj-wishlist); }
.pj-room .pj-country.is-lived { fill: var(--pj-lived); }
.pj-room .pj-country:hover, .pj-room .pj-country:focus-visible { fill: var(--pj-lit); stroke: var(--blossom); stroke-width: 1px; }
.pj-room .pj-city-pin { cursor: pointer; outline: none; }
.pj-room .pj-city-pin circle { fill: var(--lantern); stroke: var(--ink); stroke-width: 3px; }
.pj-room .pj-city-pin.is-visited circle { fill: var(--pj-visited); }
.pj-room .pj-city-pin.is-lived circle { fill: var(--pj-lived); }
.pj-room .pj-city-pin text { fill: var(--blossom); paint-order: stroke; stroke: var(--ink); stroke-width: 3px; font: 13px var(--font-sans); pointer-events: none; }
.pj-room .pj-city-pin:hover circle, .pj-room .pj-city-pin:focus-visible circle { fill: var(--blossom); }
.pj-room .pj-focus-dot { fill: var(--gold); stroke: var(--ink); stroke-width: 2px; pointer-events: none; }
.pj-room .pj-compass { position: absolute; top: 12px; left: 14px; display: grid; justify-items: center; gap: 3px; color: var(--gold); font-size: 9px; pointer-events: none; }
.pj-room .pj-compass .pj-ico { width: 24px; height: 24px; }
.pj-room .pj-map-controls { position: absolute; right: 12px; bottom: 14px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 82%, transparent); overflow: hidden; }
.pj-room .pj-map-controls .pj-icon-button { width: 34px; height: 34px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--blossom); }
.pj-room .pj-map-controls .pj-icon-button:last-child { border-bottom: 0; }
.pj-room .pj-map-hint { position: absolute; left: 16px; bottom: 14px; color: var(--mist); font: italic var(--size-xs) var(--font-serif); pointer-events: none;
  max-width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-room .pj-map-source { position: absolute; top: 12px; right: 14px; color: var(--mist); font-size: 9px; text-decoration: none; }
.pj-room .pj-map-loading { display: grid; place-content: center; justify-items: center; gap: 10px; height: 280px; color: var(--mist); font-size: var(--size-sm); }
.pj-room .pj-map-loading .pj-ico { width: 34px; height: 34px; color: var(--gold); }
.pj-room .pj-map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border); }
.pj-room .pj-atlas-panel { padding: 16px; }
.pj-room .pj-overview-map { padding: 6px; }
.pj-room .pj-overview-map .pj-canvas { min-height: 200px; }
.pj-room .pj-desk-atlas .pj-legend { padding-top: 14px; }

/* columns, the directory, the continents */
.pj-room .pj-two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pj-room .pj-two-col.is-directory { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.pj-room .pj-two-col.is-desk-map { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.pj-room .pj-stack { display: flex; flex-direction: column; min-width: 0; }
.pj-room .pj-country-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.pj-room .pj-country-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; text-align: left; font-size: var(--size-sm); }
.pj-room .pj-country-row:hover { color: var(--gold); }
.pj-room .pj-country-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-room .pj-flag { font-size: 22px; line-height: 1; width: 28px; flex: none; }
.pj-room .pj-country-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pj-room .pj-country-name small { display: block; margin-top: 2px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-chev { color: var(--mist); font-size: var(--size-lg); }
.pj-room .pj-row-pin { width: 20px; height: 20px; color: var(--lantern); }
.pj-room .pj-row-pin.is-visited { color: var(--pj-visited); }
.pj-room .pj-row-pin.is-lived { color: var(--pj-lived); }
.pj-room .pj-continents { display: grid; gap: 18px; }
.pj-room .pj-continent > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: var(--size-xs); }
.pj-room .pj-continent small { color: var(--mist); font-size: var(--size-2xs); }

/* journeys as cards */
.pj-room .pj-trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-bottom: 16px; }
.pj-room .pj-trip-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);
  color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.pj-room .pj-trip-card:hover, .pj-room .pj-trip-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.pj-room .pj-photo { position: relative; aspect-ratio: 16 / 10; background: var(--pj-deep); overflow: hidden; }
.pj-room .pj-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-room .pj-photo.is-bare { display: grid; place-items: center; }
.pj-room .pj-photo-seal { font-size: 46px; color: color-mix(in srgb, var(--gold) 70%, transparent); }
.pj-room .pj-photo .pj-pill { position: absolute; left: 12px; top: 12px; }
.pj-room .pj-photo .pj-tag { position: absolute; right: 12px; top: 12px; padding: 2px 6px; border-radius: 4px; background: var(--veil); color: var(--mist); font-size: 9px; letter-spacing: .12em; }
.pj-room .pj-pill { backdrop-filter: blur(4px); }
.pj-room .pj-photo .sg-badge { background: color-mix(in srgb, var(--ink) 74%, transparent); }
.pj-room .pj-trip-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.pj-room .pj-trip-body small { color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-trip-body h3 { font: var(--size-lg)/1.25 var(--font-serif); color: var(--blossom); }
.pj-room .pj-trip-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--mist); font-size: var(--size-xs); }
.pj-room .pj-trip-line span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pj-room .pj-arrow { color: var(--gold); margin-left: auto; }

/* a journey's own page */
.pj-room .pj-crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: var(--size-xs); color: var(--mist); }
.pj-room .pj-crumb .sg-quiet { display: inline-flex; align-items: center; gap: 6px; }
.pj-room .pj-crumb-sep { color: var(--mist); }
.pj-room .pj-hero { position: relative; min-height: 235px; border: 1px solid var(--border); border-radius: 10px 10px 0 0; overflow: hidden; background: var(--pj-deep); }
.pj-room .pj-hero.is-road { border-radius: 10px; min-height: 190px; margin-bottom: 8px; }
.pj-room .pj-hero-photo { position: absolute; inset: 0; }
.pj-room .pj-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.pj-room .pj-hero-photo.is-bare { display: none; }
.pj-room .pj-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent), color-mix(in srgb, var(--ink) 70%, transparent) 45%, color-mix(in srgb, var(--ink) 18%, transparent)),
              linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 70%, transparent)); }
.pj-room .pj-hero-words { position: relative; z-index: 1; padding: 32px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pj-room .pj-hero-words h1 { font: var(--size-3xl)/1.1 var(--font-serif); color: var(--blossom); }
.pj-room .pj-hero-words h2 { font: var(--size-2xl)/1.15 var(--font-serif); color: var(--blossom); }
.pj-room .pj-hero-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: color-mix(in srgb, var(--blossom) 78%, var(--mist)); font-size: var(--size-xs); }
.pj-room .pj-dotsep { color: var(--mist); }
.pj-room .pj-seal { position: absolute; z-index: 1; top: 44px; right: 36px; display: grid; place-items: center; width: 80px; height: 84px;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold); font-size: 44px; background: color-mix(in srgb, var(--ink) 40%, transparent); }
.pj-room .pj-metrics { display: flex; align-items: center; flex-wrap: wrap; padding: 18px 12px; margin-bottom: 22px; border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 10px 10px; background: var(--surface); }
.pj-room .pj-metrics > div { padding: 0 22px; border-right: 1px solid var(--border); }
.pj-room .pj-metrics b { display: block; font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--blossom); }
.pj-room .pj-metrics > div > span { display: block; margin-top: 4px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-metrics .pj-rating { margin-left: auto; border-right: 0; }
.pj-room .pj-rating small { color: var(--mist); font-size: 9px; letter-spacing: .14em; }
.pj-room .pj-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 22px; scrollbar-width: thin; }
.pj-room .pj-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 13px 13px; color: var(--mist); text-decoration: none; font-size: var(--size-xs);
  border-bottom: 2px solid transparent; }
.pj-room .pj-tab:hover { color: var(--blossom); }
.pj-room .pj-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); background: var(--surface-2); }
.pj-room .pj-tab small { padding: 0 5px; border-radius: 3px; background: var(--ink); font-size: 9px; color: var(--mist); }
.pj-room .pj-note { font: var(--size-md)/1.8 var(--font-serif); color: color-mix(in srgb, var(--blossom) 86%, var(--mist)); white-space: pre-wrap; }
.pj-room .pj-readiness { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pj-room .pj-readiness > a { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.pj-room .pj-readiness > a > span { display: flex; justify-content: space-between; font-size: var(--size-xs); }
.pj-room .pj-readiness b { color: var(--gold); font-weight: 400; }
.pj-room .pj-readiness small { color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-route-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent;
  text-align: left; color: inherit; }
.pj-room .pj-route-row:last-child { border-bottom: 0; }
.pj-room .pj-route-row > .pj-ico { color: var(--gold); width: 19px; height: 19px; }
.pj-room .pj-route-row > span { flex: 1; min-width: 0; }
.pj-room .pj-route-row b { font-weight: 400; font-size: var(--size-sm); }
.pj-room .pj-route-row small { display: block; margin-top: 4px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-route-row.is-offer { opacity: .86; }
.pj-room .pj-strong-link { color: var(--blossom); text-decoration: none; font-size: var(--size-sm); }
.pj-room .pj-strong-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pj-room .pj-out { display: inline-flex; align-items: center; gap: 6px; }
.pj-room .pj-icon-button, .modal .pj-icon-button { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--mist); cursor: pointer; }
.pj-room .pj-icon-button:hover, .pj-room .pj-icon-button:focus-visible { color: var(--blossom); background: var(--surface-2); }
.pj-room .pj-icon-button.is-checked { color: var(--ink); background: var(--pj-visited); }
.pj-room .pj-timeline { display: grid; }
.pj-room .pj-plan-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pj-room .pj-plan-row:last-child { border-bottom: 0; }
.pj-room .pj-plan-time { flex: none; width: 64px; padding-top: 7px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-timeline-icon { flex: none; display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--gold); }
.pj-room .pj-plan-detail { flex: 1; min-width: 0; }
.pj-room .pj-plan-title { padding: 0; border: 0; background: transparent; text-align: left; }
.pj-room .pj-plan-title h3 { font-size: var(--size-sm); font-weight: 500; color: var(--blossom); }
.pj-room .pj-plan-detail p { color: var(--mist); font-size: var(--size-xs); margin-top: 3px; }
.pj-room .pj-plan-detail small { display: block; color: var(--mist); font-size: var(--size-2xs); margin-top: 3px; }
.pj-room .pj-plan-row.is-done h3 { opacity: .55; text-decoration: line-through; }
.pj-room .pj-list-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 8px; }
.pj-room .pj-add-form { display: flex; gap: 8px; flex: 1 1 420px; flex-wrap: wrap; }
.pj-room .pj-add-form input { flex: 1 1 220px; min-height: 38px; }
.pj-room .pj-add-form select { flex: 0 1 200px; }
.pj-room .pj-check-label { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); font-size: var(--size-xs); }
.pj-room .pj-check-groups section { margin-top: 18px; }
.pj-room .pj-check-groups h3 { display: flex; justify-content: space-between; color: var(--gold); font: var(--size-2xs) var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.pj-room .pj-check-groups h3 small { color: var(--mist); letter-spacing: 0; }
.pj-room .pj-check-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.pj-room .pj-check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-jade); flex: none; }
.pj-room .pj-item-title { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; font-size: var(--size-sm); }
.pj-room .pj-item-title small { color: var(--mist); }
.pj-room .pj-check-row.is-done .pj-item-title { opacity: .55; text-decoration: line-through; }
.pj-room .pj-place-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.pj-room .pj-place-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2);
  font-size: var(--size-xs); }
.pj-room .pj-place-card > .pj-ico { color: var(--gold); }
.pj-room .pj-place-name { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.pj-room .pj-place-card .pj-icon-button { color: var(--gold); }
.pj-room .pj-tab-page > .sg-button { margin-top: 4px; }
.pj-room .pj-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 10px 0; }
.pj-room .pj-donut { display: grid; place-items: center; width: 155px; height: 155px; flex: none; border-radius: 50%; background: var(--surface-3); }
.pj-room .pj-donut > div { display: grid; place-content: center; text-align: center; width: 119px; height: 119px; border-radius: 50%; background: var(--surface); }
.pj-room .pj-donut strong { font: 400 var(--size-2xl) var(--font-serif); }
.pj-room .pj-donut span { color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-donut-key { flex: 1 1 180px; display: grid; gap: 9px; font-size: var(--size-xs); }
.pj-room .pj-donut-key > div { display: flex; align-items: center; gap: 9px; }
.pj-room .pj-donut-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.pj-room .pj-donut-key b { margin-left: auto; font-weight: 400; color: var(--mist); }
.pj-room .pj-allowance { margin-top: 14px; }
.pj-room .pj-allowance > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: var(--size-xs); }
.pj-room .pj-allowance b { font-weight: 400; }
.pj-room .pj-allowance small { color: var(--mist); }
.pj-room .pj-expenses { display: grid; }
.pj-room .pj-expense-head, .pj-room .pj-expense-row { display: grid; grid-template-columns: 2fr 1fr .8fr .8fr; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.pj-room .pj-expense-head { color: var(--mist); font-size: var(--size-2xs); letter-spacing: .1em; text-transform: uppercase; padding-top: 0; }
.pj-room .pj-expense-row { font-size: var(--size-xs); }
.pj-room .pj-expense-row > button { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: transparent; text-align: left; }
.pj-room .pj-expense-row b { display: block; font-weight: 400; font-size: var(--size-sm); }
.pj-room .pj-expense-row small { display: block; margin-top: 4px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-expense-row > span { color: var(--mist); }
.pj-room .pj-amount strong { font-weight: 500; }
.pj-room .pj-outfit-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin-bottom: 24px; }
.pj-room .pj-outfit-days button { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-align: left; }
.pj-room .pj-outfit-days button > .pj-ico { color: var(--gold); }
.pj-room .pj-outfit-days button > span:nth-child(2) { flex: 1; font-size: var(--size-sm); }
.pj-room .pj-outfit-days small { display: block; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: start; }
.pj-room .pj-record-card { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.pj-room .pj-record-photo { display: block; width: 100%; padding: 0; border: 0; background: var(--pj-deep); aspect-ratio: 4 / 3; overflow: hidden; }
.pj-room .pj-record-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-room .pj-record-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.pj-room .pj-record-meta { display: flex; align-items: center; gap: 8px; color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-record-meta > .pj-ico { color: var(--gold); }
.pj-room .pj-record-meta .pj-icon-button { margin-left: auto; }
.pj-room .pj-record-title { padding: 0; border: 0; background: transparent; text-align: left; }
.pj-room .pj-record-title h3 { font: var(--size-lg)/1.25 var(--font-serif); color: var(--blossom); }
.pj-room .pj-reference { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--ink); }
.pj-room .pj-reference code { font: var(--size-xs) var(--font-mono); color: var(--gold); }
.pj-room .pj-static-chips .sg-chip { cursor: default; }
.pj-room .pj-record-notes { color: color-mix(in srgb, var(--blossom) 82%, var(--mist)); font-size: var(--size-sm); white-space: pre-wrap; }
.pj-room .pj-record-links { display: flex; gap: 14px; flex-wrap: wrap; }
.pj-room .pj-record-links a { color: var(--accent-jade); font-size: var(--size-xs); }
.pj-room .pj-treasure > .pj-treasure-journey { display: block; margin-bottom: 6px; text-decoration: none; }

/* On the road */
.pj-room .pj-day-picker { display: flex; gap: 12px; margin: 20px 0; overflow-x: auto; padding-bottom: 4px; }
.pj-room .pj-day-picker > button { display: flex; flex-direction: column; align-items: flex-start; flex: none; min-width: 105px; padding: 12px 13px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--surface); text-align: left; }
.pj-room .pj-day-picker small { color: var(--mist); font-size: 9px; letter-spacing: .12em; }
.pj-room .pj-day-picker strong { display: block; margin: 4px 0; font: 400 var(--size-lg) var(--font-serif); }
.pj-room .pj-day-picker span { color: var(--mist); font-size: var(--size-2xs); }
.pj-room .pj-day-picker > button.is-active { border-color: var(--gold); background: var(--surface-2); }
.pj-room .pj-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pj-room .pj-quick-grid > a { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 7px; color: var(--gold);
  text-decoration: none; font-size: var(--size-xs); }
.pj-room .pj-quick-grid > a:hover { border-color: var(--gold); }
.pj-room .pj-also { margin: 6px 0 0; }

/* the journey desk, in the Gardens' Dashboard */
.pj-room .pj-current-strip { display: flex; align-items: center; gap: 18px; width: 100%; margin-bottom: 16px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--accent-jade) 50%, var(--border));
  border-radius: 9px; background: var(--surface-2); color: inherit; text-decoration: none; flex-wrap: wrap; }
.pj-room .pj-current-strip:hover { border-color: var(--accent-jade); }
.pj-room .pj-current-strip small { display: block; color: var(--accent-jade); font-size: 9px; letter-spacing: .14em; }
.pj-room .pj-current-strip strong { display: block; margin-top: 3px; font: 400 var(--size-lg) var(--font-serif); }
.pj-room .pj-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-jade) 26%, transparent); flex: none; }
.pj-room .pj-strip-date { color: var(--mist); font-size: var(--size-xs); }
.pj-room .pj-strip-go { margin-left: auto; color: var(--gold); font-size: var(--size-xs); }
.pj-room .pj-quote { display: grid; justify-items: start; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.pj-room .pj-quote .pj-ico { width: 24px; height: 24px; color: var(--gold); }
.pj-room .pj-quote p { font: var(--size-xl)/1.3 var(--font-serif); color: var(--blossom); }
.pj-room .pj-journey-line { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: inherit; text-decoration: none; }
.pj-room .pj-journey-line:hover { border-color: var(--accent); }
.pj-room .pj-line-photo { position: relative; width: 64px; height: 48px; flex: none; border-radius: 6px; overflow: hidden; background: var(--pj-deep); display: grid; place-items: center; }
.pj-room .pj-line-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-room .pj-line-photo .pj-photo-seal { font-size: 24px; }
.pj-room .pj-line-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-room .pj-line-words strong { font-weight: 500; overflow-wrap: anywhere; }
.pj-room .pj-line-words small { color: var(--mist); font-size: var(--size-2xs); }

@media (max-width: 60rem) {
  .pj-room .pj-two-col, .pj-room .pj-two-col.is-directory, .pj-room .pj-two-col.is-desk-map { grid-template-columns: minmax(0, 1fr); }
  .pj-room .pj-stats.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .pj-room .pj-country-grid, .pj-room .pj-readiness, .modal .pj-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pj-room .pj-hero-words { padding: 24px 20px; }
  .pj-room .pj-hero-words h1 { font-size: var(--size-2xl); }
  .pj-room .pj-seal { display: none; }
  .pj-room .pj-metrics > div { padding: 6px 12px; }
  .pj-room .pj-metrics .pj-rating { margin-left: 0; width: 100%; padding-top: 12px; }
  .pj-room .pj-expense-head { display: none; }
  .pj-room .pj-expense-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pj-room .pj-expense-row > span { display: none; }
  .pj-room .pj-map-toolbar .pj-legend { order: 3; width: 100%; justify-content: center; }
  .pj-room .pj-map-hint { font-size: var(--size-3xs); left: 10px; bottom: 8px; }
  .pj-room .pj-compass { top: 8px; left: 8px; }
  .pj-room .pj-map-controls { right: 8px; bottom: 8px; }
  .pj-room .pj-map-controls .pj-icon-button { width: 30px; height: 30px; min-height: 30px; min-width: 30px; }
  .pj-room .pj-canvas { min-height: 0; }
  .modal .pj-mark-choices button { font-size: var(--size-3xs); padding: 12px 6px; }
  .pj-room .pj-plan-time { width: 46px; }
}

/* Drop 166: the Concert Hall logs every kind of event - a button for each kind, the kinds to choose from, an event's days */
.sg-room .sg-log-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.sg-room .sg-log-bar > .sg-kicker { margin-right: 4px; }
.sg-room .sg-kind-chips { margin: 0 0 14px; }
.sg-room .sg-event-days { margin-top: 2px; }

/* Drop 167: an event's journey, on the event's own page */
.sg-room .sg-journey-line { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 10px; font-size: var(--size-xs); }
.sg-room .sg-journey-link { font-weight: 500; }

/* Drop 168: the Imperial Treasury wears the main banner and the full width. Its rooms give their name and line to the
   banner (shell.css); Memorials keeps its Save as PDF button, to the right, and its heading on paper. */
.view[data-main] > .page-head.memorial-head { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }
.view[data-main] > .page-head.memorial-head > div { display: none; }
@media (min-width: 40.01rem) {   /* beside the range chips, on their row */
  .view[data-main] > .page-head.memorial-head { position: relative; height: 0; margin: 0; }
  .view[data-main] > .page-head.memorial-head > .ghost { position: absolute; top: 0; right: 0; }
}
@media print {
  .view[data-main] > .page-head.memorial-head { justify-content: space-between; height: auto; margin-bottom: var(--space-3); }
  .view[data-main] > .page-head.memorial-head > div { display: block; }
}
/* the envelopes stand as cards again: the Precinct's letting-go cards (.ledger-card, above) had laid them out in a row */
.ledger-envelopes > .ledger-card { display: block; }
/* the Overview and Memorials fit a phone: their single column may narrow, and what is inside wraps rather than pushing out */
.view .over-top > *, .view .over-bottom > *, .view .over-side > *, .view .memorial-grid > *, .view .memorial-side > * { min-width: 0; }
.view .memorial-payees { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 58rem) {
  .view .over-top, .view .over-bottom, .view .memorial-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Drop 172: the Allied Courts' missing parts - the Monthly Ledger and Rules & Guides (the Celestial Network), a duty
   handed off (the Mod Desk), the month in ink and the reader replies (the Pavilion of Flowing Ink). Tokens only. */
.sv-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-ledger-months { flex-wrap: wrap; margin: 4px 0 16px; }
.sv-ledger-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.sv-ledger-figure { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.sv-ledger-figure strong { font: var(--size-xl)/1.1 var(--font-serif); color: var(--gold); }
.sv-ledger-figure span { font-size: var(--size-2xs); color: var(--mist); letter-spacing: 0.04em; }
.sv-ledger-form { display: grid; gap: 12px; margin: 6px 0 12px; }
.sv-ledger-field { display: grid; gap: 6px; }
.sv-ledger-field textarea { width: 100%; min-height: 4.5em; resize: vertical; }
.sv-missed > strong { min-width: 4.5em; color: var(--gold); font-weight: 500; }
.sv-missed small { display: block; margin-top: 2px; }
.sv-guide { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); }
.sv-guide:first-of-type { border-top: 0; }
.sv-guide.is-retired { opacity: 0.6; }
.sv-guide-body { margin: 6px 0 4px; white-space: pre-line; }
.sv-guide .sv-chips { flex-wrap: nowrap; flex-shrink: 0; }
.ic-handoff { display: flex; gap: 8px; align-items: center; margin: -2px 0 8px 30px; }
.ic-handoff .ic-small { padding: 2px 10px; font-size: var(--size-2xs); }
.ink-month-close, .ink-replies { margin-bottom: 18px; }
.ink-replies { margin-top: 22px; }
.ink-month-close p { margin: 6px 0; }
.ink-replies .calendar-head { align-items: flex-start; }
@media (max-width: 40rem) {
  .sv-four, .sv-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-guide { flex-direction: column; }
  .ic-handoff { margin-left: 0; flex-wrap: wrap; }
}

/* Drop 174: the Precinct's missing parts - a reading month closed in the Pavilion Report (the year's twelve months beside
   it), and a wish decided on the Wishlist. Tokens only. */
#plt-app .plt-month, #plt-app .plt-year-months { margin-bottom: 16px; display: grid; gap: 14px; }
#plt-app .plt-month.is-closed { border-color: color-mix(in srgb, var(--rp-gold) 45%, var(--rp-line)); }
#plt-app .plt-month-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#plt-app .plt-month-glyph { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--rp-gold) 55%, transparent);
  font: normal var(--size-md)/1 var(--font-cjk); color: var(--rp-gold); background: color-mix(in srgb, var(--rp-gold) 8%, transparent); }
#plt-app .plt-month-name { flex: 1; min-width: 0; }
#plt-app .plt-month-name .plt-rep-kicker { margin-bottom: 4px !important; }
#plt-app .plt-month-count { font-size: var(--size-2xs); color: var(--rp-muted); }
#plt-app .plt-month-lede, #plt-app .plt-month-when { font-size: var(--size-sm); color: var(--rp-muted); }
#plt-app .plt-month-figures, #plt-modal .plt-month-figures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 4px 0; }
#plt-app .plt-month-figures > div, #plt-modal .plt-month-figures > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--plt-line); border-radius: 6px; min-width: 0; }
#plt-app .plt-month-figures b, #plt-modal .plt-month-figures b { font: 400 var(--size-xl)/1.2 var(--font-serif); color: var(--gold); }
#plt-app .plt-month-figures small, #plt-modal .plt-month-figures small { font-size: var(--size-3xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--plt-muted); }
#plt-app .plt-month-titles, #plt-modal .plt-month-titles { margin: 6px 0 0 !important; font: italic var(--size-sm)/1.5 var(--font-serif); color: var(--plt-muted); }
#plt-app .plt-month-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
#plt-app .plt-month-words small { display: block; margin-bottom: 4px; font-size: var(--size-3xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rp-gold); }
#plt-app .plt-month-words p { font: var(--size-sm)/1.6 var(--font-serif); color: var(--rp-ink); white-space: pre-line; }
#plt-app .plt-month-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#plt-app .plt-year-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
#plt-app .plt-year-month { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--rp-line); border-radius: 6px; background: none; color: var(--rp-muted); font-size: var(--size-2xs); }
#plt-app .plt-year-month i { font-style: normal; min-height: 1.2em; color: var(--rp-muted); }
#plt-app .plt-year-month.is-closed { border-color: color-mix(in srgb, var(--rp-gold) 60%, transparent); color: var(--rp-ink); background: color-mix(in srgb, var(--rp-gold) 9%, transparent); }
#plt-app .plt-year-month.is-closed i { color: var(--rp-gold); }
#plt-app .plt-year-month:disabled { opacity: 0.35; cursor: default; }
/* the Wishlist */
#plt-app .plt-wish-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--plt-line); border-radius: 8px; }
#plt-app .plt-wish-strip p { flex: 1; margin: 0; font-size: var(--size-sm); color: var(--plt-muted); }
#plt-app .plt-wish-strip b { color: var(--gold); font-weight: 600; }
#plt-app .plt-wish-glyph { font: normal var(--size-md)/1 var(--font-cjk); color: var(--gold); }
#plt-app .plt-wish-decided { margin: 6px 0 0; font-size: var(--size-2xs); color: var(--plt-muted); }
#plt-app .plt-wish-decided span { color: var(--gold); font-family: var(--font-cjk); }
.wl-room .wl-badge[data-tone="borrow"] { background: color-mix(in srgb, var(--accent-jade) 14%, var(--surface)); color: var(--accent-jade); }
#plt-modal .plt-wish-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
#plt-modal .plt-wish-choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--plt-line); border-radius: 8px; cursor: pointer; }
#plt-modal .plt-wish-choice input { position: absolute; opacity: 0; pointer-events: none; }
#plt-modal .plt-wish-choice:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
#plt-modal .plt-wish-choice:has(input:focus-visible) { outline: 2px solid var(--plt-jade); outline-offset: 2px; }
#plt-modal .plt-wish-mark { flex: none; font: normal var(--size-lg)/1 var(--font-cjk); color: var(--gold); }
#plt-modal .plt-wish-words { display: grid; gap: 2px; }
#plt-modal .plt-wish-words strong { color: var(--plt-ink); font-weight: 600; }
#plt-modal .plt-wish-words small { font-size: var(--size-2xs); color: var(--plt-muted); line-height: 1.45; }
#plt-modal .plt-field { display: grid; gap: 6px; margin: 10px 0; font-size: var(--size-xs); color: var(--plt-muted); }
#plt-modal .plt-field input, #plt-modal .plt-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--plt-line); border-radius: 8px; background: var(--plt-field); color: var(--plt-ink); font: inherit; resize: vertical; }
#plt-modal .plt-wish-past { margin: 10px 0; padding-top: 10px; border-top: 1px solid var(--plt-line); }
#plt-modal .plt-wish-past p { margin: 4px 0; font-size: var(--size-2xs); color: var(--plt-muted); }
@media (max-width: 40rem) {
  #plt-app .plt-month-figures, #plt-modal .plt-month-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #plt-app .plt-year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #plt-modal .plt-wish-choices { grid-template-columns: 1fr; }
}

/* Drop 175: the Precinct's month panels outside the Pavilion Report (the Reading Ledger, the Reading Calendar) wear the report's
   own colours; a character map and a custom list marked complete. Tokens only. */
#plt-app .plt-month-host { --rp-panel: var(--surface); --rp-line: var(--border); --rp-gold: var(--gold); --rp-sage: var(--accent-jade); --rp-ink: var(--blossom);
  --rp-muted: var(--mist); --rp-faint: var(--mist); margin: 0 0 16px; color: var(--rp-ink); }
#plt-app .plt-month-host .plt-rep-card { background: var(--rp-panel); border: 1px solid var(--rp-line); border-radius: 8px; padding: 20px 22px; }
#plt-app .plt-month-host h2 { margin: 0; font: 400 var(--size-xl)/1.15 var(--font-serif); letter-spacing: -0.02em; color: var(--rp-ink); }
#plt-app .plt-month-host p { margin: 0; }
#plt-app .plt-month-host .plt-month { margin-bottom: 0; }
#plt-app .plt-map-done { border-color: var(--gold); }
#plt-app .plt-list-done, #plt-modal .plt-list-done { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 4px; font-size: var(--size-2xs);
  color: var(--accent-jade); background: color-mix(in srgb, var(--accent-jade) 14%, var(--surface)); vertical-align: middle; }
#plt-modal .plt-list-done { margin: 0 8px 0 0; }
#plt-modal .plt-list-need { align-self: center; margin-right: auto; }

/* Drop 176: the Rear Palace Report closed - its badge above the reflection's actions. Tokens only. */
.rv-closed { margin: 10px 0 6px; }

/* Drop 186: a month's Hall Report closed (report.js), a custom scroll list marked complete (lists.js) */
.gl-close-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.gl-close-row .gl-fine { margin: 0; }
.list-card .list-done { color: var(--gold); }
.list-head .list-done-mark { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 2px 8px; border-radius: 4px;
  font-size: var(--size-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); vertical-align: middle; }

/* Drop 187: a work new since the pull before; the Who panel's refresh. (People Fill the gaps put in Who wear .was-filled.) Tokens only. */
.court-work-new { padding: 1px 6px; border-radius: 4px; font-size: var(--size-3xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-jade); border: 1px solid color-mix(in srgb, var(--accent-jade) 50%, transparent); }
.court-work.is-new .court-work-title { color: var(--blossom); }
.scroll-who .over-panel-head { margin-bottom: 6px; }

/* Drop 188: the credit TheTVDB's free licence asks for, in Services and on a draft from it. Tokens only. */
.tvdb-credit { margin: 6px 0 0; font-size: var(--size-3xs); color: var(--mist); letter-spacing: .02em; }
.tvdb-credit a { color: var(--gold); text-decoration: none; }
.tvdb-credit a:hover { text-decoration: underline; }

/* Drop 189: DramaBL - its answers marked as its own, and a line back to its page wherever they are shown */
.lookup-from.is-dramabl { color: var(--blossom); }
.dramabl-credit { margin: 6px 0 0; font-size: var(--size-3xs); color: var(--mist); letter-spacing: .02em; }
.dramabl-credit a { color: var(--gold); text-decoration: none; }
.dramabl-credit a:hover { text-decoration: underline; }

/* Drop 190: DramaBL's doubles, listed before they are merged. Tokens only. */
.dramabl-doubles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dramabl-double { padding: var(--space-2) var(--space-3); border: var(--hairline); border-radius: var(--radius-md); background: var(--surface-2); }
.dramabl-double.is-touched { opacity: .6; }
.dramabl-double-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.dramabl-double-drop { color: var(--mist); text-decoration: line-through; }
.dramabl-double-arrow { color: var(--gold); }
.dramabl-double small { display: block; margin-top: 4px; color: var(--mist); font-size: var(--size-3xs); }

/* Drop 195: the one Orders page - the halls that narrow it, and the halls each order brings to. Tokens only. */
.sh-room .sh-hallbar { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 18px; }
.sh-room .sh-hall-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 10px;
  border: 1px solid var(--sh-rule); border-radius: 999px; background: var(--sh-paper); color: var(--sh-muted); font-size: var(--size-2xs); }
.sh-room .sh-hall-pick::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-hall, var(--sh-jade)); }
.sh-room .sh-hall-pick[data-hall="all"]::before { display: none; }
.sh-room .sh-hall-pick[aria-pressed="true"] { border-color: var(--sh-hall, var(--sh-jade)); color: var(--sh-ink);
  background: color-mix(in srgb, var(--sh-hall, var(--sh-jade)) 14%, var(--sh-paper)); }
.sh-room .sh-halls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sh-room .sh-hall-tag { padding: 1px 7px; border-radius: 999px; font-size: var(--size-3xs); letter-spacing: .02em; line-height: 1.6;
  color: var(--sh-ink); border: 1px solid color-mix(in srgb, var(--sh-hall, var(--sh-jade)) 55%, transparent);
  background: color-mix(in srgb, var(--sh-hall, var(--sh-jade)) 12%, transparent); }
.sh-room .sh-group-banner .sh-halls { margin-top: 8px; }
.sh-room [data-hall="bl"] { --sh-hall: var(--hall-bl); }
.sh-room [data-hall="sapphire"] { --sh-hall: var(--hall-sapphire); }
.sh-room [data-hall="stars"] { --sh-hall: color-mix(in srgb, var(--hall-bl) 45%, var(--blossom)); }
.sh-room [data-hall="relics"] { --sh-hall: var(--gold); }
.sh-room [data-hall="archives"] { --sh-hall: color-mix(in srgb, var(--hall-sapphire) 55%, var(--hall-bl)); }
.sh-room [data-hall="oddities"] { --sh-hall: var(--hall-oddities); }
@media (max-width: 640px) {
  .sh-room .sh-hallbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -2px; }
  .sh-room .sh-hall-pick { flex: 0 0 auto; min-height: 44px; }
}

/* Drop 196: the Order Desk, after her study - the register and its rail, the folios, the group register's hand-off and
   boxes, the exchange tickets. The palace's banner, type and colours; tokens only. */
.sh-room .sh-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: -3px; }
.sh-room .sh-tabs button { gap: 8px; }
.sh-room .sh-eyebrow { margin: 0 0 4px; font-size: var(--size-3xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sh-gold); font-weight: 600; }
.sh-room .sh-lead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.sh-room .sh-lead h2 { font: var(--size-2xl)/1.15 var(--font-serif); letter-spacing: -.02em; }
.sh-room .sh-lead.is-sub { margin-top: var(--space-4); }
.sh-room .sh-lead.is-sub h2 { font-size: var(--size-xl); }
.sh-room .sh-lead > .sh-actions { justify-content: flex-end; }
.sh-room .sh-seg button { min-height: 33px; }

/* the four counts in one strip */
.sh-room .sh-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-4);
  border: var(--hairline); border-radius: var(--radius-md); background: var(--sh-paper); }
.sh-room .sh-strip-cell { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 0; }
.sh-room .sh-strip-cell + .sh-strip-cell { border-left: var(--hairline); }
.sh-room .sh-strip-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  color: var(--sh-gold); border: 1px solid color-mix(in srgb, var(--sh-gold) 45%, transparent); background: var(--sh-gold-soft); }
.sh-room .sh-strip-num { display: block; font: var(--size-xl)/1.15 var(--font-serif); white-space: nowrap; }

/* the register and its rail */
.sh-room .sh-desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.sh-room .sh-register .sh-toolbar { justify-content: flex-start; gap: 8px; }
.sh-room .sh-register .sh-search { flex: 1 1 220px; }
.sh-room .sh-register .sh-search input { width: 100%; }
.sh-room .sh-coin { margin-left: auto; }
.sh-room .sh-rows { border: var(--hairline); border-radius: var(--radius-md); background: var(--sh-paper); overflow: hidden; }
.sh-room .sh-rows > .sh-empty { border: 0; border-radius: 0; }
.sh-room .sh-rows > .sh-empty h3 { margin-bottom: 4px; }
.sh-room .sh-rows > .sh-empty .sh-button { margin-top: 12px; }
.sh-room .sh-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 30px; gap: 16px; align-items: center; width: 100%;
  padding: 16px 18px; text-align: left; background: transparent; border: 0; border-radius: 0; color: inherit; font: inherit; }
.sh-room .sh-row + .sh-row { border-top: var(--hairline); }
.sh-room .sh-row:hover { background: color-mix(in srgb, var(--sh-gold) 6%, var(--sh-paper)); }
.sh-room .sh-row:hover .sh-row-arrow { color: var(--sh-gold); border-color: var(--sh-gold); }
.sh-room .sh-row-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-room .sh-row-title { font: var(--size-lg)/1.25 var(--font-serif); color: var(--sh-ink); overflow-wrap: anywhere; }
.sh-room .sh-row-meta { font-size: var(--size-2xs); color: var(--sh-muted); }
.sh-room .sh-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.sh-room .sh-row-tags .sh-halls { margin-top: 0; }
.sh-room .sh-row-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sh-room .sh-row-sum { font: var(--size-lg)/1.2 var(--font-serif); white-space: nowrap; }
.sh-room .sh-row-pay .is-jade { color: var(--sh-jade); }
.sh-room .sh-row-pay .is-gold { color: var(--sh-gold); }
.sh-room .sh-row-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: var(--hairline); color: var(--sh-muted); font-size: var(--size-xs); }
.sh-room .sh-jacket { position: relative; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden;
  border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--sh-gold) 40%, var(--sh-rule));
  background: linear-gradient(160deg, color-mix(in srgb, var(--hall-sapphire-deep) 30%, var(--sh-paper)), var(--sh-bg)); color: var(--sh-gold); }
.sh-room .sh-jacket img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-room .sh-jacket-seal { font-size: var(--size-xl); line-height: 1; }
.sh-room .sh-jacket b { position: absolute; left: 3px; right: 3px; bottom: 3px; font-size: 0.5rem; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; color: var(--sh-ink); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sh-room .sh-jacket.is-small { width: 40px; height: 40px; border-radius: 6px; }
.sh-room .sh-jacket.is-small b { display: none; }
.sh-room .sh-jacket.is-small .sh-jacket-seal { font-size: var(--size-md); }
.sh-room .sh-rail { display: flex; flex-direction: column; gap: var(--space-3); }
.sh-room .sh-railbox { position: relative; padding: 18px; border: var(--hairline); border-radius: var(--radius-md); background: var(--sh-paper); }
.sh-room .sh-railbox h3 { font: var(--size-lg)/1.25 var(--font-serif); margin-bottom: 8px; }
.sh-room .sh-railbox.is-docket { border-color: color-mix(in srgb, var(--sh-gold) 55%, var(--sh-rule));
  background: linear-gradient(160deg, color-mix(in srgb, var(--sh-gold) 12%, var(--sh-paper)), var(--sh-paper)); }
.sh-room .sh-docket-sum { display: block; font: var(--size-2xl)/1.15 var(--font-serif); margin: 4px 0; }
.sh-room .sh-linkbutton { padding: 0; margin-top: 10px; min-height: 0; border: 0; background: transparent; color: var(--sh-jade);
  font-size: var(--size-xs); font-weight: 600; }
.sh-room .sh-linkbutton:hover { text-decoration: underline; }
.sh-room .sh-hall-list { display: flex; flex-direction: column; }
.sh-room .sh-hall-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 38px;
  padding: 8px 2px; border: 0; border-top: var(--hairline); background: transparent; color: inherit; text-align: left; font-size: var(--size-xs); }
.sh-room .sh-hall-stat > span:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sh-room .sh-hall-stat:hover, .sh-room .sh-hall-stat[aria-pressed="true"] { color: var(--sh-gold); }
.sh-room .sh-hall-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sh-hall, var(--sh-jade)); }

/* the folio: one order, one box, one claim - in the palace's own pop-up */
.modal.sh-folio { width: min(48rem, 100%); }
.sh-folio .sh-folio-head { position: relative; padding-right: 64px; border-bottom: var(--hairline);
  background: linear-gradient(170deg, color-mix(in srgb, var(--sh-gold) 7%, var(--sh-paper)), var(--sh-paper)); padding-bottom: var(--space-3); }
.sh-folio .sh-folio-head h3 { font: var(--size-2xl)/1.15 var(--font-serif); letter-spacing: -.02em; margin: 2px 0 4px; }
.sh-folio .sh-folio-close { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: var(--hairline); border-radius: var(--radius-sm); background: var(--sh-bg); color: var(--sh-muted); }
.sh-folio .sh-folio-close:hover { color: var(--sh-ink); border-color: var(--sh-gold); }
.sh-folio .sh-folio-body { padding-top: var(--space-3); }
.sh-folio .sh-folio-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-folio .sh-folio-chips .sh-halls { margin-top: 0; }
.sh-folio .sh-folio-tabs { display: flex; gap: 6px; margin: var(--space-3) 0 var(--space-2); border-bottom: var(--hairline); }
.sh-folio .sh-folio-tabs button { min-height: 36px; padding: 6px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--sh-muted); font-size: var(--size-sm); margin-bottom: -1px; }
.sh-folio .sh-folio-tabs button[aria-selected="true"] { color: var(--sh-ink); border-bottom-color: var(--sh-jade); }
.sh-room .sh-folio-lead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0 8px; border-bottom: var(--hairline); margin-top: var(--space-2); }
.sh-room .sh-folio-lead h4 { margin: 0; font: var(--size-lg)/1.25 var(--font-serif); color: var(--sh-ink); font-weight: 400; }
.sh-folio .sh-item-line { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; }
.sh-folio .sh-item-line strong { font-size: var(--size-sm); font-weight: 500; }
.sh-room .sh-add { margin-top: var(--space-2); }
.sh-room .sh-note { margin-top: var(--space-2); padding: 10px 12px; border-left: 2px solid var(--sh-gold); background: var(--sh-bg); border-radius: 0 6px 6px 0; }
.sh-folio .sh-folio-foot { justify-content: flex-end; flex-wrap: wrap; }
.sh-folio .sh-folio-foot .sh-danger { margin-right: auto; order: -1; }
.sh-folio .sh-folio-foot .ghost { min-height: 35px; }
.sh-room .sh-receipts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-2); }
.sh-room .sh-receipt { padding: 14px 16px; border: var(--hairline); border-radius: var(--radius-sm); background: var(--sh-bg); margin-top: var(--space-2); min-width: 0; }
.sh-room .sh-receipts .sh-receipt { margin-top: 0; }
.sh-room .sh-receipt-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--size-xs); }
.sh-room .sh-receipt-row > span { display: flex; align-items: center; gap: 2px; min-width: 0; color: var(--sh-muted); overflow-wrap: anywhere; }
.sh-room .sh-receipt-row strong { white-space: nowrap; }
.sh-room .sh-receipt-row.is-total { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--sh-rule); }
.sh-room .sh-receipt-row.is-total > span { color: var(--sh-ink); }
.sh-room .sh-receipt-row.is-total strong { font: var(--size-xl)/1.15 var(--font-serif); }
.sh-room .sh-receipt .sh-fees { margin: 4px 0 6px; }
.sh-room .sh-settle { margin: var(--space-3) 0 var(--space-2); }
.sh-room .sh-journal { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; display: grid; gap: 10px; }
.sh-room .sh-journal li { display: flex; align-items: center; gap: 12px; color: var(--sh-muted); }
.sh-room .sh-journal li.is-done { color: var(--sh-ink); }
.sh-room .sh-journal-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: var(--hairline); font-size: var(--size-2xs); }
.sh-room .sh-journal li.is-done .sh-journal-mark { color: var(--sh-jade); border-color: var(--sh-jade); background: var(--sh-soft); }
.sh-room .sh-panel { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: var(--space-3); padding: 14px 16px;
  border: var(--hairline); border-radius: var(--radius-sm); background: var(--sh-bg); }
.sh-room .sh-panel.is-row { align-items: center; justify-content: space-between; }
.sh-room .sh-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; }
.sh-room .sh-field input { min-height: 38px; padding: 8px 10px; border: var(--hairline); border-radius: 6px; background: var(--sh-paper); color: var(--sh-ink); }

/* the group register: the hand-off, then a card per box */
.sh-room .sh-batch { padding: 20px; border: var(--hairline); border-radius: var(--radius-md); background: var(--sh-paper); margin-bottom: 0; }
.sh-room .sh-batch-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.sh-room .sh-batch-copy h2 { font: var(--size-xl)/1.2 var(--font-serif); margin-bottom: 4px; overflow-wrap: anywhere; }
.sh-room .sh-batch-copy > .sh-small { margin-top: 6px; }
.sh-room .sh-batch-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sh-room .sh-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px; padding-top: 14px; border-top: var(--hairline); }
.sh-room .sh-flow-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--size-xs); }
.sh-room .sh-flowcard .sh-small { margin-top: 6px; }
.sh-room .sh-flowcard.is-out .sh-progress span { background: var(--sh-gold); }
.sh-room .sh-batch > .sh-trackline { margin-top: 14px; }
.sh-room .sh-batch .sh-trackline .sh-button { margin-left: auto; }
.sh-room .sh-boxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.sh-room .sh-boxcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: var(--hairline); border-radius: var(--radius-md); background: var(--sh-paper); }
.sh-room .sh-boxcard > .sh-badge { align-self: flex-start; }
.sh-room .sh-boxcard.is-mine { border-color: color-mix(in srgb, var(--sh-gold) 55%, var(--sh-rule));
  background: linear-gradient(160deg, color-mix(in srgb, var(--sh-gold) 10%, var(--sh-paper)), var(--sh-paper)); }
.sh-room .sh-boxhead { display: flex; gap: 12px; align-items: center; min-width: 0; }
.sh-room .sh-boxhead h3 { font: var(--size-lg)/1.2 var(--font-serif); overflow-wrap: anywhere; }
.sh-room .sh-monogram { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm);
  border: var(--hairline); background: var(--sh-bg); color: var(--sh-jade); font-size: var(--size-md); }
.sh-room .sh-boxcard.is-mine .sh-monogram { color: var(--sh-gold); border-color: color-mix(in srgb, var(--sh-gold) 50%, var(--sh-rule)); }
.sh-room .sh-boxline { display: flex; justify-content: space-between; gap: 10px; font-size: var(--size-xs); color: var(--sh-muted); }
.sh-room .sh-boxline b { color: var(--sh-ink); font-weight: 500; white-space: nowrap; }
.sh-room .sh-boxcard .sh-progress { margin-top: -4px; }
.sh-room .sh-boxfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* the exchange desk: tickets with two sides, and the ways to begin */
.sh-room .sh-ticket { padding: 18px 20px; }
.sh-room .sh-ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sh-room .sh-ticket-head h3 { font: var(--size-lg)/1.25 var(--font-serif); }
.sh-room .sh-ticket .sh-deal-sides { border: 0; padding: 0; margin: 14px 0 12px; gap: 12px; }
.sh-room .sh-ticket .sh-deal-side { padding: 14px 16px; border: var(--hairline); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sh-jade) 8%, var(--sh-paper)); }
.sh-room .sh-ticket .sh-deal-side.is-in { background: color-mix(in srgb, var(--hall-sapphire-deep) 16%, var(--sh-paper)); }
.sh-room .sh-side-label { font-size: var(--size-2xs); font-weight: 600; color: var(--sh-jade); }
.sh-room .sh-deal-side.is-in .sh-side-label { color: var(--hall-sapphire); }
.sh-room .sh-ticket .sh-side-what { display: block; margin: 6px 0 10px; font: var(--size-lg)/1.25 var(--font-serif); overflow-wrap: anywhere; }
.sh-room .sh-side-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-room .sh-side-foot .sh-linkbutton { margin-top: 0; }
.sh-room .sh-exchange-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.sh-room .sh-exchange-empty h3 { font: var(--size-xl)/1.2 var(--font-serif); margin-bottom: 4px; }
.sh-room .sh-sleeves { display: flex; align-items: center; gap: 10px; }
.sh-room .sh-sleeve { display: grid; place-items: center; width: 52px; height: 68px; border-radius: 6px; transform: rotate(-5deg);
  border: 1px solid color-mix(in srgb, var(--sh-gold) 55%, var(--sh-rule)); background: color-mix(in srgb, var(--sh-jade) 20%, var(--sh-paper));
  color: var(--sh-gold); font-size: var(--size-lg); }
.sh-room .sh-sleeve.is-b { transform: rotate(5deg); background: color-mix(in srgb, var(--hall-sapphire-deep) 35%, var(--sh-paper)); }
.sh-room .sh-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sh-room .sh-way { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; text-align: left; border: var(--hairline);
  border-radius: var(--radius-md); background: var(--sh-paper); color: inherit; }
.sh-room .sh-way:hover { border-color: var(--sh-gold); }
.sh-room .sh-way .sh-glyph { font-size: var(--size-lg); margin-top: 2px; }
.sh-room .sh-way strong { font: var(--size-lg)/1.2 var(--font-serif); font-weight: 400; }

@media (max-width: 1100px) {
  .sh-room .sh-desk-grid { grid-template-columns: 1fr; }
  .sh-room .sh-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
  .sh-room .sh-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-room .sh-strip-cell:nth-child(3) { border-left: 0; }
  .sh-room .sh-strip-cell:nth-child(n+3) { border-top: var(--hairline); }
  .sh-room .sh-strip-cell { padding: 12px; gap: 9px; }
  .sh-room .sh-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .sh-room .sh-row .sh-jacket { width: 48px; height: 48px; }
  .sh-room .sh-row-arrow { display: none; }
  .sh-room .sh-receipts, .sh-room .sh-flows, .sh-room .sh-ways { grid-template-columns: 1fr; }
  .sh-room .sh-batch-top { grid-template-columns: auto minmax(0, 1fr); }
  .sh-room .sh-batch-side { grid-column: 1 / -1; align-items: flex-start; }
  .sh-room .sh-exchange-empty { grid-template-columns: 1fr; justify-items: start; }
  .sh-room .sh-lead > .sh-actions { justify-content: flex-start; }
  .sh-room .sh-coin { margin-left: 0; }
  .sh-folio .sh-folio-head h3 { font-size: var(--size-xl); }
  .sh-folio .sh-item-line { grid-template-columns: 40px minmax(0, 1fr); }
  .sh-folio .sh-item-right { grid-column: 2; text-align: left; }
  .sh-folio .sh-line-tools { justify-content: flex-start; }
}
@media (max-width: 460px) {
  .sh-room .sh-row { grid-template-columns: 44px minmax(0, 1fr); }
  .sh-room .sh-row .sh-jacket { width: 44px; height: 44px; }
  .sh-room .sh-row-pay { grid-column: 2; align-items: flex-start; text-align: left; }
  .sh-room .sh-ticket .sh-deal-sides { grid-template-columns: 1fr; }
}
.sh-folio .modal-eyebrow { color: var(--sh-gold); font-size: var(--size-3xs); letter-spacing: .16em; font-weight: 600; }
.modal.sh-folio:focus { outline: none; }

/* Drop 197: preorder groups and the host's shipments - packing a shipment, its costs and who paid, each piece's journey. Tokens only. */
.sh-room .sh-packlist { margin-top: var(--space-2); border-top: var(--hairline); }
.sh-room .sh-item-line.sh-packrow { grid-template-columns: 40px minmax(0, 1fr) auto; }
.sh-room .sh-step { display: flex; align-items: center; gap: 8px; }
.sh-room .sh-step input { width: 64px; min-height: 36px; padding: 6px 8px; text-align: center; border: var(--hairline); border-radius: 6px;
  background: var(--sh-paper); color: var(--sh-ink); font: inherit; }
.sh-room .sh-step input:focus { border-color: var(--sh-gold); outline: none; }
.sh-room .sh-cost-side { display: flex; align-items: center; gap: 8px; }
.sh-room .sh-quiet.is-paid { color: var(--sh-jade); }
.sh-room .sh-receipt-row.is-share > span { font-style: italic; }
.sh-room .sh-shipcard .sh-monogram { color: var(--sh-gold); }
.sh-room .sh-shipcard.is-way { border-color: color-mix(in srgb, var(--sh-purple) 40%, var(--sh-rule)); }
.sh-room .sh-shipcard.is-got .sh-monogram { color: var(--sh-jade); }
.sh-room .sh-journeys .is-got { color: var(--sh-jade); }
.sh-room .sh-journeys .is-way { color: var(--sh-purple); }
.sh-room .sh-journeys .is-waiting { color: var(--sh-gold); }
@media (max-width: 760px) {
  .sh-room .sh-item-line.sh-packrow { grid-template-columns: 40px minmax(0, 1fr); }
  .sh-room .sh-packrow .sh-step { grid-column: 2; }
}


/* ---- treasury.css ---- */
/* ============================================================
   forbidden-imperial.city — the Treasury
   Location: public_html/assets/css/treasury.css

   Every figure uses tabular numerals so columns of money line up
   whatever the digits happen to be.
   ============================================================ */

.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* ============================================================
   The three figures across the top
   ============================================================ */

.vault-summary {
  display: grid; gap: var(--space-3);
  grid-template-columns: 1.3fr 1fr 1fr;
  margin-bottom: var(--space-3);
}

.vault-sum {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.vault-sum-label {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.vault-sum-figure {
  font-family: var(--font-serif);
  font-size: var(--size-2xl); line-height: 1.15;
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* 'headline' rather than 'primary' on purpose — .primary is the filled
   button, and a card wearing it inherits gold-on-ink and disappears.
   The frame and the size already say this is the important figure. */
.vault-sum.headline .vault-sum-figure {
  font-size: var(--size-3xl);
  color: var(--blossom);
}
.vault-sum.debt .vault-sum-figure { color: var(--accent-lacquer); }

.vault-sum-count { font-size: var(--size-2xs); color: var(--mist); margin-top: 0.15rem; }

.vault-sum-bar {
  height: 4px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 75%, transparent);
  overflow: hidden; margin-top: var(--space-2);
}
.vault-sum-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mist); }
.vault-sum.debt .vault-sum-bar i { background: var(--accent-lacquer); }

.vault-warn {
  font-size: var(--size-xs);
  color: color-mix(in srgb, var(--mist) 60%, var(--blossom));
  margin-bottom: var(--space-3);
}

/* ============================================================
   The list
   ============================================================ */

.vault-list {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.vault-list-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline);
}
.vault-list-head strong {
  display: block; font-family: var(--font-serif);
  font-weight: 400; font-size: var(--size-lg);
}
.vault-list-head span { font-size: var(--size-xs); color: var(--mist); }
.vault-list-total {
  font-family: var(--font-serif); font-size: var(--size-lg);
  font-variant-numeric: tabular-nums;
}

.vault-row-wrap { border-bottom: var(--hairline); }
.vault-row-wrap:last-of-type { border-bottom: none; }

.vault-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transition: background var(--fast) var(--ease);
}
.vault-row.is-clickable { cursor: pointer; }
.vault-row.is-clickable:hover { background: var(--surface-2); }

.vault-icon {
  display: grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.vault-icon svg { width: 20px; height: 20px; }

.vault-identity { flex: 1; min-width: 0; }

.vault-name-line {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.vault-name { font-size: var(--size-md); }

.vault-kind {
  font-size: var(--size-2xs); color: var(--mist);
  background: color-mix(in srgb, var(--border) 50%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
}

.vault-chip {
  font-size: var(--size-2xs);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem;
}

.vault-sub { font-size: var(--size-xs); color: var(--mist); margin-top: 0.1rem; }

.vault-figures { text-align: right; flex: none; }

.vault-figure {
  font-family: var(--font-serif); font-size: var(--size-xl);
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
.vault-figure.small { font-size: var(--size-lg); }
.vault-figure.negative { color: var(--accent-lacquer); }

.vault-converted {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums; margin-top: 0.1rem;
}
.vault-converted.missing { color: var(--state-warn); }

.vault-row-tools { display: flex; gap: 0.15rem; flex: none; }

.vault-icon-button {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  background: transparent; border: none; padding: 0;
  border-radius: var(--radius-sm);
  color: var(--mist);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.vault-icon-button svg { width: 17px; height: 17px; }
.vault-icon-button:hover { color: var(--blossom); background: var(--surface-3); }
.vault-icon-button.is-open { transform: rotate(180deg); color: var(--accent); }

/* ---------- the currencies beneath a row ---------- */

.vault-currency-line {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) 4.4rem;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.vault-currency-line.is-clickable { cursor: pointer; }
.vault-currency-line.is-clickable:hover { background: var(--surface-2); }

.vault-currency { flex: 1; min-width: 0; }
.vault-currency b {
  font-weight: 500; font-size: var(--size-sm);
  font-family: var(--font-mono); letter-spacing: 0.03em;
}
.vault-currency span { display: block; font-size: var(--size-2xs); color: var(--mist); }

.vault-add-currency {
  display: block; width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) 4.4rem;
  text-align: left;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  border: none; border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  color: var(--mist); font-size: var(--size-xs);
  transition: color var(--fast) var(--ease);
}
.vault-add-currency:hover { color: var(--accent); }
.vault-add-currency::before { content: "+ "; }

/* ---------- actions ---------- */

.vault-list-foot {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: var(--hairline);
  flex-wrap: wrap;
}
.vault-list-foot .ghost, .vault-list-foot .primary {
  padding: 0.45rem 0.95rem; font-size: var(--size-sm);
}

.vault-none { padding: var(--space-4); font-size: var(--size-sm); color: var(--mist); }

/* ---------- fields inside a dialog ---------- */

.modal .field { margin-bottom: var(--space-3); }
.modal .field label {
  display: block; color: var(--mist);
  font-size: var(--size-xs); margin-bottom: var(--space-1);
}
.modal .field input,
.modal .field select,
.modal .field textarea {
  width: 100%;
  background: var(--ink); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font: inherit; font-variant-numeric: tabular-nums;
}
.modal .field textarea { resize: vertical; }
.modal .field-hint {
  display: block; margin-top: var(--space-1);
  font-size: var(--size-2xs); color: var(--mist);
}
.modal .field-error {
  display: block; margin-top: var(--space-1);
  font-size: var(--size-2xs); color: var(--state-warn);
}

/* ---------- narrow ---------- */

@media (max-width: 52rem) {
  .vault-summary { grid-template-columns: 1fr 1fr; }
  .vault-sum.headline { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  .vault-row { flex-wrap: wrap; padding: var(--space-3); }
  .vault-identity { flex: 1 1 55%; }
  .vault-figures { flex: 1 1 100%; text-align: left; padding-left: 3.4rem; }
  .vault-currency-line, .vault-add-currency { padding-left: var(--space-3); }
  .vault-list-foot { justify-content: stretch; }
  .vault-list-foot button { flex: 1; }
}

/* ============================================================
   Gold Flow
   ============================================================ */

.flow-month {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.flow-month strong {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-lg); min-width: 10rem;
}
.flow-forward svg { transform: rotate(180deg); }
.flow-month .primary, .flow-month .ghost { padding: 0.45rem 1rem; font-size: var(--size-sm); }

.vault-sum.flow-in .vault-sum-figure  { color: var(--state-pass); }
.vault-sum.flow-out .vault-sum-figure { color: var(--accent-lacquer); }

/* ---------- the split ---------- */

.flow-split {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.flow-split-bar {
  display: flex; height: 10px; margin: var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-pill); overflow: hidden;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}
.flow-split-bar i { display: block; height: 100%; }
.flow-split-bar i.is-needs   { background: var(--gold); }
.flow-split-bar i.is-wants   { background: var(--lantern); }
.flow-split-bar i.is-savings { background: var(--accent-jade); }

.flow-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.flow-legend-item { display: flex; align-items: flex-start; gap: var(--space-2); }

.flow-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  margin-top: 0.4rem; flex: none; background: var(--mist);
}
.is-needs   .flow-dot { background: var(--gold); }
.is-wants   .flow-dot { background: var(--lantern); }
.is-savings .flow-dot { background: var(--accent-jade); }

.flow-legend-name { font-size: var(--size-sm); }
.flow-legend-value {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}

/* ---------- filters ---------- */

.flow-filters {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.flow-filters input, .flow-filters select {
  background: var(--surface); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem; font: inherit; font-size: var(--size-sm);
}
.flow-filters input { flex: 1; min-width: 12rem; }

/* ---------- the ledger ---------- */

.flow-day {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  border-top: var(--hairline);
}
.vault-list-head + .flow-day { border-top: none; }

.flow-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  transition: background var(--fast) var(--ease);
}
.flow-day + .flow-row { border-top: none; }
.flow-row.is-clickable { cursor: pointer; }
.flow-row.is-clickable:hover { background: var(--surface-2); }

.flow-mark {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: var(--size-sm); line-height: 1;
}
.flow-mark.is-transfer { color: var(--accent); font-size: var(--size-md); }

.vault-figure.positive { color: var(--state-pass); }

@media (max-width: 40rem) {
  .flow-month strong { min-width: 0; flex: 1; }
  .flow-row { padding: var(--space-2) var(--space-3); }
  .flow-legend { gap: var(--space-3); }
}

/* ============================================================
   Importing a statement
   ============================================================ */

.import-step { margin-bottom: var(--space-3); }
.import-step h3 { font-size: var(--size-lg); }
.import-step .sub { margin-top: var(--space-1); }

.import-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.import-grid .field { margin-bottom: 0; }
.import-grid label {
  display: block; color: var(--mist);
  font-size: var(--size-xs); margin-bottom: var(--space-1);
}
.import-grid select, .panel .field select, .panel .field input {
  width: 100%; background: var(--ink); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; font: inherit; font-size: var(--size-sm);
}
.panel .field { margin-bottom: var(--space-3); }
.panel .field label {
  display: block; color: var(--mist);
  font-size: var(--size-xs); margin-bottom: var(--space-1);
}

.import-check {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--size-sm); color: var(--mist);
  cursor: pointer;
}
.import-check input { margin-top: 0.25rem; }

.import-sample {
  margin-top: var(--space-3); overflow-x: auto;
  border: var(--hairline); border-radius: var(--radius-sm);
}
.import-sample table { border-collapse: collapse; width: 100%; font-size: var(--size-2xs); }
.import-sample th, .import-sample td {
  padding: 0.35rem 0.6rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.import-sample th { color: var(--accent); font-weight: 500; }
.import-sample td { color: var(--mist); font-family: var(--font-mono); }

.import-note {
  font-size: var(--size-xs); color: var(--mist);
  margin-bottom: var(--space-3);
}

.import-rows {
  border: var(--hairline); border-radius: var(--radius-sm);
  margin-top: var(--space-3); overflow: hidden;
}

.import-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.5rem var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  font-size: var(--size-sm);
}
.import-row:last-child { border-bottom: none; }
.import-row.is-duplicate { opacity: 0.55; }
.import-row.is-bad { color: var(--state-warn); }

.import-cell.date {
  font-family: var(--font-mono); font-size: var(--size-2xs);
  color: var(--mist); flex: none; width: 6rem;
}
.import-cell.grow { flex: 1; min-width: 0; }
.import-cell .dim { font-size: var(--size-2xs); color: var(--mist); }
.import-cell.amount {
  font-variant-numeric: tabular-nums; flex: none;
  width: 6rem; text-align: right;
}
.import-cell.amount.negative { color: var(--accent-lacquer); }
.import-cell.amount.positive { color: var(--state-pass); }

.import-category {
  flex: none; max-width: 11rem;
  background: var(--ink); color: var(--mist);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.25rem 0.4rem; font: inherit; font-size: var(--size-2xs);
}

@media (max-width: 46rem) {
  .import-row { flex-wrap: wrap; }
  .import-cell.grow { flex: 1 1 60%; }
  .import-category { max-width: none; flex: 1 1 100%; }
}

/* ============================================================
   Standing Tribute
   ============================================================ */

.tribute-due {
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--state-warn);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.tribute-due-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  flex-wrap: wrap;
}
.tribute-due-row:last-child { border-bottom: none; }
.tribute-due-row.is-overdue .import-cell.grow .dim { color: var(--accent-lacquer); }
.tribute-due-row .primary, .tribute-due-row .ghost {
  padding: 0.35rem 0.8rem; font-size: var(--size-xs);
}

.tribute-amount {
  font-family: var(--font-serif); font-size: var(--size-lg);
  font-variant-numeric: tabular-nums; flex: none;
}

.tribute-auto {
  font-size: var(--size-2xs); color: var(--accent-jade);
  border: 1px solid color-mix(in srgb, var(--accent-jade) 45%, transparent);
  border-radius: var(--radius-pill); padding: 0.05rem 0.5rem;
}

/* ---------- the calendar ---------- */

.tribute-calendar {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--border);
  border-top: var(--hairline);
}

.tribute-weekday {
  background: var(--surface);
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
  text-align: center;
}

.tribute-day {
  background: var(--surface);
  min-height: 5.5rem;
  padding: var(--space-1) 0.35rem 0.35rem;
  display: flex; flex-direction: column; gap: 2px;
}
.tribute-day.is-empty { background: color-mix(in srgb, var(--surface) 50%, var(--ink)); }
.tribute-day.is-past { background: color-mix(in srgb, var(--surface) 70%, var(--ink)); }
.tribute-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }

.tribute-date {
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums; text-align: right;
  padding-right: 0.15rem;
}
.tribute-day.is-today .tribute-date { color: var(--accent); }

.tribute-chip {
  display: flex; flex-direction: column;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0.3rem;
  font-size: var(--size-3xs); line-height: 1.3;
  overflow: hidden;
}
.tribute-chip.is-income {
  background: color-mix(in srgb, var(--state-pass) 16%, transparent);
  border-left-color: var(--state-pass);
}
.tribute-chip.is-auto { border-left-style: double; border-left-width: 3px; }

.tribute-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--blossom);
}
.tribute-chip-amount { color: var(--mist); font-variant-numeric: tabular-nums; }

@media (max-width: 46rem) {
  .tribute-day { min-height: 4rem; }
  .tribute-chip-amount { display: none; }
  .tribute-due-row .tribute-amount { flex: 1 1 100%; }
}

/* ---------- dormant commitments ---------- */

.tribute-divider {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-top: var(--hairline);
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.tribute-divider span {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.tribute-divider small { font-size: var(--size-2xs); color: var(--mist); opacity: 0.7; }

.flow-row.is-dormant .vault-name,
.flow-row.is-dormant .vault-figure { color: var(--mist); }
.flow-row.is-dormant .flow-mark { opacity: 0.5; }
.flow-row.is-dormant .ghost { padding: 0.3rem 0.7rem; font-size: var(--size-2xs); }

/* ============================================================
   Annual Ledgers
   ============================================================ */

.ledger-income {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.ledger-income-right {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.ledger-income-right .ghost { padding: 0.35rem 0.8rem; font-size: var(--size-xs); }

.ledger-pair span {
  display: block; font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.ledger-pair b {
  font-weight: 400; font-size: var(--size-md);
  font-variant-numeric: tabular-nums;
}
.ledger-pair.is-over b { color: var(--accent-lacquer); }

/* ---------- the three envelopes ---------- */

.ledger-envelopes {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--space-3);
}

.ledger-card {
  background: var(--surface); border: var(--hairline);
  border-top: 3px solid var(--mist);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-3);
}
.ledger-card.is-needs   { border-top-color: var(--gold); }
.ledger-card.is-wants   { border-top-color: var(--lantern); }
.ledger-card.is-savings { border-top-color: var(--accent-jade); }
.ledger-card.is-blown   { border-top-color: var(--accent-lacquer); }

.ledger-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2);
}
.ledger-card-head strong {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-lg);
}

.ledger-share { font-size: var(--size-2xs); color: var(--mist); }
.ledger-share.is-off { color: var(--state-warn); }

.ledger-figure {
  font-family: var(--font-serif); font-size: var(--size-2xl);
  line-height: 1.15; margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.ledger-card.is-blown .ledger-figure { color: var(--accent-lacquer); }

.ledger-caption {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
}

.ledger-bar {
  display: flex; height: 6px; margin: var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-pill); overflow: hidden;
  background: color-mix(in srgb, var(--border) 75%, transparent);
}
.ledger-bar i { display: block; height: 100%; background: var(--mist); }
.ledger-bar u { display: block; height: 100%; background: var(--accent-lacquer); }
.is-needs   .ledger-bar i { background: var(--gold); }
.is-wants   .ledger-bar i { background: var(--lantern); }
.is-savings .ledger-bar i { background: var(--accent-jade); }

.ledger-detail { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ledger-rollover {
  margin-top: var(--space-2);
  font-size: var(--size-2xs); color: var(--accent-jade);
}
.ledger-card .ghost {
  width: 100%; margin-top: var(--space-3);
  padding: 0.35rem; font-size: var(--size-xs);
}

/* ---------- the year ---------- */

.ledger-year {
  display: grid;
  grid-template-columns: 4rem repeat(5, 1fr);
  gap: 1px; background: var(--border);
  border-top: var(--hairline);
}

.ledger-year-head {
  background: var(--surface); padding: var(--space-2) 0.5rem;
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em; text-align: right;
}
.ledger-year-head:first-child { text-align: left; }

.ledger-year-month {
  background: var(--surface); padding: var(--space-2) 0.5rem;
  font-size: var(--size-sm); color: var(--mist); cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.ledger-year-month:hover { color: var(--blossom); }
.ledger-year-month.is-current { color: var(--accent); }

.ledger-year-cell {
  background: var(--surface); padding: var(--space-2) 0.5rem;
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: var(--size-xs);
}
.ledger-year-cell small { display: block; font-size: var(--size-3xs); color: var(--mist); }
.ledger-year-cell.is-over span { color: var(--accent-lacquer); }
.ledger-year-cell.is-empty { color: var(--mist); opacity: 0.4; }
.ledger-year-cell.total { color: var(--mist); }

@media (max-width: 46rem) {
  .ledger-year { grid-template-columns: 3rem repeat(5, 1fr); font-size: var(--size-2xs); }
  .ledger-year-cell small { display: none; }
  .ledger-income-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   Debts & Reckoning
   ============================================================ */

.debt-plan {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.debt-plan-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.debt-plan-head .ghost { padding: 0.35rem 0.8rem; font-size: var(--size-xs); }

.debt-strategy {
  font-family: var(--font-serif); font-size: var(--size-lg);
  margin-top: var(--space-1);
}

.debt-effect {
  font-size: var(--size-sm);
  color: color-mix(in srgb, var(--mist) 55%, var(--blossom));
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: var(--hairline);
  margin-bottom: var(--space-3);
}

.debt-compare {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.debt-compare-card {
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.debt-compare-card.is-chosen {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.debt-compare-figure {
  font-family: var(--font-serif); font-size: var(--size-lg);
  margin: var(--space-1) 0 0.15rem;
}

.debt-note {
  font-size: var(--size-xs); color: var(--mist);
  margin-top: var(--space-3);
}

.debt-promo {
  font-size: var(--size-2xs); color: var(--accent-jade);
  border: 1px solid color-mix(in srgb, var(--accent-jade) 45%, transparent);
  border-radius: var(--radius-pill); padding: 0.05rem 0.5rem;
}

/* ---------- milestones ---------- */

.debt-milestone {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}

.debt-milestone-mark {
  display: grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--border);
  font-size: var(--size-2xs); color: var(--mist);
  font-variant-numeric: tabular-nums;
}
.debt-milestone.is-done .debt-milestone-mark {
  border-color: var(--state-pass); color: var(--state-pass);
}

.debt-milestone-when {
  flex: none; font-size: var(--size-sm); color: var(--mist);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Stored Silver
   ============================================================ */

.silver-warning {
  background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--state-warn);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.silver-warning p { font-size: var(--size-sm); margin-top: var(--space-2); }

.silver-pot {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.vault-list-head + .silver-pot { border-top: none; }
.silver-pot.is-full { background: color-mix(in srgb, var(--state-pass) 6%, transparent); }

.silver-pot-head { display: flex; align-items: center; gap: var(--space-3); }
.silver-pot .ledger-bar { margin: var(--space-2) 0 var(--space-2); }

.silver-pot-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
}
.silver-when { font-size: var(--size-xs); color: var(--mist); }
.silver-tools { display: flex; align-items: center; gap: var(--space-1); }
.silver-tools .ghost { padding: 0.3rem 0.7rem; font-size: var(--size-2xs); }

@media (max-width: 40rem) {
  .silver-pot-head { flex-wrap: wrap; }
  .silver-pot-foot { align-items: flex-start; }
}

.ledger-year-pick {
  background: var(--surface); color: var(--blossom);
  border: var(--hairline); border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  font: inherit; font-family: var(--font-serif); font-size: var(--size-lg);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Memorials to the Throne
   ============================================================ */

.memorial-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.memorial-head .ghost { flex: none; }

.memorial-ranges {
  display: inline-flex; gap: 2px; flex-wrap: wrap;
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-pill); padding: 3px;
  margin-bottom: var(--space-3);
}
.memorial-pill {
  background: transparent; border: none;
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  color: var(--mist); font-size: var(--size-sm);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.memorial-pill:hover { color: var(--blossom); }
.memorial-pill.is-on { background: var(--surface-3); color: var(--blossom); }

.memorial-figures {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-bottom: var(--space-3);
}

.memorial-panel {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.memorial-panel h3 { font-size: var(--size-lg); }
.memorial-panel .sub { margin-bottom: var(--space-3); }

.memorial-caveat {
  font-size: var(--size-xs); color: var(--mist);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline);
}

/* ---------- charts ---------- */

.chart-wrap { position: relative; }
.chart { display: block; overflow: visible; }
.chart-rule { stroke: color-mix(in srgb, var(--border) 70%, transparent); stroke-width: 1; }
.chart-rule-ring { stroke: color-mix(in srgb, var(--border) 70%, transparent); }
.chart-cursor { stroke: var(--mist); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity 120ms; }
.chart-axis { fill: var(--mist); font-size: var(--size-2xs); font-family: var(--font-sans); }
.chart-slice { transition: opacity var(--fast) var(--ease); }
.chart-slice:hover { opacity: 0.75; }
.chart-centre-label {
  fill: var(--mist); font-size: var(--size-3xs); font-family: var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.chart-centre-value {
  fill: var(--blossom); font-size: var(--size-lg); font-family: var(--font-serif);
}

.chart-tip {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--surface-3); border: var(--hairline);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-mid);
  padding: var(--space-2); font-size: var(--size-xs);
  pointer-events: none; white-space: nowrap; z-index: 2;
}
.chart-tip-head { color: var(--mist); font-size: var(--size-2xs); margin-bottom: 0.2rem; }
.chart-tip-row { display: flex; align-items: center; gap: 0.4rem; }
.chart-tip-row b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.chart-tip-label { color: var(--mist); }
.chart-tip-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; }

.chart-legend {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-2); font-size: var(--size-xs); color: var(--mist);
}
.chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }

.chart-ring { display: grid; place-items: center; padding: var(--space-2) 0; }
.chart-ring .chart {
  width: 100%; max-width: 15rem; height: auto;
  aspect-ratio: 1; margin: 0 auto;
}

/* ---------- categories, ring legend, payees ---------- */

.memorial-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr);
  align-items: stretch;
}
.memorial-side { display: grid; gap: var(--space-3); }

/* Both columns end level rather than one trailing a stray margin. */
.memorial-grid > .memorial-panel,
.memorial-side > .memorial-panel:last-child { margin-bottom: 0; }

.memorial-table {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto auto minmax(5rem, 0.8fr);
  gap: 0 var(--space-3);
}
.memorial-th {
  font-size: var(--size-2xs); color: var(--mist);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding-bottom: var(--space-2); border-bottom: var(--hairline);
}
.memorial-th:nth-child(3), .memorial-th:nth-child(4) { text-align: right; }

.memorial-td {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0; font-size: var(--size-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  min-width: 0;
}
.memorial-td.is-figure {
  justify-content: flex-end; font-variant-numeric: tabular-nums;
}
.memorial-td.dim { color: var(--mist); }
.memorial-emoji { flex: none; }
.memorial-td.is-share { gap: var(--space-2); }
.memorial-td.is-share span { font-size: var(--size-2xs); color: var(--mist); flex: none; }

.memorial-share {
  flex: 1; height: 4px; min-width: 2rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}
.memorial-share i { display: block; height: 100%; background: var(--accent); }

.memorial-legend { margin-top: var(--space-3); }
.memorial-legend-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0; font-size: var(--size-xs);
}
.memorial-legend-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.memorial-legend-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.memorial-legend-row .dim { color: var(--mist); width: 2.2rem; text-align: right; }

.memorial-payees { display: grid; }
.memorial-payee {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem; font-size: var(--size-xs);
  border-radius: var(--radius-sm);
}
.memorial-payee-bar {
  position: absolute; inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--radius-sm);
}
.memorial-payee-name {
  position: relative; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memorial-payee-count { position: relative; color: var(--mist); font-size: var(--size-2xs); }
.memorial-payee b {
  position: relative; font-weight: 500; font-variant-numeric: tabular-nums;
}

@media (max-width: 58rem) {
  .memorial-grid { grid-template-columns: 1fr; }
  .memorial-table { grid-template-columns: minmax(0, 1.4fr) auto auto; }
  .memorial-th:nth-child(4), .memorial-th:nth-child(5),
  .memorial-td:nth-child(5n+4), .memorial-td:nth-child(5n+5) { display: none; }
}

/* ---------- on paper ---------- */

@media print {
  .sidebar, .topbar, .banner, .corner, .toasts,
  .memorial-ranges, .memorial-head .ghost { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .view { max-width: none; padding: 0; }
  body { background: #fff; color: #111; }
  .memorial-panel, .vault-sum {
    background: #fff; border: 1px solid #ccc;
    break-inside: avoid; page-break-inside: avoid;
  }
  .chart-tip { display: none; }
}

/* ============================================================
   Treasury Overview
   ============================================================ */

/* Both boxes end level. align-items: start left whichever was shorter
   trailing a gap down its right-hand side. */
.over-top {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
  margin-bottom: var(--space-3);
  align-items: stretch;
}

.over-panel {
  background: var(--surface); border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.over-top > .over-panel, .over-side > .over-panel:last-child { margin-bottom: 0; }
.over-panel h3 { font-size: var(--size-lg); }
.over-panel .sub { margin-top: 0.15rem; }

.over-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.over-panel-head .ghost { flex: none; padding: 0.3rem 0.75rem; font-size: var(--size-2xs); }

/* ---------- this month ---------- */

.over-month {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
}
.over-month-nav { display: flex; align-items: center; gap: var(--space-1); }
.over-month-nav strong {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--size-md);
  min-width: 8.5rem; text-align: center;
}

.over-month-body {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-3) 0; flex-wrap: wrap;
}
.over-month-body .chart-ring { flex: none; }
.over-month-body .chart-ring .chart { max-width: 11rem; }

.over-figures { display: grid; gap: var(--space-3); flex: 1; min-width: 8rem; }
.over-figure {
  font-family: var(--font-serif); font-size: var(--size-2xl); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.over-change { font-size: var(--size-xs); margin-top: 0.15rem; }
.over-change.is-down { color: var(--state-pass); }
.over-change.is-up { color: var(--accent-lacquer); }

.over-pace { padding-top: var(--space-3); border-top: var(--hairline); }
.over-pace-head {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--size-xs); color: var(--mist); margin-bottom: var(--space-2);
}
.over-pace-head .dim { opacity: 0.75; }

.over-pace-bar {
  position: relative; height: 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 75%, transparent);
  overflow: hidden;
}
.over-pace-bar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.over-pace-bar i.is-over { background: var(--accent-lacquer); }
.over-pace-bar u {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--blossom); opacity: 0.55;
}

/* ---------- net worth ---------- */

.over-panel.is-worth { display: flex; flex-direction: column; }
/* The sparkline takes up whatever slack there is, so the panel fills
   its half rather than stopping early. */
.over-panel.is-worth .chart-wrap { margin-top: auto; }
.over-worth {
  font-family: var(--font-serif); font-size: var(--size-3xl); line-height: 1.1;
  margin: var(--space-1) 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}
.over-worth-row {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-3);
}
.over-worth-row .ledger-pair.is-owed b { color: var(--accent-lacquer); }

/* ---------- the split ---------- */

.over-split {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.over-split-head { display: flex; align-items: center; gap: 0.4rem; }
.over-split-name { font-size: var(--size-sm); }
.over-split-target { margin-left: auto; font-size: var(--size-2xs); color: var(--mist); }
.over-split-figure {
  font-family: var(--font-serif); font-size: var(--size-xl);
  margin: var(--space-1) 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.over-split .ledger-bar { margin: 0 0 var(--space-2); }
.over-split-note { font-size: var(--size-2xs); color: var(--mist); }
.over-split-note.dim { opacity: 0.7; }

/* ---------- where it went ---------- */

.over-bottom {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
  align-items: start;
}
.over-bottom > .over-panel { margin-bottom: 0; }
.over-side { display: grid; gap: var(--space-3); }

.over-categories { display: grid; gap: var(--space-2); }
.over-category-head {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: var(--size-sm); margin-bottom: 0.3rem;
}
.over-category-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.over-category-head b { font-weight: 500; font-variant-numeric: tabular-nums; }
.over-category-head .dim {
  color: var(--mist); font-size: var(--size-2xs); width: 2.2rem; text-align: right;
}

.over-category-bar {
  height: 4px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}
.over-category-bar i { display: block; height: 100%; }

/* ---------- the side lists ---------- */

.over-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0; font-size: var(--size-sm);
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.over-panel-head + .over-row { border-top: none; }
.over-row-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.over-row-when { font-size: var(--size-2xs); color: var(--mist); flex: none; }
.over-row b { font-weight: 500; font-variant-numeric: tabular-nums; flex: none; }
.over-row.is-late .over-row-when { color: var(--accent-lacquer); }

.over-pot { border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }
.over-pot:first-of-type { border-top: none; }
.over-pot .over-row { border-top: none; padding-bottom: 0.25rem; }
.over-pot .over-category-bar { margin-bottom: 0.5rem; }

@media (max-width: 58rem) {
  .over-top, .over-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .over-month-body { flex-direction: column; align-items: stretch; }
  .over-month-body .chart-ring { align-self: center; }
}

/* Drop 138, at her word: the palace's one progress bar - savings that grow toward their goal. */
.silver-pot .ledger-bar i, .vault-sum:not(.debt) .vault-sum-bar i { background: var(--progress-fill); border-radius: 999px; }


/* ---- daybook.css ---- */
/* ============================================================
   forbidden-imperial.city — the Imperial Daybook (Drop 155)
   Location: public_html/assets/css/daybook.css

   Her planner-and-docket, on the palace's main page. Every rule sits
   under .daybook, the sample's own inks are --d-* names, and every
   colour is one of the daybook's tones in tokens.css (--db-tone-*).
   ============================================================ */
.daybook *{box-sizing:border-box}
.daybook{margin:0;background:var(--d-canvas);color:var(--d-ink);font-family:var(--d-sans);font-size:14px;line-height:1.5;background-image:radial-gradient(color-mix(in srgb, var(--db-tone-17) 7%, transparent) .8px,transparent .8px);background-size:7px 7px}
.daybook button,.daybook input,.daybook select,.daybook textarea{font:inherit;color:inherit}
.daybook button{cursor:pointer}
.daybook button:disabled{cursor:default;opacity:.45}
.daybook button,.daybook a,.daybook input,.daybook select,.daybook textarea{outline-offset:4px}
.daybook button:focus-visible,.daybook a:focus-visible,.daybook input:focus-visible,.daybook textarea:focus-visible,.daybook select:focus-visible{outline:2px solid var(--d-jade)}
.daybook button{transition:background .16s,transform .16s,box-shadow .16s}
.daybook button:hover:not(:disabled){filter:brightness(.97)}
.daybook button:active:not(:disabled){transform:translateY(1px)}
.daybook a{color:var(--d-jade)}
.daybook svg{display:block;max-width:100%}
.daybook h1,.daybook h2,.daybook h3,.daybook h4,.daybook p{margin:0}
.daybook h1,.daybook h2,.daybook h3,.daybook h4{font-weight:400}
.daybook h1,.daybook h2,.daybook h3{font-family:var(--d-serif)}
.daybook h1{font-size:48px;line-height:1.04;letter-spacing:-1.5px}
.daybook h2{font-size:27px;line-height:1.2}
.daybook h3{font-size:21px;line-height:1.25}
.daybook small{font-size:11px}
.daybook input,.daybook select,.daybook textarea{border:1px solid var(--d-line);background:var(--d-paper);border-radius:8px;padding:9px 11px;min-width:0}
.daybook textarea{resize:vertical;line-height:1.65}
.daybook input[type=checkbox]{accent-color:var(--d-jade);width:17px;height:17px;flex-shrink:0}
.daybook input[type=color]{padding:2px;width:44px;height:35px}
.daybook input[type=date]{font-size:13px}
.daybook input[type=file]{max-width:100%}
.daybook button{border:0;background:none}
.daybook button svg{pointer-events:none}
.daybook .icon{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;flex-shrink:0}
.daybook .icon svg{width:100%;height:100%}
.daybook .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border-radius:8px;border:1px solid var(--d-line);background:var(--d-paper);font-size:12px;font-weight:600;white-space:nowrap}
.daybook .btn.primary{background:var(--d-jade);color:var(--db-tone-47);border-color:var(--d-jade)}
.daybook .btn.gold{background:var(--db-tone-45);color:var(--db-tone-12);border-color:var(--db-tone-38)}
.daybook .btn.soft{background:var(--d-light);border-color:transparent}
.daybook .btn.small{padding:6px 10px;font-size:11px}
.daybook .btn.danger{color:var(--db-tone-15);border-color:var(--db-tone-37)}
.daybook .btn.circle{border-radius:50%;width:35px;height:35px;padding:7px}
.daybook .btn:disabled:hover{filter:none}
.daybook .icon-btn{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:var(--d-muted);flex-shrink:0}
.daybook .icon-btn:hover{background:var(--d-light)}
.daybook .text-btn{font-size:12px;color:var(--d-jade);padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.daybook .tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;line-height:1.4;padding:4px 7px;border-radius:4px;background:var(--d-light);color:var(--d-jade);white-space:nowrap}
.daybook .tag.rose{background:var(--d-rose);color:var(--d-rose-ink)}
.daybook .tag.blue{background:var(--d-blue);color:var(--d-blue-ink)}
.daybook .tag.gold{background:var(--db-tone-45);color:var(--db-tone-14)}
.daybook .tag.lilac{background:var(--d-lilac);color:var(--d-lavender-ink)}
.daybook .eyebrow{font-size:10px;letter-spacing:2.1px;text-transform:uppercase;font-weight:600}
.daybook .muted{color:var(--d-muted)}
.daybook .tiny{font-size:11px}
.daybook .italic{font-family:var(--d-serif);font-style:italic}
.daybook .row{display:flex;align-items:center;gap:9px}
.daybook .between{justify-content:space-between}
.daybook .wrap{flex-wrap:wrap}
.daybook .gap{gap:16px}
.daybook .stack{display:flex;flex-direction:column;gap:16px}
.daybook .grow{flex:1;min-width:0}
.daybook .hidden{display:none!important}
.daybook .divider{height:1px;background:var(--d-line);margin:16px 0}
.daybook .rule-title{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.daybook .rule-title::after{content:'';height:1px;background:var(--d-line);flex:1}
.daybook .rule-title span{white-space:nowrap}
.daybook .empty{padding:20px 12px;text-align:center;color:var(--d-muted);font-size:12px;border:1px dashed var(--d-line);border-radius:10px}
.daybook .empty .icon{margin:0 auto 9px}
.daybook .upper{font-size:10px;text-transform:uppercase;letter-spacing:1.1px}
.daybook .save-error{background:var(--db-tone-37);border-bottom:1px solid var(--db-tone-21);padding:10px;text-align:center;color:var(--db-tone-08);font-size:12px}
.daybook .appbar{background:var(--d-deep);color:var(--db-tone-46);min-height:77px;padding:15px max(24px,calc((100vw - 1360px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}
.daybook .brand{display:flex;align-items:center;gap:13px}
.daybook .brand-emblem{width:43px;height:43px;color:var(--db-tone-33);display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb, var(--db-tone-33) 33%, transparent);border-radius:50%}
.daybook .brand-emblem .icon{width:28px;height:28px}
.daybook .brand-name{font-family:var(--d-serif);font-size:23px;line-height:1.2}
.daybook .brand-sub{font-size:9px;letter-spacing:2px;color:var(--db-tone-35);text-transform:uppercase;margin-top:3px}
.daybook .bar-right{display:flex;align-items:center;gap:8px}
.daybook .bar-right .btn{background:transparent;color:var(--db-tone-46);border-color:color-mix(in srgb, var(--db-tone-48) 19%, transparent)}
.daybook .bar-right .btn.add{background:var(--db-tone-41);color:var(--db-tone-07);border-color:var(--db-tone-41)}
.daybook .saved{font-size:10px;color:var(--db-tone-35);display:flex;align-items:center;gap:6px;margin-right:10px}
.daybook .saved::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--db-tone-40)}
.daybook .workspace{max-width:1412px;margin:0 auto;padding:26px 30px 50px}
.daybook .desk-line{display:flex;align-items:center;justify-content:space-between;padding:0 6px 20px;gap:15px}
.daybook .desk-line p{font-family:var(--d-serif);font-style:italic;color:var(--d-muted);font-size:16px}
.daybook .demo-badge{font-size:10px;border:1px solid var(--db-tone-38);color:var(--db-tone-12);border-radius:20px;padding:4px 9px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.daybook .demo-badge button{font-size:10px;color:var(--db-tone-13);padding:0;text-decoration:underline}
.daybook .tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 25px;align-items:end}
.daybook .deck-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;border-radius:14px 14px 0 0;border:1px solid var(--db-tone-36);border-bottom:0;padding:14px 18px 12px;min-height:66px;background:var(--db-tone-43);color:var(--d-ink);box-shadow:0 -3px 5px color-mix(in srgb, var(--db-tone-11) 1%, transparent)}
.daybook .deck-tab:nth-child(2){background:var(--db-tone-45)}
.daybook .deck-tab:nth-child(3){background:var(--db-tone-42)}
.daybook .deck-tab:nth-child(4){background:var(--db-tone-44)}
.daybook .deck-tab:nth-child(5){background:var(--db-tone-44)}
.daybook .deck-tab .tab-art{width:27px;height:27px;opacity:.8}
.daybook .deck-tab .tab-text{text-align:left;font-family:var(--d-serif);font-size:18px}
.daybook .deck-tab .tab-text small{display:block;font-family:var(--d-sans);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;opacity:.72}
.daybook .deck-tab.active{background:var(--d-page);padding-top:20px;min-height:74px;box-shadow:0 -5px 12px color-mix(in srgb, var(--db-tone-07) 4%, transparent);z-index:2;border-color:var(--db-tone-36)}
.daybook .deck-tab.active::after{content:'';height:5px;position:absolute;bottom:-3px;left:0;right:0;background:var(--d-page)}
.daybook .notebook{position:relative;background:var(--d-page);border:1px solid var(--db-tone-36);border-radius:16px;box-shadow:0 3px 0 -1px var(--db-tone-47),0 5px 0 -1px var(--db-tone-36),0 7px 0 -1px var(--db-tone-47),0 9px 0 -1px var(--db-tone-36),var(--d-shadow);min-height:850px;padding:24px 32px 30px;overflow:visible}
.daybook .notebook::before{content:'';position:absolute;top:20px;left:13px;bottom:20px;width:1px;background:linear-gradient(transparent,var(--db-tone-36) 5%,var(--db-tone-36) 95%,transparent);opacity:.6;pointer-events:none}
.daybook .notebook::after{content:'';position:absolute;top:20px;right:13px;bottom:20px;width:1px;background:linear-gradient(transparent,var(--db-tone-36) 5%,var(--db-tone-36) 95%,transparent);opacity:.6;pointer-events:none}
.daybook .page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;position:relative;z-index:2}
.daybook .page-nav{display:flex;gap:6px;align-items:center}
.daybook .page-nav button{font-size:12px}
.daybook .period{font-family:var(--d-serif);font-size:18px;min-width:140px;text-align:center;margin-right:6px}
.daybook .toolbar-actions{display:flex;gap:7px}
.daybook .toolbar-actions .btn{background:transparent}
.daybook .date-jump{border:0;background:transparent;font-size:11px;width:133px;padding:4px}
.daybook .sheet-head{display:grid;grid-template-columns:1fr 38%;gap:15px;min-height:194px;position:relative;margin-bottom:17px;align-items:center;border-bottom:1px solid var(--d-line)}
.daybook .sheet-title{padding:7px 0 22px 3px;position:relative;z-index:1}
.daybook .sheet-title .eyebrow{color:var(--d-gold);margin-bottom:14px}
.daybook .sheet-title h1{max-width:650px}
.daybook .sheet-title .subtitle{font-family:var(--d-serif);font-style:italic;font-size:16px;color:var(--d-muted);margin-top:12px;max-width:510px}
.daybook .sheet-art{height:204px;align-self:end;overflow:hidden}
.daybook .sheet-art svg{width:100%;height:100%}
.daybook .date-seal{position:absolute;width:64px;height:66px;border:1px solid var(--db-tone-22);display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:4px;right:13px;top:7px;z-index:1;transform:rotate(7deg);background:color-mix(in srgb, var(--db-tone-46) 93%, transparent);color:var(--db-tone-19);outline:1px solid var(--db-tone-22);outline-offset:-5px;font-family:var(--d-serif);font-size:24px;line-height:1}
.daybook .date-seal small{font-family:var(--d-sans);font-size:8px;letter-spacing:1px;margin-top:5px}
.daybook .focus-ribbon{display:flex;align-items:center;gap:16px;border-radius:5px;background:var(--d-jade);color:var(--db-tone-46);padding:14px 20px;margin:0 0 25px;position:relative}
.daybook .focus-ribbon::after{content:'';width:12px;position:absolute;right:-9px;top:0;bottom:0;background:var(--d-deep);clip-path:polygon(0 0,100% 0,50% 50%,100% 100%,0 100%)}
.daybook .focus-ribbon .icon{color:var(--db-tone-33);width:27px;height:27px}
.daybook .focus-ribbon .upper{color:var(--db-tone-40);display:block;font-size:9px;letter-spacing:1.6px;margin-bottom:3px}
.daybook .focus-input{display:block;background:none;border:0;padding:0;font-family:var(--d-serif);font-size:19px;color:inherit;width:100%;border-radius:0}
.daybook .focus-input::placeholder{color:var(--db-tone-46)}
.daybook .ribbon-progress{display:flex;align-items:center;gap:10px;margin-left:auto;white-space:nowrap;font-size:11px}
.daybook .ribbon-progress .ring{width:38px;height:38px}
.daybook .ring text{font-size:12px;fill:currentColor;font-family:var(--d-sans)}
.daybook .daily-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(260px,1fr);gap:25px}
.daybook .block-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.daybook .block-card{position:relative;border:1px solid var(--d-line);border-radius:9px;background:var(--d-paper);min-height:182px;box-shadow:0 4px 9px color-mix(in srgb, var(--db-tone-11) 2%, transparent);overflow:hidden}
.daybook .block-card.wide{grid-column:span 2}
.daybook .block-heading{display:flex;align-items:center;gap:10px;background:var(--d-mint);padding:12px 14px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-20) 10%, transparent)}
.daybook .block-heading.rose{background:var(--d-rose);color:var(--d-rose-ink)}
.daybook .block-heading.lilac{background:var(--d-lilac);color:var(--d-lavender-ink)}
.daybook .block-heading.blue{background:var(--d-blue);color:var(--d-blue-ink)}
.daybook .block-heading.gold{background:var(--db-tone-45);color:var(--db-tone-14)}
.daybook .block-heading .icon{width:22px;height:22px}
.daybook .block-heading h3{font-size:19px}
.daybook .block-heading small{display:block;font-size:9px;letter-spacing:1.1px;margin-top:1px}
.daybook .block-number{font-family:var(--d-serif);font-size:27px;font-style:italic;opacity:.32;margin-left:auto}
.daybook .block-body{padding:8px 12px 12px}
.daybook .task-line{display:flex;align-items:flex-start;gap:9px;padding:9px 2px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-36) 24%, transparent);position:relative}
.daybook .task-line:last-child{border-bottom:0}
.daybook .tick{width:18px;height:18px;flex-shrink:0;border:1px solid var(--db-tone-27);border-radius:4px;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;margin-top:2px;color:var(--db-tone-48)}
.daybook .tick .icon{width:13px;height:13px}
.daybook .tick.done{background:var(--d-jade);border-color:var(--d-jade)}
.daybook .task-text{flex:1;min-width:0;font-size:13px;line-height:1.4;text-align:left;padding:0}
.daybook .task-text span{display:block}
.daybook .task-meta{font-size:9px;color:var(--d-muted);margin-top:3px;letter-spacing:.1px}
.daybook .task-line.checked .task-title{text-decoration:line-through;text-decoration-color:var(--db-tone-27);color:var(--d-muted)}
.daybook .task-title{overflow-wrap:anywhere}
.daybook .task-line .icon-btn{width:21px;height:23px;opacity:.4}
.daybook .task-line:hover .icon-btn,.daybook .task-line:focus-within .icon-btn{opacity:1}
.daybook .task-line .icon-btn .icon{width:14px;height:14px}
.daybook .block-add{display:flex;gap:6px;align-items:center;padding:7px 0 2px;font-size:10px;color:var(--d-muted)}
.daybook .block-add .icon{width:12px;height:12px}
.daybook .mini-empty{font-size:11px;color:var(--d-muted);font-style:italic;font-family:var(--d-serif);padding:13px 0 9px}
.daybook .sticky-card{position:relative;padding:18px 17px;border-radius:2px;background:var(--db-tone-45);box-shadow:2px 4px 0 color-mix(in srgb, var(--db-tone-14) 4%, transparent);transform:rotate(-.6deg);border:1px solid color-mix(in srgb, var(--db-tone-41) 34%, transparent)}
.daybook .sticky-card::before{content:'';width:68px;height:19px;background:color-mix(in srgb, var(--db-tone-38) 50%, transparent);position:absolute;top:-9px;left:calc(50% - 34px);transform:rotate(-5deg);clip-path:polygon(2% 0,98% 0,94% 20%,100% 40%,96% 70%,100% 100%,0 100%,3% 80%,0 50%,4% 30%)}
.daybook .sticky-card.rose{background:var(--db-tone-42);border-color:var(--db-tone-37)}
.daybook .sticky-card.mint{background:var(--db-tone-43);border-color:var(--db-tone-46)}
.daybook .sticky-card h3{font-size:21px;margin-bottom:10px}
.daybook .blank-text{display:block;width:100%;border:0;border-radius:0;background:transparent;padding:4px 0;resize:vertical;font-size:13px;line-height:1.9;min-height:88px}
.daybook .ruled{background-image:repeating-linear-gradient(transparent,transparent 27px,color-mix(in srgb, var(--db-tone-28) 30%, transparent) 27px,color-mix(in srgb, var(--db-tone-28) 30%, transparent) 28px);line-height:28px;background-attachment:local;min-height:89px}
.daybook .paper-card{padding:17px;border:1px solid var(--d-line);border-radius:8px;background:var(--d-paper);position:relative}
.daybook .paper-card .card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}
.daybook .paper-card .card-top h3{font-size:21px}
.daybook .plain-box{margin-top:21px;border:1px dashed var(--db-tone-35);border-radius:8px;padding:15px 17px;background:linear-gradient(120deg,color-mix(in srgb, var(--db-tone-46) 33%, transparent),transparent)}
.daybook .plain-box .plain-help{font-size:10px;color:var(--d-muted);margin-top:3px}
.daybook .quick-add{display:flex;gap:7px;padding-top:9px}
.daybook .quick-add input{flex:1;background:transparent;border:0;border-bottom:1px solid var(--d-line);border-radius:0;padding:7px 2px;font-size:12px;width:100%}
.daybook .quick-add button{padding:4px 7px;color:var(--d-jade)}
.daybook .priorities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 23px}
.daybook .priority-card{padding:12px 12px 13px;background:var(--db-tone-46);border:1px solid color-mix(in srgb, var(--db-tone-38) 27%, transparent);border-radius:5px;min-height:108px;position:relative;text-align:left}
.daybook .priority-card:nth-child(2){background:var(--db-tone-43)}
.daybook .priority-card:nth-child(3){background:var(--db-tone-42)}
.daybook .priority-card .num{font-family:var(--d-serif);color:var(--d-gold);font-style:italic;font-size:24px;line-height:1;display:block;margin-bottom:8px}
.daybook .priority-card .label{font-size:12px;line-height:1.4;display:block}
.daybook .priority-card .pin{position:absolute;right:10px;top:11px;color:var(--d-gold);width:12px;height:12px}
.daybook .priority-card.empty-priority{border-style:dashed;opacity:.8}
.daybook .priority-card.completed .label{text-decoration:line-through;color:var(--d-muted)}
.daybook .mood-row{display:flex;gap:6px;justify-content:space-between;margin:12px 0 5px}
.daybook .mood-button{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;padding:5px 2px;border:1px solid transparent;border-radius:8px;font-size:8px;color:var(--d-muted)}
.daybook .mood-button .icon{width:27px;height:27px}
.daybook .mood-button[aria-pressed=true]{background:var(--d-light);border-color:var(--d-leaf);color:var(--d-jade)}
.daybook .mood-note{font-size:11px;width:100%;padding:7px 0;border:0;border-bottom:1px solid var(--d-line);border-radius:0;background:transparent}
.daybook .meal-line{display:grid;grid-template-columns:20px 65px 1fr;align-items:center;gap:6px;margin:7px 0}
.daybook .meal-line .icon{width:16px;height:16px;color:var(--d-rose-ink)}
.daybook .meal-line span{font-size:10px;color:var(--d-rose-ink)}
.daybook .meal-line input{border:0;border-bottom:1px solid color-mix(in srgb, var(--db-tone-22) 23%, transparent);border-radius:0;background:transparent;font-size:12px;padding:5px 0;width:100%}
.daybook .timeline{display:flex;flex-direction:column;gap:0}
.daybook .time-event{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:8px 0;position:relative;font-size:11px}
.daybook .time-event time{color:var(--d-muted);font-size:10px;padding-top:1px}
.daybook .time-event .event-body{padding-left:11px;border-left:2px solid var(--db-tone-38);min-width:0}
.daybook .time-event button{text-align:left;padding:0;font-size:12px;width:100%;overflow-wrap:anywhere}
.daybook .time-event .source{display:block;font-size:9px;color:var(--d-muted);margin-top:3px}
.daybook .time-event.done .event-body{text-decoration:line-through;color:var(--d-muted)}
.daybook .photo-note{padding:10px 10px 28px;background:var(--db-tone-47);border:1px solid var(--d-line);transform:rotate(1deg);box-shadow:1px 4px 8px color-mix(in srgb, var(--db-tone-07) 5%, transparent);position:relative}
.daybook .photo-note .photo-wrap{position:relative;height:154px;background:var(--db-tone-43);overflow:hidden;display:flex;align-items:center;justify-content:center}
.daybook .photo-wrap img{width:100%;height:100%;object-fit:cover}
.daybook .photo-wrap .illustration{width:100%;height:100%}
.daybook .photo-note .caption{font-family:var(--d-serif);font-style:italic;text-align:center;display:block;font-size:14px;margin-top:8px;width:100%;border:0;padding:0;background:transparent}
.daybook .photo-upload{position:absolute;bottom:6px;right:6px;background:color-mix(in srgb, var(--db-tone-47) 93%, transparent);border:1px solid var(--db-tone-36);border-radius:4px;padding:4px 7px;font-size:10px}
.daybook .photo-note .clear-photo{position:absolute;top:6px;right:6px;background:color-mix(in srgb, var(--db-tone-47) 94%, transparent);border-radius:50%;padding:4px}
.daybook .photo-note .clear-photo .icon{width:12px;height:12px}
.daybook .page-footer{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--d-muted);letter-spacing:1px;text-transform:uppercase;border-top:1px solid var(--d-line);margin-top:27px;padding:14px 0 0}
.daybook .page-footer .ornament{font-family:var(--d-serif);font-size:16px;letter-spacing:7px;color:var(--d-gold)}
.daybook .desk-footer{display:flex;justify-content:space-between;color:var(--d-muted);font-size:10px;margin:22px 8px 0;gap:15px}
.daybook .desk-footer button{font-size:10px;text-decoration:underline;color:var(--d-muted)}
.daybook .stickers-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden;border-radius:16px}
.daybook .placed-sticker{position:absolute;pointer-events:auto;touch-action:none;width:75px;height:75px;cursor:grab;filter:drop-shadow(1px 3px 1px color-mix(in srgb, var(--db-tone-07) 13%, transparent));transform:rotate(var(--rotate,0deg));padding:0;background:none;transition:none;border-radius:9px}
.daybook .placed-sticker:hover,.daybook .placed-sticker.selected{outline:1px dashed var(--d-gold);outline-offset:4px}
.daybook .placed-sticker:active{cursor:grabbing;transform:rotate(var(--rotate,0deg))}
.daybook .placed-sticker svg{width:100%;height:100%}
.daybook .sticker-controls{position:absolute;pointer-events:auto;background:var(--d-paper);border:1px solid var(--d-line);padding:4px;display:flex;gap:3px;box-shadow:var(--d-shadow);border-radius:7px}
.daybook .sticker-controls .icon-btn{width:23px;height:23px}
.daybook .sticker-controls .icon{width:14px;height:14px}
.daybook .sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.daybook .sticker-option{border:1px solid var(--d-line);padding:14px 8px 9px;border-radius:10px;background:var(--d-paper);display:flex;align-items:center;flex-direction:column;gap:8px;font-size:11px}
.daybook .sticker-option svg{height:70px;width:70px}
.daybook .sticker-option:hover{background:var(--d-light)}
.daybook .confetti{position:fixed;z-index:300;pointer-events:none;width:6px;height:10px;border-radius:2px;animation:daybook-fall 950ms ease-out forwards}
@keyframes daybook-fall{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(240deg);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .daybook *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  .daybook .confetti{display:none}
}
.daybook .deck-intro{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.daybook .deck-intro .sticky-card{transform:none}
.daybook .goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 24px}
.daybook .goal-card{border:1px solid var(--d-line);background:var(--d-paper);padding:17px;border-radius:9px;position:relative;min-height:152px}
.daybook .goal-card .goal-head{display:flex;justify-content:space-between;gap:9px;margin-bottom:8px}
.daybook .goal-card .goal-head .icon{color:var(--d-gold);width:22px;height:22px}
.daybook .goal-card h3{font-size:19px;margin:9px 0}
.daybook .goal-card .goal-detail{font-size:11px;line-height:1.6;color:var(--d-muted);margin-bottom:12px}
.daybook .progress-track{height:5px;border-radius:8px;background:color-mix(in srgb, var(--db-tone-43) 31%, transparent);overflow:hidden;margin-top:8px}
.daybook .progress-track span{display:block;height:100%;border-radius:8px;background:var(--d-leaf)}
.daybook .goal-add{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--db-tone-35);background:color-mix(in srgb, var(--db-tone-43) 40%, transparent);color:var(--d-muted);gap:9px;border-radius:9px;min-height:152px;font-size:12px}
.daybook .seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:15px 0 25px}
.daybook .season{position:relative;border:1px solid var(--d-line);background:var(--d-paper);border-radius:10px;overflow:hidden;text-align:left;padding:0;box-shadow:0 4px 8px color-mix(in srgb, var(--db-tone-07) 2%, transparent)}
.daybook .season-picture{height:100px;position:relative;overflow:hidden;background:var(--d-light)}
.daybook .season-picture svg{width:100%;height:135px;position:absolute;bottom:0}
.daybook .season:nth-child(2) .season-picture{background:var(--db-tone-46)}
.daybook .season:nth-child(3) .season-picture{background:var(--db-tone-45)}
.daybook .season:nth-child(4) .season-picture{background:var(--db-tone-44)}
.daybook .season .season-text{padding:13px 15px}
.daybook .season .season-text .eyebrow{font-size:9px;color:var(--d-gold);letter-spacing:1px}
.daybook .season h3{margin:3px 0 5px;font-size:23px}
.daybook .season .season-meta{font-size:10px;color:var(--d-muted)}
.daybook .year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.daybook .mini-month{background:var(--d-paper);border:1px solid var(--d-line);padding:14px;border-radius:8px;text-align:left;min-width:0}
.daybook .mini-month .month-title{font-family:var(--d-serif);font-size:20px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.daybook .mini-month .month-title button{font-family:inherit;font-size:inherit;padding:0}
.daybook .mini-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.daybook .mini-weekday{font-size:8px;color:var(--d-muted);padding:3px}
.daybook .mini-day{font-size:10px;min-height:24px;padding:2px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1}
.daybook .mini-day:hover{background:var(--d-light)}
.daybook .mini-day.event::after{content:'';position:absolute;bottom:2px;width:3px;height:3px;border-radius:50%;background:var(--d-gold)}
.daybook .mini-day.today{background:var(--d-jade);color:var(--db-tone-48)}
.daybook .mini-day.today::after{background:var(--db-tone-38)}
.daybook .mini-day.hasmood{box-shadow:inset 0 0 0 1px var(--db-tone-40)}
.daybook .mini-day.off{opacity:.2}
.daybook .mini-month .month-foot{font-size:9px;margin-top:9px;color:var(--d-muted);border-top:1px solid var(--d-line);padding-top:7px}
.daybook .year-bottom{display:grid;grid-template-columns:1.8fr 1fr;gap:24px;margin-top:25px}
.daybook .quarter-road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px;margin-top:22px}
.daybook .quarter-month{position:relative;padding:0 0 12px;min-width:0}
.daybook .quarter-month::before{content:'';position:absolute;left:0;top:23px;right:-21px;border-top:1px dashed var(--db-tone-31)}
.daybook .quarter-month:last-child::before{right:0}
.daybook .quarter-month .road-node{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:16px;background:var(--d-page);width:max-content;padding-right:10px}
.daybook .road-node .road-number{background:var(--d-jade);color:var(--db-tone-45);border-radius:50%;font-family:var(--d-serif);font-style:italic;font-size:22px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;border:5px solid var(--d-page)}
.daybook .road-node h3{font-size:23px}
.daybook .quarter-month .month-notes{background:var(--d-paper);border:1px solid var(--d-line);padding:16px;border-radius:8px;margin-top:14px}
.daybook .month-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(240px,1fr);gap:22px}
.daybook .calendar-wrap{min-width:0}
.daybook .calendar-legend{display:flex;gap:11px;align-items:center;flex-wrap:wrap;font-size:9px;color:var(--d-muted);padding:10px 0}
.daybook .dot{width:6px;height:6px;border-radius:50%;background:var(--d-jade);display:inline-block;margin-right:4px}
.daybook .dot.rose{background:var(--db-tone-25)}
.daybook .dot.blue{background:var(--db-tone-23)}
.daybook .dot.gold{background:var(--db-tone-30)}
.daybook .calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--d-line);border-radius:8px;overflow:hidden;background:var(--d-paper)}
.daybook .cal-dow{padding:10px 0;background:var(--d-light);text-align:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--d-line)}
.daybook .cal-cell{min-height:126px;padding:7px;border-right:1px solid var(--d-line);border-bottom:1px solid var(--d-line);position:relative;min-width:0;cursor:pointer}
.daybook .cal-cell:nth-child(7n){border-right:0}
.daybook .cal-cell:nth-last-child(-n+7){border-bottom:0}
.daybook .cal-cell.off{background:color-mix(in srgb, var(--db-tone-43) 33%, transparent);color:var(--db-tone-27)}
.daybook .cal-cell:hover{background:color-mix(in srgb, var(--db-tone-43) 44%, transparent)}
.daybook .cal-cell.today{background:color-mix(in srgb, var(--db-tone-43) 38%, transparent)}
.daybook .cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.daybook .cal-num{border-radius:50%;height:23px;width:23px;display:flex;align-items:center;justify-content:center;font-size:12px}
.daybook .cal-cell.today .cal-num{background:var(--d-jade);color:var(--db-tone-48)}
.daybook .cal-top .icon{width:13px;height:13px;color:var(--d-gold)}
.daybook .cal-entry{display:block;padding:3px 4px;border-radius:3px;background:var(--d-light);margin-bottom:3px;font-size:9px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.4;color:var(--d-jade)}
.daybook .cal-entry.event{background:var(--d-blue);color:var(--d-blue-ink)}
.daybook .cal-entry.renewal{background:var(--db-tone-45);color:var(--db-tone-14)}
.daybook .cal-entry.meal{background:var(--d-rose);color:var(--d-rose-ink)}
.daybook .cal-entry.done{text-decoration:line-through;opacity:.7}
.daybook .cal-more{font-size:8px;color:var(--d-muted);padding-top:3px}
.daybook .week-scroller{overflow-x:auto;padding-bottom:7px}
.daybook .week-grid{display:grid;grid-template-columns:repeat(7,minmax(135px,1fr));min-width:945px;gap:10px}
.daybook .week-day{border:1px solid var(--d-line);background:var(--d-paper);border-radius:8px;overflow:hidden;min-height:350px}
.daybook .week-day.today{border-color:var(--d-leaf);box-shadow:0 0 0 1px color-mix(in srgb, var(--db-tone-20) 20%, transparent)}
.daybook .week-head{display:flex;justify-content:space-between;align-items:center;gap:7px;background:var(--db-tone-43);padding:12px 11px;width:100%;text-align:left}
.daybook .week-day:nth-child(2) .week-head,.daybook .week-day:nth-child(6) .week-head{background:var(--db-tone-42)}
.daybook .week-day:nth-child(3) .week-head,.daybook .week-day:nth-child(7) .week-head{background:var(--db-tone-44)}
.daybook .week-day:nth-child(4) .week-head{background:var(--db-tone-43)}
.daybook .week-day:nth-child(5) .week-head{background:var(--db-tone-46)}
.daybook .week-head .week-number{font-family:var(--d-serif);font-size:31px;line-height:1}
.daybook .week-head .upper{font-size:8px}
.daybook .week-head .icon{width:16px;height:16px;color:var(--d-gold)}
.daybook .week-body{padding:10px}
.daybook .week-body .task-line{padding:8px 0;gap:6px}
.daybook .week-body .task-text{font-size:11px}
.daybook .week-body .task-meta{font-size:8px}
.daybook .week-body .tick{width:14px;height:14px;margin-top:1px}
.daybook .week-body .task-line .icon-btn{display:none}
.daybook .week-focus{font-family:var(--d-serif);font-style:italic;font-size:12px;color:var(--d-muted);min-height:47px;border-bottom:1px solid var(--d-line);padding-bottom:9px;margin-bottom:6px}
.daybook .week-add{font-size:9px;padding:8px 0;color:var(--d-muted);display:flex;align-items:center;gap:3px}
.daybook .week-add .icon{width:11px;height:11px}
.daybook .week-meal{font-size:9px;padding:8px 0;border-top:1px dashed var(--d-line);margin-top:8px;color:var(--d-rose-ink)}
.daybook .week-bottom{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;margin-top:21px}
.daybook .habit-table{width:100%;border-collapse:collapse;font-size:10px}
.daybook .habit-table th{font-weight:400;color:var(--d-muted);padding:6px 2px}
.daybook .habit-table td{padding:5px 2px;border-bottom:1px solid var(--d-line)}
.daybook .habit-table td:first-child{text-align:left;width:45%;padding-right:10px}
.daybook .habit-table th:first-child{text-align:left}
.daybook .habit-table td:not(:first-child){text-align:center}
.daybook .habit-dot{border:1px solid var(--db-tone-35);background:none;border-radius:50%;width:17px;height:17px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.daybook .habit-dot.done{background:var(--d-jade);border-color:var(--d-jade);color:var(--db-tone-48)}
.daybook .habit-dot .icon{width:10px;height:10px}
.daybook .habit-dot:disabled{border-style:dashed;background:var(--db-tone-43)}
.daybook .week-options{display:flex;align-items:center;gap:7px;font-size:11px;margin-bottom:13px}
.daybook .long-note{margin-top:20px}
.daybook .today-chip{font-size:9px;border-radius:12px;padding:3px 7px;background:var(--d-light);color:var(--d-jade)}
.daybook .modal-backdrop{position:fixed;inset:0;background:color-mix(in srgb, var(--db-tone-03) 45%, transparent);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;padding:22px}
.daybook .modal{background:var(--d-page);border:1px solid var(--db-tone-39);border-radius:15px;width:min(630px,100%);max-height:90vh;overflow:auto;box-shadow:0 30px 80px color-mix(in srgb, var(--db-tone-03) 28%, transparent);position:relative}
.daybook .modal.wide{width:min(850px,100%)}
.daybook .modal.drawer{margin-left:auto;height:calc(100vh - 44px);max-height:none;width:min(570px,100%);border-radius:14px}
.daybook .modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:23px 25px 17px;border-bottom:1px solid var(--d-line);background:var(--d-page);position:sticky;top:0;z-index:2}
.daybook .modal-header h2{font-size:29px}
.daybook .modal-header p{font-size:11px;color:var(--d-muted);margin-top:6px}
.daybook .modal-body{padding:23px 25px}
.daybook .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.daybook .form-grid .full{grid-column:1/-1}
.daybook .field{display:flex;flex-direction:column;gap:5px;font-size:11px}
.daybook .field>span:first-child{font-weight:600;font-size:11px}
.daybook .field small{color:var(--d-muted);font-size:10px}
.daybook .field input,.daybook .field select,.daybook .field textarea{width:100%}
.daybook .field textarea{min-height:85px}
.daybook .check-field{display:flex;align-items:center;gap:7px;font-size:12px;margin:9px 0}
.daybook .form-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:23px;border-top:1px solid var(--d-line);padding-top:17px}
.daybook .form-actions .right{display:flex;gap:8px}
.daybook .inline-help{font-size:11px;line-height:1.6;color:var(--d-muted);padding:11px 13px;background:var(--d-light);border-radius:7px;margin-bottom:16px}
.daybook .bank-filters{display:grid;grid-template-columns:1fr 145px;gap:8px;margin-bottom:15px}
.daybook .bank-filters input,.daybook .bank-filters select{font-size:12px;width:100%}
.daybook .bank-summary{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.daybook .bank-summary button{font-size:10px;padding:5px 8px;border:1px solid var(--d-line);border-radius:5px}
.daybook .bank-summary button.active{background:var(--d-jade);color:var(--db-tone-48);border-color:var(--d-jade)}
.daybook .bank-item{padding:13px 0;border-bottom:1px solid var(--d-line);display:flex;gap:12px;align-items:center}
.daybook .bank-item .bank-title{font-family:var(--d-serif);font-size:18px;margin:3px 0}
.daybook .bank-item .bank-meta{font-size:10px;color:var(--d-muted);margin-top:4px}
.daybook .bank-item .bank-actions{display:flex;align-items:center;gap:5px}
.daybook .bank-item .bank-actions .btn{font-size:10px;max-width:120px;white-space:normal}
.daybook .bank-item.completed .bank-title{text-decoration:line-through;color:var(--d-muted)}
.daybook .modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:17px}
.daybook .palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 21px}
.daybook .palette{border:1px solid var(--d-line);border-radius:8px;padding:12px 8px;background:var(--d-paper);font-size:11px;text-align:center}
.daybook .palette.active{outline:2px solid var(--d-jade);outline-offset:2px}
.daybook .swatches{display:flex;gap:4px;justify-content:center;margin-bottom:9px}
.daybook .swatches i{width:22px;height:22px;border-radius:50%}
.daybook .layout-item{display:grid;grid-template-columns:25px 42px 1fr 74px 58px;gap:7px;align-items:center;margin:12px 0}
.daybook .layout-item input,.daybook .layout-item select{width:100%;padding:8px 6px;font-size:11px}
.daybook .layout-item .order-controls{display:flex;align-items:center;gap:2px}
.daybook .layout-item .order-controls button{width:24px;height:29px;padding:4px;border:1px solid var(--d-line);border-radius:5px}
.daybook .layout-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;border:1px solid var(--d-line);background:var(--d-paper);padding:12px;border-radius:10px;margin:18px 0}
.daybook .layout-preview span{padding:12px;border-radius:5px;background:var(--d-light);font-size:11px}
.daybook .layout-preview span:first-child{grid-column:span 2}
.daybook .backup-options{display:flex;flex-direction:column;gap:10px;margin:17px 0}
.daybook .backup-option{display:flex;gap:12px;text-align:left;border:1px solid var(--d-line);padding:14px;border-radius:9px;background:var(--d-paper);align-items:center}
.daybook .backup-option>.icon{width:25px;height:25px;color:var(--d-gold)}
.daybook .backup-option strong{display:block;font-size:13px;font-weight:600}
.daybook .backup-option small{display:block;font-size:11px;line-height:1.5;color:var(--d-muted);margin-top:2px}
.daybook .note-label{font-size:11px;font-weight:600;display:block;margin:17px 0 6px}
.daybook .settings-title{font-family:var(--d-serif);font-size:22px;margin-top:24px}
.daybook .settings-title:first-child{margin-top:0}
.daybook .help-list{display:flex;flex-direction:column;gap:15px}
.daybook .help-row{display:flex;align-items:flex-start;gap:13px}
.daybook .help-row>.icon{color:var(--d-gold);width:23px;height:23px}
.daybook .help-row h4{font-family:var(--d-serif);font-size:19px}
.daybook .help-row p{font-size:12px;line-height:1.6;margin-top:4px;color:var(--d-muted)}
.daybook #db-toasts{position:fixed;right:22px;bottom:22px;z-index:250;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 44px)}
.daybook .toast{background:var(--d-deep);color:var(--db-tone-47);border:1px solid var(--db-tone-24);padding:13px 17px;box-shadow:var(--d-shadow);border-radius:9px;font-size:12px;max-width:400px;display:flex;align-items:center;gap:12px}
.daybook .toast button{color:var(--db-tone-33);text-decoration:underline;font-size:12px;white-space:nowrap;padding:3px}
.daybook .toast.error{background:var(--db-tone-08)}
.daybook .error-text{font-size:12px;color:var(--db-tone-15);margin:10px 0}
.daybook .mobile-hide{}
.daybook .no-print{}
.daybook .storage-note{font-size:11px;color:var(--d-muted);margin-top:11px;line-height:1.6}
@media(min-width:1500px){
  .daybook .notebook{padding:26px 38px 32px}
  .daybook .sheet-head{min-height:210px}
  .daybook .sheet-art{height:216px}
  .daybook .daily-grid{gap:30px}
  .daybook .block-grid{gap:20px}
  .daybook .block-body{padding:10px 16px 14px}
}
@media(max-width:1120px){
  .daybook .workspace{padding:24px 18px 35px}
  .daybook .notebook{padding:22px 24px}
  .daybook .appbar{padding:14px 25px}
  .daybook .bar-right .saved{display:none}
  .daybook .daily-grid{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:20px}
  .daybook h1{font-size:43px}
  .daybook .month-layout{grid-template-columns:1fr}
  .daybook .month-side{display:grid;grid-template-columns:repeat(3,1fr)}
  .daybook .cal-cell{min-height:130px}
  .daybook .week-bottom{grid-template-columns:1fr 1fr}
  .daybook .week-bottom> :last-child{grid-column:1/-1}
  .daybook .year-grid{grid-template-columns:repeat(3,1fr)}
  .daybook .tab-text{font-size:17px!important}
  .daybook .deck-tab{padding:13px 12px}
  .daybook .sheet-art{height:185px}
  .daybook .toolbar-actions .btn span.label{display:none}
}
@media(max-width:850px){
  .daybook .daily-grid{grid-template-columns:1fr}
  .daybook .daily-side{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:22px}
  .daybook .daily-side .photo-note{grid-column:span 1}
  .daybook .appbar{padding:14px 18px}
  .daybook .brand-name{font-size:20px}
  .daybook .brand-sub{font-size:8px}
  .daybook .bar-right .btn:not(.add){padding:8px}
  .daybook .bar-right .btn .label{display:none}
  .daybook .deck-tab{padding:12px 6px;gap:6px}
  .daybook .deck-tab .tab-art{width:22px;height:22px}
  .daybook .deck-tab .tab-text{font-size:16px!important}
  .daybook .deck-tab .tab-text small{font-size:8px;letter-spacing:.6px}
  .daybook .sheet-head{grid-template-columns:1fr 34%}
  .daybook .sheet-title .subtitle{font-size:14px}
  .daybook .sheet-art{height:168px}
  .daybook .sheet-title h1{font-size:39px}
  .daybook .period{font-size:16px;min-width:110px}
  .daybook .date-jump{width:126px}
  .daybook .quarter-road{gap:12px}
  .daybook .quarter-month::before{right:-12px}
  .daybook .quarter-month .mini-month{padding:9px}
  .daybook .goal-grid{gap:10px}
  .daybook .goal-card{padding:13px}
  .daybook .seasons{gap:10px}
  .daybook .season .season-text{padding:10px}
  .daybook .season h3{font-size:21px}
  .daybook .month-side{grid-template-columns:1fr 1fr}
  .daybook .month-side> :last-child{grid-column:1/-1}
  .daybook .desk-line{padding-bottom:16px}
  .daybook .desk-line p{font-size:14px}
  .daybook .priorities{gap:12px}
  .daybook .season-picture{height:77px}
  .daybook .year-bottom{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .daybook .workspace{padding:17px 8px 30px}
  .daybook .appbar{padding:12px;gap:8px}
  .daybook .brand{gap:8px}
  .daybook .brand-emblem{width:33px;height:33px}
  .daybook .brand-emblem .icon{width:21px;height:21px}
  .daybook .brand-name{font-size:18px}
  .daybook .brand-sub{letter-spacing:1px;font-size:7px}
  .daybook .bar-right{gap:5px}
  .daybook .bar-right .btn{padding:7px}
  .daybook .bar-right .btn.add .label{display:none}
  .daybook .bar-right .btn .icon{width:16px;height:16px}
  .daybook .desk-line{padding:0 7px 17px;flex-wrap:wrap;gap:6px}
  .daybook .desk-line p{font-size:13px}
  .daybook .demo-badge{font-size:9px;padding:3px 7px}
  .daybook .tabs{gap:4px;margin:0 8px}
  .daybook .deck-tab{flex-direction:column;gap:4px;min-height:65px;padding:10px 3px 8px;border-radius:10px 10px 0 0}
  .daybook .deck-tab.active{padding-top:13px;min-height:70px}
  .daybook .deck-tab .tab-art{width:20px;height:20px}
  .daybook .deck-tab .tab-text{font-size:13px!important;text-align:center}
  .daybook .deck-tab .tab-text small{display:none}
  .daybook .notebook{padding:15px 15px 20px;border-radius:10px;min-height:800px}
  .daybook .notebook::before{left:5px}
  .daybook .notebook::after{right:5px}
  .daybook .page-toolbar{flex-wrap:wrap;gap:10px;margin-bottom:9px}
  .daybook .page-nav{gap:4px;flex:1}
  .daybook .page-nav .btn.circle{width:29px;height:29px;padding:6px}
  .daybook .period{font-size:14px;min-width:90px}
  .daybook .date-jump{font-size:10px;width:120px;padding:3px}
  .daybook .toolbar-actions{width:100%;justify-content:flex-end;gap:6px}
  .daybook .toolbar-actions .btn{padding:5px 8px;font-size:10px}
  .daybook .toolbar-actions .btn span.label{display:inline}
  .daybook .toolbar-actions .btn .icon{width:13px;height:13px}
  .daybook .sheet-head{grid-template-columns:1fr;min-height:200px;margin-bottom:15px;overflow:hidden;align-items:start}
  .daybook .sheet-title{padding:17px 0 28px;max-width:78%;text-shadow:0 1px var(--d-page)}
  .daybook .sheet-title .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:13px}
  .daybook .sheet-title h1{font-size:34px;letter-spacing:-.7px}
  .daybook .sheet-title .subtitle{font-size:12px;max-width:205px;line-height:1.6}
  .daybook .sheet-art{position:absolute;right:-45px;bottom:0;width:210px;height:143px;opacity:.5;z-index:0}
  .daybook .date-seal{width:42px;height:45px;font-size:20px;right:5px;top:5px}
  .daybook .date-seal small{font-size:6px}
  .daybook .focus-ribbon{padding:12px;gap:9px;margin-bottom:20px}
  .daybook .focus-ribbon>.icon{width:22px;height:22px}
  .daybook .focus-input{font-size:16px}
  .daybook .focus-ribbon .upper{font-size:7px}
  .daybook .ribbon-progress{gap:5px}
  .daybook .ribbon-progress .ring{width:31px;height:31px}
  .daybook .ribbon-progress .progress-label{display:none}
  .daybook .daily-grid{gap:23px}
  .daybook .block-grid{gap:12px}
  .daybook .block-heading{padding:10px;gap:7px}
  .daybook .block-heading h3{font-size:17px}
  .daybook .block-heading .icon{width:18px;height:18px}
  .daybook .block-heading small{font-size:7px;letter-spacing:.7px}
  .daybook .block-number{font-size:22px}
  .daybook .block-body{padding:7px 9px 10px}
  .daybook .task-text{font-size:12px}
  .daybook .task-meta{font-size:8px}
  .daybook .task-line{gap:7px}
  .daybook .priorities{gap:7px;margin-bottom:19px}
  .daybook .priority-card{padding:10px 8px;min-height:105px}
  .daybook .priority-card .label{font-size:10px}
  .daybook .priority-card .num{font-size:21px}
  .daybook .priority-card .pin{right:7px}
  .daybook .daily-side{gap:15px}
  .daybook .daily-side>.sticky-card{grid-column:span 2}
  .daybook .daily-side .paper-card{padding:12px}
  .daybook .daily-side h3{font-size:18px}
  .daybook .mood-row{gap:1px}
  .daybook .mood-button{font-size:7px}
  .daybook .mood-button .icon{width:21px;height:21px}
  .daybook .daily-side .photo-note .photo-wrap{height:133px}
  .daybook .photo-note .caption{font-size:11px}
  .daybook .photo-upload{font-size:9px;padding:3px 4px}
  .daybook .page-footer{letter-spacing:.5px;font-size:8px;gap:6px}
  .daybook .page-footer .ornament{letter-spacing:3px;font-size:12px}
  .daybook .desk-footer{font-size:9px;flex-wrap:wrap;gap:6px}
  .daybook .seasons{grid-template-columns:1fr 1fr;gap:12px}
  .daybook .season-picture{height:91px}
  .daybook .year-grid{grid-template-columns:1fr 1fr;gap:10px}
  .daybook .mini-month{padding:11px}
  .daybook .mini-month .month-title{font-size:19px}
  .daybook .mini-day{font-size:9px;min-height:21px}
  .daybook .year-bottom,.daybook .deck-intro{grid-template-columns:1fr;gap:20px}
  .daybook .year-bottom .photo-wrap{height:200px}
  .daybook .goal-grid{grid-template-columns:1fr;gap:13px}
  .daybook .goal-card{min-height:auto;padding:16px}
  .daybook .goal-add{min-height:75px}
  .daybook .quarter-road{grid-template-columns:1fr;gap:23px}
  .daybook .quarter-month{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .daybook .quarter-month::before{display:none}
  .daybook .quarter-month .road-node{grid-column:1/-1;margin-bottom:0}
  .daybook .quarter-month .month-notes{margin-top:0}
  .daybook .quarter-month .mini-month{padding:12px}
  .daybook .quarter-month .mini-day{min-height:25px}
  .daybook .cal-cell{min-height:94px;padding:4px 3px}
  .daybook .cal-entry{font-size:8px;padding:2px 3px}
  .daybook .cal-num{font-size:10px;width:20px;height:20px}
  .daybook .cal-top{margin-bottom:3px}
  .daybook .cal-top .icon{width:10px;height:10px}
  .daybook .cal-dow{font-size:8px;letter-spacing:0}
  .daybook .cal-more{font-size:7px}
  .daybook .month-layout{gap:18px}
  .daybook .calendar-legend{gap:7px;font-size:8px}
  .daybook .month-side{gap:16px}
  .daybook .week-grid{min-width:990px;gap:9px}
  .daybook .week-bottom{grid-template-columns:1fr}
  .daybook .week-bottom> :last-child{grid-column:auto}
  .daybook .week-scroller{margin-right:-4px}
  .daybook .week-options{font-size:10px}
  .daybook .week-hint{font-size:10px;color:var(--d-muted);margin-bottom:10px}
  .daybook .modal-backdrop{padding:8px}
  .daybook .modal.drawer{height:calc(100dvh - 16px);width:100%}
  .daybook .modal{max-height:calc(100dvh - 16px)}
  .daybook .modal-header{padding:19px 17px 14px}
  .daybook .modal-header h2{font-size:27px}
  .daybook .modal-body{padding:19px 17px}
  .daybook .form-grid{gap:12px}
  .daybook .layout-item{grid-template-columns:20px 37px 1fr 60px 52px;gap:5px}
  .daybook .layout-item input,.daybook .layout-item select{font-size:10px;padding:7px 4px}
  .daybook .sticker-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .daybook .sticker-option svg{width:58px;height:58px}
  .daybook .sticker-option{padding:10px 7px 7px;font-size:10px}
  .daybook .bank-filters{grid-template-columns:1fr 115px}
  .daybook .form-actions .btn{padding:8px 10px;font-size:11px}
  .daybook .form-actions{gap:7px}
  .daybook .palette-grid{gap:8px}
  .daybook .palette{padding:11px 5px}
  .daybook .swatches i{width:19px;height:19px}
  .daybook .ring text{font-size:11px}
}
@media(max-width:375px){
  .daybook .block-grid{grid-template-columns:1fr}
  .daybook .block-card.wide{grid-column:auto}
  .daybook .daily-side{grid-template-columns:1fr}
  .daybook .daily-side>.sticky-card{grid-column:auto}
  .daybook .daily-side .photo-note{grid-column:auto}
  .daybook .brand-name{font-size:16px}
  .daybook .sheet-title h1{font-size:32px}
  .daybook .date-jump{width:112px}
  .daybook .period{min-width:80px}
  .daybook .month-side{grid-template-columns:1fr}
  .daybook .month-side> :last-child{grid-column:auto}
  .daybook .year-grid{gap:6px}
  .daybook .mini-month{padding:8px}
  .daybook .calendar-legend{font-size:7px}
}
@media print{
  
  .daybook{background:var(--db-tone-48);font-size:11px}
  .daybook .appbar,.daybook .desk-line,.daybook .tabs,.daybook .page-toolbar,.daybook .desk-footer,.daybook .no-print,.daybook .block-add,.daybook .quick-add,.daybook .icon-btn,.daybook .photo-upload,.daybook .clear-photo,.daybook #db-overlay,.daybook #db-toasts,.daybook .sticker-controls,.daybook .focus-ribbon::after{display:none!important}
  .daybook .workspace{padding:0;max-width:none}
  .daybook .notebook{border:0;box-shadow:none;padding:0;min-height:0}
  .daybook .notebook::before,.daybook .notebook::after{display:none}
  .daybook .sheet-head{min-height:140px;margin-bottom:12px}
  .daybook .sheet-art{height:150px}
  .daybook .sheet-title h1{font-size:34px}
  .daybook .focus-ribbon{print-color-adjust:exact;-webkit-print-color-adjust:exact;margin-bottom:16px}
  .daybook .daily-grid{grid-template-columns:1.8fr 1fr;gap:16px}
  .daybook .daily-side{display:flex;gap:15px}
  .daybook .block-grid{gap:12px}
  .daybook .block-card,.daybook .paper-card,.daybook .sticky-card,.daybook .photo-note,.daybook .goal-card,.daybook .mini-month{break-inside:avoid}
  .daybook .block-card{min-height:120px}
  .daybook .block-heading{padding:9px 11px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .daybook .block-heading h3{font-size:17px}
  .daybook .block-body{padding:5px 10px}
  .daybook .task-line{padding:7px 0}
  .daybook .task-text{font-size:11px}
  .daybook .task-meta{font-size:8px}
  .daybook .priority-card{min-height:80px;padding:9px}
  .daybook .priorities{margin-bottom:17px}
  .daybook .daily-side .photo-wrap{height:130px}
  .daybook .daily-side .paper-card{padding:12px}
  .daybook .daily-side h3{font-size:18px}
  .daybook .blank-text{font-size:11px;min-height:75px}
  .daybook .mood-button .icon{width:20px;height:20px}
  .daybook .mood-button{font-size:7px}
  .daybook .meal-line{grid-template-columns:16px 47px 1fr}
  .daybook .meal-line span{font-size:9px}
  .daybook .meal-line input{font-size:10px}
  .daybook .plain-box{padding:10px 12px;margin-top:15px}
  .daybook .page-footer{margin-top:15px;padding-top:9px}
  .daybook .year-grid{grid-template-columns:repeat(4,1fr)}
  .daybook .month-layout{grid-template-columns:1fr}
  .daybook .month-side{display:grid;grid-template-columns:repeat(3,1fr)}
  .daybook .month-side>:last-child{grid-column:auto}
  .daybook .cal-cell{min-height:90px}
  .daybook .week-scroller{overflow:visible}
  .daybook .week-grid{min-width:0;grid-template-columns:repeat(7,1fr);gap:6px}
  .daybook .week-body{padding:7px}
  .daybook .week-head{padding:8px}
  .daybook .week-body .task-text{font-size:9px}
  .daybook .week-body .task-meta{font-size:7px}
  .daybook .week-bottom{grid-template-columns:1fr 1fr 1fr}
  .daybook .week-bottom>:last-child{grid-column:auto}
  .daybook .seasons,.daybook .mini-month,.daybook .cal-dow,.daybook .cal-entry,.daybook .week-head,.daybook .sticky-card,.daybook .priority-card,.daybook .photo-note,.daybook .tag,.daybook .tick{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .daybook .mini-day{font-size:9px;min-height:21px}
  .daybook .placed-sticker{filter:none}
  .daybook input,.daybook textarea,.daybook select{box-shadow:none}
  .daybook textarea{resize:none}
}
.daybook .time-event .event-body{padding-right:18px}
.daybook .tag .icon{width:12px;height:12px}
.daybook .tab-art>.icon{width:100%;height:100%}
@media(max-width:600px){
  .daybook .page-nav{flex-wrap:wrap;flex-basis:100%;min-width:0;row-gap:7px}
  .daybook .date-jump{margin-left:auto}
  .daybook .rule-title .tiny{white-space:normal;max-width:48%;text-align:right}
}
.daybook .routine-section{margin:5px 0 36px;position:relative;border:1px solid var(--db-tone-35);border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb, var(--db-tone-43) 33%, transparent),var(--d-paper) 55%);padding:18px;box-shadow:0 4px 14px color-mix(in srgb, var(--db-tone-11) 3%, transparent)}
.daybook .routine-banner{display:flex;align-items:center;gap:17px;padding:8px 8px 21px;margin-bottom:15px;border-bottom:1px solid var(--d-line)}
.daybook .routine-emblem{display:flex;align-items:center;justify-content:center;width:58px;height:58px;flex-shrink:0;border:1px solid var(--db-tone-28);border-radius:50%;background:var(--d-jade);color:var(--db-tone-41);outline:1px solid color-mix(in srgb, var(--db-tone-28) 31%, transparent);outline-offset:4px;transform:rotate(-6deg)}
.daybook .routine-emblem .icon{width:34px;height:34px}
.daybook .routine-banner .eyebrow{color:var(--d-gold);font-size:9px;letter-spacing:1.7px}
.daybook .routine-banner h2{font-size:32px;margin:5px 0}
.daybook .routine-banner p{font-family:var(--d-serif);font-size:14px;font-style:italic;color:var(--d-muted)}
.daybook .routine-date{margin-left:auto;border:1px solid var(--d-line);padding:9px 16px;border-radius:4px;background:var(--d-paper);font-size:10px;text-align:center;transform:rotate(3deg);white-space:nowrap;color:var(--d-muted)}
.daybook .routine-date strong{display:block;font-family:var(--d-serif);font-size:20px;font-weight:400;color:var(--d-ink)}
.daybook .routine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.daybook .routine-card{min-width:0;min-height:0;background:var(--d-paper)}
.daybook .routine-card.routine-morning{grid-row:span 2}
.daybook .routine-card .block-heading{padding:14px;gap:11px}
.daybook .routine-card .block-heading h3{font-size:23px}
.daybook .routine-card .block-heading small{font-size:11px;letter-spacing:.5px;margin-top:3px}
.daybook .routine-card .block-number{font-size:25px}
.daybook .routine-icon{display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb, var(--db-tone-48) 65%, transparent);background:color-mix(in srgb, var(--db-tone-48) 27%, transparent);border-radius:50%;width:36px;height:36px;flex-shrink:0}
.daybook .routine-icon .icon{width:23px;height:23px}
.daybook .routine-card .block-body{padding:6px 13px 11px}
.daybook .routine-card .task-line{padding:9px 1px;gap:9px}
.daybook .routine-card .task-text{font-size:12px;line-height:1.55}
.daybook .routine-card .tick{margin-top:2px}
.daybook .routine-card .block-add{padding:11px 0 0;margin-top:3px;font-size:10px}
.daybook .routine-card.routine-night .block-heading{background:var(--d-lilac)}
.daybook .routine-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:17px;color:var(--d-muted);font-size:10px}
.daybook .routine-foot>span{display:flex;align-items:center;gap:6px}
.daybook .routine-foot .icon{width:14px;height:14px}
@media(max-width:1000px){
  .daybook .routine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .routine-card.routine-morning{grid-row:auto;grid-column:span 2}
  .daybook .routine-card.routine-morning .block-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .daybook .routine-card.routine-morning .block-add{grid-column:span 2}
  .daybook .routine-card.routine-morning .task-line:nth-child(12){border-bottom:0}
}
@media(max-width:620px){
  .daybook .routine-section{padding:12px 10px}
  .daybook .routine-banner{padding:5px 2px 17px;gap:12px}
  .daybook .routine-emblem{width:40px;height:40px}
  .daybook .routine-emblem .icon{width:25px;height:25px}
  .daybook .routine-banner h2{font-size:27px}
  .daybook .routine-banner .eyebrow{font-size:8px;letter-spacing:.7px}
  .daybook .routine-banner p{font-size:12px}
  .daybook .routine-date{display:none}
  .daybook .routine-grid{grid-template-columns:minmax(0,1fr);gap:13px}
  .daybook .routine-card.routine-morning{grid-column:auto}
  .daybook .routine-card.routine-morning .block-body{display:block}
  .daybook .routine-card .task-text{font-size:13px}
  .daybook .routine-foot{font-size:10px;line-height:1.6}
}
@media print{
  .daybook .routine-section{padding:12px;margin-bottom:22px;box-shadow:none;break-inside:auto}
  .daybook .routine-banner{break-after:avoid}
  .daybook .routine-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .routine-card{break-inside:avoid}
  .daybook .routine-card.routine-morning{grid-column:span 2;grid-row:auto}
  .daybook .routine-card.routine-morning .block-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .daybook .routine-card .task-text{font-size:10px}
  .daybook .routine-card .task-line{padding:5px 0}
  .daybook .routine-foot{font-size:9px}
}
.daybook #routine-period-field[hidden]{display:none}
.daybook{color-scheme:dark;--d-ink:var(--db-tone-46);--d-muted:var(--db-tone-35);--d-jade:var(--db-tone-26);--d-deep:var(--db-tone-02);--d-leaf:var(--db-tone-26);--d-light:var(--db-tone-03);--d-page:var(--db-tone-02);--d-paper:var(--db-tone-02);--d-canvas:var(--db-tone-01);--d-line:var(--db-tone-09);--d-gold:var(--db-tone-33);--d-gold-light:var(--db-tone-10);--d-rose:var(--db-tone-05);--d-rose-ink:var(--db-tone-32);--d-lilac:var(--db-tone-04);--d-lavender-ink:var(--db-tone-34);--d-blue:var(--db-tone-04);--d-blue-ink:var(--db-tone-23);--d-mint:var(--db-tone-06);--d-shadow:0 12px 38px color-mix(in srgb, var(--db-tone-01) 20%, transparent);--d-serif:var(--font-serif);--d-sans:var(--font-sans)}
.daybook{background-image:radial-gradient(ellipse at 50% -500px,color-mix(in srgb, var(--db-tone-09) 27%, transparent),transparent 70%);background-size:auto;font-size:14px}
.daybook button:hover:not(:disabled){filter:brightness(1.12)}
.daybook a{color:var(--d-gold)}
.daybook h2,.daybook h3{color:var(--d-ink)}
.daybook .btn{border-radius:6px;padding:9px 12px;font-weight:500;border-color:var(--d-line);background:var(--d-paper);color:var(--d-ink)}
.daybook .btn.primary,.daybook .bar-right .btn.add,.daybook .bar-right .download-top{background:var(--db-tone-28);color:var(--db-tone-02);border-color:var(--db-tone-38)}
.daybook .btn.primary:hover{background:var(--db-tone-33)}
.daybook .btn.gold,.daybook .tag.gold{background:var(--db-tone-05);color:var(--db-tone-33);border-color:var(--db-tone-12)}
.daybook .btn.danger{color:var(--db-tone-32);border-color:var(--db-tone-16)}
.daybook .btn.soft{background:var(--d-light)}
.daybook .text-btn{color:var(--d-jade)}
.daybook .tag{background:var(--d-light);color:var(--d-jade)}
.daybook .late{color:var(--db-tone-32)!important}
.daybook .tick{border-color:var(--db-tone-27)}
.daybook .tick.done,.daybook .habit-dot.done{background:var(--d-jade);color:var(--d-canvas);border-color:var(--d-jade)}
.daybook input[type=checkbox]{accent-color:var(--db-tone-28)}
.daybook input,.daybook textarea,.daybook select{background:var(--d-paper);border-color:var(--d-line);color:var(--d-ink)}
.daybook input::placeholder,.daybook textarea::placeholder{color:var(--d-muted);opacity:.75}
.daybook .error-text{color:var(--db-tone-32)}
.daybook .save-error{background:var(--db-tone-10);color:var(--db-tone-37);border-color:var(--db-tone-19)}
.daybook .appbar{background:var(--db-tone-01);min-height:80px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-12) 31%, transparent);padding:15px max(26px,calc((100vw - 1400px)/2));gap:18px}
.daybook .brand-name{font-size:23px;color:var(--db-tone-41)}
.daybook .brand-sub{color:var(--db-tone-24);font-size:9px;letter-spacing:2px}
.daybook .brand-emblem{border-radius:6px;width:44px;height:44px;background:color-mix(in srgb, var(--db-tone-06) 40%, transparent);border:1px solid color-mix(in srgb, var(--db-tone-28) 30%, transparent);color:var(--db-tone-33)}
.daybook .bar-right{flex-wrap:wrap;justify-content:flex-end}
.daybook .saved{color:var(--db-tone-35);font-size:10px}
.daybook .bar-right .btn{border-color:color-mix(in srgb, var(--db-tone-17) 50%, transparent);color:var(--db-tone-46)}
.daybook .bar-right .download-top{color:var(--db-tone-02)}
.daybook .bar-right .icon-btn{color:var(--d-gold)}
.daybook .workspace{max-width:1452px;padding:24px 28px 45px}
.daybook .desk-line{padding:0 0 21px}
.daybook .desk-line p{font-size:16px;color:var(--db-tone-31)}
.daybook .demo-badge{color:var(--db-tone-29);border-color:var(--db-tone-17);background:var(--db-tone-02)}
.daybook .tabs{grid-template-columns:1.32fr repeat(5,1fr);gap:5px;margin:0 11px}
.daybook .deck-tab,.daybook .deck-tab:nth-child(n){min-height:62px;background:var(--db-tone-02);color:var(--db-tone-35);border:1px solid var(--db-tone-09);border-bottom:0;box-shadow:none;border-radius:9px 9px 0 0;padding:12px 15px;gap:9px}
.daybook .deck-tab .icon{width:18px;height:18px;color:var(--db-tone-29)}
.daybook .deck-tab .tab-text{font-size:17px}
.daybook .deck-tab .tab-text small{font-size:8px;letter-spacing:.9px;margin-top:2px}
.daybook .deck-tab.active{background:var(--d-page);color:var(--db-tone-33);border-color:var(--db-tone-14);min-height:67px;padding-top:15px}
.daybook .deck-tab.active .icon{color:var(--db-tone-33)}
.daybook .deck-tab.active::after{background:var(--d-page)}
.daybook .notebook{border-color:var(--db-tone-12);border-radius:10px;padding:21px 24px 15px;background:var(--d-page);box-shadow:0 3px 0 var(--db-tone-06),0 5px 0 var(--db-tone-10),0 13px 36px color-mix(in srgb, var(--db-tone-01) 20%, transparent);min-height:600px}
.daybook .notebook::before,.daybook .notebook::after{display:none}
.daybook .page-toolbar{margin-bottom:19px;flex-wrap:wrap;gap:10px}
.daybook .page-nav{flex-wrap:wrap;gap:4px}
.daybook .period{font-size:17px;min-width:110px;color:var(--db-tone-39)}
.daybook .date-jump{width:133px;background:transparent}
.daybook .toolbar-actions{gap:6px}
.daybook .palace-banner{min-height:230px;position:relative;border:1px solid color-mix(in srgb, var(--db-tone-14) 31%, transparent);border-radius:8px;overflow:hidden;display:flex;align-items:center;background:var(--db-tone-02);margin-bottom:0;isolation:isolate}
.daybook .palace-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-3}
.daybook .banner-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,color-mix(in srgb, var(--db-tone-01) 97%, transparent),color-mix(in srgb, var(--db-tone-01) 86%, transparent) 29%,color-mix(in srgb, var(--db-tone-01) 43%, transparent) 62%,color-mix(in srgb, var(--db-tone-01) 16%, transparent)),linear-gradient(0deg,color-mix(in srgb, var(--db-tone-01) 31%, transparent),transparent)}
.daybook .banner-copy{padding:27px 32px;max-width:780px}
.daybook .banner-copy .eyebrow{color:var(--db-tone-33);font-size:10px;letter-spacing:2.6px;margin-bottom:14px}
.daybook .banner-copy h1{font-size:44px;line-height:1.1;letter-spacing:-.7px;color:var(--db-tone-45);text-shadow:0 2px 8px color-mix(in srgb, var(--db-tone-01) 40%, transparent)}
.daybook .banner-copy p:not(.eyebrow){font-size:14px;font-weight:400;color:var(--db-tone-36);line-height:1.7;margin-top:12px;max-width:560px}
.daybook .banner-date{display:block;font-size:11px;color:var(--db-tone-33);margin-top:18px;letter-spacing:.35px}
.daybook .banner-seal{position:absolute;right:27px;top:28px;border:1px solid color-mix(in srgb, var(--db-tone-30) 47%, transparent);outline:1px solid color-mix(in srgb, var(--db-tone-30) 25%, transparent);outline-offset:-5px;color:var(--db-tone-38);background:color-mix(in srgb, var(--db-tone-02) 62%, transparent);writing-mode:vertical-rl;letter-spacing:7px;padding:14px 12px 6px;font-family:var(--d-serif);font-size:26px}
.daybook .layout-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0 18px;color:var(--d-muted);font-size:11px}
.daybook .layout-status>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.daybook .layout-status .icon{width:14px;height:14px;color:var(--d-gold)}
.daybook .layout-status small{color:var(--db-tone-27);font-size:10px}
.daybook .layout-status .btn{font-size:10px}
.daybook .focus-ribbon{background:var(--db-tone-06);border:1px solid var(--db-tone-17);border-radius:7px;margin-bottom:22px;padding:14px 18px}
.daybook .focus-ribbon::after{display:none}
.daybook .focus-ribbon .upper{color:var(--db-tone-29)}
.daybook .focus-input{font-size:20px;color:var(--db-tone-45)}
.daybook .focus-input::placeholder{color:var(--db-tone-29)}
.daybook .focus-ribbon .ring text{fill:var(--db-tone-45)}
.daybook .docket-weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:0 0 19px}
.daybook .docket-weekstrip button{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2px 4px;border:1px solid var(--d-line);border-radius:6px;background:var(--d-paper);text-align:left;padding:10px 13px;color:var(--d-muted)}
.daybook .docket-weekstrip strong{font-family:var(--d-serif);font-size:24px;font-weight:400;grid-column:2;grid-row:1 / span 2;text-align:right;color:var(--d-ink)}
.daybook .docket-weekstrip span{font-size:11px}
.daybook .docket-weekstrip small{font-size:9px;color:var(--db-tone-29)}
.daybook .docket-weekstrip button.active{border-color:var(--db-tone-28);background:var(--db-tone-07)}
.daybook .docket-weekstrip button.active strong{color:var(--db-tone-33)}
.daybook .docket-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 19px}
.daybook .docket-metric{padding:18px 16px;display:flex;gap:12px;border:1px solid var(--d-line);border-radius:7px;background:linear-gradient(120deg,var(--d-paper),var(--d-page))}
.daybook .docket-metric>.icon{color:var(--d-gold);width:22px;height:22px;margin-top:8px}
.daybook .docket-metric>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.daybook .docket-metric strong{grid-row:1 /span 2;font-family:var(--d-serif);font-size:35px;font-weight:400;color:var(--db-tone-38);line-height:1}
.daybook .docket-metric span{font-size:12px}
.daybook .docket-metric small{font-size:9px;color:var(--d-muted);grid-column:2}
.daybook .planner-bridge{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 18px;margin-bottom:22px;border-radius:7px;background:var(--db-tone-06);border:1px solid var(--db-tone-17)}
.daybook .planner-bridge>div:first-child{display:flex;gap:12px;align-items:center}
.daybook .planner-bridge strong{display:block;font-size:12px;font-weight:500;color:var(--db-tone-41)}
.daybook .planner-bridge small{display:block;font-size:10px;color:var(--db-tone-35);margin-top:3px}
.daybook .planner-bridge>.icon,.daybook .planner-bridge>div>.icon{color:var(--d-gold)}
.daybook .planner-bridge.compact{font-size:12px}
.daybook .docket-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:20px;align-items:start}
.daybook .docket-panel{border:1px solid var(--d-line);border-radius:8px;background:var(--d-paper);overflow:hidden;min-width:0;padding:20px}
.daybook .section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:17px}
.daybook .section-heading .eyebrow{font-size:8px;color:var(--db-tone-24);letter-spacing:1.8px;display:block;margin-bottom:5px}
.daybook .section-heading h2{font-size:25px}
.daybook .section-heading>.icon-btn{border:1px solid var(--d-line);color:var(--d-gold);width:29px;height:29px}
.daybook .docket-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.daybook .docket-filters input,.daybook .docket-filters select{font-size:11px;padding:8px 9px;width:50%;background:var(--d-page)}
.daybook .pill-tabs{display:flex;gap:5px;flex-wrap:wrap}
.daybook .pill-tabs button{border:1px solid transparent;padding:6px 10px;border-radius:5px;color:var(--d-muted);font-size:10px;white-space:nowrap}
.daybook .pill-tabs button.active{background:var(--db-tone-07);color:var(--db-tone-41);border-color:var(--db-tone-18)}
.daybook .docket-task{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid color-mix(in srgb, var(--db-tone-24) 13%, transparent);min-height:65px}
.daybook .docket-task:last-child{border:0}
.daybook .docket-task .tick{width:17px;height:17px;margin:0}
.daybook .task-name{display:block;padding:0;text-align:left;color:var(--d-ink);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.daybook .task-tags{gap:5px 8px;font-size:9px;color:var(--db-tone-29);margin-top:3px}
.daybook .task-tags>span+span::before{content:'·';margin-right:7px;opacity:.7}
.daybook .task-tags .example-tag{font-size:8px;color:var(--db-tone-31)}
.daybook .docket-task>.btn{font-size:9px;padding:5px 7px}
.daybook .docket-task.is-done .task-name{text-decoration:line-through;color:var(--d-muted)}
.daybook .panel-foot{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--d-line);margin-top:13px;padding-top:12px;font-size:9px;color:var(--d-muted)}
.daybook .panel-foot .btn{font-size:9px;white-space:normal}
.daybook .record-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid color-mix(in srgb, var(--db-tone-24) 13%, transparent);min-width:0}
.daybook .record-row:last-child{border-bottom:0}
.daybook .record-thumb{width:55px;height:70px;flex:0 0 55px;border:1px solid color-mix(in srgb, var(--db-tone-14) 27%, transparent);border-radius:5px;background:radial-gradient(circle at 15% 20%,color-mix(in srgb, var(--db-tone-20) 40%, transparent),transparent 80%),var(--db-tone-06);display:flex;align-items:center;justify-content:center;color:var(--db-tone-38);overflow:hidden}
.daybook .record-thumb .icon{width:27px;height:27px}
.daybook .record-thumb img,.daybook .record-thumb svg.media-art{width:100%;height:100%;object-fit:cover}
.daybook .record-thumb.book-thumb{background:linear-gradient(120deg,var(--db-tone-16),var(--db-tone-03));border-left:5px solid var(--db-tone-28)}
.daybook .record-title{display:block;text-align:left;font-family:var(--d-serif);font-size:17px;line-height:1.27;color:var(--db-tone-39);padding:0;overflow-wrap:anywhere}
.daybook .record-meta{font-size:9px;color:var(--d-muted);margin:4px 0 6px;line-height:1.5}
.daybook .status-tag{font-size:9px;color:var(--db-tone-40);border:1px solid var(--db-tone-17);padding:3px 5px;border-radius:4px;background:var(--db-tone-06)}
.daybook .record-row .tiny{font-size:9px}
.daybook .arrival-received{font-size:10px;background:var(--db-tone-07);border:1px solid var(--db-tone-13);margin-top:10px;padding:10px;line-height:1.5;color:var(--db-tone-40)}
.daybook .arrival-received .icon{display:inline-flex;vertical-align:middle;width:14px;height:14px}
.daybook .panel-sub{color:var(--d-muted);font-size:11px;margin-bottom:15px}
.daybook .airing-row{display:flex;gap:15px;align-items:center;padding:18px 0;border-bottom:1px solid color-mix(in srgb, var(--db-tone-24) 13%, transparent)}
.daybook .airing-time{flex:0 0 70px;color:var(--db-tone-33);font-family:var(--d-serif);font-size:19px}
.daybook .airing-time span{font-family:var(--d-sans);font-size:8px;color:var(--d-muted);display:block;margin-top:4px}
.daybook .schedule-empty{padding:36px 20px 42px;text-align:center;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb, var(--db-tone-07) 38%, transparent),transparent 75%)}
.daybook .schedule-empty>.icon{width:37px;height:37px;color:var(--db-tone-28);margin-bottom:18px}
.daybook .schedule-empty h3{font-size:23px;color:var(--db-tone-39)}
.daybook .schedule-empty p{max-width:300px;font-size:11px;color:var(--db-tone-29);line-height:1.8;margin:12px auto 18px}
.daybook .in-hand-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.daybook .in-hand-grid>div+div{border-left:1px solid var(--d-line);padding-left:16px}
.daybook .media-col-head{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.daybook .media-col-head h3{font-size:17px;color:var(--db-tone-35)}
.daybook .media-col-head .icon{width:16px;height:16px;color:var(--d-jade)}
.daybook .media-col-head>span{font-size:10px;color:var(--d-muted);margin-left:auto}
.daybook .media-row{gap:8px;position:relative;padding-right:0;align-items:flex-start;flex-wrap:wrap}
.daybook .media-row>.grow{flex-basis:calc(100% - 60px)}
.daybook .media-row .record-thumb{flex:0 0 43px;width:43px;height:64px}
.daybook .media-row .record-title{font-size:14px}
.daybook .media-kind{font-size:7px;letter-spacing:.6px;color:var(--db-tone-29);display:block;margin-bottom:3px}
.daybook .media-row .record-meta{font-size:8px}
.daybook .media-row .increment{margin-left:auto;font-size:10px;height:24px;min-width:32px;padding:2px 6px;margin-top:-3px}
.daybook .increment{border:1px solid var(--db-tone-18);color:var(--db-tone-33);background:var(--db-tone-07);border-radius:5px;font-size:11px;padding:6px;white-space:nowrap}
.daybook .reading-empty{text-align:center;padding:45px 13px 20px;color:var(--d-muted)}
.daybook .reading-empty>.icon{width:36px;height:36px;color:var(--db-tone-28);margin-bottom:13px}
.daybook .reading-empty h3{font-size:20px;color:var(--db-tone-39);line-height:1.4}
.daybook .reading-empty p{font-size:11px;line-height:1.8;margin:13px 0 18px}
.daybook .reading-empty .btn{font-size:9px;white-space:normal}
.daybook .progress-track{background:color-mix(in srgb, var(--db-tone-20) 20%, transparent);height:4px}
.daybook .progress-track span{background:var(--db-tone-28)}
.daybook .checks-panel .task-line{font-size:12px;padding:11px 0}
.daybook .checks-panel .task-text{font-size:12px}
.daybook .checklist-hint{font-size:9px;margin-top:13px}
.daybook .docket-panel .blank-text{min-height:150px}
.daybook .ruled{background-image:repeating-linear-gradient(transparent,transparent 27px,color-mix(in srgb, var(--db-tone-28) 15%, transparent) 27px,color-mix(in srgb, var(--db-tone-28) 15%, transparent) 28px)}
.daybook .day-modules{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.daybook .full-module{grid-column:1 / -1;min-width:0}
.daybook .selected-day .block-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.daybook .selected-day .block-card:first-child{grid-column:span 2}
.daybook .block-card{background:var(--d-paper);border-color:var(--d-line);border-radius:7px;box-shadow:none;min-height:160px}
.daybook .block-heading{background:var(--d-mint);color:var(--db-tone-40);border-color:color-mix(in srgb, var(--db-tone-45) 7%, transparent);padding:12px 14px}
.daybook .block-heading.gold{background:var(--db-tone-05);color:var(--db-tone-33)}
.daybook .block-heading.rose{background:var(--d-rose);color:var(--d-rose-ink)}
.daybook .block-heading.blue{background:var(--d-blue);color:var(--d-blue-ink)}
.daybook .block-heading.lilac{background:var(--d-lilac);color:var(--d-lavender-ink)}
.daybook .block-heading h3{color:inherit;font-size:20px}
.daybook .block-heading small{font-size:8px}
.daybook .block-number{opacity:.5}
.daybook .task-line{border-color:color-mix(in srgb, var(--db-tone-24) 13%, transparent)}
.daybook .task-meta{font-size:9px;line-height:1.6}
.daybook .priority-card,.daybook .priority-card:nth-child(2),.daybook .priority-card:nth-child(3){background:var(--db-tone-06);border-color:color-mix(in srgb, var(--db-tone-14) 40%, transparent)}
.daybook .priority-card:nth-child(2){background:var(--db-tone-06)}
.daybook .priority-card:nth-child(3){background:var(--db-tone-05)}
.daybook .priority-card .label{color:var(--db-tone-39)}
.daybook .priority-card.empty-priority{opacity:.85}
.daybook .sticky-card,.daybook .sticky-card.rose,.daybook .sticky-card.mint{background:var(--db-tone-05);border:1px solid color-mix(in srgb, var(--db-tone-14) 50%, transparent);border-radius:7px;transform:none;box-shadow:none;padding:20px}
.daybook .sticky-card.rose{background:var(--d-rose);border-color:color-mix(in srgb, var(--db-tone-16) 50%, transparent)}
.daybook .sticky-card.mint{background:var(--db-tone-06);border-color:color-mix(in srgb, var(--db-tone-18) 50%, transparent)}
.daybook .sticky-card::before{display:none}
.daybook .sticky-card h3{color:var(--db-tone-41)}
.daybook .blank-text{color:var(--d-ink)}
.daybook .paper-card{background:var(--d-paper);border-color:var(--d-line);padding:20px;border-radius:7px}
.daybook .meal-line input,.daybook .mood-note{color:var(--d-ink);border-color:color-mix(in srgb, var(--db-tone-29) 27%, transparent)}
.daybook .meal-line span,.daybook .meal-line .icon{color:var(--db-tone-32)}
.daybook .mood-button{font-size:9px}
.daybook .mood-button[aria-pressed=true]{background:var(--db-tone-07);color:var(--db-tone-40)}
.daybook .photo-note{background:var(--db-tone-06);border-color:var(--d-line);transform:none;border-radius:7px;padding:12px 12px 20px}
.daybook .photo-note .photo-wrap{background:var(--db-tone-06);border-radius:4px}
.daybook .photo-upload,.daybook .photo-note .clear-photo{background:color-mix(in srgb, var(--db-tone-06) 95%, transparent);color:var(--db-tone-41);border-color:color-mix(in srgb, var(--db-tone-28) 53%, transparent)}
.daybook .routine-section{background:var(--d-paper);border-color:var(--d-line);border-radius:8px}
.daybook .routine-banner{border-color:var(--d-line)}
.daybook .routine-emblem{background:var(--db-tone-07);color:var(--db-tone-33)}
.daybook .routine-banner .eyebrow{color:var(--d-gold)}
.daybook .routine-banner p{color:var(--d-muted)}
.daybook .routine-icon{border-color:color-mix(in srgb, var(--db-tone-31) 15%, transparent);background:color-mix(in srgb, var(--db-tone-40) 4%, transparent)}
.daybook .routine-foot{border-color:var(--d-line);color:var(--d-muted)}
.daybook .routine-card{min-width:0}
.daybook .routine-card .task-text{font-size:11px}
.daybook .routine-date strong{color:var(--d-gold)}
.daybook .period-modules{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.daybook .period-modules>.checks-panel{grid-column:1 / -1}
.daybook .period-stats{display:flex;gap:34px;flex-wrap:wrap;margin:6px 0 20px}
.daybook .period-stats span{font-size:12px;color:var(--d-muted)}
.daybook .period-stats strong{font-family:var(--d-serif);font-size:29px;font-weight:400;color:var(--d-gold);margin-right:6px}
.daybook .period-picks{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.daybook .period-arrivals{margin-top:14px}
.daybook .goal-add{background:var(--db-tone-06);border-color:var(--db-tone-20)}
.daybook .goal-card,.daybook .mini-month,.daybook .season,.daybook .quarter-month,.daybook .calendar-wrap,.daybook .week-day{border-color:var(--d-line)}
.daybook .season-picture,.daybook .season:nth-child(n) .season-picture{background:var(--db-tone-07)}
.daybook .season-picture svg{opacity:.83}
.daybook .season-text{background:var(--d-paper)}
.daybook .mini-day{color:var(--d-ink)}
.daybook .mini-day.off{color:var(--db-tone-20)}
.daybook .mini-day.today::after{background:var(--db-tone-12)}
.daybook .road-node .road-number{background:var(--db-tone-29);color:var(--db-tone-02);border-color:var(--d-page)}
.daybook .cal-cell.off{background:color-mix(in srgb, var(--db-tone-01) 47%, transparent);color:var(--db-tone-20)}
.daybook .cal-cell:hover,.daybook .cal-cell.today{background:color-mix(in srgb, var(--db-tone-07) 53%, transparent)}
.daybook .cal-entry.renewal{background:var(--db-tone-10);color:var(--db-tone-33)}
.daybook .week-head,.daybook .week-day:nth-child(n) .week-head{background:var(--db-tone-06);color:var(--db-tone-40)}
.daybook .week-day:nth-child(2n) .week-head{background:var(--db-tone-05)}
.daybook .week-day:nth-child(3n) .week-head{background:var(--db-tone-04)}
.daybook .week-day.today{border-color:var(--db-tone-28)}
.daybook .week-day.today .week-number{color:var(--db-tone-33)}
.daybook .habit-dot:disabled{background:var(--db-tone-06);border-color:var(--db-tone-11)}
.daybook .week-focus{color:var(--db-tone-35)}
.daybook .week-body .task-text{font-size:11px}
.daybook .modal-backdrop{background:color-mix(in srgb, var(--db-tone-01) 79%, transparent);backdrop-filter:blur(6px)}
.daybook .modal{background:var(--d-page);border:1px solid color-mix(in srgb, var(--db-tone-14) 40%, transparent);border-radius:10px;box-shadow:0 24px 100px color-mix(in srgb, var(--db-tone-01) 60%, transparent)}
.daybook .modal-header{background:linear-gradient(100deg,var(--db-tone-06),var(--d-page));border-color:var(--d-line);padding:22px 24px}
.daybook .modal-header h2{color:var(--db-tone-41)}
.daybook .modal-header p{color:var(--d-muted)}
.daybook .modal-body{padding:24px}
.daybook .modal .form-actions{border-color:var(--d-line)}
.daybook .inline-help{background:var(--db-tone-06);color:var(--db-tone-35);border-color:var(--db-tone-18);font-size:12px;line-height:1.8}
.daybook .field>span{color:var(--db-tone-39);font-size:11px}
.daybook .field small{font-size:10px;line-height:1.6}
.daybook .field input,.daybook .field select{min-height:39px}
.daybook .field textarea{background:var(--db-tone-02);padding:12px}
.daybook .check-field{color:var(--db-tone-35);font-size:12px;line-height:1.6}
.daybook .check-field small{display:block;color:var(--db-tone-27);font-size:9px}
.daybook .base-intro{border:1px solid var(--db-tone-17);background:var(--db-tone-06);border-radius:7px;padding:20px;margin-bottom:20px}
.daybook .base-intro>div{display:flex;gap:15px}
.daybook .base-intro .icon{width:27px;height:27px;color:var(--d-gold)}
.daybook .base-intro h3{font-size:24px;color:var(--db-tone-41);margin-bottom:8px}
.daybook .base-intro p{font-size:12px;line-height:1.8;color:var(--db-tone-35);max-width:770px}
.daybook .modal.base-modal{max-width:1080px;width:min(1080px,calc(100vw - 32px))}
.daybook .base-scope-tabs{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:16px;border-bottom:1px solid var(--d-line);margin-bottom:22px}
.daybook .base-scope-tabs button{padding:8px 11px;border:1px solid var(--d-line);font-size:11px;border-radius:5px;color:var(--d-muted)}
.daybook .base-scope-tabs button.active{background:var(--db-tone-28);color:var(--db-tone-02);border-color:var(--db-tone-38)}
.daybook .base-editor{display:grid;grid-template-columns:230px 1fr;gap:28px}
.daybook .base-editor>aside{border-right:1px solid var(--d-line);padding-right:22px}
.daybook .base-editor>aside .eyebrow{color:var(--d-muted);font-size:9px}
.daybook .base-choice{display:flex;flex-direction:column;gap:6px;text-align:left;border:1px solid var(--d-line);border-radius:6px;background:var(--d-paper);width:100%;padding:14px;margin-top:12px}
.daybook .base-choice strong{font-family:var(--d-serif);font-size:17px;font-weight:400;line-height:1.3;color:var(--db-tone-39)}
.daybook .base-choice small{font-size:9px;color:var(--d-muted)}
.daybook .base-choice.active{border-color:var(--db-tone-28);background:var(--db-tone-07)}
.daybook .base-tools{display:flex;flex-direction:column;gap:9px;margin:20px 0}
.daybook .base-tools .btn{font-size:10px;white-space:normal;justify-content:flex-start}
.daybook .base-editor>aside>p{font-size:10px;line-height:1.8}
.daybook .base-module{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid color-mix(in srgb, var(--db-tone-20) 20%, transparent);padding:11px 0;gap:10px}
.daybook .base-module label{display:flex;align-items:center;gap:10px;font-size:12px}
.daybook .base-module label .icon{width:16px;height:16px;color:var(--d-gold)}
.daybook .base-module .icon-btn{border:1px solid var(--d-line);margin-left:4px;width:25px;height:25px}
.daybook .base-blocks,.daybook .layout-task-picker{border:1px solid var(--d-line);border-radius:6px;padding:12px 14px;margin-top:17px;background:color-mix(in srgb, var(--db-tone-02) 53%, transparent)}
.daybook .base-blocks summary,.daybook .layout-task-picker summary{cursor:pointer;font-size:12px;color:var(--db-tone-38)}
.daybook .base-blocks>.row{margin-top:10px}
.daybook .base-blocks>.row>input:not([type=checkbox]){width:100%;font-size:12px}
.daybook .layout-task-picker>p{margin:12px 0;font-size:10px;line-height:1.8}
.daybook .layout-task-scroll{max-height:260px;overflow:auto}
.daybook .layout-task-scroll .check-field{border-top:1px solid color-mix(in srgb, var(--db-tone-20) 13%, transparent);padding:8px 0;margin:0}
.daybook .layout-rules{padding-top:15px}
.daybook .source-intro h3{font-size:24px;color:var(--db-tone-41)}
.daybook .source-intro p{font-size:12px;color:var(--db-tone-35);line-height:1.9;margin-top:13px}
.daybook .source-actions{display:flex;gap:10px;flex-wrap:wrap;margin:21px 0}
.daybook .source-supported{border:1px solid color-mix(in srgb, var(--db-tone-14) 44%, transparent);padding:14px;border-radius:6px;background:color-mix(in srgb, var(--db-tone-05) 33%, transparent);color:var(--db-tone-31)}
.daybook .source-supported .eyebrow{font-size:9px}
.daybook .source-supported p{font-size:11px;margin-top:6px}
.daybook .source-ledger{margin-top:19px}
.daybook .source-ledger-row{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--d-line);padding:18px 0}
.daybook .source-seal{color:var(--db-tone-28);background:var(--db-tone-07);padding:10px;border:1px solid color-mix(in srgb, var(--db-tone-18) 25%, transparent);border-radius:5px}
.daybook .source-ledger-row strong{font-family:var(--d-serif);font-size:19px;font-weight:400;color:var(--db-tone-41);display:block}
.daybook .source-ledger-row small{display:block;color:var(--d-muted);font-size:10px;margin-top:4px}
.daybook .import-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}
.daybook .import-counts>div{padding:18px;border:1px solid var(--d-line);border-radius:6px;text-align:center;background:var(--d-paper)}
.daybook .import-counts strong{display:block;font-family:var(--d-serif);font-size:30px;color:var(--d-gold)}
.daybook .import-counts span{font-size:10px;color:var(--d-muted)}
.daybook .record-library{margin-top:18px}
.daybook .record-library .record-title{font-size:19px}
.daybook .record-library .record-meta{font-size:10px}
.daybook .help-list .help-item{display:flex;gap:15px;margin-bottom:23px}
.daybook .help-item>.icon{flex:0 0 23px;width:23px;height:23px;color:var(--d-gold);margin-top:3px}
.daybook .help-item h3{font-size:21px;color:var(--db-tone-41);margin-bottom:7px}
.daybook .help-item p{font-size:12px;color:var(--db-tone-35);line-height:1.85}
.daybook .storage-note{color:var(--db-tone-29);font-size:11px;line-height:1.8}
.daybook .bank-summary button.active{background:var(--db-tone-09);color:var(--db-tone-41)}
.daybook .bank-item{border-color:var(--d-line)}
.daybook .palette{background:var(--d-paper);color:var(--d-ink);border-color:var(--d-line)}
.daybook .backup-option{background:var(--d-paper);border-color:var(--d-line)}
.daybook .page-footer{border-color:var(--d-line);color:var(--db-tone-27);margin-top:26px}
.daybook .desk-footer{font-size:10px;line-height:1.8;gap:15px}
.daybook .toast{background:var(--db-tone-03);border-color:var(--db-tone-24);color:var(--db-tone-45)}
.daybook .toast.error{background:var(--db-tone-10);color:var(--db-tone-37)}
.daybook .stickers-layer{z-index:3}
.daybook .notebook>.page-toolbar,.daybook .notebook>.layout-status{position:relative;z-index:4}
@media(min-width:1450px){
  .daybook .workspace{padding-left:28px;padding-right:28px}
  .daybook .docket-task{min-height:64px}
  .daybook .docket-metric{padding:20px}
  .daybook .banner-copy{padding:30px 36px}
}
@media(max-width:1120px){
  .daybook .saved{display:none}
  .daybook .workspace{padding:20px 18px}
  .daybook .notebook{padding:18px}
  .daybook .deck-tab .tab-text{font-size:15px}
  .daybook .deck-tab{padding:11px 10px!important}
  .daybook .deck-tab .icon{display:none}
  .daybook .docket-metrics{gap:8px}
  .daybook .docket-metric{gap:8px;padding:16px 12px}
  .daybook .docket-metric>div{grid-template-columns:1fr}
  .daybook .docket-metric strong{grid-row:auto}
  .daybook .docket-metric small{grid-column:1;font-size:8px}
  .daybook .docket-metric span{font-size:11px;margin-top:4px}
  .daybook .docket-grid{grid-template-columns:1fr 1fr;gap:15px}
  .daybook .docket-panel{padding:17px}
  .daybook .in-hand-grid{grid-template-columns:1fr}
  .daybook .in-hand-grid>div+div{border-left:0;padding-left:0;border-top:1px solid var(--d-line);padding-top:15px;margin-top:7px}
  .daybook .reading-empty{padding:20px 12px}
  .daybook .media-row{flex-wrap:nowrap;align-items:center}
  .daybook .media-row .increment{margin:0}
  .daybook .media-row>.grow{flex-basis:auto}
  .daybook .media-row .record-thumb{width:42px;height:58px;flex-basis:42px}
  .daybook .media-col-head h3{font-size:18px}
  .daybook .media-row .record-title{font-size:16px}
  .daybook .planner-bridge{align-items:flex-start}
  .daybook .planner-bridge>.row{justify-content:flex-end}
  .daybook .banner-copy h1{font-size:39px}
  .daybook .tabs{margin:0 6px}
  .daybook .base-editor{grid-template-columns:200px 1fr;gap:20px}
  .daybook .record-title{font-size:16px}
  .daybook .task-tags{font-size:8px}
  .daybook .docket-task>.btn .icon{display:none}
  .daybook .docket-task>.btn{font-size:8px}
  .daybook .routine-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:800px){
  .daybook .appbar{padding:14px 18px;flex-direction:column;align-items:flex-start;gap:13px}
  .daybook .bar-right{width:100%;justify-content:flex-start}
  .daybook .bar-right .btn{font-size:10px;padding:8px 10px}
  .daybook .brand-name{font-size:24px}
  .daybook .brand-sub{font-size:8px}
  .daybook .workspace{padding:18px 12px}
  .daybook .tabs{grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 12px}
  .daybook .deck-tab,.daybook .deck-tab.active{border:1px solid var(--d-line);border-radius:6px;min-height:52px!important}
  .daybook .deck-tab .tab-text{font-size:17px}
  .daybook .deck-tab.active::after{display:none}
  .daybook .deck-tab .icon{display:inline-flex}
  .daybook .notebook{padding:15px}
  .daybook .desk-line{gap:10px;align-items:flex-start}
  .daybook .desk-line p{font-size:15px;max-width:220px}
  .daybook .desk-line .demo-badge{display:none}
  .daybook .desk-line .btn{font-size:9px}
  .daybook .page-toolbar{gap:11px}
  .daybook .page-nav .period{font-size:15px;min-width:90px}
  .daybook .page-nav .date-jump{width:123px;font-size:10px}
  .daybook .toolbar-actions{justify-content:flex-end}
  .daybook .palace-banner{min-height:220px}
  .daybook .banner-copy{padding:25px}
  .daybook .banner-copy h1{font-size:36px;max-width:500px}
  .daybook .banner-copy p:not(.eyebrow){font-size:12px;max-width:430px}
  .daybook .banner-seal{right:14px;top:17px;font-size:20px;padding:11px 8px 4px}
  .daybook .banner-shade{background:linear-gradient(90deg,color-mix(in srgb, var(--db-tone-02) 94%, transparent),color-mix(in srgb, var(--db-tone-02) 73%, transparent) 65%,color-mix(in srgb, var(--db-tone-02) 31%, transparent))}
  .daybook .layout-status{flex-wrap:wrap;gap:6px}
  .daybook .docket-grid{grid-template-columns:1fr}
  .daybook .docket-metrics{grid-template-columns:repeat(2,1fr)}
  .daybook .docket-metric>div{grid-template-columns:auto 1fr;gap:2px 13px}
  .daybook .docket-metric strong{grid-row:1 /span 2;font-size:32px}
  .daybook .docket-metric small{grid-column:2}
  .daybook .docket-weekstrip{gap:4px}
  .daybook .docket-weekstrip button{display:flex;flex-direction:column;text-align:center;padding:9px 4px}
  .daybook .docket-weekstrip strong{font-size:25px}
  .daybook .docket-weekstrip small{font-size:8px;min-height:12px}
  .daybook .docket-weekstrip span{font-size:9px}
  .daybook .planner-bridge{flex-direction:column;padding:15px;gap:12px}
  .daybook .planner-bridge>.row{justify-content:flex-start;width:100%}
  .daybook .planner-bridge>.row>.btn{font-size:10px}
  .daybook .section-heading h2{font-size:25px}
  .daybook .docket-task .task-name{font-size:13px}
  .daybook .docket-task .task-tags{font-size:9px}
  .daybook .docket-task>.btn{font-size:9px}
  .daybook .schedule-empty{min-height:220px;padding:28px 18px}
  .daybook .in-hand-grid{grid-template-columns:1fr 1fr;gap:18px}
  .daybook .in-hand-grid>div+div{border-top:0;border-left:1px solid var(--d-line);padding:0 0 0 18px;margin:0}
  .daybook .media-row{flex-wrap:wrap}
  .daybook .media-row .increment{margin-left:auto}
  .daybook .media-row>.grow{flex-basis:calc(100% - 60px)}
  .daybook .reading-empty{padding:38px 6px 20px}
  .daybook .day-modules,.daybook .period-modules{grid-template-columns:1fr}
  .daybook .selected-day .block-grid{grid-template-columns:1fr 1fr}
  .daybook .selected-day .block-card:first-child{grid-column:span 2}
  .daybook .routine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .base-editor{grid-template-columns:1fr}
  .daybook .base-editor>aside{border-right:0;border-bottom:1px solid var(--d-line);padding-right:0;padding-bottom:15px}
  .daybook .base-tools{flex-direction:row;flex-wrap:wrap}
  .daybook .base-choice{padding:11px}
  .daybook .modal-body{padding:18px}
  .daybook .modal-header{padding:19px}
  .daybook .period-picks{grid-template-columns:1fr}
  .daybook .period-stats{gap:20px}
  .daybook .base-scope-tabs button{font-size:10px}
  .daybook .record-library .record-title{font-size:17px}
  .daybook .record-library .btn{font-size:9px}
  .daybook .desk-footer{flex-direction:column}
  .daybook .year-grid{grid-template-columns:repeat(2,1fr)}
  .daybook .seasons{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .daybook .workspace{padding:15px 9px}
  .daybook .notebook{padding:12px}
  .daybook .banner-copy{padding:23px 20px}
  .daybook .banner-copy h1{font-size:31px;max-width:260px}
  .daybook .banner-copy .eyebrow{font-size:8px;letter-spacing:1.6px}
  .daybook .banner-copy p:not(.eyebrow){max-width:255px;font-size:11px}
  .daybook .banner-copy .banner-date{font-size:9px}
  .daybook .banner-seal{font-size:18px;right:10px}
  .daybook .page-toolbar{margin-bottom:12px}
  .daybook .page-nav{gap:3px}
  .daybook .page-nav .date-jump{width:119px;font-size:9px}
  .daybook .page-nav .btn.circle{width:28px;height:28px}
  .daybook .page-nav .period{min-width:72px;font-size:14px}
  .daybook .toolbar-actions .btn{font-size:9px;padding:6px 9px}
  .daybook .deck-tab .tab-text{font-size:14px}
  .daybook .deck-tab .tab-text small{font-size:6px;letter-spacing:.5px}
  .daybook .deck-tab .icon{display:none}
  .daybook .docket-metric>.icon{display:none}
  .daybook .docket-metric>div{column-gap:9px}
  .daybook .docket-metric span{font-size:10px}
  .daybook .docket-metric small{font-size:8px}
  .daybook .docket-metric strong{font-size:28px}
  .daybook .docket-panel{padding:15px}
  .daybook .in-hand-grid{grid-template-columns:1fr}
  .daybook .in-hand-grid>div+div{border-left:0;padding:17px 0 0;border-top:1px solid var(--d-line);margin-top:5px}
  .daybook .media-row{flex-wrap:nowrap}
  .daybook .media-row .increment{margin-left:0}
  .daybook .media-row>.grow{flex-basis:auto}
  .daybook .reading-empty{padding:25px 15px}
  .daybook .task-name{font-size:12px!important}
  .daybook .task-tags{font-size:8px!important}
  .daybook .docket-task>.btn{font-size:8px;max-width:67px;white-space:normal}
  .daybook .docket-task{gap:8px}
  .daybook .section-heading h2{font-size:24px}
  .daybook .selected-day .block-grid{grid-template-columns:1fr}
  .daybook .selected-day .block-card:first-child{grid-column:auto}
  .daybook .routine-grid{grid-template-columns:1fr}
  .daybook .routine-banner{padding:17px;gap:13px}
  .daybook .routine-banner h2{font-size:24px}
  .daybook .routine-date{display:none}
  .daybook .routine-card .task-text{font-size:12px}
  .daybook .modal.base-modal{width:calc(100vw - 18px)}
  .daybook .form-grid{grid-template-columns:1fr}
  .daybook .form-actions{gap:12px;flex-wrap:wrap}
  .daybook .form-actions>.tiny{max-width:190px}
  .daybook .record-library .record-row{flex-wrap:wrap}
  .daybook .source-ledger-row strong{font-size:17px}
  .daybook .source-ledger-row small{font-size:9px}
  .daybook .import-counts{grid-template-columns:repeat(2,1fr)}
  .daybook .base-module label{font-size:11px;gap:7px}
  .daybook .base-module label .icon{display:none}
  .daybook .year-grid,.daybook .seasons{grid-template-columns:1fr}
  .daybook .layout-status small{font-size:9px}
  .daybook .docket-filters input,.daybook .docket-filters select{font-size:10px}
}
@media print{
  .daybook{color-scheme:light;--d-ink:var(--db-tone-02);--d-muted:var(--db-tone-11);--d-jade:var(--db-tone-13);--d-deep:var(--db-tone-46);--d-leaf:var(--db-tone-18);--d-light:var(--db-tone-43);--d-page:var(--db-tone-48);--d-paper:var(--db-tone-48);--d-canvas:var(--db-tone-48);--d-line:var(--db-tone-35);--d-gold:var(--db-tone-14);--d-mint:var(--db-tone-43);--d-rose:var(--db-tone-42);--d-rose-ink:var(--db-tone-16);--d-blue:var(--db-tone-44);--d-blue-ink:var(--db-tone-04);--d-lilac:var(--db-tone-44);--d-lavender-ink:var(--db-tone-04)}
  .daybook .appbar,.daybook .tabs,.daybook .desk-line,.daybook .desk-footer,.daybook .page-toolbar,.daybook .layout-status,.daybook .panel-foot .btn,.daybook .planner-bridge .btn,.daybook .icon-btn,.daybook .increment,.daybook .quick-add,.daybook .pill-tabs,.daybook .docket-filters,.daybook .docket-task>.btn,.daybook .base-tools{display:none!important}
  .daybook .notebook{padding:0;border:0;box-shadow:none}
  .daybook .workspace{max-width:none;padding:0}
  .daybook .palace-banner{min-height:150px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .daybook .banner-copy{padding:20px}
  .daybook .banner-copy h1{font-size:31px}
  .daybook .banner-copy .eyebrow,.daybook .banner-copy p,.daybook .banner-date{color:var(--db-tone-45)!important}
  .daybook .docket-grid{display:block;columns:2}
  .daybook .docket-panel{break-inside:avoid;margin-bottom:15px;padding:15px}
  .daybook .docket-metric,.daybook .planner-bridge,.daybook .docket-weekstrip button,.daybook .focus-ribbon,.daybook .sticky-card,.daybook .priority-card,.daybook .paper-card,.daybook .block-card{background:var(--db-tone-48);color:var(--db-tone-06);border-color:var(--db-tone-29)}
  .daybook .docket-metric strong,.daybook .docket-metric span,.daybook .docket-metric small,.daybook .record-title,.daybook .task-name,.daybook .record-meta,.daybook .planner-bridge strong,.daybook .planner-bridge small,.daybook .focus-input,.daybook .focus-ribbon .upper,.daybook .sticky-card h3,.daybook .priority-card .label,.daybook .section-heading h2,.daybook .reading-empty h3,.daybook .section-heading .eyebrow,.daybook .airing-time{color:var(--db-tone-06)!important}
  .daybook .banner-seal{display:none}
  .daybook .day-modules{display:block}
  .daybook .day-modules>section,.daybook .day-modules>div{margin-bottom:15px}
  .daybook .routine-card,.daybook .block-card{break-inside:avoid}
  .daybook .routine-grid{grid-template-columns:repeat(2,1fr)}
  .daybook .docket-weekstrip small{color:var(--db-tone-17)}
  .daybook .record-thumb{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .daybook .docket-task .tick,.daybook .task-line .tick{display:flex!important}
  .daybook .page-footer{margin-top:12px}
  .daybook .full-module{break-inside:auto}
}

/* ---------- Drop 155: the daybook on the palace's main page ---------- */
.view[data-room^="palace/"]{max-width:none;padding:0 0 var(--space-5)}
.daybook{display:block;min-height:100%}
.daybook .appbar{padding:14px 26px}
.daybook #db-app.is-turning{opacity:.6;pointer-events:none;transition:opacity .2s}
.daybook .daybook-opening{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--d-muted);font-family:var(--d-serif);font-size:18px;text-align:center;padding:30px}
.daybook .daybook-opening .icon{width:42px;height:42px;color:var(--d-gold)}
.daybook .daybook-migrate{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--d-gold);background:color-mix(in srgb, var(--d-gold) 12%, transparent);border-radius:10px;padding:12px 15px;margin-bottom:16px;font-size:12px;line-height:1.6}
.daybook .daybook-migrate .icon{color:var(--d-gold)}
.daybook .deck-content{position:relative}
.daybook .ring-track{stroke:color-mix(in srgb, var(--db-tone-48) 15%, transparent)}
.daybook .ring-fill{stroke:var(--db-tone-38)}
/* her stickers */
.daybook .sticker-img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.daybook .sticker-option .sticker-img{width:70px;height:70px}
.daybook .art-sticker{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:8px}
.daybook .art-sticker img{max-width:100%;max-height:100%;object-fit:contain}
.daybook .season-picture .art-sticker{position:absolute;inset:0}
.daybook .photo-wrap .art-sticker{padding:18px}
/* the routine, brought in */
.daybook .routine-seed{display:flex;align-items:center;gap:14px;border:1px dashed var(--d-gold);border-radius:10px;padding:12px 16px;margin:0 0 18px;background:color-mix(in srgb, var(--d-gold) 8%, transparent)}
.daybook .routine-seed>span .icon{width:28px;height:28px;color:var(--d-gold)}
.daybook .routine-seed>div{flex:1;display:flex;flex-direction:column;gap:3px}
.daybook .routine-seed strong{font-family:var(--d-serif);font-size:16px;font-weight:400}
.daybook .routine-seed small{color:var(--d-muted)}
/* the halls' doors and records */
.daybook .hall-door{color:var(--d-gold);text-decoration:none}
.daybook .hall-door:hover,.daybook a.record-title:hover{text-decoration:underline}
.daybook a.record-title{text-decoration:none;color:inherit;display:block}
.daybook .record-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.daybook .airing-thumb{width:38px;height:54px;flex-shrink:0}
.daybook .compact-records,.daybook .base-modules{display:flex;flex-direction:column}
.daybook .option-notes{white-space:pre-wrap;font-size:13px;margin-bottom:15px}
.daybook .confirm-text{font-size:13px;line-height:1.8}
.daybook .source-counts{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;margin:8px 0 16px}
.daybook .source-counts strong{color:var(--d-gold);font-weight:600;margin-right:3px}
.daybook .source-ledger-row .btn{margin-left:auto}
.daybook .period-door{font-size:12px;color:var(--d-gold)}
.daybook .period-picks,.daybook .period-arrivals{margin-top:10px}
.daybook a.backup-option{text-decoration:none;color:inherit}
.daybook .time-event .event-tick{position:absolute;right:0;top:9px;width:18px}
@media (max-width: 760px){
  .daybook .routine-seed{flex-wrap:wrap}
  .daybook .appbar{padding:12px 14px}
}
@media print{
  body.daybook-on .sidebar,body.daybook-on .topbar,body.daybook-on .hero,body.daybook-on .banner,body.daybook-on .corner,body.daybook-on #toasts,body.daybook-on #modal-host,.daybook .daybook-migrate{display:none!important}
  body.daybook-on .app,body.daybook-on .stage{display:block}
  body.daybook-on .view{padding:0;max-width:none}
}
.daybook .source-slot{display:block}
.daybook .source-slot>*{width:100%}
/* The palace's own rules for its rows, fields, dialogs, headings and week cards are not the daybook's.
   Each reset is :where()-light, so it outweighs only the palace's general rule and never the sample's own. */
.daybook :where(.row){padding:0;border-bottom:0;grid-template-columns:none}
.daybook :where(.btn) .label{color:inherit;font-size:inherit}
.daybook :where(.week-day){font-size:inherit;color:inherit;text-transform:none;letter-spacing:normal}
.daybook :where(.brand){padding:0;border-bottom:0}
.daybook :where(h1,h2,h3){letter-spacing:normal}
.daybook :where(.calendar){gap:0}
/* the palace dresses every dropdown's list (Drop 119); the daybook keeps the drawn arrow it relies on */
.daybook select:not([multiple]){padding-right:2rem;background-image:linear-gradient(45deg,transparent 50%,var(--d-muted) 50%),linear-gradient(135deg,var(--d-muted) 50%,transparent 50%);background-position:calc(100% - 1.05rem) calc(50% + 1px),calc(100% - .75rem) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.daybook :where(.modal){display:block;width:min(630px,100%)}
.daybook :where(.modal) p{color:inherit;font-size:inherit}
.daybook :where(.modal) .field{margin-bottom:0}
.daybook :where(.modal) .field :is(input,select,textarea){background:var(--d-paper);color:var(--d-ink);border:1px solid var(--d-line);border-radius:8px;padding:9px 11px}
/* Drop 156: her six deck banners - a little taller, each showing its own desk */
.daybook .palace-banner{min-height:clamp(230px,21vw,300px)}
.daybook .palace-art{object-position:center 62%}
.daybook .palace-art[data-deck=docket]{object-position:center 68%}
.daybook .palace-art[data-deck=day]{object-position:center 70%}
.daybook .palace-art[data-deck=week]{object-position:center 72%}
.daybook .palace-art[data-deck=month]{object-position:center 42%}
.daybook .palace-art[data-deck=quarter]{object-position:center 74%}
.daybook .palace-art[data-deck=year]{object-position:center 60%}
.daybook .rule-title{flex-wrap:wrap;row-gap:6px}
/* the seal's characters stacked one by one, as the palace's main banner sets them (Drop 156) */
.daybook .banner-seal{writing-mode:horizontal-tb;display:flex;flex-direction:column;align-items:center;gap:.32em;letter-spacing:0;line-height:1;padding:.9rem .7rem .75rem}
.daybook .banner-seal span{display:block}
/* Drop 157: a dialog scrolls as one. The palace's own dialogs scroll their body and hold the wheel there (overscroll-behavior:
   contain); here the dialog itself is the scroller, so its body must not be one - a body a pixel too wide would take the wheel
   and keep it, and the dialog would move only by its scrollbar. */
.daybook :where(.modal-body){overflow:visible;overscroll-behavior:auto;flex:none;min-height:0}
.daybook .modal{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
/* the week's board scrolls sideways only, so the wheel always reaches the page */
.daybook .week-scroller{overflow-y:hidden}

/* ---------- Drop 158: the Inner and Outer Courts, after her sample ---------- */
.daybook .court-edition{--court-text:var(--db-tone-45);--court-muted:var(--db-tone-29);--court-soft:var(--db-tone-27);--court-gold:var(--db-tone-30);--court-line:color-mix(in srgb, var(--db-tone-53) 21%, transparent);--court-panel:var(--db-tone-02);--court-input:var(--db-tone-02);color:var(--court-text);color-scheme:dark}
.daybook .courts-workspace{max-width:1400px;margin:auto;font-size:13px}
.daybook .courts-workspace button:focus-visible,.daybook .courts-workspace a:focus-visible,.daybook .court-modal button:focus-visible,.daybook .court-modal a:focus-visible,.daybook .courts-workspace input:focus-visible,.daybook .courts-workspace textarea:focus-visible,.daybook .court-modal input:focus-visible{outline:2px solid var(--db-tone-33);outline-offset:3px}
.daybook .courts-workspace .btn,.daybook .court-modal .btn{background:var(--db-tone-03);border-color:color-mix(in srgb, var(--db-tone-53) 24%, transparent);color:var(--db-tone-45);font-size:11px;font-weight:500;padding:8px 12px;min-height:34px;border-radius:7px}
.daybook .courts-workspace .btn:hover,.daybook .court-modal .btn:hover{background:var(--db-tone-06);border-color:var(--db-tone-30);filter:none}
.daybook .courts-workspace .btn.primary,.daybook .court-modal .btn.primary{background:var(--db-tone-30);color:var(--db-tone-02);border-color:var(--db-tone-33)}
.daybook .courts-workspace .btn.primary:hover,.daybook .court-modal .btn.primary:hover{background:var(--db-tone-33)}
.daybook .courts-workspace .eyebrow{color:var(--court-gold);font-size:9px;letter-spacing:1.9px}
.daybook .courts-workspace .icon{width:18px;height:18px}
.daybook .courts-workspace h3{font-size:21px;color:var(--db-tone-45)}
.daybook .courts-workspace input,.daybook .courts-workspace textarea,.daybook .courts-workspace select,.daybook .court-modal input,.daybook .court-modal textarea,.daybook .court-modal select{background:var(--db-tone-02);border-color:color-mix(in srgb, var(--db-tone-53) 25%, transparent);color:var(--db-tone-45);box-shadow:none;font-size:12px;line-height:1.6;color-scheme:dark}
.daybook .courts-workspace input::placeholder,.daybook .courts-workspace textarea::placeholder,.daybook .court-modal input::placeholder,.daybook .court-modal textarea::placeholder{color:var(--db-tone-27)}
.daybook .court-room-tabs{display:flex;gap:5px;overflow-x:auto;padding:15px 0 1px;scrollbar-width:thin}
.daybook .court-room-tabs button{padding:9px 12px;white-space:nowrap;font-size:11px;color:var(--db-tone-35);background:var(--db-tone-02);border:1px solid color-mix(in srgb, var(--db-tone-13) 27%, transparent);border-radius:6px}
.daybook .court-room-tabs button.active{color:var(--db-tone-33);background:color-mix(in srgb, var(--db-tone-50) 12%, transparent);border-color:color-mix(in srgb, var(--db-tone-30) 60%, transparent)}
.daybook .court-room-tabs button:hover{background:var(--db-tone-06)}
.daybook .court-page-body{padding-top:22px}
.daybook .court-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}
.daybook .court-stat-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.daybook .court-stat{border:1px solid var(--court-line);border-radius:10px;background:linear-gradient(130deg,var(--db-tone-03),var(--db-tone-02));padding:18px 18px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.daybook .court-stat>.icon{color:var(--db-tone-28);width:22px;height:22px;margin-top:3px}
.daybook .court-stat>div{min-width:0}
.daybook .court-stat span{display:block;font-size:10px;color:var(--db-tone-29)}
.daybook .court-stat strong{display:block;font-family:var(--d-serif);font-size:31px;color:var(--db-tone-41);font-weight:400;line-height:1.2;margin:5px 0}
.daybook .court-stat small{display:block;font-size:9px;color:var(--db-tone-27);line-height:1.5}
.daybook .court-overview-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:18px;margin-bottom:24px}
.daybook .court-panel{border:1px solid var(--court-line);border-radius:12px;background:linear-gradient(140deg,var(--db-tone-02),var(--db-tone-02));overflow:hidden;margin-bottom:18px;min-width:0}
.daybook .court-panel>header{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-50) 15%, transparent);background:color-mix(in srgb, var(--db-tone-30) 2%, transparent)}
.daybook .court-panel>header p{font-size:11px;color:var(--db-tone-27);margin-top:5px;line-height:1.6}
.daybook .court-panel>header h3{font-size:21px}
.daybook .court-panel-body{padding:18px 20px;min-width:0}
.daybook .court-panel-body>.court-task:first-child{padding-top:0}
.daybook .court-panel-body>.court-task:last-child{border:0;padding-bottom:0}
.daybook .court-care-shortcuts{display:flex;flex-direction:column;gap:9px}
.daybook .court-care-shortcuts .btn{justify-content:space-between;padding:12px 14px;background:linear-gradient(100deg,var(--db-tone-06),var(--db-tone-03))}
.daybook .court-care-shortcuts .btn:after{content:'↗';color:var(--db-tone-28)}
.daybook .court-hall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.daybook .court-hall-tile{display:flex;border:1px solid var(--court-line);border-radius:13px;overflow:hidden;background:linear-gradient(120deg,var(--db-tone-02),var(--db-tone-02));min-width:0}
.daybook .hall-tile-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb, var(--db-tone-30) 13%, transparent),transparent 65%),linear-gradient(130deg,var(--db-tone-03),var(--db-tone-02));color:var(--db-tone-28);width:140px;flex-shrink:0;min-height:230px;border-right:1px solid color-mix(in srgb, var(--db-tone-53) 19%, transparent);overflow:hidden}
.daybook .hall-tile-cover::after{content:'';position:absolute;inset:10px;border:1px solid color-mix(in srgb, var(--db-tone-50) 22%, transparent);border-radius:6px;pointer-events:none}
.daybook .tile-number{position:absolute;left:19px;top:16px;font-family:var(--d-serif);font-style:italic;font-size:15px;color:var(--db-tone-24)}
.daybook .hall-tile-art{width:104px;height:104px;filter:sepia(.25) saturate(.7);opacity:.9}
.daybook .hall-tile-art svg{width:100%;height:100%}
.daybook .tile-cn{font-size:20px;font-family:var(--d-serif);letter-spacing:5px;margin-top:10px}
.daybook .hall-tile-content{padding:23px 20px;min-width:0;flex:1}
.daybook .hall-tile-content h3{font-size:23px;line-height:1.2;margin:8px 0}
.daybook .hall-tile-content h3 button{font:inherit;color:var(--db-tone-41);text-align:left;padding:0}
.daybook .hall-tile-content>p{font-size:11px;line-height:1.7;color:var(--db-tone-27);min-height:36px}
.daybook .hall-tile-metrics{display:flex;gap:7px;flex-wrap:wrap;font-size:9px;color:var(--db-tone-31);margin:13px 0;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-24) 15%, transparent)}
.daybook .hall-tile-metrics span+span:before{content:'·';margin-right:7px;color:var(--db-tone-24)}
.daybook .hall-quick-links{display:flex;flex-wrap:wrap;gap:5px}
.daybook .hall-quick-link{font-size:9px;color:var(--db-tone-35);border:1px solid color-mix(in srgb, var(--db-tone-54) 18%, transparent);border-radius:4px;padding:4px 7px;background:color-mix(in srgb, var(--db-tone-02) 33%, transparent)}
.daybook .hall-quick-link:hover{color:var(--db-tone-41);border-color:var(--db-tone-28)}
.daybook .court-section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0 14px}
.daybook .court-section-heading h3{font-size:24px}
.daybook .court-section-heading p{font-size:11px;color:var(--db-tone-35);margin-top:4px}
.daybook .court-hall-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:18px}
.daybook .court-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.daybook .court-room-tile{display:flex;text-align:left;gap:13px;align-items:flex-start;background:linear-gradient(135deg,var(--db-tone-03),var(--db-tone-02));border:1px solid var(--court-line);border-radius:11px;padding:20px;min-height:130px;color:var(--db-tone-45)}
.daybook .court-room-tile:hover{border-color:var(--db-tone-28);transform:translateY(-2px)}
.daybook .room-tile-symbol{display:grid;place-items:center;width:35px;height:35px;border:1px solid color-mix(in srgb, var(--db-tone-50) 33%, transparent);border-radius:9px;background:color-mix(in srgb, var(--db-tone-30) 6%, transparent);color:var(--db-tone-30);flex-shrink:0}
.daybook .room-tile-symbol .icon{width:20px;height:20px}
.daybook .court-room-tile strong{display:block;font-family:var(--d-serif);font-weight:400;font-size:19px;line-height:1.3}
.daybook .court-room-tile strong small{display:block;font-size:10px;letter-spacing:2px;color:var(--db-tone-24);margin:3px 0 7px}
.daybook .court-room-tile .grow>span{display:block;font-size:11px;line-height:1.7;color:var(--db-tone-27)}
.daybook .room-count{display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--d-serif);font-size:23px;color:var(--db-tone-33)}
.daybook .room-count .icon{width:13px;height:13px}
.daybook .court-empty{text-align:center;padding:26px 18px;min-width:0;grid-column:1/-1;border:1px dashed color-mix(in srgb, var(--db-tone-50) 25%, transparent);border-radius:10px;background:radial-gradient(ellipse at top,color-mix(in srgb, var(--db-tone-28) 4%, transparent),transparent 65%)}
.daybook .court-empty h3{font-size:23px;color:var(--db-tone-41);margin:9px 0}
.daybook .court-empty p{font-size:12px;line-height:1.8;color:var(--db-tone-27);max-width:450px;margin:0 auto 16px}
.daybook .empty-ornament{display:grid;place-items:center;width:45px;height:45px;margin:auto;color:var(--db-tone-28);border:1px solid color-mix(in srgb, var(--db-tone-30) 24%, transparent);border-radius:50%;background:color-mix(in srgb, var(--db-tone-30) 6%, transparent)}
.daybook .empty-ornament .icon{width:23px;height:23px}
.daybook .court-panel .court-empty{border:0;padding:13px 6px}
.daybook .court-panel .court-empty h3{font-size:21px}
.daybook .court-panel .court-empty p{font-size:11px}
.daybook .court-task{display:flex;align-items:flex-start;gap:11px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-50) 13%, transparent);padding:13px 0;min-width:0}
.daybook .court-task .tick{width:19px;height:19px;border-color:var(--db-tone-20);margin-top:3px;border-radius:4px}
.daybook .court-task .tick.done{background:var(--db-tone-54);border-color:var(--db-tone-51);color:var(--db-tone-02)}
.daybook .court-task .tick.done .icon{width:13px;height:13px}
.daybook .court-record-title{padding:0;color:var(--db-tone-45);text-align:left;font:inherit;line-height:1.45;overflow-wrap:anywhere}
.daybook .court-record-title:hover{color:var(--db-tone-30)}
.daybook .court-task .court-record-title{font-size:12px}
.daybook .court-task.is-done .court-record-title{text-decoration:line-through;color:var(--db-tone-20)}
.daybook .court-task>.btn{font-size:9px;padding:5px 8px;min-height:28px;margin-left:auto}
.daybook .court-meta{font-size:10px;color:var(--db-tone-27);line-height:1.65;margin-top:4px;overflow-wrap:anywhere}
.daybook .court-soft-copy{font-size:12px;color:var(--db-tone-27);line-height:1.8}
.daybook .court-status{display:inline-flex;padding:3px 7px;border:1px solid color-mix(in srgb, var(--db-tone-54) 31%, transparent);background:color-mix(in srgb, var(--db-tone-54) 7%, transparent);border-radius:4px;color:var(--db-tone-40);font-size:9px;white-space:nowrap;text-transform:none;line-height:1.5}
.daybook .status-paused,.daybook .status-waiting,.daybook .status-to-try,.daybook .court-status.soon{color:var(--db-tone-38);background:color-mix(in srgb, var(--db-tone-14) 11%, transparent);border-color:color-mix(in srgb, var(--db-tone-53) 31%, transparent)}
.daybook .status-retired,.daybook .late .court-status{color:var(--db-tone-32);border-color:color-mix(in srgb, var(--db-tone-21) 33%, transparent);background:color-mix(in srgb, var(--db-tone-19) 8%, transparent)}
.daybook .status-complete,.daybook .status-resolved,.daybook .status-favourite,.daybook .status-done{color:var(--db-tone-40);border-color:color-mix(in srgb, var(--db-tone-20) 40%, transparent)}
.daybook .court-room-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.daybook .court-room-toolbar h3{font-size:24px}
.daybook .court-room-toolbar input,.daybook .court-room-toolbar select{padding:9px 12px}
.daybook .court-room-toolbar>select{min-width:150px}
.daybook .court-search{display:flex;align-items:center;border:1px solid color-mix(in srgb, var(--db-tone-53) 25%, transparent);border-radius:7px;background:var(--db-tone-02);gap:4px;min-width:180px;max-width:480px;flex:1;padding-left:10px;color:var(--db-tone-20)}
.daybook .court-search input{border:0;flex:1;width:100%;background:transparent}
.daybook .court-record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.daybook .court-record-card{border:1px solid var(--court-line);border-radius:11px;background:linear-gradient(140deg,var(--db-tone-03),var(--db-tone-02));padding:22px;min-width:0;position:relative}
.daybook .court-record-card h3{font-size:24px;margin:10px 0 9px;line-height:1.2}
.daybook .court-record-card>p{font-size:12px;color:var(--db-tone-35);line-height:1.8}
.daybook .court-record-card footer,.daybook .court-mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.daybook .court-record-card footer{margin-top:18px;border-top:1px solid color-mix(in srgb, var(--db-tone-50) 19%, transparent);padding-top:12px}
.daybook .court-mini-row{font-size:10px;color:var(--db-tone-27);line-height:1.7}
.daybook .court-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}
.daybook .court-progress{height:5px;overflow:hidden;background:color-mix(in srgb, var(--db-tone-54) 13%, transparent);border-radius:5px;margin:15px 0 10px}
.daybook .court-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--db-tone-18),var(--db-tone-51));border-radius:5px}
.daybook .court-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.daybook .court-lane{border:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent);padding:12px;border-radius:11px;background:color-mix(in srgb, var(--db-tone-02) 27%, transparent);min-width:0}
.daybook .court-lane>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 3px 15px}
.daybook .court-lane>header h3{font-size:20px}
.daybook .court-lane>header>span{font-size:11px;border:1px solid color-mix(in srgb, var(--db-tone-50) 20%, transparent);border-radius:4px;padding:3px 6px;color:var(--db-tone-28)}
.daybook .court-lane .court-record-card{padding:17px;margin-bottom:12px}
.daybook .court-lane .court-record-card:last-child{margin-bottom:0}
.daybook .court-lane .court-record-card h3{font-size:21px}
.daybook .court-lane-empty{padding:24px 12px;text-align:center;font-family:var(--d-serif);font-style:italic;font-size:16px;color:var(--db-tone-27);border:1px dashed color-mix(in srgb, var(--db-tone-54) 19%, transparent);border-radius:7px;line-height:1.7}
.daybook .court-record-card blockquote{border-left:2px solid var(--db-tone-53);background:color-mix(in srgb, var(--db-tone-50) 4%, transparent);padding:10px 13px;margin:17px 0 0;font-size:12px;color:var(--db-tone-31);line-height:1.7}
.daybook .court-bottom-links{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}
.daybook .court-card-symbol{position:absolute;right:22px;top:24px;color:color-mix(in srgb, var(--db-tone-30) 40%, transparent)}
.daybook .court-card-symbol .icon{width:34px;height:34px}
.daybook .mandate-card{border-top:2px solid var(--db-tone-24);padding:28px}
.daybook .mandate-card h3{font-size:30px;margin:16px 0}
.daybook .court-long-copy{white-space:normal;line-height:1.9!important;font-size:14px!important}
.daybook .mandate-values{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:23px 0;padding-top:17px;border-top:1px solid color-mix(in srgb, var(--db-tone-24) 19%, transparent)}
.daybook .mandate-values small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--db-tone-28)}
.daybook .mandate-values p{font-size:12px;color:var(--db-tone-35);line-height:1.8;margin-top:6px}
.daybook .court-study-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:20px;font-size:11px;color:var(--db-tone-27)}
.daybook .study-step{font-size:11px;color:var(--db-tone-27);padding:6px 9px;border-bottom:1px solid color-mix(in srgb, var(--db-tone-53) 19%, transparent)}
.daybook .study-step.active{color:var(--db-tone-30);border-color:var(--db-tone-33)}
.daybook .note-card{background:linear-gradient(145deg,var(--db-tone-03),var(--db-tone-02))}
.daybook .note-preview{white-space:pre-line;overflow-wrap:anywhere;line-height:1.85!important;min-height:70px}
.daybook .court-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.daybook .court-tags span{font-size:9px;background:color-mix(in srgb, var(--db-tone-18) 9%, transparent);border:1px solid color-mix(in srgb, var(--db-tone-54) 16%, transparent);border-radius:3px;padding:3px 7px;color:var(--db-tone-29)}
.daybook .court-document-shelf{display:flex;flex-direction:column;gap:12px}
.daybook .court-document{display:flex;align-items:center;gap:20px;padding:22px;border:1px solid var(--court-line);border-radius:11px;background:linear-gradient(100deg,var(--db-tone-03),var(--db-tone-02));min-width:0}
.daybook .document-seal{display:grid;place-items:center;width:57px;height:66px;flex-shrink:0;background:color-mix(in srgb, var(--db-tone-50) 6%, transparent);border:1px solid color-mix(in srgb, var(--db-tone-53) 31%, transparent);border-radius:7px;color:var(--db-tone-28)}
.daybook .document-seal .icon{width:29px;height:29px}
.daybook .court-document h3{font-size:24px;margin:7px 0 9px}
.daybook .court-document-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--db-tone-35);font-size:11px}
.daybook .court-document .grow>p{font-size:11px;color:var(--db-tone-27);margin-top:8px;line-height:1.7}
.daybook .court-document-actions{display:flex;flex-direction:column;gap:7px}
.daybook .court-renewal{display:flex;align-items:center;gap:20px;padding:18px 22px;border:1px solid var(--court-line);border-radius:10px;background:var(--db-tone-02)}
.daybook .renewal-date{display:flex;flex-direction:column;align-items:center;width:70px;flex-shrink:0;color:var(--db-tone-33);border-right:1px solid color-mix(in srgb, var(--db-tone-53) 25%, transparent);padding-right:18px}
.daybook .renewal-date strong{font-family:var(--d-serif);font-size:33px;font-weight:400;line-height:1.1}
.daybook .renewal-date span{font-size:9px;white-space:nowrap}
.daybook .court-renewal h3{margin:5px 0;font-size:23px}
.daybook .court-renewal p{font-size:11px;color:var(--db-tone-35);line-height:1.6}
.daybook .court-renewal.late{border-left:3px solid var(--db-tone-22)}
.daybook .court-renewal.soon{border-left:3px solid var(--db-tone-30)}
.daybook .court-sync-note{display:flex;align-items:center;gap:9px;padding:12px 15px;color:var(--db-tone-27);font-size:11px;line-height:1.6;background:color-mix(in srgb, var(--db-tone-54) 3%, transparent);border:1px solid color-mix(in srgb, var(--db-tone-54) 16%, transparent);border-radius:8px;margin:16px 0}
.daybook .court-sync-note .icon{color:var(--db-tone-33)}
.daybook .court-edict-layout,.daybook .court-weather-layout,.daybook .court-journal-layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(250px,1fr);gap:18px}
.daybook .court-routine-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:18px;align-items:start}
.daybook .court-routine-grid .court-panel{margin-bottom:0}
.daybook .court-routine-grid .court-task .court-record-title{font-size:12px}
.daybook .court-habit-scroll{overflow-x:auto;background:var(--db-tone-02);border:1px solid var(--court-line);border-radius:11px}
.daybook .court-habit-table{border-collapse:collapse;min-width:640px;width:100%;font-size:12px;text-align:center}
.daybook .court-habit-table caption{text-align:left;padding:15px 20px;color:var(--db-tone-29);font-size:11px}
.daybook .court-habit-table th,.daybook .court-habit-table td{padding:14px 9px;border-top:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent)}
.daybook .court-habit-table thead th{background:color-mix(in srgb, var(--db-tone-54) 5%, transparent);color:var(--db-tone-33);font-size:16px;font-family:var(--d-serif);font-weight:400}
.daybook .court-habit-table thead th span{display:block;font-family:var(--d-sans);font-size:9px;color:var(--db-tone-27);margin-bottom:4px}
.daybook .court-habit-table th:first-child{width:36%;text-align:left;padding-left:20px}
.daybook .court-habit-table tbody th{font-weight:400;font-size:12px}
.daybook .court-habit-table tbody th button{color:var(--db-tone-45);padding:0;text-align:left}
.daybook .court-habit-table th small{display:block;font-size:9px;font-family:var(--d-sans);color:var(--db-tone-26);margin-top:4px}
.daybook .habit-check{height:29px;width:29px;border:1px solid color-mix(in srgb, var(--db-tone-51) 42%, transparent);border-radius:5px;color:var(--db-tone-40);display:inline-flex;align-items:center;justify-content:center;padding:3px}
.daybook .habit-check.done{background:var(--db-tone-54);color:var(--db-tone-02)}
.daybook .habit-check .icon{width:16px;height:16px}
.daybook .habit-off{color:var(--db-tone-17)}
.daybook .court-weather-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 20px}
.daybook .weather-choice{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--db-tone-35);padding:16px 7px;border:1px solid color-mix(in srgb, var(--db-tone-54) 25%, transparent);border-radius:9px;font-size:10px;background:var(--db-tone-02)}
.daybook .weather-choice .icon{width:26px;height:26px;color:var(--db-tone-51)}
.daybook .weather-choice.selected{background:color-mix(in srgb, var(--db-tone-50) 14%, transparent);color:var(--db-tone-38);border-color:var(--db-tone-30)}
.daybook .weather-choice:hover{border-color:var(--db-tone-24)}
.daybook .weather-calendar{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px}
.daybook .weather-day{padding:5px;aspect-ratio:1;display:grid;place-items:center;border-radius:4px;border:1px solid color-mix(in srgb, var(--db-tone-54) 13%, transparent);color:var(--db-tone-35);background:color-mix(in srgb, var(--db-tone-54) 6%, transparent);min-width:0}
.daybook .weather-day .icon{width:16px;height:16px}
.daybook .weather-day.empty{padding:0;color:var(--db-tone-17);background:transparent}
.daybook .weather-sun{color:var(--db-tone-30);background:color-mix(in srgb, var(--db-tone-50) 12%, transparent)}
.daybook .weather-breeze{color:var(--db-tone-51);background:color-mix(in srgb, var(--db-tone-51) 11%, transparent)}
.daybook .weather-cloud{color:var(--db-tone-35);background:color-mix(in srgb, var(--db-tone-27) 14%, transparent)}
.daybook .weather-rain{color:var(--db-tone-23);background:color-mix(in srgb, var(--db-tone-23) 13%, transparent)}
.daybook .weather-storm{color:var(--db-tone-34);background:color-mix(in srgb, var(--db-tone-52) 13%, transparent)}
.daybook .weather-day.selected{border-color:var(--db-tone-38)}
.daybook .court-weather-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:9px;color:var(--db-tone-29);margin-top:15px}
.daybook .court-weather-legend>span{display:flex;align-items:center;gap:5px}
.daybook .court-weather-legend .icon{width:13px;height:13px}
.daybook .weather-tally{display:grid;grid-template-columns:1fr auto;gap:5px;color:var(--db-tone-35);font-size:11px;margin:2px 0 16px}
.daybook .weather-tally>span{display:flex;gap:8px;align-items:center}
.daybook .weather-tally>strong{color:var(--db-tone-38);font-weight:500}
.daybook .weather-tally .court-progress{grid-column:1/-1;margin:4px 0 0;height:4px}
.daybook .court-weather-today{display:flex;gap:18px;align-items:center}
.daybook .court-weather-today>.icon{width:48px;height:48px;color:var(--db-tone-33)}
.daybook .court-weather-today h3{font-size:26px;margin-bottom:5px}
.daybook .court-weather-today p{font-size:12px;color:var(--db-tone-35);line-height:1.8}
.daybook .court-journal{width:100%;min-height:430px!important;border:0!important;border-radius:0!important;line-height:32px!important;padding:6px 0!important;margin:14px 0;background-color:transparent!important;background-image:repeating-linear-gradient(transparent,transparent 31px,color-mix(in srgb, var(--db-tone-54) 15%, transparent) 31px,color-mix(in srgb, var(--db-tone-54) 15%, transparent) 32px)!important;font:16px/32px Georgia,serif!important;resize:vertical}
.daybook .court-prompt-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}
.daybook .court-prompt-row .btn{font-size:10px;white-space:normal;text-align:left}
.daybook .journal-entry{display:block;width:100%;border:0;border-bottom:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent);background:transparent;padding:13px 0;text-align:left}
.daybook .journal-entry strong{display:block;font-size:12px;font-weight:400;color:var(--db-tone-28)}
.daybook .journal-entry span{display:block;font-size:11px;color:var(--db-tone-29);line-height:1.7;margin-top:6px}
.daybook .journal-entry.active{border-left:2px solid var(--db-tone-28);padding-left:12px}
.daybook .court-stock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.daybook .court-stock-card{display:flex;gap:19px;padding:21px;background:linear-gradient(135deg,var(--db-tone-03),var(--db-tone-02));border:1px solid var(--court-line);border-radius:11px;min-width:0}
.daybook .court-stock-card.low-stock{border-top:2px solid var(--db-tone-30)}
.daybook .court-record-thumb{width:90px;height:90px;overflow:hidden;border:1px solid color-mix(in srgb, var(--db-tone-30) 24%, transparent);background:color-mix(in srgb, var(--db-tone-24) 4%, transparent);border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:var(--db-tone-28)}
.daybook .court-record-thumb .icon{width:34px;height:34px}
.daybook .court-record-thumb img{width:100%;height:100%;object-fit:cover}
.daybook .stock-content{flex:1;min-width:0}
.daybook .stock-content h3{font-size:24px;margin:6px 0 14px}
.daybook .stock-quantity{display:flex;gap:15px;align-items:center}
.daybook .stock-quantity>button{display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--db-tone-53) 38%, transparent);border-radius:5px;width:28px;height:28px;color:var(--db-tone-33);font-size:20px}
.daybook .stock-quantity>strong{font:30px/1.2 var(--d-serif);color:var(--db-tone-41);text-align:center;min-width:70px}
.daybook .stock-quantity small{font:10px var(--d-sans);color:var(--db-tone-29);display:block;margin-top:3px}
.daybook .stock-expiry{display:flex;gap:7px;align-items:center;font-size:10px;color:var(--db-tone-26);margin-top:12px}
.daybook .stock-expiry .icon{width:13px;height:13px}
.daybook .stock-expiry.late{color:var(--db-tone-32)}
.daybook .stock-expiry.soon{color:var(--db-tone-33)}
.daybook .court-detail-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;border-top:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent);border-bottom:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent);padding:17px 0;margin:18px 0}
.daybook .court-detail-fields>div{min-width:0;overflow-wrap:anywhere}
.daybook .court-detail-fields span{display:block;font-size:10px;color:var(--db-tone-27);margin-bottom:4px}
.daybook .court-detail-fields strong,.daybook .court-detail-fields a{font-size:12px;line-height:1.7;color:var(--db-tone-41);font-weight:400}
.daybook .court-recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.daybook .court-recipe-card{background:var(--db-tone-02);border:1px solid var(--court-line);border-radius:12px;overflow:hidden;min-width:0}
.daybook .recipe-cover{display:block;width:100%;aspect-ratio:1.55;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb, var(--db-tone-50) 16%, transparent),transparent 70%),linear-gradient(150deg,var(--db-tone-06),var(--db-tone-02));position:relative;overflow:hidden;padding:0}
.daybook .recipe-cover>img{height:100%;width:100%;object-fit:cover}
.daybook .recipe-cover>.court-status{position:absolute;left:13px;top:13px;background:color-mix(in srgb, var(--db-tone-02) 91%, transparent)}
.daybook .recipe-illustration{display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;padding:20px;color:var(--db-tone-29)}
.daybook .recipe-illustration svg{height:85px;width:85px;filter:sepia(.25) saturate(.7)}
.daybook .recipe-illustration span{font-family:var(--d-serif);font-size:13px;font-style:italic;margin-top:7px}
.daybook .recipe-info{padding:20px}
.daybook .recipe-info h3{font-size:25px;margin:8px 0 11px}
.daybook .recipe-facts{display:flex;gap:13px;flex-wrap:wrap;font-size:10px;color:var(--db-tone-28);line-height:1.5}
.daybook .recipe-info>p{color:var(--db-tone-29);font-size:11px;margin-top:12px}
.daybook .court-menu-scroll{overflow-x:auto;border:1px solid var(--court-line);border-radius:11px;background:var(--db-tone-02)}
.daybook .court-menu-table{min-width:700px}
.daybook .menu-table-head,.daybook .menu-table-row{display:grid;grid-template-columns:75px repeat(3,minmax(0,1fr))}
.daybook .menu-table-head{background:color-mix(in srgb, var(--db-tone-53) 6%, transparent);border-bottom:1px solid var(--court-line);color:var(--db-tone-33);font-size:12px;padding:15px 0;font-weight:400}
.daybook .menu-table-head>*{padding-left:17px;font-weight:400}
.daybook .menu-table-row{border-bottom:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent)}
.daybook .menu-table-row:last-child{border:0}
.daybook .menu-table-row.selected{background:color-mix(in srgb, var(--db-tone-50) 5%, transparent)}
.daybook .menu-day{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-right:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent);color:var(--db-tone-33);font-family:var(--d-serif)}
.daybook .menu-day span{font:10px var(--d-sans)}
.daybook .menu-day strong{font-size:29px;font-weight:400}
.daybook .meal-cell{padding:12px 15px;border-right:1px solid color-mix(in srgb, var(--db-tone-53) 15%, transparent);min-width:0}
.daybook .meal-cell:last-child{border:0}
.daybook .meal-cell textarea{width:100%;background:none;border:0;padding:0;font-size:12px;line-height:1.7;min-height:42px}
.daybook .meal-cell .btn{padding:2px 7px;min-height:23px;font-size:9px;margin-top:5px;border-color:color-mix(in srgb, var(--db-tone-53) 19%, transparent);background:color-mix(in srgb, var(--db-tone-06) 18%, transparent)}
.daybook .court-two-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.daybook .court-two-notes section{border-left:2px solid var(--db-tone-54);padding:2px 0 3px 12px;background:color-mix(in srgb, var(--db-tone-49) 2%, transparent)}
.daybook .court-two-notes section+section{border-color:var(--db-tone-22);background:color-mix(in srgb, var(--db-tone-53) 2%, transparent)}
.daybook .court-two-notes h4{font-family:var(--d-sans);font-size:10px;color:var(--db-tone-40);margin-bottom:7px}
.daybook .court-two-notes section+section h4{color:var(--db-tone-28)}
.daybook .court-two-notes p{font-size:12px;color:var(--db-tone-35);line-height:1.8;overflow-wrap:anywhere}
.daybook .court-sleep-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(180px,1fr);gap:18px;margin-bottom:20px}
.daybook .court-sleep-layout .court-panel{margin:0}
.daybook .sleep-summary{border:1px solid var(--court-line);border-radius:12px;background:radial-gradient(ellipse at top,color-mix(in srgb, var(--db-tone-24) 11%, transparent),transparent 70%),var(--db-tone-02);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;text-align:center}
.daybook .sleep-summary>svg{width:70px;height:70px;filter:sepia(.2) saturate(.6);margin-bottom:10px}
.daybook .sleep-summary>strong{font:37px var(--d-serif);color:var(--db-tone-33);margin:10px 0}
.daybook .sleep-summary p{font-size:11px;color:var(--db-tone-35);line-height:1.8}
.daybook .sleep-summary small{font-size:9px;color:var(--db-tone-27);line-height:1.7;margin-top:10px}
.daybook .sleep-chart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:7px;height:185px;margin-bottom:13px;align-items:end}
.daybook .sleep-column{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;min-width:0;padding-top:20px}
.daybook .sleep-column>button{height:var(--sleep-height);min-height:2px;width:60%;max-width:27px;background:linear-gradient(var(--db-tone-51),var(--db-tone-13));border:1px solid color-mix(in srgb, var(--db-tone-51) 33%, transparent);border-radius:4px 4px 0 0;flex-shrink:0}
.daybook .sleep-column>span{font-size:8px;white-space:nowrap;color:var(--db-tone-40);margin-bottom:7px}
.daybook .sleep-column>small{font-size:9px;color:var(--db-tone-26);margin-top:8px}
.daybook .court-night-record{display:flex;gap:18px;align-items:center;padding:20px;border:1px solid var(--court-line);border-radius:10px;background:var(--db-tone-02)}
.daybook .court-night-record h3{font-size:22px;margin-bottom:6px}
.daybook .court-night-record p{font-size:11px;color:var(--db-tone-29)}
.daybook .night-icon{width:39px;height:39px;border:1px solid color-mix(in srgb, var(--db-tone-53) 25%, transparent);display:grid;place-items:center;border-radius:50%;color:var(--db-tone-33);flex-shrink:0}
.daybook .night-duration{font:26px var(--d-serif);color:var(--db-tone-38);white-space:nowrap}
.daybook .court-week-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.daybook .court-week-day{display:flex;flex-direction:column;text-align:left;gap:5px;border:1px solid color-mix(in srgb, var(--db-tone-53) 21%, transparent);border-radius:7px;padding:13px 10px;background:var(--db-tone-02);min-width:0;color:var(--db-tone-29)}
.daybook .court-week-day.active{border-color:var(--db-tone-28);background:color-mix(in srgb, var(--db-tone-50) 6%, transparent)}
.daybook .court-week-day>span:first-child{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--db-tone-28)}
.daybook .court-week-day>strong{font:29px var(--d-serif);color:var(--db-tone-38)}
.daybook .court-week-day>small{font-size:9px;margin-bottom:8px}
.daybook .court-week-day>span:last-child{font-size:10px;line-height:1.7;overflow-wrap:anywhere}
.daybook .court-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:28px;padding-top:19px;border-top:1px solid color-mix(in srgb, var(--db-tone-53) 16%, transparent);color:var(--db-tone-20);font-size:10px}
.daybook .court-footer>div{display:flex;gap:8px;flex-wrap:wrap}
.daybook .court-footer .btn{font-size:10px;background:none;border-color:transparent;color:var(--db-tone-28)}
.daybook .court-modal{background:linear-gradient(135deg,var(--db-tone-02),var(--db-tone-02))!important;color:var(--db-tone-45)!important;border:1px solid color-mix(in srgb, var(--db-tone-30) 44%, transparent)!important;color-scheme:dark}
.daybook .court-modal.wide{width:min(820px,calc(100vw - 28px))}
.daybook .court-modal .modal-header{background:var(--db-tone-03)!important;border-color:color-mix(in srgb, var(--db-tone-50) 20%, transparent)}
.daybook .court-modal .modal-header h2{color:var(--db-tone-41);font-size:28px}
.daybook .court-modal .modal-header p{color:var(--db-tone-29);font-size:11px}
.daybook .court-modal .modal-header .icon-btn{color:var(--db-tone-28)}
.daybook .court-modal .modal-body{padding:24px}
.daybook .court-modal .field>span,.daybook .court-modal label{color:var(--db-tone-39)}
.daybook .court-modal .field small{color:var(--db-tone-29);font-size:10px;line-height:1.7}
.daybook .court-modal .field textarea{line-height:1.9}
.daybook .court-modal input,.daybook .court-modal textarea,.daybook .court-modal select{border-radius:6px}
.daybook .court-modal .check-field{font-size:11px;color:var(--db-tone-40)}
.daybook .court-modal .form-actions{border-color:color-mix(in srgb, var(--db-tone-53) 19%, transparent)}
.daybook .court-modal .form-actions .row{flex-wrap:wrap}
.daybook .court-form-intro{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.4px;color:var(--db-tone-28);border-bottom:1px solid color-mix(in srgb, var(--db-tone-53) 21%, transparent);margin-bottom:20px;padding-bottom:15px}
.daybook .court-privacy{font-size:10px;color:var(--db-tone-29);padding:12px;border:1px solid color-mix(in srgb, var(--db-tone-53) 19%, transparent);line-height:1.8;border-radius:6px}
.daybook .court-modal .error-text{color:var(--db-tone-32)}
.daybook .court-detail-kicker{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--db-tone-28);margin-bottom:10px}
.daybook .court-detail-image .court-record-thumb{width:100%;height:220px;margin-bottom:20px}
.daybook .court-detail-image img{object-fit:contain}
.daybook .court-prose{margin:20px 0;color:var(--db-tone-35);line-height:1.9;font-size:13px;overflow-wrap:anywhere}
.daybook .court-prose h3{font-size:23px;color:var(--db-tone-41);margin-bottom:10px}
.daybook .court-record-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.daybook .court-record-links a{font-size:12px;color:var(--db-tone-33);text-underline-offset:4px}
.daybook .court-linked-actions{margin-top:22px}
.daybook .court-modal .court-task .tick.done{background:var(--db-tone-54)}
.daybook .court-modal .court-task.is-done .court-record-title{color:var(--db-tone-29)}
.daybook .sleep-duration{font:34px var(--d-serif);color:var(--db-tone-38)}
.daybook .sleep-duration small{display:block;font:11px/1.8 var(--d-sans);color:var(--db-tone-27);margin-top:7px}
.daybook .court-menu-bases{margin-top:22px}
.daybook .court-menu-bases .court-task{align-items:center}
.daybook .court-modal .court-detail-fields{margin-top:10px}
.daybook .court-modal a{color:var(--db-tone-38)}
.daybook .court-modal .court-task button{font-size:12px}
.daybook .court-modal .court-task .btn{font-size:10px}
.daybook .court-modal .full{grid-column:1/-1}
.daybook .mandate-excerpt{font:italic 23px/1.65 var(--d-serif);color:var(--db-tone-41);margin:2px 0 14px;overflow-wrap:anywhere}
.daybook .court-section-heading>span{font-size:10px;color:var(--db-tone-27)}
.daybook .court-hall-layout .court-sync-note{align-items:flex-start}
.daybook .court-modal input[type=file]::file-selector-button{border:1px solid color-mix(in srgb, var(--db-tone-30) 33%, transparent);border-radius:4px;background:var(--db-tone-06);color:var(--db-tone-38);padding:7px 10px;margin-right:10px;cursor:pointer}
.daybook .court-modal input[type=checkbox]{accent-color:var(--db-tone-51)}
@media (min-width:1700px){
  .daybook .court-recipe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .daybook .court-hall-tile .hall-tile-cover{width:180px}
  .daybook .court-room-grid{gap:18px}
}
@media (max-width:1350px){
  .daybook .court-overview-grid,.daybook .court-hall-layout{grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr)}
  .daybook .hall-tile-cover{width:110px}
  .daybook .hall-tile-art{width:82px;height:82px}
  .daybook .hall-tile-content{padding:20px 16px}
  .daybook .hall-tile-content h3{font-size:21px}
  .daybook .court-stat{padding:16px 12px;gap:8px}
  .daybook .court-stat>.icon{width:18px;height:18px}
  .daybook .court-stock-card{gap:13px;padding:17px}
  .daybook .court-stock-card>.court-record-thumb{width:65px;height:65px}
  .daybook .court-record-grid,.daybook .court-routine-grid{gap:14px}
  .daybook .court-recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .court-kanban{gap:10px}
  .daybook .court-lane{padding:9px}
  .daybook .court-lane>header h3{font-size:18px}
  .daybook .court-room-tile{padding:16px;gap:9px}
  .daybook .court-room-tile strong{font-size:18px}
  .daybook .court-room-grid{grid-template-columns:1fr}
  .daybook .court-hall-layout>.court-room-grid{grid-template-columns:1fr}
  .daybook .weather-calendar{grid-template-columns:repeat(13,minmax(0,1fr))}
  .daybook .court-weather-choices{gap:5px}
  .daybook .weather-choice{padding:13px 3px}
  .daybook .court-sleep-layout{grid-template-columns:minmax(0,3fr) 180px}
}
@media (max-width:1080px){
  .daybook .court-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .court-hall-layout>.court-room-grid{grid-template-columns:1fr}
  .daybook .court-hall-tile{min-height:225px}
}
@media (max-width:760px){
  .daybook .court-room-tabs{padding-top:13px;gap:5px}
  .daybook .court-room-tabs button{font-size:10px;padding:9px 10px}
  .daybook .court-page-body{padding-top:18px}
  .daybook .court-stat-grid,.daybook .court-stat-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .daybook .court-stat-grid.three .court-stat:last-child{grid-column:1/-1}
  .daybook .court-stat{padding:15px}
  .daybook .court-stat strong{font-size:29px}
  .daybook .court-stat span{font-size:10px}
  .daybook .court-stat small{font-size:9px}
  .daybook .court-overview-grid,.daybook .court-hall-layout,.daybook .court-edict-layout,.daybook .court-weather-layout,.daybook .court-journal-layout{grid-template-columns:1fr;gap:0}
  .daybook .court-hall-grid{grid-template-columns:1fr;gap:14px}
  .daybook .court-hall-tile{min-height:210px}
  .daybook .hall-tile-cover{width:115px}
  .daybook .hall-tile-content{padding:21px 19px}
  .daybook .hall-tile-content h3{font-size:23px}
  .daybook .hall-tile-content>p{font-size:11px;min-height:0}
  .daybook .court-panel>header{padding:17px;align-items:flex-start}
  .daybook .court-panel>header h3{font-size:21px}
  .daybook .court-panel-body{padding:17px}
  .daybook .court-hall-layout>.court-room-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}
  .daybook .court-room-tile{min-height:150px;gap:10px;position:relative;padding:16px;flex-wrap:wrap}
  .daybook .room-tile-symbol{width:30px;height:30px}
  .daybook .room-count{position:absolute;right:14px;top:16px;font-size:20px}
  .daybook .room-count .icon{display:none}
  .daybook .court-room-tile .grow{flex-basis:100%}
  .daybook .court-room-tile strong{font-size:19px}
  .daybook .court-room-tile .grow>span{font-size:10px}
  .daybook .court-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .court-record-grid,.daybook .court-stock-grid{grid-template-columns:1fr}
  .daybook .court-kanban{grid-template-columns:1fr}
  .daybook .court-lane{padding:13px}
  .daybook .court-lane>header h3{font-size:22px}
  .daybook .court-lane .court-record-card h3{font-size:24px}
  .daybook .court-routine-grid{grid-template-columns:1fr}
  .daybook .court-room-toolbar{gap:10px;align-items:stretch}
  .daybook .court-room-toolbar .court-search{max-width:none;min-width:0;flex-basis:100%}
  .daybook .court-room-toolbar>select{flex:1;font-size:11px;min-width:0}
  .daybook .court-room-toolbar>.btn{font-size:11px}
  .daybook .court-room-toolbar h3{font-size:25px}
  .daybook .court-room-toolbar .row{flex-wrap:wrap}
  .daybook .court-document{padding:18px;gap:13px;flex-wrap:wrap}
  .daybook .document-seal{width:42px;height:51px}
  .daybook .document-seal .icon{width:24px;height:24px}
  .daybook .court-document h3{font-size:23px}
  .daybook .court-document-actions{flex-direction:row;margin-left:55px}
  .daybook .court-document .grow{min-width:calc(100% - 70px)}
  .daybook .court-document .court-mini-row .court-status{font-size:8px}
  .daybook .court-document-meta{font-size:10px;gap:5px 10px}
  .daybook .court-renewal{gap:14px;flex-wrap:wrap;padding:17px}
  .daybook .court-renewal>.court-status{margin-left:74px}
  .daybook .court-renewal>.btn{margin-left:auto}
  .daybook .renewal-date{width:60px;padding-right:12px}
  .daybook .court-renewal h3{font-size:23px}
  .daybook .weather-calendar{grid-template-columns:repeat(15,minmax(0,1fr))}
  .daybook .court-weather-choices{gap:8px}
  .daybook .weather-choice{padding:16px 8px;font-size:11px}
  .daybook .weather-choice .icon{width:29px;height:29px}
  .daybook .court-journal{min-height:330px!important}
  .daybook .court-stock-card{padding:20px;gap:17px}
  .daybook .court-stock-card>.court-record-thumb{width:80px;height:80px}
  .daybook .court-recipe-grid{gap:13px}
  .daybook .recipe-info{padding:17px}
  .daybook .recipe-info h3{font-size:23px}
  .daybook .recipe-facts{gap:7px;font-size:9px}
  .daybook .recipe-info .btn{font-size:10px;padding:6px 9px}
  .daybook .court-sleep-layout{grid-template-columns:1fr}
  .daybook .sleep-summary{display:grid;grid-template-columns:70px 1fr;text-align:left;padding:18px 22px;gap:0 18px}
  .daybook .sleep-summary>svg{grid-row:1/5;margin:0}
  .daybook .sleep-summary>strong{font-size:30px;margin:3px 0}
  .daybook .sleep-summary small{margin-top:5px}
  .daybook .court-night-record{gap:12px;flex-wrap:wrap;padding:18px}
  .daybook .court-night-record .grow{min-width:calc(100% - 55px)}
  .daybook .court-night-record h3{font-size:23px}
  .daybook .court-night-record>.court-status{margin-left:51px}
  .daybook .night-duration{font-size:25px;margin-left:auto}
  .daybook .court-night-record>.btn{margin-left:auto}
  .daybook .court-week-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .daybook .court-week-day{padding:12px}
  .daybook .court-footer{flex-direction:column;align-items:flex-start;font-size:9px;gap:9px}
  .daybook .court-modal.wide,.daybook .court-modal{width:calc(100vw - 20px)!important;max-height:94dvh}
  .daybook .court-modal .modal-body{padding:19px}
  .daybook .court-modal .modal-header{padding:18px}
  .daybook .court-modal .modal-header h2{font-size:25px}
  .daybook .court-modal .form-grid{grid-template-columns:1fr}
  .daybook .court-modal .form-actions{gap:13px}
  .daybook .court-modal .field>span{font-size:11px}
  .daybook .court-modal .court-detail-fields{gap:13px}
  .daybook .court-modal .court-prose{font-size:13px}
}
@media (max-width:430px){
  .daybook .court-stat{padding:13px 12px;gap:9px}
  .daybook .court-stat>.icon{width:16px;height:16px}
  .daybook .court-stat strong{font-size:27px}
  .daybook .hall-tile-cover{width:85px}
  .daybook .hall-tile-art{width:65px;height:65px}
  .daybook .tile-cn{font-size:17px;letter-spacing:2px}
  .daybook .tile-number{left:15px;font-size:12px}
  .daybook .hall-tile-content{padding:19px 15px}
  .daybook .hall-tile-content h3{font-size:22px}
  .daybook .hall-quick-link{font-size:9px;padding:4px 6px}
  .daybook .court-room-grid,.daybook .court-hall-layout>.court-room-grid{grid-template-columns:1fr}
  .daybook .court-room-tile{min-height:0;flex-wrap:nowrap;padding:18px}
  .daybook .court-room-tile .grow{flex-basis:auto}
  .daybook .room-count{position:static}
  .daybook .court-room-tile .grow>span{font-size:11px}
  .daybook .weather-calendar{grid-template-columns:repeat(10,minmax(0,1fr))}
  .daybook .court-weather-choices{gap:5px}
  .daybook .weather-choice{padding:12px 4px;font-size:9px}
  .daybook .weather-choice .icon{width:23px;height:23px}
  .daybook .court-stock-card{gap:12px;padding:17px}
  .daybook .court-stock-card>.court-record-thumb{width:64px;height:64px}
  .daybook .stock-content h3{font-size:23px}
  .daybook .court-record-card{padding:21px}
  .daybook .mandate-values,.daybook .court-two-notes{grid-template-columns:1fr}
  .daybook .court-recipe-grid{grid-template-columns:1fr}
  .daybook .recipe-cover{aspect-ratio:1.8}
  .daybook .recipe-illustration svg{width:105px;height:105px}
  .daybook .recipe-info{padding:21px}
  .daybook .recipe-info h3{font-size:27px}
  .daybook .recipe-facts{gap:15px;font-size:11px}
  .daybook .court-week-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daybook .sleep-chart{gap:4px;height:180px}
  .daybook .sleep-column>span{font-size:7px}
  .daybook .sleep-column>button{width:70%}
  .daybook .court-task .court-record-title{font-size:12px}
  .daybook .court-task>.btn{font-size:8px;padding:4px 6px}
  .daybook .court-detail-fields{grid-template-columns:1fr 1fr}
  .daybook .court-record-links{gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .daybook .court-edition button{transition:none!important}
  .daybook .court-room-tile:hover{transform:none}
}
/* the Courts in the palace (Drop 158): the date and the planner's doors above the rooms, as the daybook's own pages have them */
.daybook .court-toolbar{flex-wrap:wrap;row-gap:8px;margin-bottom:4px}
.daybook .court-toolbar .period{min-width:120px}
.daybook .court-toolbar .toolbar-actions{flex-wrap:wrap;align-items:center}
.daybook .court-room-tabs{padding-top:10px}
.daybook .court-record-links a.btn,.daybook .court-document-actions a.btn{text-decoration:none}
.daybook .court-edition .court-task .tick:disabled{opacity:.35;cursor:not-allowed}
@media (max-width: 760px){
  .daybook .court-toolbar{align-items:flex-start}
  .daybook .court-toolbar .toolbar-actions{width:100%;justify-content:flex-start}
}
/* the Courts stand on the daybook's own night, edge to edge under the banner, as the palace's main page does */
.view[data-room^="governance/"],.view[data-room^="inner-court/"]{padding:0 0 var(--space-5)}
.daybook .court-edition{padding:20px 26px 8px}
@media (max-width: 760px){
  .daybook .court-edition{padding:14px 14px 6px}
}
/* a Court record opened in a dialog wears the Court's inks too (the dialog stands outside the page) */
.daybook .court-modal{--court-text:var(--db-tone-45);--court-muted:var(--db-tone-29);--court-soft:var(--db-tone-27);--court-gold:var(--db-tone-30);--court-line:color-mix(in srgb, var(--db-tone-53) 21%, transparent);--court-panel:var(--db-tone-02);--court-input:var(--db-tone-02)}
/* Drop 159: a snack at the royal table - four meals a day in the week's table */
.daybook .menu-table-head,.daybook .menu-table-row{grid-template-columns:75px repeat(4,minmax(0,1fr))}
.daybook .court-menu-table{min-width:860px}
/* a product's care steps, each opening its step */
.daybook .stock-steps button{color:var(--d-gold);text-decoration:underline;text-underline-offset:2px}