/* ════════════════════════════════════════════════════════════════════════════
   codex.css — Player Codex theme + shell (Phase 2B).
   Two skins driven off one token set: default = "Adventurer's Journal" (light),
   [data-skin="dark"] = "Midnight Ledger". Tokens mirror the design handoff
   (design_handoff_player_codex/README.md → Design Tokens).
   ════════════════════════════════════════════════════════════════════════════ */

.codex-root {
    --cx-appBg: #0e0a05;
    --cx-parchment: #efe7d1;
    --cx-cream: #fbf4e6;
    --cx-news: #f1e9d4;
    --cx-ink: #211608;
    --cx-inkMid: #402c17;
    --cx-muted: #7c6a4e;
    --cx-faint: #a8966f;
    --cx-gold: #b8920c;
    --cx-goldSoft: #caa53a;
    --cx-goldFaint: rgba(184, 146, 12, 0.32);
    --cx-goldLine: rgba(184, 146, 12, 0.5);
    --cx-crimson: #730000;
    --cx-crimsonSoft: #8c1414;
    --cx-spine: #5c0000;
    --cx-spineDeep: #3a0000;
    --cx-rule: rgba(40, 25, 8, 0.14);
    --cx-ruleSoft: rgba(40, 25, 8, 0.07);
    --cx-border: rgba(40, 25, 8, 0.16);
    --cx-noteBg: #fbf1d6;
    --cx-noteBorder: rgba(184, 146, 12, 0.42);
    --cx-rumor: #c01f6a;
    --cx-quest: #3b6d11;
    --cx-imgBg: #e3d8bd;
    --cx-imgInk: rgba(60, 40, 12, 0.34);
    --cx-cardShadow: 0 1px 5px rgba(40, 20, 0, 0.08);
    --cx-cardHover: 0 7px 26px rgba(40, 20, 0, 0.22);

    --cx-fsc: 'IM Fell English SC', Georgia, serif;
    --cx-fell: 'IM Fell English', Georgia, serif;
    --cx-cin: 'Cinzel', Georgia, serif;
    --cx-lor: 'Lora', Georgia, serif;
}

.codex-root[data-skin="dark"] {
    --cx-appBg: #070809;
    --cx-parchment: #15171b;
    --cx-cream: #1c1f23;
    --cx-news: #121317;
    --cx-ink: #ece0c4;
    --cx-inkMid: #cebf9c;
    --cx-muted: #8e8268;
    --cx-faint: #5f5946;
    --cx-gold: #dcbf63;
    --cx-goldSoft: #ebd488;
    --cx-goldFaint: rgba(220, 191, 99, 0.30);
    --cx-goldLine: rgba(220, 191, 99, 0.42);
    --cx-crimson: #cf5a48;
    --cx-crimsonSoft: #dd7460;
    --cx-spine: #23090a;
    --cx-spineDeep: #150405;
    --cx-rule: rgba(220, 191, 99, 0.16);
    --cx-ruleSoft: rgba(220, 191, 99, 0.08);
    --cx-border: rgba(220, 191, 99, 0.20);
    --cx-noteBg: #211f17;
    --cx-noteBorder: rgba(220, 191, 99, 0.32);
    --cx-rumor: #f06aa6;
    --cx-quest: #7fb046;
    --cx-imgBg: #1f242b;
    --cx-imgInk: rgba(220, 205, 165, 0.34);
    --cx-cardShadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    --cx-cardHover: 0 8px 30px rgba(0, 0, 0, 0.55);
}

/* Reuse the player archetype (entity page) inside the Codex shell: remap its --pa-* tokens
   to the codex tokens so it adopts the active skin (incl. Midnight Ledger) with no structural
   change. The panel itself never redeclares --pa-*, so descendants inherit these. */
