/* ============================================================
   Continuum - Main Stylesheet
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────── */
/* Loaded via chronicle-tokens.css */

/* ── Base Reset ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    line-height: 1.5;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography Utilities ────────────────────────────── */
.prose-text {
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    line-height: var(--prose-line-height);
    color: var(--text-prose);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

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

a:hover {
    color: var(--accent-hover);
}

code, pre, .mono {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* ── Scrollbar Styling ───────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ── Legacy base styles (retained for compatibility) ─── */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

main {
    height: 100dvh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-ui);
    color: var(--text-primary);
}

input, textarea {
    font-family: var(--font-ui);
    color: var(--text-primary);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    outline: none;
}

input:focus, textarea:focus {
    border-color: var(--accent);
}

/* ── Focus Rings ─────────────────────────────────────── */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm, 4px);
}

/* ── Touch Target Utility ────────────────────────────── */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Screen-reader only ──────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── App shell ───────────────────────────────────────── */
.app {
    height: 100dvh;
}

.app-shell {
    min-height: 100dvh;
}

/* ============================================================
   PLAYER LAYOUT — Chronicle Reading Room
   ============================================================ */

.player-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-base);
}

.player-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 260;
}

.content-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Room location header: always visible, shows current room name */
.room-location-header {
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Cinematic header: shown on mobile/narrow (Phase 1.5 activates via media query) */
.cinematic-header {
    display: none; /* Hidden until Phase 1.5 responsive CSS activates */
    height: 180px;
    background: var(--bg-surface-1);
    flex-shrink: 0;
}

.content-split {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* Side canvas: shown on wide screens with scene art (Phase 1.5 activates via media query) */
.side-canvas {
    display: none; /* Hidden until Phase 1.5 responsive CSS activates */
    width: 280px;
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
}

/* HUD Panel — Plan 29 Phase A */
.room-hud-panel {
    padding: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.hud-header__room-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.hud-header__scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--t2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.hud-header__scan-btn:hover {
    color: var(--t1);
    border-color: var(--t1);
}

.hud-header__scan-btn--active {
    color: var(--accent-gold, #d4a574);
    border-color: var(--accent-gold, #d4a574);
}

.hud-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

.hud-header__bookmark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--t2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.hud-header__bookmark-btn:hover:not(:disabled) {
    color: var(--accent-gold, #d4a574);
    border-color: var(--accent-gold, #d4a574);
    background: rgba(212, 165, 116, 0.08);
}

.hud-header__bookmark-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.hud-header__bookmark-btn:disabled {
    opacity: 0.5;
    cursor: progress;
}

.hud-header__bookmark-btn.is-bookmarked {
    color: var(--accent-gold, #d4a574);
    border-color: var(--accent-gold, #d4a574);
    background: rgba(212, 165, 116, 0.12);
}

.hud-header__bookmark-btn.is-bookmarked:hover:not(:disabled) {
    background: rgba(212, 165, 116, 0.2);
}

.hud-flavor-text {
    white-space: pre-line;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hud-portrait-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hud-portrait-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s;
    max-width: 72px;
}

.hud-portrait-card:hover {
    background: var(--bg-surface-2, rgba(255, 255, 255, 0.05));
}

.hud-portrait-card__info {
    text-align: center;
    min-width: 0;
}

.hud-portrait-card__name {
    display: block;
    font-size: 0.75rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 68px;
}

.hud-portrait-card__state {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.hud-named-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.hud-named-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--accent-gold, #d4a574);
    border-bottom: 1px dotted var(--accent-gold, #d4a574);
}

.hud-named-link:hover {
    color: var(--accent-gold-hover, #e8c49a);
}

/* Activation surface inside .hud-named-link — carries the inner flex layout so the
   role="button" target stays a sibling of the bookmark button (no nested-interactive). */
.hud-named-link__activate {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.hud-named-link__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-calm, #5a8a5a);
    flex-shrink: 0;
}

.hud-aggregate {
    font-size: 0.85rem;
}

.hud-aggregate__toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.15rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.hud-aggregate__toggle:hover {
    color: var(--text-primary);
}

.hud-aggregate__chevron {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.hud-aggregate__chevron--expanded {
    transform: rotate(180deg);
}

.hud-aggregate__list {
    padding-left: 0.5rem;
    margin-top: 0.25rem;
}

.hud-aggregate__group {
    margin-bottom: 0.25rem;
}

.hud-aggregate__group-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.hud-aggregate__item {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.1rem 0;
}

.hud-aggregate__item:hover {
    color: var(--text-primary);
}

.hud-world-objects {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hud-world-object {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    padding: 0.2rem 0;
}

.hud-world-object__icon {
    flex-shrink: 0;
}

.hud-world-object__name {
    color: var(--text-primary);
}

.hud-world-object__state {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.hud-world-object__actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}

.hud-world-object__btn {
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
}

.hud-world-object__btn:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

/* ── Compass + Exit Mini-Map ────────────────────────── */
.hud-compass {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
    position: relative;
    cursor: pointer;
}

.hud-compass__icon {
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.hud-compass:hover .hud-compass__icon {
    color: var(--accent-gold, #d4a574);
}

.exit-minimap-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.exit-minimap-overlay__content {
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: min(340px, 90vw);
    height: min(340px, 90vw);
}

/* Keep legacy class for backward compat */
.exit-minimap-popover {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    background: var(--bg-elevated, #1a1a2e);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    width: 300px;
    height: 300px;
}

.exit-minimap-container {
    width: 100%;
    height: 100%;
}

.exit-minimap {
    width: 100%;
    height: 100%;
}

.minimap-current {
    fill: none;
    stroke: var(--accent-gold, #d4a574);
    stroke-width: 2.5;
    animation: minimap-pulse 2s ease-in-out infinite;
}

@keyframes minimap-pulse {
    0%, 100% {
        stroke-opacity: 1;
    }
    50% {
        stroke-opacity: 0.5;
    }
}

.minimap-label-current {
    fill: var(--accent-gold, #d4a574);
    font-size: 10px;
    font-weight: 600;
}

.minimap-edge {
    stroke: var(--text-secondary);
    stroke-width: 1;
    opacity: 0.5;
}

.minimap-edge--locked {
    stroke: var(--text-secondary);
    stroke-width: 1;
    opacity: 0.25;
    stroke-dasharray: 2, 2;
}

.minimap-destination {
    fill: var(--accent, #5a8fd8);
    stroke: none;
    cursor: pointer;
    transition: r 0.15s ease;
}

.minimap-destination:hover {
    r: 10;
}

.minimap-destination--locked {
    fill: var(--text-secondary);
    opacity: 0.4;
    cursor: not-allowed;
}

.minimap-destination--teleport {
    fill: var(--accent-gold, #d4a574);
    stroke: none;
}

.minimap-label {
    fill: var(--text-primary);
    font-size: 9px;
    pointer-events: none;
}

.minimap-lock-icon {
    pointer-events: none;
}

.minimap-distance {
    fill: var(--text-secondary);
    font-size: 8px;
    pointer-events: none;
}

.minimap-node-group:hover .minimap-destination {
    r: 10;
}

.narrative-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    background-color: var(--scene-tint, transparent);
}

/* ── Right Panel (XP / level-up sidebar) ──────────── */
/* z-index 300: above player-layout(260) so tab buttons are clickable,
   below overlay-panels(400) so overlays render on top. */
.right-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    padding: var(--space-4, 1rem);
    z-index: 300;
    pointer-events: auto;
}

/* ── Action Bar ────────────────────────────────────── */
/* z-index 266: above player-layout(260) so toolbar is not covered by narrative-scroll on mobile,
   and above overlay-backdrop(265, rendered at root stacking-context level) so toolbar buttons
   remain clickable when a panel is open. The overlay-panel group (overlay-panels z-index:400)
   renders above the toolbar. */
.action-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border-subtle);
    position: sticky;
    bottom: 0;
    z-index: 266;
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + var(--safe-area-bottom, 0px));
}

/* ── Action Bar Icons (Plan 39) ───────────────────── */
.action-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--t2);
    cursor: pointer;
    transition: color var(--tf), background var(--tf);
    position: relative;
    flex-shrink: 0;
}

.action-bar__icon:hover {
    color: var(--t1);
    background: var(--bg-surface-2);
}

.action-bar__icon.is-active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.action-bar__icon:active {
    transform: scale(0.94);
}

.action-bar__icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.action-bar__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.action-bar__input {
    flex: 1;
    min-width: 0;
}

/* ── Combined Panel (Plan 39) ─────────────────────── */
.combined-panel__tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-1);
    position: sticky;
    top: 0;
    z-index: 1;
}

.combined-panel__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    border: none;
    background: none;
    color: var(--t2);
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--tf), border-color var(--tf);
    min-height: 40px;
    white-space: nowrap;
}

.combined-panel__tab:hover {
    color: var(--t1);
}

.combined-panel__tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.combined-panel__tab-icon {
    flex-shrink: 0;
}

.combined-panel__tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .combined-panel__tab-label {
        display: none;
    }

    .combined-panel__tab {
        padding: var(--space-2);
    }
}

.combined-panel__content {
    flex: 1;
    overflow-y: auto;
}

/* Hide nested overlay-panel wrappers when embedded in combined panel */
.combined-panel__content .overlay-panel {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.combined-panel__content .overlay-panel-header {
    display: none;
}

.combined-panel__content .overlay-panel-body {
    max-height: none;
    overflow: visible;
}

/* Map + Places section within combined panel.
   The outer section has NO height cap so the Bookmarked Places block flows
   naturally below the map. The 50vh cap is applied only to the map panel
   content wrapper so it's the map — not the section — that gets constrained. */
.combined-panel__map-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.combined-panel__map-section .world-map-panel-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 50vh;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* The map itself is square via aspect-ratio. Sized to min(parent width, 50vh
   minus room for the breadcrumb above) so the square always fits inside the
   50vh cap. Higher specificity (3-class chain) beats the scoped CSS [b-hash]
   selector from WorldMapView.razor.css. */
.combined-panel__map-section .world-map-panel-content .world-map-view {
    width: min(100%, calc(50vh - 3rem));
    max-width: calc(50vh - 3rem);
    max-height: calc(50vh - 3rem);
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

.combined-panel__places-section {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-2);
}

.combined-panel__places-header {
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 600;
    color: var(--t2);
    cursor: pointer;
    padding: var(--space-1) 0;
}

.combined-panel__notebook-section {
    padding: var(--space-2);
}

/* ── Settings Panel Layout ──────────────────────────── */

.settings-panel-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin: calc(-1 * var(--space-4, 1rem));
}

.settings-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.settings-panel-footer {
    display: flex;
    gap: var(--space-3, 12px);
    justify-content: center;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.settings-footer-btn {
    background: transparent;
    border: 1px solid var(--border-visible);
    color: var(--text-secondary);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: var(--radius, 4px);
    font-size: var(--ts-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-footer-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Chat tab embedded in settings panel */
.settings-chat-embed {
    position: relative;
    flex: 1;
    min-height: 0;
}

.settings-chat-embed .ooc-backdrop {
    display: none;
}

.settings-chat-embed .ooc-chat-header {
    display: none;
}

.settings-chat-embed .ooc-chat-panel,
.settings-chat-embed .ooc-chat-panel.open,
.settings-chat-embed .ooc-chat-panel.closed {
    all: unset;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

.settings-chat-embed .ooc-messages {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 52px;
    overflow-y: auto;
    padding: var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.settings-chat-embed .ooc-input-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-1);
}

.settings-chat-embed .ooc-input {
    flex: 1;
}

.settings-chat-embed .ooc-send-btn {
    flex-shrink: 0;
}

/* Settings tab content */
.settings-tab-content {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
    font-family: var(--font-ui);
    font-size: var(--ts-sm, 0.875rem);
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.settings-group-title {
    font-family: var(--font-ui);
    font-size: var(--ts-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 600;
    margin: 0;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid var(--border-subtle);
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2, 8px) 0;
    font-family: var(--font-ui);
    font-size: var(--ts-sm, 0.875rem);
    color: var(--text-primary);
}

.settings-slider {
    flex: 1;
    max-width: 200px;
    accent-color: var(--accent);
}

.settings-select {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius, 4px);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ts-sm, 0.875rem);
}

/* Rulebook inside settings panel - fill space */
.settings-panel-body .rulebook-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2, 8px);
}

.combined-panel__footer {
    display: flex;
    gap: var(--space-4, 16px);
    justify-content: center;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.combined-panel__footer-link {
    font-size: var(--ts-sm, 0.875rem);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.combined-panel__footer-link:hover {
    color: var(--accent);
}

/* ── Gear Menu (Plan 39) ──────────────────────────── */
.gear-menu {
    position: relative;
    flex-shrink: 0;
}

.gear-menu__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--t2);
    cursor: pointer;
    transition: color var(--tf), background var(--tf);
}

.gear-menu__trigger:hover {
    color: var(--t1);
    background: var(--bg-surface-2);
}

.gear-menu__trigger.is-active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.gear-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 499;
}

.gear-menu__dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: var(--space-2);
    min-width: 180px;
    background: var(--bg-surface-1);
    border: 1px solid var(--b2);
    border-radius: var(--r-lg);
    box-shadow: var(--e3);
    padding: var(--sp2) 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
}

.gear-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    padding: var(--sp3) var(--sp4);
    border: none;
    background: none;
    color: var(--t2);
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    cursor: pointer;
    transition: background var(--tf), color var(--tf);
    min-height: 44px;
}

.gear-menu__item:hover {
    background: var(--bg-surface-2);
    color: var(--t1);
}

.gear-menu__item.is-active {
    color: var(--accent);
}

/* ── Legacy action bar toolbar (kept for backward compat until Phase C cleanup) ── */
.action-bar-toolbar {
    display: none;
}

/* TTS quality badge: informational label, must not intercept pointer events */
.tts-quality-badge {
    pointer-events: none;
}

.stt-unsupported {
    opacity: 0.4;
    cursor: not-allowed;
}

.stt-error {
    font-size: var(--ts-xs);
    color: var(--text-error, #e55);
    padding: 0 var(--space-2);
}

.action-bar-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.inspiration-anchor {
    position: relative;
    flex-shrink: 0;
}

.toolbar-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.toolbar-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-surface-2);
}

.toolbar-btn.active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Nav Tab Buttons (Plan 02 redesign) ───────────── */
.nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--t2);
    border-bottom: 2px solid transparent;
    transition: color var(--tf);
    position: relative;
    padding: var(--sp2);
}

.nav-tab-label {
    font-size: var(--ts-xs);
    font-weight: 500;
}

.nav-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.nav-tab.is-active::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.nav-tab:active {
    transform: scale(0.94);
}

.nav-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── More Menu ────────────────────────────────────── */
/* Rendered outside .action-bar at root level so it isn't trapped in the
   action-bar stacking context.  position: fixed places it above
   player-layout / narrative-scroll. */
.more-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 499;
}

.more-menu-container {
    position: relative;
}

.toolbar-spacer {
    flex: 1;
    min-width: var(--space-2);
}

.more-menu {
    position: fixed;
    bottom: calc(120px + var(--safe-area-bottom, 0px));
    right: var(--space-3, 12px);
    min-width: 180px;
    background: var(--bg-surface-1);
    border: 1px solid var(--b2);
    border-radius: var(--r-lg);
    box-shadow: var(--e3);
    padding: var(--sp2) 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
}

.more-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    padding: var(--sp3) var(--sp4);
    border: none;
    background: none;
    color: var(--t2);
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    cursor: pointer;
    transition: background var(--tf), color var(--tf);
    min-height: 44px;
}

.more-menu-item:hover {
    background: var(--bg-surface-2);
    color: var(--t1);
}

.more-menu-item.is-active {
    color: var(--accent);
}

.more-menu-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ── Action Input ──────────────────────────────────── */
.action-input {
    flex: 1;
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.action-input-field {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.action-input-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.2);
}

.action-input-field .stt-mic-btn {
    flex-shrink: 0;
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-right: var(--space-1);
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
}

.action-input-field .stt-mic-btn.stt-listening {
    color: var(--accent);
}

/* ── Mode Dropdown (inline prefix) ──── */
.action-mode-dropdown {
    position: relative;
    flex-shrink: 0;
}

/* Desktop: custom dropdown visible, native select hidden */
.action-mode-dropdown--mobile {
    display: none;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-subtle);
    color: var(--accent);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .action-mode-dropdown--desktop {
        display: none;
    }

    .action-mode-dropdown--mobile {
        display: block;
    }
}

.action-mode-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-subtle);
    color: var(--accent);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.action-mode-dropdown__trigger:hover {
    background: rgba(196, 149, 106, 0.08);
}

.action-mode-dropdown__caret {
    font-size: 0.7em;
    opacity: 0.6;
}

.action-mode-dropdown__list {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 50;
    min-width: 120px;
    margin-bottom: var(--space-1);
    transform-origin: bottom left;
    padding: var(--space-1) 0;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--e3);
}

.action-mode-dropdown__item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    text-align: left;
    cursor: pointer;
}

.action-mode-dropdown__item:hover {
    background: rgba(196, 149, 106, 0.12);
}

.action-mode-dropdown__item.is-selected {
    color: var(--accent);
    font-weight: 600;
}

.action-text-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
}

.action-text-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.action-text-input:focus {
    outline: none;
}

/* ── Scaffold Templates ──── */
.scaffold-text {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-1);
    color: var(--text-tertiary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    font-style: italic;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.scaffold-text--colon {
    padding-left: 0;
}

.scaffold-text--mobile {
    display: none;
}

@media (max-width: 640px) {
    .scaffold-text--desktop {
        display: none;
    }

    .scaffold-text--mobile {
        display: inline;
    }
}

.scaffold-target-wrapper {
    position: relative;
    flex-shrink: 0;
}

.scaffold-target-input {
    width: 120px;
    padding: var(--space-2) var(--space-2);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
}

.scaffold-target-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.scaffold-target-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

@media (max-width: 640px) {
    .scaffold-target-input {
        width: 80px;
    }
}

/* ── Target Autocomplete ──── */
.action-autocomplete {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 50;
    min-width: 160px;
    margin-bottom: var(--space-1);
    padding: var(--space-1) 0;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--e3);
}

.action-autocomplete__item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-autocomplete__item:hover,
.action-autocomplete__item.is-selected {
    background: rgba(196, 149, 106, 0.12);
}

.action-autocomplete__item.is-selected {
    color: var(--accent);
}

.action-submit-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-base);
    font-weight: 600;
    font-size: var(--ui-size);
    transition: background var(--transition-fast);
    flex-shrink: 0;
    box-shadow: var(--e2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-submit-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.action-submit-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.action-submit-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ── Scan button cooldown state ──── */
.hud-header__scan-btn--used,
.mobile-hud-header__scan.is-used {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Scan revealed indicator ──── */
.hud-named-link__scan-tag {
    color: var(--accent);
    font-size: 0.75em;
    margin-left: var(--space-1);
}

.hud-named-link__scan-indicator {
    color: #d4a017;
    font-size: 0.75em;
    margin-left: 4px;
    opacity: 0.85;
}

/* ============================================================
   CHRONICLE — Continuous Scroll Narrative
   ============================================================ */

.chronicle-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
}

.narrative-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
}

