/* =====================================================================
   AZEROTHIAN CHRONICLE — design system
   Tokens transcribed from INSPIRATION/DESIGN.md. No CSS framework.
   ===================================================================== */

/* ---------- fonts ----------
   Self-hosted (decided 20 October 2026): the three latin files Google Fonts
   serves, preloaded from index.html, so the page's text has its fonts at the
   first paint and no third origin sits on the way. The two fallbacks are the
   system faces re-measured to the web fonts' widths and line boxes
   (size-adjust and the overrides computed from the font tables against
   Liberation Serif/Sans, the metric twins of Times New Roman and Arial), so a
   page that paints before a font arrives does not move when it does. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url(fonts/cinzel-v26-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fonts/source-sans-3-v20-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/source-sans-3-v20-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The blackletter of the Soul shards tile's grimoire (31 October 2026); only that tile uses it, so it is not preloaded. */
@font-face { font-family: 'UnifrakturMaguntia'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/unifrakturmaguntia-v22-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel Fallback'; src: local('Times New Roman'), local('Liberation Serif'), local('Tinos');
  size-adjust: 137.10%; ascent-override: 71.19%; descent-override: 27.13%; line-gap-override: 0%; }
@font-face { font-family: 'Source Sans 3 Fallback'; src: local('Arial'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  size-adjust: 89.48%; ascent-override: 114.44%; descent-override: 44.70%; line-gap-override: 0%; }

:root {
  /* --- accent: ONE variable drives every coloured thing on the page.
         The public layout overrides it per character with the class colour
         from Settings → Class colours; the admin keeps the site default. --- */
  --accent: #fcb977;
  --accent-ink: #0b0f18;           /* text on a filled accent button */

  /* --- ground: cool blue-black, so a warm accent reads warm-on-cool --- */
  --surface-base: #0b0f18;
  --surface: #0e1320;
  --surface-elevated: #111827;
  --surface-container-lowest: #080b12;
  --surface-container-low: #10161f;
  --surface-container: #151c2b;
  --surface-container-high: #1c2536;
  --surface-container-highest: #243043;
  --surface-bright: #2b3850;

  --on-surface: #e9e6df;
  --on-surface-variant: #c9c6be;
  --outline: #8e8b83;
  --map-flight: #7fb0ff;           /* the flight network on the world map, the one colour on it that is not the page's */
  --outline-variant: #3a4052;

  /* --- semantic accents: all aliases of --accent, so old class names keep working --- */
  --primary: var(--accent);
  --primary-container: var(--accent);
  --on-primary: var(--accent-ink);
  --secondary: var(--accent);
  --brass: var(--accent);
  --gold-bright: var(--accent);
  --tertiary: #e2b5ff;
  --epic-purple: #a335ee;
  --uncommon-green: #5ab88a;
  --legendary-orange: #ff8000;
  --rare-blue: #4a8be0;
  --faction-alliance: #4a8be0;
  --faction-horde: #c8412e;
  --error: #ffb4ab;

  /* --- parchment (kept for the admin) --- */
  --surface-parchment: #efe3cb;
  --surface-parchment-subtle: #e4d3b2;
  --parchment-text: #3a2e20;
  --parchment-muted: #7a6a52;

  /* --- strokes & glass --- */
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.10);
  --border-brass: color-mix(in srgb, var(--accent) 35%, transparent);
  --veil-1: rgba(255, 255, 255, 0.035);
  --veil-2: rgba(255, 255, 255, 0.05);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(11, 15, 24, 0.55);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --complete-green: #5ab88a;
  --incomplete: rgba(255, 255, 255, 0.20);

  /* --- type --- */
  --font-display: 'Cinzel', 'Cinzel Fallback', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Source Sans 3 Fallback', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* --- rhythm (4px base) --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.875rem;
  --space-lg: 1.25rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --gutter: 1rem;
  --gutter-desktop: 1.5rem;

  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --surface-card: #121826;
  --surface-card-hover: #172033;

  --shell: 1160px;
  --shell-wide: 1328px;
  --nav-h: 64px;
  /* The header is the one glass row (the roster strip went with the roster, 11 November 2026). */
  --header-h: var(--nav-h);
  --ribbon-h: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* A rendered page's islands show and hide by the hidden attribute (decided 20 October 2026); nothing's display rule may win over it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

html { scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  background: var(--surface-base);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: #ffffff; }

button { font-family: inherit; cursor: pointer; }

img { max-width: 100%; display: block; }

/* ---------- typography scale ---------- */
.t-display     { font-family: var(--font-display); font-size: 56px; line-height: 60px; letter-spacing: .015em; font-weight: 700; }
.t-headline-lg { font-family: var(--font-display); font-size: 38px; line-height: 44px; letter-spacing: .015em; font-weight: 700; text-wrap: balance; }
.t-headline-md { font-family: var(--font-display); font-size: 22px; line-height: 28px; letter-spacing: .04em; font-weight: 600; }
.t-headline-sm { font-family: var(--font-display); font-size: 18px; line-height: 24px; letter-spacing: .03em; font-weight: 600; }
.t-title       { font-size: 16px; line-height: 22px; font-weight: 600; }
.t-body-lg     { font-size: 16px; line-height: 24px; }
.t-body        { font-size: 14px; line-height: 20px; }
.t-body-sm     { font-size: 13px; line-height: 18px; }
.t-label       { font-size: 12px; line-height: 16px; letter-spacing: .18em; font-weight: 600; text-transform: uppercase; }
.t-micro       { font-size: 11px; line-height: 14px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase; }

@media (max-width: 767px) {
  .t-display     { font-size: 32px; line-height: 36px; letter-spacing: .01em; }
  .t-headline-lg { font-size: 26px; line-height: 32px; letter-spacing: .01em; }
}

.muted { color: var(--outline); }
.variant { color: var(--on-surface-variant); }
.tabular { font-variant-numeric: tabular-nums; }
.gold { color: var(--primary); }

/* ---------- boot splash ---------- */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--space-sm); background: var(--surface-base); text-align: center;
}
/* The boot screen's crest is the header's square T (the mock, 11 November 2026). */
.boot__crest { width: 44px; height: 44px; border-radius: 6px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--primary); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.boot__title { font-family: var(--font-display); font-size: 26px; letter-spacing: .18em; color: var(--primary); }
.boot__sub { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); }
.boot__track { width: 180px; height: 3px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); overflow: hidden; }
.boot__track span { display: block; height: 100%; width: 40%; border-radius: var(--radius-sm);
  background: var(--accent); animation: boot-slide 1.1s ease-in-out infinite; }
@keyframes boot-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- layout shell ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.shell--wide { max-width: var(--shell-wide); }
@media (min-width: 768px)  { .shell { padding: 0 var(--space-xl); } }
@media (min-width: 1024px) { .shell { padding: 0 var(--gutter-desktop); } }

/* The footer stands at the foot of the window on a short page (12 November 2026): the page takes the room left. */
.site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page { padding-top: var(--header-h); flex: 1 0 auto; }
/* Top and bottom only: the sides are the shell's gutter, which the shorthand used to zero on any screen narrower than the shell. */
.section { padding-top: 36px; padding-bottom: 40px; border-top: 1px solid var(--border-hairline); }
.section:first-of-type, .cine + .section { border-top: 0; }

