/* =============================================================================
   adv-system.css — Advanced Studio design system (UI reform)
   -----------------------------------------------------------------------------
   Loaded eagerly AFTER app.css. Establishes the shared vocabulary every
   reformed Advanced tab reuses: design tokens, core components (.adv-card,
   .adv-pill, .adv-stat, .adv-hint, .adv-empty …) and the reformed Home layout.

   Theming: base color vars (--surface/--ink/--muted/--line/--accent/--green/
   --amber/--danger) already flip between the light (:root) and dark
   (body.narrorift-mode) themes in app.css. Components below build on those with
   color-mix() so a SINGLE rule serves both themes — no per-theme duplication.
   ========================================================================== */

:root {
    /* Spacing scale */
    --adv-1: 4px;
    --adv-2: 8px;
    --adv-3: 12px;
    --adv-4: 16px;
    --adv-5: 20px;
    --adv-6: 24px;
    --adv-8: 32px;
    /* Radii */
    --adv-r-sm: 8px;
    --adv-r-md: 12px;
    --adv-r-lg: 16px;
    --adv-r-pill: 999px;
    /* Elevation */
    --adv-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.06);
    --adv-shadow-2: 0 10px 34px rgba(15, 23, 42, 0.12);
    /* Semantic surfaces (layered on the themed base vars) */
    --adv-surface: var(--surface);
    --adv-raised: color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
    --adv-inset: color-mix(in srgb, var(--surface) 84%, var(--paper) 16%);
    --adv-border: color-mix(in srgb, var(--line) 78%, transparent);
    --adv-border-strong: var(--line);
    --adv-ink: var(--ink);
    --adv-muted: var(--muted);
    --adv-accent: var(--accent);
    /* Type scale */
    --adv-fs-eyebrow: 0.72rem;
    --adv-fs-label: 0.82rem;
    --adv-fs-body: 0.9rem;
    --adv-fs-title: 1.12rem;
    --adv-fs-hero: 1.6rem;
}

/* IMPORTANT: the dark theme overrides the base vars (--surface/--ink/…) on
   `body.narrorift-mode`, but the --adv-* aliases are declared on :root (html).
   Custom-property substitution bakes a var() at its declaration context and
   inherits the result — so tokens derived from the base vars must be RE-declared
   here to re-resolve against the dark base vars. Miss one and it stays light. */
body.narrorift-mode {
    --adv-surface: var(--surface);
    --adv-raised: color-mix(in srgb, var(--surface) 86%, #ffffff 5%);
    --adv-inset: color-mix(in srgb, var(--surface) 78%, #000 22%);
    --adv-border: color-mix(in srgb, var(--line) 78%, transparent);
    --adv-border-strong: var(--line);
    --adv-ink: var(--ink);
    --adv-muted: var(--muted);
    --adv-accent: var(--accent);
    /* Dark theme wants slightly deeper elevation shadows. */
    --adv-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.32);
    --adv-shadow-2: 0 14px 40px rgba(0, 0, 0, 0.46);
}

/* ---------------------------------------------------------------------------
   Primitives
   ------------------------------------------------------------------------- */
.adv-eyebrow {
    margin: 0 0 2px;
    font-size: var(--adv-fs-eyebrow);
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--adv-muted);
}

/* Card ---------------------------------------------------------------------- */
.adv-card {
    display: flex;
    flex-direction: column;
    gap: var(--adv-4);
    padding: var(--adv-5);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-1);
}

.adv-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--adv-3);
}

.adv-card-head h4 {
    margin: 0;
    font-size: var(--adv-fs-title);
    font-weight: 800;
    color: var(--adv-ink);
    line-height: 1.2;
}

.adv-card-head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-1);
    flex-shrink: 0;
}

/* Status pill --------------------------------------------------------------- */
.adv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--adv-ink) 12%, transparent);
    border-radius: var(--adv-r-pill);
    background: color-mix(in srgb, var(--adv-ink) 5%, transparent);
    color: var(--adv-ink);
    font-size: var(--adv-fs-label);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.adv-pill > strong {
    font-weight: 820;
    color: color-mix(in srgb, var(--adv-ink) 62%, var(--adv-muted));
}

.adv-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.adv-pill.is-good {
    color: color-mix(in srgb, var(--green) 82%, var(--adv-ink));
    background: color-mix(in srgb, var(--green) 13%, transparent);
    border-color: color-mix(in srgb, var(--green) 32%, transparent);
}
.adv-pill.is-warn {
    color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink));
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    border-color: color-mix(in srgb, var(--amber) 34%, transparent);
}
.adv-pill.is-bad {
    color: color-mix(in srgb, var(--danger) 84%, var(--adv-ink));
    background: color-mix(in srgb, var(--danger) 13%, transparent);
    border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}
.adv-pill.is-info {
    color: color-mix(in srgb, var(--blue) 82%, var(--adv-ink));
    background: color-mix(in srgb, var(--blue) 13%, transparent);
    border-color: color-mix(in srgb, var(--blue) 30%, transparent);
}

/* Inline contextual help ("i" affordance + anchored popover) ----------------- */
.adv-hint {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--adv-border);
    border-radius: 50%;
    background: transparent;
    color: var(--adv-muted);
    font-size: 0.72rem;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.adv-hint:hover,
.adv-hint[aria-expanded="true"] {
    color: var(--adv-accent);
    border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent);
    background: color-mix(in srgb, var(--adv-accent) 10%, transparent);
}

.adv-pop {
    position: fixed;
    z-index: 9300;
    max-width: 300px;
    padding: 12px 14px;
    border: 1px solid var(--adv-border-strong);
    border-radius: var(--adv-r-md);
    background: var(--adv-surface);
    color: var(--adv-ink);
    box-shadow: var(--adv-shadow-2);
    font-size: 0.84rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.adv-pop.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.adv-pop strong { color: var(--adv-ink); }

/* Stat ---------------------------------------------------------------------- */
.adv-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--adv-2);
}
.adv-stat {
    display: grid;
    place-content: center;
    gap: 2px;
    min-height: 74px;
    padding: var(--adv-3) var(--adv-2);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    text-align: center;
}
.adv-stat > strong {
    font-size: 1.5rem;
    font-weight: 850;
    color: var(--adv-ink);
    line-height: 1;
}
.adv-stat > span {
    font-size: 0.74rem;
    font-weight: 750;
    color: var(--adv-muted);
}
.adv-stat[data-emphasis="1"] {
    border-color: color-mix(in srgb, var(--adv-accent) 34%, transparent);
    background: color-mix(in srgb, var(--adv-accent) 8%, var(--adv-inset));
}

/* Coaching empty state ------------------------------------------------------ */
.adv-empty {
    display: flex;
    flex-direction: column;
    gap: var(--adv-3);
    align-items: flex-start;
    padding: var(--adv-4);
    border: 1px dashed var(--adv-border-strong);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
}
.adv-empty-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--adv-accent) 12%, transparent);
    color: var(--adv-accent);
}
.adv-empty p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--adv-muted);
}
.adv-empty p strong { color: var(--adv-ink); }

/* =============================================================================
   HOME TAB (section-projects) — reformed layout
   ========================================================================== */
.adv-home {
    display: flex;
    flex-direction: column;
    gap: var(--adv-4);
}

/* 1 — Hero band ------------------------------------------------------------- */
.adv-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--adv-4);
    padding: var(--adv-5) var(--adv-6);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--adv-accent) 6%, var(--adv-surface)) 0%,
            var(--adv-surface) 62%);
    box-shadow: var(--adv-shadow-1);
}
.adv-hero-title {
    margin: 0 0 var(--adv-3);
    font-size: var(--adv-fs-hero);
    font-weight: 850;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--adv-ink);
}
.adv-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--adv-2);
}
.adv-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-2);
    flex-shrink: 0;
}
/* Section tour "?" launcher sits in the hero — align it with .adv-hint size. */
.adv-hero-actions .tour-launch { flex-shrink: 0; }

.genre-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 20px;
    border-radius: var(--adv-r-pill);
    background: color-mix(in srgb, var(--adv-accent) 14%, transparent);
    color: color-mix(in srgb, var(--adv-accent) 80%, var(--adv-ink));
    font-size: 0.72rem;
    font-weight: 750;
}
.adv-pill .genre-tag-chip { margin-left: 4px; }

/* 2 — Next-step focus card -------------------------------------------------- */
.adv-next {
    display: flex;
    align-items: center;
    gap: var(--adv-5);
    padding: var(--adv-5) var(--adv-6);
    border: 1px solid color-mix(in srgb, var(--adv-accent) 30%, var(--adv-border));
    border-radius: var(--adv-r-lg);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--adv-accent) 10%, var(--adv-surface)) 0%,
            var(--adv-surface) 70%);
    box-shadow: var(--adv-shadow-1);
}
.adv-next.is-ready {
    border-color: color-mix(in srgb, var(--green) 34%, var(--adv-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, var(--adv-surface)) 0%, var(--adv-surface) 70%);
}
.adv-next-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: color-mix(in srgb, var(--adv-accent) 16%, transparent);
    color: var(--adv-accent);
}
.adv-next.is-ready .adv-next-mark {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    color: color-mix(in srgb, var(--green) 78%, var(--adv-ink));
}
.adv-next-body { flex: 1; min-width: 0; }
.adv-next-lead {
    margin: 0 0 2px;
    font-size: var(--adv-fs-eyebrow);
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--adv-accent);
}
.adv-next.is-ready .adv-next-lead { color: color-mix(in srgb, var(--green) 76%, var(--adv-ink)); }
.adv-next-title {
    margin: 0;
    font-size: 1.24rem;
    font-weight: 820;
    color: var(--adv-ink);
    line-height: 1.2;
}
.adv-next-detail {
    margin: 4px 0 0;
    font-size: 0.86rem;
    color: var(--adv-muted);
    line-height: 1.45;
}
.adv-next-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--adv-2);
    flex-shrink: 0;
}
.adv-next-progress {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--adv-muted);
    letter-spacing: 0.02em;
}
.adv-next-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: var(--adv-r-pill);
    background: var(--adv-accent);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--adv-accent) 36%, transparent);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.adv-next-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.adv-next-cta:active { transform: translateY(0); }