/* Center prose at comfortable reading width */
.narrative-scroll .prose {
    width: 100%;
    max-width: 42em;
    max-height: calc(100vh - 150px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.chronicle-entry-item {
    position: relative;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.chronicle-entry-item:last-child {
    border-bottom: none;
}

/* Chronicle entry separation */
.chronicle-entry + .chronicle-entry {
    padding-top: var(--sp5);
    border-top: var(--b1);
}

/* Prose text override for narrative entries.
   white-space: pre-wrap preserves \n and \n\n authored in the prose so action
   narrations like "You study them carefully.\n\nA muscular guard..." render as
   actual paragraph breaks instead of being collapsed to a single line by HTML
   default whitespace handling inside <p>. */
.chronicle-entry-item .prose-text {
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    line-height: var(--prose-line-height);
    color: var(--text-prose);
    margin-bottom: 0;
    white-space: pre-wrap;
}

/* HUD entity links: interactive gold dotted underline (action style) */
.room-hud-panel .entity-mention {
    color: var(--hud-link-color, #d4a574);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    border-bottom: none;
}

.room-hud-panel .entity-mention:hover {
    color: var(--accent-gold-hover, #e8c49a);
}

/* Chronicle entity links: reference style, muted solid underline */
.chronicle-view .entity-mention {
    color: var(--chronicle-link-color, #b8a080);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
    border-bottom: none;
}

.chronicle-view .entity-mention:hover {
    color: var(--accent-gold-hover, #e8c49a);
    background: rgba(184, 160, 128, 0.08);
}

.chronicle-view .entity-mention--streaming {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
}

/* Fallback for entity mentions outside chronicle/hud */
.entity-mention {
    color: var(--accent-gold, #d4a574);
    cursor: pointer;
    border-bottom: 1px dotted var(--accent-gold, #d4a574);
}

.entity-mention:hover {
    color: var(--accent-gold-hover, #e8c49a);
}

.chronicle-cursor {
    animation: blink 1s step-end infinite;
    color: var(--accent);
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.bookmark-btn {
    position: absolute;
    top: var(--space-3);
    right: 0;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    background: none;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.bookmark-btn:hover, .chronicle-entry-item.bookmarked .bookmark-btn {
    color: var(--accent);
}

/* Chronicle entry highlight animation (notebook navigation) */
.chronicle-entry--highlight {
    animation: chronicle-highlight-fade 2s ease-out;
}

@keyframes chronicle-highlight-fade {
    0% {
        background-color: var(--accent-gold, #d4a574);
        opacity: 0.3;
    }
    100% {
        background-color: transparent;
        opacity: 1;
    }
}

.bookmark-btn--active {
    color: var(--accent);
}

.hud-named-link__bookmark {
    position: relative;
    opacity: 0;
    transition: opacity var(--transition-fast);
    font-size: 0.75rem;
    padding: 0 0.15rem;
}

.hud-named-link:hover .hud-named-link__bookmark,
.hud-named-link:focus-within .hud-named-link__bookmark,
.hud-named-link__bookmark.bookmark-btn--active {
    opacity: 1;
}

.hud-aggregate__bookmark {
    position: relative;
    font-size: 0.75rem;
    padding: 0 0.15rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.hud-aggregate__item:hover .hud-aggregate__bookmark,
.hud-aggregate__bookmark.bookmark-btn--active {
    opacity: 1;
}

/* Load earlier button */
.load-earlier-container {
    display: flex;
    justify-content: center;
    padding-bottom: var(--space-5);
}

.load-earlier-btn {
    padding: var(--space-2) var(--space-4);
    color: var(--text-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.load-earlier-btn:hover:not(:disabled) {
    color: var(--text-secondary);
    border-color: var(--border-visible);
}

.load-earlier-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Whisper rejected notice */
.whisper-rejected-notice {
    position: fixed;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface-1);
    border: 1px solid var(--color-rose);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--color-rose);
    font-size: 0.9rem;
    z-index: 300;
    box-shadow: var(--shadow-md);
}

/* Chronicle narrative overlays */
.chronicle-narrative-overlay {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--border-visible);
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.skill-check-narrative {
    border-left-color: var(--color-lavender);
    color: var(--color-lavender);
}

.fair-engine-warning {
    border-left-color: var(--color-rose);
    color: var(--color-rose);
}

.echo-description {
    border-left-color: var(--color-lavender);
    color: var(--color-lavender);
}

/* Dialogue backdrop — covers full screen, dismisses dialogue on click */
.dialogue-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0, 0, 0, 0.3);
}

/* Chronicle dialogue input — positioned near cursor or centered */
.chronicle-dialogue-input {
    position: fixed;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    min-width: 340px;
    max-width: 480px;
    /* Default centered when no position style is set */
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}

/* When positioned via inline style, disable the centering transform */
.chronicle-dialogue-input[style*="left:"] {
    transform: none;
    bottom: auto;
}

.dialogue-label {
    color: var(--text-secondary);
    font-size: var(--ui-size);
    font-family: var(--font-prose);
}

.chronicle-dialogue-input textarea {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    resize: vertical;
    min-height: 60px;
}

.dialogue-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

.dialogue-send-btn, .dialogue-cancel-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--ui-size);
    transition: background var(--transition-fast);
}

.dialogue-send-btn {
    background: var(--accent);
    color: var(--bg-base);
}

.dialogue-send-btn:hover {
    background: var(--accent-hover);
}

.dialogue-cancel-btn {
    color: var(--text-secondary);
    background: transparent;
}

.dialogue-cancel-btn:hover {
    background: var(--bg-surface-2);
}

/* ============================================================
   RESPONSIVE — Mobile-First Player Layout
   ============================================================ */

/* ── Mobile Base (< 640px) ─────────────────────────── */
/* Everything already in .player-layout is mobile-first */

/* Mobile action bar: stacked layout (< 640px exclusive) */
@media (max-width: 639px) {
    :root {
        --prose-size: 16px;
        --prose-line-height: 1.7;
        --ui-size: 13px;
    }

    .action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
    }

    /* Input row spans full width on top */
    .action-bar__input {
        order: -1;
        flex-basis: 100%;
    }

    /* Icons row: spread evenly below input */
    .action-bar__icon,
    .gear-menu {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .action-bar__icon,
    .gear-menu__trigger {
        width: auto;
        min-width: 44px;
    }

    /* Add bottom padding to narrative scroll so content isn't hidden behind fixed action bar */
    .narrative-scroll {
        padding-bottom: calc(var(--space-7) * 3);
    }

    .cinematic-header {
        display: block;
    }
}

/* ── Tablet (640px–1024px) ─────────────────────────── */
@media (min-width: 640px) {
    .narrative-scroll .prose {
        padding: 0 var(--space-5);
        max-width: 42em;
        margin: 0 auto;
    }
}

/* ── Desktop+ (> 1024px) ──────────────────────────── */
@media (min-width: 1024px) {
    .side-canvas {
        display: block;
    }

    .cinematic-header {
        display: none;
    }
}

/* ── Wide (> 1400px) ──────────────────────────────── */
@media (min-width: 1400px) {
    .side-canvas {
        width: 35%;
        max-width: 500px;
    }
}

/* ── Touch interactions ────────────────────────────── */
@media (hover: none) {
    /* On touch devices, context menu items need larger tap targets */
    .toolbar-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
}

/* ── Orientation: landscape phone ─────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
    .cinematic-header {
        display: none;
    }

    .narrative-scroll {
        padding-top: var(--space-2);
    }
}

/* ── Scroll behavior ───────────────────────────────── */
.narrative-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ── Prevent body scroll when drawer open ─────────── */
body.drawer-open {
    overflow: hidden;
}

/* --- CYOA Choice Cards --- */
.cyoa-choice-cards {
    margin-top: 1rem;
    max-width: 900px;
    width: 100%;
}

.cyoa-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.cyoa-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.cyoa-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.cyoa-card:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--bg-surface-2);
}

.cyoa-card.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg-base);
}

.cyoa-card:disabled {
    opacity: 0.5;
    cursor: default;
}

.cyoa-card-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.cyoa-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cyoa-card.selected .cyoa-card-desc {
    color: var(--bg-base);
    opacity: 0.8;
}

/* --- Chronicle Illustration --- */
.chronicle-illustration {
    margin: 1rem 0;
    text-align: center;
}

.illustration-img {
    max-width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.illustration-placeholder {
    font-size: 2rem;
    color: #a89060;
    padding: 1rem;
}

.illustration-caption {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    color: #6b5339;
    margin-top: 0.5rem;
}

/* ============================================================
   ZONE MAP — graph renderer
   ============================================================ */

/* Inner graph canvas — fixed size matching SVG viewBox */
.zone-map-graph {
    position: relative;
    width: 200px;
    height: 240px;
    flex-shrink: 0;
}

/* SVG edge overlay */
.map-edges {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 240px;
    pointer-events: none;
    overflow: visible;
}

.map-edge {
    stroke: var(--border-subtle);
    stroke-opacity: 0.6;
}

/* Room nodes — HTML divs, centred on their (X,Y) coordinate */
.map-node {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.15s ease;
    background: var(--bg-surface-2);
    border: 1.5px solid var(--border-subtle);
}

.map-node.current-room {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.map-node.visited {
    background: var(--bg-surface-2);
    border-color: var(--text-secondary);
}

.map-node.unvisited {
    background: var(--bg-surface-1);
    border-color: var(--border-subtle);
    opacity: 0.45;
}

.map-node.poi {
    border-color: var(--color-accent);
    border-width: 2px;
    border-style: dashed;
}

.map-node:hover:not(.unvisited) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 20%, transparent);
}

.map-node-label {
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.55rem;
    color: var(--text-secondary);
    pointer-events: none;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-title {
    font-family: var(--font-ui);
    font-size: var(--ts-md, 1rem);
    font-weight: 600;
    color: var(--t1, var(--text-primary));
    margin: 0;
}

/* ── Section & Panel labels ──────────────────────────── */
.section-label {
    font-size: var(--ts-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t3, var(--text-tertiary));
    margin-bottom: var(--sp3, 12px);
}

.panel-header {
    font-size: var(--ts-md, 1rem);
    font-weight: 600;
    color: var(--t1, var(--text-primary));
    border-bottom: 1px solid var(--b1, rgba(255, 255, 255, 0.08));
    padding-bottom: var(--sp3, 12px);
    margin-bottom: var(--sp3, 12px);
}

.panel-header-row {
    display: flex;
    align-items: center;
    gap: var(--sp3, 12px);
}

.panel-subtitle {
    font-size: var(--ts-sm, 0.8125rem);
    color: var(--t2, var(--text-secondary));
    margin-top: 2px;
}

.empty-state {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
}

.occupant-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.occupant-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 0.375rem);
    transition: background var(--transition-fast, 0.15s), transform var(--tf);
    min-height: 44px;
}

.occupant-item:hover {
    background: var(--bg3);
}

.occupant-item:active {
    transform: scale(0.98);
}

.occupant-name {
    color: var(--text-primary);
    font-size: var(--ui-size);
}

.occupant-item.is-npc .occupant-name {
    color: var(--text-secondary);
}

/* --- Character Portrait --- */
.character-portrait {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--bg-base);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.character-portrait__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-portrait.unknown {
    background: var(--bg-surface-2);
    color: var(--text-tertiary);
    border: 1px dashed var(--border-visible);
}

.character-portrait.is-player {
    box-shadow: 0 0 0 2px var(--accent);
}

/* ── Portrait loading states ─────────────────────────────────────────────── */

@keyframes portrait-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

@keyframes portrait-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Base portrait generating — pulse the initials placeholder */
.character-portrait--generating {
    background: var(--portrait-fallback-color, var(--accent));
    animation: portrait-pulse 1.8s ease-in-out infinite;
}

/* Base ready, styled portrait still generating — shimmer overlay on the image */
.character-portrait--styled-generating {
    position: relative;
}

.character-portrait--styled-generating::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    animation: portrait-shimmer 1.5s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* ============================================================
   ITEMS IN ROOM
   ============================================================ */

.items-in-room-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.room-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.room-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s;
}

.room-item-row:hover {
    background: var(--bg-surface-2);
}

.item-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.item-name {
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════
   DRAWERS (replaces overlay panel)
   ══════════════════════════════════════════════════════ */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    cursor: default;
    pointer-events: auto;
    animation: backdrop-in var(--transition-base, 0.2s) ease;
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Backdrop rendered at root stacking-context level (outside overlay-panels z-index:400 group)
   so action-bar (z-index 266) remains above it and toolbar buttons stay clickable.
   z-index 265: above player-layout(260), below action-bar(266). */
.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 265;
    cursor: default;
    pointer-events: auto;
}

/* z-index 400: must be above player-layout(260). Chromium creates stacking contexts for
   positioned flex items, so without an explicit z-index the backdrop (position:fixed inside
   this container) would paint beneath player-layout. */
[data-testid="overlay-panels"] {
    position: relative;
    pointer-events: none;
    z-index: 400;
}

.overlay-panel {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90dvh;
    border-radius: var(--radius-md);
    background: var(--bg-surface-1);
    box-shadow: var(--e3);
    transform: translateY(2%);
    opacity: 0;
    transition: transform var(--transition-base, 0.25s) ease-out, opacity var(--transition-base, 0.25s) ease-out;
    z-index: 270;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.overlay-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.overlay-panel:not(.open) {
    pointer-events: none;
}

.overlay-panel.closed {
    transform: translateY(2%);
    opacity: 0;
    pointer-events: none;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    flex-shrink: 0;
}

.drawer-title {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drawer-close,
.overlay-close-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-2, 0.5rem);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast, 0.15s);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.drawer-close:hover,
.overlay-close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.drawer-body,
.overlay-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 1rem);
}

/* Full-screen overlays — no mobile/tablet overrides needed */

/* ── People panel ── */
.person-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 0.375rem);
    margin-bottom: var(--space-2, 0.5rem);
    min-height: 44px;
    transition: background var(--tf), transform var(--tf);
}

.person-card:hover {
    background: var(--bg3);
}

.person-card:active {
    transform: scale(0.98);
}

.person-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-surface-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-avatar.unknown {
    border: 1px dashed var(--border-visible);
}

.person-name {
    color: var(--text-primary);
    font-size: var(--ui-size);
    flex: 1;
}

.person-actions {
    display: flex;
    gap: var(--space-2, 0.5rem);
}

/* ── Inventory panel ── */
.inventory-section-header {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-2, 0.5rem);
}

.inventory-section-header--mt {
    margin-top: var(--sp4, 16px);
}

.item-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 0.375rem);
    margin-bottom: var(--space-2, 0.5rem);
}

/* ── Journal panel ── */
.journal-entry {
    border-left: 3px solid var(--border-subtle);
    padding-left: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.journal-entry.npc {
    border-left-color: var(--color-sage);
}

.journal-entry.location {
    border-left-color: var(--color-slate);
}

.journal-entry.combat {
    border-left-color: var(--color-rose);
}

.journal-entry.lore {
    border-left-color: var(--color-lavender);
}

.journal-entry-timestamp {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ── Character sheet (Chronicle tokens) ── */
.char-attribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3, 0.75rem);
}

.char-stat-card {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--space-3, 0.75rem);
    text-align: center;
}

.char-skill-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.char-condition-badge {
    padding: 2px var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    font-size: 11px;
    font-weight: 500;
}

/* ── Character sheet tab buttons ── */
.char-tab {
    background: none;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.char-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.char-tab:hover:not(.active) {
    color: var(--text-primary);
}


.overlay-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* ============================================================
   CHARACTER SHEET
   ============================================================ */

.character-sheet-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Identity --- */
.character-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-initials {
    color: var(--bg-base);
    font-weight: 700;
    font-size: 1.2rem;
    font-family: var(--font-heading);
}

.avatar-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.character-info {
    display: flex;
    flex-direction: column;
}

.character-name {
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.character-level {
    font-size: 0.85rem;
    color: var(--accent);
}

.character-class {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* --- Attributes --- */
.character-attributes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.attributes-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.attributes-grid th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.attributes-grid td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(74, 55, 40, 0.3);
}

.attributes-grid td:first-child {
    font-weight: 600;
    color: var(--accent);
    width: 60px;
}

.derived-stats {
    display: flex;
    gap: 1rem;
}

.hp-bar {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-success);
}

/* --- Skills --- */
.character-skills {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skills-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.skill-row {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}

.skill-row:hover {
    background: var(--bg-surface-2);
}

.skill-name {
    flex: 1;
}

.skill-attr {
    width: 40px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

.skill-rating {
    width: 30px;
    text-align: right;
    color: var(--accent);
}

/* ============================================================
   INVENTORY
   ============================================================ */

.inventory-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Equipped --- */
.equipped-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipped-title,
.carried-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.equipment-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.equipment-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    min-height: 44px;
}

.equipment-slot.empty {
    border-style: dashed;
}

.equipment-slot .slot-icon {
    font-size: 1.1rem;
}

.equipment-slot .slot-name {
    font-size: 0.85rem;
}

.slot-empty-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Carried Items --- */
.carried-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.inventory-item-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: center;
}

.inventory-item-cell:hover {
    border-color: var(--accent);
}

.inventory-item-cell .item-icon {
    font-size: 1.5rem;
}

.inventory-item-cell .item-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.weight-bar {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
}

/* ============================================================
   JOURNAL
   ============================================================ */

.journal-layout {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    height: 100%;
}

.journal-sidebar {
    border-right: 1px solid var(--border-subtle);
    padding-right: 0.75rem;
}

.journal-entries {
    overflow-y: auto;
}

/* --- Journal Filter --- */
.journal-filter-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-btn {
    padding: 0.4rem 0.75rem;
    text-align: left;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: color 0.15s, background 0.15s;
}

.filter-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.filter-btn.active {
    color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 600;
}

/* --- Journal Entries --- */
.journal-entries-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.journal-entry-row {
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.15s;
}

.journal-entry-row:hover {
    border-color: var(--accent);
}

.entry-row-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.entry-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.entry-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
}

.entry-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.entry-full-text {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.entry-summary {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Entry type accents (Chronicle tokens) */
.entry-type-npc {
    border-left-color: var(--color-sage);
}

.entry-type-location {
    border-left-color: var(--color-slate);
}

.entry-type-combat {
    border-left-color: var(--color-rose);
}

.entry-type-lore {
    border-left-color: var(--color-lavender);
}

.entry-type-choice {
    border-left-color: var(--color-ochre);
}

/* ============================================================
   OOC CHAT PANEL
   ============================================================ */

.ooc-chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s, transform 0.2s;
}

/* OOC-specific backdrop sits below the OOC panel but above everything else */
.ooc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.2);
    cursor: default;
    pointer-events: auto;
}

.ooc-chat-panel.closed {
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

.ooc-chat-panel.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}


.ooc-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.ooc-chat-header h3 {
    font-size: 0.85rem;
    font-family: var(--font-ui);
}

.ooc-close-btn {
    font-size: 1.1rem;
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.ooc-close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.ooc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 300px;
}

.ooc-message {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    max-width: 80%;
}

.ooc-message.own {
    align-self: flex-end;
    align-items: flex-end;
}

.ooc-message.other {
    align-self: flex-start;
    align-items: flex-start;
}

.ooc-bubble {
    padding: 0.35rem 0.65rem;
    border-radius: 12px;
    word-break: break-word;
    color: var(--text-primary);
}

.ooc-message.own .ooc-bubble {
    background: var(--accent);
    color: var(--bg-base);
    border-bottom-right-radius: 3px;
}

.ooc-message.other .ooc-bubble {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-bottom-left-radius: 3px;
}

.ooc-sender {
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    font-size: 0.75rem;
}

.ooc-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: auto;
}

.ooc-input-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.ooc-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.ooc-send-btn {
    padding: 0.35rem 0.75rem;
    background: var(--accent);
    color: var(--bg-base);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    font-weight: 600;
}

.ooc-send-btn:hover {
    background: var(--accent-hover);
}

/* ============================================================
   TOASTER
   ============================================================ */

.toaster {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--sp2, 8px);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--sp3, 12px);
    padding: var(--sp3, 12px) var(--sp4, 16px);
    border-radius: var(--r-md, 8px);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-visible);
    box-shadow: var(--e2);
    pointer-events: auto;
    animation: toast-in var(--tspring, 340ms cubic-bezier(0.34, 1.56, 0.64, 1));
    min-width: 280px;
}

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

.toast-info {
    border-left: 3px solid var(--color-frost);
}

.toast-success {
    border-left: 3px solid var(--color-sage);
}

.toast-error {
    border-left: 3px solid var(--color-rose);
}

.toast-warning {
    border-left: 3px solid var(--color-ochre);
}

.toast-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-family: var(--font-mono, monospace);
}

.toast-info .toast-icon::before {
    content: 'i';
    color: var(--color-frost);
}

.toast-success .toast-icon::before {
    content: '✓';
    color: var(--color-sage);
}

.toast-error .toast-icon::before {
    content: '×';
    color: var(--color-rose);
}

.toast-warning .toast-icon::before {
    content: '!';
    color: var(--color-ochre);
}

.toast-message,
.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title {
    font-size: var(--ts-sm, 0.8125rem);
    font-weight: 600;
    color: var(--text-primary);
}

.toast-body {
    font-size: var(--ts-xs, 0.75rem);
    color: var(--text-secondary);
}

.toast-dismiss {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.1rem;
    color: var(--text-tertiary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm, 4px);
    flex-shrink: 0;
    cursor: pointer;
}

.toast-dismiss:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

/* ============================================================
   WORLD MAP
   ============================================================ */

.world-map-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.world-map-svg {
    width: 100%;
    height: 100%;
}

.zone-connection {
    stroke: var(--border-subtle);
    stroke-opacity: 0.4;
}

.zone-connection.unknown {
    stroke-dasharray: 4 4;
}

/* Zone Nodes (SVG) */
.zone-node .zone-circle {
    fill: var(--bg-surface-2);
    stroke: var(--border-subtle);
    stroke-width: 1;
}

.zone-node.current .zone-circle {
    fill: var(--accent);
    stroke: var(--accent);
}

.zone-node.visited .zone-circle {
    fill: var(--bg-surface-2);
    stroke: var(--text-secondary);
}

.zone-node.known .zone-circle {
    fill: var(--bg-surface-1);
    stroke: var(--border-subtle);
}

.zone-node.unknown .zone-circle {
    fill: var(--bg-surface-1);
    stroke: var(--border-subtle);
    opacity: 0.3;
}

.zone-pulse-ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    opacity: 0.5;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        r: 12;
        opacity: 0.5;
    }
    100% {
        r: 22;
        opacity: 0;
    }
}

.current-zone-dot {
    fill: var(--bg-base);
}

.zone-label {
    fill: var(--text-secondary);
    font-size: 9px;
    font-family: var(--font-ui);
    text-anchor: middle;
}

.zone-node.current .zone-label {
    fill: var(--text-primary);
}

.compass-rose {
    fill: var(--text-secondary);
    opacity: 0.3;
    font-size: 10px;
    font-family: var(--font-ui);
}

.world-map-legend {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.legend-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.legend-item.current::before {
    background: var(--accent);
}

.legend-item.visited::before {
    background: var(--text-secondary);
}

.legend-item.known::before {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
}

.legend-item.unknown::before {
    background: var(--bg-surface-1);
    opacity: 0.3;
    border: 1px solid var(--border-subtle);
}

/* ============================================================
   PIE MENU
   ============================================================ */

.pie-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 149;
    background: transparent;
    cursor: default;
}

.pie-menu-wrapper {
    z-index: 150;
}

.pie-menu-svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.slice .slice-path {
    fill: var(--bg-surface-1);
    stroke: var(--border-subtle);
    stroke-width: 1;
    transition: fill 0.15s;
}

.slice.available .slice-path:hover {
    fill: var(--bg-surface-2);
}

.slice.unavailable .slice-path {
    opacity: 0.3;
}

.slice-label {
    fill: var(--text-primary);
    font-size: 10px;
    font-family: var(--font-ui);
    text-anchor: middle;
    pointer-events: none;
}

.slice.unavailable .slice-label {
    fill: var(--text-secondary);
}

.center-circle {
    fill: var(--accent);
}

.center-label {
    fill: var(--bg-base);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-ui);
    text-anchor: middle;
    pointer-events: none;
}

.pie-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================================
   RULEBOOK OVERLAY
   ============================================================ */

.rulebook-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rulebook-search {
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
}

.rulebook-entries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rulebook-entry {
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.rulebook-entry-title {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.rulebook-entry-title:hover {
    background: var(--bg-surface-2);
}

.rulebook-entry.expanded .rulebook-entry-title {
    border-bottom: 1px solid var(--border-subtle);
}

.rulebook-entry-text {
    padding: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ============================================================
   GM DASHBOARD
   ============================================================ */

.gm-dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-base);
}

.gm-dashboard__world-panel {
    flex-shrink: 0;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}

.gm-dashboard__body {
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    flex: 1;
    min-height: 0;
}

.gm-dashboard__session-panel {
    background: var(--bg-s1);
    border-right: 1px solid var(--b1);
    overflow-y: auto;
}

.gm-dashboard__workspace {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gm-dashboard__context-panel {
    background: var(--bg-s1);
    border-left: 1px solid var(--b1);
    overflow-y: auto;
}

/* At desktop, backdrop and toggle are not needed — hide them so they don't occupy grid cells */
.context-drawer-backdrop {
    display: none;
}

/* Legacy alias — kept so old references don't break */
.gm-dashboard__override-panel {
    background: var(--bg-s1);
    border-left: 1px solid var(--b1);
    overflow-y: auto;
}

.gm-dashboard__bottom {
    flex-shrink: 0;
}

/* ── Responsive breakpoints ────────────────────────── */
@media (max-width: 1279px) {
    .gm-dashboard__body {
        grid-template-columns: 260px 1fr;
    }

    .gm-dashboard__context-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 200;
        transform: translateX(100%);
        transition: transform var(--tn);
        box-shadow: var(--e3);
    }

    .gm-dashboard__context-panel.open {
        transform: translateX(0);
    }

    .context-drawer-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
    }

    .context-drawer-backdrop.open {
        display: block;
    }
}

@media (max-width: 767px) {
    .gm-dashboard__body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .gm-dashboard__session-panel {
        position: sticky;
        top: 0;
        z-index: 100;
        max-height: 180px;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--b1);
    }
}

/* --- Session Panel --- */
.gm-session-panel {
    display: flex;
    flex-direction: column;
    padding: var(--sp4);
    gap: var(--sp4);
    border-top: 3px solid transparent;
    transition: border-color var(--tn);
}

.gm-session-panel.live {
    border-top-color: var(--sage);
}

.session-live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp1);
    padding: 2px 8px;
    background: rgba(122, 155, 130, 0.12);
    border: 1px solid rgba(122, 155, 130, 0.25);
    border-radius: var(--r-full);
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--sage);
}

.session-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sage);
    animation: pulse-dot 2s ease-in-out infinite;
}

.session-stopped-label {
    font-size: var(--ts-sm);
    color: var(--t3);
}

.gm-session-panel__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.gm-session-panel__campaign {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    color: var(--accent);
}

.gm-session-panel__number {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.gm-session-panel__roster {
    flex: 1;
}

.gm-session-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Session Timer --- */
.gm-session-timer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
}

.gm-session-timer__time {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.gm-session-timer__paused {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.gm-session-timer__paused-badge {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ochre);
    background: var(--color-ochre-subtle);
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
}

/* --- Player Roster --- */
.gm-player-roster {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gm-player-roster__header {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-4);
}

.gm-player-roster__list {
    display: flex;
    flex-direction: column;
}

/* --- Player Card --- */
.gm-player-card {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    padding: var(--sp3) var(--sp4);
    min-height: 44px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--tf), border-color var(--tf);
}

.gm-player-card:hover {
    background: var(--bg-surface-2);
}

.gm-player-card--offline {
    opacity: 0.5;
}

.gm-player-card__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-player-card__indicator--online {
    background: var(--color-sage);
}

.gm-player-card__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.gm-player-card__character {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 500;
    color: var(--text-primary);
}

.gm-player-card__player {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.gm-player-card__room {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* --- Tabbed Workspace --- */
.gm-tabbed-workspace {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gm-tabbed-workspace__tabs {
    display: flex;
    border-bottom: 1px solid var(--b1);
    padding: 0 var(--sp4);
    gap: 0;
    overflow-x: auto;
    flex-shrink: 0;
}

.gm-tab {
    padding: var(--sp3) var(--sp4);
    min-height: 44px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t3);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--tf), border-color var(--tf);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
}

.gm-tab:hover {
    color: var(--t2);
}

.gm-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.gm-tabbed-workspace__content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* --- World View Tab --- */
.world-view-tab {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
    flex: 1 1 auto;
    min-height: 0;
}

.world-view-tab__zones {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--sp3);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
    max-height: 320px;
    overflow-y: auto;
}

.world-view-tab__zone-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp3);
}

.gm-zone-item {
    display: grid;
    grid-template-columns: 2fr 1fr auto 1.5fr;
    gap: var(--sp3);
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    flex: 1;
    align-items: center;
}

.gm-zone-item:hover {
    background: var(--bg-surface-2);
}

.gm-zone-item .zone-name {
    font-weight: 600;
}

.gm-zone-item .zone-status {
    font-size: var(--ts-sm);
    color: var(--text-secondary);
}

.gm-zone-item .zone-faction {
    font-size: var(--ts-sm);
    color: var(--text-tertiary);
}

.zone-status-badge {
    font-size: 10px;
    padding: 2px 8px;
}

.world-view-tab__zone-connect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp2);
    padding: var(--sp3);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
}

.world-view-tab__zone-connections {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--sp3);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
    font-size: var(--ts-sm);
    color: var(--text-secondary);
}

.zone-connection-line {
    padding: 0.2rem 0;
}