.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.section__lead { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.kicker { display: flex; align-items: center; gap: var(--space-sm); color: var(--outline); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.kicker--accent { color: var(--accent); }
.kicker__mark { display: inline-block; width: 28px; height: 2px; background: currentColor; }
.section__title { color: var(--on-surface); margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 767px) { .section__title { font-size: 22px; line-height: 28px; } }
.section__more { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.section__more:hover { color: var(--on-surface); }
.section__note { color: var(--outline); max-width: 48ch; margin: 0; }

/* ---------- header: one glass row over the artwork (the roster strip went with the roster, 11 November 2026) ---------- */
.topbar {
  position: fixed; top: var(--ribbon-h); left: 0; right: 0; z-index: 50;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline);
}
.topbar__inner { max-width: var(--shell-wide); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
@media (min-width: 768px)  { .topbar__inner { padding: 0 var(--space-xl); } }
@media (min-width: 1024px) { .topbar__inner { padding: 0 var(--gutter-desktop); } }
.brand__text { display: none; }
@media (min-width: 640px) { .brand__text { display: block; } }

.mainnav { display: flex; align-items: center; gap: 4px; margin-left: var(--space-md); }
/* On a phone the brand row held only the crest and the stream button, with
   64px of empty glass between them. They join the nav row instead, which
   scrolls sideways (decided 2 October 2026; the roster strip beneath went
   with the roster on 11 November 2026). */
@media (max-width: 899px) {
  :root { --navrow-h: 48px; --header-h: var(--navrow-h); }
  .topbar__inner { height: var(--navrow-h); gap: 8px; }
  .brand, .topbar__right { height: var(--navrow-h); flex-shrink: 0; }
  .mainnav { flex: 1 1 auto; min-width: 0; margin: 0; height: var(--navrow-h);
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav__link { white-space: nowrap; padding: 6px 10px; font-size: 12px; }
}
.mainnav__link {
  position: relative; padding: 8px 13px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--on-surface-variant); transition: color .15s ease, background .15s ease;
}
.mainnav__link:hover { color: var(--on-surface); background: rgba(255,255,255,.05); }
.mainnav__link.active { color: #ffffff; }
/* One-page anchors: land below the header (and the ribbon when there is one). */
#timeline, #captures, #systems, #map { scroll-margin-top: calc(var(--header-h) + var(--ribbon-h, 0px) + 12px); }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* The glyph crest is the mock's square (11 November 2026): the Tome's "T" in the display face, on the accent's tint. */
.brand__crest {
  width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1;
}
/* A crest picture is drawn as itself: no ring, no backing, no circle (decided 15 October 2026). */
.brand__crest--img { width: 32px; height: 32px; border: 0; border-radius: 0; background: none; object-fit: contain; }
/* On a phone the crest comes before the wordmark: the nav row is 48px with the four anchors. */
.brand .brand__phone-only { display: none; }
@media (max-width: 899px) { .brand .brand__wide-only { display: none; } .brand .brand__phone-only { display: block; } }
.brand__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.brand__sub { display: none; }

.topbar__right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.twitch-wrap { position: relative; }
.twitch {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-full);
  border: 1px solid rgba(145,70,255,.45); color: var(--on-surface-variant); font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.twitch:hover { color: #fff; background: rgba(145,70,255,.16); }
.twitch__glyph { color: #a970ff; }
.twitch__sub { font-weight: 400; }
.twitch__strong { font-weight: 700; color: #e9dcff; }
.twitch__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: #a855f7; flex-shrink: 0; }
.twitch__dot--soft { opacity: .6; }
.twitch__dot--ring { background: transparent; border: 1.5px solid #a970ff; box-sizing: border-box; }
.twitch__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.twitch--soon { border-color: rgba(145,70,255,.7); background: rgba(145,70,255,.12); color: #e9dcff; }
.twitch--live { background: #9146ff; border-color: #9146ff; color: #fff; font-weight: 700; letter-spacing: .1em;
  box-shadow: 0 0 0 4px rgba(145,70,255,.18), 0 0 24px rgba(145,70,255,.35); }
.twitch--live:hover { background: #a05dff; }
.twitch--live .twitch__dot { background: #fff; animation: pulse 1.6s ease-out infinite; }
.twitch--live .twitch__sub { opacity: .9; letter-spacing: .04em; }
.twitch--ended .twitch__sub:first-of-type { color: var(--outline); }
.twitch-card { position: absolute; right: 0; top: calc(100% + 10px); width: 360px; box-sizing: border-box; padding: 18px 20px; z-index: 70;
  border-radius: var(--radius-lg); border: 1px solid rgba(145,70,255,.45); background: var(--surface-elevated);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); display: grid; gap: 14px; text-align: left; letter-spacing: 0; text-transform: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.twitch-wrap:hover .twitch-card, .twitch-wrap:focus-within .twitch-card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.twitch-card::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.twitch-card__now { display: grid; gap: 4px; }
.twitch-card__eyebrow { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #a970ff; font-weight: 700; }
.twitch-card__eyebrow--muted { color: var(--outline); }
.twitch-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; }
.twitch-card__text { font-size: 14px; line-height: 20px; color: var(--on-surface-variant); }
.twitch-card__rule { height: 1px; background: rgba(255,255,255,.08); }
.twitch-card__list { display: grid; gap: 8px; }
.twitch-card__row { display: flex; justify-content: space-between; gap: var(--space-md); font-size: 13px; color: var(--on-surface); }
.twitch-card__row span:last-child { color: var(--on-surface-variant); text-align: right; }
.twitch-card__row--off { color: var(--outline); } .twitch-card__row--off span:last-child { color: var(--outline); }
.twitch-card__go { justify-content: center; background: #9146ff; border-color: #9146ff; color: #fff; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.twitch-card__go:hover { background: #a05dff; color: #fff; }
.twitch-card__foot { font-size: 11px; color: var(--outline); }
@media (max-width: 767px) { .twitch__sub { display: none; } .twitch--live .twitch__sub { display: inline; } .twitch-card { width: min(360px, calc(100vw - 32px)); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168,85,247,.6); } 70% { box-shadow: 0 0 0 6px rgba(168,85,247,0); } 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); } }


/* ---------- cards ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-highlight), 0 6px 20px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
}
.card__body { position: relative; padding: var(--space-lg); }
@media (min-width: 768px) { .card__body { padding: var(--space-xl); } }

.pillar {
  background: var(--glass);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: background .18s ease, border-color .18s ease;
}
.pillar:hover { background: rgba(255,255,255,.07); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- badges & pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.14); background: transparent;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9d6cd;
}
.badge--primary   { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.badge--uncommon  { border-color: rgba(90,184,138,.5); color: var(--uncommon-green); background: rgba(90,184,138,.12); }
.badge--rare      { border-color: rgba(74,139,224,.5); color: #8fb8ee; background: rgba(74,139,224,.12); }
.badge--epic      { border-color: rgba(163,53,238,.45); color: #d7b3ff; background: rgba(163,53,238,.12); }
.badge--legendary { border-color: rgba(255,128,0,.45); color: #ffb98a; background: rgba(255,128,0,.12); }
.badge--ghost     { background: transparent; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: all .18s ease; text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.1); color: var(--accent-ink); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.22); color: #ffffff; }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #ffffff; }
.btn--danger { background: transparent; border-color: rgba(255,180,171,.4); color: var(--error); }
.btn--danger:hover { background: rgba(255,180,171,.12); }
.btn--sm { padding: 7px 12px; font-size: 11px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- progress ---------- */
.meter { display: grid; gap: 6px; }
.meter__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.meter__value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter__track { height: 6px; border-radius: var(--radius-sm); background: rgba(255,255,255,.08); overflow: hidden; }
.meter__bar { height: 100%; border-radius: var(--radius-sm); background: var(--accent); transition: width .6s ease; }
.meter__bar--epic { background: var(--epic-purple); }
.meter__bar--rare { background: var(--rare-blue); }
.meter__bar--uncommon { background: var(--uncommon-green); }
/* The Professions card (3 October 2026): a meter per profession, the secondaries under a quiet line. */
.trades { display: grid; gap: var(--space-md); }
.trades__split { border-top: 1px solid var(--border-hairline); padding-top: var(--space-md); display: grid; gap: var(--space-md); }
.trades__name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.trades__tier { font-size: 12px; color: var(--on-surface-variant); letter-spacing: .03em; }
.badge--trade span:first-child { opacity: .8; }

/* ---------- cinematic hero: the art band the header floats over ---------- */
.cine {
  position: relative; overflow: hidden; color: var(--on-surface);
  margin-top: calc(-1 * (var(--header-h) + var(--ribbon-h)));
  padding-top: calc(var(--header-h) + var(--ribbon-h));
  min-height: 640px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cine__art { position: absolute; inset: 0; overflow: hidden; background: var(--surface-container-low); }
.cine__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 20%); }
.cine__art--portrait img { filter: blur(6px) saturate(1.1); transform: scale(1.06); }
.cine__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,34,64,.55), rgba(11,15,24,.25) 60%); mix-blend-mode: multiply; }
.cine__glow  { position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%); mix-blend-mode: screen; }
.cine__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,24,.9) 0%, rgba(11,15,24,.7) 34%, rgba(11,15,24,.15) 62%, rgba(11,15,24,0) 100%); }
.cine__fade  { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: linear-gradient(180deg, rgba(11,15,24,0), var(--surface-base) 94%); }
.cine__grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; pointer-events: none; }
.cine__empty { position: absolute; inset: 0;
  background: radial-gradient(900px 520px at 78% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
              radial-gradient(1000px 600px at 50% 0%, rgba(24,38,64,.9), transparent 70%),
              linear-gradient(180deg, #0e1524 0%, var(--surface-base) 100%); }

.cine__inner { position: relative; display: grid; gap: var(--space-xl); align-items: end;
  padding-top: 120px; padding-bottom: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .cine__inner { grid-template-columns: minmax(0, 1fr) 420px; gap: 60px; padding-top: 160px; } }

.cine__copy { display: flex; flex-direction: column; gap: 18px; }
.cine__name { margin: 0; font-family: var(--font-display); font-weight: 700; color: #ffffff; text-wrap: balance;
  font-size: clamp(48px, 8.2vw, 118px); line-height: .92; letter-spacing: .01em; }
/* The family name (Forever surnames): same line as the given name, lighter and smaller, wrapping under it when the line is short. */
.cine__name:has(.cine__family) { font-size: clamp(38px, 6vw, 86px); text-wrap: pretty; }
/* The guild under her name, in angle brackets as the game writes it, close under the name (decided 12 November 2026). */
.cine__guild { margin-top: -8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .06em; color: color-mix(in srgb, var(--accent) 70%, #ffffff); text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.cine__family { display: inline; font-size: .6em; font-weight: 600; letter-spacing: .02em; color: var(--on-surface-variant); vertical-align: baseline; }
.cine__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.cine__stand { margin: 6px 0 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: var(--on-surface-variant); }
@media (max-width: 767px) { .cine__stand { font-size: 16px; } }
.cine__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Hero metrics, grouped by whom they belong to: the character, the account, the world. */
.cine__stats { display: grid; gap: 14px; align-content: start; }
.stats-group { display: grid; gap: 8px; }
.stats-group__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lockup { padding: 16px; border-radius: var(--radius-md); background: var(--glass); border: 1px solid var(--border-card);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-width: 0; }
.lockup__tag { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); display: flex; justify-content: space-between; gap: 6px; }
.lockup__value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #ffffff; margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lockup__caption { font-size: 11px; color: var(--outline); margin-top: 2px; }

.faction-dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--outline-variant); }
.faction-dot--alliance { background: var(--faction-alliance); }
.faction-dot--horde    { background: var(--faction-horde); }

/* legacy metric block, still used on atlas entry pages */
.metrics { display: grid; gap: var(--space-md); margin-top: var(--space-lg); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .metrics { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.metric__tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.metric__value { font-size: 17px; font-weight: 600; color: var(--on-surface); font-variant-numeric: tabular-nums; }

/* portrait card, kept for the admin preview */
.portrait { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-card);
  background: var(--surface-container-lowest); aspect-ratio: 3 / 4; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait:has(img) { background: none; border-color: transparent; }
.portrait__fallback { width: 100%; height: 100%; display: grid; place-items: center; color: var(--outline-variant);
  font-family: var(--font-display); font-size: 40px; background: var(--surface-container-low); }
/* The class-colour filter's carrier (TintFilter): in the page so url(#…) finds it, taking no room. display: none would drop the filter. */
.tint-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.backdrop-preview { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-card);
  background: var(--surface-container-lowest); aspect-ratio: 16 / 7; }
.backdrop-preview img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 20%); }

/* ---------- chapters ---------- */

/* ---------- gallery ---------- */
/* From the field: one gallery (3 October 2026). A stage, the capture's words, a filmstrip; the accent marks the current one. */
/* The app focuses the page's first heading on every navigation (FocusOnNavigate,
   for screen readers); a heading is not keyboard-navigable, so the ring the
   browser draws round it is noise (the hero's name wore it, 20 October 2026). */
h1[tabindex="-1"]:focus { outline: none; }
.shot { display: flex; flex-direction: column; text-align: left; padding: 0; background: var(--surface-card);
  border: 1px solid var(--border-card); border-radius: var(--radius-lg); overflow: hidden; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.shot:hover { border-color: var(--border-brass); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 15%, transparent); transform: translateY(-2px); }
.shot__frame { position: relative; aspect-ratio: 16 / 9; background: var(--surface-container-lowest); overflow: hidden; }
.shot__frame img { width: 100%; height: 100%; object-fit: cover; }
.shot__placeholder { width: 100%; height: 100%;
  background: radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
              linear-gradient(160deg, #1b2236, #0e1320); }
.shot__tag-l { position: absolute; top: var(--space-sm); left: var(--space-sm); }
.shot__tag-r { position: absolute; top: var(--space-sm); right: var(--space-sm); }
.shot__body { padding: var(--space-md); display: grid; gap: 6px; }
.shot__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--gold-bright); }
.shot__text { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
.shot__foot { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-hairline); font-size: 11px; color: var(--outline); letter-spacing: .06em; }

/* The big view fills the screen (3 October 2026): the panel is as wide as the viewport allows, or as wide as a 16:9 picture
   can be and still leave room for its words beneath, whichever is smaller; it is never smaller than the page behind it. */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5,7,12,.92); display: grid; place-items: center; padding: var(--space-md); }
.lightbox__panel { width: min(96vw, 1920px, calc((100vh - 190px) * 16 / 9)); max-height: calc(100vh - 2 * var(--space-md)); display: grid;
  grid-template-rows: minmax(0, 1fr) auto; background: var(--surface-container-low);
  border: 1px solid var(--border-brass); border-radius: var(--radius-md); overflow: hidden; }
.lightbox__img { width: 100%; height: 100%; max-height: calc(100vh - 190px); object-fit: contain; background: #000; }
/* The lightbox's words: a capture's as the gallery shows them (paragraphs, breaks), anything else plain with its line breaks kept; a long one scrolls. */
.lightbox__text { margin: var(--space-sm) 0 0; max-height: 28vh; overflow-y: auto; max-width: 80ch; }
.lightbox__text p { margin: 0 0 .7em; }
.lightbox__text > :last-child { margin-bottom: 0; }
.lightbox__text--plain { white-space: pre-line; }
@media (max-width: 899px) { .lightbox { padding: var(--space-sm); } .lightbox__panel { width: min(100%, calc((100vh - 220px) * 16 / 9)); } }
.zoomable { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; text-align: left; }
.zoomable img { width: 100%; }

/* ---------- operations bento ---------- */
/* Cards are as tall as what they hold (decided 11 October 2026): stretched to the row, a short checklist beside
   the Legacy Ledger was a void between its objectives and its meter. */
.bento { display: grid; gap: var(--gutter-desktop); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px)  { .bento { grid-template-columns: repeat(2, minmax(320px, 1fr)); } }
@media (min-width: 1160px) { .bento { grid-template-columns: repeat(3, minmax(300px, 1fr)); } }

.op { display: flex; flex-direction: column; }
.op__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-hairline); }
.op__title { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: .03em; color: var(--on-surface); }
.op__body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-sm); flex: 1; align-content: start; }
.op__foot { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-hairline); }

.task { display: flex; align-items: center; gap: var(--space-sm); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.task:last-child { border-bottom: 0; }
.task--active { padding: 10px; border: 1px solid var(--border-brass); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.task__box { width: 18px; height: 18px; border-radius: var(--radius); flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.35); font-size: 11px; color: transparent; background: transparent; }
.task__box--done { background: var(--primary-container); border-color: var(--primary-container); color: var(--surface-base); }
.task__label { flex: 1; font-size: 13px; }
.task__label--done { color: rgba(255,255,255,.6); }
.task__status { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.stat-hero { text-align: center; padding: var(--space-lg); border-radius: var(--radius);
  background: var(--surface-container-lowest); border: 1px solid var(--border-hairline); }
.stat-hero__value { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; color: var(--accent); }
.stat-hero__label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-surface-variant); margin-top: var(--space-sm); }
.stat-hero__caption { font-size: 12px; color: var(--outline); margin-top: var(--space-xs); }
.stat-pair { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0,1fr)); }
.stat-pill { text-align: center; padding: var(--space-md) var(--space-sm); border-radius: var(--radius);
  background: var(--veil-2); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.stat-pill__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--outline); }
.stat-pill__value { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--on-surface); font-variant-numeric: tabular-nums; }

.deed { padding: var(--space-md); border-radius: var(--radius); background: var(--veil-2); border: 1px solid var(--border-hairline); }
.deed__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.deed__title { font-size: 14px; font-weight: 600; color: var(--gold-bright); }
.deed__text { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); margin-top: var(--space-xs); }
.deed__check { color: var(--complete-green); }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: var(--space-xl); }
.timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.14); }
.timeline__item { position: relative; padding-bottom: var(--space-xl); }
.timeline__node { position: absolute; left: calc(var(--space-xl) * -1); top: 4px; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--border-brass); background: var(--surface-base); margin-left: 0; }
.timeline__item--done .timeline__node { background: var(--primary-container); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.timeline__date { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); }
.timeline__title { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--on-surface); }
.timeline__text { font-size: 13px; line-height: 18px; color: var(--on-surface-variant); margin-top: var(--space-xs); }
.timeline__entries { margin: var(--space-xs) 0 0; padding-left: 1.1em; font-size: 13px; line-height: 18px; color: var(--on-surface-variant); }
.timeline__entries li + li { margin-top: 2px; }

/* ---------- posts ---------- */
.prose { max-width: 72ch; color: var(--on-surface-variant); font-size: 16px; line-height: 26px; }
.prose h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; color: var(--on-surface); margin: var(--space-xl) 0 var(--space-sm); }
.prose h3 { font-family: var(--font-display); font-size: 18px; color: var(--gold-bright); margin: var(--space-lg) 0 var(--space-xs); }
.prose p { margin: 0 0 var(--space-md); }
.prose ul { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.prose li { margin-bottom: var(--space-xs); }
.prose blockquote { margin: 0 0 var(--space-md); padding-left: var(--space-md); border-left: 2px solid var(--border-brass); color: var(--outline); font-style: italic; }
.prose code { font-size: 14px; background: var(--surface-container); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--secondary); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--border-hairline); padding: var(--space-xl) 0; margin-top: var(--space-2xl);
  background: var(--surface-container-lowest); }