.adv-next.is-ready .adv-next-cta {
    background: color-mix(in srgb, var(--green) 86%, #000);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--green) 34%, transparent);
}

/* 3+4 — Two-column region --------------------------------------------------- */
.adv-home-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
    gap: var(--adv-4);
    /* stretch (not start) so both columns share the taller column's height and
       the shorter column's last card can grow to fill — no dead space. */
    align-items: stretch;
}
.adv-home-main,
.adv-home-side {
    display: flex;
    flex-direction: column;
    gap: var(--adv-4);
    min-width: 0;
}
/* Whichever column is shorter, its last card expands to match the other,
   so the project zone below always meets a flush edge (no empty gap). */
.adv-home-main > .adv-pipeline-card,
.adv-home-side > .adv-world-card {
    flex: 1 1 auto;
}

/* 3 — Pipeline rail --------------------------------------------------------- */
.adv-pipeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.adv-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--adv-3);
    width: 100%;
    padding: var(--adv-3) var(--adv-2);
    border: none;
    border-radius: var(--adv-r-md);
    background: transparent;
    color: var(--adv-ink);
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease;
}
.adv-step:hover { background: var(--adv-inset); }
/* Connecting rail between nodes */
.adv-step::before {
    content: "";
    position: absolute;
    left: calc(var(--adv-2) + 16px);
    top: 50%;
    bottom: -50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--adv-border);
    z-index: 0;
}
.adv-step:last-child::before { display: none; }
.adv-step-node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--adv-border-strong);
    background: var(--adv-surface);
    color: var(--adv-muted);
    font-size: 0.82rem;
    font-weight: 850;
}
.adv-step-body { min-width: 0; }
.adv-step-body strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 780;
    color: var(--adv-ink);
}
.adv-step-body small {
    display: block;
    margin-top: 1px;
    font-size: 0.78rem;
    color: var(--adv-muted);
    line-height: 1.35;
}
.adv-step-state {
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adv-muted);
}
.adv-step.is-done .adv-step-node {
    border-color: color-mix(in srgb, var(--green) 50%, transparent);
    background: color-mix(in srgb, var(--green) 16%, transparent);
    color: color-mix(in srgb, var(--green) 80%, var(--adv-ink));
}
.adv-step.is-done .adv-step-state { color: color-mix(in srgb, var(--green) 74%, var(--adv-ink)); }
.adv-step.is-next {
    background: color-mix(in srgb, var(--adv-accent) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adv-accent) 26%, transparent);
}
.adv-step.is-next .adv-step-node {
    border-color: var(--adv-accent);
    color: var(--adv-accent);
}
.adv-step.is-next .adv-step-state { color: var(--adv-accent); }

/* 5 — World status card ----------------------------------------------------- */
.adv-world-body {
    display: flex;
    flex-direction: column;
    gap: var(--adv-2);
}
.adv-world-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--adv-3);
    padding: 9px 12px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    font-size: 0.85rem;
}
.adv-world-row > .adv-world-key {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adv-muted);
}
.adv-world-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--adv-2);
    margin-top: var(--adv-1);
}

/* 6 — Project & workspace zone (quiet, collapsible) ------------------------- */
.adv-project-zone {
    padding: 0;
    gap: 0;
    background: var(--adv-surface);
}
.adv-project-zone > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--adv-3);
    padding: var(--adv-4) var(--adv-5);
    cursor: pointer;
    list-style: none;
}
.adv-project-zone > summary::-webkit-details-marker { display: none; }
.adv-project-zone > summary .adv-chevron {
    transition: transform 0.2s ease;
    color: var(--adv-muted);
}
.adv-project-zone[open] > summary .adv-chevron { transform: rotate(180deg); }
.adv-project-grid {
    display: flex;
    flex-direction: column;
    gap: var(--adv-4);
    padding: 0 var(--adv-5) var(--adv-5);
}
.adv-project-workspaces { display: flex; flex-direction: column; gap: var(--adv-2); }
/* Neutralise the old .tool-panel chrome so the two inner panels sit quietly
   inside the zone (project form + workspace list keep their IDs/handlers). */
.adv-project-grid .tool-panel {
    margin: 0;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    box-shadow: none;
}

/* Compact workspace list — one tight row per project (renderProjects). Replaces
   the old tall .list-item cards; the whole row is the click target. */
.adv-ws-list {
    display: flex;
    flex-direction: column;
    gap: var(--adv-2);
}
.adv-ws-list.adv-ws-empty {
    color: var(--adv-muted);
    font-size: 0.85rem;
}
.adv-ws {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--adv-3);
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-surface);
    color: var(--adv-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
}
.adv-ws:hover {
    border-color: color-mix(in srgb, var(--adv-accent) 40%, var(--adv-border));
    background: var(--adv-inset);
}
.adv-ws.is-selected {
    border-color: color-mix(in srgb, var(--adv-accent) 46%, transparent);
    background: color-mix(in srgb, var(--adv-accent) 8%, var(--adv-surface));
}
.adv-ws.is-locked { cursor: not-allowed; }
.adv-ws.is-locked .adv-ws-title { color: var(--adv-muted); }
.adv-ws-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.adv-ws-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--adv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adv-ws-meta {
    font-size: 0.75rem;
    color: var(--adv-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adv-ws > .adv-pill { flex-shrink: 0; }

/* =============================================================================
   CAST TAB (section-bible) — reformed rail + segmented-tab editor + forge
   ========================================================================== */
.adv-cast-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--adv-4);
    margin-bottom: var(--adv-4);
}
.adv-cast-head-title {
    display: flex;
    align-items: center;
    gap: var(--adv-2);
    margin: 0 0 4px;
    font-size: var(--adv-fs-hero);
    font-weight: 850;
    letter-spacing: -0.01em;
    color: var(--adv-ink);
}
.adv-cast-head-purpose {
    margin: 0 0 var(--adv-3);
    font-size: 0.9rem;
    color: var(--adv-muted);
}
.adv-cast-head-summary { display: flex; flex-wrap: wrap; gap: var(--adv-2); }
.adv-cast-summary-chip { cursor: pointer; font-family: inherit; }
.adv-cast-head-actions { display: inline-flex; align-items: center; gap: var(--adv-2); flex-shrink: 0; }
.adv-cast-head .tour-launch { flex-shrink: 0; }

/* Two-pane workspace ------------------------------------------------------- */
.adv-cast {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--adv-4);
    align-items: start;
}

/* Rail --------------------------------------------------------------------- */
.adv-cast-rail {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: var(--adv-3);
    max-height: calc(100vh - 116px);
    padding: var(--adv-4);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-1);
    overflow: hidden;
}
.adv-cast-rail-actions { display: flex; gap: var(--adv-2); }
.adv-cast-rail-actions > button { flex: 1; }
.adv-cast-search input {
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    color: var(--adv-ink);
    font-size: 0.86rem;
}
.adv-cast-search input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-accent) 16%, transparent);
}
.adv-cast-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.adv-chip {
    height: 26px;
    padding: 0 11px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-pill);
    background: transparent;
    color: var(--adv-muted);
    font-size: 0.74rem;
    font-weight: 750;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.adv-chip:hover { color: var(--adv-ink); border-color: color-mix(in srgb, var(--adv-ink) 26%, transparent); }
.adv-chip.is-active,
.adv-chip.active {
    color: var(--adv-accent);
    border-color: color-mix(in srgb, var(--adv-accent) 50%, transparent);
    background: color-mix(in srgb, var(--adv-accent) 10%, transparent);
}
.adv-cast-list {
    display: flex;
    flex-direction: column;
    gap: var(--adv-1);
    overflow-y: auto;
    margin: 0 calc(var(--adv-2) * -1);
    padding: 2px var(--adv-2);
}

/* Tier avatar (used in rail, editor header, drafts) ------------------------ */
.adv-avatar {
    --h: var(--blue);
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--h) 55%, transparent);
    background: color-mix(in srgb, var(--h) 18%, var(--adv-surface));
    color: color-mix(in srgb, var(--h) 82%, var(--adv-ink));
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}
.adv-avatar[data-tier="main"] { --h: var(--accent); }
.adv-avatar[data-tier="secondary"] { --h: var(--blue); }
.adv-avatar[data-tier="recurring_minor"] { --h: #8b5cf6; }
.adv-avatar[data-tier="one_scene_extra"] { --h: var(--amber); }
.adv-avatar[data-tier="crowd_type"] { --h: var(--muted); }
.adv-avatar.lg { width: 46px; height: 46px; font-size: 0.95rem; }

/* Cast card (rail item) ---------------------------------------------------- */
.adv-cast-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--adv-3);
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--adv-r-md);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.adv-cast-card:hover { background: var(--adv-inset); border-color: var(--adv-border); }
.adv-cast-card.is-selected {
    border-color: color-mix(in srgb, var(--adv-accent) 46%, transparent);
    background: color-mix(in srgb, var(--adv-accent) 8%, transparent);
}
.adv-cast-card-body { min-width: 0; }
.adv-cast-card-name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 780;
    color: var(--adv-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-cast-card-meta {
    margin: 1px 0 0;
    font-size: 0.74rem;
    color: var(--adv-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adv-cast-meter {
    width: 42px; height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--adv-ink) 12%, transparent);
    overflow: hidden;
}
.adv-cast-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); }