.gm-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-visible, var(--b1));
    border-radius: var(--r-sm);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: var(--ts-sm);
}

.gm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ts-sm);
}

.gm-error-toast {
    padding: var(--sp3);
    border-radius: var(--r-sm);
    background: rgba(199, 84, 80, 0.1);
    color: var(--text-danger, #c75450);
    border-left: 3px solid var(--text-danger, #c75450);
}

.world-view-tab__map {
    flex: 1;
}

.world-view-tab__hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 0.5rem;
}

/* --- NPC Control --- */
.npc-control-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.npc-control-tab__empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.npc-control-tab__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.npc-control-card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.npc-control-card__portrait {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.npc-control-card__info {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.npc-control-card__name {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ui-size);
    color: var(--text-primary);
}

.npc-control-card__room {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.npc-control-card__status {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.npc-control-card__status--active {
    color: var(--color-sage);
}

.npc-control-card__status--idle {
    color: var(--text-tertiary);
}

.npc-control-card__status--sleeping {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.npc-control-card__status--dead {
    color: var(--color-rose);
}

.npc-control-card__controlled-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    background: var(--color-sage-subtle);
    color: var(--color-sage);
}

.npc-control-card__schedule-suspended {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    background: var(--color-slate-subtle);
    color: var(--color-slate);
}

.npc-control-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    width: 100%;
}

/* --- GM Log --- */
.gm-log-tab {
    display: flex;
    flex-direction: column;
}

.gm-log-tab__empty {
    color: var(--text-tertiary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.gm-log-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--ui-size);
    border-left: 2px solid transparent;
}

.gm-log-entry--move {
    border-left-color: var(--color-sage);
}

.gm-log-entry--combat {
    border-left-color: var(--color-rose);
}

.gm-log-entry--quest {
    border-left-color: var(--color-ochre);
}

.gm-log-entry--chat {
    border-left-color: var(--text-tertiary);
}

.gm-log-entry__icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    margin-top: 2px;
}

.gm-log-entry__type {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-log-entry__message {
    flex: 1;
    min-width: 0;
    font-family: var(--font-ui);
    color: var(--text-secondary);
}

.gm-log-entry__time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-log-entry__player {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--accent);
    flex-shrink: 0;
}

/* --- Override Panel --- */
.gm-override-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gm-roll-override,
.gm-scene-override,
.gm-temporal-controls,
.gm-quick-settings,
.gm-narrator-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.gm-roll-override__title,
.gm-scene-override__title,
.gm-temporal-controls__title,
.gm-quick-settings__title {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

.gm-roll-override__input,
.gm-scene-override__input,
.gm-narrator-input__field {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--ui-size);
}

.gm-roll-override__error {
    font-size: 11px;
    color: var(--color-rose);
}

.gm-temporal-controls__info {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-tertiary);
}

/* --- Room Context Menu --- */
.gm-room-context-menu {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 160;
    overflow: hidden;
}

.gm-room-context-menu__list {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.gm-room-context-menu__list button {
    padding: 0.4rem 0.75rem;
    text-align: left;
    font-size: 0.85rem;
    border-radius: var(--border-radius);
    transition: background 0.15s;
}

.gm-room-context-menu__list button:hover {
    background: var(--bg-surface-2);
}

/* --- Bottom Bar --- */
.gm-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    flex-shrink: 0;
    padding: 0 var(--sp4);
    background: var(--bg-s1);
    border-top: 1px solid var(--b1);
}

.gm-bottom-bar__left,
.gm-bottom-bar__right {
    display: flex;
    align-items: center;
    gap: var(--sp2);
}

/* --- Narrator Strip (above tabs in workspace) --- */
.narrator-strip {
    padding: var(--sp3) var(--sp4);
    border-bottom: 1px solid var(--b1);
    background: var(--bg-s1);
    flex-shrink: 0;
}

.narrator-input {
    width: 100%;
    background: var(--bg-s3);
    border: 1px solid var(--b2);
    border-radius: var(--r-lg);
    padding: var(--sp3) var(--sp4);
    font-family: var(--prose);
    font-size: var(--ts-md);
    color: var(--t1);
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--tf);
}

.narrator-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.narrator-strip__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp2);
    margin-top: var(--sp2);
}

/* --- Accordion (Context Panel) --- */
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp3) var(--sp4);
    cursor: pointer;
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t2);
    border-bottom: 1px solid var(--b0);
    transition: color var(--tf);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 100%;
}

.accordion-header:hover {
    color: var(--t1);
}

.accordion-chevron {
    transition: transform var(--tf);
    font-size: 0.75rem;
}

.accordion-header.open .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-body {
    padding: var(--sp3) var(--sp4);
}

.debug-panel-header {
    color: var(--ochre);
}

/* --- Destructive button variant --- */
.btn-destructive {
    transition: border-color var(--tf), color var(--tf);
}

.btn-destructive:hover {
    border-color: var(--rose);
    color: var(--rose);
}

/* --- Session end inline confirmation --- */
.session-end-confirm {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    padding: var(--sp2) var(--sp3);
    background: var(--color-rose-subtle);
    border-radius: var(--r-md);
    font-size: var(--ts-sm);
    color: var(--rose);
}

/* --- Save status indicator (bottom bar) --- */
.save-status {
    font-size: var(--ts-xs);
    color: var(--t3);
    font-family: var(--mono);
}

.save-status.dirty {
    color: var(--ochre);
}

.save-status.saved {
    color: var(--sage);
}

.save-status.saving {
    color: var(--frost);
    animation: pulse-dot 1s infinite;
}

/* --- Player card portrait (session dashboard) --- */
.gm-player-card__portrait {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-s3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--t3);
}

.gm-player-card__whisper-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: var(--sp1) var(--sp2);
    font-size: var(--ts-xs);
    background: none;
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
    color: var(--t3);
    cursor: pointer;
    transition: color var(--tf), border-color var(--tf);
}

.gm-player-card__whisper-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* --- Context drawer toggle (tablet) --- */
.context-drawer-toggle {
    display: none;
    position: fixed;
    right: var(--sp3);
    top: 50%;
    transform: translateY(-50%);
    z-index: 201;
    padding: var(--sp2) var(--sp3);
    background: var(--bg-s1);
    border: 1px solid var(--b1);
    border-radius: var(--r-md);
    color: var(--t2);
    cursor: pointer;
    box-shadow: var(--e2);
}

@media (max-width: 1279px) {
    .context-drawer-toggle {
        display: block;
    }
}

/* ============================================================
   GM PREP TOOL
   ============================================================ */

/* ── GM Prep Tool Design Tokens ─────────────────────────────── */
:root {
    --gm-bg: #1a1208;
    --gm-text: #e8d5a3;
    --gm-gold: #c9882a;
    --gm-gold-dark: #8b6914;
    --gm-surface: #2a1e10;
    --gm-surface-light: #3a2a18;

    /* GM Prep Tool: status colors */
    --gm-status-draft: #888888;
    --gm-status-published: #22c55e;
    --gm-status-changed: var(--color-accent); /* #c9882a */

    /* GM Prep Tool: source colors (borders, list/editor badges) */
    --gm-source-campaign: var(--color-accent); /* #c9882a gold */
    --gm-source-world: #666666;
    /* Visual-map card compact badges use darker tones */
    --gm-source-campaign-compact: var(--color-primary); /* #8b6914 */
    --gm-source-world-compact: #444444;

    /* GM Prep Tool: room status */
    --gm-room-intact: #22c55e;
    --gm-room-damaged: #ef4444;
    --gm-room-destroyed: #ef4444;

    /* GM Prep Tool: misc */
    --gm-destructive: #ef4444;
    --gm-autosave-green: #22c55e;
}

/* ── GM Prep Layout Shell ───────────────────────────────────── */
.gm-prep-layout {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-background);
    color: var(--color-text);
}

.gm-prep-layout__body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.gm-prep-layout__canvas {
    flex: 1;
    min-width: 0;
    position: relative;
}

.gm-prep-layout__bottom {
    flex-shrink: 0;
}

.gm-prep-layout__panel-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--gm-text);
}

.gm-prep-layout__panel-btn:hover {
    opacity: 0.8;
}

/* ── GM Prep Toolbar ────────────────────────────────────────── */
.gm-toolbar {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--gm-surface);
    border-bottom: 1px solid var(--gm-surface-light);
    flex-shrink: 0;
}

.gm-toolbar__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gm-toolbar__center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gm-toolbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Main Menu button */
.gm-toolbar__menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--gm-surface-light);
    color: var(--gm-text);
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    transition: opacity 150ms;
}

.gm-toolbar__menu-btn:hover {
    opacity: 0.8;
}

.gm-toolbar__menu-label {
    font-size: 0.875rem;
}

/* Title */
.gm-toolbar__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gm-gold);
    margin: 0;
}

/* Timeline date pill */
.gm-toolbar__date-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 1rem;
    border-radius: 0.25rem;
    background-color: var(--gm-surface-light);
}

.gm-toolbar__date-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--gm-text);
    font-size: 0.875rem;
    width: 10ch;
    font-family: inherit;
}

.gm-toolbar__today-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--gm-gold);
    color: var(--gm-bg);
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.gm-toolbar__today-btn:hover {
    opacity: 0.9;
}

/* View mode toggle pill */
.gm-toolbar__view-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.25rem;
    background-color: var(--gm-surface-light);
    padding: 0.125rem;
}

.gm-toolbar__view-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--gm-text);
    transition: all 150ms;
}

.gm-toolbar__view-btn--active {
    background-color: var(--gm-gold);
    color: var(--gm-bg);
}

/* Auto-save indicator */
.gm-toolbar__autosave {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--gm-text);
    opacity: 0.6;
}

.gm-toolbar__autosave-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #22c55e;
}

/* Publish button */
.gm-toolbar__publish-btn {
    padding: 0.375rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--gm-gold);
    color: var(--gm-bg);
    border: none;
    cursor: pointer;
    transition: opacity 150ms;
}

.gm-toolbar__publish-btn:hover {
    opacity: 0.9;
}

/* Shared icon size */
.gm-prep-icon--sm {
    width: 1rem;
    height: 1rem;
}

/* --- Prep Sidebar --- */
.prep-tool-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.prep-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
}

.prep-tab:hover {
    color: var(--text-primary);
}

.prep-tab--active {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-surface-2);
}

.prep-tool-sidebar__content {
    flex: 1;
    overflow-y: auto;
}

/* --- Campaign Tree --- */
.campaign-tree {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.campaign-tree__nodes {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1) 0;
}

.campaign-tree-node__row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem var(--space-2);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition-fast);
}

.campaign-tree-node__row:hover {
    background: var(--bg-surface-2);
}

.campaign-tree-node__row--selected {
    background: var(--accent-subtle);
}

.campaign-tree-node__chevron {
    width: 16px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-align: center;
    flex-shrink: 0;
}

.campaign-tree-node__icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.campaign-tree-node__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-tree-node__status {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* --- Prep Right Panel --- */
/* ===== Right Properties Panel ===== */

/* Collapsed strip */
.prep-properties-collapsed {
    width: 32px;
    flex-shrink: 0;
    border-left: 1px solid #3a2a18;
    background-color: #2a1e10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 200ms;
    border: none;
    padding: 0;
}

.prep-properties-collapsed:hover {
    opacity: 0.8;
}

.prep-properties-collapsed__chevron {
    color: #e8d5a3;
}

/* Expanded panel */
.prep-properties {
    width: 360px;
    flex-shrink: 0;
    border-left: 1px solid #3a2a18;
    background-color: #2a1e10;
    display: flex;
    flex-direction: column;
}

/* Header (48px) */
.prep-properties__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #3a2a18;
}

.prep-properties__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e8d5a3;
}

.prep-properties__close {
    padding: 4px;
    color: #e8d5a3;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 200ms;
}

.prep-properties__close:hover {
    opacity: 0.8;
}

/* Scrollable body */
.prep-properties__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prep-properties__empty {
    color: #e8d5a3;
    opacity: 0.5;
    font-size: 0.875rem;
    text-align: center;
    padding-top: 32px;
}

/* Field groups */
.prep-properties__field {
    display: flex;
    flex-direction: column;
}

.prep-properties__label {
    display: block;
    font-size: 0.75rem;
    color: #e8d5a3;
    opacity: 0.8;
    margin-bottom: 8px;
}

.prep-properties__input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: #3a2a18;
    color: #e8d5a3;
    border: 1px solid #8b6914;
    outline: none;
    font-family: 'Crimson Text', serif;
}

.prep-properties__input:focus {
    border-color: #c9882a;
}

.prep-properties__textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: #3a2a18;
    color: #e8d5a3;
    border: 1px solid #8b6914;
    outline: none;
    resize: none;
    font-family: 'Crimson Text', serif;
}

.prep-properties__textarea:focus {
    border-color: #c9882a;
}

/* Collapsible sections (AI Assist, Zone Ownership) */
.prep-properties__section {
    border-top: 1px solid #3a2a18;
    padding-top: 12px;
}

.prep-properties__section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: #c9882a;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    transition: opacity 200ms;
}

.prep-properties__section-toggle:hover {
    opacity: 0.8;
}

.prep-properties__chevron--open {
    transform: rotate(0deg);
    transition: transform 200ms;
}

.prep-properties__chevron--closed {
    transform: rotate(-90deg);
    transition: transform 200ms;
}

.prep-properties__section-body {
    padding-top: 12px;
}

/* Footer */
.prep-properties__footer {
    padding: 16px;
    border-top: 1px solid #3a2a18;
    display: flex;
    gap: 8px;
}

.prep-properties__btn-discard {
    flex: 1;
    padding: 8px 0;
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: #3a2a18;
    color: #e8d5a3;
    border: none;
    cursor: pointer;
    transition: opacity 200ms;
}

.prep-properties__btn-discard:hover {
    opacity: 0.8;
}

.prep-properties__btn-save {
    flex: 1;
    padding: 8px 0;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: #c9882a;
    color: #1a1208;
    border: none;
    cursor: pointer;
    transition: opacity 200ms;
}

.prep-properties__btn-save:hover {
    opacity: 0.8;
}

.prep-properties__btn-save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Theme Panel --- */
.theme-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.theme-panel__title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.theme-panel__select {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.theme-panel__swatches {
    display: flex;
    gap: var(--space-1);
}

.swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
}

/* --- Prep Status Bar --- */
.prep-status-bar {
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    border-top: 1px solid var(--gm-surface-light, #3a2a18);
    background-color: var(--gm-surface, #2a1e10);
    color: var(--gm-text, #e8d5a3);
    font-size: 0.75rem;
    line-height: 1rem;
    flex-shrink: 0;
}

.prep-status-bar__left,
.prep-status-bar__center,
.prep-status-bar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.prep-status-bar__center {
    opacity: 0.7;
    gap: 1rem;
}

.prep-status-bar__publish {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prep-status-bar__dot {
    opacity: 0.5;
}

.prep-status-bar__viewing {
    opacity: 0.7;
}

.prep-status-bar__icon {
    width: 0.75rem;
    height: 0.75rem;
}

.prep-status-bar__icon--green {
    color: #22c55e;
}

.prep-status-bar__zoom-btn {
    padding: 0.25rem;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.prep-status-bar__zoom-btn:hover {
    opacity: 0.8;
}

.prep-status-bar__zoom-pct {
    min-width: 2.5rem;
    text-align: center;
}

.prep-status-bar__right {
    gap: 0.5rem;
}

/* --- Save Status (legacy, kept for non-prep-tool uses) --- */

/* --- AI Assist Panel --- */
.ai-assist-panel,
.ai-assistance-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ai-assist-panel__title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.ai-assist-panel__buttons,
.ai-assistance-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.ai-assist-panel__generating {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

.ai-assist-panel__result,
.ai-assistance-panel__result {
    padding: var(--space-3);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- Illustration Manager --- */
.illustration-manager-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.illustration-manager-panel__upload,
.illustration-manager-panel__ai {
    display: flex;
    gap: var(--space-2);
}

.illustration-manager-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--space-2);
}

.illustration-manager-panel__asset {
    aspect-ratio: 1;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

/* --- Session Debrief --- */
.session-debrief-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.session-debrief-panel__summary,
.session-debrief-panel__notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.session-debrief-panel__share {
    display: flex;
    gap: var(--space-2);
}

/* --- Theme Editor --- */
.theme-editor-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.theme-editor-panel__palette {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.theme-editor-panel__slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.theme-editor-panel__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- GM Prep: Font utilities --- */
.gm-prep-heading {
    font-family: var(--font-heading);
}

.gm-prep-body-text {
    font-family: var(--font-body);
}

.gm-prep-ui-text {
    font-family: var(--font-ui);
}

/* --- GM Prep: Dot-grid background --- */
.gm-prep-dot-grid {
    background-color: var(--color-background);
    background-image: radial-gradient(
        circle,
        rgba(232, 213, 163, 0.1) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
}

/* --- GM Prep: Gold glow selection --- */
.gm-prep-card--selected {
    border: 2px solid var(--color-accent) !important;
    box-shadow: 0 0 20px var(--color-accent);
}

.gm-prep-card--unselected {
    border: 1px solid var(--color-surface-2);
}

/* --- GM Prep: Source-colored left borders --- */
.gm-prep-card--source-campaign {
    border-left: 4px solid var(--gm-source-campaign);
}

.gm-prep-card--source-world {
    border-left: 4px solid var(--gm-source-world);
}

/* --- GM Prep: Canvas cards (zone/room) --- */
.gm-prep-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    cursor: move;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    color: var(--color-text);
    width: 100%;
    height: 100%;
}

.gm-prep-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -4px rgba(0, 0, 0, 0.2);
}

/* --- GM Prep: Tab bar --- */
.gm-prep-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-surface-2);
}

.gm-prep-tab {
    flex: 1;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    text-align: center;
    border-bottom: 2px solid transparent;
    color: var(--color-text);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gm-prep-tab:hover {
    color: var(--color-accent);
}

.gm-prep-tab--active {
    border-bottom-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-surface-2);
}

/* --- GM Prep: FAB (Floating Action Button) --- */
.gm-prep-fab {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: var(--color-accent);
    color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: none;
    z-index: 10;
}

.gm-prep-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* --- GM Prep: Sidebar --- */
.gm-prep-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-surface-2);
    transition: width 300ms ease;
    overflow: hidden;
}

.gm-prep-sidebar--expanded {
    width: 280px;
}

.gm-prep-sidebar--collapsed {
    width: 48px;
}

.gm-prep-sidebar__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--color-surface-2);
    flex-shrink: 0;
}

.gm-prep-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.gm-prep-sidebar__footer {
    padding: 0.75rem;
    border-top: 1px solid var(--color-surface-2);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- GM Prep: Status dots --- */
.gm-prep-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    display: inline-block;
}

.gm-prep-status-dot--draft {
    background-color: var(--gm-status-draft);
}

.gm-prep-status-dot--published {
    background-color: var(--gm-status-published);
}

.gm-prep-status-dot--changed {
    background-color: var(--gm-status-changed);
}

/* --- GM Prep: Source badges --- */
.gm-prep-source-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius);
    color: var(--color-background);
    line-height: 1.2;
    opacity: 0.7;
}

.gm-prep-source-badge--campaign {
    background-color: var(--gm-source-campaign);
}

.gm-prep-source-badge--world {
    background-color: var(--gm-source-world);
}

/* Full-opacity variant for list view and editors */
.gm-prep-source-badge--prominent {
    opacity: 1;
}

/* Compact variant for visual-map zone/room card badges (darker background) */
.gm-prep-source-badge--compact.gm-prep-source-badge--campaign {
    background-color: var(--gm-source-campaign-compact);
    opacity: 1;
}

.gm-prep-source-badge--compact.gm-prep-source-badge--world {
    background-color: var(--gm-source-world-compact);
    opacity: 1;
}

/* --- GM Prep: Generic info badge --- */
.gm-prep-info-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius);
    background-color: var(--color-primary);
    color: var(--color-background);
    line-height: 1.2;
}

/* --- GM Prep: Room status --- */
.gm-prep-room-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    display: inline-block;
}

.gm-prep-room-status-dot--intact {
    background-color: var(--gm-room-intact);
}

.gm-prep-room-status-dot--damaged,
.gm-prep-room-status-dot--destroyed {
    background-color: var(--gm-room-damaged);
}

/* --- GM Prep: Top toolbar --- */
.gm-prep-toolbar {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-surface-2);
    flex-shrink: 0;
    gap: 1rem;
}

.gm-prep-toolbar__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-accent);
}

.gm-prep-toolbar__pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 1rem;
    border-radius: var(--border-radius);
    background-color: var(--color-surface-2);
}

.gm-prep-toolbar__autosave {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text);
    opacity: 0.6;
}

.gm-prep-toolbar__autosave-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--gm-autosave-green);
}

/* --- GM Prep: View mode toggle --- */
.gm-prep-view-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--border-radius);
    background-color: var(--color-surface-2);
}

.gm-prep-view-toggle__btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    color: var(--color-text);
    background-color: transparent;
}

.gm-prep-view-toggle__btn--active {
    background-color: var(--color-accent);
    color: var(--color-background);
}

/* --- GM Prep: Gold button --- */
.gm-prep-btn-gold {
    padding: 0.375rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--color-accent);
    color: var(--color-background);
    cursor: pointer;
    transition: opacity 0.15s ease;
    border: none;
}

.gm-prep-btn-gold:hover {
    opacity: 0.9;
}

/* Subtle surface-colored button (Main Menu, Back, Discard, sidebar footer) */
.gm-prep-btn-surface {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    background-color: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
    transition: opacity 0.15s ease;
    border: none;
}

.gm-prep-btn-surface:hover {
    opacity: 0.8;
}

/* --- GM Prep: Bottom status bar --- */
.gm-prep-status-bar {
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-surface-2);
    font-size: 0.75rem;
    color: var(--color-text);
    flex-shrink: 0;
}

.gm-prep-status-bar__section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gm-prep-status-bar__separator {
    opacity: 0.5;
}

.gm-prep-status-bar__muted {
    opacity: 0.7;
}

/* --- GM Prep: Right properties panel --- */
.gm-prep-properties {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-surface-2);
    transition: width 300ms ease;
    overflow: hidden;
}

.gm-prep-properties--expanded {
    width: 360px;
}

.gm-prep-properties--collapsed {
    width: 2rem;
}

.gm-prep-properties__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid var(--color-surface-2);
    flex-shrink: 0;
}

.gm-prep-properties__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gm-prep-properties__footer {
    padding: 1rem;
    border-top: 1px solid var(--color-surface-2);
    display: flex;
    gap: 0.5rem;
}

.gm-prep-properties__footer > button {
    flex: 1;
}

/* --- GM Prep: Tree node (replaces old campaign-tree-node__row--selected) --- */
.gm-prep-tree-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.15s ease;
    border-left: 3px solid transparent;
    color: var(--color-text);
}

.gm-prep-tree-node:hover {
    background-color: rgba(58, 42, 24, 0.5);
}

.gm-prep-tree-node--selected {
    background-color: var(--color-surface-2);
    border-left-color: var(--color-accent);
}

.gm-prep-tree-node__icon {
    flex-shrink: 0;
    color: var(--color-accent);
    font-size: 0.875rem;
}

.gm-prep-tree-node__chevron {
    width: 1rem;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* --- GM Prep: Form inputs --- */
.gm-prep-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    background-color: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-primary);
}

.gm-prep-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.gm-prep-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    background-color: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-primary);
    resize: none;
    font-family: var(--font-body);
}

.gm-prep-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.gm-prep-label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    opacity: 0.8;
}

/* --- GM Prep: Zone editor header --- */
.gm-prep-zone-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--color-surface);
}

.gm-prep-zone-header__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-accent);
}

/* --- GM Prep: Map drop zone --- */
.gm-prep-drop-zone {
    flex: 1;
    border: 2px dashed var(--color-primary);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text);
}

/* --- GM Prep: Full-page entity editor (NPC/Object) --- */
.gm-prep-entity-editor {
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    overflow-y: auto;
    background-color: var(--color-background);
}

.gm-prep-entity-editor__inner {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gm-prep-entity-editor__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gm-prep-entity-editor__avatar--icon {
    color: var(--color-background);
}

.gm-prep-entity-editor__name-input {
    font-size: 1.5rem;
    font-weight: 700;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-accent);
    outline: none;
}

.gm-prep-entity-editor__name-input:focus {
    border-bottom-color: var(--color-accent);
}

/* --- GM Prep: Temporal location cards --- */
.gm-prep-temporal-card {
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
}