.site-foot a { color: var(--on-surface-variant); }
.site-foot a:hover { color: var(--accent); }
/* The mock's footer (11 November 2026): the brand and the pages in one row, the legal line and the disclosure under a rule. */
.site-foot__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.site-foot__grid:has(> .now__tile) { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 719px) { .site-foot__grid:has(> .now__tile) { grid-template-columns: 1fr; } }
.site-foot__main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px var(--space-xl); }
.site-foot__title { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.site-foot__nav, .site-foot__else { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; font-weight: 600; }
.site-foot__else { flex-basis: 100%; font-weight: 400; }
.site-foot__legal { margin: var(--space-md) 0 0; padding-top: 14px; border-top: 1px solid var(--border-hairline); display: grid; gap: 6px;
  font-size: 12px; line-height: 1.5; color: var(--outline); text-wrap: pretty; }
.site-foot__line { margin: 0; }
.ai-note { margin: var(--space-xs) 0 0; font-size: 12px; line-height: 1.5; color: var(--outline); max-width: 80ch; }
.ai-note strong { font-weight: 600; color: var(--on-surface-variant); }
.ai-note--offline { margin: 0; text-align: center; max-width: 560px; }

/* ---------- forms (shared by admin) ---------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); }
.field__hint { font-size: 12px; color: var(--outline); }
.input, .textarea, .select {
  width: 100%; padding: 9px 12px; border-radius: var(--radius);
  background: var(--surface-container-lowest); border: 1px solid var(--border-hairline);
  color: var(--on-surface); font-family: var(--font-body); font-size: 14px; line-height: 20px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--border-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.textarea { min-height: 110px; resize: vertical; }
.textarea--tall { min-height: 340px; font-size: 15px; line-height: 24px; }
.icon-select { font-size: 15px; }
.field-row { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.checkbox { display: flex; align-items: center; gap: var(--space-sm); font-size: 13px; color: var(--on-surface-variant); }

/* ---------- admin shell ---------- */
.admin { display: grid; min-height: 100vh; grid-template-columns: 1fr; background: var(--surface-base); }
@media (min-width: 900px) { .admin { grid-template-columns: 236px 1fr; } }

.admin-side { border-right: 1px solid var(--border-hairline); background: var(--surface-container-lowest);
  padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-lg); }
.admin-side__brand { display: flex; align-items: center; gap: var(--space-sm); }
.admin-nav { display: grid; gap: 2px; }
.admin-nav__link { display: flex; align-items: center; gap: var(--space-sm); padding: 8px 10px; border-radius: var(--radius);
  color: var(--on-surface-variant); font-size: 13px; transition: all .15s ease; }
.admin-nav__link:hover { background: var(--surface-container-low); color: var(--on-surface); }
.admin-nav__link.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--primary); box-shadow: inset 2px 0 0 var(--primary-container); }
.admin-nav__group { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--outline-variant);
  padding: var(--space-md) 10px var(--space-xs); }

.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-hairline); background: var(--surface-container-lowest); }
.admin-content { padding: var(--space-lg); display: grid; gap: var(--space-lg); align-content: start; }
@media (min-width: 900px) { .admin-content { padding: var(--space-xl); } }

.admin-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.admin-stat { padding: var(--space-lg); }
.admin-stat__value { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.admin-stat__label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--outline); margin-top: var(--space-xs); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--outline);
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-hairline); font-weight: 600; }
.table td { padding: var(--space-md); border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.table__actions { display: flex; gap: var(--space-xs); justify-content: flex-end; }
/* The admin's Timeline tab: a row is dragged by its grip (or anywhere on it) onto another. */
.timeline-editor__row { cursor: grab; }
.timeline-editor__row--dragged { opacity: .45; }
.timeline-editor__row--over td { box-shadow: inset 0 2px 0 var(--accent); }
.timeline-editor__grip { color: var(--outline); padding: 0 4px; cursor: grab; user-select: none; }
.timeline-editor__day td { background: rgba(255, 255, 255, .03); }
.table-wrap { overflow-x: auto; }

/* "Used as" radio cards: a sketch of where the site shows each version. */
.role-pick { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.role-pick__opt { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: var(--space-sm); align-items: start; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-container-low); color: var(--on-surface-variant); cursor: pointer; }
.role-pick__opt:hover { border-color: var(--border-brass); color: var(--on-surface); }
.role-pick__opt--on { border-color: var(--accent); color: var(--on-surface); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.role-pick__opt:has(.role-pick__input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.role-pick__opt:has(.role-pick__input:disabled) { opacity: .6; cursor: default; }
.role-pick__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.role-pick__text { display: grid; gap: 3px; min-width: 0; }
.role-pick__name { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--on-surface); }
.role-pick__opt--on .role-pick__name { color: var(--accent); }
.role-pick__where { font-size: 12px; line-height: 16px; }
.role-pick__shape { font-size: 11px; line-height: 15px; color: var(--outline); }
/* The sketch: a 72×48 "screen"; <i>s are placed per role. The first <i> is the image itself. */
.role-pick__sketch { position: relative; display: block; width: 72px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--surface-container-lowest); border: 1px solid var(--border-hairline); box-sizing: border-box; }
.role-pick__sketch i { position: absolute; display: none; border-radius: 2px; background: currentColor; opacity: .22; }
.role-pick__sketch i:first-child { opacity: .55; background: var(--accent); }
.role-pick__opt--on .role-pick__sketch i:first-child { opacity: .95; }
/* photo: a journal / capture card — picture on top, two lines of text. */
.role-pick__sketch--photo i:nth-child(1) { display: block; left: 8px; top: 6px; width: 54px; height: 22px; }
.role-pick__sketch--photo i:nth-child(2) { display: block; left: 8px; top: 33px; width: 40px; height: 3px; }
.role-pick__sketch--photo i:nth-child(3) { display: block; left: 8px; top: 39px; width: 26px; height: 3px; }
/* backdrop: full-bleed band across the top of a character's page. */
.role-pick__sketch--backdrop i:nth-child(1) { display: block; left: 0; top: 0; width: 100%; height: 28px; border-radius: 0; }
.role-pick__sketch--backdrop i:nth-child(2) { display: block; left: 8px; top: 19px; width: 30px; height: 4px; background: #fff; opacity: .85; }
.role-pick__sketch--backdrop i:nth-child(3) { display: block; left: 8px; top: 34px; width: 36px; height: 3px; }
.role-pick__sketch--backdrop i:nth-child(4) { display: block; left: 8px; top: 40px; width: 24px; height: 3px; }
/* portrait: an upright 3:4 picture beside the text. */
.role-pick__sketch--portrait i:nth-child(1) { display: block; left: 8px; top: 7px; width: 25px; height: 33px; }
.role-pick__sketch--portrait i:nth-child(2) { display: block; left: 39px; top: 11px; width: 24px; height: 4px; }
.role-pick__sketch--portrait i:nth-child(3) { display: block; left: 39px; top: 19px; width: 18px; height: 3px; }
.role-pick__sketch--portrait i:nth-child(4) { display: block; left: 39px; top: 25px; width: 14px; height: 3px; }
/* crest: the small round mark at the left of the header, beside the site name. */
.role-pick__sketch--crest i:nth-child(1) { display: block; left: 6px; top: 3px; width: 9px; height: 9px; border-radius: 50%; }
.role-pick__sketch--crest i:nth-child(2) { display: block; left: 18px; top: 5px; width: 18px; height: 4px; opacity: .6; }
.role-pick__sketch--crest i:nth-child(3) { display: block; left: 48px; top: 5px; width: 18px; height: 4px; }
.role-pick__sketch--crest i:nth-child(4) { display: block; left: 0; top: 0; width: 100%; height: 15px; border-radius: 0; opacity: .1; }
.role-pick__sketch--crest i:nth-child(5) { display: block; left: 8px; top: 24px; width: 40px; height: 3px; }
.role-pick__sketch--crest i:nth-child(6) { display: block; left: 8px; top: 30px; width: 28px; height: 3px; }
/* wordmark: a wide logo in place of crest and name. */
.role-pick__sketch--wordmark i:nth-child(1) { display: block; left: 6px; top: 4px; width: 30px; height: 7px; }
.role-pick__sketch--wordmark i:nth-child(3) { display: block; left: 48px; top: 5px; width: 18px; height: 4px; }
.role-pick__sketch--wordmark i:nth-child(4) { display: block; left: 0; top: 0; width: 100%; height: 15px; border-radius: 0; opacity: .1; }
.role-pick__sketch--wordmark i:nth-child(5) { display: block; left: 8px; top: 24px; width: 40px; height: 3px; }
.role-pick__sketch--wordmark i:nth-child(6) { display: block; left: 8px; top: 30px; width: 28px; height: 3px; }

/* Frame & scale: a dashed frame over the original, moved and sized with the pointer. */
.frame { max-width: 1200px; }
.frame__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-lg); padding: var(--space-md) var(--space-lg) var(--space-lg); }
@media (max-width: 860px) { .frame__body { grid-template-columns: 1fr; } }
.frame__stagewrap { display: grid; place-items: center; padding: var(--space-sm); min-height: 240px; border-radius: var(--radius-md); background: var(--surface-container-lowest); border: 1px solid var(--border-hairline); }
.frame__stage { position: relative; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; overflow: hidden; border-radius: 2px; }
/* The picture is placed on the stage's canvas by the editor (left/top/width/height inline): the whole stage, or
   the middle of a canvas twice its size when the frame may reach past its edges (12 October 2026). */
.frame__stage img { position: absolute; display: block; pointer-events: none; }
.frame__stage--extended { background: repeating-conic-gradient(rgba(255,255,255,.06) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.frame__colour { width: 44px; height: 28px; padding: 2px; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-container-lowest); cursor: pointer; }
.frame__colour:disabled { opacity: .4; cursor: default; }
.frame__box { position: absolute; box-sizing: border-box; border: 2px dashed rgba(255,255,255,.95); box-shadow: 0 0 0 9999px rgba(3,5,10,.6); pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.28) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 33.34% 33.34%; background-position: -1px -1px; }
.frame__box--moving { border-style: solid; }
.frame__band { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 2.4 / 1; max-height: 100%;
  border-top: 1px dashed rgba(255,255,255,.55); border-bottom: 1px dashed rgba(255,255,255,.55); }
.frame__handle { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.frame__side { display: grid; gap: var(--space-md); align-content: start; }
/* Tint…: a vector's palette, a row per colour with what it becomes (6 November 2026). */
.tint { max-width: 1100px; }
.tint__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-lg); padding: var(--space-md) var(--space-lg) var(--space-lg); }
@media (max-width: 860px) { .tint__body { grid-template-columns: 1fr; } }
.tint__stage { display: grid; place-items: center; padding: var(--space-sm); min-height: 240px; border-radius: var(--radius-md); background: var(--surface-container-lowest); border: 1px solid var(--border-hairline); }
.tint__stage img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
.tint__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.tint__row--all { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-hairline); }
.tint__sw { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); flex-shrink: 0; }
.tint__to { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.tint__to .select { flex: 1; min-width: 160px; }
.tint__arrow { color: var(--on-surface-variant); }
.range { width: 100%; accent-color: var(--accent); }
/* A field the admin cannot type in because it follows something else. */
.input--locked { display: flex; align-items: center; color: var(--on-surface-variant); background: rgba(255,255,255,.03); }

/* Collapsible explainer (native <details>, no script). */
.guide { border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.guide > summary { cursor: pointer; padding: var(--space-md) var(--space-lg); font-size: 13px; color: var(--on-surface); list-style: none; }
.guide > summary::-webkit-details-marker { display: none; }
.guide > summary::before { content: "▸"; display: inline-block; width: 1.2em; color: var(--accent); }
.guide[open] > summary::before { content: "▾"; }
.guide[open] > summary { border-bottom: 1px solid rgba(255,255,255,.08); }
.guide__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.guide .table td { vertical-align: top; }

.editor-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .editor-grid { grid-template-columns: minmax(0,1fr) 320px; } }

.toast { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 200;
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius);
  background: var(--surface-container-high); border: 1px solid var(--border-brass); color: var(--on-surface);
  box-shadow: 0 8px 28px rgba(0,0,0,.6); font-size: 13px; animation: toast-in .2s ease; }
.toast--error { border-color: rgba(255,180,171,.5); color: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-lg); }
.login-card { width: 100%; max-width: 380px; }
/* The sign-in card's words (the title, the line beneath, the labels) are not
   for selecting; a double tap on the phone used to highlight them. What is
   typed, and an error, still is. */
.login-card { user-select: none; -webkit-user-select: none; }
.login-card .input, .login-card .banner { user-select: text; -webkit-user-select: text; }

.banner { padding: var(--space-md) var(--space-lg); border-radius: var(--radius); font-size: 13px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid var(--border-brass); color: var(--on-surface-variant); }
.banner--warn { border-color: color-mix(in srgb, var(--legendary-orange) 60%, transparent); color: var(--on-surface); margin-bottom: var(--space-md); }
/* The left-over edits, one per line, each with its tick (AdminLayout). */
.leftover { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
.leftover .checkbox { flex-wrap: wrap; color: var(--on-surface); }
.leftover .badge { min-width: 5.5em; justify-content: center; }
/* What each field is published as and what the edit would make it, under the item. */
.leftover__fields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 2px 0 6px 2.1em; padding-left: 5.5em; }
.leftover__fields dt { color: var(--outline); }
.leftover__fields dd { margin: 0; color: var(--on-surface); overflow-wrap: anywhere; }
.leftover__was { color: var(--outline); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--outline) 60%, transparent); }
.leftover__to { color: var(--outline); margin: 0 .5em; }
.leftover__now { color: var(--on-surface); }