/* Rail item row + inline delete (archived) */
.adv-cast-card-row { display: flex; align-items: center; gap: 4px; }
.adv-cast-card-row .adv-cast-card { flex: 1; }
.adv-cast-card.is-archived { opacity: 0.62; }
.adv-cast-card.is-archived .adv-avatar { filter: grayscale(0.6); }
.adv-cast-card-del {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border: 1px solid transparent; border-radius: var(--adv-r-sm);
    background: transparent; color: var(--adv-muted); cursor: pointer;
}
.adv-cast-card-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* Rail sub-sections (drafts / archived) ------------------------------------ */
.adv-cast-sub { border-top: 1px dashed var(--adv-border); padding-top: var(--adv-3); }
.adv-cast-sub > summary {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; list-style: none;
    color: var(--adv-muted); font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.adv-cast-sub > summary::-webkit-details-marker { display: none; }
.adv-cast-sub-heading {
    display: flex; align-items: center; gap: 8px;
    color: var(--adv-muted); font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.adv-cast-count {
    min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 20%, transparent);
    color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink));
    font-size: 0.7rem; font-weight: 800; text-align: center;
}
.adv-cast-sub-hint { margin: 6px 0; font-size: 0.72rem; line-height: 1.4; color: var(--adv-muted); }
.adv-cast-draft {
    display: grid; gap: 8px;
    border: 1px dashed color-mix(in srgb, var(--amber) 45%, var(--adv-border));
    border-radius: var(--adv-r-md);
    background: color-mix(in srgb, var(--amber) 6%, transparent);
    padding: 10px 12px;
}
.adv-cast-draft-head { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.adv-cast-draft-name { margin: 0; font-size: 0.9rem; font-weight: 780; color: var(--adv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-cast-draft-meta { margin: 1px 0 0; font-size: 0.72rem; color: var(--adv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-cast-draft-badge {
    align-self: start; padding: 2px 7px; border-radius: 999px;
    background: var(--amber); color: #fff; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.06em;
}
.adv-cast-draft-summary { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--adv-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adv-cast-draft-actions, .adv-cast-sub .adv-cast-draft-actions { display: flex; gap: 6px; }
.adv-cast-draft-actions > button { flex: 1; }

.adv-cast-empty-rail { padding: 16px 12px; text-align: center; color: var(--adv-muted); font-size: 0.84rem; border: 1px dashed var(--adv-border); border-radius: var(--adv-r-md); }

/* Editor ------------------------------------------------------------------- */
.adv-cast-editor { min-width: 0; }
.adv-cast-editor-form { display: flex; flex-direction: column; gap: var(--adv-4); padding: var(--adv-5); }
.adv-cast-editor-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--adv-3);
    padding-bottom: var(--adv-4); border-bottom: 1px solid var(--adv-border);
}
.adv-cast-editor-id { display: flex; align-items: center; gap: var(--adv-3); min-width: 0; }
.adv-cast-editor-id h3 { margin: 0; font-size: 1.1rem; font-weight: 820; color: var(--adv-ink); }
.adv-cast-editor-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* Living-World strip */
.adv-cast-world {
    display: flex; align-items: center; justify-content: space-between; gap: var(--adv-3);
    padding: 10px 14px; border-radius: var(--adv-r-md);
    border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--adv-border));
    background: color-mix(in srgb, var(--blue) 7%, transparent);
    font-size: 0.84rem;
}
.adv-cast-world-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adv-cast-world-main .adv-eyebrow { margin: 0; }
.adv-cast-world-text { color: var(--adv-muted); }

/* Segmented tabs */
.adv-cast-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--adv-border); flex-wrap: wrap; }
.adv-cast-tab {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; margin-bottom: -1px;
    border: none; border-bottom: 2px solid transparent; background: none;
    color: var(--adv-muted); font-size: 0.86rem; font-weight: 780; cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}
.adv-cast-tab:hover { color: var(--adv-ink); }
.adv-cast-tab.is-active { color: var(--adv-accent); border-bottom-color: var(--adv-accent); }
.adv-cast-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--green) 80%, var(--adv-ink)); opacity: 0; transition: opacity 0.14s ease; }
.adv-cast-tab.has-content .adv-cast-tab-dot { opacity: 1; }
.adv-cast-tabpanel { display: none; padding-top: var(--adv-4); }
.adv-cast-tabpanel.is-active { display: flex; flex-direction: column; gap: 14px; }

/* Design-lock / info callout */
.adv-cast-callout {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px;
    border-radius: var(--adv-r-md);
    border: 1px solid color-mix(in srgb, var(--adv-accent) 26%, var(--adv-border));
    background: color-mix(in srgb, var(--adv-accent) 7%, transparent);
    font-size: 0.82rem; line-height: 1.5; color: var(--adv-muted);
}
.adv-cast-callout strong { color: var(--adv-ink); }
.adv-cast-callout .adv-cast-callout-icon { color: var(--adv-accent); flex-shrink: 0; margin-top: 1px; }
.adv-field-note { margin: 4px 0 0; font-size: 0.75rem; color: var(--adv-muted); }

/* Editor footer (Save) */
.adv-cast-footer {
    position: sticky; bottom: 0;
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: var(--adv-4); margin-top: auto;
    border-top: 1px solid var(--adv-border);
    background: linear-gradient(0deg, var(--adv-surface) 70%, transparent);
}

/* Scoped form field styling (editor + forge + project form) ---------------- */
.adv-cast-editor-form label,
.adv-forge-body label,
.adv-project-form label { display: grid; gap: 5px; }
.adv-cast-editor-form label > span,
.adv-forge-body label > span,
.adv-project-form label > span { font-size: 0.78rem; font-weight: 720; color: var(--adv-muted); }
.adv-cast-editor-form label > span small,
.adv-forge-body label > span small { font-weight: 600; color: color-mix(in srgb, var(--adv-muted) 80%, transparent); }
.adv-cast-editor-form input,
.adv-cast-editor-form select,
.adv-cast-editor-form textarea,
.adv-forge-body input,
.adv-forge-body select,
.adv-forge-body textarea,
.adv-project-form input,
.adv-project-form textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-sm);
    background: var(--adv-inset);
    color: var(--adv-ink);
    font-size: 0.86rem;
    font-family: inherit;
}
/* min-height replaces the drag grip these used to lean on — a real default
   size, then the textarea scrolls internally. See the rule at the top of app.css. */
.adv-cast-editor-form textarea,
.adv-forge-body textarea,
.adv-project-form textarea { min-height: 88px; resize: none; line-height: 1.5; }
.adv-cast-editor-form input:focus,
.adv-cast-editor-form select:focus,
.adv-cast-editor-form textarea:focus,
.adv-forge-body input:focus,
.adv-forge-body select:focus,
.adv-forge-body textarea:focus,
.adv-project-form input:focus,
.adv-project-form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-accent) 15%, transparent);
}
.adv-cast-editor-form input.canon-locked,
.adv-cast-editor-form input[readonly] { background: color-mix(in srgb, var(--adv-inset) 80%, var(--adv-muted) 6%); color: var(--adv-muted); }
.adv-cast-editor-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.adv-cast-editor-form .cast-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.adv-cast-editor-form .trait-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.adv-cast-editor-form .span-2 { grid-column: span 2; }
.adv-cast-editor-form .cast-detail-grid .span-2 { grid-column: span 2; }

/* Archived banner */
.adv-cast-archived-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: var(--adv-r-md);
    border: 1px solid color-mix(in srgb, var(--danger) 34%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    font-size: 0.84rem; line-height: 1.5; color: var(--adv-ink);
}
.adv-cast-archived-banner-text { flex: 1; min-width: 0; }

/* Forge drawer ------------------------------------------------------------- */
.adv-forge-drawer { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; pointer-events: none; }
.adv-forge-drawer.is-open { pointer-events: auto; }
.adv-forge-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 15, 0.5); opacity: 0; transition: opacity 0.2s ease; cursor: pointer; }
.adv-forge-drawer.is-open .adv-forge-backdrop { opacity: 1; }
.adv-forge-panel {
    position: relative; width: min(540px, 96vw); height: 100%;
    display: flex; flex-direction: column;
    background: var(--adv-surface); border-left: 1px solid var(--adv-border);
    box-shadow: -22px 0 60px rgba(2, 6, 15, 0.4);
    transform: translateX(110%); transition: transform 0.24s ease;
}
.adv-forge-drawer.is-open .adv-forge-panel { transform: translateX(0); }
.adv-forge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--adv-border); }
.adv-forge-head h3 { margin: 0; font-size: 1.05rem; font-weight: 820; color: var(--adv-ink); }
.adv-forge-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: var(--adv-4); }
.adv-forge-body .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.adv-forge-body .span-2 { grid-column: span 2; }
.adv-forge-hint { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--adv-muted); }
.adv-forge-hint strong { color: var(--adv-ink); }
.adv-forge-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adv-forge-actions .adv-forge-more { margin-left: auto; display: flex; gap: 4px; }
.adv-forge-drafts { display: grid; gap: 12px; }
.adv-forge-draft { display: grid; gap: 10px; border: 1px solid var(--adv-border); border-radius: var(--adv-r-md); background: var(--adv-inset); padding: 14px; }
.adv-forge-draft-id { display: flex; align-items: center; gap: 12px; }
.adv-forge-draft-id h4 { margin: 0 0 4px; font-size: 1rem; color: var(--adv-ink); }
.adv-forge-draft-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-forge-draft p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--adv-muted); }
.adv-forge-draft-actions { display: flex; gap: 8px; }

/* Project zone — reformed Create-project form ------------------------------ */
.adv-project-create[hidden] { display: none; }
.adv-project-create > summary { list-style: none; width: max-content; }
.adv-project-create > summary::-webkit-details-marker { display: none; }
.adv-project-reveal-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1px dashed var(--adv-border-strong); border-radius: var(--adv-r-md);
    background: var(--adv-inset); color: var(--adv-ink); font-weight: 750; font-size: 0.86rem; cursor: pointer;
}
.adv-project-reveal-btn:hover { border-color: color-mix(in srgb, var(--adv-accent) 45%, transparent); color: var(--adv-accent); }
.adv-project-form {
    display: flex; flex-direction: column; gap: var(--adv-3);
    margin-top: var(--adv-3); padding: var(--adv-4);
    border: 1px solid var(--adv-border); border-radius: var(--adv-r-md); background: var(--adv-inset);
}
.adv-project-form h4 { margin: 0; font-size: 0.98rem; font-weight: 820; color: var(--adv-ink); }
.adv-project-form .form-more { border: none; padding: 0; background: none; }
.adv-project-form .form-more > summary { cursor: pointer; font-size: 0.8rem; color: var(--adv-muted); font-weight: 700; }
.adv-project-form button[type="submit"] { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .adv-home-cols { grid-template-columns: minmax(0, 1fr); }
    .adv-cast { grid-template-columns: minmax(0, 1fr); }
    .adv-cast-rail { position: static; max-height: none; }
}
@media (max-width: 640px) {
    .adv-hero,
    .adv-next { flex-direction: column; align-items: stretch; }
    .adv-next-side { align-items: stretch; }
    .adv-next-cta { justify-content: center; }
    .adv-hero-actions { align-self: flex-end; }
    .adv-cast-editor-form .cast-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .adv-cast-editor-form .form-grid,
    .adv-forge-body .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Respect reduced-motion for the popover/CTA micro-interactions. */
@media (prefers-reduced-motion: reduce) {
    .adv-pop,
    .adv-next-cta,
    .adv-forge-panel { transition: none; }
}

/* =============================================================================
   WORLDWEAVE TAB (section-worldweave) — stage navigator + full reskin
   -----------------------------------------------------------------------------
   The reform wraps the 7 tools into a stage shell (nav + one active stage) and
   restyles the existing .ne-* / .bible-* surfaces to the design system in place
   (no JS render rewrite — the classes keep their ids/hooks, only their look
   changes). Everything below is scoped to #section-worldweave so it can't leak.
   ========================================================================== */
.adv-ww-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--adv-4);
    margin-bottom: var(--adv-3);
}
.adv-ww-head-title {
    display: flex; align-items: center; gap: var(--adv-2);
    margin: 0; font-size: var(--adv-fs-hero); font-weight: 850;
    letter-spacing: -0.01em; color: var(--adv-ink);
}
.adv-ww-head-actions { display: inline-flex; align-items: center; gap: var(--adv-2); flex-shrink: 0; }