.gm-prep-temporal-banner {
    font-size: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    background-color: var(--color-surface-2);
    color: var(--color-text);
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

/* --- GM Prep: NPC avatar in room tab --- */
.gm-prep-npc-avatar-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gm-prep-npc-avatar-sm--icon {
    color: var(--color-background);
}

/* --- GM Prep: SVG connection lines (applied via Blazor SVG attributes) ---
 *
 * Zone connections (dashed curves):
 *   stroke: var(--color-primary)  (#8b6914)
 *   stroke-width: 2
 *   fill: none
 *   stroke-dasharray: 5,5
 *
 * Room connections (solid lines):
 *   stroke: var(--color-primary)  (#8b6914)
 *   stroke-width: 2
 *   fill: none
 *   stroke-dasharray: none
 */

/* --- GM Prep: Destructive icon --- */
.gm-prep-delete-icon {
    color: var(--gm-destructive);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.gm-prep-delete-icon:hover {
    opacity: 0.7;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.tag,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp2, 8px);
    padding: 0 var(--sp4, 16px);
    height: 40px;
    border-radius: var(--r-md, 8px);
    font-family: var(--font-ui);
    font-size: var(--ts-base, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tf, 140ms), box-shadow var(--tf, 140ms),
    border-color var(--tf, 140ms), color var(--tf, 140ms);
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    border-color: var(--border-visible);
}

.btn:hover {
    background: var(--bg-surface-3);
    border-color: var(--border-strong);
}

.btn:active {
    transform: scale(0.96);
    box-shadow: none;
}

.btn[disabled],
.btn:disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.btn.loading {
    pointer-events: none;
    opacity: 0.7;
    cursor: wait;
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-base);
    border-color: transparent;
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: transparent;
}

.btn-secondary {
    background: transparent;
    border-color: var(--ba, rgba(196, 149, 106, 0.35));
    color: var(--accent);
}

.btn-secondary:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary);
}

.btn-ghost:hover {
    border-color: var(--border-visible);
    background: transparent;
}

.btn-danger {
    background: var(--color-rose-subtle);
    border-color: var(--color-rose);
    color: var(--color-rose);
}

.btn-danger:hover {
    background: var(--color-rose);
    color: var(--bg-base);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-primary:hover {
    background: var(--accent-subtle);
}

.btn-success {
    background: var(--color-sage);
    color: var(--bg-base);
    border-color: transparent;
}

/* ── Button sizes ──────────────────────────────────── */
.btn-sm {
    min-height: 44px;
    padding: var(--sp2, 8px) var(--sp3, 12px);
    font-size: var(--ts-xs, 0.75rem);
    border-radius: var(--r-sm, 4px);
}

.btn-md {
    height: 40px;
    padding: 0 var(--sp4, 16px);
    font-size: var(--ts-base, 0.875rem);
}

.btn-lg {
    height: 48px;
    padding: 0 var(--sp5, 24px);
    font-size: var(--ts-md, 1rem);
    border-radius: var(--r-lg, 12px);
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--r-md, 8px);
    flex-shrink: 0;
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

.btn-icon.btn-lg {
    width: 48px;
    height: 48px;
}

.text-danger {
    color: var(--color-danger);
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-visible);
}

/* ============================================================
   DASHBOARD
   ============================================================ */

/* --- Dashboard Scroll Container --- */
[data-testid="dashboard-container"] {
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Dashboard Navigation Bar --- */
.dash-nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--sp4);
    gap: var(--sp4);
    min-height: 48px;
}

.dash-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    text-decoration: none;
    color: var(--t1);
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: var(--sp2) 0;
    margin-right: var(--sp3);
    flex-shrink: 0;
    transition: color var(--tf);
}

.dash-nav__brand:hover {
    color: var(--accent);
}

.dash-nav__brand img {
    opacity: 0.85;
    transition: opacity var(--tf);
}

.dash-nav__brand:hover img {
    opacity: 1;
}

.dash-nav__tabs {
    display: flex;
    gap: var(--sp1);
    align-items: stretch;
    flex: 1;
}

.dash-nav-tab {
    padding: var(--sp3) var(--sp4);
    text-decoration: none;
    color: var(--t3);
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--tf), border-color var(--tf);
    cursor: pointer;
}

.dash-nav-tab:hover {
    color: var(--t2);
    border-bottom-color: var(--border-visible);
}

.dash-nav-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.dash-nav-tab.disabled {
    color: var(--t3);
    opacity: 0.4;
    cursor: not-allowed;
    border-bottom-color: transparent;
}

.dash-nav-tab.disabled:hover {
    color: var(--t3);
    border-bottom-color: transparent;
}

.dash-nav__actions {
    display: flex;
    gap: var(--sp3);
    align-items: center;
    flex-shrink: 0;
}

.dash-nav__greeting {
    font-size: var(--ts-xs);
    color: var(--t3);
    white-space: nowrap;
}

.dash-nav__link {
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    color: var(--t2);
    text-decoration: none;
    padding: var(--sp1) var(--sp2);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
    transition: border-color var(--tf), color var(--tf);
}

.dash-nav__link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* --- Legacy Dashboard Header (retained for backward compat) --- */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sp6) var(--sp5) var(--sp5);
    border-bottom: 1px solid var(--b0);
}

.dashboard-greeting {
    font-family: var(--font-prose);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--t1);
}

.dashboard-subline {
    font-size: var(--ts-sm);
    color: var(--t2);
    margin-top: var(--sp1);
}

.dashboard-header-actions {
    display: flex;
    gap: var(--sp3);
    align-items: center;
}

/* --- Dashboard Body --- */
.dashboard-body {
    padding: var(--sp6) var(--sp5);
    max-width: 900px;
    margin: 0 auto;
}

/* --- Card Grid --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp4);
}

/* --- World Cards --- */
.world-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--b1);
    border-radius: var(--r-xl);
    padding: var(--sp5);
    box-shadow: var(--e1);
    cursor: pointer;
    transition: all var(--tf);
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

.world-card:hover {
    box-shadow: var(--e2);
    border-color: var(--b2);
    transform: translateY(-2px);
}

.world-card:active {
    transform: translateY(0);
    box-shadow: var(--e1);
}

.world-card h3 {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--t1);
    margin: 0;
}

.world-card-header {
    display: flex;
    align-items: baseline;
    gap: var(--sp2);
}

.world-card-header h3 {
    flex: 1;
}

.world-card-row {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    padding: var(--sp1) 0;
}

.world-play-btn, .world-edit-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r-md);
    border: 1px solid var(--b1);
    background: var(--bg-surface-2);
    color: var(--t1);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: all var(--tf);
}

.world-play-btn:hover {
    background: var(--accent);
    color: var(--bg-base);
    border-color: var(--accent);
}

.world-edit-btn:hover {
    background: var(--bg-surface-3);
}

.world-character-name {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--t1);
    font-weight: 500;
}

.world-character-class {
    font-size: var(--ts-xs);
    color: var(--t3);
    margin-left: auto;
}

.world-campaign-name {
    font-size: var(--ui-size);
    color: var(--t2);
}

.world-action-link {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    font-size: var(--ts-xs);
    font-family: var(--font-ui);
    padding: var(--sp1) 0;
    transition: color var(--tf);
}

.world-action-link:hover {
    color: var(--accent);
}

/* --- Campaign Cards --- */
.campaign-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    padding: var(--sp4);
    box-shadow: var(--e1);
    cursor: pointer;
    transition: all var(--tf);
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
}

.campaign-card:hover {
    box-shadow: var(--e2);
    border-color: var(--b2);
    transform: translateY(-2px);
}

.campaign-card:active {
    transform: scale(0.98);
}

.campaign-card h3 {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--t1);
    margin: 0;
}

/* --- Character Cards --- */
.character-card {
    display: flex;
    align-items: center;
    gap: var(--sp4);
    padding: var(--sp4);
    background: var(--bg-surface-1);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    box-shadow: var(--e1);
    cursor: pointer;
    transition: all var(--tf);
}

.character-card:hover {
    box-shadow: var(--e2);
    border-color: var(--accent);
}

.character-card:active {
    transform: scale(0.98);
}

.character-portrait {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: var(--bg-surface-3);
    flex-shrink: 0;
    overflow: hidden;
}

.character-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp1);
    flex: 1;
    min-width: 0;
}

.character-name {
    font-weight: 600;
    color: var(--t1);
}

.character-class-level {
    font-size: var(--ts-sm);
    color: var(--t2);
}

/* --- Create Cards (CTA) --- */
.create-card {
    background: transparent;
    border: 2px dashed var(--b2);
    border-radius: var(--r-xl);
    padding: var(--sp5);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp3);
    color: var(--t3);
    text-align: center;
    min-height: 140px;
    transition: all var(--tf);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
}

.create-card:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.create-card:active {
    transform: scale(0.98);
}

.create-card-hint {
    font-size: var(--ts-xs);
    opacity: 0.7;
}

/* --- System Cards (Create World) --- */
.system-card {
    cursor: pointer;
}

.system-card__desc {
    font-size: var(--ts-xs);
    color: var(--t3);
    line-height: 1.5;
    margin: 0;
}

/* --- Empty States --- */
.empty-state {
    text-align: center;
    padding: var(--sp7) var(--sp5);
    color: var(--t3);
    font-size: var(--ts-sm);
    border: 1px dashed var(--b1);
    border-radius: var(--r-lg);
}

.empty-state svg {
    width: 40px;
    height: 40px;
    opacity: 0.3;
    margin-bottom: var(--sp3);
    display: inline-block;
}

.empty-state-title {
    font-size: var(--ts-md);
    color: var(--t2);
    font-weight: 500;
    margin-bottom: var(--sp2);
}

.empty-state-description {
    color: var(--text-tertiary, var(--t3));
    margin: 0 auto;
    max-width: 48ch;
    font-size: var(--ts-sm);
}

.empty-state-action {
    margin-top: var(--sp4);
}

/* === Staff page chrome ====================================================
   Every page under /staff/* (except POI Editor and Image Review, the design
   references) wraps its content in <StaffPageLayout>, which renders this. */
.staff-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--sp4) var(--sp5) var(--sp5);
    gap: var(--sp4);
    overflow-y: auto;
    min-width: 0;
}

.staff-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp1);
}

.staff-page__title {
    font-size: var(--ts-lg);
    margin: 0;
    line-height: 1.2;
}

.staff-page__description {
    color: var(--text-secondary, var(--t2));
    font-size: var(--ts-sm);
    margin: 0;
    max-width: 80ch;
}

.staff-page__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp3);
    padding: var(--sp3);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
}

.staff-page__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
    flex: 1 1 auto;
    min-height: 0;
}

/* Existing per-BC wrappers (.templates-qa, .vocal-sets-qa, .stalling-mappings-qa)
   contain a queue-filters strip + a staff-review-split that wants to fill the
   remainder. Make those wrappers behave like flex columns so the split can
   stretch correctly inside StaffPageLayout. */
.staff-page__body > .templates-qa,
.staff-page__body > .vocal-sets-qa,
.staff-page__body > .stalling-mappings-qa,
.staff-page__body > .action-review-qa,
.staff-page__body > .stalling-manage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--sp3);
}

.staff-page__body > .staff-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
}

/* Staff create/edit forms (e.g. Living Timeline "+ New event"). These are hand-rolled
   forms with raw <input>/<select>/<textarea>; without this they render with browser-default
   chrome ("1990" look). Styles the controls to match the rest of the staff UI; the form's
   own inline layout (rows, widths) is left intact. */
.staff-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

/* Field = label stacked above its control, consistent rhythm across every drawer. */
.staff-form > label {
    display: flex;
    flex-direction: column;
    gap: var(--sp1);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
    font-weight: 600;
}

.staff-form input,
.staff-form select,
.staff-form textarea,
.staff-drawer__body input,
.staff-drawer__body select,
.staff-drawer__body textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-visible, var(--b1));
    border-radius: var(--r-sm, 4px);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: var(--ts-sm);
    /* controls render normal-case even though their label is uppercased */
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.staff-form textarea,
.staff-drawer__body textarea {
    min-height: 72px;
    resize: vertical;
}

.staff-form input:focus,
.staff-form select:focus,
.staff-form textarea:focus,
.staff-drawer__body input:focus,
.staff-drawer__body select:focus,
.staff-drawer__body textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Inline-width controls (small numeric fields, weights) opt out of full-width. */
.staff-drawer__body input[type="number"] {
    width: 90px;
}

/* Checkbox rows: label sits inline with the box, not stacked/uppercased. */
.staff-form > label:has(> input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    gap: var(--sp2);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--ts-sm);
    font-weight: 400;
    color: var(--text-primary);
}

.staff-form > label > input[type="checkbox"] {
    width: auto;
}

/* Section sub-heading inside a drawer (e.g. "Slots", "Values"). */
.staff-drawer__body h4 {
    margin: var(--sp3) 0 0;
    font-size: var(--ts-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Drawer building blocks ──────────────────────────────────────────────
   Reusable structure for repeating-row editors (vocal-set slots, trait
   value lists, …) so pages stop hand-rolling inline flexbox. Keeps every
   staff drawer visually part of the same system. */

/* Horizontal group of controls — e.g. word + weight + remove. */
.staff-form__row {
    display: flex;
    gap: var(--sp2);
    align-items: center;
}

/* The first control in a row grows; trailing buttons keep their size. */
.staff-form__row > input:not([type="number"]):not([type="checkbox"]),
.staff-form__row > select,
.staff-form__row > .staff-form__grow {
    flex: 1 1 auto;
    min-width: 0;
}

.staff-form__row > .btn-sm,
.staff-form__row > button {
    flex: 0 0 auto;
}

/* Indented nested block (a slot's words, a subcategory) with a left accent. */
.staff-form__subgroup {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
    margin: var(--sp1) 0 var(--sp2);
    padding: var(--sp2) 0 var(--sp2) var(--sp3);
    border-left: 2px solid var(--border-subtle, var(--b1));
}

.staff-form__subgroup-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
}

/* Left-aligned action row (e.g. "+ word", "+ Add slot"). */
.staff-form__actions {
    display: flex;
    gap: var(--sp2);
    margin-top: var(--sp1);
}

/* Muted helper text under a field or heading. */
.staff-form__hint {
    margin: 0;
    font-size: var(--ts-sm);
    color: var(--text-secondary);
}

/* A grouped card of fields under a single drawer (visually separates
   "edit" fields from "live preview" / "metadata" panels). */
.staff-form + .staff-form {
    margin-top: var(--sp2);
}

/* ── Staff detail panel (Population character editor) ────────────────────
   Chrome for the accordion-sectioned read/edit panel. These classes shipped
   unstyled with the orphaned /staff/character page (plan 2-9 POP-03 promoted
   it); shared here because two components (StaffCharacterDetails and
   CharacterDemographicFilters) emit the accordion classes. */

.staff-character-details {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
}

.staff-character-details__loading {
    color: var(--text-secondary);
    font-size: var(--ts-sm);
}

.accordion-section {
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md, 6px);
    background: var(--bg-surface-1);
}

.accordion-header {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp2);
    padding: var(--sp2) var(--sp3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header::before {
    content: "▸";
    flex: 0 0 auto;
    color: var(--text-tertiary, var(--text-secondary));
    transition: transform 0.15s ease;
}

details[open] > .accordion-header::before {
    transform: rotate(90deg);
}

.accordion-body {
    padding: 0 var(--sp3) var(--sp3);
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

/* Section sub-heading inside an accordion body (Family / Traits / Voice description). */
.accordion-body h4 {
    margin: var(--sp2) 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Label/value rows (Identity, Voice, Metadata). */
.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sp1) var(--sp3);
    margin: 0;
}

.detail-list dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--text-secondary));
    align-self: center;
}

.detail-list dd {
    margin: 0;
    font-size: var(--ts-sm);
    color: var(--text-primary);
}

.detail-item {
    padding: 2px 0;
    font-size: var(--ts-sm);
    color: var(--text-primary);
}

.network-edge {
    cursor: pointer;
    color: var(--accent);
}

.network-edge:hover {
    text-decoration: underline;
}

/* Standard staff confirm dialog (destructive-action y/n). */
.staff-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 950;
}

.staff-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 951;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md, 6px);
    padding: var(--sp4);
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.staff-confirm__message {
    margin: 0 0 var(--sp4);
    color: var(--text-primary);
}

.staff-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp2);
}

/* Standard staff toolbar button — matches the Map Editor toolbar (".btn-tool") so the
   "+ New <thing>" buttons look the same across every staff page. Pair with .btn-primary. */
.btn-tool {
    padding: var(--sp2) var(--sp3);
    background: var(--bg-s2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-tool:hover {
    background: var(--bg-s3);
}

/* Standard staff table row-action icon buttons (one look for Edit/Delete/Deprecate everywhere). */
.staff-row-actions {
    display: inline-flex;
    gap: var(--sp1, 4px);
}

.staff-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-sm, 4px);
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    cursor: pointer;
}

.staff-icon-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-visible, var(--b1));
}

.staff-icon-btn--danger:hover {
    color: var(--danger, #e0574f);
    border-color: var(--danger, #e0574f);
}

.staff-icon-btn svg {
    width: 16px;
    height: 16px;
}

.staff-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Staff edit drawer (shared right-side panel; the unified edit surface for staff catalogs). */
.staff-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
}

.staff-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(760px, 96vw);
    z-index: 901;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle, var(--b1));
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.staff-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp3);
    padding: var(--sp4);
    border-bottom: 1px solid var(--border-subtle, var(--b1));
}

.staff-drawer__title {
    margin: 0;
    font-size: var(--ts-lg, 1.1rem);
}

.staff-drawer__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--sp2);
}

.staff-drawer__close:hover {
    color: var(--text-primary);
}

.staff-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp4);
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

.staff-drawer__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp2);
    padding: var(--sp4);
    border-top: 1px solid var(--border-subtle, var(--b1));
}

/* === Generic entity picker (autocomplete-style select) =================== */
.entity-picker {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sp1);
    min-width: 220px;
}

.entity-picker__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 600;
}

.entity-picker__select {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-visible, var(--b1));
    border-radius: var(--r-sm, 4px);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: var(--ts-sm);
    min-height: 36px;
}

.entity-picker__select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Reusable form-grid for staff data-entry forms */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp3);
}

.bundle-export__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp4);
}

.bundle-export__action {
    display: flex;
    gap: var(--sp2);
    align-items: center;
}

.bundle-export__download {
    display: flex;
    gap: var(--sp2);
    align-items: center;
}

/* Section grouping inside a staff page (e.g. Backup/Restore stacks several sections) */
.staff-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
    padding: var(--sp4);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
}

.staff-section__title {
    margin: 0;
    font-size: var(--ts-md);
    font-weight: 600;
}

.form-grid__action {
    display: flex;
    align-items: end;
}

.staff-page__intro {
    margin: 0;
    color: var(--text-secondary, var(--t2));
    font-size: var(--ts-sm);
}

.status-message.error {
    color: var(--text-danger, #c75450);
}

.status-message.success {
    color: var(--text-success, #6aa757);
}

/* === Bootstrap-style fallback classes used by older staff pages =============
   Several staff pages (DistrictDesigner, BundleImport, BackupRestore, Events)
   were authored with Bootstrap-flavoured class names that this app didn't
   define. Map them to the design tokens so those pages render. */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--sp3);
}

.form-group > label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 600;
}

.form-control {
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-visible, var(--b1));
    border-radius: var(--r-sm, 4px);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    font-size: var(--ts-sm);
    width: 100%;
    box-sizing: border-box;
}

.form-control:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

textarea.form-control {
    font-family: var(--font-mono, monospace);
    resize: vertical;
}

.alert {
    padding: var(--sp3);
    border-radius: var(--r-sm);
    margin: var(--sp3) 0;
    border-left: 4px solid;
}

.alert-success {
    background: rgba(106, 167, 87, 0.1);
    border-color: var(--text-success, #6aa757);
    color: var(--text-success, #6aa757);
}

.alert-danger {
    background: rgba(199, 84, 80, 0.1);
    border-color: var(--text-danger, #c75450);
    color: var(--text-danger, #c75450);
}

.alert-info {
    background: rgba(91, 138, 191, 0.1);
    border-color: var(--accent, #5b8abf);
    color: var(--accent, #5b8abf);
}

.text-muted {
    color: var(--text-tertiary, var(--t3));
}

.text-success {
    color: var(--text-success, #6aa757);
}

.text-danger {
    color: var(--text-danger, #c75450);
}

.progress {
    width: 100%;
    height: 18px;
    background: var(--bg-surface-3, var(--bg-surface-2));
    border-radius: var(--r-full, 999px);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--accent, #5b8abf);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 600;
    transition: width 0.2s ease;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp2);
    margin-top: var(--sp3);
}

.code-editor {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
}

/* === Scene Template Editor =============================================== */
.scene-template-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
    flex: 1 1 auto;
    min-height: 0;
}

.template-split-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp3);
    flex: 1 1 auto;
    min-height: 0;
}

.template-list {
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    overflow-y: auto;
    padding: var(--sp2);
}

.template-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    gap: var(--sp2);
}

.template-item:hover {
    background: var(--bg-surface-2);
}

.template-item.selected {
    background: var(--accent-subtle, rgba(91, 138, 191, 0.15));
    color: var(--accent);
    font-weight: 600;
}

.template-item.has-errors .template-key {
    color: var(--text-danger);
}

.template-item .error-badge {
    color: var(--text-danger);
}

.template-key {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
}

.template-editor-panel {
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    padding: var(--sp4);
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
    overflow-y: auto;
    min-height: 0;
}

.template-key-input {
    font-family: var(--font-mono, monospace);
    font-size: 14px;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border-visible, var(--b1));
    border-radius: var(--r-sm);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}

.template-source {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-visible, var(--b1));
    border-radius: var(--r-sm);
    background: var(--bg-surface-2);
    color: var(--text-primary);
    resize: vertical;
    line-height: 1.5;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp2);
}

.parse-error, .preview-error {
    color: var(--text-danger);
    font-size: var(--ts-sm);
}

.validation-errors {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.validation-error {
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-sm);
    background: rgba(199, 84, 80, 0.08);
    color: var(--text-danger);
    font-size: 12px;
}

.validation-error.warning {
    background: rgba(207, 167, 67, 0.1);
    color: var(--text-warning, #cfa743);
}

.validation-ok {
    color: var(--text-success);
    font-size: var(--ts-sm);
}

.template-preview {
    padding: var(--sp3);
    border-left: 3px solid var(--accent);
    background: var(--bg-surface-2);
    border-radius: var(--r-sm);
}

.template-preview blockquote {
    margin: 0;
    font-style: italic;
}

.coverage-dashboard {
    padding: var(--sp3);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md);
}

.coverage-row {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    padding: 0.3rem 0;
}

.coverage-row .world-name {
    min-width: 120px;
    font-weight: 600;
}

.coverage-row .coverage-bar {
    display: flex;
    align-items: center;
    gap: var(--sp2);
}

/* === District Designer =================================================== */
.district-designer {
    display: flex;
    flex-direction: column;
    gap: var(--sp4);
}

.district-designer__params,
.district-designer__progress,
.district-designer__validators,
.district-designer__preview {
    padding: var(--sp4);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
}

.district-designer__params h2,
.district-designer__progress h2,
.district-designer__validators h2,
.district-designer__preview h2 {
    margin: 0 0 var(--sp3);
    font-size: var(--ts-md);
}

.validator-item {
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-sm);
    margin-bottom: 0.25rem;
}

.validator-item__status {
    display: inline-block;
    min-width: 60px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
}

.validator-item--pass {
    background: rgba(106, 167, 87, 0.08);
}

.validator-item--pass .validator-item__status {
    color: var(--text-success);
}

.validator-item--fail {
    background: rgba(199, 84, 80, 0.08);
}

.validator-item--fail .validator-item__status {
    color: var(--text-danger);
}

.validator-item--warning {
    background: rgba(207, 167, 67, 0.08);
}

.validator-item--warning .validator-item__status {
    color: var(--text-warning, #cfa743);
}

.district-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp3);
    margin: 0;
}

.district-stats dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    font-weight: 600;
}

.district-stats dd {
    margin: 0;
    font-size: var(--ts-md);
    font-weight: 600;
    color: var(--text-primary);
}

[data-testid="district-designer-dialog"] .poi-tree {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    max-height: 240px;
    overflow-y: auto;
}