/* ---------- environment marking ---------- */
/* A development build must never be mistaken for the live site at a glance. */
.env-ribbon {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 30px; display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm); padding: 0 var(--gutter);
  background: linear-gradient(90deg, rgba(255,128,0,.18), color-mix(in srgb, var(--accent) 18%, transparent));
  border-bottom: 1px solid rgba(255,128,0,.35);
  font-size: 12px; letter-spacing: .06em; color: var(--gold-bright);
  text-align: center;
}
.env-ribbon a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.env-ribbon__dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--legendary-orange); flex-shrink: 0;
}
.site--ribbon { --ribbon-h: 30px; }
.env-ribbon--offline { background: linear-gradient(90deg, rgba(200,65,46,.35), rgba(200,65,46,.18)); border-bottom-color: rgba(200,65,46,.6); color: #ffd6d0; }
.env-ribbon--offline .env-ribbon__dot { background: var(--faction-horde); }
.env-ribbon--shared { background: linear-gradient(90deg, rgba(0,140,160,.34), rgba(0,140,160,.16)); border-bottom-color: rgba(0,170,190,.55); color: #d3f4f8; }
.env-ribbon--shared .env-ribbon__dot { background: #22d3ee; }
.env-ribbon--preview { background: linear-gradient(90deg, rgba(145,70,255,.32), rgba(145,70,255,.16)); border-bottom-color: rgba(145,70,255,.55); color: #e9dcff; }
.env-ribbon--preview .env-ribbon__dot { background: #a855f7; }
.env-ribbon--offline a { color: #ffffff; }
.env-ribbon__btn { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); text-decoration: none !important;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: inherit; font-family: inherit; cursor: pointer; }
.env-ribbon__btn:hover { background: rgba(255,255,255,.22); }

/* ---------- offline holding page ---------- */
.offline { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: var(--space-xl); padding: var(--space-xl) var(--gutter);
  background: radial-gradient(900px 520px at 78% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
              radial-gradient(1000px 600px at 50% 0%, rgba(24,38,64,.9), transparent 70%), var(--surface-base); }
.offline__card { text-align: center; max-width: 560px; display: grid; gap: var(--space-md); justify-items: center; }
.offline__crest { font-size: 28px; color: var(--accent); }
.offline__brand { font-family: var(--font-display); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--outline); }
.offline__title { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 7vw, 64px); line-height: 1; color: #ffffff; }
.offline__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--on-surface-variant); }
.offline__link { color: var(--accent); font-weight: 600; }
.offline { position: relative; isolation: isolate; }
.offline__backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .45;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.15) 100%); }
.offline__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
/* the admin's live preview: same page, framed instead of filling the window */
.offline--preview { min-height: 0; aspect-ratio: 16 / 10; padding: var(--space-lg); border-radius: var(--radius); border: 1px solid var(--border-hairline); overflow: hidden; }
.offline--preview .offline__title { font-size: clamp(24px, 4vw, 40px); }
.offline--preview .offline__text { font-size: 15px; }

.availability--off { border-color: rgba(200,65,46,.45); }

.schedule__when { display: grid; gap: 4px; }
.schedule__date { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent); }
input[type="datetime-local"].input { color-scheme: dark; min-width: 240px; }

/* ---------- on/off switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch--disabled { opacity: .5; cursor: not-allowed; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__label { font-size: 13px; font-weight: 600; color: var(--on-surface); }
.switch__track { position: relative; width: 52px; height: 28px; border-radius: 999px; background: rgba(200,65,46,.55);
  border: 1px solid rgba(255,255,255,.14); transition: background .2s ease; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: transform .2s ease; }
.switch input:checked + .switch__track { background: var(--complete-green); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(24px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch__state { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--outline); width: 3ch; }
.page--offset { padding-top: calc(var(--header-h) + var(--ribbon-h)); }
/* A ribbon is one line: on a phone it says the short version. */
.env-ribbon > span { white-space: nowrap; }
.env-ribbon__short { display: none; }
@media (max-width: 600px) { .env-ribbon { font-size: 11px; } .env-ribbon__long { display: none; } .env-ribbon__short { display: inline; } }

.env-chip {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 5px 10px; border-radius: var(--radius);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid currentColor; align-self: flex-start;
}
.env-chip--dev { color: var(--legendary-orange); background: rgba(255,128,0,.08); }
.env-chip__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; }

.admin-nav__link--publish { color: var(--gold-bright); }
.admin-nav__link--publish:hover { color: var(--primary); }

/* ---------- migrations ---------- */
.schema-steps { margin: var(--space-sm) 0 0; padding-left: 18px; font-size: 12px; color: var(--on-surface-variant); display: grid; gap: 2px; }

/* ---------- workspace tabs ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border-hairline); padding-bottom: 6px; }
.tabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--on-surface-variant); transition: background .15s ease, color .15s ease; }
.tabs__tab:hover { background: rgba(255,255,255,.05); color: var(--on-surface); }
.tabs__tab--on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.tabs__count { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--outline); font-variant-numeric: tabular-nums; }
.tabs__tab--on .tabs__count { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }

/* ---------- in-admin preview ---------- */
.preview { --preview-width: 100%; display: flex; justify-content: center; background: var(--surface-container-lowest);
  border: 1px solid var(--border-card); border-radius: var(--radius-md); padding: var(--space-md); min-height: 70vh; }
.preview__frame { width: var(--preview-width); max-width: 100%; height: calc(100vh - 260px); min-height: 560px; border: 0;
  border-radius: var(--radius); background: #0b0f18; box-shadow: 0 8px 30px rgba(0,0,0,.45); transition: width .2s ease; }

/* ---------- media library ---------- */
.media-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* ---------- Media library: shelf and inspector (decided 13 October 2026) ----------
   A tile is the picture, the name and five pips; the inspector beside the grid
   holds everything about the selected asset, or the bulk bar when tiles are ticked. */
.lib { display: grid; gap: var(--space-md); }
.lib__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; }
.lib__bar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.lib__bar-sep { width: 1px; height: 20px; background: var(--border-card); }
.lib__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lib__chip-n { font-weight: 600; color: var(--outline); margin-left: 2px; }
.owner-chip--on .lib__chip-n { color: var(--accent); }
.lib__chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.owner-chip--warn { color: var(--error); border-color: rgba(255,180,171,.4); }
.owner-chip--warn .lib__chip-n { color: var(--error); }
.lib__drop { position: relative; display: flex; align-items: center; gap: var(--space-sm); padding: 8px 14px; border: 1px dashed rgba(255,255,255,.18); border-radius: var(--radius-md); font-size: 12px; color: var(--outline); cursor: pointer; }
.lib__drop > span:first-child { color: var(--accent); }
.lib__drop:hover, .lib__drop:focus-within { border-color: var(--border-brass); color: var(--on-surface-variant); }
.lib__drop.is-busy { cursor: progress; }
.lib__drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lib__pane { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-lg); align-items: start; }
@media (max-width: 1099px) { .lib__pane { grid-template-columns: 1fr; } }
.lib__shelf { display: grid; gap: var(--space-md); min-width: 0; }
.lib__section { display: grid; gap: 10px; }
.lib__section-head { display: flex; align-items: baseline; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border-hairline); }
.lib__section-head h2 { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--on-surface); }
.lib__section-head span { font-size: 11px; color: var(--outline); }
.lib__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lib__tile { position: relative; min-width: 0; border-radius: 8px; border: 2px solid transparent; }
.lib__tile:hover { background: var(--veil-1); }
.lib__tile--ticked { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.lib__tile--on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lib__hit { display: grid; gap: 6px; width: 100%; min-width: 0; padding: 5px; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lib__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lib__pic { position: relative; aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: var(--surface-container-lowest); display: grid; place-items: center; }
.lib__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib__tile--pending .lib__pic img { opacity: .45; }
.lib__nothumb { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--outline); text-align: center; padding: 6px; }
.lib__veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; text-align: center; background: rgba(11,15,24,.62); color: var(--accent); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.lib__veil--error { color: var(--error); }
.lib__tick { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; margin: 0; opacity: 0; accent-color: var(--accent); cursor: pointer; z-index: 1; }
.lib__tile:hover .lib__tick, .lib__tick:checked, .lib--ticking .lib__tick, .lib__tick:focus-visible { opacity: 1; }
.lib__name { display: block; font-size: 12px; line-height: 16px; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib__pips { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--outline); white-space: nowrap; }
.lib__pip { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); box-sizing: border-box; flex: 0 0 7px; }
.lib__pip--ok { background: var(--uncommon-green); border-color: var(--uncommon-green); }
.lib__pip--busy { background: var(--accent); border-color: var(--accent); }
.lib__pip--err { background: var(--error); border-color: var(--error); }
.lib__pips-end { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.lib__pips-end--free { color: var(--uncommon-green); }
.lib__inspector { position: sticky; top: var(--space-md); display: grid; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--border-card); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.lib__inspector .field { display: grid; gap: 4px; }
.lib__stage { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--surface-container-lowest); display: grid; place-items: center; }
.lib__stage a { display: block; width: 100%; height: 100%; }
.lib__stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lib__sec { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); }
.lib__vrow { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: var(--on-surface-variant); padding: 6px 0; border-top: 1px solid var(--border-hairline); }
.lib__vrow strong { color: var(--on-surface); font-weight: 600; }
.lib__vrow > a, .lib__vrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib__ok { color: var(--uncommon-green); text-decoration: none; }
.lib__ok:hover { text-decoration: underline; }
.lib__busy { color: var(--accent); }
.lib__none { color: var(--outline); }
.lib__lnk { background: none; border: 0; padding: 0; font: inherit; font-size: 11px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.lib__lnk:hover { text-decoration: underline; }
.lib__lnk:disabled { color: var(--outline); cursor: default; text-decoration: none; }
.lib__use { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--on-surface-variant); padding: 5px 0; border-top: 1px solid var(--border-hairline); }
.lib__logos { display: flex; gap: 12px; flex-wrap: wrap; }
.lib__logo { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--on-surface-variant); cursor: pointer; }
.lib__logo i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); box-sizing: border-box; flex: 0 0 14px; }
.lib__logo:hover i { border-color: var(--accent); }
.lib__logo--on { color: var(--on-surface); }
.lib__logo--on i { border: 4px solid var(--accent); }
.lib__logo:disabled { opacity: .5; cursor: default; }
.lib__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border-hairline); padding-top: var(--space-sm); }
.lib__bulk-n { font-family: var(--font-display); font-size: 15px; color: var(--accent); }
.lib__quiet { padding: var(--space-xl) var(--space-md); text-align: center; font-size: 13px; color: var(--outline); border: 1px dashed var(--outline-variant); border-radius: var(--radius-md); }
.lib__inspector--quiet { border-style: dashed; background: transparent; }
.lib__inspector--quiet .lib__quiet { border: 0; padding: var(--space-lg) var(--space-sm); }
.picker { max-width: 1100px; }
.picker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-hairline); }

/* ---------- class colour table ---------- */
.color-row { display: grid; gap: var(--space-sm); align-items: center; grid-template-columns: 40px minmax(120px, 1fr) 110px auto auto; }
@media (max-width: 767px) { .color-row { grid-template-columns: 40px 1fr 100px; } .color-row__sample { display: none; } }
.color-row__pick { width: 40px; height: 38px; padding: 2px; border-radius: var(--radius); border: 1px solid var(--border-hairline); background: var(--surface-container-lowest); cursor: pointer; }
.color-row__hex { font-variant-numeric: tabular-nums; }
.color-row__sample { display: flex; align-items: center; gap: var(--space-md); padding: 0 var(--space-sm); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); }

/* ---------- image upload ---------- */
.image-field { display: flex; gap: var(--space-sm); align-items: stretch; }
.image-field .input { flex: 1; min-width: 0; }
.image-field__pick { position: relative; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.image-field__pick.is-busy { opacity: .5; cursor: not-allowed; }
/* The real input sits invisibly over the styled label so the button is the hit target. */
.image-field__input {
  position: absolute; inset: 0; opacity: 0; cursor: inherit;
  font-size: 0; width: 100%; height: 100%;
}
.image-field__preview {
  display: flex; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-sm);
}
.image-field__preview img {
  max-height: 140px; border-radius: var(--radius);
  border: 1px solid var(--border-hairline); background: var(--surface-container-lowest);
}
.image-field .input[readonly] { color: var(--outline); font-style: italic; }
.image-field__preview a { display: block; }
.image-field__preview img { cursor: zoom-in; }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-md);
  font-size: 12px; letter-spacing: .04em; color: var(--outline); }
.crumbs a { color: var(--on-surface-variant); }
.crumbs a:hover { color: var(--primary); }
.crumbs__sep { color: var(--outline-variant); }
.crumbs__here { color: var(--on-surface); font-weight: 600; }

/* ---------- ownership: filters and empty states ---------- */
.owner-filter {
  display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg);
}
.owner-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius);
  background: var(--surface-container-low); border: 1px solid var(--border-hairline);
  color: var(--on-surface-variant); font-size: 13px; transition: all .18s ease;
}
.owner-chip:hover { border-color: var(--border-brass); color: var(--on-surface); }
.owner-chip--on {
  background: var(--surface-container-highest); border-color: var(--border-brass);
  color: var(--primary); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent);
}