/* Reformed: world status now surfaces as bottom toasts (on change) + the topbar
   world chip + the Home World-status card, so the inline strip is HIDDEN to keep
   the Worldweave layout clean. Chips stay in the DOM for worldweave.js. */
/* Mission-control strip — resurrected (was permanently display:none while
   still being repainted; the tour even described UI that couldn't appear). */
.adv-ww-statusbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.adv-ww-statusbar .ne-anchor-chip[role="button"],
.adv-ww-statusbar .ne-status-chip[role="button"] { cursor: pointer; }

.ne-world-present {
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.ne-sync-btn { font-size: 0.8rem; }

/* Standalone stories: Scenes + Groups lead; the NE stages group under the
   Living World divider (pure flex reorder — nothing removed). */
.adv-ww-nav { display: flex; flex-direction: column; }
.adv-ww-nav.is-standalone [data-ww-stage="scenes"] { order: 1; }
.adv-ww-nav.is-standalone [data-ww-stage="groups"] { order: 2; }
.adv-ww-nav.is-standalone [data-ww-divider] { order: 3; }
.adv-ww-nav.is-standalone [data-ww-stage="anchor"] { order: 4; }
.adv-ww-nav.is-standalone [data-ww-stage="weave"] { order: 5; }
.adv-ww-nav.is-standalone [data-ww-stage="citizens"] { order: 6; }
.adv-ww-nav.is-standalone [data-ww-stage="writ"] { order: 7; }

.adv-ww-nav-divider {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 6px;
    border-top: 1px dashed var(--line);
    margin-top: 6px;
}

.adv-ww-nav-divider strong {
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.adv-ww-nav-divider small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}
/* Hide the bar until at least one chip is un-hidden (chips exist but start
   [hidden], so :empty won't catch it — check for any visible child). */
.adv-ww-statusbar:not(:has(> :not([hidden]))) { display: none; }
.adv-ww-head-purpose { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--adv-muted); max-width: 74ch; }
.adv-ww-statusbar .ne-anchor-chip,
.adv-ww-statusbar .ne-status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 11px; border-radius: var(--adv-r-pill);
    border: 1px solid color-mix(in srgb, var(--adv-ink) 12%, transparent);
    background: color-mix(in srgb, var(--adv-ink) 5%, transparent);
    color: var(--adv-ink); font-size: var(--adv-fs-label); font-weight: 700;
}
.adv-ww-statusbar .ne-status-chip[data-tone="good"] { color: color-mix(in srgb, var(--green) 82%, var(--adv-ink)); background: color-mix(in srgb, var(--green) 13%, transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.adv-ww-statusbar .ne-status-chip[data-tone="warn"] { color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink)); background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.adv-ww-statusbar .ne-status-chip[data-tone="bad"] { color: color-mix(in srgb, var(--danger) 84%, var(--adv-ink)); background: color-mix(in srgb, var(--danger) 13%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* Two-pane: stage nav + active stage */
.adv-ww { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--adv-4); align-items: start; }
.adv-ww-nav {
    position: sticky; top: 88px;
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--adv-3); border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg); background: var(--adv-surface); box-shadow: var(--adv-shadow-1);
}
.adv-ww-stage {
    display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--adv-r-md);
    background: transparent; color: var(--adv-ink); text-align: left; cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.adv-ww-stage:hover { background: var(--adv-inset); }
.adv-ww-stage.is-active { background: color-mix(in srgb, var(--adv-accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adv-accent) 30%, transparent); }
.adv-ww-stage-num {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--adv-border-strong); background: var(--adv-surface);
    color: var(--adv-muted); font-size: 0.78rem; font-weight: 850;
}
.adv-ww-stage.is-active .adv-ww-stage-num { border-color: var(--adv-accent); color: var(--adv-accent); }
.adv-ww-stage.is-done .adv-ww-stage-num { border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 16%, transparent); color: color-mix(in srgb, var(--green) 80%, var(--adv-ink)); }
.adv-ww-stage-label { min-width: 0; }
.adv-ww-stage-label strong { display: block; font-size: 0.9rem; font-weight: 780; color: var(--adv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-ww-stage-label small { display: block; font-size: 0.72rem; color: var(--adv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-ww-stage.is-active .adv-ww-stage-label strong { color: var(--adv-accent); }
.adv-ww-stage-badge { font-size: 0.62rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 20%, transparent); color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink)); display: none; }
.adv-ww-stage.is-needed .adv-ww-stage-badge { display: inline-block; }

.adv-ww-main { min-width: 0; display: flex; flex-direction: column; gap: var(--adv-4); }
.adv-ww-stage-panel { display: none; flex-direction: column; gap: var(--adv-4); }
.adv-ww-stage-panel.is-active { display: flex; }

/* ---- Reskin existing .ne-* surfaces (scoped) ---------------------------- */
#section-worldweave .ne-panel,
#section-worldweave .tool-panel.ne-panel {
    margin: 0; padding: var(--adv-5);
    border: 1px solid var(--adv-border); border-radius: var(--adv-r-lg);
    background: var(--adv-surface); box-shadow: var(--adv-shadow-1);
}
#section-worldweave .ne-worldweave-grid { display: flex; flex-direction: column; gap: var(--adv-4); }
#section-worldweave .ne-panel h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--adv-fs-title); font-weight: 820; color: var(--adv-ink); }
#section-worldweave .ne-step {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: color-mix(in srgb, var(--adv-accent) 16%, transparent); color: var(--adv-accent);
    font-size: 0.72rem; font-weight: 850;
}
#section-worldweave .ne-hint { margin: 0 0 var(--adv-4); font-size: 0.85rem; line-height: 1.55; color: var(--adv-muted); }
#section-worldweave .ne-hint strong { color: var(--adv-ink); }
#section-worldweave .ne-field { display: grid; gap: 5px; margin-bottom: var(--adv-3); }
#section-worldweave .ne-field > span { font-size: 0.78rem; font-weight: 720; color: var(--adv-muted); }
#section-worldweave .ne-field input,
#section-worldweave .ne-field select,
#section-worldweave .ne-field textarea,
#section-worldweave .ne-fact-form input,
#section-worldweave .ne-fact-form select,
#section-worldweave .ne-fact-form textarea {
    width: 100%; padding: 8px 11px; border: 1px solid var(--adv-border); border-radius: var(--adv-r-sm);
    background: var(--adv-inset); color: var(--adv-ink); font-size: 0.86rem; font-family: inherit;
}
#section-worldweave .ne-field textarea { min-height: 88px; resize: none; line-height: 1.5; }
#section-worldweave .ne-field input:focus,
#section-worldweave .ne-field select:focus,
#section-worldweave .ne-field textarea:focus { outline: none; border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-accent) 15%, transparent); }
#section-worldweave .ne-field-note { font-size: 0.74rem; color: var(--adv-muted); }
#section-worldweave .ne-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--adv-2); }
#section-worldweave .ne-entries-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--adv-3); flex-wrap: wrap; }

/* Status/proposal chips → pills */
#section-worldweave .ne-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--adv-ink) 12%, transparent);
    background: color-mix(in srgb, var(--adv-ink) 6%, transparent); color: var(--adv-ink);
}
#section-worldweave .ne-chip--approved { color: color-mix(in srgb, var(--green) 80%, var(--adv-ink)); background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
#section-worldweave .ne-chip--pending_review,
#section-worldweave .ne-chip--under_review,
#section-worldweave .ne-chip--changes_requested { color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink)); background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
#section-worldweave .ne-chip--declined_final { color: color-mix(in srgb, var(--danger) 84%, var(--adv-ink)); background: color-mix(in srgb, var(--danger) 13%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* Story-fact entries → adv cards with tone left-border */
#section-worldweave .ne-entries { display: flex; flex-direction: column; gap: var(--adv-2); }
#section-worldweave .ne-entry {
    padding: 11px 13px; border: 1px solid var(--adv-border); border-left-width: 3px;
    border-radius: var(--adv-r-md); background: var(--adv-inset);
}
#section-worldweave .ne-entry--accepted { border-left-color: color-mix(in srgb, var(--green) 65%, transparent); }
#section-worldweave .ne-entry--draft { border-left-color: color-mix(in srgb, var(--amber) 65%, transparent); }
#section-worldweave .ne-entry--rejected { opacity: 0.6; }
#section-worldweave .ne-entry--legacy { border-style: dashed; opacity: 0.9; }
#section-worldweave .ne-empty {
    margin: 0; padding: var(--adv-4); text-align: left; font-size: 0.85rem; color: var(--adv-muted);
    border: 1px dashed var(--adv-border-strong); border-radius: var(--adv-r-md); background: var(--adv-inset);
}
#section-worldweave .ne-fact-add,
#section-worldweave .ne-org-browser { border: 1px dashed var(--adv-border-strong); border-radius: var(--adv-r-md); background: var(--adv-inset); padding: 10px 12px; }
#section-worldweave .ne-fact-add > summary,
#section-worldweave .ne-org-browser > summary { cursor: pointer; font-size: 0.82rem; font-weight: 750; color: var(--adv-ink); }