/* === Modal — global base (MapEditorPage has its own scoped copy; this covers
   child components like DistrictDesignerDialog that Blazor scoped CSS can't
   reach from the parent's stylesheet). ===================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}

.modal {
    background: var(--bg-surface-2, var(--bg-s2, #1f2235));
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-subtle, var(--b1));
    border-radius: var(--r-md, 8px);
    min-width: 360px;
    max-width: 520px;
    max-height: 88vh;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
}

/* === Wide modal (used by DistrictDesignerDialog) ========================= */
.modal--wide {
    max-width: min(960px, 92vw);
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--sp4) var(--sp4) var(--sp3);
    border-bottom: 1px solid var(--border-subtle, var(--b1));
    gap: var(--sp3);
}

.modal__header h2 {
    margin: 0 0 var(--sp1);
    font-size: var(--ts-md);
}

.modal__subtitle {
    margin: 0;
    color: var(--text-secondary, var(--t2));
    font-size: var(--ts-sm);
}

.modal__body {
    padding: var(--sp4);
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

.modal__footer {
    display: flex;
    gap: var(--sp2);
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--sp3);
}

.entity-picker--wide {
    grid-column: 1 / -1;
}

/* === Bundle Import =================================================== */
.bundle-import {
    display: flex;
    flex-direction: column;
    gap: var(--sp4);
}

.bundle-import__upload,
.bundle-import__preview,
.bundle-import__complete {
    padding: var(--sp4);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
}

/* === Events QA editor pane =============================================== */
.event-editor {
    padding: var(--sp4);
    border-radius: var(--r-md);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle, var(--b1));
}

.dry-run-results {
    padding: var(--sp3);
    border-left: 3px solid var(--accent);
    background: var(--bg-surface-2);
    border-radius: var(--r-sm);
}

/* --- Badge --- */
.badge {
    display: inline-block;
    padding: 2px var(--sp2);
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-surface-3);
    color: var(--t3);
}

/* --- Card Meta / Description --- */
.card-meta {
    font-size: var(--ts-sm);
    color: var(--t3);
}

.card-description {
    font-size: var(--ts-sm);
    color: var(--t2);
}

/* --- Sign-out link (icon + text) --- */
.dash-nav__signout {
    display: flex;
    align-items: center;
    gap: var(--sp1);
}

.dash-nav__signout-icon {
    display: none;
    flex-shrink: 0;
}

/* --- Dashboard Mobile Responsive --- */
@media (max-width: 639px) {
    .dash-nav {
        padding: 0 var(--sp3);
        gap: var(--sp2);
    }

    .dash-nav__brand span {
        display: none;
    }

    .dash-nav__brand {
        margin-right: 0;
    }

    .desktop-only {
        display: none;
    }

    .dash-nav__greeting {
        display: none;
    }

    .dash-nav__signout-icon {
        display: block;
    }

    .dash-nav__signout-text {
        display: none;
    }

    .dash-nav__signout {
        border: none;
        padding: var(--sp1);
    }

    .dashboard-body {
        padding: var(--sp4) var(--sp3);
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .world-card {
        padding: var(--sp4);
    }
}

/* --- Retained Legacy Dashboard Styles --- */
.btn-staff-review {
    background: var(--color-ochre-subtle);
    color: var(--color-ochre);
    border: 1px solid var(--color-ochre);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--ui-size);
    font-family: var(--font-ui);
}

.world-inline-form {
    background: var(--bg-surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    padding: var(--space-4);
    margin-top: var(--space-3);
}

.world-inline-form input, .world-inline-form select {
    background: var(--bg-surface-3);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    width: 100%;
    margin-bottom: var(--space-2);
    font-size: var(--ui-size);
    font-family: var(--font-ui);
}

.create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
}

.create-form input, .create-form select {
    background: var(--bg-surface-3);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--ui-size);
    font-family: var(--font-ui);
}

/* Settings Panel */
.settings-section {
    margin-bottom: 1.5rem;
}

.settings-section h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.settings-btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.settings-toggle-btn {
    padding: 0.4rem 1rem;
    border: 2px solid var(--border-subtle);
    border-radius: 4px;
    background: var(--bg-surface-2);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.settings-toggle-btn.active {
    background: var(--accent, #c9a84c);
    color: var(--bg-base);
    font-weight: 600;
}

.settings-slider {
    width: 100%;
    accent-color: var(--accent, #c9a84c);
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    color: var(--text-primary);
}

.settings-toggle-switch input[type="checkbox"] {
    width: 2rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--accent, #c9a84c);
}

.settings-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.settings-nav-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    text-align: left;
    transition: background 0.2s;
}

.settings-nav-btn:hover {
    background: var(--bg-surface-2);
}

/* ============================================================
   P6-5: COMBAT RADIAL MENU
   ============================================================ */

.fog-of-war-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.combat-radial-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 400px;
}

.combat-radial-svg {
    pointer-events: auto;
}

.combat-slice-path {
    fill: var(--accent-gold, #c9a84c);
    stroke: var(--foreground, #2c1a0e);
    stroke-width: 2;
    cursor: pointer;
    transition: opacity 0.15s;
}

.combat-slice-path.on-cooldown {
    opacity: 0.5;
    fill: var(--border-ornate, #8b6f3e);
    cursor: default;
}

.combat-cooldown-overlay {
    fill: var(--muted, #d4c4a6);
    opacity: 0.7;
}

.combat-center-circle {
    fill: var(--page-background, #f5e6c8);
    stroke: var(--border-ornate, #8b6f3e);
    stroke-width: 3;
}

.combat-center-text {
    font-family: var(--font-chronicle-heading, 'Palatino Linotype', serif);
    font-size: 16px;
    fill: var(--foreground, #2c1a0e);
    pointer-events: none;
}

.combat-slice-label {
    font-family: var(--font-ui, 'Segoe UI', sans-serif);
    font-size: 14px;
    pointer-events: none;
}

@keyframes combat-pulse {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0.8
    }
}

.combat-slice-ready {
    animation: combat-pulse 2s ease-in-out infinite;
}

/* ============================================================
   P6-4: CHARACTER SHEET TWO-COLUMN
   ============================================================ */
.char-sheet-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1rem;
    color: var(--foreground, #2c1a0e);
}

.char-sheet-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.char-portrait-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--accent-gold, #c9a84c);
    background: var(--muted, #d4c4a6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--border-ornate, #8b6f3e);
}

.char-name {
    font-family: var(--font-chronicle-heading, 'Palatino Linotype', serif);
    font-size: 1.4rem;
    font-weight: 700;
}

.char-meta {
    font-size: 0.9rem;
    opacity: 0.8;
}

.char-sheet-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.attr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.attr-box {
    border: 2px solid var(--border-ornate, #8b6f3e);
    border-radius: 4px;
    padding: 0.5rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
}

.attr-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

.attr-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.attr-mod {
    font-size: 0.8rem;
    color: var(--accent-gold, #c9a84c);
}

/* ============================================================
   P6-6: ZONE MAP SEPIA / HUB NODES
   ============================================================ */
.fantasy .room-node.poi .room-circle,
.fantasy .room-node.hub .room-circle {
    filter: sepia(0.3);
}

.fantasy .room-circle {
    filter: sepia(0.15);
}

.fantasy .map-connection {
    filter: sepia(0.3);
}

/* P6-3 page turn arrows */
.chronicle-page-turn {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    margin-top: 0.25rem;
}

.chronicle-page-turn-btn {
    background: none;
    border: 1px solid var(--border-ornate, #8b6f3e);
    border-radius: 4px;
    color: var(--border-ornate, #8b6f3e);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
}

.chronicle-page-turn-btn:hover {
    background: rgba(139, 111, 62, 0.1);
}

/* Phase 2: Chronicle UI - HUD action buttons */
.person-actions {
    display: flex;
    gap: var(--space-1, 0.25rem);
    margin-top: var(--space-1, 0.25rem);
}

.person-action-btn {
    background: none;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
    border-radius: 3px;
    color: var(--text-secondary, #a89880);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.person-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e8dcc8);
}

.examine-room-card {
    margin-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    padding-top: var(--space-3, 0.75rem);
}

/* Phase 2: Chronicle UI - Inventory weight indicator */
.inventory-weight {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-tertiary, #6b5a47);
}

/* ══════════════════════════════════════════════════════
   PHASE 3: INTERACTIONS
   ══════════════════════════════════════════════════════ */

/* Context Menu */
/* z-index 500/501: above overlay-panels(400) so context menus render above People panel, Journal etc. */
.context-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
}

.context-menu {
    position: fixed;
    z-index: 501;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: var(--space-2) 0;
    animation: menu-in var(--transition-fast) ease;
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.context-menu-item:hover {
    background: var(--bg-surface-3);
}

.context-menu-item.danger {
    color: var(--color-rose);
}

.context-menu-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.context-menu-hint {
    margin-left: auto;
    font-size: 11px;
    font-family: var(--font-mono);
}

.context-menu-hint.confident {
    color: var(--color-sage);
}

.context-menu-hint.uncertain {
    color: var(--color-ochre);
}

.context-menu-hint.risky {
    color: var(--color-rose);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-1) 0;
}

.context-menu-icon {
    width: 16px;
    text-align: center;
}

.context-menu-label {
    flex: 1;
}

.context-menu-nav-indicator {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.6;
}

/* Interactive Prose */
.interactive {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: opacity var(--transition-fast);
}

.interactive:hover {
    opacity: 0.8;
}

.interactive-npc {
    color: var(--accent);
}

.interactive-person {
    color: var(--color-sage);
}

.interactive-object {
    color: var(--color-ochre);
}

.interactive-exit {
    color: var(--color-slate);
}

/* ── Edge Drawer Triggers ──────────────────────────── */
.edge-trigger {
    position: fixed;
    z-index: 269;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2);
    background: color-mix(in srgb, var(--bg-surface-1) 85%, transparent);
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--tf), background var(--tf), box-shadow 0.3s;
    backdrop-filter: blur(4px);
}

.edge-trigger:hover {
    color: var(--text-secondary);
    background: var(--bg-surface-2);
}

.edge-trigger-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.edge-trigger--top-left {
    top: var(--space-2);
    left: var(--space-2);
    border-radius: var(--radius-md);
}

.edge-trigger--top-right {
    top: var(--space-2);
    right: var(--space-2);
    border-radius: var(--radius-md);
}

.edge-trigger--top-center {
    top: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--radius-md);
}

.edge-trigger--left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}

.edge-trigger--right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
}

.edge-trigger--has-new {
    animation: edge-pulse 2s ease-in-out infinite;
}

@keyframes edge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(196, 149, 106, 0);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(196, 149, 106, 0.4);
    }
}

/* ── Edge Drawers ─────────────────────────────────── */
.edge-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 399;
    background: rgba(0, 0, 0, 0.3);
}

.edge-drawer {
    position: fixed;
    z-index: 400;
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.edge-drawer--left {
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 85vw);
    transform: translateX(-100%);
}

.edge-drawer--right {
    right: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 85vw);
    transform: translateX(100%);
}

.edge-drawer--top {
    top: 0;
    left: 0;
    right: 0;
    max-height: 55vh;
    transform: translateY(-100%);
}

.edge-drawer.open {
    transform: translate(0, 0);
}

.edge-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.edge-drawer-title {
    font-size: var(--ts-sm);
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.edge-drawer-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
}

.edge-drawer-close:hover {
    color: var(--text-primary);
}

.edge-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
}

.journal-drawer-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.journal-drawer-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    font-size: var(--ts-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--tf), border-color var(--tf);
}

.journal-drawer-tab:hover {
    color: var(--text-secondary);
}

.journal-drawer-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Journal edge drawer — left-side panel */
.journal-edge-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(400px, 90vw);
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
    z-index: 400;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Neutralize nested OverlayPanelWrapper inside edge drawers */
.journal-edge-drawer .overlay-panel {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    transform: none;
    opacity: 1;
    border: none;
    border-radius: 0;
    box-shadow: none;
    pointer-events: auto;
}

.journal-edge-drawer .overlay-panel::before {
    display: none;
}

.journal-edge-drawer .overlay-panel .overlay-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.journal-edge-drawer .journal-layout {
    height: 100%;
}

/* Map Markers */
.map-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.map-marker-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-3);
    border: 1px solid var(--border-visible);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: border-color var(--transition-fast);
}

.map-marker.active .map-marker-icon {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.map-marker.unknown .map-marker-icon {
    border-style: dashed;
    opacity: 0.5;
}

.map-marker-label {
    font-size: 10px;
    font-family: var(--font-ui);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    white-space: nowrap;
}

/* Inspiration Popover */
.inspiration-popover {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 220px;
    padding: var(--space-2) 0;
    z-index: 50;
}

.inspiration-header {
    padding: var(--space-2) var(--space-4);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}

.inspiration-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.inspiration-item:hover {
    background: var(--bg-surface-3);
}

.inspiration-text {
    flex: 1;
    font-family: var(--font-prose);
    font-size: 14px;
    color: var(--text-primary);
}

.inspiration-confidence {
    font-size: 11px;
    font-family: var(--font-mono);
}

.inspiration-confidence.confident {
    color: var(--color-sage);
}

.inspiration-confidence.uncertain {
    color: var(--color-ochre);
}

.inspiration-confidence.risky {
    color: var(--color-rose);
}

/* ── Inspiration Panel (full-screen overlay) ──────── */
.inspiration-panel-content {
    max-width: 480px;
    margin: 0 auto;
}

.inspiration-intro {
    color: var(--text-secondary);
    font-family: var(--font-prose);
    font-style: italic;
    margin-bottom: var(--space-4);
}

.inspiration-section {
    margin-bottom: var(--space-4);
}

.inspiration-section-title {
    font-size: var(--ts-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.inspiration-panel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: background var(--tf), border-color var(--tf);
}

.inspiration-panel-item:hover {
    background: var(--bg-surface-3);
    border-color: var(--accent);
}

.inspiration-panel-text {
    flex: 1;
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    color: var(--text-primary);
}

.inspiration-panel-badge {
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-left: var(--space-3);
}

.inspiration-panel-item.confident .inspiration-panel-badge {
    color: var(--color-sage);
    background: color-mix(in srgb, var(--color-sage) 15%, transparent);
}

.inspiration-panel-item.uncertain .inspiration-panel-badge {
    color: var(--color-ochre);
    background: color-mix(in srgb, var(--color-ochre) 15%, transparent);
}

.inspiration-panel-item.risky .inspiration-panel-badge {
    color: var(--color-rose);
    background: color-mix(in srgb, var(--color-rose) 15%, transparent);
}

/* ══════════════════════════════════════════════════════
   GM DASHBOARD — Chronicle Mission Control
   ══════════════════════════════════════════════════════ */

.gm-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-base);
}

.gm-panel-left {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gm-panel-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-base);
}

.gm-panel-right {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gm-bottom-bar-layout {
    height: 48px;
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    gap: var(--space-2);
}

/* Session Timer */
.gm-session-timer-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface-2);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
}

.gm-session-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-sage);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Player Cards */
.gm-player-card-chronicle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.gm-player-card-chronicle:hover {
    background: var(--bg-surface-2);
}

.gm-player-card-chronicle.selected {
    border-left-color: var(--accent);
    background: var(--accent-subtle);
}

.gm-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gm-status-dot.online {
    background: var(--color-sage);
}

.gm-status-dot.away {
    background: var(--color-ochre);
}

.gm-status-dot.offline {
    background: var(--text-tertiary);
}

.gm-player-name {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 500;
    color: var(--text-primary);
}

.gm-player-location {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
}

.gm-hp-bar-track {
    height: 3px;
    background: var(--bg-surface-3);
    border-radius: var(--radius-full);
    margin-top: 2px;
}

.gm-hp-bar-fill {
    height: 100%;
    background: var(--color-rose);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

/* Tab Bar */
.gm-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-1);
}

.gm-tab-alert {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.gm-tab-alert.combat {
    background: var(--color-rose);
}

.gm-tab-alert.quest {
    background: var(--color-ochre);
}

/* Narrator Input */
.gm-narrator-textarea {
    width: 100%;
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-prose);
    padding: var(--space-3);
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--transition-fast);
}

.gm-narrator-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.gm-narrator-target {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
}

/* Log Entries */
.gm-log-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.gm-log-dot.movement {
    background: var(--color-sage);
}

.gm-log-dot.magic {
    background: var(--color-lavender);
}

.gm-log-dot.quest {
    background: var(--color-ochre);
}

.gm-log-dot.combat {
    background: var(--color-rose);
}

.gm-log-dot.gm-action {
    background: var(--accent);
}

.gm-log-timestamp {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.gm-log-text {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-secondary);
}

.gm-log-text .npc-name, .gm-log-text .location-name {
    color: var(--accent);
}

/* Control Sections */
.gm-control-section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.gm-control-header {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.gm-control-input {
    font-family: var(--font-mono);
    font-size: var(--ui-size);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    width: 100%;
}

.gm-npc-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface-2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.gm-npc-status {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.gm-npc-status.controlled {
    background: var(--color-sage-subtle);
    color: var(--color-sage);
}

.gm-npc-status.ai {
    background: var(--color-slate-subtle);
    color: var(--color-slate);
}

.gm-notification-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* Player card semantic badges (quest=ochre, spell=lavender, combat=rose) */
.gm-player-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.gm-player-badge.quest {
    background: var(--color-ochre-subtle);
    color: var(--color-ochre);
}

.gm-player-badge.spell {
    background: var(--color-lavender-subtle);
    color: var(--color-lavender);
}

.gm-player-badge.combat {
    background: var(--color-rose-subtle);
    color: var(--color-rose);
}

/* ══════════════════════════════════════════════════════
   GM PREP TOOL — Chronicle Design System
   ══════════════════════════════════════════════════════ */

/* Layout */
.prep-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-base);
}

.prep-toolbar {
    height: 44px;
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    gap: var(--space-2);
}

.prep-body {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    flex: 1;
    min-height: 0;
}

.prep-sidebar {
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.prep-canvas {
    background: var(--bg-base);
    flex: 1;
    overflow: auto;
    position: relative;
}

.prep-canvas-dot-grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

.prep-properties {
    width: 360px;
    flex-shrink: 0;
    border-left: 1px solid #3a2a18;
    background-color: #2a1e10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.prep-status-bar {
    height: 2rem;
    flex-shrink: 0;
    background-color: var(--gm-surface, #2a1e10);
    border-top: 1px solid var(--gm-surface-light, #3a2a18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gm-text, #e8d5a3);
}

/* Sidebar Tree */
.prep-tree-node {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.prep-tree-node:hover {
    background: var(--bg-surface-2);
}

.prep-tree-node.selected {
    border-left-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.prep-source-badge {
    padding: 0px 4px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
}

.prep-source-badge.campaign {
    background: var(--accent-subtle);
    color: var(--accent);
}

.prep-source-badge.world {
    background: var(--bg-surface-3);
    color: var(--text-tertiary);
}

.prep-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prep-status-dot.draft {
    background: var(--text-tertiary);
}

.prep-status-dot.published {
    background: var(--color-sage);
}

.prep-status-dot.changed {
    background: var(--accent);
}

.prep-tree-group-header {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Canvas Cards */
.prep-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: box-shadow var(--transition-fast);
    cursor: pointer;
}

.prep-card.campaign-content {
    border-left-color: var(--accent);
}

.prep-card.selected {
    box-shadow: 0 0 0 2px var(--accent);
}

.prep-card-connection {
    border: 1px dashed var(--border-strong);
}

.prep-fab {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--bg-base);
    font-size: 24px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast);
}

.prep-fab:hover {
    background: var(--accent-hover);
}

/* Editor Forms */
.prep-form-group {
    margin-bottom: var(--space-4);
}

.prep-form-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
    display: block;
}

.prep-input {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast);
}

.prep-input:focus {
    outline: none;
    border-color: var(--accent);
}

.prep-textarea {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-prose);
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    padding: var(--space-3);
    line-height: var(--prose-line-height);
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.prep-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* AI Assist */
.prep-ai-section {
    border: 1px solid var(--color-lavender);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-lavender-subtle);
}

.prep-ai-header {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-lavender);
    margin-bottom: var(--space-3);
}

.prep-ai-btn {
    background: var(--color-lavender-subtle);
    border: 1px solid var(--color-lavender);
    border-radius: var(--radius-sm);
    color: var(--color-lavender);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.prep-ai-btn:hover {
    background: rgba(155, 138, 176, 0.2);
}

/* Save Footer */
.prep-save-footer {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════════════════════
   PHASE 6: SUPPORTING VIEWS
   ══════════════════════════════════════════════════════ */

/* --- Login / Auth --- */
.login-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 400px;
    width: 100%;
}

.login-title {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
}

.login-input {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    padding: var(--space-3);
    transition: border-color var(--transition-fast);
}

.login-input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-btn-primary {
    width: 100%;
    background: var(--accent);
    color: var(--bg-base);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    font-weight: 600;
    padding: var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* --- Dashboard Semantic Tokens --- */
.system-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.system-badge.dnd5e {
    background: var(--color-ochre-subtle);
    color: var(--color-ochre);
}

.system-badge.aether {
    background: var(--color-lavender-subtle);
    color: var(--color-lavender);
}

.btn-signout {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

.btn-signout:hover {
    border-color: var(--border-visible);
    color: var(--text-primary);
}

.join-error-banner {
    background: var(--color-rose-subtle);
    border: 1px solid var(--color-rose);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--color-rose);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
}

.combat-gcd-display {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* --- Staff Review --- */
.staff-status-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
}

.staff-status-badge.draft {
    background: var(--bg-surface-3);
    color: var(--text-tertiary);
}

.staff-status-badge.pending {
    background: var(--color-ochre-subtle);
    color: var(--color-ochre);
}

.staff-status-badge.approved {
    background: var(--color-sage-subtle);
    color: var(--color-sage);
}

.staff-status-badge.rejected {
    background: var(--color-rose-subtle);
    color: var(--color-rose);
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
}

.staff-table th {
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-visible);
}

.staff-table td {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-secondary);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.staff-table tr:hover td {
    background: var(--bg-surface-2);
}

/* --- Admin / Config --- */
.config-section-header {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.config-input {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    padding: var(--space-2) var(--space-3);
}

.config-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* --- Social / Chat --- */
.chat-message {
    padding: var(--space-3) var(--space-4);
}

.chat-message-bubble {
    background: var(--bg-surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    max-width: 80%;
}

.chat-message-bubble.own {
    background: var(--accent-subtle);
    border: 1px solid var(--accent);
    margin-left: auto;
}

.chat-message-sender {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.chat-message-text {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-primary);
}

.chat-input-area {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.chat-input {
    width: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    padding: var(--space-2) var(--space-4);
}

/* --- Rulebook Drawer --- */
.rulebook-drawer {
    width: 400px;
}

.rulebook-section {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.rulebook-section-title {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.rulebook-entry-body {
    font-family: var(--font-prose);
    font-size: var(--prose-size);
    color: var(--text-prose);
    line-height: var(--prose-line-height);
}

/* --- User Profile & Session --- */
.user-profile-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.user-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-3);
}

.session-timeout-modal {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-visible);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-lg);
    max-width: 360px;
}

/* --- Room Items & Exits Panels --- */
.room-items-panel {
    display: block;
    padding: var(--space-3) 0;
}

.item-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-3);
}

.item-name {
    font-family: var(--font-ui);
    font-size: var(--ui-size);
    color: var(--text-primary);
}

.room-exits-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}

/* ============================================================
   UTILITY / RESET
   ============================================================ */

.d-none {
    display: none !important;
}

.d-block {
    display: block;
}

.text-muted {
    color: var(--t3);
}

.bg-danger-subtle {
    background: color-mix(in srgb, var(--color-rose) 15%, transparent);
}

.bg-muted {
    background: var(--bg3);
}