.empty {
  display: grid; gap: var(--space-xs); justify-items: center; text-align: center;
  padding: var(--space-2xl) var(--space-lg); border-radius: var(--radius-md);
  border: 1px dashed var(--outline-variant); background: var(--veil-1);
}
.empty__glyph { font-size: 22px; color: var(--outline-variant); }
.empty__title { font-family: var(--font-display); font-size: 17px; letter-spacing: .03em; color: var(--on-surface-variant); }
.empty__text { margin: 0; font-size: 13px; color: var(--outline); max-width: 46ch; }

/* ---------- faction ---------- */
.badge--faction { border-color: currentColor; background: transparent; }
.badge--faction-alliance { color: var(--faction-alliance); background: rgba(74,139,224,.10); }
.badge--faction-horde    { color: var(--faction-horde);    background: rgba(200,65,46,.10); }
.faction-dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--outline-variant); }
.faction-dot--alliance { background: var(--faction-alliance); }
.faction-dot--horde    { background: var(--faction-horde); }

/* ---------- helpers ---------- */
.row { display: flex; align-items: center; gap: var(--space-sm); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack { display: grid; gap: var(--space-md); }
.stack--sm { gap: var(--space-sm); }
.grow { flex: 1; }
.right { text-align: right; }
.center { text-align: center; }

#blazor-error-ui {
  background: var(--surface-container-high); color: var(--error); bottom: 0; left: 0; right: 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,.4); display: none; padding: 0.8rem 1.2rem 0.8rem 1.6rem; position: fixed; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .8rem; }

/* ---------- where they are: last seen with the last five stays, and the world map (2 October 2026) ---------- */
.where { display: grid; gap: var(--space-md); grid-template-columns: 360px minmax(0, 1fr); align-items: stretch; }
.where--alone { grid-template-columns: minmax(0, 480px); }
@media (max-width: 899px) { .where, .where--alone { grid-template-columns: 1fr; } }
.where__card { border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-elevated); padding: var(--space-lg); display: flex; gap: var(--space-md); align-items: center; box-shadow: var(--card-highlight); }
.where__card--now { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.where__card--stays { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.where__seen { display: flex; gap: var(--space-md); align-items: center; }
.where__portrait { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); box-sizing: border-box; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); background: var(--surface-container-high); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 20px; color: var(--on-surface); }
/* a picture is shown as itself: the 3:4 portrait, no ring, no backing, so a cut-out sits on the card */
img.where__portrait { width: 60px; height: 80px; border: 0; border-radius: 0; box-shadow: none; background: none; object-fit: contain; }
.where__label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.where__label--muted { color: var(--outline); }
.where__place { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 600; color: var(--on-surface); }
a.where__place:hover { color: var(--accent); }
.where__sub { font-size: 13px; color: var(--outline); }
/* the stays, numbered, the newest at the top in the accent */
.stays { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-hairline); display: flex; flex-direction: column; }
.stays__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; color: var(--on-surface-variant); }
.stays__row:last-child { border-bottom: 0; }
.stays__row--now { color: #ffffff; }
.stays__num { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--on-surface-variant); box-sizing: border-box; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stays__num--now { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.stays__what { flex-grow: 1; font-weight: 600; }
.stays__row--now .stays__what { font-weight: 700; }
.stays__what .muted { font-weight: 400; }
.stays__link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.stays__link:hover, .stays__link:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.stays__date { font-size: 13px; color: var(--outline); white-space: nowrap; }
.stays__date--now { color: var(--accent); font-weight: 600; }
/* the map card: the world the game draws, its zones as territories, the numbers on it */
.where__map { flex-direction: column; align-items: stretch; gap: 6px; padding: var(--space-md) var(--space-lg); }
.where__maphead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.where__legend { text-align: right; }
.wmap { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.wmap--phone { display: none; }
@media (max-width: 899px) { .wmap--desk { display: none; } .wmap--phone { display: block; } .where__legend-keys { display: none; } }
/* Decided 18 October 2026, Chamfered Territory Hulls & Graticule: a faint graticule, each continent's coast set out from the land and hatched, the zones as beveled territories. */
.wmap__grat path { fill: none; stroke: rgba(190,210,245,.06); stroke-width: .7; }
.wmap__coastline { fill: rgba(150,175,215,.035); stroke: rgba(190,210,245,.3); stroke-width: 1; stroke-linejoin: round; }
.wmap__coasthash { fill: none; stroke: rgba(190,210,245,.2); stroke-width: 6; stroke-dasharray: 1 3.5; }
/* Decided 13 October 2026: the zones lighter, the ones at the character's level a brighter white (never the class colour), a name a link to its place. */
.wmap__zone { fill: rgba(170,195,235,.075); stroke: rgba(190,210,245,.45); stroke-width: 1; stroke-linejoin: round; }
.wmap__zone--city { fill: rgba(190,210,245,.16); stroke: rgba(215,228,250,.7); }
.wmap__zone--level { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.9); stroke-width: 1.6; }
.wmap__labels text { font-family: var(--font-display); font-size: 8px; font-weight: 600; fill: rgba(225,232,245,.6); letter-spacing: 1.5px; }
.wmap__labels .wmap__range { font-family: var(--font-body); font-size: 7px; font-weight: 400; letter-spacing: .3px; fill: rgba(225,232,245,.42); }
/* The World page's zoom (decided 5 November 2026): a zone's ground zooms to it, the one zoomed to back to the whole world. */
.wmap__zoom { cursor: zoom-in; }
.wmap__zoom path, .wmap__zoom rect { fill: transparent; stroke: transparent; pointer-events: all; }
.wmap__zoom:hover path, .wmap__zoom:hover rect, .wmap__zoom:focus-visible path, .wmap__zoom:focus-visible rect { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.wmap__zoom--out { cursor: zoom-out; }
.wmap__labels--inert text { pointer-events: none; }
.wmap__zoom--out path, .wmap__zoom--out rect { stroke: rgba(255,255,255,.7); stroke-width: 1.4; }
.wmap__zonelink { cursor: pointer; }
.wmap__zonehit { fill: transparent; stroke: transparent; pointer-events: none; }
.wmap__zonelink:hover .wmap__zonehit, .wmap__zonelink:focus-visible .wmap__zonehit { fill: rgba(255,255,255,.06); stroke: var(--accent); stroke-width: 1.5; }
.wmap__zonelink:hover text, .wmap__zonelink:focus-visible text { fill: #ffffff; text-decoration: underline; }
.wmap__routes line { stroke: var(--map-flight); stroke-opacity: .35; stroke-width: 1; }
/* The icons (MapIcons, PixelLab's pixel art as SVG, worn when Game infos → Map symbols picks an icon look): the full-colour look's halo lifts it off the dark map. */
.mi-h { fill: rgba(220,230,255,.3); }
.wmap__icon { image-rendering: pixelated; shape-rendering: crispEdges; }
/* Where they walked: little steps in the page's accent, a thin line on the phone and on the World page (decided 13 October 2026). */
.wmap__walk { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.wmap__walk--line { stroke-width: 1; stroke-dasharray: 1 2.5; }
.wmap__roadwalk { fill: none; stroke: var(--road); stroke-width: 1; stroke-opacity: .45; stroke-linejoin: round; }
.wmap__roadsteps { fill: none; stroke: var(--road); stroke-width: 1.8; stroke-linecap: round; }
a.wmap__mark { cursor: pointer; }
a.wmap__mark:hover .wmap__icon, a.wmap__mark:focus-visible .wmap__icon { filter: brightness(1.25) drop-shadow(0 0 3px var(--accent)); }
a.wmap__mark:hover .wmap__markname, a.wmap__mark:focus-visible .wmap__markname { fill: #ffffff; }
.wmap-key { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; flex: none; }
/* The plain symbols (Game infos → Map symbols): the map's own lines, a colour of their own when set. */
.wmap__sym { fill: none; stroke: var(--sym, #c4d2ea); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.wmap__sym--filled { fill: var(--sym, #c4d2ea); stroke: var(--surface-base); stroke-width: 1; }
.wmap__badge { fill: var(--surface-container-high); stroke: rgba(196,210,234,.7); stroke-width: 1; }
a.wmap__mark:hover .wmap__sym, a.wmap__mark:focus-visible .wmap__sym { stroke: var(--accent); }
a.wmap__mark:hover .wmap__sym--filled, a.wmap__mark:focus-visible .wmap__sym--filled { fill: var(--accent); }
/* Game infos → Map symbols: one row per kind of marker. */
.map-symbol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.map-symbol__key { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--surface-base); border: 1px solid var(--outline-variant); }
.map-symbol__key .wmap-key { width: 22px; height: 22px; margin: 0; }
.map-symbol__kind { min-width: 9rem; font-weight: 600; }
.map-symbol .input { max-width: 12rem; }
.map-symbol__legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* The legend under a map: what it shows, in the looks it draws. */
.wmap-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--space-sm); font-size: 12px; color: var(--on-surface-variant); }
.wmap-legend__item { display: inline-flex; align-items: center; white-space: nowrap; }
.wmap-legend__line { display: inline-block; width: 18px; height: 0; margin-right: 5px; border-top: 1.5px solid rgba(127,176,255,.6); }
.wmap-legend__line--steps { border-top: 2px dotted var(--accent); }
.wmap-legend__box { display: inline-block; width: 12px; height: 10px; margin-right: 5px; border: 1.6px solid rgba(255,255,255,.9); border-radius: 2px; background: rgba(255,255,255,.08); }
.wmap__compass text { font-size: 11px; fill: var(--outline); }
.wmap__compass path { fill: var(--outline); }
.wmap__markname { font-size: 9px; fill: var(--outline); }
.wmap__leg { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.2; stroke-linecap: round; }
.wmap__leg--ground { stroke-dasharray: 1 4; }
.wmap__leg--arc { stroke: rgba(255,255,255,.3); stroke-dasharray: 6 5; }
.wmap__leg--instant { stroke-width: 1; stroke-dasharray: 1 7; opacity: .6; }
.wmap__leg--last { stroke: var(--accent); stroke-opacity: .9; }
.wmap__word { font-size: 11px; font-style: italic; fill: var(--outline); }
.wmap__dot { fill: var(--surface-container-high); stroke: var(--on-surface-variant); stroke-width: 1.5; }
.wmap__num { font-size: 10px; font-weight: 700; fill: var(--on-surface); }
.wmap__halo { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-width: 1.5; }
.wmap__now { fill: var(--accent); stroke: var(--surface-base); stroke-width: 2; }
.wmap__num--now { fill: var(--accent-ink); }
/* a number with a place page is a link: the ring takes the accent on hover */
.wmap__stay { cursor: pointer; }
.wmap__stay:hover .wmap__dot, .wmap__stay:focus-visible .wmap__dot { stroke: var(--accent); }
.wmap__stay:hover .wmap__halo, .wmap__stay:focus-visible .wmap__halo { stroke-opacity: .9; }
/* ---------- Right now: the widget strip under the hero ---------- */

.now__tile { position: relative; display: grid; gap: 10px; align-content: start; padding: var(--space-lg); border-radius: var(--radius-md);
  border: 1px solid var(--border-card); background: var(--surface-elevated); box-shadow: var(--card-highlight); container-type: inline-size; overflow: hidden; }
.now__tile--countdown { border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--surface-elevated); }
.now__tile--reached { border-color: var(--accent); }
.now__tile--fallen { border-color: rgba(200,65,46,.45); }
/* The Soul shards tile: a page of a warlock's grimoire (decided 31 October 2026), on the ground every tile
   stands on (decided 31 October 2026, "make the background fit the other widgets"): the count in blackletter
   and a chalk tally in the page's accent, the Warlock's purple on a Warlock's page. */
.now__tile--grimoire, .shards { --grimoire-ink: #efe6cf; --grimoire-chalk: color-mix(in srgb, var(--accent) 70%, #ffffff); }
.now__title.grimoire__title { font-family: 'UnifrakturMaguntia', var(--font-display); font-weight: 400; color: var(--grimoire-ink); font-size: clamp(24px, 8cqw, 34px); }
.grimoire__count { display: flex; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.grimoire__num { font-family: 'UnifrakturMaguntia', var(--font-display); font-size: clamp(52px, 20cqw, 78px); line-height: 1; color: var(--grimoire-ink); font-variant-numeric: tabular-nums; }
.grimoire__tally { display: block; width: 100%; height: auto; overflow: visible; }
/* the filter is on the element itself: the chalk grain (its id is the widget's) and the glow, together */
.grimoire__strokes { fill: none; stroke: var(--grimoire-chalk); stroke-linecap: round; }
.grimoire__beyond { font-family: 'UnifrakturMaguntia', var(--font-display); font-size: 18px; color: var(--grimoire-chalk); }
.grimoire__sub { font-style: italic; }
/* The Moonglade tile: Lake Elune'ara at night (decided 31 October 2026), the night the whole tile, a star for
   every teleport home. It wears the class as the countdown does (decided 31 October 2026, "with class border
   and coloring"): the border, a glow over the sky's corner, the horizon and the water, the moon, every eighth
   star and the count's glow all take the page's accent, the Druid's orange on a Druid's page. */
.now__tile--moonglade { --moon: color-mix(in srgb, var(--accent) 35%, #eef2fb); padding: 0; gap: 0;
  background: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--surface-elevated);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.now__tile--moonglade .moonglade__scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%); }
.moonglade__scene { position: relative; }
.moonglade__sky { display: block; width: 100%; height: auto; }
.moonglade__dusk { stop-color: #05080f; }
.moonglade__dark { stop-color: #0d1730; }
.moonglade__low { stop-color: color-mix(in srgb, var(--accent) 22%, #14203d); }
.moonglade__water { stop-color: color-mix(in srgb, var(--accent) 16%, #0d1a33); }
.moonglade__deep { stop-color: #050912; }
.moonglade__glow-in { stop-color: var(--moon); stop-opacity: .55; }
.moonglade__glow-out { stop-color: var(--moon); stop-opacity: 0; }
.moonglade__star { fill: var(--moon); }
.moonglade__star--full { fill: #fff; filter: drop-shadow(0 0 3px var(--accent)); }
.moonglade__moon, .moonglade__shine { fill: var(--moon); }
.moonglade__shore { fill: #070b16; }
.moonglade__tree { fill: #060a13; }
.moonglade__over { position: absolute; inset: 0; z-index: 1; padding: var(--space-lg); display: grid; align-content: space-between; pointer-events: none; }
.moonglade__title { text-shadow: 0 2px 12px #000; }
.moonglade__count { display: flex; align-items: baseline; gap: 10px; }
.moonglade__num { font-family: var(--font-display); font-size: clamp(44px, 18cqw, 72px); line-height: 1; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--moon) 50%, transparent), 0 2px 0 #000; }
.moonglade__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 12px var(--space-lg) 16px; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.moonglade__foot:empty { display: none; }
.moonglade__beyond { font-family: var(--font-display); font-size: 14px; color: var(--moon); }
.now__tile--moonglade > .now__link { margin: 0 var(--space-lg) 16px; }
/* The Pact: a page of the same grimoire (decided 31 October 2026), each demon's name signed in the accent's
   chalk with a wax seal, one within reach a dotted line waiting for its name, the rest at their level. */
.pact__clauses { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--border-hairline); }
.pact__clause { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; padding: 6px 0 5px; border-bottom: 1px solid var(--border-hairline); }
.pact__sig { font-family: 'UnifrakturMaguntia', var(--font-display); font-size: clamp(20px, 6.4cqw, 26px); line-height: 1.05; color: var(--grimoire-chalk);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); overflow-wrap: anywhere; }
.pact__what { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-variant); text-shadow: none; }
.pact__seal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 60%, #000));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, #000), 0 2px 6px rgba(0,0,0,.6); }
.pact__sigil { width: 18px; height: 18px; fill: none; stroke: #1a1220; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pact__blank { font-family: 'UnifrakturMaguntia', var(--font-display); font-size: clamp(18px, 5.6cqw, 22px); color: var(--outline); border-bottom: 1px dotted var(--outline-variant); padding-bottom: 2px; justify-self: start; }
.pact__when { font-size: 12px; font-style: italic; color: var(--outline); white-space: nowrap; }
.pact__clause--ready .pact__blank { color: var(--grimoire-chalk); border-bottom-color: var(--grimoire-chalk); opacity: .85; }
.pact__clause--ready .pact__when { color: var(--grimoire-chalk); }
.now__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); min-width: 0; }
.now__kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); white-space: nowrap; }
.now__when { font-size: 11px; letter-spacing: .04em; color: var(--outline); text-align: right; min-width: 0; }
.now__title { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 7cqw, 30px); line-height: 1.15; font-weight: 600; color: var(--on-surface); }
.now__sub { font-size: 13px; color: var(--outline); }
.now__foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.now__link { color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.now__reached { font-family: var(--font-display); font-size: clamp(26px, 9cqw, 40px); line-height: 1.1; color: #ffffff; padding: 6px 0 2px; }
/* the figures fill the tile's width, one column per unit, hairlines between */
.count { display: grid; gap: 0; margin-top: 4px; padding: 10px 0 6px; border-top: 1px solid var(--border-hairline); }
.count--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.count--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.count__unit { display: grid; justify-items: center; align-content: start; min-width: 0; border-left: 1px solid var(--border-hairline); }
.count__unit:first-child { border-left: 0; }
.count__num { font-family: var(--font-display); font-size: clamp(30px, 13cqw, 60px); line-height: 1; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; }
.count__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--outline); margin-top: 6px; }
.count__unit--sec .count__num { color: var(--accent); }
.life { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.life__num { font-family: var(--font-display); font-size: clamp(44px, 18cqw, 72px); line-height: 1; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; }
.life__unit { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-variant); }
/* the game-fed tiles' lines: a killer, a dungeon; the name left, the count right */
.now__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.now__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--on-surface-variant); min-width: 0; }
.now__row-name { color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now__row--done .now__row-name { color: var(--accent); }
.now__row-n { font-size: 12px; color: var(--outline); white-space: nowrap; font-variant-numeric: tabular-nums; }
.now__row--more { font-size: 12px; color: var(--outline); }
.now__tile--fallen .life__num { color: var(--outline); text-decoration: line-through; text-decoration-color: rgba(200,65,46,.7); text-decoration-thickness: 3px; }
/* a section region: rails beside the content, or a row above it */
.rail { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
.rail__main { min-width: 0; }
.rail__side { display: grid; gap: var(--space-md); align-content: start; }
.rail__side .now__tile { width: 100%; }
@media (min-width: 1100px) {
  .rail--left { grid-template-columns: 320px minmax(0, 1fr); }
  .rail--right { grid-template-columns: minmax(0, 1fr) 320px; }
  .rail--left.rail--right { grid-template-columns: 300px minmax(0, 1fr) 300px; }
  .rail__side { position: sticky; top: calc(var(--header-h, 72px) + var(--space-md)); }
}
/* a tile on the offline card: the card's width, text left, the message stays centred */
.offline__card > .now__tile { width: min(100%, 460px); text-align: left; justify-self: center; }
.offline--preview .offline__card > .now__tile { padding: var(--space-md); }

/* a tile as a card of an existing grid, or of the hero's column */
.cine__stats > .now__tile { padding: var(--space-md); background: rgba(11,15,24,.55); backdrop-filter: blur(6px); }

/* where a widget sits: a page silhouette with the region lit */
.region-pick__sketch i:nth-child(2) { display: block; left: 0; top: 0; width: 100%; height: 6px; border-radius: 0; }        /* header */
.region-pick__sketch i:nth-child(3) { display: block; left: 6px; top: 10px; width: 30px; height: 5px; }                      /* hero name */
.region-pick__sketch i:nth-child(4) { display: block; left: 6px; top: 24px; width: 60px; height: 3px; }                      /* a section */
.region-pick__sketch i:nth-child(5) { display: block; left: 6px; top: 31px; width: 60px; height: 3px; }                      /* a section */
.region-pick__sketch i:nth-child(6) { display: block; left: 6px; top: 42px; width: 60px; height: 3px; opacity: .12; }        /* footer */
.region-pick__sketch--hero i:nth-child(1)     { display: block; left: 6px; top: 17px; width: 60px; height: 5px; }
.region-pick__sketch--timeline i:nth-child(1) { display: block; left: 46px; top: 23px; width: 20px; height: 12px; }
.region-pick__sketch--timeline i:nth-child(4) { width: 36px; }
.region-pick__sketch--timeline i:nth-child(5) { width: 36px; }
.region-pick__sketch--captures i:nth-child(1) { display: block; left: 46px; top: 23px; width: 20px; height: 12px; }
.region-pick__sketch--captures i:nth-child(4) { width: 36px; height: 9px; top: 23px; }
.region-pick__sketch--captures i:nth-child(5) { width: 36px; height: 2px; top: 34px; }
.region-pick__sketch--dispatch i:nth-child(3) { width: 44px; height: 4px; }
.region-pick__sketch--dispatch i:nth-child(4) { width: 50px; top: 18px; }
.region-pick__sketch--dispatch i:nth-child(5) { width: 46px; top: 24px; }
.region-pick__sketch--dispatch i:nth-child(1) { display: block; left: 6px; top: 31px; width: 50px; height: 5px; }
.region-pick__sketch--place i:nth-child(3)    { width: 20px; height: 8px; border-radius: 50%; }
.region-pick__sketch--place i:nth-child(1)    { display: block; left: 6px; top: 36px; width: 60px; height: 4px; }
.region-pick__sketch--foot i:nth-child(1)     { display: block; left: 6px; top: 37px; width: 60px; height: 4px; }
.region-pick__sketch--offline i:nth-child(3)  { left: 26px; width: 20px; top: 12px; }
.region-pick__sketch--offline i:nth-child(4)  { left: 21px; width: 30px; top: 21px; }
.region-pick__sketch--offline i:nth-child(5)  { display: none; }
.region-pick__sketch--offline i:nth-child(6)  { display: none; }
.region-pick__sketch--offline i:nth-child(1)  { display: block; left: 18px; top: 28px; width: 36px; height: 9px; }
.region-pick__sketch--foot i:nth-child(6)     { top: 44px; }

/* the Widgets page: a demo tile per kind, clicked to add one */
.demo-row { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: var(--space-lg); }
.demo { position: relative; display: grid; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.demo .now__tile { pointer-events: none; transition: transform .18s ease, border-color .18s ease; }
.demo:hover .now__tile, .demo:focus-visible .now__tile { transform: translateY(-2px); border-color: var(--accent); }
.demo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-md); }
.demo__label { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--on-surface-variant); }
.demo__label strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.demo__add { margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--outline); white-space: nowrap; flex-shrink: 0; }
.demo__label strong { white-space: nowrap; }

.card--fresh { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* From the field: the library as a tick list */
.pick-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pick { position: relative; display: grid; gap: 6px; cursor: pointer; border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-container-low); overflow: hidden; transition: border-color .15s ease; }
.pick:hover { border-color: var(--border-brass); }
.pick--in { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.pick--busy { opacity: .7; }
.pick__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface-container-lowest); }
.pick__img--none { display: grid; place-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--outline); }
.pick__bar { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; padding: 0 10px 10px; font-size: 12px; color: var(--on-surface-variant); }
.pick__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface); }
.pick__mark { grid-column: 2; font-size: 11px; color: var(--outline); }
.pick__date { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(11,15,24,.8); border: 1px solid var(--border-brass); font-size: 11px; color: var(--accent); }

/* the Sections page: one card per region, its placements as rows */
.region__title { display: inline-flex; align-items: center; gap: var(--space-sm); }
.region__name { display: grid; gap: 2px; }
.region__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.region__row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: var(--space-sm); padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-container-low); }
.region__row--off { opacity: .55; }
.region__glyph { font-size: 18px; color: var(--accent); text-align: center; }
.region__what { display: grid; gap: 2px; min-width: 0; }
.align-pick { display: inline-flex; gap: 2px; }
.align-pick .owner-chip { padding: 4px 8px; }