/* Context summary / world browser / warden report */
#section-worldweave .ne-context-summary,
#section-worldweave .ne-warden-report {
    margin-top: var(--adv-3); padding: var(--adv-3); border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md); background: var(--adv-inset);
}
#section-worldweave .ne-anchor-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--adv-border); background: var(--adv-surface); color: var(--adv-ink); font-size: 0.8rem; font-weight: 700; }
#section-worldweave .ne-warden-report[data-verdict="pass"] strong { color: color-mix(in srgb, var(--green) 80%, var(--adv-ink)); }
#section-worldweave .ne-warden-report[data-verdict="warnings"] strong { color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink)); }
#section-worldweave .ne-warden-report[data-verdict="blocked"] strong { color: color-mix(in srgb, var(--danger) 84%, var(--adv-ink)); }
#section-worldweave .ne-browser-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--adv-surface); border: 1px solid var(--adv-border); color: var(--adv-ink); font-size: 0.76rem; font-weight: 700; }

/* Citizens: cast rows + register + borrowables */
#section-worldweave .ne-cast-list,
#section-worldweave .ne-borrowables { display: flex; flex-direction: column; gap: var(--adv-2); }
#section-worldweave .ne-cast-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--adv-3);
    padding: 9px 13px; border: 1px solid var(--adv-border); border-radius: var(--adv-r-md); background: var(--adv-inset);
}
#section-worldweave .ne-cast-row--borrow { background: color-mix(in srgb, var(--blue) 6%, var(--adv-inset)); }
#section-worldweave .ne-register-form,
#section-worldweave .ne-writ-status {
    margin-top: var(--adv-3); padding: var(--adv-4); border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md); background: var(--adv-inset);
}
#section-worldweave .ne-register-form__title { font-weight: 800; color: var(--adv-ink); margin-bottom: var(--adv-2); }
#section-worldweave .ne-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: var(--adv-muted); margin: 6px 0; }
#section-worldweave .ne-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--adv-accent); }
#section-worldweave .ne-writ-period { display: grid; grid-template-columns: 1fr 1fr; gap: var(--adv-3); }

/* Writ "needed" highlight */
#section-worldweave #ne-writ-panel.ne-writ-needed { border-color: color-mix(in srgb, var(--amber) 45%, var(--adv-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent), var(--adv-shadow-1); }
#section-worldweave .ne-writ-gate-note { padding: 9px 12px; border-radius: var(--adv-r-md); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink)); font-size: 0.84rem; }

/* Scenes/Orgs bible-shell → adv look (rails reused from Cast card styles) */
#section-worldweave .bible-shell { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--adv-4); align-items: start; margin-top: var(--adv-3); }
#section-worldweave .bible-rail {
    display: flex; flex-direction: column; gap: var(--adv-3);
    padding: var(--adv-4); border: 1px solid var(--adv-border); border-radius: var(--adv-r-lg);
    background: var(--adv-surface); box-shadow: var(--adv-shadow-1);
}
#section-worldweave .bible-rail-toolbar { display: flex; flex-direction: column; gap: var(--adv-2); }
#section-worldweave .bible-rail-actions { display: flex; gap: var(--adv-2); }
#section-worldweave .bible-rail-actions > button { flex: 1; }
#section-worldweave .bible-search input { width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid var(--adv-border); border-radius: var(--adv-r-md); background: var(--adv-inset); color: var(--adv-ink); font-size: 0.86rem; }
#section-worldweave .bible-rail-list { display: flex; flex-direction: column; gap: var(--adv-1); }
#section-worldweave .bible-rail-item {
    display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: var(--adv-3);
    width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--adv-r-md);
    background: transparent; color: var(--adv-ink); text-align: left; cursor: pointer;
}
#section-worldweave .bible-rail-item:hover { background: var(--adv-inset); border-color: var(--adv-border); }
#section-worldweave .bible-rail-item.selected { border-color: color-mix(in srgb, var(--adv-accent) 46%, transparent); background: color-mix(in srgb, var(--adv-accent) 8%, transparent); }
#section-worldweave .bible-rail-item-name { margin: 0; font-size: 0.9rem; font-weight: 780; color: var(--adv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#section-worldweave .bible-rail-item-meta { margin: 1px 0 0; font-size: 0.73rem; color: var(--adv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#section-worldweave .scene-icon,
#section-worldweave .org-swatch,
#section-worldweave .character-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 16%, var(--adv-surface)); color: color-mix(in srgb, var(--blue) 80%, var(--adv-ink)); font-size: 0.8rem; font-weight: 850; flex-shrink: 0; }
#section-worldweave .bible-editor { min-width: 0; }
#section-worldweave .bible-editor-empty { display: flex; flex-direction: column; gap: var(--adv-3); align-items: flex-start; padding: var(--adv-6); border: 1px dashed var(--adv-border-strong); border-radius: var(--adv-r-lg); background: var(--adv-inset); color: var(--adv-muted); }
#section-worldweave .bible-editor-empty h4 { margin: 0; color: var(--adv-ink); font-size: 1.05rem; }
#section-worldweave .bible-editor-empty p { margin: 0; line-height: 1.5; }
#section-worldweave .bible-editor-form { display: flex; flex-direction: column; gap: var(--adv-3); padding: var(--adv-5); border: 1px solid var(--adv-border); border-radius: var(--adv-r-lg); background: var(--adv-surface); box-shadow: var(--adv-shadow-1); }
#section-worldweave .bible-editor-header { display: flex; align-items: center; justify-content: space-between; gap: var(--adv-3); padding-bottom: var(--adv-3); border-bottom: 1px solid var(--adv-border); }
#section-worldweave .bible-editor-header-main { display: flex; align-items: center; gap: var(--adv-3); min-width: 0; }
#section-worldweave .bible-editor-header h3 { margin: 0; font-size: 1.05rem; font-weight: 820; color: var(--adv-ink); }
#section-worldweave .bible-accordion { border: 1px solid var(--adv-border); border-radius: var(--adv-r-md); background: var(--adv-inset); overflow: hidden; }
#section-worldweave .bible-accordion > summary { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; color: var(--adv-ink); font-weight: 750; }
#section-worldweave .bible-accordion > summary::-webkit-details-marker { display: none; }
#section-worldweave .bible-accordion-title { font-size: 0.92rem; }
#section-worldweave .bible-accordion-meta { margin-left: auto; font-size: 0.75rem; color: var(--adv-muted); }
#section-worldweave .bible-accordion-body { padding: 4px 13px 14px; border-top: 1px solid var(--adv-border); display: grid; gap: 12px; }
#section-worldweave .bible-accordion-body label { display: grid; gap: 5px; }
#section-worldweave .bible-accordion-body label > span { font-size: 0.78rem; font-weight: 720; color: var(--adv-muted); }
#section-worldweave .bible-accordion-body input,
#section-worldweave .bible-accordion-body select,
#section-worldweave .bible-accordion-body textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--adv-border); border-radius: var(--adv-r-sm); background: var(--adv-surface); color: var(--adv-ink); font-size: 0.86rem; font-family: inherit; }
#section-worldweave .bible-accordion-body input:focus,
#section-worldweave .bible-accordion-body select:focus,
#section-worldweave .bible-accordion-body textarea:focus { outline: none; border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-accent) 15%, transparent); }
#section-worldweave .bible-accordion-body .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
#section-worldweave .bible-accordion-body .trait-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
#section-worldweave .bible-accordion-body .span-2 { grid-column: span 2; }
#section-worldweave .bible-editor-footer { display: flex; justify-content: flex-end; padding-top: var(--adv-2); }

@media (max-width: 1000px) {
    .adv-ww { grid-template-columns: minmax(0, 1fr); }
    .adv-ww-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .adv-ww-stage { width: auto; flex: 1 1 140px; }
    #section-worldweave .bible-shell { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   UNIVERSAL TOAST NOTIFICATIONS
   -----------------------------------------------------------------------------
   Every studio message (success / warning / error / info) surfaces here as a
   floating toast that stacks bottom-center. position:fixed → it NEVER affects
   page layout. Created + driven by studio.js pushToast(). Works in both themes.
   ========================================================================== */
#adv-toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 9600;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: max-content;
    max-width: min(560px, calc(100vw - 28px));
    pointer-events: none;
}
.adv-toast {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-radius: var(--adv-r-md);
    border: 1px solid var(--adv-border-strong);
    background: color-mix(in srgb, var(--adv-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--adv-shadow-2);
    color: var(--adv-ink);
    font-size: 0.88rem;
    line-height: 1.4;
    pointer-events: auto;
    cursor: pointer;
    animation: advToastIn 0.28s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.adv-toast.is-leaving { animation: advToastOut 0.3s ease forwards; }
.adv-toast-ico {
    display: grid; place-items: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%; font-size: 0.78rem; font-weight: 900; font-style: normal;
    background: color-mix(in srgb, var(--adv-muted) 20%, transparent);
    color: var(--adv-muted);
}
.adv-toast-msg { flex: 1; min-width: 0; }
.adv-toast.is-success { border-color: color-mix(in srgb, var(--green) 46%, transparent); }
.adv-toast.is-success .adv-toast-ico { background: color-mix(in srgb, var(--green) 20%, transparent); color: color-mix(in srgb, var(--green) 82%, var(--adv-ink)); }
.adv-toast.is-warn { border-color: color-mix(in srgb, var(--amber) 46%, transparent); }
.adv-toast.is-warn .adv-toast-ico { background: color-mix(in srgb, var(--amber) 22%, transparent); color: color-mix(in srgb, var(--amber) 82%, var(--adv-ink)); }
.adv-toast.is-error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.adv-toast.is-error .adv-toast-ico { background: color-mix(in srgb, var(--danger) 20%, transparent); color: color-mix(in srgb, var(--danger) 84%, var(--adv-ink)); }
.adv-toast.is-info { border-color: color-mix(in srgb, var(--blue) 44%, transparent); }
.adv-toast.is-info .adv-toast-ico { background: color-mix(in srgb, var(--blue) 20%, transparent); color: color-mix(in srgb, var(--blue) 82%, var(--adv-ink)); }
@keyframes advToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes advToastOut { to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
    .adv-toast { animation: none; }
    .adv-toast.is-leaving { animation: none; opacity: 0; }
}

/* Respect reduced-motion for the popover/CTA micro-interactions. */
@media (prefers-reduced-motion: reduce) {
    .adv-pop,
    .adv-next-cta { transition: none; }
}

/* =============================================================================
   PANEL STUDIO (section-panelstudio) — reformed compose card + result card
   -----------------------------------------------------------------------------
   Locked direction: grouped single compose card (Setting · The moment · Output),
   a PERSISTENT check→lock→draw pipeline in the result zone (advanced only), and
   calm engine-room disclosures below. CSS-in-place reskin — the .manga-*/#panel-*
   ids + tour anchors are untouched; the pipeline step states (.is-active/.is-done)
   still come from ui-modes.css, styled with themed base vars (theme-safe). All
   rules are scoped under #section-panelstudio so Simple mode is unaffected.
   ========================================================================== */

/* Visually-hidden label (no existing utility in this codebase). */
.sr-only-label {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* Section head (mirrors .adv-cast-head / .adv-ww-head; NO inner <h3>). */
.adv-panelstudio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--adv-4);
    margin-bottom: var(--adv-4);
    flex-wrap: wrap;
}
.adv-panelstudio-head-purpose {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--adv-muted);
    max-width: 74ch;
}
.adv-panelstudio-head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Layout: keep the app.css .manga-creator-layout grid; just align the columns. */
#section-panelstudio .manga-creator-layout { align-items: start; gap: var(--adv-4); }