.btn-reset {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* pl-4: 16px left padding (one grid unit) */
.pl-4 {
    padding-left: var(--sp4);
}

/* ============================================================
   ACCESS DENIED PAGE
   ============================================================ */

.access-denied-container {
    max-width: 480px;
    margin: 4rem auto;
    text-align: center;
}

.logout-link {
    display: inline-block;
    margin-top: var(--sp4);
    padding: var(--sp2) var(--sp5);
    background: var(--accent);
    color: var(--bg-base);
    border-radius: var(--r-md);
    text-decoration: none;
    font-weight: 600;
    transition: background var(--transition-fast);
}

.logout-link:hover {
    background: var(--accent-hover);
}

.card-border {
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
}

/* ============================================================
   CHARACTER SHEET — TABS
   ============================================================ */

.character-sheet-tabs-container {
    grid-column: 1 / -1;
    margin-top: var(--sp4);
}

.tabs {
    display: flex;
    gap: var(--sp4);
    border-bottom: 1px solid var(--b1);
    margin-bottom: var(--sp4);
}

/* ============================================================
   CHARACTER SHEET — FEATURE CARDS
   ============================================================ */

.feature-card {
    margin-bottom: var(--sp2);
    padding: var(--sp2);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
}

.feature-description {
    margin: calc(var(--sp1) / 2) 0 0;
}

/* ============================================================
   CHARACTER SHEET — SPELL SLOTS TABLE
   ============================================================ */

.spell-table {
    width: 100%;
    border-collapse: collapse;
}

.spell-table th {
    padding: var(--sp1);
    font-size: var(--ts-xs);
    color: var(--t2);
}

.spell-table th:first-child {
    text-align: left;
}

.spell-table th:not(:first-child) {
    text-align: center;
}

.spell-table td {
    padding: var(--sp1);
}

.spell-table td:not(:first-child) {
    text-align: center;
}

/* ============================================================
   CHARACTER SHEET — EQUIPMENT & CONDITIONS ROWS
   ============================================================ */

.equipment-row {
    display: flex;
    gap: var(--sp2);
    align-items: center;
    padding: calc(var(--sp1) / 2) 0;
}

.condition-entry {
    display: flex;
    gap: var(--sp2);
    align-items: center;
    padding: calc(var(--sp1) / 2) 0;
}

.condition-value-badge {
    background: color-mix(in srgb, var(--color-rose) 15%, transparent);
    padding: 0.1rem 0.4rem;
    border-radius: var(--r-sm);
    font-size: var(--ts-xs);
}

.rune-badge {
    font-size: 0.7em;
    background: var(--bg3);
    padding: 0.1rem 0.3rem;
    border-radius: var(--r-sm);
}

.eq-name {
    flex: 1;
}

.eq-meta {
    font-size: var(--ts-xs);
    color: var(--t2);
}


/* ============================================================
   CHARACTER SHEET — GRID LAYOUTS & STAT BARS
   ============================================================ */

.ability-scores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp2);
}

.ability-modifiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp2);
}

.combat-stats-bar {
    display: flex;
    gap: var(--sp4);
    flex-wrap: wrap;
    align-items: center;
    padding: var(--sp2) 0;
}

.saves-perception-bar {
    display: flex;
    gap: var(--sp5);
    flex-wrap: wrap;
    padding: var(--sp2) 0;
}

/* PF2e feat cards reuse feature-card layout */
.feat-card {
    margin-bottom: var(--sp2);
    padding: var(--sp2);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
}

.lore-skills-header {
    margin-top: 0.75rem;
}


/* ============================================================
   CHARACTER CREATION WIZARD (Plan 04)
   ============================================================ */

.wizard-page {
    min-height: 100dvh;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp5) var(--sp4);
}

.wizard-card {
    width: 100%;
    max-width: 680px;
    max-height: calc(100dvh - var(--sp5) * 2);
    background: var(--bg-s2);
    border: 1px solid var(--b1);
    border-radius: var(--r-xl);
    box-shadow: var(--e3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wizard-header {
    padding: var(--sp5) var(--sp6);
    border-bottom: 1px solid var(--b1);
    flex-shrink: 0;
}

.wizard-title {
    font-family: var(--prose);
    font-size: var(--ts-xl);
    font-weight: 300;
    color: var(--t1);
}

.wizard-body {
    padding: var(--sp6);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.wizard-footer {
    padding: var(--sp4) var(--sp6);
    border-top: 1px solid var(--b1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.wizard-footer-left {
    display: flex;
    gap: var(--sp2);
    align-items: center;
}

/* ── Step Indicator ─────────────────────────────────── */

.step-indicator {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    margin-top: var(--sp3);
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--b2);
    transition: all var(--tn);
}

.step-dot.done {
    background: var(--sage);
}

.step-dot.current {
    background: var(--accent);
    width: 20px;
    border-radius: var(--r-full);
}

.step-label {
    font-size: var(--ts-xs);
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.step-counter {
    font-size: var(--ts-xs);
    color: var(--t3);
}

/* ── Step Transition Animation ──────────────────────── */

@keyframes wizard-step-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wizard-body {
    animation: wizard-step-in var(--tn) ease;
}

/* ── Placeholder Step ───────────────────────────────── */

.wizard-step-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--t3);
    font-style: italic;
}

/* ── Three Questions ────────────────────────────────── */

.three-questions h3 {
    font-family: var(--prose);
    font-size: var(--ts-lg);
    font-weight: 400;
    color: var(--t1);
    margin-bottom: var(--sp4);
}

.question-group {
    margin-bottom: var(--sp4);
}

.question-group label {
    display: block;
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t2);
    margin-bottom: var(--sp1);
}

.question-group textarea {
    width: 100%;
    padding: var(--sp2) var(--sp3);
    background: var(--bg-s1);
    border: 1px solid var(--b1);
    border-radius: var(--r-md);
    color: var(--t1);
    font-family: inherit;
    font-size: var(--ts-sm);
    resize: vertical;
    transition: border-color var(--tn);
}

.question-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Character Creation Flow (Plan 04a) ────────────── */

.creation-step {
    max-width: 740px;
    margin: 0 auto;
    padding: var(--sp4) 0;
}

.creation-step h2 {
    font-family: var(--font-prose);
    font-size: var(--ts-lg);
    font-weight: 500;
    color: var(--t1);
    margin-bottom: var(--sp5);
}

.creation-label {
    font-family: var(--font-prose);
    font-size: var(--ts-base);
    color: var(--t2);
    margin-bottom: var(--sp3);
    line-height: 1.6;
}

/* ── Sex Chips ────────────────────────────────────── */

.sex-chips {
    display: flex;
    gap: var(--sp3);
    flex-wrap: wrap;
    margin-bottom: var(--sp5);
}

.sex-chip {
    padding: var(--sp2) var(--sp4);
    border: 2px solid var(--border-visible);
    border-radius: var(--r-full);
    background: var(--bg-surface-2);
    color: var(--t2);
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    cursor: pointer;
    transition: all var(--tf);
}

.sex-chip:hover {
    border-color: var(--accent);
    color: var(--t1);
}

.sex-chip.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

/* ── Name Input (large underline style) ──────────────── */

.creation-name-input {
    font-family: var(--font-prose);
    font-size: var(--ts-lg);
    font-weight: 300;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-visible);
    border-radius: 0;
    padding: var(--sp2) 0;
    width: 100%;
    color: var(--t1);
    transition: border-color var(--tn);
}

.creation-name-input:focus {
    border-color: var(--accent);
    outline: none;
}

.creation-name-input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.name-section {
    margin-top: var(--sp5);
}

/* ── Experience Grid ─────────────────────────────────── */

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp3);
    max-width: 680px;
}

.experience-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

.experience-card {
    padding: var(--sp4);
    height: 125px;
    background: var(--bg-surface-3);
    border: 2px solid var(--border-subtle);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: center;
    transition: all var(--tf);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.experience-card:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.experience-card.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 0 0 1px var(--accent);
}

.experience-card-label {
    font-family: var(--font-prose);
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--t1);
}

.experience-card-tagline {
    font-family: var(--font-prose);
    font-size: var(--ts-sm);
    font-style: italic;
    color: var(--t3);
    margin-top: var(--sp1);
    line-height: 1.5;
}

.tier2-reveal {
    grid-column: 1 / -1;
    animation: creation-fade-in var(--tn) ease;
    padding-top: var(--sp4);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--sp3);
}

.tier2-reveal h3 {
    font-family: var(--font-prose);
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--t2);
    margin-bottom: var(--sp3);
}

@keyframes creation-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Character Card Grid ─────────────────────────────── */

/* ── Swipe Container ─────────────────────────────────── */

.swipe-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp3);
    position: relative;
}

/* ── Swipe Card ──────────────────────────────────────── */

.swipe-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-visible);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--e2);
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 560px;
    max-height: 340px;
    touch-action: pan-x;
    user-select: none;
    will-change: transform;
    transition: box-shadow 0.2s ease;
}

.swipe-card:hover {
    box-shadow: var(--e3);
}

/* ── Card Portrait ───────────────────────────────────── */

.swipe-card-portrait {
    width: 200px;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 3rem;
    font-family: var(--font-prose);
    font-weight: 600;
    letter-spacing: 0.05em;
    position: relative;
}

.swipe-card-portrait .portrait-initials {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.swipe-card-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.swipe-card-portrait .swipe-card-portrait-img {
    position: absolute;
    inset: 0;
}

/* ── Card Body ───────────────────────────────────────── */

.swipe-card-body {
    padding: var(--sp4);
    flex: 1;
    overflow-y: auto;
}

.swipe-card-name {
    font-family: var(--font-prose);
    font-size: var(--ts-xl);
    font-weight: 500;
    color: var(--t1);
}

.swipe-card-origin {
    font-size: var(--ts-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t3);
    margin-top: var(--sp1);
}

.swipe-card-occupation {
    font-size: var(--ts-sm);
    color: var(--accent);
    margin-top: var(--sp1);
}

.swipe-card-backstory {
    font-family: var(--font-prose);
    font-size: var(--ts-sm);
    line-height: 1.5;
    color: var(--t2);
    margin-top: var(--sp3);
    font-style: italic;
}

/* ── Swipe Actions ───────────────────────────────────── */

.swipe-actions {
    display: flex;
    gap: var(--sp4);
    justify-content: center;
    padding: var(--sp2) 0;
}

.swipe-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid;
}

.swipe-btn-pass {
    background: transparent;
    color: var(--t3);
    border-color: var(--border-visible);
}

.swipe-btn-pass:hover {
    background: rgba(255, 80, 80, 0.1);
    color: #f55;
    border-color: #f55;
}

.swipe-btn-match {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.swipe-btn-match:hover {
    background: var(--accent);
    color: var(--bg-base);
}

/* ── Swipe Animations ────────────────────────────────── */

@keyframes slideOutLeft {
    to {
        transform: translateX(-120%) rotate(-10deg);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    to {
        transform: translateX(120%) rotate(10deg);
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(60px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.swipe-card.swipe-left {
    animation: slideOutLeft 300ms ease forwards;
}

.swipe-card.swipe-right {
    animation: slideOutRight 300ms ease forwards;
}

.swipe-card.slide-in {
    animation: slideIn 300ms ease;
}

/* ── Swipe Hint Overlays ─────────────────────────────── */

.swipe-hint {
    position: absolute;
    top: var(--sp4);
    padding: var(--sp2) var(--sp4);
    border-radius: var(--r-md);
    font-size: var(--ts-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.swipe-hint-pass {
    right: var(--sp4);
    color: #f55;
    border: 2px solid #f55;
}

.swipe-hint-match {
    left: var(--sp4);
    color: var(--accent);
    border: 2px solid var(--accent);
}

/* Legacy full-height portrait (confirm step) */
.character-portrait-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 2.5rem;
    font-family: var(--font-prose);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ── Character Selected ──────────────────────────────── */

.character-selected {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.character-selected .creation-label {
    margin-top: var(--sp4);
}

/* ── Three Questions Step ────────────────────────────── */

.three-questions-step {
    background: var(--bg-surface-3);
    border-radius: var(--r-lg);
    padding: var(--sp5);
}

.three-questions-intro {
    font-family: var(--font-prose);
    font-size: var(--ts-base);
    line-height: 1.78;
    color: var(--t2);
    margin-bottom: var(--sp5);
    max-width: 42em;
}

.three-questions-name {
    font-variant: small-caps;
    font-weight: 600;
    color: var(--accent);
    display: inline;
}

/* ── Confirm Step ────────────────────────────────────── */

.confirm-layout {
    display: flex;
    gap: var(--sp5);
    align-items: flex-start;
}

.confirm-portrait-col {
    flex-shrink: 0;
    width: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

.confirm-portrait-stamp {
    width: 140px;
    height: 180px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 2.5rem;
    font-family: var(--font-prose);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.confirm-portrait-meta {
    text-align: center;
}

.confirm-portrait-name {
    font-family: var(--font-prose);
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--t1);
}

.confirm-portrait-origin {
    font-size: var(--ts-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t3);
    margin-top: var(--sp1);
}

.confirm-portrait-experience {
    font-size: var(--ts-xs);
    color: var(--accent);
    margin-top: var(--sp1);
}

.confirm-details-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

.confirm-former-name {
    font-size: var(--ts-sm);
    font-style: italic;
    color: var(--t3);
    margin-top: var(--sp1);
}

.confirm-name-option {
    margin-top: var(--sp4);
    padding-top: var(--sp4);
    border-top: 1px solid var(--border-subtle);
}

.confirm-name-option label {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    font-size: var(--ts-sm);
    color: var(--t2);
    cursor: pointer;
}

.confirm-name-option input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

/* ── Wizard Mobile Responsive ────────────────────────────────────── */

@media (max-width: 680px) {
    .wizard-page {
        padding: 0;
    }

    .wizard-card {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .wizard-header {
        padding: var(--sp3) var(--sp4);
    }

    .wizard-body {
        height: auto;
        flex: 1;
        min-height: 0;
        padding: var(--sp4);
        display: flex;
        flex-direction: column;
    }

    .wizard-footer {
        padding: var(--sp3) var(--sp4);
    }

    .step-counter {
        display: none;
    }

    /* Every creation-step fills the wizard-body */
    .creation-step {
        padding: var(--sp2) 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .creation-step h2 {
        font-size: var(--ts-base);
        margin-bottom: var(--sp3);
        flex-shrink: 0;
    }

    .creation-label {
        flex-shrink: 0;
    }

    /* 3x3 grid: equal square cells, no taglines, pushed to center */
    .experience-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp2);
        flex: 1;
        align-content: center;
    }

    .experience-card {
        height: auto;
        aspect-ratio: 1;
        padding: var(--sp2);
    }

    .experience-card-tagline {
        display: none;
    }

    .experience-card-label {
        font-size: var(--ts-sm);
    }

    .experience-grid-2col {
        grid-template-columns: repeat(2, 1fr);
        max-width: 280px;
        margin: 0 auto;
        width: 100%;
    }

    /* Swipe: fill available space, portrait uses same aspect as confirm stamp */
    .swipe-container {
        flex: 1;
        justify-content: center;
    }

    .swipe-card {
        flex-direction: column;
        max-width: 100%;
        max-height: none;
        flex: 1;
    }

    .swipe-card-portrait {
        width: 100%;
        min-width: unset;
        height: auto;
        flex: 1;
        aspect-ratio: 4 / 3;
    }

    .swipe-card-name {
        font-size: var(--ts-base);
    }

    .swipe-card-body {
        padding: var(--sp3);
        flex: none;
    }

    .swipe-btn {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .swipe-actions {
        padding: var(--sp1) 0;
    }

    /* Confirm: stack vertically, compact */
    .confirm-layout {
        flex-direction: column;
        gap: var(--sp3);
        flex: 1;
    }

    .confirm-portrait-col {
        flex-direction: row;
        width: 100%;
        gap: var(--sp3);
        align-items: center;
        flex-shrink: 0;
    }

    .confirm-portrait-stamp {
        width: 64px;
        height: 80px;
        min-width: 64px;
        font-size: 1.2rem;
        border-radius: var(--r-md);
    }

    .confirm-portrait-meta {
        text-align: left;
    }

    .confirm-details-col {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .creation-textarea {
        height: 64px;
    }

    .creation-name-input {
        font-size: var(--ts-base);
    }
}

/* ── Plan 05: World & Campaign wizard ────────────────────────────── */
.option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp3);
    max-width: 680px;
}

@media (max-width: 680px) {
    .option-grid {
        grid-template-columns: 1fr;
    }
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp2);
    padding: var(--sp4);
    background: var(--bg-s3);
    border: 2px solid var(--b1);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: center;
    transition: all var(--tf);
}

.option-card:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.option-card.selected {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 0 0 1px var(--accent);
}

.option-card-icon {
    font-size: 1.5rem;
}

.option-card-label {
    font-family: var(--prose);
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--t1);
}

.option-card-desc {
    font-size: var(--ts-sm);
    color: var(--t3);
    line-height: 1.4;
}

.tone-chip {
    padding: var(--sp2) var(--sp4);
    background: var(--bg-s3);
    border: 1px solid var(--b2);
    border-radius: var(--r-full);
    font-size: var(--ts-sm);
    cursor: pointer;
    transition: all var(--tf);
    min-height: 44px;
    min-width: 44px;
}

.tone-chip.selected {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp2);
}

.creation-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
    margin-bottom: var(--sp4);
}

.creation-field label {
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t1);
}

.creation-textarea {
    font-family: var(--prose);
    font-size: var(--ts-sm);
    background: var(--bg-s2);
    border: 1px solid var(--b2);
    border-radius: var(--r-md);
    padding: var(--sp3);
    color: var(--t1);
    resize: vertical;
    transition: border-color var(--tn);
    width: 100%;
    height: 90px;
}

.creation-textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.creation-hint {
    font-size: var(--ts-xs);
    color: var(--t3);
    font-style: italic;
    margin-bottom: var(--sp1);
}

.rule-system-card {
    align-items: flex-start;
    text-align: left;
}

.rule-system-difficulty {
    font-size: var(--ts-xs);
    color: var(--accent);
    font-weight: 500;
}

.rule-system-bullets {
    list-style: disc;
    padding-left: var(--sp4);
    margin: var(--sp2) 0 0;
    font-size: var(--ts-sm);
    color: var(--t2);
    line-height: 1.6;
}

.info-callout {
    display: flex;
    gap: var(--sp3);
    align-items: flex-start;
    padding: var(--sp3) var(--sp4);
    background: rgba(122, 154, 170, 0.08);
    border: 1px solid rgba(122, 154, 170, 0.18);
    border-radius: var(--r-lg);
    font-size: var(--ts-sm);
    color: var(--t2);
    line-height: 1.55;
    margin-bottom: var(--sp4);
}

.info-callout svg {
    flex-shrink: 0;
    color: var(--frost);
    margin-top: 1px;
}

.tag-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp1);
    padding: var(--sp1) var(--sp3);
    background: var(--bg-s3);
    border: 1px solid var(--b1);
    border-radius: var(--r-full);
    font-size: var(--ts-xs);
}

.tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--t3);
    font-size: 1rem;
    padding: 0;
    min-width: 20px;
}

.tag-input {
    font-family: var(--prose);
    font-size: var(--ts-sm);
    background: var(--bg-s2);
    border: 1px solid var(--b2);
    border-radius: var(--r-md);
    padding: var(--sp2) var(--sp3);
    color: var(--t1);
}

.tag-input:focus {
    border-color: var(--accent);
    outline: none;
}

.review-card {
    background: var(--bg-s3);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    padding: var(--sp4);
}

.review-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp2) 0;
    border-bottom: 1px solid var(--b0);
}

.review-row:last-child {
    border-bottom: none;
}

.review-label {
    font-size: var(--ts-sm);
    color: var(--t3);
}

.review-value {
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t1);
}

.review-desc {
    font-style: italic;
    color: var(--t2);
    max-width: 60%;
    text-align: right;
}

.help-text {
    font-size: var(--ts-sm);
    color: var(--t3);
    line-height: 1.5;
    margin-top: var(--sp3);
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
    padding: var(--sp4) 0;
    border-bottom: 1px solid var(--b0);
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-label {
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t1);
}

.setting-desc {
    font-size: var(--ts-xs);
    color: var(--t3);
    line-height: 1.4;
}

.pacing-slider {
    width: 100%;
    accent-color: var(--accent);
}

.pacing-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--ts-xs);
    color: var(--t3);
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: var(--sp3);
}

.toggle-switch {
    width: 44px;
    height: 24px;
    accent-color: var(--accent);
}

.player-stepper {
    display: flex;
    align-items: center;
    gap: var(--sp2);
}

.player-stepper button {
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    background: var(--bg-s3);
    border: 1px solid var(--b2);
    font-size: var(--ts-lg);
    cursor: pointer;
    color: var(--t1);
}

.player-stepper button:hover {
    border-color: var(--accent);
}

.player-stepper span {
    font-size: var(--ts-lg);
    font-weight: 500;
    min-width: 2ch;
    text-align: center;
}

.success-state {
    text-align: center;
    padding: var(--sp5);
}

.success-icon {
    font-size: 2rem;
    color: var(--sage);
    margin-bottom: var(--sp3);
}

.invite-link-box {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    background: var(--bg-s3);
    border: 1px solid var(--b1);
    border-radius: var(--r-md);
    padding: var(--sp2) var(--sp3);
    margin: var(--sp3) auto;
    max-width: 480px;
}

.invite-link-box code {
    flex: 1;
    font-size: var(--ts-sm);
    color: var(--t2);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════
   PLAN 07 — GM Prep Tool Restructure
   ══════════════════════════════════════════════════════ */

/* --- Editor Shell (shared across all 5 editor types) --- */
.editor-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.editor-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp3);
    padding: var(--sp3) var(--sp5);
    border-bottom: 1px solid var(--b1);
    background: var(--bg-s1);
}

.editor-title {
    font-size: var(--ts-md);
    font-weight: 600;
    color: var(--t1);
}

.editor-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp5) var(--sp6);
}

.editor-body::-webkit-scrollbar {
    width: 4px;
}

.editor-body::-webkit-scrollbar-thumb {
    background: var(--b2);
    border-radius: 2px;
}

/* Editor More menu */
.editor-more-menu {
    position: relative;
    margin-left: auto;
}

.editor-more-btn {
    background: none;
    border: 1px solid var(--b1);
    border-radius: var(--r-md);
    color: var(--t2);
    padding: var(--sp1) var(--sp2);
    cursor: pointer;
    font-size: var(--ts-sm);
    transition: all var(--tf);
}

.editor-more-btn:hover {
    border-color: var(--b2);
    color: var(--t1);
}

.editor-more-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + var(--sp1));
    background: var(--bg-s2);
    border: 1px solid var(--b2);
    border-radius: var(--r-md);
    padding: var(--sp2);
    min-width: 160px;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.editor-more-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--t2);
    padding: var(--sp2) var(--sp3);
    border-radius: var(--r-md);
    font-size: var(--ts-sm);
    cursor: pointer;
    transition: all var(--tf);
}

.editor-more-dropdown button:hover {
    background: var(--bg-s3);
    color: var(--t1);
}

.editor-more-dropdown .danger {
    color: var(--rose);
}

.editor-more-dropdown .danger:hover {
    background: rgba(176, 80, 80, 0.12);
    color: var(--rose);
}

/* --- Form fields inside editors --- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp1);
    margin-bottom: var(--sp4);
}

.field label {
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t2);
}

.field input, .field textarea, .field select {
    background: var(--bg-s3);
    border: 1px solid var(--b2);
    border-radius: var(--r-md);
    padding: var(--sp2) var(--sp3);
    color: var(--t1);
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    transition: border-color var(--tf);
}

.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.field textarea {
    min-height: 80px;
    resize: vertical;
}

.field-hint {
    font-size: var(--ts-xs);
    color: var(--t3);
    margin-top: var(--sp1);
}

/* --- NPC Bipolar slider --- */
.bipolar-slider-row {
    display: flex;
    align-items: center;
    gap: var(--sp3);
}

.bipolar-label-left, .bipolar-label-right {
    font-size: var(--ts-xs);
    color: var(--t3);
    width: 80px;
    flex-shrink: 0;
}

.bipolar-label-left {
    text-align: right;
}

.bipolar-label-right {
    text-align: left;
}

input[type="range"].bipolar {
    flex: 1;
    accent-color: var(--accent);
}

/* --- Quest objectives reorderable list --- */
.objective-item {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    padding: var(--sp2);
    background: var(--bg-s2);
    border: 1px solid var(--b1);
    border-radius: var(--r-md);
    margin-bottom: var(--sp2);
    transition: all var(--tf);
}

.objective-item:hover {
    border-color: var(--b2);
}

.objective-drag-handle {
    cursor: grab;
    color: var(--t3);
    font-size: var(--ts-sm);
    flex-shrink: 0;
    padding: 0 var(--sp1);
    user-select: none;
}

.objective-drag-handle:active {
    cursor: grabbing;
}

.objective-item input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--t1);
    font-size: var(--ts-base);
    font-family: var(--font-ui);
    padding: var(--sp1);
}

.objective-item input:focus {
    outline: none;
}

.objective-remove {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: var(--sp1);
    font-size: var(--ts-sm);
    transition: color var(--tf);
    flex-shrink: 0;
}

.objective-remove:hover {
    color: var(--rose);
}