/* the editor's preview column keeps the tile at its public size */
.widget-preview { display: grid; gap: 6px; }
.widget-preview .now__tile { max-width: 380px; }
.widget-preview__mute { border-style: dashed; opacity: .6; }


.editor-grid--trail { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .editor-grid--trail { grid-template-columns: minmax(280px, 1fr) 1.8fr; } }

/* ---------- dispatch layouts: where the images sit around the text ---------- */
.dispatch { margin: var(--space-xl) 0; display: grid; gap: var(--space-md); }
.dispatch--split { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: var(--space-xl); align-items: start; margin-top: 0; }
.dispatch--split .dispatch__figure { position: sticky; top: calc(var(--ribbon-h, 0px) + 96px); }
.dispatch--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dispatch--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dispatch--story { grid-template-columns: 1fr; max-width: 72ch; }
/* Milestone: the picture is the page, and the title rides on it. */
.milestone { position: relative; margin: var(--space-lg) 0 var(--space-xl); border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-card); background: var(--surface-container-lowest); isolation: isolate; }
.milestone__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.milestone img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 35%;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.milestone:hover img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) { .milestone img { transition: none; } .milestone:hover img { transform: none; } }
/* Two scrims: one to seat the text, one to keep the accent glow off the sky. */
.milestone__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5,7,12,.94) 0%, rgba(5,7,12,.74) 26%, rgba(5,7,12,.20) 58%, rgba(5,7,12,0) 82%),
              radial-gradient(120% 90% at 8% 100%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 60%); }