/* Compose column becomes one calm adv-card (overrides .tool-panel chrome). */
#section-panelstudio .adv-ps-compose {
    display: flex;
    flex-direction: column;
    gap: var(--adv-4);
    padding: var(--adv-5);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-1);
}

/* Grouped sub-sections: Setting · The moment · Output. */
.adv-ps-group { display: flex; flex-direction: column; gap: var(--adv-3); }
.adv-ps-group + .adv-ps-group {
    padding-top: var(--adv-4);
    border-top: 1px solid var(--adv-border);
}
.adv-ps-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--adv-2);
}
.adv-ps-group-title {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-2);
    margin: 0;
    font-size: var(--adv-fs-eyebrow);
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--adv-muted);
}
.adv-ps-group-num {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--adv-accent) 14%, transparent);
    color: var(--adv-accent);
    font-size: 0.72rem;
    font-weight: 900;
}

/* Reskin the fields inside the compose card to the adv look. */
#section-panelstudio .adv-ps-compose label > span {
    font-size: var(--adv-fs-label);
    font-weight: 700;
    color: var(--adv-ink);
}
#section-panelstudio .adv-ps-compose label > span small { font-weight: 500; color: var(--adv-muted); }
#section-panelstudio .adv-ps-compose select,
#section-panelstudio .adv-ps-compose textarea,
#section-panelstudio .adv-ps-compose input[type="number"] {
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    color: var(--adv-ink);
}
#section-panelstudio .adv-ps-compose select:focus,
#section-panelstudio .adv-ps-compose textarea:focus,
#section-panelstudio .adv-ps-compose input[type="number"]:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-accent) 16%, transparent);
}
#section-panelstudio .adv-ps-intent-field textarea { width: 100%; min-height: 78px; resize: none; }

/* "Leave speech bubbles empty" — a calm inset callout, keep the green accent. */
#section-panelstudio .clean-illustration-toggle {
    border: 1px solid color-mix(in srgb, var(--green) 32%, var(--adv-border));
    border-radius: var(--adv-r-md);
    background: color-mix(in srgb, var(--green) 7%, var(--adv-inset));
}
#section-panelstudio .clean-illustration-copy strong { color: var(--adv-ink); }
#section-panelstudio .clean-illustration-copy small { color: var(--adv-muted); }

/* ── Result column ─────────────────────────────────────────────────────────── */
#section-panelstudio .manga-creator-preview { gap: var(--adv-3); }

/* Persistent pipeline strip + its inline hint. The row hides itself (and the
   lone "i") whenever the strip is hidden — i.e. in Simple mode or pre-boot. */
.adv-ps-pipeline-row,
.adv-ps-scene-row {
    display: flex;
    align-items: center;
    gap: var(--adv-2);
}
.adv-ps-pipeline-row:has(> #panel-studio-steps[hidden]) { display: none; }
.adv-ps-scene-row:has(> #manga-scene-chip[hidden]) { display: none; }
.adv-ps-pipeline-row .adv-hint,
.adv-ps-scene-row .adv-hint { flex-shrink: 0; }

#section-panelstudio .panel-studio-steps {
    flex: 1;
    margin-top: 0;
    padding: var(--adv-2) var(--adv-4);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-pill);
    background: var(--adv-inset);
    font-size: var(--adv-fs-label);
    color: var(--adv-muted);
}

/* Generated panel = adv-card surface; empty state = coaching block. */
#section-panelstudio .manga-preview-panel {
    padding: var(--adv-5);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-1);
}
#section-panelstudio .manga-preview-empty {
    min-height: 300px;
    border: 1px dashed var(--adv-border-strong);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    color: var(--adv-muted);
}
#section-panelstudio .manga-preview-empty h3 { color: var(--adv-ink); font-weight: 820; }
#section-panelstudio .generated-panel-frame img {
    border-radius: var(--adv-r-md);
    border: 1px solid var(--adv-border);
}
#section-panelstudio .manga-quick-actions { gap: var(--adv-2); }

/* Continuity report → adv-card. */
#section-panelstudio #conflict-report {
    margin-top: var(--adv-4);
    padding: var(--adv-5);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-1);
}

/* ── Engine room — calm disclosures ────────────────────────────────────────── */
.adv-ps-engine {
    display: flex;
    flex-direction: column;
    gap: var(--adv-2);
    margin-top: var(--adv-5);
}
.adv-ps-engine-title {
    margin: 0;
    font-size: var(--adv-fs-eyebrow);
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--adv-muted);
}
#section-panelstudio details.form-more {
    margin: 0;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-raised);
    padding: 0 var(--adv-4);
}
#section-panelstudio details.form-more > summary {
    padding: var(--adv-3) 0;
    font-size: var(--adv-fs-label);
    font-weight: 750;
    color: var(--adv-ink);
}
#section-panelstudio details.form-more[open] { padding-bottom: var(--adv-3); }
#section-panelstudio details.form-more .embedded-panel {
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
}

/* =============================================================================
   LIBRARY (section-library) — Story ▸ Chapter file-directory
   -----------------------------------------------------------------------------
   Folder tree (left) + folder contents (right). The panel tiles + lightbox keep
   their existing app.css styling (already themed); this adds the directory shell
   (head, tree, breadcrumb, search, move menu). One unified UI for both modes.
   ========================================================================== */
.adv-lib-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--adv-4);
    margin-bottom: var(--adv-4);
    flex-wrap: wrap;
}
.adv-lib-head-purpose {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--adv-muted);
    max-width: 74ch;
}
.adv-lib-head-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.adv-lib {
    display: grid;
    grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
    gap: var(--adv-4);
    align-items: start;
}

/* Folder tree ------------------------------------------------------------- */
.adv-lib-tree {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: var(--adv-2);
    max-height: calc(100vh - 116px);
    padding: var(--adv-4);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-lg);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-1);
    overflow-y: auto;
}
.adv-lib-tree-root {
    display: flex;
    align-items: center;
    gap: var(--adv-2);
    padding: 0 var(--adv-1) var(--adv-2);
    font-size: var(--adv-fs-label);
    font-weight: 820;
    color: var(--adv-ink);
    border-bottom: 1px solid var(--adv-border);
}
.adv-lib-tree-root-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-lib-tree-list { display: flex; flex-direction: column; gap: 2px; }
.adv-lib-folder {
    display: flex;
    align-items: center;
    gap: var(--adv-2);
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--adv-r-md);
    background: transparent;
    color: var(--adv-muted);
    font-size: var(--adv-fs-label);
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.adv-lib-folder:hover {
    color: var(--adv-ink);
    background: color-mix(in srgb, var(--adv-ink) 5%, transparent);
}
.adv-lib-folder.is-active {
    color: var(--adv-accent);
    background: color-mix(in srgb, var(--adv-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--adv-accent) 40%, transparent);
}
.adv-lib-folder-ico { flex-shrink: 0; font-size: 0.95rem; line-height: 1; }
.adv-lib-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-lib-folder-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--adv-r-pill);
    background: color-mix(in srgb, var(--adv-ink) 8%, transparent);
    color: var(--adv-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}
.adv-lib-folder.is-active .adv-lib-folder-count {
    background: color-mix(in srgb, var(--adv-accent) 18%, transparent);
    color: var(--adv-accent);
}