/* --- AI Assist buttons (lavender) --- */
.ai-btn {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    width: 100%;
    padding: var(--sp3) var(--sp4);
    background: rgba(155, 138, 176, 0.08);
    border: 1px solid rgba(155, 138, 176, 0.18);
    border-radius: var(--r-md);
    color: var(--lavender);
    font-size: var(--ts-sm);
    cursor: pointer;
    text-align: left;
    transition: all var(--tf);
    margin-bottom: var(--sp2);
    font-family: var(--font-ui);
}

.ai-btn:hover {
    background: rgba(155, 138, 176, 0.15);
    border-color: var(--lavender);
}

.ai-btn:active {
    transform: scale(0.98);
}

/* --- Tree node enhancements --- */
.tree-chevron {
    transition: transform var(--tf);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--t3);
}

.tree-node.expanded > .tree-row > .tree-chevron,
.campaign-tree-node.expanded > .campaign-tree-node__row > .tree-chevron {
    transform: rotate(90deg);
}

/* Tree node type colored indicators */
.node-zone {
    --node-color: var(--slate);
}

.node-room {
    --node-color: var(--frost);
}

.node-npc {
    --node-color: var(--sage);
}

.node-quest {
    --node-color: var(--quest);
}

.node-item {
    --node-color: var(--accent);
}

.tree-node, .campaign-tree-node__row {
    min-height: 44px;
}

.campaign-tree-node__row {
    border-left: 2px solid transparent;
}

.campaign-tree-node__row.node-zone {
    border-left-color: var(--slate);
}

.campaign-tree-node__row.node-room {
    border-left-color: var(--frost);
}

.campaign-tree-node__row.node-npc {
    border-left-color: var(--sage);
}

.campaign-tree-node__row.node-quest {
    border-left-color: var(--quest);
}

.campaign-tree-node__row.node-item {
    border-left-color: var(--accent);
}

/* Selected tree node (Plan 07) */
.tree-node.selected,
.campaign-tree-node__row--selected {
    background: var(--accent-subtle);
    border-left: 2px solid var(--accent);
}

/* Inline tree nodes (CampaignTree direct rendering) */
.tree-zone__row, .tree-npc, .tree-room, .tree-quest, .tree-item, .tree-plan {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.tree-zone__row {
    border-left: 2px solid var(--slate);
    padding-left: var(--sp2);
}

.tree-room {
    border-left: 2px solid var(--frost);
}

.tree-npc {
    border-left: 2px solid var(--sage);
}

.tree-quest {
    border-left: 2px solid var(--quest);
}

.tree-item {
    border-left: 2px solid var(--accent);
}

/* --- Empty editor state --- */
.empty-editor-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--sp4);
    color: var(--t3);
    text-align: center;
    padding: var(--sp7);
}

.empty-editor-state__icon {
    font-size: 2.5rem;
    opacity: 0.3;
}

.empty-editor-state__text {
    font-size: var(--ts-sm);
    max-width: 280px;
    line-height: 1.6;
}

.empty-editor-state__actions {
    display: flex;
    gap: var(--sp2);
    flex-wrap: wrap;
    justify-content: center;
}

/* --- Responsive: GM Prep layout --- */
@media (max-width: 1200px) {
    .gm-prep-layout__right {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 50vh;
        z-index: 30;
        border-top: 1px solid var(--gm-surface-light);
        border-left: none;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .gm-prep-layout__right.open {
        transform: translateY(0);
    }

    .gm-prep-layout__bottom .right-panel-toggle {
        display: inline-flex;
    }
}

@media (min-width: 1201px) {
    .gm-prep-layout__bottom .right-panel-toggle {
        display: none;
    }
}

@media (max-width: 768px) {
    .gm-prep-layout__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .gm-prep-layout__sidebar.open {
        transform: translateX(0);
    }

    .gm-prep-layout__bottom .sidebar-toggle {
        display: inline-flex;
    }
}

@media (min-width: 769px) {
    .gm-prep-layout__bottom .sidebar-toggle {
        display: none;
    }
}

/* --- Sidebar tab style (workspace-tab pattern from Plan 06) --- */
.prep-tab.workspace-tab {
    flex: 1;
    padding: var(--sp2) var(--sp3);
    font-size: var(--ts-xs);
    font-weight: 500;
    color: var(--t3);
    text-align: center;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--tf);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.prep-tab.workspace-tab:hover {
    color: var(--t2);
}

.prep-tab.workspace-tab.prep-tab--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ============================================================
   Plan 08 — Staff Review
   ============================================================ */

/* ── Queue Filter Tabs ─────────────────────────────── */
.queue-filters {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--b1);
    padding: 0 var(--sp5);
    align-items: stretch;
}

.queue-filter-tab {
    padding: var(--sp3) var(--sp4);
    min-height: 44px;
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--t3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp2);
    transition: color var(--tf);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.queue-filter-tab:hover {
    color: var(--t2);
}

.queue-filter-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-count {
    font-family: var(--font-mono);
    font-size: var(--ts-xs);
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: var(--bg-s3);
}

.queue-filter-tab.active .tab-count {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* ── Queue Item Cards ──────────────────────────────── */
.queue-item {
    display: flex;
    align-items: center;
    gap: var(--sp4);
    padding: var(--sp3) var(--sp5);
    border-bottom: 1px solid var(--b0);
    cursor: pointer;
    transition: background var(--tf);
}

.queue-item:hover {
    background: var(--bg-s2);
}

.queue-item.selected {
    background: var(--accent-subtle);
    border-left: 3px solid var(--accent);
}

.queue-item.expedited {
    border-left: 3px solid var(--color-ochre);
}

.queue-item-title {
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.queue-item-type {
    font-size: var(--ts-sm);
    color: var(--t2);
    flex-shrink: 0;
}

.queue-item-meta {
    font-size: var(--ts-xs);
    color: var(--t3);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.queue-item-actions {
    display: flex;
    gap: var(--sp2);
    opacity: 0;
    transition: opacity var(--tf);
    flex-shrink: 0;
}

.queue-item:hover .queue-item-actions,
.queue-item.selected .queue-item-actions {
    opacity: 1;
}

.queue-empty {
    padding: var(--sp5);
    color: var(--t3);
    text-align: center;
}

/* ── Status Badges ─────────────────────────────────── */
.status-badge {
    font-size: var(--ts-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.status-badge.pending {
    background: rgba(122, 154, 170, 0.12);
    color: var(--frost);
}

.status-badge.approved {
    background: rgba(122, 155, 130, 0.12);
    color: var(--sage);
}

.status-badge.rejected {
    background: rgba(176, 120, 120, 0.12);
    color: var(--rose);
}

/* ── Master-Detail Split ───────────────────────────── */
.staff-review-split {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.staff-review-queue {
    width: 360px;
    min-width: 360px;
    overflow-y: auto;
    border-right: 1px solid var(--b1);
}

.staff-review-detail {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp5);
    background: var(--bg-surface-1);
}

/* ── Detail Header ─────────────────────────────────── */
.detail-header {
    margin-bottom: var(--sp4);
}

.detail-header-info {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    flex-wrap: wrap;
    margin-bottom: var(--sp2);
}

.detail-header-info h1, .detail-header-info h2 {
    font-size: var(--ts-lg);
    margin: 0;
}

.detail-header-meta {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    flex-wrap: wrap;
    margin-bottom: var(--sp3);
}

/* ── Detail Body (collapsible sections) ────────────── */
.detail-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}

.detail-section {
    background: var(--bg-surface-2);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.detail-section summary {
    padding: var(--sp3) var(--sp4);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--ts-sm);
    color: var(--t1);
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: background var(--tf);
}

.detail-section summary:hover {
    background: var(--bg-s3);
}

.detail-section-body {
    padding: var(--sp3) var(--sp4);
}

/* ── Review Action Buttons ─────────────────────────── */
.review-actions {
    display: flex;
    gap: var(--sp2);
    flex-wrap: wrap;
    margin-top: var(--sp3);
}

.btn-sm {
    font-size: var(--ts-sm);
    font-weight: 500;
    font-family: var(--font-ui);
    padding: var(--sp2) var(--sp3);
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--r-md);
    cursor: pointer;
    border: 1px solid var(--b2);
    background: var(--bg-s3);
    color: var(--t1);
    transition: background var(--tf), border-color var(--tf);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp1);
}

.btn-sm:hover {
    background: var(--bg-surface-3);
    border-color: var(--t3);
}

.btn-approve {
    background: rgba(122, 155, 130, 0.12);
    color: var(--sage);
    border-color: rgba(122, 155, 130, 0.3);
}

.btn-approve:hover {
    background: rgba(122, 155, 130, 0.22);
    border-color: var(--sage);
}

.btn-reject {
    background: rgba(176, 120, 120, 0.08);
    color: var(--rose);
    border-color: rgba(176, 120, 120, 0.2);
}

.btn-reject:hover {
    background: rgba(176, 120, 120, 0.18);
    border-color: var(--rose);
}

.btn-escalate {
    background: var(--bg-s3);
    color: var(--t1);
    border-color: var(--b2);
}

.btn-escalate:hover {
    background: var(--bg-surface-3);
    border-color: var(--t3);
}

.btn-delete {
    background: rgba(176, 80, 80, 0.08);
    color: var(--rose);
    border-color: rgba(176, 80, 80, 0.25);
}

.btn-delete:hover {
    background: rgba(176, 80, 80, 0.22);
    border-color: var(--rose);
}

.btn-recrop {
    background: rgba(120, 140, 176, 0.08);
    color: var(--cyan, #88aacc);
    border-color: rgba(120, 140, 176, 0.25);
}

.btn-recrop:hover {
    background: rgba(120, 140, 176, 0.22);
    border-color: var(--cyan, #88aacc);
}

/* ── Rejection Inline Form ─────────────────────────── */
.rejection-form {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--tn) ease;
}

.rejection-form.open {
    max-height: 200px;
}

.rejection-textarea {
    width: 100%;
    margin-top: var(--sp3);
    background: var(--bg-s3);
    border: 1px solid var(--rose);
    border-radius: var(--r-md);
    padding: var(--sp3);
    color: var(--t1);
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    resize: vertical;
    min-height: 80px;
}

.rejection-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(176, 120, 120, 0.2);
}

/* ── Breaking Change Banner ────────────────────────── */
.breaking-change-banner {
    display: flex;
    gap: var(--sp3);
    align-items: flex-start;
    padding: var(--sp4);
    background: rgba(176, 120, 120, 0.08);
    border: 1px solid rgba(176, 120, 120, 0.25);
    border-left: 4px solid var(--rose);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp4);
    box-shadow: var(--e1);
}

.breaking-change-banner.overridden {
    opacity: 0.6;
}

.breaking-change-title {
    font-size: var(--ts-sm);
    font-weight: 600;
    color: var(--rose);
    margin-bottom: var(--sp2);
}

/* ── World Map Upload Prompt ──────────────────────── */
.world-map-upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    border: 2px dashed var(--b2);
    border-radius: var(--r-lg);
    background: var(--bg-surface-2);
    text-align: center;
    padding: var(--sp5);
}

.world-map-upload-hint {
    font-size: var(--ts-sm);
    color: var(--t3);
    margin-top: var(--sp3);
}

.wb-upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp3);
}

.wb-upload-prompt p {
    font-size: var(--ts-sm);
    color: var(--t3);
}

/* ── POI Color Picker ────────────────────────────── */
.poi-color-picker {
    display: flex;
    gap: var(--sp1);
    flex-wrap: wrap;
}

.poi-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--tf), transform var(--tf);
}

.poi-color-swatch:hover {
    transform: scale(1.15);
}

.poi-color-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--b1);
}

/* ── POI Image Upload Slots ──────────────────────── */
.poi-image-slots {
    display: flex;
    gap: var(--sp2);
    flex-wrap: wrap;
}

.poi-image-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp1);
    flex: 1;
    min-width: 70px;
}

.poi-image-slot__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.poi-image-slot__preview {
    width: 100%;
    max-width: 100px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--b1);
}

.poi-image-slot__empty {
    width: 100%;
    max-width: 100px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-2);
    border: 1px dashed var(--b2);
    border-radius: var(--r-sm);
    font-size: 10px;
    color: var(--t3);
}

.poi-image-slot__upload {
    font-size: 10px;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

.poi-image-slot__upload input[type="file"] {
    display: none;
}

/* ── Properties Panel (World Builder) ─────────────── */
.prop-section {
    padding: var(--sp3) 0;
    border-bottom: 1px solid var(--b1);
}

.prop-section:last-child {
    border-bottom: none;
}

.prop-section-title {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp2);
}

.prop-field {
    margin-bottom: var(--sp2);
}

.prop-field label {
    display: block;
    font-size: var(--ts-xs);
    color: var(--t3);
    margin-bottom: 2px;
}

.prop-field input, .prop-field textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-surface-2);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
    padding: var(--sp1) var(--sp2);
    color: var(--t1);
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
}

.prop-field input:focus, .prop-field textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.prop-field textarea {
    resize: vertical;
}

.prop-readonly {
    font-size: var(--ts-xs);
    color: var(--t2);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

/* Staff shell: a viewport-height flex column so the nav stays fixed and the content
   area (.staff-main → .review-layout → .staff-page) gets a definite height and can
   scroll internally. Without this the height chain collapses to content height and
   pages whose content exceeds the viewport (e.g. a list/detail split plus a section
   below it) clip the overflow with no way to scroll to it. */
.staff-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.staff-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Staff Navigation Bar ─────────────────────────── */
.staff-nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--sp5);
    padding: 0 var(--sp4);
    gap: var(--sp4);
    min-height: 48px;
    flex: 0 0 auto;
}

.staff-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    text-decoration: none;
    color: var(--t1);
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: var(--sp2) 0;
    margin-right: var(--sp3);
    flex-shrink: 0;
    transition: color var(--tf);
}

.staff-nav__brand:hover {
    color: var(--accent);
}

.staff-nav__brand img {
    opacity: 0.85;
    transition: opacity var(--tf);
}

.staff-nav__brand:hover img {
    opacity: 1;
}

.staff-nav__tabs {
    display: flex;
    gap: var(--sp1);
    align-items: stretch;
}

.staff-nav-tab {
    padding: var(--sp3) var(--sp4);
    text-decoration: none;
    color: var(--t3);
    font-family: var(--font-ui);
    font-size: var(--ts-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--tf), border-color var(--tf);
}

.staff-nav-tab:hover {
    color: var(--t2);
    border-bottom-color: var(--border-visible);
}

.staff-nav-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* Global staff "current world" selector — sits between brand and tabs and pushes
   the tabs to the right edge so the picker stays visually anchored to the brand. */
.staff-nav__world {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.staff-nav__world .entity-picker {
    margin: 0;
}

.staff-nav__world .entity-picker__label {
    font-size: var(--ts-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t3);
    margin-right: var(--sp2);
}

/* ── POI Tree Browser ─────────────────────────────── */
.poi-tree-browser h3 {
    font-size: var(--ts-sm);
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--sp2);
    margin-bottom: var(--sp2);
}

.poi-tree, .poi-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.poi-tree-children {
    padding-left: var(--sp2);
    border-left: 1px solid var(--b1);
    margin-left: 6px;
}

.poi-tree-node {
    margin: 0;
    padding: 0;
}

.tree-node-row {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 32px;
    border-radius: var(--r-sm);
    transition: background var(--tf);
}

.tree-node-row:hover {
    background: var(--bg-surface-2);
}

.poi-tree-node.selected > .tree-node-row {
    background: var(--accent-subtle);
}

/* Expand/collapse button */
.tree-expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
    color: var(--t2);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tf);
    line-height: 1;
    padding: 0;
    margin-right: var(--sp1);
}

.tree-expand-toggle:hover {
    background: var(--bg-surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

.tree-expand-icon {
    display: block;
    line-height: 1;
}

/* Spacer for leaf nodes (matches toggle width + margin) */
.tree-expand-spacer {
    width: 20px;
    flex-shrink: 0;
    margin-right: var(--sp1);
}

/* Selectable area (name, type, indicator) */
.tree-node-select {
    display: flex;
    align-items: center;
    gap: var(--sp1);
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: var(--sp1) var(--sp1);
    border-radius: var(--r-sm);
}

/* Map indicator dot */
.tree-indicator {
    font-size: 8px;
    flex-shrink: 0;
    line-height: 1;
}

.indicator-has-map {
    color: var(--sage);
}

.indicator-no-map {
    color: var(--t3);
    opacity: 0.4;
}

/* Node name */
.tree-node-name {
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    color: var(--t1);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poi-tree-node.selected .tree-node-name {
    color: var(--accent);
}

/* Node type badge */
.tree-node-type {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Unmapped children badge */
.tree-unmapped-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--bg-s3);
    color: var(--t3);
    padding: 0 4px;
    border-radius: var(--r-full);
    flex-shrink: 0;
}

/* Pending placeholder row — rendered while a district generation pipeline
   is in flight. Italic, muted, with a spinning glyph; not selectable. */
.poi-tree-node--pending {
    opacity: 0.7;
    pointer-events: none;
}

.tree-node-select--pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tree-node-name--pending {
    font-style: italic;
    color: var(--t2);
}

.tree-pending-spinner {
    display: inline-block;
    font-size: 11px;
    color: var(--t3);
    animation: tree-pending-spin 1.2s linear infinite;
}

@keyframes tree-pending-spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.tree-empty {
    font-size: var(--ts-xs);
    color: var(--t3);
    padding: var(--sp2);
}

/* ── Staff Review Page Layout ──────────────────────── */
.staff-review-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.staff-review-page h1 {
    padding: var(--sp4) var(--sp5) 0;
    font-size: var(--ts-lg);
}

/* ── Review page: left sidebar (QA links) + main (Reviewable queue) ── */
.review-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.review-sidebar {
    flex: 0 0 220px;
    padding: var(--sp4) var(--sp4);
    border-right: 1px solid var(--b1, var(--border-subtle));
    overflow-y: auto;
    background: var(--bg-surface-1);
}

.review-sidebar__heading {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 var(--sp3) var(--sp2);
}

.review-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-sidebar__link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius, 4px);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.review-sidebar__link:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
}

.review-sidebar__link.active {
    color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 600;
}

.review-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.review-main__heading {
    padding: var(--sp4) var(--sp5) 0;
    font-size: var(--ts-md, 1rem);
    margin: 0;
}

/* ── Mobile: detail as full-page drawer ────────────── */
@media (max-width: 768px) {
    .staff-review-split {
        flex-direction: column;
    }

    .staff-review-queue {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--b1);
    }

    .staff-review-detail {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: var(--bg-surface-1);
        transform: translateY(100%);
        transition: transform var(--tn) ease;
    }

    .staff-review-detail.open {
        transform: translateY(0);
    }
}

/* ===================================================================
   Plan 09 — Auth Pages (Login, Register, Profile)
   =================================================================== */

/* --- Shared auth layout --- */
.auth-page {
    min-height: 100dvh;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp5) var(--sp4);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-s2);
    border: 1px solid var(--b1);
    border-radius: var(--r-xl);
    box-shadow: var(--e3);
    padding: var(--sp6);
}

.auth-card-title {
    font-size: var(--ts-lg);
    font-weight: 600;
    color: var(--t1);
    margin: 0 0 var(--sp5);
}

/* --- Brand mark / wordmark --- */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp3);
    margin-bottom: var(--sp5);
}

.auth-logo {
    width: 72px;
    height: 72px;
}

.auth-wordmark {
    font-family: var(--prose);
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--t1);
    letter-spacing: -0.02em;
    text-align: center;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: var(--sp2);
}

.brand-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--prose);
    font-size: var(--ts-lg);
    font-weight: 300;
    color: var(--t1);
}

/* --- OAuth buttons --- */
.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp3);
    width: 100%;
    padding: var(--sp3);
    background: var(--bg-s3);
    border: 1px solid var(--b2);
    border-radius: var(--r-md);
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--t1);
    cursor: pointer;
    transition: all var(--tf);
    min-height: 44px;
    margin-bottom: var(--sp2);
    text-decoration: none;
}

.oauth-btn:hover {
    background: var(--bg-s4);
    border-color: var(--b2);
    box-shadow: var(--e1);
}

.oauth-btn:active {
    transform: scale(0.98);
}

.oauth-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Divider --- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    margin: var(--sp4) 0;
    color: var(--t3);
    font-size: var(--ts-xs);
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--b1);
}

/* --- Auth form extras --- */
.auth-forgot-link {
    font-size: var(--ts-xs);
    color: var(--accent);
    text-decoration: none;
    align-self: flex-end;
}

.auth-forgot-link:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    min-height: 44px;
    margin-top: var(--sp3);
}

.auth-footer {
    text-align: center;
    margin-top: var(--sp5);
    font-size: var(--ts-sm);
    color: var(--t3);
}

.auth-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-terms label {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    font-size: var(--ts-sm);
    color: var(--t2);
    cursor: pointer;
}

.auth-terms a {
    color: var(--accent);
    text-decoration: none;
}

.auth-terms a:hover {
    text-decoration: underline;
}

/* --- Field error (inline below field) --- */
.field-error {
    font-size: var(--ts-xs);
    color: var(--rose);
    margin: var(--sp1) 0 0;
}

/* --- Loading spinner on submit --- */
.btn-loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: var(--sp2);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Username availability check --- */
.input-with-status {
    position: relative;
}

.input-with-status input {
    width: 100%;
    padding-right: var(--sp6);
}