.milestone__copy { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: grid; gap: 8px; padding: clamp(16px, 3.5vw, 40px); }
.milestone__kicker { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.milestone__kicker::before { content: ''; display: inline-block; width: 28px; height: 2px; background: var(--accent); flex: none; }
.milestone__mark { color: var(--accent); font-size: 13px; line-height: 1; }
/* On a phone the line is too narrow for both, and the date is the one that matters. */
@media (max-width: 520px) { .milestone__by { display: none; } }
.milestone__title { margin: 0; font-family: var(--font-display); font-weight: 700; color: #ffffff; text-wrap: balance;
  font-size: clamp(30px, 5.4vw, 60px); line-height: 1.02; letter-spacing: .01em; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.prose--milestone { max-width: 68ch; }
/* Whatever else the author added, after the text: as many across as fit. */
.dispatch--after { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dispatch--after img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 767px) { .milestone img { aspect-ratio: 4 / 3; } }
@media (max-width: 767px) { .dispatch--split, .dispatch--pair, .dispatch--gallery { grid-template-columns: 1fr; } .dispatch--split .dispatch__figure { position: static; } }
.dispatch__figure { margin: 0; display: grid; gap: var(--space-xs); }
.dispatch__figure .zoomable { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.dispatch__figure img { display: block; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); }
.dispatch__figure--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.dispatch--pair img, .dispatch--gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.dispatch__figure figcaption { font-size: 12px; line-height: 18px; color: var(--outline); }

/* the layout picker in the dispatch editor: five little diagrams */
.layout-pick { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.layout-pick__opt { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-container-low); color: var(--on-surface-variant); cursor: pointer; font: inherit; }
.layout-pick__opt:hover { border-color: var(--border-brass); color: var(--on-surface); }
.layout-pick__opt--on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.layout-pick__name { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.layout-pick__thumb { width: 64px; height: 44px; display: grid; gap: 3px; padding: 4px; box-sizing: border-box; border-radius: 4px; background: var(--surface-container-lowest); border: 1px solid var(--border-hairline); }
.layout-pick__thumb i { display: block; border-radius: 2px; background: currentColor; opacity: .25; }
.layout-pick__thumb i:first-child { opacity: .8; }
.layout-pick__thumb--cover   { grid-template-rows: 2fr 1fr 1fr; grid-template-columns: 1fr; }
.layout-pick__thumb--cover   i:nth-child(4) { display: none; }
.layout-pick__thumb--split   { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.layout-pick__thumb--split   i:first-child { grid-column: 2; grid-row: 1 / 4; }
.layout-pick__thumb--split   i:nth-child(2) { grid-column: 1; grid-row: 1; } .layout-pick__thumb--split i:nth-child(3) { grid-column: 1; grid-row: 2; } .layout-pick__thumb--split i:nth-child(4) { grid-column: 1; grid-row: 3; }
.layout-pick__thumb--pair    { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.layout-pick__thumb--pair    i:first-child { grid-column: 1 / 3; opacity: .25; } .layout-pick__thumb--pair i:nth-child(2) { grid-column: 1 / 3; display: none; }
.layout-pick__thumb--pair    i:nth-child(3), .layout-pick__thumb--pair i:nth-child(4) { opacity: .8; }
.layout-pick__thumb--gallery { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.layout-pick__thumb--gallery i:first-child { grid-column: 1 / 4; opacity: .25; }
.layout-pick__thumb--gallery i:nth-child(n+2) { opacity: .8; }
/* The picture fills it, with the title lying across the bottom. */
.layout-pick__thumb--milestone { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; }
.layout-pick__thumb--milestone i:first-child { grid-area: 1 / 1 / 4 / 2; }
.layout-pick__thumb--milestone i:nth-child(2) { grid-area: 3 / 1 / 4 / 2; align-self: end; height: 4px; width: 70%; background: #fff; opacity: .9; }
.layout-pick__thumb--milestone i:nth-child(3), .layout-pick__thumb--milestone i:nth-child(4) { display: none; }
.layout-pick__thumb--story   { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; }
.layout-pick__thumb--story   i:nth-child(odd) { opacity: .25; } .layout-pick__thumb--story i:nth-child(even) { opacity: .8; }

/* ---------- the image picker: dropdown on the left, the image large on the right ---------- */
.picker__body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); }
@media (max-width: 767px) { .picker__body { grid-template-columns: 1fr; } }
.picker__list { height: auto; padding: 4px; font-size: 13px; }
.picker__list optgroup { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); padding: 6px 4px 2px; }
.picker__list option { padding: 6px 8px; border-radius: 4px; color: var(--on-surface); }
.picker__list option:checked { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #ffffff; }
.picker__stage { display: grid; gap: var(--space-md); align-content: start; min-height: 280px; }
.picker__stage a { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hairline); background: var(--surface-container-lowest); }
.picker__stage img { display: block; width: 100%; max-height: 56vh; object-fit: contain; background: var(--surface-container-lowest); }
.picker__facts { display: grid; gap: var(--space-xs); }
.picker__empty { display: grid; place-items: center; min-height: 280px; border: 1px dashed var(--border-card); border-radius: var(--radius-md); font-size: 14px; }
.picker__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-hairline); }
.image-field--empty { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }

/* ---------- this week on the stream ---------- */
.week { border-radius: 14px; border: 1px solid var(--border-card); background: var(--surface); padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-lg); }
.week__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.week__head .section__title { font-size: 24px; line-height: 30px; }
.week__handle { color: #a970ff; } .week__handle:hover { color: #fff; }
.week__clock { font-size: 12px; color: var(--outline); }
.week__grid { display: grid; gap: 10px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1023px) { .week__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .week__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.week__day { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: var(--surface-base); min-height: 120px; }
.week__day--today { border-color: rgba(145,70,255,.6); background: rgba(145,70,255,.08); box-shadow: var(--card-highlight); }
.week__label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--outline); }
.week__label em { font-style: normal; color: var(--outline-variant); }
.week__day--today .week__label { color: #e9dcff; font-weight: 700; } .week__day--today .week__label em { color: #a970ff; }
.week__none { font-size: 12px; color: var(--outline-variant); }
.week__slot { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(145,70,255,.45); background: rgba(145,70,255,.1); color: #e9dcff; }
.week__slot--live { background: #9146ff; border-color: #9146ff; color: #fff; }
.week__slot--off { border-style: dashed; border-color: rgba(255,255,255,.15); background: transparent; color: var(--outline); }
.week__slot--off .week__time { text-decoration: line-through; }
.week__time { font-size: 11px; color: #b9a6e0; } .week__slot--live .week__time { color: #fff; font-weight: 700; }
.week__title { font-size: 13px; font-weight: 600; }
.week__blurb { font-size: 11px; line-height: 15px; color: #b9a6e0; } .week__slot--live .week__blurb { color: rgba(255,255,255,.85); }
.week__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; font-size: 12px; color: var(--outline); }
.week__foot strong { color: var(--on-surface); font-weight: 600; }
.week__foot a { color: #a970ff; font-weight: 600; } .week__foot a:hover { color: #fff; }

/* the admin's week planner */
.planner { display: grid; gap: 8px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1279px) { .planner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) { .planner { grid-template-columns: 1fr; } }
.planner__day { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--surface-container-low); min-height: 120px; }
.planner__day--today { border-color: rgba(145,70,255,.6); }
.planner__head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); }
.planner__head em { font-style: normal; color: var(--on-surface); }
.planner__none { font-size: 12px; color: var(--outline-variant); }
.planner__slot { display: grid; gap: 6px; padding: 8px; border-radius: var(--radius); border: 1px solid rgba(145,70,255,.35); background: var(--surface-base); }
.planner__slot--live { border-color: #9146ff; box-shadow: 0 0 0 3px rgba(145,70,255,.15); }
.planner__slot--off { border-style: dashed; border-color: rgba(255,255,255,.15); opacity: .75; }
.planner__slot .input, .planner__slot .textarea { padding: 6px 8px; font-size: 12px; }
.planner__times { display: flex; align-items: center; gap: 4px; } .planner__times .input { min-width: 0; flex: 1; }
.planner__blurb { min-height: 52px; resize: vertical; }
.planner__now { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: var(--surface-base); }
.onair--live { border-color: rgba(145,70,255,.6); }

/* ---------- the story timeline ---------- */
.timeline--story { padding-left: 44px; }
.timeline--story::before { left: 14px; }
.timeline--story .timeline__item { padding-bottom: var(--space-lg); }
.timeline--story .timeline__node { left: -44px; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
  background: var(--surface-container-high); border: 1px solid color-mix(in srgb, var(--node, var(--accent)) 55%, transparent); color: var(--node, var(--accent)); box-shadow: none; }
.timeline--story .timeline__item--death .timeline__node { background: var(--surface-container-high); border-color: rgba(255,255,255,.85); color: #fff; }
.timeline__group { font-family: var(--font-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); margin: var(--space-md) 0 var(--space-md); }
.timeline__group:first-child { margin-top: 0; }
.timeline__kind { color: var(--outline-variant); letter-spacing: .06em; text-transform: none; margin-left: 4px; }
.timeline__tag { margin-left: 8px; font-size: 10px; padding: 1px 7px; vertical-align: middle; }
.timeline--story .timeline__title a { color: var(--on-surface); } .timeline--story .timeline__title a:hover { color: var(--accent); }
.timeline--story .timeline__item--death .timeline__title,
.timeline--story .timeline__item--death .timeline__title a { color: #fff; }

/* The box is only a backing for the initials: a picture stands on the card itself, so a cut-out sticker is truly transparent. */

/* dispatches filed under a chapter */
.post-chapter { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin: 0 0 var(--space-lg); }
.post-chapter a { color: var(--accent); }
.chapter-posts { display: grid; gap: 6px; padding-top: var(--space-sm); border-top: 1px solid var(--border-hairline); }
.chapter-posts__row { display: flex; justify-content: space-between; gap: var(--space-md); padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); color: var(--on-surface); font-size: 13px; }
.chapter-posts__row:hover { border-color: var(--border-brass); }

/* timeline filters and dispatch covers */
.timeline__filters { margin-bottom: var(--space-lg); align-items: center; }
.place-list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.place-list__row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-elevated); }
.place-list__name { font-family: var(--font-display); font-size: 17px; color: var(--on-surface); margin-right: auto; }
.place-list__name:hover { color: var(--accent); }
.place-list__levels { font-size: 13px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.memorial-wrap { padding-top: var(--space-lg); }
.memorial-plate { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--surface-elevated); box-shadow: var(--card-highlight); }
.memorial-plate__glyph { font-size: 26px; color: var(--accent); opacity: .85; }
.memorial-plate__kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--outline); }
.memorial-plate__name { font-family: var(--font-display); font-size: 28px; line-height: 34px; margin: 2px 0 4px; color: var(--on-surface); }
.memorial-plate__line, .memorial-plate__days, .memorial-plate__after { margin: 0; max-width: 60ch; color: var(--on-surface-variant); }
.memorial-plate__days strong { color: var(--on-surface); }
.memorial-plate__words { margin: var(--space-sm) 0 0; font-family: var(--font-display); font-style: italic; color: var(--on-surface); }
.memorial-plate__after { margin-top: var(--space-sm); font-size: 13px; color: var(--accent); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-hairline); }
.post-nav__link { display: grid; gap: 4px; padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-card); background: var(--surface-elevated); color: var(--on-surface); }
.post-nav__link:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.post-nav__link--next { text-align: right; }
.post-nav__dir { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.post-nav__title { font-family: var(--font-display); font-size: 17px; line-height: 22px; }
@media (max-width: 599px) { .post-nav { grid-template-columns: 1fr; } .post-nav__link--next { text-align: left; } }
.timeline__ahead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); font-size: 13px; color: var(--on-surface-variant); }
.timeline__ahead-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--outline); }
.timeline__ahead-when { color: var(--accent); font-weight: 600; margin-right: 4px; }
.timeline__count { font-size: 12px; color: var(--outline); margin-left: var(--space-sm); }
.timeline__with-thumb { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
@media (max-width: 599px) { .timeline__with-thumb { grid-template-columns: 1fr; } }
.timeline__thumb { display: block; width: 132px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-hairline); background: var(--surface-container-lowest); }
.timeline__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* the header wordmark and the crest on the offline page */
.brand__wordmark { display: block; height: 36px; width: auto; max-width: 240px; object-fit: contain; }
@media (max-width: 767px) { .brand__wordmark { height: 30px; max-width: 170px; } }
.offline__crest--img { width: 72px; height: 72px; object-fit: contain; }
.site-foot__crest { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

/* ---------- admin: Settings → Logo, the four slots and where they show (decided 15 October 2026) ---------- */
.logo-slots { display: grid; gap: 0; }
.logo-slot { display: grid; gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--border-hairline); }
.logo-slot:first-child { padding-top: 0; }
.logo-slot:last-child { border-bottom: 0; padding-bottom: 0; }
.logo-slot__glyph { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-sm); align-items: end; }
.logo-slot__glyph .brand__crest { margin-bottom: 4px; }
.logo-pv { display: grid; gap: var(--space-lg); }
.logo-pv__item { display: grid; gap: 6px; min-width: 0; align-content: start; }
.logo-pv__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.logo-pv__label { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: baseline; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); }
.logo-pv__from { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--accent); }
.logo-pv__from--none { color: var(--on-surface-variant); }
.logo-pv__bar { display: flex; align-items: center; gap: var(--space-md); height: 64px; padding: 0 var(--space-md); overflow: hidden;
  background: var(--glass-strong); border: 1px solid var(--border-hairline); border-radius: var(--radius); }
.logo-pv__bar .brand { height: auto; }
.logo-pv__nav { display: flex; gap: var(--space-md); margin-left: auto; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--on-surface-variant); white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
/* the wide-screen preview shows the wide screen's choice whatever the admin's own width */
.logo-pv--desk .brand .brand__wide-only { display: block; }
.logo-pv--desk .brand .brand__phone-only { display: none; }
.logo-pv--desk .brand .brand__text { display: block; }
.logo-pv__phone { width: 100%; max-width: 280px; padding: 6px; border-radius: 18px; border: 1px solid var(--border-card); background: var(--surface-container-lowest); }
.logo-pv__bar--phone { height: 48px; gap: 10px; padding: 0 10px; border: 0; border-radius: 12px; }
.logo-pv__bar--phone .logo-pv__nav { margin-left: 0; gap: 10px; }
.logo-pv__bar--phone .brand__wordmark { height: 30px; max-width: 170px; }
.logo-pv__tab { display: flex; align-items: center; gap: 8px; max-width: 260px; height: 36px; padding: 0 12px; border-radius: 10px 10px 0 0;
  background: var(--surface-container-high); border-bottom: 3px solid var(--surface-container-highest); font-size: 12px; color: var(--on-surface); }