/* Main pane --------------------------------------------------------------- */
.adv-lib-main { display: flex; flex-direction: column; gap: var(--adv-3); min-width: 0; }
.adv-lib-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--adv-3);
    flex-wrap: wrap;
}
.adv-lib-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-2);
    font-size: var(--adv-fs-label);
    color: var(--adv-muted);
    min-width: 0;
}
.adv-lib-crumb-story { font-weight: 700; color: var(--adv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-lib-crumb-sep { color: var(--adv-muted); }
.adv-lib-crumb-folder { font-weight: 700; color: var(--adv-ink); }
.adv-lib-crumb-count {
    margin-left: var(--adv-1);
    padding: 1px 8px;
    border-radius: var(--adv-r-pill);
    background: color-mix(in srgb, var(--adv-ink) 7%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
}
.adv-lib-search {
    display: inline-flex;
    align-items: center;
    gap: var(--adv-2);
    flex: 0 1 300px;
    padding: 0 12px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
}
.adv-lib-search-icon { font-size: 0.85rem; opacity: 0.7; }
.adv-lib-search input {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    border: 0;
    background: transparent;
    color: var(--adv-ink);
    font-size: 0.86rem;
}
.adv-lib-search input:focus { outline: none; }
.adv-lib-search:focus-within {
    border-color: color-mix(in srgb, var(--adv-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adv-accent) 16%, transparent);
}
.adv-lib-empty { align-items: center; text-align: center; }
.adv-lib-empty p { max-width: 46ch; }
.adv-lib-tree-hint { margin: var(--adv-2) var(--adv-1); font-size: 0.8rem; color: var(--adv-muted); }

/* Bar tools (Show-all toggle + search) --------------------------------------- */
.adv-lib-bar-tools { display: inline-flex; align-items: center; gap: var(--adv-2); flex-wrap: wrap; }
.adv-lib-showall {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    color: var(--adv-muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.adv-lib-showall:hover { color: var(--adv-ink); border-color: color-mix(in srgb, var(--adv-ink) 26%, transparent); }
.adv-lib-showall.is-active {
    color: var(--adv-accent);
    border-color: color-mix(in srgb, var(--adv-accent) 50%, transparent);
    background: color-mix(in srgb, var(--adv-accent) 10%, transparent);
}

/* Deter casual extraction of the (watermarked) preview images — the browsable
   Library never holds the clean image (fetched only at page placement). */
#section-library .panel-library-thumb img,
#page-editor-panel-library img,
.panel-library-lightbox-image img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Move-to-chapter floating menu ------------------------------------------- */
.adv-lib-move-menu {
    position: fixed;
    z-index: 9400;
    width: 228px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--adv-2);
    border: 1px solid var(--adv-border-strong);
    border-radius: var(--adv-r-md);
    background: var(--adv-surface);
    box-shadow: var(--adv-shadow-2);
}
.adv-lib-move-title {
    margin: 2px 6px 6px;
    font-size: var(--adv-fs-eyebrow);
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--adv-muted);
}
.adv-lib-move-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--adv-r-sm);
    background: transparent;
    color: var(--adv-ink);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
.adv-lib-move-item:hover { background: color-mix(in srgb, var(--adv-ink) 6%, transparent); }
.adv-lib-move-item.is-current {
    color: var(--adv-accent);
    font-weight: 700;
}

@media (max-width: 860px) {
    .adv-lib { grid-template-columns: 1fr; }
    .adv-lib-tree { position: static; max-height: none; }
}

/* ============================================================================
   ASSEMBLY BENCH (PAGES) — adv-system reskin + new chrome. page-editor.css
   loads AFTER this sheet, so every override is scoped under #section-pages
   (id specificity wins — the same CSS-in-place technique as Worldweave).
   Theme safety: color-mix on themed vars only; no new --adv-* tokens.
   ========================================================================== */

.adv-pages-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 14px;
}

.adv-pages-head .adv-section-purpose {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.adv-pages-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.adv-pages-head-actions { flex-shrink: 0; }

/* ── Tool dock: one group at a time in Advanced ── */
.adv-pages-dock-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
    margin-bottom: 12px;
}

.adv-pages-dock-tab {
    border: none;
    border-radius: 7px;
    padding: 7px 4px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.adv-pages-dock-tab:hover { color: var(--ink); }

.adv-pages-dock-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 14%, transparent);
}

/* Advanced shows exactly one dock panel; Simple keeps the groups stacked
   (the tab bar itself is [data-adv], hidden by the existing mode gate). */
html[data-ui-mode="advanced"] .adv-pages-dock-panel { display: none; }
html[data-ui-mode="advanced"] .adv-pages-dock-panel.is-active { display: block; }

/* ── Toolbar tools ── */
.adv-pages-toolbar-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

.adv-pages-tool {
    min-width: 30px;
    padding: 4px 7px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.adv-pages-tool:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.adv-pages-tool:disabled { opacity: 0.38; cursor: default; }
.adv-pages-tool.is-on {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
}

.adv-pages-tool-divider {
    width: 1px;
    height: 18px;
    background: var(--line);
}

.adv-pages-spec {
    margin: 6px 2px 0;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-align: right;
}

/* ── Legacy accent cleanup (was hardcoded rgba(239,68,68) red) ── */
#section-pages .template-card.active {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

#section-pages .saved-page-tile.active {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ── Click-to-place armed tile ── */
#section-pages .page-editor-panel-tile.is-armed {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#section-pages .page-editor-panel-tile { cursor: pointer; }

/* ── Saved pages strip: head + hover actions ── */
.adv-pages-strip-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adv-pages-strip-head h4 { margin: 0; }

.saved-page-tile-wrap { position: relative; }

.saved-page-tile-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 140ms ease;
}

.saved-page-tile-wrap:hover .saved-page-tile-actions,
.saved-page-tile-wrap:focus-within .saved-page-tile-actions {
    opacity: 1;
}

.saved-page-tile-actions button {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.saved-page-tile-actions button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

.saved-page-tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--muted);
    font-weight: 700;
    font-size: 1.1rem;
    background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

/* ── Inspector upgrades ── */
#section-pages .inspector-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 8px 0;
}

#section-pages .inspector-chip {
    min-width: 30px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

#section-pages .inspector-chip:hover { color: var(--ink); }

#section-pages .inspector-chip.is-on {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
}

#section-pages .inspector-swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--muted);
    cursor: pointer;
}

#section-pages .inspector-swatch input[type="color"] {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

#section-pages .inspector-arrange { margin: 8px 0; }
#section-pages .inspector-arrange summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.8rem;
}

#section-pages .inspector-default-btn {
    width: 100%;
    margin-top: 4px;
    font-size: 0.8rem;
}

@media (max-width: 960px) {
    .adv-pages-head { flex-direction: column; }
}

/* ============================================================================
   ASSEMBLE & PUBLISH (SUBMIT) — adv-system reskin + lifecycle chrome. Scoped
   under #section-submit (page-editor.css still carries the base chapter-editor
   rules and loads later; id specificity wins here).
   ========================================================================== */

.adv-submit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 14px;
}

.adv-submit-head .adv-section-purpose {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.adv-submit-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#submit-countdown-chip.is-critical {
    border-color: color-mix(in srgb, #c0392b 55%, var(--line));
    color: #c0392b;
}

/* ── Lifecycle rail: the chapter's journey at a glance ── */
.adv-lifecycle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.adv-lifecycle-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.adv-lifecycle-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-right: 26px;
    color: var(--muted);
    font-size: 0.8rem;
}

.adv-lifecycle-step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 50%;
    width: 14px;
    height: 1px;
    background: var(--line);
}

.adv-lifecycle-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
    flex-shrink: 0;
}

.adv-lifecycle-step.is-done { color: var(--ink); }
.adv-lifecycle-step.is-done .adv-lifecycle-dot { background: #1f9d55; }
.adv-lifecycle-step.is-now { color: var(--ink); font-weight: 600; }
.adv-lifecycle-step.is-now .adv-lifecycle-dot {
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.adv-lifecycle-label small {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.7rem;
}

.adv-lifecycle-branch.is-declined {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #c0392b 45%, var(--line));
    background: color-mix(in srgb, #c0392b 10%, var(--surface));
    color: #c0392b;
    font-size: 0.76rem;
    font-weight: 600;
}

/* ── Reskin the chapter editor surfaces ── */
#section-submit .chapter-editor-shell { gap: 16px; }

#section-submit .chapter-rail,
#section-submit .submit-preflight,
#section-submit .chapter-meta-form,
#section-submit .chapter-page-order {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

#section-submit .submit-preflight,
#section-submit .chapter-meta-form,
#section-submit .chapter-page-order { padding: 14px 16px; }

#section-submit .chapter-list-item {
    border-radius: 10px;
    border: 1px solid var(--line);
}

#section-submit .chapter-list-item.active {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

#section-submit .chapter-status-pill[data-status="draft"] { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--muted); }
#section-submit .chapter-status-pill[data-status="submitted"] { background: color-mix(in srgb, #b98900 16%, var(--surface)); color: #b98900; }
#section-submit .chapter-status-pill[data-status="published"] { background: color-mix(in srgb, #1f9d55 16%, var(--surface)); color: #1f9d55; }

#section-submit .submit-preflight-row.is-done .submit-preflight-mark { color: #1f9d55; }

/* ── Reading-direction segmented control ── */
.chapter-direction-field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 4px;
    flex-wrap: wrap;
}

.chapter-direction-label {
    color: var(--muted);
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chapter-direction-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}

.chapter-direction-toggle button {
    border: none;
    border-radius: 7px;
    padding: 6px 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.chapter-direction-toggle button.is-active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 14%, transparent);
}

/* ── Ordered pages: thumbs are preview buttons; up/down keys added ── */
#section-submit .chapter-ordered-page-thumb {
    border: none;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

#section-submit .chapter-page-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 46px;
    color: var(--muted);
    font-weight: 700;
    background: color-mix(in srgb, var(--ink) 6%, var(--surface));
    border-radius: 6px;
}

#section-submit .chapter-ordered-page-controls button:disabled { opacity: 0.3; cursor: default; }

/* ── Available pages: captions + click-to-add ── */
#section-submit .chapter-available-tile { position: relative; }

#section-submit .chapter-available-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 6px;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    color: #fff;
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0 0 8px 8px;
}

#section-submit .chapter-available-add {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 7px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease;
}

#section-submit .chapter-available-tile:hover .chapter-available-add,
#section-submit .chapter-available-tile:focus-within .chapter-available-add { opacity: 1; }

/* ── Review banner as a full-width callout ── */
#section-submit .chapter-review-banner {
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
}

#section-submit .chapter-review-banner.is-declined {
    border-color: color-mix(in srgb, #c0392b 45%, var(--line));
    background: color-mix(in srgb, #c0392b 7%, var(--surface));
}

#section-submit .chapter-review-banner.is-published {
    border-color: color-mix(in srgb, #1f9d55 45%, var(--line));
    background: color-mix(in srgb, #1f9d55 7%, var(--surface));
}

/* ── Chapter preview (inside the shared lightbox shell) ── */
.chapter-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(720px, 88vw);
}

.chapter-preview-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #fff;
}