.codex-root {
    --pa-parchment: var(--cx-parchment);
    --pa-cream: var(--cx-cream);
    --pa-ink: var(--cx-ink);
    --pa-ink-mid: var(--cx-inkMid);
    --pa-muted: var(--cx-muted);
    --pa-gold: var(--cx-gold);
    --pa-gold-faint: var(--cx-goldFaint);
    --pa-crimson: var(--cx-crimson);
    --pa-spine: var(--cx-spine);
    --pa-rule: var(--cx-rule);
    --pa-border: var(--cx-border);
    --pa-note-bg: var(--cx-noteBg);
    --pa-note-border: var(--cx-noteBorder);
    --pa-note-ink: var(--cx-inkMid);
}

/* ── Shell ────────────────────────────────────────────────────────────────── */
.codex-root {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--cx-appBg);
    font-family: var(--cx-lor);
    color: var(--cx-inkMid);
}

.codex-paper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cx-parchment);
    position: relative;
}

.codex-paper__scroll {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

/* The campaign-notes editor (My Notes) brings its own full-height .cb-layout chrome; let it
   fill the paper column inside the Codex shell. */
.codex-paper > .cb-layout { flex: 1; min-height: 0; }
/* The editor hardcodes height: calc(100vh - 64px) for the old MudBlazor app bar, which the
   Codex shell doesn't have — make it simply fill the paper column instead. */
.codex-root .cb-layout { height: 100%; }
/* The editor is full-bleed by default; inside the Codex constrain it to a centered page width
   like the Chronicle / My Codex, with breathing room. Scoped to .codex-root so the DM view is
   untouched. */
.codex-root .cb-editor-wrapper { padding: 22px 0 56px; }
.codex-root .cb-editor-wrapper .rte-wrapper { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 700px) { .codex-root .cb-editor-wrapper .rte-wrapper { padding: 0 14px; } }

/* ── Notes book: theme the reused MudBlazor editor chrome to the Codex palette ─
   The DM/player Background page reuses the old MudBlazor notes editor. Inside the
   Codex shell we (1) remap MudBlazor's primary from its default blue to the codex
   crimson so buttons/chips/links/spinners stop clashing, (2) repaint the topbar to
   parchment, and (3) detach the chapter rail into a floating card so it no longer
   reads as an extension of the maroon spine. All scoped to .codex-root. */
.codex-root {
    --mud-palette-primary: var(--cx-crimson);
    --mud-palette-primary-rgb: 115, 0, 0;
    --mud-palette-primary-text: var(--cx-cream);
    --mud-palette-primary-hover: var(--cx-crimsonSoft);
    --mud-palette-primary-darken: var(--cx-spine);
    --mud-palette-primary-lighten: var(--cx-crimsonSoft);
}

/* Topbar → parchment + gold rule (was a white MudBlazor surface slab). */
.codex-root .cb-topbar { background: transparent; border-bottom: 1px solid var(--cx-goldFaint); }
.codex-root .cb-topbar__breadcrumb { color: var(--cx-muted); }

/* Outlined primary actions (Last recap / Planner / Save) → gold hairline, crimson ink. */
.codex-root .cb-topbar .mud-button-outlined.mud-button-outlined-primary { border-color: var(--cx-goldLine); color: var(--cx-crimson); }
.codex-root .cb-topbar .mud-button-outlined.mud-button-outlined-primary:hover { border-color: var(--cx-gold); background: rgba(184, 146, 12, 0.08); }

/* Save is the commit action — fill it crimson to stand out from the gold-outline siblings. */
.codex-root .cb-topbar .cb-save-btn.mud-button-outlined-primary { background: var(--cx-crimson); border-color: var(--cx-spine); color: var(--cx-cream); }
.codex-root .cb-topbar .cb-save-btn.mud-button-outlined-primary:hover { background: var(--cx-crimsonSoft); border-color: var(--cx-crimson); }

/* Chapter rail → floating card, detached from the spine, tokenised for both skins. */
.codex-root .chapnav {
    margin: 14px 0 14px 14px;
    background: var(--cx-cream);
    border: 1px solid var(--cx-goldLine);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(40, 20, 0, 0.12);
    overflow: hidden;
}
.codex-root .chapnav__header { border-bottom: 1px solid var(--cx-goldFaint); }
.codex-root .chapnav__label { font-family: var(--cx-cin); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-crimsonSoft); }
.codex-root .chapnav__collapse-btn { color: var(--cx-gold) !important; }
.codex-root .chapnav__chapter-title { color: var(--cx-crimson); border-left: 3px solid transparent; border-radius: 0 4px 4px 0; }
.codex-root .chapnav__chapter-title:hover { background: rgba(115, 0, 0, 0.06); }
.codex-root .chapnav__chapter-title--active { background: #f1e2c4; border-left: 3px solid var(--cx-crimson); color: var(--cx-crimson); font-weight: 600; }
.codex-root[data-skin="dark"] .chapnav__chapter-title--active { background: rgba(220, 191, 99, 0.10); }
.codex-root .chapnav__expand-icon { color: var(--cx-gold); }
.codex-root .chapnav__subheading { color: var(--cx-muted); }
.codex-root .chapnav__subheading:hover { background: rgba(115, 0, 0, 0.06); color: var(--cx-crimson); }
.codex-root .chapnav__expand-strip { color: var(--cx-gold); }

/* ── Spine (player nav) ───────────────────────────────────────────────────── */
.cx-spine {
    width: 198px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, var(--cx-spine), var(--cx-spineDeep));
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 3px 0 18px rgba(0, 0, 0, 0.34);
    position: relative;
    z-index: 2;
}