.input-status-icon {
    position: absolute;
    right: var(--sp3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.input-status-icon.available {
    color: var(--sage);
}

.input-status-icon.taken {
    color: var(--rose);
}

/* --- Password strength indicator --- */
.password-strength-bar {
    height: 4px;
    border-radius: var(--r-full);
    background: var(--bg-s4);
    margin-top: var(--sp1);
    overflow: hidden;
}

.password-strength-fill {
    height: 100%;
    border-radius: var(--r-full);
    transition: width var(--tn), background var(--tn);
}

.strength-weak .password-strength-fill {
    width: 25%;
    background: var(--rose);
}

.strength-fair .password-strength-fill {
    width: 50%;
    background: var(--ochre);
}

.strength-good .password-strength-fill {
    width: 75%;
    background: var(--frost);
}

.strength-strong .password-strength-fill {
    width: 100%;
    background: var(--sage);
}

/* --- Profile sections --- */
.profile-section {
    background: var(--bg-s2);
    border: 1px solid var(--b1);
    border-radius: var(--r-xl);
    padding: var(--sp5);
    box-shadow: var(--e1);
    margin-bottom: var(--sp4);
}

.profile-section-title {
    font-size: var(--ts-md);
    font-weight: 600;
    color: var(--t1);
    margin-bottom: var(--sp4);
    padding-bottom: var(--sp3);
    border-bottom: 1px solid var(--b0);
}

.danger-section {
    background: rgba(176, 120, 120, 0.04);
    border-color: rgba(176, 120, 120, 0.15);
}

.danger-section .profile-section-title {
    color: var(--rose);
}

/* ============================================================
   POI MAP — unified map renderer
   ============================================================ */

.poi-map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.poi-map-outer {
    position: relative;
    display: flex;
    justify-content: center;
}

.poi-map-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    pointer-events: none;
}

.poi-map-graph {
    position: relative;
    width: 200px;
    height: 240px;
    flex-shrink: 0;
}

.poi-map-node-wrapper.hidden {
    display: none;
}

.poi-map-node-wrapper.dimmed {
    opacity: 0.35;
}

/* Edge line variants */
.map-edge.edge-normal {
    stroke: var(--border-subtle);
    stroke-opacity: 0.6;
}

.map-edge.edge-locked {
    stroke: var(--rose, #b07878);
    stroke-opacity: 0.8;
}

.map-edge.edge-hidden {
    stroke: var(--border-subtle);
    stroke-opacity: 0.4;
    stroke-dasharray: 40 30;
}

.map-edge-label {
    font-size: 6px;
    fill: var(--text-tertiary);
    font-family: var(--font-ui);
}

/* Visited marker styling */
.map-marker.visited .map-marker-icon {
    border-color: var(--text-secondary);
}

.map-marker.leaf .map-marker-icon {
    border-radius: 4px;
}

/* POI map legend */
.poi-map-legend {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.poi-map-legend .legend-hex,
.poi-map-legend .legend-circle {
    font-size: 14px;
    line-height: 1;
}

/* ── WorldMapView SVG Styles (global — scoped CSS breaks MarkupString text) ── */
/* viewBox is 0 0 1024 1024 — values in viewBox units */
.poi-circle-visited {
    fill: var(--accent-subtle, rgba(99, 102, 241, 0.3));
    stroke: var(--accent, #6366f1);
    stroke-width: 5;
    opacity: 1;
    cursor: pointer;
    transition: fill 150ms ease;
}

.poi-circle-visited.container {
    stroke-width: 8;
}

.poi-circle-visited.leaf {
    stroke-width: 5;
}

.poi-circle-visited:hover {
    fill: rgba(255, 255, 255, 0.35);
    stroke-width: 8;
}

.poi-circle-revealed {
    fill: var(--bg-surface-2, #1e1e2e);
    stroke: var(--border-visible, #888);
    stroke-width: 4;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.poi-circle-revealed.container {
    stroke-width: 6;
}

.poi-circle-revealed.leaf {
    stroke-width: 4;
}

.poi-circle-revealed:hover {
    opacity: 0.8;
    fill: rgba(255, 255, 255, 0.2);
}

.poi-circle-unknown {
    fill: url(#redacted-pattern);
    stroke: var(--border-subtle, #333);
    stroke-width: 2;
    pointer-events: none;
}

.poi-circle-current {
    stroke: #f0c040;
    stroke-width: 8;
    filter: drop-shadow(0 0 15px #f0c040);
    animation: wm-pulse 2s ease-in-out infinite;
}

@keyframes wm-pulse {
    0%, 100% {
        stroke-width: 8;
        filter: drop-shadow(0 0 15px #f0c040);
    }
    50% {
        stroke-width: 12;
        filter: drop-shadow(0 0 30px #f0c040);
    }
}

.world-map-label {
    font-size: 16px;
    fill: #fff;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    pointer-events: none;
    stroke: rgba(0, 0, 0, 0.8);
    stroke-width: 2px;
    paint-order: stroke fill;
    stroke-linejoin: round;
}

.container-outer-ring {
    stroke: var(--accent, #6366f1);
    stroke-width: 5;
    stroke-dasharray: 15 8;
    stroke-opacity: 0.8;
    pointer-events: none;
}

.sibling-dimmed {
    opacity: 0.5;
    transition: opacity 150ms ease;
}

.search-dimmed {
    opacity: 0.3;
    transition: opacity 150ms ease;
}

.poi-circle-highlighted {
    stroke: #ffeb3b;
    animation: wm-highlight 1s ease-in-out 3;
}

@keyframes wm-highlight {
    0%, 100% {
        stroke-width: 3;
        stroke: var(--accent, #6366f1);
    }
    50% {
        stroke-width: 10;
        stroke: #ffeb3b;
    }
}

/* ── POI group hover — scale circle 10%, text 50% ─── */
.poi-group {
    transition: transform 100ms ease;
}

.poi-group:hover .world-map-label {
    font-size: 22px;
    fill: #fff;
    transition: font-size 100ms ease;
}

.poi-group:hover .poi-circle-visited,
.poi-group:hover .poi-circle-revealed {
    stroke-width: 5;
    fill: rgba(255, 255, 255, 0.25);
}

.poi-group:hover .container-outer-ring {
    stroke-opacity: 1;
    stroke-width: 5;
}

.map-edge {
    stroke-linecap: round;
    filter: url(#poi-glow);
}

.map-edge.edge-normal {
    stroke: rgba(220, 220, 220, 0.85);
}

.map-edge.edge-locked {
    stroke: rgba(220, 130, 130, 0.9);
}

.map-edge:hover {
    stroke: rgba(255, 230, 120, 1);
    stroke-width: 12;
    cursor: context-menu;
}

/* No-image editor canvas: edges with no glow (since they're already on a flat dark background) */
.map-edge-no-bg {
    filter: none;
}

.map-edge-no-bg.edge-normal {
    stroke: rgba(120, 180, 255, 0.95);
}

.map-edge-no-bg.edge-locked {
    stroke: rgba(220, 130, 130, 0.95);
}

.map-edge-no-bg:hover {
    stroke: rgba(255, 230, 120, 1);
    stroke-width: 12;
}

/* ── World Map Panel Breadcrumb ───────────────────── */
.map-panel-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp1);
    padding: var(--sp2) var(--sp3);
    font-size: var(--ts-xs);
    font-family: var(--font-ui);
    border-bottom: 1px solid var(--b1);
}

.map-panel-crumb {
    color: var(--t3);
    cursor: pointer;
    transition: color var(--tf);
}

.map-panel-crumb:hover {
    color: var(--accent);
}

.map-panel-crumb-sep {
    color: var(--t3);
    opacity: 0.5;
    user-select: none;
}

.map-panel-crumb-current {
    color: var(--t1);
    font-weight: 600;
}

/* ── Travel Confirmation Overlay ─────────────────── */
.travel-confirm-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 50;
}

.travel-confirm-dialog {
    background: var(--bg-surface-1, #1e1e2e);
    border: 1px solid var(--b1, #333);
    border-radius: var(--r2, 8px);
    padding: var(--sp4, 1.5rem) var(--sp5, 2rem);
    text-align: center;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.travel-confirm-dialog p {
    margin: 0 0 var(--sp3, 1rem);
    font-size: var(--ts-sm, 0.875rem);
    color: var(--t1, #e0e0e0);
}

.travel-confirm-actions {
    display: flex;
    gap: var(--sp2, 0.5rem);
    justify-content: center;
}

.travel-confirm-actions .btn {
    min-width: 80px;
    padding: var(--sp1, 0.25rem) var(--sp3, 1rem);
    border-radius: var(--r1, 4px);
    border: 1px solid var(--b1, #333);
    font-size: var(--ts-sm, 0.875rem);
    cursor: pointer;
    transition: background var(--tf, 150ms) ease;
}

.travel-confirm-actions .btn-primary {
    background: var(--accent, #6366f1);
    color: #fff;
    border-color: var(--accent, #6366f1);
}

.travel-confirm-actions .btn-primary:hover {
    filter: brightness(1.15);
}

.travel-confirm-actions .btn-secondary {
    background: var(--bg-surface-2, #2a2a3e);
    color: var(--t2, #aaa);
}

.travel-confirm-actions .btn-secondary:hover {
    background: var(--bg-surface-3, #333);
}

/* ── World Map Editor ── */

.wme-canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #1a1208;
}

.wme-svg {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(232, 213, 163, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ── Upload button ── */
.wme-upload-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background-color: #c9882a;
    color: #1a1208;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.wme-upload-btn:hover {
    opacity: 0.9;
}

/* ── Connection paths ── */
.wme-connection-path {
    stroke: #8b6914;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 5, 5;
    pointer-events: none;
}

/* ── Zone card ── */
.wme-zone-card {
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    background-color: #2a1e10;
    border: 1px solid #3a2a18;
    border-left-width: 4px;
    cursor: move;
    transition: box-shadow 150ms ease;
    box-sizing: border-box;
    overflow: hidden;
}

.wme-zone-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.wme-zone-card--campaign {
    border-left-color: #c9882a;
}

.wme-zone-card--world {
    border-left-color: #666;
}

.wme-zone-card--selected {
    border: 2px solid #c9882a;
    box-shadow: 0 0 20px #c9882a;
}

.wme-zone-card--selected.wme-zone-card--campaign {
    border-left-color: #c9882a;
    border-left-width: 4px;
}

.wme-zone-card--selected.wme-zone-card--world {
    border-left-color: #666;
    border-left-width: 4px;
}

.wme-zone-card__body {
    padding: 0.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wme-zone-card__top {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.wme-zone-card__info {
    flex: 1;
    min-width: 0;
}

.wme-zone-card__name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e8d5a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wme-zone-card__terrain {
    font-size: 0.75rem;
    color: #e8d5a3;
    opacity: 0.6;
}

.wme-zone-card__spacer {
    flex: 1;
}

.wme-zone-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wme-zone-card__badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: #1a1208;
}

.wme-zone-card__badge--campaign {
    background-color: #8b6914;
}

.wme-zone-card__badge--world {
    background-color: #444;
}

.wme-zone-card__badge--rooms {
    background-color: #8b6914;
}

/* ── Add Zone FAB ── */
.wme-fab {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #c9882a;
    color: #1a1208;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transition: transform 150ms ease;
}

.wme-fab:hover {
    transform: scale(1.1);
}

/* ── List view ── */
.wme-list-container {
    padding: 1.5rem;
    overflow-y: auto;
    height: 100%;
    background-color: #1a1208;
}

.wme-list-heading {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    color: #c9882a;
    margin-bottom: 1.5rem;
}

.wme-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wme-list-card {
    padding: 1rem;
    border-radius: 0.375rem;
    background-color: #2a1e10;
    border: 1px solid #3a2a18;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.wme-list-card:hover {
    opacity: 0.9;
}

.wme-list-card--selected {
    border: 2px solid #c9882a;
}

.wme-list-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.wme-list-card__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e8d5a3;
}

.wme-list-card__subtitle {
    font-size: 0.875rem;
    color: #e8d5a3;
    opacity: 0.8;
}

/* ── Source badge (list view uses full words) ── */
.wme-source-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    color: #1a1208;
}

.wme-source-badge--campaign {
    background-color: #c9882a;
}

.wme-source-badge--world {
    background-color: #666;
}

/* ── Shared icon sizing ── */
.wme-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.wme-icon--sm {
    width: 1rem;
    height: 1rem;
}

.wme-icon--md {
    width: 1.25rem;
    height: 1.25rem;
}

.wme-icon--lg {
    width: 1.5rem;
    height: 1.5rem;
}

.wme-icon--gold {
    color: #c9882a;
}

/* ═══════════════════════════════════════════════════════════════
   Room Editor Split View (Plan 6, Ch5)
   ═══════════════════════════════════════════════════════════════ */
.room-editor-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    background: #3a2a18;
    border-radius: 3px;
    outline: none;
}

.room-editor-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c9882a;
    cursor: pointer;
    border: 2px solid #8b6914;
}

.room-editor-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c9882a;
    cursor: pointer;
    border: 2px solid #8b6914;
}

.room-editor-slider::-moz-range-track {
    height: 6px;
    background: #3a2a18;
    border-radius: 3px;
}

/* ── Zone Editor Canvas ── */

.zec-canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #1a1208;
}

.zec-svg {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(232, 213, 163, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ── Zone header bar ── */
.zec-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: rgba(26, 18, 8, 0.92);
    border-bottom: 1px solid #3a2a18;
}

.zec-header__title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #e8d5a3;
}

.zec-header__count {
    font-size: 0.75rem;
    color: #e8d5a3;
    opacity: 0.6;
    margin-left: auto;
}

/* ── Connection lines ── */
.zec-connection {
    stroke: #8b6914;
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

/* ── Room card ── */
.zec-room-card {
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    background-color: #2a1e10;
    border: 1px solid #3a2a18;
    border-left-width: 4px;
    border-left-color: #c9882a;
    cursor: move;
    transition: box-shadow 150ms ease;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.zec-room-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.zec-room-card--selected {
    border: 2px solid #c9882a;
    box-shadow: 0 0 20px #c9882a;
}

.zec-room-card--sealed {
    border-left-color: #666;
    opacity: 0.7;
}

.zec-room-card__header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.zec-room-card__name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e8d5a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.zec-room-card__status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.zec-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zec-status-dot--draft {
    background-color: #888;
}

.zec-status-dot--active {
    background-color: #4caf50;
}

.zec-status-dot--published {
    background-color: #c9882a;
}

.zec-status-dot--archived {
    background-color: #666;
}

.zec-status-label {
    font-size: 0.625rem;
    color: #e8d5a3;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zec-room-card__stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.zec-stat {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.625rem;
    color: #e8d5a3;
    opacity: 0.8;
}

.zec-room-card__sealed-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    color: #666;
}

/* ── Add Room FAB ── */
.zec-fab {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #c9882a;
    color: #1a1208;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    transition: transform 150ms ease;
}

.zec-fab:hover {
    transform: scale(1.1);
}

/* ── List view ── */
.zec-list-container {
    padding: 1.5rem;
    overflow-y: auto;
    height: 100%;
    background-color: #1a1208;
}

.zec-list-heading {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    color: #c9882a;
    margin-bottom: 1.5rem;
}

.zec-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.zec-list-card {
    padding: 1rem;
    border-radius: 0.375rem;
    background-color: #2a1e10;
    border: 1px solid #3a2a18;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.zec-list-card:hover {
    opacity: 0.9;
}

.zec-list-card--selected {
    border: 2px solid #c9882a;
}

.zec-list-card--sealed {
    opacity: 0.7;
}

.zec-list-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.zec-list-card__name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e8d5a3;
}

.zec-list-card__subtitle {
    font-size: 0.875rem;
    color: #e8d5a3;
    opacity: 0.8;
}

/* ── Shared ZEC icon sizing ── */
.zec-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.zec-icon--sm {
    width: 1rem;
    height: 1rem;
}

.zec-icon--md {
    width: 1.25rem;
    height: 1.25rem;
}

.zec-icon--lg {
    width: 1.5rem;
    height: 1.5rem;
}

.zec-icon--gold {
    color: #c9882a;
}

/* ============================================================
   Player Maps — Room Map Panel & Map View Toggle (Plan 6, Ch12)
   ============================================================ */

/* ── Map View Toggle ── */
.map-view-toggle {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    justify-content: center;
}

.map-toggle-btn {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-surface-2, #2a1e10);
    color: var(--text-secondary, #a89070);
    border: 1px solid var(--border-visible, #3a2a18);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.map-toggle-btn:hover {
    background: var(--bg-surface-3, #3a2a18);
}

.map-toggle-btn.active {
    background: var(--accent, #c9882a);
    color: var(--bg-base, #1a1208);
    border-color: var(--accent, #c9882a);
}

/* ── World Map Background ── */
.world-map-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

/* ── Room Map Panel ── */
.room-map-panel {
    margin-top: 0.5rem;
    border: 1px solid var(--border-visible, #3a2a18);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-surface-1, #221a0e);
    overflow: hidden;
}

.room-map-panel__title {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 0.5rem;
    color: var(--text-tertiary, #8a7a6a);
    border-bottom: 1px solid var(--border-visible, #3a2a18);
}

.room-map-panel__canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-base, #1a1208);
    overflow: hidden;
}

.room-map-panel__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    pointer-events: none;
}

/* ── Room Map Markers ── */
.room-map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    z-index: 1;
    pointer-events: auto;
}

.room-map-marker--npc {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent, #c9882a);
    color: var(--bg-base, #1a1208);
    border: 2px solid var(--text-primary, #e8d5a3);
}

.room-map-marker--object {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background: var(--bg-surface-2, #2a1e10);
    color: var(--text-primary, #e8d5a3);
    border: 1px solid var(--border-strong, #5a4a3a);
}

.room-map-marker--cover {
    width: 16px;
    height: 16px;
    border: 2px dashed var(--text-tertiary, #8a7a6a);
    background: transparent;
}

/* ── Image QA Review ───────────────────────────────── */
.image-qa-page {
    padding: var(--sp4) var(--sp5);
    overflow: auto;
}

.image-qa-page h1 {
    font-size: var(--ts-lg);
    margin-bottom: var(--sp3);
}

/* ── Filter Panel ───────────────────────────────────── */
.image-qa-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp3);
    margin-bottom: var(--sp3);
    padding: var(--sp3);
    background: var(--bg-surface-2);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
}

.filter-group {
    min-width: 130px;
}

.filter-group__header {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    margin-bottom: var(--sp1);
}

.filter-group__name {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--sp1);
    font-size: var(--ts-xs);
    color: var(--t1);
    cursor: pointer;
}

.filter-option--any {
    font-size: var(--ts-xs);
    color: var(--t3);
}

.filter-option input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
}

.filter-option__label {
    white-space: nowrap;
}

.filter-option__count {
    color: var(--t3);
    font-size: var(--ts-xs);
    font-family: var(--font-mono);
}

/* ── Filter Toolbar ──────────────────────────────────── */
.image-qa-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp3);
    margin-bottom: var(--sp3);
}

.image-qa-apply {
    font-size: var(--ts-sm);
    padding: var(--sp1) var(--sp4);
}

.image-qa-toolbar__hint {
    font-size: var(--ts-xs);
    color: var(--t3);
    font-style: italic;
}

.image-qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--sp3);
}

.image-qa-card {
    display: flex;
    background: var(--bg-surface-2);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--tf);
}

.image-qa-card:hover {
    border-color: var(--accent);
}

.image-qa-card__thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--sp1);
    padding: var(--sp2);
    flex-shrink: 0;
}

.image-qa-card__thumb {
    width: 125px;
    border-radius: var(--r-sm);
    object-fit: contain;
    background: var(--bg-s3);
    cursor: pointer;
    transition: opacity var(--tf);
}

.image-qa-card__thumb:hover {
    opacity: 0.8;
}

.image-qa-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--sp2) var(--sp2) var(--sp2) 0;
    min-width: 0;
}

.image-qa-card__traits {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ts-xs);
}

.image-qa-card__traits td {
    padding: 1px var(--sp1);
}

.image-qa-card__traits .trait-label {
    color: var(--t3);
    white-space: nowrap;
    width: 1%;
}

.image-qa-card__traits .trait-value {
    color: var(--t1);
    font-weight: 500;
}

.image-qa-card__status-row {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    margin-top: var(--sp1);
}

.image-qa-card__time {
    font-size: var(--ts-xs);
    font-family: var(--font-mono);
    color: var(--t3);
}

.image-qa-card__actions {
    display: flex;
    gap: var(--sp2);
    margin-top: auto;
    padding-top: var(--sp2);
}

/* ── Image QA Lightbox ───────────────────────────── */
.image-qa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.image-qa-lightbox img {
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: var(--r-lg);
}

/* ── Image QA Pagination ───────────────────────────── */
.image-qa-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp4);
    padding: var(--sp4) var(--sp5);
    border-top: 1px solid var(--b1);
}

.image-qa-pagination__info {
    font-size: var(--ts-sm);
    font-family: var(--font-mono);
    color: var(--t2);
}

/* ── Image QA A/B Comparison ───────────────────────── */
.image-qa-ab-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp5);
    padding: var(--sp4) var(--sp5);
    border-bottom: 1px solid var(--b1);
}

.image-qa-ab-comparison:last-child {
    border-bottom: none;
}

.image-qa-ab-side h3 {
    font-size: var(--ts-sm);
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp3);
}

@media (max-width: 768px) {
    .image-qa-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        padding: var(--sp3);
        gap: var(--sp3);
    }

    .image-qa-ab-comparison {
        grid-template-columns: 1fr;
        gap: var(--sp3);
        padding: var(--sp3);
    }
}

/* ============================================================
   MOBILE PLAY LAYOUT — Plan 29 Phase E
   ============================================================ */

/* ── Mobile Play Layout Container ────────────────────── */
.mobile-play-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* ── Mobile HUD Header ───────────────────────────────── */
.mobile-hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-1);
    min-height: 40px;
}

.mobile-hud-header__room-name {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    color: var(--text-primary);
}

.mobile-hud-header__scan {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    color: var(--t2);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color var(--tf), background var(--tf);
}

.mobile-hud-header__scan:hover {
    color: var(--t1);
    background: var(--bg-surface-2);
}

.mobile-hud-header__scan.is-active {
    color: var(--accent-gold, #d4a574);
    background: var(--accent-subtle);
}

/* ── Mobile Flavor Text ──────────────────────────────── */
.mobile-flavor-text {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 3.6em;
    overflow: hidden;
}

/* ── Mobile HUD Strip ────────────────────────────────── */
.mobile-hud-strip {
    flex-shrink: 0;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.mobile-hud-strip__characters,
.mobile-hud-strip__objects {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.mobile-hud-strip__characters::-webkit-scrollbar,
.mobile-hud-strip__objects::-webkit-scrollbar {
    display: none;
}

/* ── Mobile HUD Chip ─────────────────────────────────── */
.mobile-hud-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface-2, var(--bg-surface-1));
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: background var(--transition-fast, 120ms), box-shadow var(--transition-fast, 120ms);
    padding: 0;
}

.mobile-hud-chip:hover,
.mobile-hud-chip:active {
    background: var(--bg-surface-3, var(--bg-surface-2));
}

/* Portrait chip (Tier 1) — circular portrait + name below */
.mobile-hud-chip--portrait {
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1, 0.25rem);
    min-width: 44px;
    text-align: center;
}

.mobile-hud-chip__portrait {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-3, #333);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.mobile-hud-chip__name {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Pill chip (Tier 2) — name-only horizontal pill */
.mobile-hud-chip--pill {
    flex-direction: row;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: 14px;
    height: 28px;
}

.mobile-hud-chip__pill-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1;
}

/* Aggregate chip (+N) */
.mobile-hud-chip--aggregate {
    flex-direction: row;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: 14px;
    height: 28px;
    border-style: dashed;
}

/* Object chip */
.mobile-hud-chip--object {
    flex-direction: row;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: 14px;
    height: 28px;
}

.mobile-hud-chip__icon {
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ── Chip Pulse Animation (incoming interaction) ─────── */
@keyframes hud-chip-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-gold, #d4a574);
    }
    50% {
        box-shadow: 0 0 0 4px var(--accent-gold, #d4a574);
    }
}

.mobile-hud-chip--interacting {
    animation: hud-chip-pulse 0.5s ease-in-out 3;
}

/* ── Mobile HUD Tier 3 Popover ───────────────────────── */
.mobile-hud-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 498;
}

.mobile-hud-popover {
    position: fixed;
    left: var(--space-3, 0.75rem);
    right: var(--space-3, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 499;
    background: var(--bg-surface-2, var(--bg-surface-1));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 8px);
    padding: var(--space-3, 0.75rem);
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.mobile-hud-popover__group {
    margin-bottom: var(--space-2, 0.5rem);
}

.mobile-hud-popover__group:last-child {
    margin-bottom: 0;
}

.mobile-hud-popover__group-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1, 0.25rem);
}

.mobile-hud-popover__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem);
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: none;
    border: none;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.mobile-hud-popover__item:hover,
.mobile-hud-popover__item:active {
    background: var(--bg-surface-3, var(--bg-surface-2));
}

/* ── Mobile Chronicle ────────────────────────────────── */
.mobile-chronicle {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Mobile Action Bar ───────────────────────────────── */
.mobile-action-bar {
    flex-shrink: 0;
    background: var(--bg-surface-1);
    border-top: 1px solid var(--border-subtle);
    z-index: 266;
    padding-bottom: var(--safe-area-bottom, env(safe-area-inset-bottom, 0px));
}

.mobile-action-bar__input {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.mobile-action-bar__tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-top: 1px solid var(--border-subtle);
}

.mobile-nav-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary, var(--t2));
    border-radius: var(--radius-md, 6px);
    transition: color var(--transition-fast, 120ms);
    padding: var(--space-1, 0.25rem);
}

.mobile-nav-tab:hover,
.mobile-nav-tab:active {
    color: var(--text-secondary);
    background: var(--bg-surface-2);
}

.mobile-nav-tab.is-active {
    color: var(--accent);
}

.mobile-nav-tab:active {
    transform: scale(0.94);
}

/* ── GlobalErrorBoundary fallback ─────────────────────────────────── */
.error-boundary-fallback {
    max-width: 960px;
    margin: var(--space-6) auto;
    padding: var(--space-5);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--color-danger, #c0392b);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body, system-ui);
}

.error-boundary-fallback h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-danger, #c0392b);
}

.error-boundary-fallback .error-id {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-surface-3, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, monospace);
    font-size: 0.9em;
}

.error-diagnostics {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-surface-3, rgba(0, 0, 0, 0.12));
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
}

.error-diagnostics > summary {
    cursor: pointer;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: var(--space-2);
}

.error-diagnostics-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

.error-diagnostics-list dt {
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    align-self: start;
    padding-top: 2px;
}

.error-diagnostics-list dd {
    margin: 0;
    min-width: 0;
}

.error-diagnostics-list dd code {
    font-family: var(--font-mono, monospace);
    font-size: 0.85em;
    word-break: break-all;
}

.error-stack {
    margin: 0;
    padding: var(--space-2);
    max-height: 400px;
    overflow: auto;
    background: var(--bg-surface-1, rgba(0, 0, 0, 0.25));
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, monospace);
    font-size: 0.78em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Discreet build/release stamp — fixed bottom-right of the dashboard, low-contrast grey on
   the dark background, lightens on hover. Pulled out of flow so it never shifts layout. */
.app-release-stamp {
    position: fixed;
    right: 10px;
    bottom: 6px;
    z-index: 40;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-tertiary, #6b6b6b);
    opacity: 0.5;
    user-select: none;
    pointer-events: auto;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.app-release-stamp:hover {
    color: var(--text-secondary, #c8c8c8);
    opacity: 1;
}