.logo-pv__tab img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.logo-pv__tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-pv__card { display: grid; max-width: 440px; border-radius: 10px; overflow: hidden; background: #1b1f27; border: 1px solid #2c3240; }
.logo-pv__card > img { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; display: block; }
.logo-pv__card--small { grid-template-columns: 96px minmax(0, 1fr); }
.logo-pv__card--small > img { aspect-ratio: 1 / 1; height: 100%; object-fit: contain; background: var(--surface-base); }
.logo-pv__card-text { display: grid; gap: 2px; padding: 10px 12px; min-width: 0; font-size: 13px; color: #aab2c0; }
.logo-pv__card-text strong { color: #eef1f6; }
.logo-pv__card-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-pv__card-text .logo-pv__card-domain { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9aa3b2; }
.logo-pv__off { display: grid; justify-items: center; gap: 8px; padding: var(--space-lg) var(--space-md); text-align: center; border-radius: var(--radius);
  border: 1px solid var(--border-hairline); background: radial-gradient(120% 90% at 50% 0%, var(--surface-container-high), var(--surface-base) 70%); }
.logo-pv__off .offline__crest--img { width: 56px; height: 56px; }
.logo-pv__off .offline__brand { font-size: 11px; }
.logo-pv__off-title { font-family: var(--font-display); font-size: 28px; line-height: 1; color: #ffffff; }
.logo-pv__foot { padding: var(--space-sm) var(--space-md); border-radius: var(--radius); border: 1px solid var(--border-hairline); background: var(--surface-container-lowest); font-size: 15px; }

/* media library: a card with no thumbnail offers to make one, in place of the picture */

/* ---------- admin: the stays table on Where they are, the landmarks list on the Atlas ---------- */
.stays-table { display: flex; flex-direction: column; gap: var(--space-sm); }
.stays-table__row { display: grid; grid-template-columns: 28px 1.3fr 1fr 130px 130px 1fr auto; gap: var(--space-sm); align-items: end; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-hairline); }
.stays-table__row--now { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.stays-table__row .stays__num { margin-bottom: 10px; }
.stays-table__by { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
@media (max-width: 899px) { .stays-table__row { grid-template-columns: 28px 1fr 1fr; } }
.landmark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px var(--space-md); }
.landmark-grid__item { font-size: 13px; }

/* ---------- the World page: every character's road in their class colour (2 October 2026) ---------- */
.world__card { margin-top: 0; scroll-margin-top: 96px; }
.world__whole { margin-left: auto; }
.where__label a { color: inherit; text-decoration: none; }
.where__label a:hover { text-decoration: underline; }
.wmap__road { color: var(--road); }
.wmap__roadleg { fill: none; stroke: var(--road); stroke-width: 1.6; stroke-linecap: round; }
.wmap__roadleg--ground { stroke-dasharray: 1 4; }
.wmap__roadleg--arc { stroke-dasharray: 6 5; }
.wmap__roadleg--instant { stroke-width: 1; stroke-dasharray: 1 7; }
.wmap__roaddot { fill: var(--road); }
.wmap__who { cursor: pointer; }
.wmap__glow { fill: var(--road); fill-opacity: .16; }
.wmap__medal { fill: var(--surface-container-high); stroke: var(--road); stroke-width: 2.5; }
.wmap__who:hover .wmap__medal, .wmap__who:focus-visible .wmap__medal { fill: var(--road); }
.wmap__initial { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: #ffffff; }
.wmap__name { font-size: 13px; font-weight: 700; fill: #ffffff; }
.wmap__line { font-size: 11px; fill: var(--road); }
.wmap__line--fallen { fill: var(--outline); }
.wmap__stone { fill: var(--surface-container-high); stroke: var(--on-surface); stroke-width: 2; }
.wmap__cross { fill: none; stroke: var(--on-surface); stroke-width: 1.6; stroke-linecap: round; }
.wmap__ground { fill: none; stroke: var(--road); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 899px) { .wmap--phone .wmap__name { font-size: 11px; } }

/* Draft in a voice's words (6 November 2026): the rows the table's, full width; the head padded; a dismissed moment struck through. */
.voice-drafts__head { padding: var(--space-md) var(--space-md) var(--space-sm); }

/* The Trixie voice bench (8 November 2026, layout A, "the workbench"): the options grouped on the left, the draft on the right. */
.vbench { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-lg); align-items: start; }
@media (min-width: 1100px) { .vbench { grid-template-columns: 380px minmax(0, 1fr); } }
.vbench__form { display: grid; gap: var(--space-md); padding: var(--space-md); }
.vbench__group { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--border-hairline); }
.vbench__group:first-child { padding-top: 0; border-top: 0; }
.vbench__add { gap: 4px; }
.vbench .field-row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-sm); }
.vbench__addchip { padding: 3px 9px; font-size: 12px; }
.vbench__out { display: grid; gap: var(--space-md); position: sticky; top: var(--space-md); }
.vbench__toolbar { gap: var(--space-xs); }
.vbench__take { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--on-surface-variant); min-width: 52px; text-align: center; }
.vbench__note { margin-left: auto; }
.vbench__paper { padding: var(--space-lg) var(--space-xl); }
.vbench__paper p { max-width: 68ch; margin: 0 0 var(--space-sm); font-size: 15px; line-height: 1.6; }
.vbench__title { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 var(--space-md); text-wrap: balance; }
.vbench__check { margin: var(--space-xs) 0 var(--space-s); }
.vbench__check--ok { color: #7fd18b; }
.vbench__check--bad { border-left: 2px solid var(--legendary-orange); padding: var(--space-xs) var(--space-s); }
.vbench__check--bad ul { margin: 0; padding-left: 1.2em; font-size: 0.85rem; }
.vbench__check--fixed { border-left: 2px solid var(--accent); padding: var(--space-xs) var(--space-s); }
.vbench__check--fixed ul { margin: 0; padding-left: 1.2em; font-size: 0.85rem; }
.vbench__facts { padding: 0 var(--space-lg) var(--space-md); max-height: 360px; overflow: auto; font-size: 13px; }
.vbench__facts td { padding: 2px var(--space-sm) 2px 0; vertical-align: top; }
.drafts__off td { opacity: .45; text-decoration: line-through; }
.drafts__off td .btn { text-decoration: none; opacity: 1; }
.drafts__dismiss { color: var(--on-surface-variant); }


/* =====================================================================
   The tome's pages (step 3 of the rebrand, the author's mock of 11 November
   2026, INSPIRATION/trixies-tome): the head of a sub-page, the biography,
   the journal's cards, the gallery's grid, the shards page, the whole road.
   ===================================================================== */
.subhead { padding-top: calc(var(--space-2xl, 48px)); display: grid; gap: 10px; }
.subhead__kicker { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.subhead__rule { width: 28px; height: 2px; background: var(--accent); }
.subhead__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4.5vw, 52px); line-height: 1.05; letter-spacing: .02em; color: #fff; text-wrap: balance; }
.subhead__note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-surface-variant); max-width: 68ch; text-wrap: pretty; }
.subhead + .section { border-top: 0; padding-top: 28px; }

/* The biography: the portrait sticks beside the prologue. */
.bio { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.bio__side { flex: 0 1 340px; position: sticky; top: calc(var(--header-h) + var(--ribbon-h, 0px) + 24px); }
.bio__portrait { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-card); background: var(--surface-container-lowest);
  box-shadow: var(--card-highlight), 0 6px 20px rgba(0,0,0,.28); display: grid; place-items: center; }
.bio__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio__initials { font-family: var(--font-display); font-size: 64px; color: var(--accent); }
.bio__text { flex: 999 1 420px; min-width: 0; max-width: 720px; }
.prose--bio { font-size: 18px; line-height: 30px; color: var(--on-surface-variant); }
.prose--bio > p:first-child em { color: var(--accent); font-size: 19px; }
.prose--bio h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: .04em; color: var(--on-surface); margin: 32px 0 14px; }
.prose--bio h2:first-child { margin-top: 0; }
.prose--bio ul { padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); list-style: none; margin: 0 0 1em; }
.prose--bio li { font-size: 17px; line-height: 28px; color: var(--on-surface); margin: 0 0 8px; }
@media (max-width: 767px) { .bio__side { position: static; flex-basis: 100%; max-width: 320px; } .prose--bio { font-size: 17px; line-height: 28px; } }

/* The journal's cards, on the home (three) and the journal page (every one). */
.jcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.jcard { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border-card); background: var(--surface-card, #121826); overflow: hidden;
  color: var(--on-surface); box-shadow: var(--card-highlight), 0 6px 20px rgba(0,0,0,.28); transition: border-color .18s ease, transform .18s ease; }
.jcard:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-2px); color: var(--on-surface); }
.jcard__cover { display: block; aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, var(--surface-container-low) 0 10px, var(--surface-container) 10px 20px); overflow: hidden; }
.jcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jcard__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.jcard__kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.jcard__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: .02em; }
.jcard__lede { font-style: italic; font-size: 15px; line-height: 22px; color: var(--on-surface-variant); text-wrap: pretty; }
.jcard__by { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--outline); }

/* The gallery's grid, and the home's four-tile preview of it. */
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gcards--preview { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.gcard { display: flex; flex-direction: column; padding: 0; margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--border-card); background: var(--surface-card, #121826); overflow: hidden;
  color: var(--on-surface); text-align: left; cursor: pointer; font: inherit; transition: border-color .18s ease; }
.gcard:hover, .gcard:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, transparent); outline: none; }
.gcard__pic { display: block; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, var(--surface-container-low) 0 10px, var(--surface-container) 10px 20px); overflow: hidden; }
.gcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__cap { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-hairline); font-size: 14px; }
.gcard__title { min-width: 0; }
.gcard__when { font-size: 10px; line-height: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--outline); white-space: nowrap; }

/* The shards page: the count, the tally whole, the entries that brought them. */
.shards .card__body { display: grid; gap: 18px; }
.shards__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.shards__num { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
/* The tally at about the tile's own size, never stretched across the page (decided 12 November 2026: the marks were too big). */
/* the groups of five fill the card from edge to edge, at any width (12 November 2026) */
.shards__chalk { position: absolute; }
.shards__marks { display: grid; grid-template-columns: repeat(auto-fit, 40px); justify-content: space-between; gap: 16px 14px; }
.shards__five { display: block; overflow: visible; filter: url(#chalk-shards-page) drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
.grimoire__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.grimoire__every { font-style: normal; }

/* The whole road: the map, then every place beneath it. */
/* A capture written in her words (decided 12 November 2026, CaptureVoice): the button, Try another and where the words came from. */
.capture-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Write a day in her words (decided 12 November 2026): the form, then the draft as it would read. */
.day-writer { display: grid; gap: var(--space-sm); }
.day-writer__form { display: grid; gap: var(--space-sm); }
.day-writer__draft { border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); padding: 4px 0 4px var(--space-md); }
.road { display: grid; gap: var(--space-md); }
/* Every place she has been on the left of the map, as tall as the map, scrolled inside (decided 12 November 2026):
   the side column holds the card absolutely, so the row's height is the map's and the list scrolls within it. */
.road__layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--space-md); align-items: stretch; }
.road__layout--map-only { grid-template-columns: minmax(0, 1fr); }
.road__main { min-width: 0; display: flex; flex-direction: column; }
.road__main > .road__map { flex: 1; }
.road__side { position: relative; min-height: 420px; }  /* a floor for when no map is drawn yet */
.road__list { position: absolute; inset: 0; min-height: 0; }
.road__stays { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; padding-right: 6px; margin-right: -6px; }
.road__stays:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
@media (max-width: 900px) {
  .road__layout { grid-template-columns: minmax(0, 1fr); }
  .road__side { order: 2; }
  .road__side { min-height: 0; }
  .road__list { position: static; max-height: 60vh; }
}

/* Talk to Trixie (12 November 2026): the biography's layout, her portrait beside a conversation. The log is a
   reversed column, so it stays at its newest line without a script. */
.chat__main { display: flex; flex-direction: column; gap: 12px; }
.chat__card { display: flex; flex-direction: column; overflow: hidden; }
.chat__asleep { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.chat__intro { margin: 0; font-size: 17px; line-height: 28px; }
.chat__note { margin: 0; }
.chat__log { display: flex; flex-direction: column-reverse; gap: 14px; padding: 20px; height: min(52vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.chat__line { display: flex; flex-direction: column; gap: 4px; max-width: 86%; }
.chat__line--yours { align-self: flex-end; align-items: flex-end; }
.chat__who { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, rgba(255, 255, 255, .55)); }
.chat__line--hers .chat__who { color: var(--accent); }
.chat__text { margin: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border-card); background: var(--surface-container-lowest); line-height: 24px; overflow-wrap: anywhere; }
.chat__line--hers .chat__text { border-top-left-radius: 4px; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chat__line--yours .chat__text { border-top-right-radius: 4px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chat__offers { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 0; border-top: 1px solid var(--border-card); }
.chat__form { display: flex; gap: 8px; padding: 12px 20px 20px; }
.chat__input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) { .chat .bio__side { max-width: 140px; } .chat__log { height: 56vh; padding: 14px; } .chat__offers, .chat__form { padding-left: 14px; padding-right: 14px; } }