.cx-spine__brand {
    padding: 15px 18px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 1px 0 var(--cx-goldFaint);
    display: flex;
    align-items: center;
    gap: 9px;
}
.cx-spine__crest {
    width: 30px;
    height: 33px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}
.cx-spine__brand-word { line-height: 1.15; }
.cx-spine__brand-sm { font-family: var(--cx-cin); font-size: 9px; font-weight: 600; color: var(--cx-goldSoft); letter-spacing: 0.24em; opacity: 0.85; }
.cx-spine__brand-lg { font-family: var(--cx-cin); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.10em; }

.cx-spine__campaign {
    margin: 9px 11px 5px;
    padding: 7px 11px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid var(--cx-goldFaint);
    border-radius: 2px;
}
.cx-spine__campaign-l { font-family: var(--cx-cin); font-size: 7.5px; letter-spacing: 0.14em; color: var(--cx-goldSoft); text-transform: uppercase; opacity: 0.8; }
.cx-spine__campaign-n { font-family: var(--cx-lor); font-size: 11.5px; font-style: italic; color: #e6cfae; }

.cx-spine__nav { flex: 1; padding-top: 5px; }
.cx-spine__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    font-family: var(--cx-cin);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #cba886;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border-top: none; border-right: none; border-bottom: none;
    width: 100%;
    text-align: left;
}
.cx-spine__item:hover { color: #fdf0d0; background: rgba(220, 191, 99, 0.08); }
.cx-spine__item.on { color: #fdf0d0; background: rgba(220, 191, 99, 0.16); border-left-color: var(--cx-gold); }
.cx-spine__item .mud-icon-root, .cx-spine__item .ti { font-size: 16px; width: 16px; }

.cx-spine__foot { display: flex; align-items: center; gap: 9px; padding: 11px 15px 15px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cx-spine__avatar { width: 28px; height: 28px; border-radius: 50%; background: #2a4060; border: 1.5px solid var(--cx-goldFaint); display: flex; align-items: center; justify-content: center; font-family: var(--cx-cin); font-size: 11px; font-weight: 700; color: #ffd5a0; flex-shrink: 0; }
.cx-spine__name { font-family: var(--cx-cin); font-size: 10px; color: #e8d0b8; }
.cx-spine__role { font-family: var(--cx-lor); font-size: 9px; font-style: italic; color: rgba(200, 168, 120, 0.6); }

/* Skin toggle */
.cx-skin-toggle {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 4px 11px 8px; padding: 6px 9px;
    background: rgba(0, 0, 0, 0.2); border: 1px solid var(--cx-goldFaint); border-radius: 2px;
    color: var(--cx-goldSoft); font-family: var(--cx-cin); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; cursor: pointer;
}
.cx-skin-toggle:hover { background: rgba(220, 191, 99, 0.12); }

/* ── Mobile: stack the spine above the paper and let the document scroll ──────── */
@media (max-width: 720px) {
    .codex-root { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
    .codex-paper { overflow: visible; }
    .codex-paper__scroll { overflow-y: visible; }

    .cx-spine {
        width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.34); padding: 6px 10px; gap: 4px 6px;
    }
    .cx-spine__brand { padding: 6px 10px; border-bottom: none; box-shadow: none; }
    .cx-spine__campaign { display: none; } /* campaign name is already in the breadcrumb */
    .cx-spine__nav { flex: 1 1 100%; display: flex; flex-wrap: wrap; padding-top: 0; gap: 2px; }
    .cx-spine__item {
        width: auto; padding: 7px 10px;
        border-left: none; border-bottom: 3px solid transparent;
    }
    .cx-spine__item.on { border-left-color: transparent; border-bottom-color: var(--cx-gold); }
    .cx-skin-toggle { margin: 4px 6px; }
    .cx-spine__foot { padding: 6px 10px; border-top: none; margin-left: auto; }

    .cx-masthead__meta { font-size: 8px; }
    .cx-preview-banner { flex-wrap: wrap; }
}

/* ── Top breadcrumb bar ───────────────────────────────────────────────────── */
.cx-topbar {
    background: var(--cx-cream);
    border-bottom: 1px solid var(--cx-border);
    padding: 9px 22px;
    display: flex; align-items: center; gap: 8px;
    min-height: 40px; flex-shrink: 0;
    position: relative; z-index: 2;
}
.cx-topbar__crumb { font-family: var(--cx-cin); font-size: 10.5px; letter-spacing: 0.04em; color: var(--cx-crimson); text-decoration: none; }
.cx-topbar__crumb.is-last { color: var(--cx-ink); font-weight: 600; }
.cx-topbar__sep { color: var(--cx-muted); font-size: 11px; }

/* ── Ornaments ────────────────────────────────────────────────────────────── */
.cx-ornrule { display: flex; align-items: center; gap: 10px; margin: 20px 0 13px; }
.cx-ornrule__line { flex: 1; height: 1px; }
.cx-ornrule__line--l { background: linear-gradient(to right, transparent, var(--cx-goldFaint)); }
.cx-ornrule__line--r { background: linear-gradient(to left, transparent, var(--cx-goldFaint)); }
.cx-ornrule__label { font-family: var(--cx-cin); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--cx-gold); }
.cx-diamond { flex-shrink: 0; }

/* Column head — 2px solid bottom border in the section colour */
.cx-colhead { display: flex; align-items: baseline; gap: 9px; padding-bottom: 6px; margin: 0 0 12px; border-bottom: 2px solid var(--cx-gold); }
.cx-colhead__title { font-family: var(--cx-fsc); font-size: 19px; color: var(--cx-ink); }
.cx-colhead__sub { font-family: var(--cx-lor); font-style: italic; font-size: 12px; color: var(--cx-muted); }

/* ── Type chips (one hue → both skins via color-mix) ──────────────────────── */
.cx-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 2px;
    font-family: var(--cx-cin); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
    background: color-mix(in srgb, var(--hue) 12%, transparent);
    color: color-mix(in srgb, var(--hue), black 22%);
    border: 1px solid color-mix(in srgb, var(--hue) 42%, transparent);
}
.cx-chip--sm { padding: 2px 8px; font-size: 8.5px; }
.cx-chip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--hue); flex-shrink: 0; }
.codex-root[data-skin="dark"] .cx-chip {
    background: color-mix(in srgb, var(--hue) 22%, transparent);
    color: color-mix(in srgb, var(--hue), white 52%);
    border-color: color-mix(in srgb, var(--hue) 48%, transparent);
}

.cx-chip[data-type="NPC"]      { --hue: #2563eb; }
.cx-chip[data-type="City"]     { --hue: #16a34a; }
.cx-chip[data-type="Location"] { --hue: #0891b2; }
.cx-chip[data-type="Store"]    { --hue: #b45309; }
.cx-chip[data-type="Inn"]      { --hue: #c2410c; }
.cx-chip[data-type="Temple"]   { --hue: #9333ea; }
.cx-chip[data-type="Dungeon"]  { --hue: #374151; }
.cx-chip[data-type="Item"]     { --hue: #d97706; }
.cx-chip[data-type="Monster"]  { --hue: #dc2626; }
.cx-chip[data-type="Faction"]  { --hue: #7c3aed; }
.cx-chip[data-type="Event"]    { --hue: #ca8a04; }
.cx-chip[data-type="Handout"]  { --hue: #0d9488; }
.cx-chip[data-type="Rumor"]    { --hue: #db2777; }
.cx-chip[data-type="Quest"]    { --hue: #3b6d11; }
.cx-chip[data-type="Other"]    { --hue: #6b7280; }

/* "Shared by your DM" tag */
.cx-sharedtag {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
    background: color-mix(in srgb, var(--cx-gold) 12%, transparent);
    border: 1px solid var(--cx-goldFaint); border-radius: 2px;
    font-family: var(--cx-cin); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cx-goldSoft); white-space: nowrap;
}

/* Quest status flag */
.cx-questflag {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 2px;
    font-family: var(--cx-cin); font-size: 8.5px; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid currentColor;
}
.cx-questflag[data-status="new"]       { color: var(--cx-gold);    background: color-mix(in srgb, var(--cx-gold) 14%, transparent); }
.cx-questflag[data-status="progress"]  { color: var(--cx-quest);   background: color-mix(in srgb, var(--cx-quest) 16%, transparent); }
.cx-questflag[data-status="completed"] { color: var(--cx-muted);   background: color-mix(in srgb, var(--cx-muted) 14%, transparent); }
.cx-questflag[data-status="failed"]    { color: var(--cx-crimson); background: color-mix(in srgb, var(--cx-crimson) 12%, transparent); }

/* "Unverified" rumour stamp (a styling motif — NOT a truth indicator) */
.cx-unverified {
    display: inline-block; transform: rotate(-6deg); padding: 2px 8px;
    border: 1.5px solid var(--cx-rumor); border-radius: 3px;
    font-family: var(--cx-cin); font-size: 8px; font-weight: 700; letter-spacing: 0.16em;
    color: var(--cx-rumor); text-transform: uppercase; opacity: 0.85;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.cx-card {
    background: var(--cx-cream);
    border: 1px solid var(--cx-border);
    border-radius: 3px;
    box-shadow: var(--cx-cardShadow);
    transition: box-shadow 0.16s, transform 0.16s;
}
.cx-card--clickable { cursor: pointer; }
.cx-card--clickable:hover { transform: translateY(-2px); box-shadow: var(--cx-cardHover), 0 0 0 1.5px var(--cx-gold); }

/* DM "preview as player" banner */
.cx-preview-banner {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 9px 16px;
    background: color-mix(in srgb, var(--cx-gold) 22%, var(--cx-cream));
    border: 1px solid var(--cx-gold);
    border-radius: 4px;
    font-family: var(--cx-fell); font-size: 13.5px; color: var(--cx-ink);
}
.cx-preview-banner__exit {
    margin-left: auto; font-weight: 600; color: var(--cx-crimson); text-decoration: none;
    white-space: nowrap;
}
.cx-preview-banner__exit:hover { text-decoration: underline; }

.player-notes-panel__preview {
    padding: 18px 16px; font-family: var(--cx-fell); font-style: italic;
    font-size: 13px; color: var(--cx-muted); text-align: center;
}

/* Search-result kind tag (rumour / your note / entry) */
.cx-result-kind {
    margin-left: auto;
    font-family: var(--cx-fell);
    font-style: italic;
    font-size: 11px;
    color: var(--cx-muted);
    text-transform: lowercase;
}

/* Type-tinted portrait placeholder */
.cx-portrait {
    flex-shrink: 0; position: relative; border-radius: 3px; overflow: hidden;
    background: linear-gradient(165deg, color-mix(in srgb, var(--hue) 14%, transparent), color-mix(in srgb, var(--hue) 30%, transparent));
    border: 1.5px solid color-mix(in srgb, var(--hue) 40%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: var(--hue);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.cx-empty {
    text-align: center; padding: 26px 18px; color: var(--cx-muted);
    font-family: var(--cx-fell); font-style: italic; font-size: 14px;
    border: 1px dashed var(--cx-border); border-radius: 3px;
    background: color-mix(in srgb, var(--cx-gold) 4%, transparent);
}

/* ── Previously On (editorial banner atop The Chronicle) ────────────────────── */
.cx-editorial { margin-top: 28px; }
.cx-editorial__eyebrow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px;
}
.cx-editorial__label {
    font-family: var(--cx-fell); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 700; color: var(--cx-crimson);
}
.cx-editorial__when {
    margin-left: auto; font-family: var(--cx-fell); font-style: italic; font-size: 13px; color: var(--cx-muted);
}
.cx-recap__new {
    font-family: var(--cx-fell); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #fff; background: var(--cx-crimson); padding: 2px 8px; border-radius: 3px;
}
.cx-editorial__title {
    font-family: var(--cx-fsc); font-size: 34px; line-height: 1.05; font-weight: 400;
    color: var(--cx-ink); margin: 2px 0 14px;
}
.cx-editorial__body { font-family: var(--cx-fell); font-size: 16px; line-height: 1.75; color: var(--cx-inkMid); }
.cx-editorial__body :is(h1, h2, h3) { font-family: var(--cx-fsc); color: var(--cx-ink); line-height: 1.12; margin: 14px 0 6px; }
.cx-editorial__body p, .cx-editorial__body li { font-family: var(--cx-fell); }

/* ── Scrollbar (themed) ───────────────────────────────────────────────────── */
.codex-paper__scroll::-webkit-scrollbar { width: 11px; }
.codex-paper__scroll::-webkit-scrollbar-track { background: transparent; }
.codex-paper__scroll::-webkit-scrollbar-thumb { background: var(--cx-goldFaint); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.cx-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--cx-muted); font-family: var(--cx-fell); font-style: italic; font-size: 15px; }

/* ── Browse index ─────────────────────────────────────────────────────────── */
.cx-filterbar {
    position: sticky; top: 0; z-index: 3;
    background: var(--cx-cream); border-bottom: 1px solid var(--cx-border);
    padding: 13px 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.cx-search { display: flex; align-items: center; gap: 7px; min-width: 220px; flex: 1; max-width: 360px; background: var(--cx-parchment); border: 1px solid var(--cx-border); border-radius: 3px; padding: 5px 10px; color: var(--cx-muted); }
.cx-search input { border: none; background: transparent; outline: none; flex: 1; min-width: 0; font-family: var(--cx-fell); font-style: italic; font-size: 13px; color: var(--cx-ink); }
.cx-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.cx-pill { font-family: var(--cx-cin); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 13px; border-radius: 20px; border: 1px solid var(--cx-border); background: transparent; color: var(--cx-muted); cursor: pointer; }
.cx-pill:hover { border-color: var(--cx-goldFaint); color: var(--cx-ink); }
.cx-pill.on { background: var(--cx-crimson); color: #fff; border-color: var(--cx-crimson); }

.cx-grouphead { display: flex; align-items: center; gap: 10px; margin: 26px 0 13px; }
.cx-grouphead__marker { width: 9px; height: 9px; transform: rotate(45deg); background: var(--g); flex-shrink: 0; }
.cx-grouphead__title { font-family: var(--cx-fsc); font-size: 24px; color: var(--cx-ink); white-space: nowrap; }
.cx-grouphead__count { font-family: var(--cx-cin); font-size: 12px; color: var(--g); }
.cx-grouphead__sub { font-family: var(--cx-lor); font-style: italic; font-size: 12px; color: var(--cx-muted); white-space: nowrap; }
.cx-grouphead__rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--cx-goldFaint), transparent); }

.cx-cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
@media (max-width: 900px) { .cx-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cx-cardgrid { grid-template-columns: 1fr; } }

.cx-entrycard { display: flex; gap: 12px; padding: 11px 12px; border-left: 3px solid var(--hue); text-decoration: none; align-items: stretch; }
.cx-entrycard__portrait { width: 44px; height: 54px; flex-shrink: 0; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--hue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 36%, transparent); display: flex; align-items: center; justify-content: center; color: var(--hue); }
.cx-entrycard__portrait img { width: 100%; height: 100%; object-fit: cover; }
.cx-entrycard__portrait .mud-icon-root { font-size: 22px; opacity: 0.6; }
.cx-entrycard__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.cx-entrycard__namerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cx-entrycard__name { font-family: var(--cx-cin); font-size: 13.5px; color: var(--cx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.cx-entrycard__teaser { font-family: var(--cx-fell); font-style: italic; font-size: 12px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cx-browse-foot { text-align: center; margin-top: 32px; font-family: var(--cx-fell); font-style: italic; font-size: 13px; color: var(--cx-muted); }

/* ── Front page (broadsheet) ──────────────────────────────────────────────── */
.cx-front { max-width: 1240px; margin: 0 auto; padding: 30px 34px 56px; }

/* Wrapper for reused DM-side pages (EntityDetail / EntityReferences) hosted inside the Codex shell — mirrors
   WasmMainLayout's .app-body-container so content keeps the same comfortable width as outside the Codex
   instead of stretching the full paper column on wide monitors. */
.codex-hosted { max-width: 1400px; margin: 0 auto; padding: 28px 32px 48px; box-sizing: border-box; }

.cx-masthead { text-align: center; }
.cx-masthead__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--cx-cin); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cx-muted); }
.cx-masthead__meta span { white-space: nowrap; }
.cx-masthead__rule { border-top: 1px solid var(--cx-ink); margin: 8px 0 0; }
.cx-masthead__name { font-family: var(--cx-fsc); font-size: 56px; line-height: 0.95; margin: 6px 0 2px; color: var(--cx-ink); font-weight: 400; }
.cx-masthead__tag { font-family: var(--cx-fell); font-style: italic; font-size: 14px; color: var(--cx-muted); }
.cx-edbar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--cx-ink); border-bottom: 3px double var(--cx-ink); padding: 7px 0; margin-top: 9px; font-family: var(--cx-cin); font-size: 10px; letter-spacing: 0.06em; color: var(--cx-muted); }
.cx-edbar__date { font-family: var(--cx-fell); font-style: italic; font-size: 13px; color: var(--cx-crimsonSoft); white-space: nowrap; }
.cx-edbar strong { color: var(--cx-ink); }

.cx-lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; margin-top: 22px; }
@media (max-width: 880px) { .cx-lead-grid { grid-template-columns: 1fr; } }

.cx-lead { padding-right: 26px; border-right: 1px solid var(--cx-rule); }
@media (max-width: 880px) { .cx-lead { padding-right: 0; border-right: none; } }
.cx-lead__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cx-lead__badge { background: var(--cx-crimson); color: #fff; font-family: var(--cx-cin); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; white-space: nowrap; }
.cx-lead__when { font-family: var(--cx-cin); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-muted); white-space: nowrap; }
.cx-lead__split { display: flex; gap: 18px; align-items: flex-start; }
.cx-lead__text { min-width: 0; flex: 1; }
.cx-lead__plate { width: 168px; flex-shrink: 0; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--hue) 45%, transparent); background: color-mix(in srgb, var(--hue) 12%, transparent); }
.cx-lead__plate img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) { .cx-lead__split { flex-direction: column; } .cx-lead__plate { width: 100%; max-width: 220px; } }
.cx-lead__headline { font-family: var(--cx-fsc); font-size: 32px; line-height: 1.05; color: var(--cx-ink); margin: 0 0 8px; }
.cx-lead__dek { font-family: var(--cx-fell); font-style: italic; font-size: 15px; color: var(--cx-crimsonSoft); line-height: 1.4; border-bottom: 1px solid var(--cx-rule); padding-bottom: 12px; margin-bottom: 12px; }
.cx-lead__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cx-lead__chips-l { font-family: var(--cx-cin); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-muted); }
.cx-lead__link { display: inline-block; margin-top: 14px; font-family: var(--cx-cin); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cx-crimson); text-decoration: none; }
.cx-lead__link:hover { text-decoration: underline; }

.cx-mill__intro { font-family: var(--cx-fell); font-style: italic; font-size: 12px; color: var(--cx-muted); margin: 0 0 10px; }
.cx-mill__item { padding: 9px 0; border-top: 1px solid var(--cx-rule); display: block; text-decoration: none; }
.cx-mill__item:first-of-type { border-top: 2px solid var(--cx-rumor); }
.cx-mill__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cx-mill__name { font-family: var(--cx-fell); font-style: italic; font-size: 14px; color: var(--cx-ink); }
.cx-mill__note { margin-top: 12px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--cx-rumor) 40%, transparent); border-radius: 2px; font-family: var(--cx-fell); font-style: italic; font-size: 12px; color: var(--cx-rumor); }

.cx-doublerule { border-top: 3px solid var(--cx-ink); border-bottom: 1px solid var(--cx-ink); height: 5px; margin: 30px 0 6px; }

.cx-journalpeek { display: block; text-decoration: none; background: var(--cx-noteBg); border: 1px solid var(--cx-noteBorder); border-left: 3px solid var(--cx-gold); border-radius: 2px; padding: 14px 18px; transition: box-shadow 0.16s; }
.cx-journalpeek:hover { box-shadow: var(--cx-cardHover); }
.cx-journalpeek__title { font-family: var(--cx-fsc); font-size: 21px; color: var(--cx-ink); margin-bottom: 5px; }
.cx-journalpeek__excerpt { font-family: var(--cx-fell); font-style: italic; font-size: 14px; color: var(--cx-inkMid); line-height: 1.65; }
.cx-journalpeek__more { font-family: var(--cx-cin); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-crimson); margin-top: 11px; }
.cx-journalpeek__when { color: var(--cx-muted); margin-left: 6px; }

.cx-newgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; }
@media (max-width: 880px) { .cx-newgrid { grid-template-columns: 1fr; } }
.cx-newcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
@media (max-width: 620px) { .cx-newcards { grid-template-columns: 1fr; } }
.cx-newcard { display: flex; gap: 12px; padding: 11px; border-left: 3px solid var(--hue); text-decoration: none; align-items: flex-start; }
.cx-newcard__img { width: 60px; height: 60px; flex-shrink: 0; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--hue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 36%, transparent); display: flex; align-items: center; justify-content: center; color: var(--hue); }
.cx-newcard__img img { width: 100%; height: 100%; object-fit: cover; }
.cx-newcard__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cx-newcard__name { font-family: var(--cx-cin); font-size: 12.5px; color: var(--cx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-newcard__desc { font-family: var(--cx-fell); font-style: italic; font-size: 12px; color: var(--cx-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cx-notemargin__item { display: block; padding: 9px 11px; margin-bottom: 9px; background: var(--cx-noteBg); border: 1px solid var(--cx-noteBorder); border-radius: 2px; text-decoration: none; }
.cx-notemargin__on { font-family: var(--cx-cin); font-size: 11px; color: var(--cx-crimson); }
.cx-notemargin__excerpt { font-family: var(--cx-fell); font-style: italic; font-size: 12.5px; color: var(--cx-inkMid); line-height: 1.5; margin: 3px 0 5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-notemargin__date { font-family: var(--cx-cin); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-muted); }
.cx-notemargin__foot { font-family: var(--cx-cin); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-muted); text-align: center; margin-top: 6px; }