.chapter-preview-stage {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-preview-stage img {
    max-width: calc(88vw - 120px);
    max-height: 74vh;
    border-radius: 8px;
    background: #fff;
}

.chapter-preview-nav {
    width: 40px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

.chapter-preview-nav:disabled { opacity: 0.3; cursor: default; }

.chapter-preview-missing {
    padding: 60px 30px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.85);
    max-width: 380px;
    text-align: center;
}

.chapter-preview-caption {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 960px) {
    .adv-submit-head { flex-direction: column; }
}

/* ============================================================================
   LIBRARY DEPTH PASS — tabs, filters, selection/bulk, skeletons, prompt vault,
   pins, version stacks, lightbox world block. Theme-safe (color-mix on themed
   vars only).
   ========================================================================== */

.adv-lib-head-main { min-width: 0; }

.adv-lib-tabs {
    display: inline-flex;
    gap: 4px;
    margin-top: 10px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}

.adv-lib-tab {
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.adv-lib-tab.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 14%, transparent);
}

.adv-lib-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent);
    font-size: 0.72rem;
    text-align: center;
}

.adv-lib-tree-root {
    /* was an inert div — now the "All panels" button every file UI expects */
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}

.adv-lib-tree-root:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.adv-lib-tree-root.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.adv-lib-sort {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 8px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
}

.adv-lib-select-toggle {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.adv-lib-select-toggle.is-active {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
}

.adv-lib-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 2px;
}

.adv-lib-filter-select {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
}

.adv-lib-filter-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.adv-lib-filter-chip.is-on {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
}

.adv-lib-filter-clear {
    border: none;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.76rem;
    text-decoration: underline;
    cursor: pointer;
}

.adv-lib-crumb-search {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* Selection + pin overlays on tiles */
.panel-library-tile { position: relative; }

.panel-library-tile.is-selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.adv-lib-select-box {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
}

.adv-lib-select-box input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

.adv-lib-pin {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--muted);
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease;
}

.panel-library-tile:hover .adv-lib-pin,
.panel-library-tile:focus-within .adv-lib-pin,
.adv-lib-pin.is-on { opacity: 1; }

.adv-lib-pin.is-on { color: #b98900; }

.adv-lib-version-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 78%, transparent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.adv-lib-chip-score { color: #1f9d55; }
.adv-lib-chip-date { opacity: 0.75; }

/* Skeletons + show-more + capped note + footer */
.adv-lib-skeleton .panel-library-thumb {
    min-height: 150px;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--ink) 5%, var(--surface)) 40%,
        color-mix(in srgb, var(--ink) 10%, var(--surface)) 50%,
        color-mix(in srgb, var(--ink) 5%, var(--surface)) 60%);
    background-size: 200% 100%;
    animation: adv-lib-shimmer 1.4s ease-in-out infinite;
}

.adv-lib-skeleton-line {
    display: block;
    height: 10px;
    margin: 8px 10px 0;
    border-radius: 5px;
    background: color-mix(in srgb, var(--ink) 8%, var(--surface));
}

.adv-lib-skeleton-line.short { width: 55%; margin-bottom: 10px; }

@keyframes adv-lib-shimmer {
    0% { background-position: 180% 0; }
    100% { background-position: -20% 0; }
}

.adv-lib-showmore {
    grid-column: 1 / -1;
    padding: 10px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.adv-lib-showmore:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }

.adv-lib-capped-note {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.adv-lib-footer {
    margin: 10px 2px 0;
    color: var(--muted);
    font-size: 0.8rem;
}

/* Bulk action bar — sticky bottom-center */
.adv-lib-bulkbar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 25%, transparent);
}

.adv-lib-bulk-count { color: var(--ink); font-weight: 600; font-size: 0.86rem; }

.adv-lib-bulkbar .danger { color: #c0392b; }

/* Prompt vault */
.adv-lib-prompts-note { margin: 0; color: var(--muted); font-size: 0.8rem; }

.adv-lib-prompts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.adv-vault-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.adv-vault-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.adv-vault-head h4 { margin: 0; font-size: 0.92rem; }

.adv-vault-intent {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adv-vault-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* Lightbox world block + tags + versions */
.adv-lightbox-world {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

.adv-lightbox-world-row {
    display: flex;
    gap: 10px;
    font-size: 0.82rem;
}

.adv-lightbox-world-row span { color: var(--muted); min-width: 74px; }

.adv-lightbox-canon { color: #b98900; font-weight: 700; }

.adv-lightbox-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.adv-lightbox-tag-edit {
    border: 1px dashed var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}

.adv-lightbox-versions {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(10, 12, 18, 0.7);
}

.adv-lightbox-version {
    border: none;
    border-radius: 7px;
    padding: 3px 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}

.adv-lightbox-version.is-active { background: rgba(255, 255, 255, 0.18); color: #fff; }

.panel-library-lightbox-image { position: relative; }

/* Cast upgrades: reference-art avatar, ledger chip, refart field */
.adv-avatar .adv-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.adv-cast-ledger-chip { margin-top: 4px; font-size: 0.72rem; }
.adv-cast-refart { display: block; margin-top: 10px; }
.adv-cast-refart small { color: var(--muted); font-weight: 400; }
.adv-cast-footer { display: flex; gap: 8px; justify-content: flex-end; }

/* Home upgrades: clickable stat tiles + Warden preview */
.adv-stat-grid .adv-stat {
    border: 1px solid var(--line);
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 140ms ease, transform 140ms ease;
}
.adv-stat-grid .adv-stat:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    transform: translateY(-1px);
}
.adv-world-preview {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}
.adv-world-ago { color: var(--muted); font-weight: 400; }

/* ============================================================================
   GLOBAL IA — nav groups, topbar switcher, readonly banner, sidebar readiness
   suppression on Home, actionable toasts, command palette.
   ========================================================================== */

.studio-nav-group-label {
    margin: 10px 6px 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.studio-nav-group-label:first-child { margin-top: 0; }

/* Chapter readiness is persistent chrome: the sidebar rail stays put on EVERY
   tab, Chapter Home included. (It used to hide on Home to avoid mirroring the
   Home pipeline card — owner call 2026-07-26: a nav-anchored progress rail you
   can't rely on being there is worse than the duplication.) Narrow widths still
   drop it via the .sidebar-readiness rule in app.css, where the sidebar
   collapses into a horizontal nav strip. */

/* Topbar project switcher */
.studio-context { position: relative; }

button.studio-context-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 4px 22px 4px 8px;
    border-radius: 9px;
    position: relative;
}

button.studio-context-main:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

.topbar-project-caret {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--muted);
}

.topbar-project-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 140;
    min-width: 280px;
    max-height: 60vh;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 30%, transparent);
}

.topbar-project-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.topbar-project-row:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.topbar-project-row.is-current { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.topbar-project-row:disabled { opacity: 0.5; cursor: default; }

.topbar-project-name { font-weight: 600; font-size: 0.88rem; }
.topbar-project-meta { color: var(--muted); font-size: 0.74rem; }

.topbar-project-new {
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.topbar-project-new:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.topbar-project-empty { margin: 8px 10px; color: var(--muted); font-size: 0.82rem; }

/* Read-only banner */
.readonly-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 16px;
    border-bottom: 1px solid color-mix(in srgb, #b98900 40%, var(--line));
    background: color-mix(in srgb, #b98900 10%, var(--surface));
    color: var(--ink);
    font-size: 0.84rem;
}

/* Actionable toasts */
.adv-toast-action {
    margin-left: 10px;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* Command palette */
#command-palette {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    backdrop-filter: blur(3px);
}

#command-palette.is-open { display: flex; }

.cp-dialog {
    width: min(560px, 92vw);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 40%, transparent);
    overflow: hidden;
}

.cp-input {
    width: 100%;
    padding: 16px 18px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    outline: none;
}

.cp-list {
    max-height: 46vh;
    overflow: auto;
    padding: 6px;
}

.cp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cp-row.is-active,
.cp-row:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.cp-kind {
    flex-shrink: 0;
    min-width: 54px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, var(--surface));
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cp-label { font-size: 0.9rem; }

.cp-empty { margin: 14px; color: var(--muted); font-size: 0.84rem; }

.cp-hint {
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.74rem;
}

/* Shot-vocabulary + adherence chips (Panel Studio, Precise view) */
.adv-ps-shot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.adv-ps-shot-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}
.adv-ps-shot-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.adv-ps-shot-chip.is-dial { border-style: dashed; }
.adv-forge-count {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 8px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
}

/* ============================================================================
   LIBRARY LAYOUT POLISH (live-feedback round) — the global app.css
   `select { width: 100% }` stretched the sort + character selects to full
   width and shattered the toolbar into stacked rows. Everything compacts
   into two tidy rows: [breadcrumb ..... search] / [view controls | filters].
   ========================================================================== */

#section-library .adv-lib-bar {
    align-items: center;
    row-gap: var(--adv-2);
}

#section-library .adv-lib-bar-tools {
    flex: 0 0 auto;
    margin-left: auto;
}

#section-library .adv-lib-sort {
    width: auto;
    max-width: 160px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: var(--adv-inset);
    color: var(--adv-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

#section-library .adv-lib-select-toggle {
    height: 36px;
    flex: 0 0 auto;
}

#section-library .adv-lib-search {
    flex: 0 1 230px;
    min-width: 160px;
}

#section-library .adv-lib-showall { flex: 0 0 auto; }

/* Filters: one quiet chip row, compact select, right under the toolbar */
#section-library .adv-lib-filters {
    align-items: center;
    gap: var(--adv-2);
    margin: 0;
    padding: var(--adv-2) var(--adv-3);
    border: 1px solid var(--adv-border);
    border-radius: var(--adv-r-md);
    background: color-mix(in srgb, var(--adv-ink) 3%, var(--adv-surface));
}

#section-library .adv-lib-filters:empty { display: none; }

#section-library .adv-lib-filter-select {
    width: auto;
    max-width: 190px;
    height: 30px;
    flex: 0 0 auto;
    padding: 0 8px;
    background: var(--adv-surface);
}

/* Empty states + notices span the whole grid instead of one narrow column */
#section-library .adv-lib-grid > .adv-empty,
#section-library .adv-lib-grid > .adv-lib-capped-note,
#section-library .adv-lib-grid > .adv-lib-showmore {
    grid-column: 1 / -1;
}

#section-library .adv-lib-grid > .adv-empty {
    justify-self: center;
    max-width: 460px;
    padding: var(--adv-6) var(--adv-5);
}

/* Tabs sit tighter under the purpose line */
#section-library .adv-lib-tabs { margin-top: 8px; }

@media (max-width: 900px) {
    #section-library .adv-lib-bar-tools { margin-left: 0; }
}