:root {
    /* Raw coffee/peach palette */
    --palette-coffee-bean: #18100d;
    --palette-grey-olive: #969696;
    --palette-cornsilk: #f7f0d6;
    --palette-burnt-peach: #ea7d54;
    --palette-honey-bronze: #f6be67;
    --palette-hot-fuchsia: #f15362;
    --palette-dusty-olive: #658963;
    --palette-hunter-green: #4c6851;
    --palette-tomato-jam: #b93b2f;
    --palette-deep-space-blue: #052f51;

    /* Semantic aliases
       --primary = Create/Add CTAs (green)
       --accent  = highlight / Export / warm accents (burnt-peach)
       --warn    = caution (honey) — distinct from accent */
    --bg: var(--palette-coffee-bean);
    --bg-2: color-mix(in srgb, var(--palette-coffee-bean) 88%, var(--palette-grey-olive));
    --bg-3: color-mix(in srgb, var(--palette-coffee-bean) 78%, var(--palette-grey-olive));
    --bg-4: color-mix(in srgb, color-mix(in srgb, var(--palette-coffee-bean) 70%, var(--palette-grey-olive)) 92%, var(--palette-honey-bronze));
    --border: color-mix(in srgb, var(--palette-grey-olive) 42%, var(--palette-coffee-bean));
    --border-strong: color-mix(in srgb, var(--palette-grey-olive) 68%, var(--palette-coffee-bean));
    --text: var(--palette-cornsilk);
    --text-dim: color-mix(in srgb, var(--palette-grey-olive) 55%, var(--palette-cornsilk));
    --text-muted: color-mix(in srgb, var(--palette-grey-olive) 62%, var(--palette-cornsilk));
    --primary: color-mix(in srgb, var(--palette-dusty-olive) 72%, var(--palette-cornsilk));
    --primary-2: var(--palette-hunter-green);
    --accent: var(--palette-burnt-peach);
    --accent-2: color-mix(in srgb, var(--palette-burnt-peach) 78%, var(--palette-cornsilk));
    --danger: var(--palette-tomato-jam);
    --danger-bright: var(--palette-hot-fuchsia);
    --warn: var(--palette-honey-bronze);
    /* Story start landmark (★) — same honey palette as warn, separable role */
    --start: var(--palette-honey-bronze);
    --ok: color-mix(in srgb, var(--palette-dusty-olive) 65%, var(--palette-cornsilk));
    --ok-deep: var(--palette-hunter-green);
    --info: color-mix(in srgb, var(--palette-deep-space-blue) 50%, var(--palette-cornsilk));
    /* Non-CTA landmark (Choices section / 4th card stripe) — not --ok green */
    --cue: color-mix(in srgb, var(--palette-hot-fuchsia) 40%, var(--palette-cornsilk));
    /* Tip-jar / Support (Buy Me a Coffee yellow — not create, export, or warn) */
    --support: #FFB609;
    --on-support: var(--palette-coffee-bean);
    --on-primary: var(--palette-coffee-bean);
    --on-accent: var(--palette-coffee-bean);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --radius: 4px;
    --radius-lg: 8px;
    --pad: 12px;
    /* Aliases for older rules / builders */
    --muted: var(--text-muted);
    --bg-1: var(--bg-2);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

body {
    display: grid;
    grid-template-rows: 48px 1fr;
}

/* ===== Top bar ===== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    gap: 16px;
}

.brand-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    flex-shrink: 0;
    max-width: min(360px, 38vw);
}
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    max-width: 100%;
}
.seo-fallback {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: auto;
    padding: 32px 20px 48px;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
}
.seo-fallback h1 {
    margin: 0 0 12px;
    font-size: 1.6rem;
    font-weight: 700;
    max-width: 40rem;
}
.seo-fallback p,
.seo-fallback ul {
    max-width: 40rem;
}
.seo-fallback a { color: var(--accent); }
.mod-settings-credit {
    margin: 20px 0 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    opacity: 0.8;
    user-select: none;
}
.brand-mark {
    background: linear-gradient(135deg, var(--warn), var(--accent));
    color: var(--on-accent);
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
}
.brand-title { color: var(--text); }
.brand-mod-name {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}
.toolbar-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.toolbar-group-graph.hidden { display: none !important; }

.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.dropdown-item:hover { background: var(--bg-3); }
.dropdown-item:disabled { opacity: 0.5; cursor: not-allowed; }
.dropdown-item-danger { color: var(--danger); }
.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.dropdown-menu-nested {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 4px;
}
.dropdown-submenu-wrap {
    position: relative;
}
.dropdown-item-submenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dropdown-item-arrow {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}
.dropdown-submenu-flyout {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 2px;
    min-width: 180px;
    max-height: min(60vh, 320px);
    overflow-y: auto;
    z-index: 110;
}
#graph-menu {
    overflow: visible;
}

.btn-issues {
    font-weight: 600;
    border-width: 1px;
}
.btn-issues-error {
    border-color: var(--danger-bright);
    color: color-mix(in srgb, var(--danger-bright) 70%, var(--palette-cornsilk));
}
.btn-issues-warn {
    border-color: var(--warn);
    color: var(--warn);
}

/* ===== Buttons ===== */

.btn {
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 80ms, border-color 80ms;
}
.btn:hover { background: var(--bg-4); border-color: var(--border-strong); }
.btn:active { background: var(--bg-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-primary { background: var(--primary); border-color: var(--primary-2); color: var(--on-primary); font-weight: 600; }
.btn-primary:hover { background: var(--primary-2); color: var(--text); }
.btn-accent { background: var(--accent); border-color: var(--accent-2); color: var(--on-accent); font-weight: 600; }
.btn-accent:hover { background: var(--accent-2); color: var(--on-accent); }
.btn-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--support);
    border-color: color-mix(in srgb, var(--support) 72%, var(--palette-coffee-bean));
    color: var(--on-support);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-support:visited {
    background: var(--support);
    border-color: color-mix(in srgb, var(--support) 72%, var(--palette-coffee-bean));
    color: var(--on-support);
}
.btn-support:hover {
    background: color-mix(in srgb, var(--support) 82%, var(--palette-cornsilk));
    border-color: var(--support);
    color: var(--on-support);
}
.btn-support:active {
    background: color-mix(in srgb, var(--support) 88%, var(--palette-honey-bronze));
}
.btn-support:focus-visible {
    outline-color: var(--support);
}
.btn-support-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 80%, var(--palette-coffee-bean)); }
.btn-sm { padding: 4px 8px; font-size: 11px; }
.btn-xs { padding: 2px 6px; font-size: 10px; }
.btn-icon {
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
}
.btn-icon:hover { border-color: var(--border); background: var(--bg-3); }

.split-button { display: inline-flex; position: relative; }
.split-button .btn { border-radius: var(--radius) 0 0 var(--radius); }
.split-button .btn-split {
    border-left: 1px solid rgba(0,0,0,0.25);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 6px 8px;
}

/* ===== Main layout ===== */

.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w, 280px) 6px 1fr 6px var(--inspector-w, 360px);
    height: 100%;
    overflow: hidden;
}

/* Vertical drag-handle between canvas and inspector. */
.resizer {
    background: var(--border);
    cursor: col-resize;
    position: relative;
    transition: background 120ms;
}
.resizer:hover,
.resizer.dragging {
    background: var(--accent);
}
/* Wider invisible hit area so it's easy to grab. */
.resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
}
body.resizing,
body.resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-header {
    flex-shrink: 0;
    padding: 8px 10px 0;
}
.sidebar-mod-link {
    width: 100%;
    text-align: left;
    color: var(--text-dim);
}
.sidebar-mod-link:hover { color: var(--text); }

.tabs {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    gap: 0;
}
.tab {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-2);
}

.tab-panels { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.tab-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 12px;
    display: none;
}
.tab-panel.active { display: block; }

.list-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.item-list li {
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}
.item-list li:hover { background: var(--bg-3); }
.item-list li.selected {
    background: var(--bg-3);
    border-color: var(--primary-2);
}
.item-list .item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-list-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.item-meta {
    font-size: 10px;
    line-height: 1.3;
    padding: 2px 8px 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-list .item-badge {
    font-size: 9px;
    padding: 1px 6px;
    background: var(--bg-4);
    border-radius: 8px;
    color: var(--text-dim);
}
.item-list .item-badge.start { background: color-mix(in srgb, var(--start) 55%, var(--bg)); color: var(--on-accent); border: 1px solid var(--start); }
.item-list .item-badge.repeat { background: #3d6a8a; color: #fff; }
.item-list .item-badge.flag-set { background: #3d6a4a; color: #e8f0e4; }
.item-list .item-badge.flag-use { background: #6a5a3a; color: #f0ebe0; }
.item-list .item-badge.error { background: var(--danger); color: #fff; }
.item-list .item-action {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius);
    opacity: 0;
}
.item-list li:hover .item-action { opacity: 1; }
.item-list .item-action:hover { background: var(--bg-4); color: var(--text); }

/* ===== Canvas ===== */

.canvas-pane {
    position: relative;
    background: radial-gradient(ellipse at center, #221e16 0%, #1a1814 100%);
    overflow: hidden;
}
#cy {
    position: absolute;
    inset: 0;
}

.cy-graph-groups {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
}
.cy-graph-group-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cy-graph-group-rect {
    position: absolute;
    border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-3) 65%, transparent);
    pointer-events: none;
}
.cy-graph-group-label {
    position: absolute;
    pointer-events: auto;
    z-index: 1;
    cursor: grab;
}
.cy-graph-group-label.cy-graph-group-dragging {
    cursor: grabbing;
}
.cy-graph-group-label-input {
    font: inherit;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    color: var(--text-muted);
    cursor: inherit;
    min-width: 4em;
    max-width: 160px;
}
.cy-graph-group-label-input:read-only {
    cursor: grab;
}
.cy-graph-group-label.cy-graph-group-dragging .cy-graph-group-label-input,
.cy-graph-group-label-input:read-only:active {
    cursor: grabbing;
}
.cy-graph-group-label-input:hover {
    color: var(--text);
    border-color: var(--border-strong);
}
.cy-graph-group-label-input:focus {
    color: var(--text);
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.cy-graph-context-menu {
    position: absolute;
    z-index: 20;
    min-width: 168px;
    padding: 4px 0;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.cy-graph-context-menu.hidden { display: none; }
.cy-graph-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}
.cy-graph-menu-item:hover:not(:disabled) { background: var(--bg-3); }
.cy-graph-menu-item:disabled {
    opacity: 0.45;
    cursor: default;
}
.cy-graph-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
}

.cy-graph-wire-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
    overflow: hidden;
}

.cy-graph-node-cards {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.cy-node-card {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    overflow: hidden;
    line-height: 1.25;
    color: var(--text);
}
.cy-node-card-off { visibility: hidden; }
.cy-node-card.dim { opacity: 0.45; }
.cy-node-card.stub { color: var(--text-dim); }
.cy-node-card.hidden-event { opacity: 0.7; }
.cy-node-card.hidden-event.dim { opacity: 0.4; }

/* Font sizes are in model space; card is transform:scale(zoom) so they track the node. */

/* --- Detail (close in) — matches node font-size 12 --- */
.cy-node-card-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--warn);
    margin-bottom: 3px;
    text-transform: uppercase;
}
.cy-node-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cy-node-card-cast {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 400;
    font-style: italic;
    color: var(--text-dim);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cy-node-card-choices {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.cy-node-card-choice {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
    line-height: 1.35;
}
.cy-node-card-meta {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

/* --- Mid distance — matches node font-size 18 --- */
.cy-node-card-mid {
    padding: 10px 12px;
}
.cy-node-card-mid .cy-node-card-title {
    font-size: 16px;
    font-weight: 600;
}
.cy-node-card-mid .cy-node-card-meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-dim);
}

/* --- Zoomed out — matches node font-size 28 --- */
.cy-node-card-far {
    padding: 12px 14px;
}
.cy-node-card-far .cy-node-card-title {
    font-size: 24px;
    font-weight: 700;
}

.cy-node-card.has-image .cy-node-card-title,
.cy-node-card.has-image .cy-node-card-cast,
.cy-node-card.has-image .cy-node-card-choice,
.cy-node-card.has-image .cy-node-card-meta,
.cy-node-card.has-image .cy-node-card-badge {
    color: #fff;
    text-shadow: 0 0 3px #000, 0 1px 2px rgba(0, 0, 0, 0.85);
}
.cy-node-card.has-image .cy-node-card-cast { color: #e8dcc8; }
.cy-node-card.has-image .cy-node-card-meta { color: #d0c4a8; }

.cy-graph-wire-pin {
    position: absolute;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: crosshair;
    pointer-events: auto;
    z-index: 2;
}
.cy-graph-wire-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    background: var(--warn);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
    pointer-events: none;
}
.cy-graph-wire-pin.hidden { display: none; }
.cy-graph-wire-pin:hover::after,
.cy-graph-wire-pin-active::after {
    background: var(--start);
    transform: scale(1.15);
}
.cy-graph-wire-pin.wire-pin-hint::after {
    background: var(--start);
    animation: wire-pin-glow 1.8s ease-in-out infinite;
}
@keyframes wire-pin-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--start) 50%, transparent),
            0 0 0 0 color-mix(in srgb, var(--start) 35%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--start) 55%, transparent),
            0 0 14px 2px color-mix(in srgb, var(--start) 45%, transparent);
    }
}
.cy-graph-wire-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    opacity: 0;
}
.cy-graph-wire-svg.active { opacity: 1; }
.cy-graph-wire-line {
    stroke: var(--warn);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    fill: none;
}
.cy-graph-wire-chooser {
    z-index: 22;
    max-width: 280px;
}
.cy-graph-waypoint-handles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cy-graph-waypoint-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--bg);
    background: var(--text-dim);
    cursor: grab;
    pointer-events: auto;
    z-index: 1;
}
.cy-graph-waypoint-handle:hover,
.cy-graph-waypoint-handle.dragging {
    background: var(--warn);
    cursor: grabbing;
}
.cy-graph-spawn-palette {
    position: absolute;
    z-index: 21;
    width: 260px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.cy-graph-spawn-palette.hidden { display: none; }
.cy-graph-spawn-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-1);
    color: var(--text);
    font-size: 13px;
}
.cy-graph-spawn-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.cy-graph-spawn-list {
    overflow-y: auto;
    max-height: 260px;
}
.cy-graph-spawn-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.cy-graph-spawn-item:hover,
.cy-graph-spawn-item.active {
    background: var(--bg-3);
}
.cy-graph-spawn-item-label {
    font-size: 13px;
}
.cy-graph-spawn-item-sub {
    font-size: 11px;
    color: var(--text-dim);
}
.cy-graph-spawn-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--text-dim);
}

/* Shown when the project has zero events: gives first-time users an obvious
   "do something" target instead of a silent blank canvas. */
.cy-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.cy-empty-card {
    pointer-events: auto;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    max-width: 520px;
    text-align: center;
    box-shadow: var(--shadow);
}
.cy-empty-card h2 {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 18px;
    letter-spacing: 0.02em;
}
.cy-empty-card p {
    margin: 0 0 14px;
    color: var(--text-dim);
    line-height: 1.5;
}
.cy-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}
.cy-empty-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 12px !important;
}
.cy-empty-card a {
    color: var(--accent);
}
.cy-empty .dropdown-menu {
    /* Align the pop-out menu under the template split-button inside the card. */
    right: auto;
    left: 0;
    min-width: 260px;
}

/* Graph legend, tooltip, spotlight chip */
.cy-legend {
    position: absolute;
    top: 12px;
    right: 12px;
    max-width: 220px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 10px;
    color: var(--text-dim);
    box-shadow: var(--shadow);
    z-index: 3;
}
.cy-legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 11px;
    color: var(--text);
    margin-bottom: 2px;
}
.cy-legend-tier {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cy-legend-tier.collapsed .cy-legend-tier-body,
.cy-legend-tier.collapsed .cy-legend-flags,
.cy-legend-tier.collapsed .cy-legend-note {
    display: none;
}
.cy-legend-tier-toggle {
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    padding: 2px 0;
    cursor: pointer;
}
.cy-legend-tier-toggle:hover { color: var(--accent); }
.cy-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
button.cy-legend-row {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 2px 4px;
    margin: 0 -4px;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    width: calc(100% + 8px);
}
button.cy-legend-row:hover { background: var(--bg-3); }
button.cy-legend-row.cy-legend-active {
    background: var(--bg-4);
    outline: 1px solid var(--accent);
}
.cy-legend-swatch {
    flex-shrink: 0;
    width: 16px;
    height: 10px;
    border-radius: 2px;
    border: 2px solid var(--border-strong);
    background: var(--bg-3);
}
.cy-legend-swatch.start { border-color: var(--start); border-width: 3px; }
.cy-legend-swatch.repeatable { border-color: var(--info); border-width: 3px; border-style: dashed; }
.cy-legend-swatch.hidden-node { border-style: dashed; border-color: var(--text-muted); opacity: 0.65; }
.cy-legend-swatch.orphan { border-color: var(--warn); border-style: dotted; }
.cy-legend-swatch.error-dot {
    border: none;
    background: var(--danger);
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
.cy-legend-swatch.flag-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 3px solid var(--ok);
    background: transparent;
}
.cy-legend-swatch.delayed-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px dashed var(--accent);
    background: transparent;
}
.cy-legend-swatch.random-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px dotted var(--text-muted);
    background: transparent;
}
.cy-legend-swatch.travel-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px dashed var(--info);
    background: transparent;
}
.cy-legend-swatch.contract-node {
    border-color: var(--warn);
    border-width: 2px;
    transform: rotate(45deg);
    border-radius: 2px;
    width: 14px;
    height: 14px;
}
.cy-legend-swatch.decision-node {
    border-color: var(--info);
    border-width: 2px;
    background: color-mix(in srgb, var(--info) 18%, transparent);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border-radius: 0;
    width: 16px;
    height: 14px;
}
.cy-legend-swatch.decision-orphan {
    border-color: var(--warn);
    border-width: 2px;
    border-style: dotted;
    background: color-mix(in srgb, var(--info) 12%, transparent);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border-radius: 0;
    width: 16px;
    height: 14px;
}
.cy-legend-swatch.decision-entry-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px dashed var(--info);
    background: transparent;
}
.cy-legend-swatch.contract-accept-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px dashed var(--warn);
    background: transparent;
}
.cy-legend-swatch.contract-midjob-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px dotted var(--text-muted);
    background: transparent;
}
.cy-legend-swatch.contract-success-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px solid var(--ok);
    background: transparent;
}
.cy-legend-swatch.contract-failure-edge {
    border: none;
    border-radius: 0;
    width: 22px;
    height: 0;
    align-self: center;
    border-top: 2.5px solid var(--danger);
    background: transparent;
}
.delivery-travel-row {
    margin-top: 0;
}
.delivery-travel-row .field {
    flex: 1;
    min-width: 0;
}
.delivery-dest-select {
    width: 100%;
}
.option-delivery-panel .option-followup-mode {
    margin-bottom: 0;
}
.option-delivery-body {
    margin-top: 2px;
}
.option-delivery-panel .option-timing-units {
    margin-top: 6px;
}
.option-timing-units {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
}
.option-timing-units .builder-inline-field--compact {
    flex: 0 0 auto;
}
.option-timing-units .builder-inline-field--compact .builder-inline-label {
    font-size: 11px;
    color: var(--text-dim);
}
.cy-legend-swatch.type-character { border-radius: 3px; background: #2a241f; }
.cy-legend-swatch.type-letter { border-radius: 1px; background: #2c2822; }
.cy-legend-swatch.type-fullscreen { border-radius: 3px; background: #1e2830; }
.cy-legend-swatch.type-duel {
    width: 14px;
    height: 12px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border: none;
    background: #2e221c;
    box-shadow: inset 0 0 0 2px var(--border-strong);
}
.cy-legend-swatch.type-empty {
    border-radius: 50%;
    background: #221c18;
}
.cy-legend-note {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 2px 0 0;
}
.cy-legend-note code {
    font-size: 9px;
    color: var(--text-dim);
}
.cy-legend-flags {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}
.cy-legend-flags.hidden { display: none; }
.cy-legend-swatch.flag-color {
    border-width: 3px;
    background: #252a22;
}
.cy-filter-chip {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: var(--bg-2);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text);
    box-shadow: var(--shadow);
}
.cy-filter-chip.hidden { display: none; }

.cy-graph-tooltip {
    position: absolute;
    z-index: 5;
    max-width: 280px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.45;
    box-shadow: var(--shadow);
    pointer-events: none;
}
.cy-graph-tooltip.hidden { display: none; }
.cy-tip-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.cy-tip-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.cy-tip-id { font-family: var(--mono, monospace); }
.cy-tip-section { margin-top: 4px; }
.cy-tip-section strong { color: var(--text-dim); font-weight: 600; }
.cy-tip-list {
    margin: 4px 0 0;
    padding-left: 14px;
}
.cy-tip-list li { margin: 2px 0; }
.cy-tip-muted { color: var(--text-muted); }
.cy-tip-issues { color: var(--danger); }
.item-list .item-badge.flag-set,
.item-list .item-badge.flag-use {
    border: 2px solid transparent;
}
.checkbox-indent { margin-left: 1.25rem; }

.validation-panel {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-height: 35%;
    z-index: 10;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.validation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-3);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}
#validation-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    overflow-y: auto;
}
#validation-list li {
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
}
#validation-list li:hover { background: var(--bg-3); }
#validation-list li.error { border-left-color: var(--danger-bright); }
#validation-list li.warn { border-left-color: var(--warn); }
#validation-list li .vp-where {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 6px;
}

/* ===== Inspector ===== */

.inspector {
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inspector-empty {
    padding: 24px;
    color: var(--text-dim);
    line-height: 1.6;
}
.inspector-empty .muted { color: var(--text-muted); margin-top: 16px; font-size: 12px; }

.inspector-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    container-type: inline-size;
    container-name: inspector;
}
.inspector-content.hidden { display: none; }

.preview-footer {
    flex: 0 0 auto;
    min-height: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    display: flex;
    flex-direction: column;
}

/* Live preview (CK3-style mock card) */
.preview-wrap {
    flex: 0 0 auto;
    background: transparent;
    overflow: visible;
}
.preview-wrap:not([open]) #preview-host {
    display: none;
}
.preview-footer .preview-playbar {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-3);
    margin-bottom: 0;
}
.preview-playbar.hidden { display: none; }
.preview-wrap > summary {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-3);
    border-top: 1px solid var(--border);
    list-style: none;
}
.preview-wrap > summary::-webkit-details-marker { display: none; }
#preview-host {
    padding: 6px 8px 0;
    background: transparent;
    line-height: normal;
}
#preview-host .ck3-mock {
    margin: 0;
    box-shadow:
        0 0 0 1px #1a1510,
        0 0 0 2px #4a3f2e;
}
#preview-host .ck3-mock-main-row {
    min-height: 0;
    align-items: flex-start;
}
#preview-host .ck3-mock-text-col {
    flex: 1 1 auto;
}
#preview-host .ck3-mock-scroll {
    flex: 0 1 auto;
}
#preview-host .ck3-mock-portrait-slot--empty {
    display: none;
}

.section {
    margin-bottom: 16px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.section-header {
    padding: 8px 10px;
    background: var(--bg-4);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Event inspector — role accents for glanceable sections */
.event-form-host > .section,
.event-form-host > details.section {
    border-left: 3px solid var(--section-accent, var(--border));
    margin-bottom: 14px;
}
.event-form-host > .section--content,
.event-form-host > .section--triggers,
.event-form-host > .section--choices {
    margin-bottom: 18px;
}
.event-form-host > .section--advanced {
    margin-bottom: 10px;
    border-left-color: var(--border-strong);
    border-style: solid;
    opacity: 0.98;
}
/* Rails: peach = Event; blue = Triggers; honey = contract; stone = Appearance;
   cue = Choices; slate = On open / effects (not danger, not same as look).
   Per-role wash % + title tint keep headers glanceable. */
.event-form-host .section--content { --section-accent: var(--accent); }
.event-form-host .section--triggers {
    --section-accent: color-mix(in srgb, var(--palette-deep-space-blue) 28%, var(--palette-cornsilk));
}
.event-form-host .section--contract { --section-accent: var(--warn); }
.event-form-host .section--look {
    --section-accent: color-mix(in srgb, var(--palette-grey-olive) 40%, var(--palette-cornsilk));
}
.event-form-host .section--choices { --section-accent: var(--cue); }
.event-form-host .section--effects {
    /* Slate-blue landmark — distinct from look stone and triggers blue */
    --section-accent: color-mix(in srgb, var(--palette-deep-space-blue) 48%, var(--palette-grey-olive));
}
.event-form-host .section--advanced { --section-accent: var(--border-strong); }

.event-form-host > .section--content > .section-header,
.event-form-host > .section--triggers > .section-header,
.event-form-host > .section--triggers > summary.section-header,
.event-form-host > .section--choices > .section-header {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--section-accent) 62%, var(--text));
}
.event-form-host > .section--look > .section-header,
.event-form-host > .section--contract > .section-header,
.event-form-host > .section--effects > .section-header,
.event-form-host > .section--effects > summary.section-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--section-accent) 58%, var(--text));
}
.event-form-host > .section--advanced > .section-header,
.event-form-host > .section--advanced > summary.section-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}
/* Top-level headers: padding + per-role wash (not one shared %) */
.event-form-host > .section > .section-header,
.event-form-host > details.section > summary.section-header {
    padding: 8px 12px;
}
.event-form-host > details.section > summary.section-header {
    padding-right: 32px;
}
.event-form-host > .section--content > .section-header {
    background: color-mix(in srgb, var(--section-accent) 30%, var(--bg-4));
}
.event-form-host > .section--triggers > .section-header,
.event-form-host > .section--triggers > summary.section-header {
    background: color-mix(in srgb, var(--section-accent) 34%, var(--bg-4));
}
.event-form-host > .section--choices > .section-header {
    background: color-mix(in srgb, var(--section-accent) 32%, var(--bg-4));
}
.event-form-host > .section--contract > .section-header {
    background: color-mix(in srgb, var(--section-accent) 26%, var(--bg-4));
}
.event-form-host > .section--look > .section-header {
    background: color-mix(in srgb, var(--section-accent) 14%, var(--bg-4));
}
.event-form-host > .section--effects > .section-header,
.event-form-host > .section--effects > summary.section-header {
    background: color-mix(in srgb, var(--section-accent) 28%, var(--bg-4));
}
.event-form-host > .section--advanced > .section-header,
.event-form-host > .section--advanced > summary.section-header {
    background: color-mix(in srgb, var(--section-accent) 8%, var(--bg-4));
}
/* Nested headers inside a role section stay quieter (not top-level collapsibles) */
.event-form-host .section-body > .section-header,
.event-form-host .option-advanced-tabs .section-header,
.event-form-host .section-body .section-details > .section-header,
.event-form-host .section-body .section-details > summary.section-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    background: transparent;
    padding: 4px 0;
}
.event-form-host .section-body .section.section-details {
    border-left: none;
    margin-bottom: 8px;
}

.field { display: flex; flex-direction: column; gap: 4px; }
.field > label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
label[title],
.section-header[title],
.section-header-nested[title],
.entry-subsection-label[title],
.checkbox-row span[title],
.builder-row-effect-header span[title],
.option-tab[title] {
    cursor: help;
}
.hint-tooltip {
    position: fixed;
    z-index: 80;
    max-width: 280px;
    padding: 6px 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 11px;
    color: var(--text);
    line-height: 1.4;
    box-shadow: var(--shadow);
    pointer-events: none;
}
.hint-tooltip.hidden { display: none; }
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

input[type="text"], input[type="number"], input[type="email"], select, textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}
textarea {
    resize: vertical;
    min-height: 60px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkbox-row input { width: auto; }

details.advanced {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 8px;
}
details.advanced > summary {
    cursor: pointer;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
details.advanced[open] > summary { margin-bottom: 8px; }

/* Image slot */
.image-slot {
    aspect-ratio: 16/9;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.image-slot.has-image { border-style: solid; border-color: var(--border); }
.image-slot.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.image-slot img {
    width: 100%; height: 100%; object-fit: cover;
}
.image-slot .image-clear {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.6); border: none; color: #fff;
    width: 22px; height: 22px; border-radius: 11px; cursor: pointer;
}
.image-slot.image-slot-compact {
    width: 100%;
    max-width: 160px;
    aspect-ratio: auto;
    min-height: 0;
    height: 56px;
}
.image-slot.image-slot-compact.image-slot-icon {
    max-width: 52px;
    width: 52px;
    height: 52px;
}
.image-slot.image-slot-compact img {
    object-fit: contain;
}
.image-slot.image-slot-compact .image-clear {
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 1;
}
.image-slot.image-slot-compact > span {
    font-size: 10px;
    padding: 4px;
    text-align: center;
    line-height: 1.2;
}

/* Builder rows (triggers, effects, options, ranks) */
.builder-list {
    display: flex; flex-direction: column; gap: 6px;
}
.builder-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.builder-row.builder-row-leaf,
.builder-row.builder-row-leaf--trigger,
.builder-row.builder-row-leaf--effect,
.builder-row.builder-row-effect,
.builder-row.builder-row-trigger {
    grid-template-columns: minmax(94px, 0.78fr) minmax(68px, 0.52fr) minmax(80px, 1.7fr) auto;
}
.builder-row.builder-row-leaf--effect,
.builder-row.builder-row-effect:not(.builder-row-effect-header) {
    align-items: end;
}
.builder-row.builder-row-leaf--trigger,
.builder-row.builder-row-trigger:not(.builder-row-trigger-header) {
    grid-template-columns: minmax(94px, 0.78fr) minmax(68px, 0.52fr) 60px minmax(80px, 1.7fr) auto;
}
.builder-row.builder-row-leaf .builder-cell-placeholder,
.builder-row.builder-row-effect .builder-effect-cell-placeholder,
.builder-row.builder-row-trigger .builder-trigger-cell-placeholder {
    min-width: 0;
    text-align: center;
}
.builder-row.builder-row-leaf .builder-kind-select,
.builder-row.builder-row-effect > .builder-kind-select,
.builder-row.builder-row-trigger > .builder-kind-select,
.builder-row.builder-row-leaf > select.builder-kind-select:first-child,
.builder-row.builder-row-effect > select:first-child,
.builder-row.builder-row-trigger > select:first-child {
    min-width: 0;
    width: 100%;
    font-size: 11px;
}
.builder-row.builder-row-leaf .scope-select-wrap,
.builder-row.builder-row-effect .scope-select-wrap,
.builder-row.builder-row-trigger .scope-select-wrap {
    max-width: 100%;
}
.builder-row.builder-row-leaf .builder-scope-select,
.builder-row.builder-row-leaf .effect-who-select,
.builder-row.builder-row-effect .builder-scope-select,
.builder-row.builder-row-effect .effect-who-select,
.builder-row.builder-row-trigger .builder-scope-select,
.builder-row.builder-row-trigger .effect-who-select {
    min-width: 0;
    width: 100%;
    font-size: 11px;
}
.builder-row.builder-row-leaf .builder-op-select,
.builder-row.builder-row-trigger .builder-op-select {
    min-width: 0;
    width: 100%;
    font-size: 11px;
}
.builder-row.builder-row-effect-header,
.builder-row.builder-row-trigger-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 6px 2px;
    background: transparent;
    border: none;
}
.builder-row.builder-row-effect-header span:last-child,
.builder-row.builder-row-trigger-header span:last-child {
    width: 22px;
}

@container inspector (max-width: 420px) {
    .builder-row.builder-row-leaf--trigger,
    .builder-row.builder-row-trigger:not(.builder-row-trigger-header) {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "kind who ."
            "op value remove";
    }
    .builder-row.builder-row-leaf--trigger > :nth-child(1),
    .builder-row.builder-row-trigger:not(.builder-row-trigger-header) > :nth-child(1) {
        grid-area: kind;
    }
    .builder-row.builder-row-leaf--trigger > :nth-child(2),
    .builder-row.builder-row-trigger:not(.builder-row-trigger-header) > :nth-child(2) {
        grid-area: who;
    }
    .builder-row.builder-row-leaf--trigger > :nth-child(3),
    .builder-row.builder-row-trigger:not(.builder-row-trigger-header) > :nth-child(3) {
        grid-area: op;
    }
    .builder-row.builder-row-leaf--trigger > :nth-child(4),
    .builder-row.builder-row-trigger:not(.builder-row-trigger-header) > :nth-child(4) {
        grid-area: value;
    }
    .builder-row.builder-row-leaf--trigger > :nth-child(5),
    .builder-row.builder-row-trigger:not(.builder-row-trigger-header) > :nth-child(5) {
        grid-area: remove;
    }
    .builder-row.builder-row-leaf--effect,
    .builder-row.builder-row-effect:not(.builder-row-effect-header) {
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
            "kind who ."
            "value value remove";
    }
    .builder-row.builder-row-leaf--effect > :nth-child(1),
    .builder-row.builder-row-effect:not(.builder-row-effect-header) > :nth-child(1) {
        grid-area: kind;
    }
    .builder-row.builder-row-leaf--effect > :nth-child(2),
    .builder-row.builder-row-effect:not(.builder-row-effect-header) > :nth-child(2) {
        grid-area: who;
    }
    .builder-row.builder-row-leaf--effect > :nth-child(3),
    .builder-row.builder-row-effect:not(.builder-row-effect-header) > :nth-child(3) {
        grid-area: value;
    }
    .builder-row.builder-row-leaf--effect > :nth-child(4),
    .builder-row.builder-row-effect:not(.builder-row-effect-header) > :nth-child(4) {
        grid-area: remove;
    }
}

.effect-row-block {
    margin-bottom: 4px;
}
.trigger-row-block {
    margin-bottom: 4px;
}
.trigger-row-summary,
.effect-row-summary,
.builder-row-summary {
    font-size: 11px;
    margin: 2px 6px 4px;
    line-height: 1.35;
}
.effect-none-hint {
    font-size: 11px;
}
.option-card-effect-summary {
    font-size: 10px;
    margin-top: 3px;
    padding-left: 2px;
    line-height: 1.3;
    color: var(--text-dim);
    opacity: 0.9;
}

/* Event inspector: flatten nested builder tiles (section + option-card stay filled) */
.event-form-host .builder-row {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}
.event-form-host .builder-row.builder-row-effect-header,
.event-form-host .builder-row.builder-row-trigger-header,
.event-form-host .builder-row.builder-row-header {
    border-bottom: none;
    padding-bottom: 2px;
}
.event-form-host .effect-row-block,
.event-form-host .trigger-row-block,
.event-form-host .entry-hook-row-block {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    margin-bottom: 6px;
    padding-bottom: 4px;
}
.event-form-host .effect-row-block > .builder-row,
.event-form-host .trigger-row-block > .builder-row,
.event-form-host .entry-hook-row-block > .builder-row {
    border-bottom: none;
}
.event-form-host .builder-row-summary {
    margin-left: 0;
    margin-right: 0;
}
.event-form-host .cooldown-box,
.event-form-host .overrides-box,
.event-form-host .delay-box {
    background: transparent;
    border: none;
    border-top: 1px dashed var(--border);
    border-radius: 0;
    padding: 8px 0 0;
    margin-top: 6px;
}
.event-form-host .cooldown-box > legend,
.event-form-host .overrides-box > legend,
.event-form-host .delay-box > legend {
    padding-left: 0;
}
.scope-select-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 0;
    position: relative;
}
.scope-select-wrap .scope-select-custom {
    width: 100%;
    min-width: 0;
    font-size: 11px;
}
.who-combobox-input {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.who-combobox-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    container-type: inline-size;
    container-name: who-list;
}
.who-combobox-list--layer {
    z-index: 90;
}
/* Native kind <select> (Appoint / Remove live near the bottom) still clips
   under Choices unless the card lifts while focused. Combobox lists portal. */
.who-combobox--open {
    z-index: 8;
}
.section:focus-within,
.section:has(.who-combobox--open),
.builder-wrapper:focus-within,
.builder-wrapper:has(.who-combobox--open),
.option-card:focus-within,
.option-card:has(.who-combobox--open) {
    overflow: visible;
    position: relative;
    z-index: 6;
}
.who-combobox-group {
    padding: 6px 8px 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    pointer-events: none;
}
.who-combobox-option {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    min-width: 0;
}
.who-combobox-option:hover {
    background: var(--accent-dim, rgba(234, 125, 84, 0.18));
}
.who-combobox-option-label {
    flex: 1 1 auto;
    min-width: 6em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.who-combobox-option-hint {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    opacity: 0.7;
}
@container who-list (max-width: 240px) {
    .who-combobox-option-hint {
        display: none;
    }
}
.who-combobox-empty {
    padding: 6px 8px;
    font-size: 11px;
}
.builder-value-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;
    min-width: 0;
    width: 100%;
}
.builder-value-cells--single {
    align-items: stretch;
}
.builder-value-primary {
    flex: 1 1 120px;
    min-width: 0;
}
.builder-value-primary--full {
    flex: 1 1 100%;
}
.builder-value-primary > .trait-picker,
.builder-value-primary > .catalog-picker {
    width: 100%;
}
.builder-value-trailing {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;
    margin-left: auto;
    flex: 0 1 auto;
}
.builder-character-link-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;
    min-width: 0;
    width: 100%;
}
.builder-character-link-fields .builder-inline-field--grow {
    flex: 1 1 140px;
    min-width: 0;
}
.builder-character-link-fields .builder-inline-field--grow select {
    width: 100%;
    min-width: 0;
}
.builder-character-link-fields .builder-inline-field--compact-inline {
    flex: 0 0 auto;
}
.builder-character-link-fields .builder-inline-field--grow select,
.builder-character-link-fields .builder-inline-field--grow input {
    min-height: 28px;
}
.builder-character-link-warn {
    flex: 1 1 100%;
    font-size: 11px;
    margin-top: 2px;
}
.builder-romance-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: end;
    min-width: 0;
    width: 100%;
}
.builder-romance-fields .builder-inline-field--grow {
    flex: 1 1 140px;
    min-width: 0;
}
.builder-romance-fields .builder-inline-field--grow select,
.builder-romance-fields .builder-inline-field--grow .scope-select-wrap {
    width: 100%;
    min-width: 0;
}
.builder-romance-fields .builder-inline-field--grow select {
    min-height: 28px;
}
.builder-romance-fields .builder-inline-field--checkbox {
    flex: 0 0 auto;
}
.builder-romance-fields .builder-inline-field--checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}
.court-position-appoint-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.court-position-appoint-fields .court-office-family-chips {
    margin: 0;
}
.court-position-revoke-hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}
.builder-row.builder-row-leaf .builder-value-trailing .builder-inline-field input:not([type="checkbox"]),
.builder-row.builder-row-leaf .builder-value-trailing .builder-inline-field select,
.builder-row.builder-row-effect .builder-value-trailing .builder-inline-field input:not([type="checkbox"]),
.builder-row.builder-row-effect .builder-value-trailing .builder-inline-field select,
.builder-row.builder-row-trigger .builder-value-trailing .builder-inline-field input:not([type="checkbox"]),
.builder-row.builder-row-trigger .builder-value-trailing .builder-inline-field select {
    min-height: 28px;
    min-width: 56px;
}
.builder-inline-field.builder-inline-field--compact {
    flex: 0 0 auto;
    width: auto;
}
.builder-inline-field.builder-inline-field--compact input.builder-num-input[type="number"] {
    width: auto;
    min-width: 2.75em;
    max-width: 6em;
    field-sizing: content;
    text-align: right;
    font-size: 11px;
    padding: 4px 6px;
}
.builder-value-trailing .builder-inline-field--compact input.builder-num-input[type="number"] {
    min-width: 2.75em;
}
.builder-value-cells--single input.builder-num-input[type="number"] {
    width: auto;
    min-width: 2.75em;
    max-width: min(6em, 100%);
    field-sizing: content;
    text-align: right;
    font-size: 11px;
    padding: 4px 6px;
    align-self: flex-end;
}
.builder-row.builder-row-leaf .builder-value-single input:not([type="checkbox"]),
.builder-row.builder-row-leaf .builder-value-single select,
.builder-row.builder-row-leaf .builder-value-single textarea,
.builder-row.builder-row-effect .builder-value-cells--single input:not([type="checkbox"]),
.builder-row.builder-row-effect .builder-value-cells--single select,
.builder-row.builder-row-effect .builder-value-cells--single textarea {
    width: 100%;
    min-width: 0;
    min-height: 28px;
}
.relation-type-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-end;
    min-width: 0;
    width: 100%;
    margin-left: auto;
    flex: 0 1 auto;
}
.relation-type-select,
.relation-custom-input {
    width: 100%;
    min-width: 0;
    font-size: 11px;
}
.imprison-type-cells {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}
.imprison-type-cells .imprison-type-select {
    width: 100%;
    min-width: 0;
    font-size: 11px;
}
.builder-row.builder-row-character-filter {
    grid-template-columns: minmax(120px, 0.85fr) minmax(0, 2.5fr) 22px;
}
.builder-row.builder-row-character-filter .builder-filter-kind,
.builder-row.builder-row-character-filter .builder-filter-value {
    min-width: 0;
}
.builder-row.builder-row-character-filter .builder-filter-kind select,
.builder-row.builder-row-character-filter .builder-filter-value select,
.builder-row.builder-row-character-filter .builder-filter-value input {
    width: 100%;
    min-width: 0;
}
.builder-row.builder-row-character-filter .builder-filter-value .catalog-picker,
.builder-row.builder-row-character-filter .builder-filter-value .trait-picker {
    width: 100%;
    min-width: 0;
}
.builder-row.builder-row-character-filter .builder-filter-remove {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    justify-self: end;
}
.builder-filter-stat-range {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(5rem, 0.75fr) minmax(5rem, 0.75fr);
    gap: 5px;
    align-items: end;
    width: 100%;
}
.builder-filter-stat-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.builder-filter-stat-field:first-child select {
    font-size: 12px;
    padding-left: 5px;
    padding-right: 20px;
}
.builder-filter-stat-label {
    font-size: 10px;
    color: var(--muted, #888);
    line-height: 1;
}
.builder-filter-stat-field select,
.builder-filter-stat-field input {
    width: 100%;
    min-width: 0;
}
.builder-row.builder-row-story-relation {
    grid-template-columns: minmax(140px, 1.4fr) 1fr auto;
}
.builder-inline-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.builder-inline-field select,
.builder-inline-field input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
}
.builder-inline-field input[type="checkbox"] {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
}
.builder-inline-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hook-type-cells {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}
.hook-type-cells .hook-type-select,
.builder-value-cells .hook-type-select,
.builder-value-cells .hook-secret-select,
.builder-value-cells .hook-spend-mode-select {
    width: 100%;
    min-width: 0;
    font-size: 11px;
}
.builder-row-warn {
    color: var(--warn, #c9a227);
}
.builder-row.builder-row-entrypoint {
    grid-template-columns: 100px 1fr auto auto;
}
.builder-row.builder-row-entrypoint--picker {
    border-style: dashed;
}
.builder-row.builder-row-entrypoint .entrypoint-link-select {
    width: 100%;
    min-width: 0;
}
.builder-row.builder-row-raw {
    grid-template-columns: 1fr auto;
}
.builder-row.builder-row-header {
    grid-template-columns: 1fr auto;
    background: var(--bg-3);
}
.builder-row .row-remove { padding: 2px 6px; }
.builder-add { align-self: flex-start; }
.builder-add-row { display: flex; gap: 6px; }

.builder-wrapper {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
}
.wrapper-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0,0,0,0.15);
}
.random-branch {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-skew-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.stat-skew-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}
.stat-skew-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.stat-skew-slider {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
}
.stat-skew-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.stat-skew-preview-table th,
.stat-skew-preview-table td {
    border: 1px solid var(--border);
    padding: 3px 6px;
    text-align: left;
}
.stat-skew-preview-table th {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 600;
}
.stat-skew-preview-hint {
    flex: 1 1 180px;
    min-width: 0;
    line-height: 1.3;
}

/* Options list — left rail + very soft wash of the same accent */
.option-list { display: flex; flex-direction: column; gap: 8px; }
.option-card {
    --option-accent: var(--warn);
    background: color-mix(in srgb, var(--option-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-left: 3px solid var(--option-accent);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.option-card--0 { --option-accent: var(--warn); }
.option-card--1 { --option-accent: var(--accent); }
.option-card--2 { --option-accent: var(--info); }
.option-card--3 { --option-accent: var(--cue); }
.section-body-compact .image-slot {
    min-height: 72px;
    max-height: 120px;
}
.section-body-compact .image-slot img {
    max-height: 100px;
    object-fit: contain;
}
.option-card-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.option-card-move {
    min-width: 28px;
    min-height: 28px;
    padding: 4px 8px;
}
.option-advanced-tabs .section-header {
    font-size: 10px;
}

.field-inline-error {
    color: var(--danger);
    font-size: 11px;
    margin-top: 6px;
}
.field-input-error {
    border-color: var(--danger) !important;
}

.option-outcome-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--border);
}

.option-link-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: center;
}
.option-timing-row {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
}
.option-timing-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.radio-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}
.radio-row input { margin: 0; }
.option-followup-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 8px;
}
.option-followup-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.option-followup-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.option-random-followup .option-link-row {
    grid-template-columns: auto 60px 1fr auto auto;
}
.option-effects-toggle {
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 0;
}

/* Per-option accordion of detail panels (Effects, Trigger, AI, ...) */
.option-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin: 4px 0 0;
}
.option-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    font-family: inherit;
}
.option-tab:hover { color: var(--text); }
.option-tab-primary {
    font-weight: 700;
}
.option-tab.active {
    background: var(--bg-3);
    border-color: var(--border);
    color: var(--accent);
}
.option-tab-body {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-mod-card {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

/* Portrait, cooldown, overrides and delay fieldsets share an inset style */
.cooldown-box, .overrides-box, .delay-box, .portrait-slot-card, .triggered-anim-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cooldown-box > legend, .overrides-box > legend, .delay-box > legend {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 6px;
}
.portrait-slot-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.portrait-slot-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}
.triggered-anim-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.triggered-anim-card {
    background: var(--bg-3);
}

/* Rank cards (tracked trait tracks/steps) — same left-rail + soft wash as option cards */
.rank-card {
    --rank-accent: var(--accent);
    background: color-mix(in srgb, var(--rank-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    border-left: 3px solid var(--rank-accent);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rank-card--0 { --rank-accent: var(--warn); }
.rank-card--1 { --rank-accent: var(--accent); }
.rank-card--2 { --rank-accent: var(--info); }
.rank-card--3 { --rank-accent: var(--cue); }
.rank-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rank-head .rank-level {
    background: var(--rank-accent);
    color: var(--on-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 11px;
}
.rank-head .rank-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.modifiers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.modifiers-grid .mod-cell {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    align-items: center;
}
.modifiers-grid label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
}
.modifiers-grid input { width: 60px; text-align: right; }

/* Image library */
.image-library {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.image-dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
}
.image-dropzone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.image-tile {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.image-tile img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 2px;
    background: var(--bg);
}
.image-tile .image-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}
.image-tile .image-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.image-stats {
    font-size: 11px;
    color: var(--text-dim);
    padding: 4px 0;
    border-top: 1px solid var(--border);
}

/* Image picker dialog */
.image-picker {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.image-picker-card {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    width: min(560px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.image-picker-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.image-picker-body {
    padding: 12px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.image-picker-tile {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
}
.image-picker-tile:hover { border-color: var(--accent); }
.image-picker-tile img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

/* In-game-ish event window mock (illustration + portraits + parchment + options).
   Intentionally uses fixed CK3-like golds — not editor semantic tokens. */
.ck3-mock {
    position: relative;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    color: #e8dcc8;
    border-radius: 2px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px #1a1510,
        0 0 0 3px #4a3f2e,
        0 12px 28px rgba(0, 0, 0, 0.55);
    background: linear-gradient(180deg, #252018 0%, #14110d 48%, #0d0b08 100%);
}

.ck3-mock-chrome {
    height: 3px;
    background: linear-gradient(90deg, #2a2218, #5c4d36 40%, #8a7348 50%, #5c4d36 60%, #2a2218);
    opacity: 0.95;
}
.ck3-mock-chrome-bottom {
    height: 2px;
    background: linear-gradient(90deg, transparent, #3d3428, transparent);
}

.ck3-mock-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px 0;
    justify-content: flex-end;
}
.ck3-mock-badge {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #5c4d36;
    color: var(--text-dim);
}

/* Top illustration (event_background) */
.ck3-mock-banner {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #0a0906;
    position: relative;
    border-bottom: 1px solid #000;
}
/* Compact banner in the inspector live preview (walk chain keeps full size) */
#preview-host .ck3-mock-banner {
    width: 100%;
    height: 72px;
    max-height: 72px;
    min-height: 0;
    aspect-ratio: unset;
    margin-inline: auto;
    background-position: center center;
    background-size: cover;
}
#preview-host .ck3-mock-banner--empty {
    height: 40px;
    max-height: 40px;
    min-height: 32px;
    aspect-ratio: unset;
}
.ck3-mock-banner--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a5040;
    font-size: 11px;
    font-style: italic;
}
.ck3-mock-banner-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 35%,
        transparent 55%,
        rgba(10, 8, 5, 0.55) 100%
    );
}

/* Main row: portrait | parchment | [portrait] */
.ck3-mock-main-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 120px;
    background: linear-gradient(180deg, #1c1812 0%, #12100c 100%);
    border-top: 1px solid #3a3228;
}

.ck3-mock-portrait-slot {
    flex: 0 0 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px 10px;
}
.ck3-mock-portrait-left {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
    border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.ck3-mock-portrait-right {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
    border-left: 1px solid rgba(0, 0, 0, 0.4);
}
.ck3-mock-portrait-slot--empty .ck3-mock-bust {
    opacity: 0.35;
}

.ck3-mock-bust {
    width: 44px;
    height: 52px;
    border-radius: 40% 40% 35% 35%;
    background:
        radial-gradient(ellipse 70% 45% at 50% 28%, #4a4338, transparent 55%),
        linear-gradient(180deg, #3a3530 0%, #221e1a 55%, #151310 100%);
    border: 1px solid #2a2620;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ck3-mock-bust--mini {
    width: 28px;
    height: 32px;
}
.ck3-mock-bust--story {
    border-color: #8a7040;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(200, 160, 80, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.5);
}
.ck3-mock-bust-empty {
    font-size: 14px;
    color: #4a443c;
    line-height: 1;
}

.ck3-mock-scope {
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a6e5a;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.ck3-mock-text-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ck3-mock-scroll {
    flex: 1;
    margin: 6px 8px 8px;
    padding: 8px 10px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 12%),
        linear-gradient(135deg, #2a261f 0%, #1e1a14 50%, #18150f 100%);
    border: 1px solid #4a4234;
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.35),
        inset 0 12px 24px rgba(0, 0, 0, 0.2);
}

.ck3-mock-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.ck3-mock-title-deco {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #6b5e48, transparent);
    opacity: 0.6;
}
.ck3-mock-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c9a86c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
}

.ck3-mock-desc {
    font-size: 11px;
    line-height: 1.55;
    color: #c4b69e;
    text-align: justify;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Optional lower portrait row (court / multi-character events) */
.ck3-mock-lower {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 4px 8px 8px;
    background: #12100c;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
}
.ck3-mock-portrait-mini {
    width: 32px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
}
.ck3-mock-portrait-mini--empty {
    opacity: 0.25;
    border-style: dashed;
}

/* Option dock (stacked bars like in-game) */
.ck3-mock-footer {
    background: linear-gradient(180deg, #16120e 0%, #0c0a08 100%);
    border-top: 1px solid #000;
}
.ck3-mock-footer-cap {
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 108, 0.12), transparent);
}

.ck3-mock-options {
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ck3-mock-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 0;
    min-height: 30px;
    background: linear-gradient(90deg, #2a241c 0%, #1a1610 55%, #14110e 100%);
    border: 1px solid #3d3528;
    border-radius: 1px;
    cursor: default;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.ck3-mock-option-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #a08040, #6b5428);
    border-radius: 1px 0 0 1px;
}
.ck3-mock-option-idx {
    margin-left: 10px;
    font-size: 9px;
    color: #6a5e4c;
    font-family: ui-monospace, monospace;
    min-width: 1em;
}
.ck3-mock-option-label {
    flex: 1;
    font-size: 11px;
    color: #dcd0b8;
    letter-spacing: 0.02em;
}
.ck3-mock-option-chain {
    color: #7a9a5a;
    font-size: 12px;
    margin-right: 4px;
    opacity: 0.9;
}
.ck3-mock-option-approx {
    color: #c9a23a;
    font-size: 12px;
    margin-right: 4px;
    cursor: help;
    opacity: 0.95;
}

button.ck3-mock-option {
    width: 100%;
    font: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.ck3-mock-option--clickable {
    cursor: pointer;
}
.ck3-mock-option--clickable:hover {
    border-color: #6b5428;
    background: linear-gradient(90deg, #342c22 0%, #221c14 55%, #1a1610 100%);
}
.ck3-mock-option--clickable:active {
    transform: translateY(1px);
}

.ck3-mock-option--end {
    cursor: pointer;
    opacity: 0.92;
}
.ck3-mock-option--end:hover {
    border-color: #5a5040;
}

.ck3-mock-option--unavailable,
.ck3-mock-option--unavailable:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.ck3-mock-ended {
    margin: 6px 8px 4px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--accent);
    text-align: center;
    border-top: 1px solid #3d3528;
}

.ck3-mock-badge-play {
    background: rgba(90, 138, 184, 0.25);
    border-color: #5a8ab8;
}

/* Playable preview controls (playbar lives in .preview-footer above live preview) */
.preview-playbar.hidden { display: none; }

.preview-playbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.preview-playbar-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.preview-playbar-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.preview-trail-sep {
    color: var(--text-dim);
    font-size: 10px;
}

.preview-trail-crumb.active {
    background: var(--accent);
    color: var(--on-accent);
}

.preview-trail-ended {
    font-size: 11px;
}

.preview-playbar-hint {
    font-size: 11px;
}

.preview-profile-host {
    margin-top: 6px;
}

.preview-profile-details {
    font-size: 11px;
}

.preview-profile-summary {
    cursor: pointer;
    color: var(--text-dim);
}

.preview-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}

.preview-profile-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

.preview-profile-field input[type="text"],
.preview-profile-field input[type="number"] {
    width: 100%;
    padding: 3px 6px;
    font-size: 11px;
}

.preview-profile-bool {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.export-blocked {
    margin-top: 8px;
    font-size: 12px;
    color: var(--danger, #c64a3a);
}

.export-anyway-link {
    display: inline;
    padding: 0 4px;
    vertical-align: baseline;
    text-decoration: underline;
}

.section-details-nested {
    margin-top: 8px;
}

.story-walk-crumb-label.active {
    color: var(--accent);
    font-weight: 600;
}

/* Letter events: slightly warmer “parchment” panel */
.ck3-mock--letter .ck3-mock-scroll {
    background:
        linear-gradient(180deg, rgba(255, 240, 210, 0.06) 0%, transparent 20%),
        linear-gradient(135deg, #322a20 0%, #241e16 100%);
    border-color: #5a4a38;
}
.ck3-mock--letter .ck3-mock-desc {
    color: #d4c8b0;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 10px 16px;
    border-radius: var(--radius);
    z-index: 2000;
    box-shadow: var(--shadow);
}
.toast.error { border-color: var(--danger); }
.toast.ok { border-color: var(--ok); }

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.modal-card {
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 20px;
    width: min(420px, 90vw);
}
.modal-card h3 { margin: 0 0 8px; }
.modal-card p { margin: 0 0 16px; color: var(--text-dim); }
.confirm-prompt-remember {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--text-dim);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    min-width: 200px;
    z-index: 100;
    box-shadow: var(--shadow);
    margin-top: 4px;
    overflow: hidden;
}
#template-menu,
#empty-template-menu {
    max-height: min(360px, 70vh);
    overflow-x: hidden;
    overflow-y: auto;
}
.dropdown-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 8px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.dropdown-menu button:hover { background: var(--bg-4); }
.dropdown-menu button .menu-sub {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    margin-top: 2px;
}

/* Utility */
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.kbd {
    display: inline-block;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
}

/* Event-level collapsible sections (Triggers / On-fire effects). Closed by
   default when empty - keeps the inspector compact for story-only events. */
.section-details {
    padding: 0;
}
.section-details > .section-summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 32px;
    user-select: none;
}
.section-details > .section-summary::-webkit-details-marker { display: none; }
.section-details > .section-summary::after {
    content: "+";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    transition: transform 100ms;
}
.section-details[open] > .section-summary::after {
    content: "-";
}
.section-details > .section-body {
    border-top: 1px solid var(--border);
}
.section-count {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    margin-right: 22px;
    font-weight: 600;
    letter-spacing: 0;
}
.section-count-zero {
    color: var(--text-muted);
    background: transparent;
    border-color: var(--border);
}
.section-hint {
    font-size: 11px;
    line-height: 1.5;
    margin-top: -2px;
    margin-bottom: 2px;
}

/* Export summary modal */
.modal-card-wide {
    width: min(560px, 92vw);
}
.export-summary {
    margin-bottom: 12px;
}
.export-counts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.counter-tile {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 6px;
    text-align: center;
}
.counter-tile-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
.counter-tile-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.export-issues {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 16px;
}
.export-ok {
    padding: 10px 12px;
    background: rgba(107, 154, 74, 0.12);
    border: 1px solid var(--ok);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 12px;
}
.export-issue-head {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.export-issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.export-issue {
    padding: 6px 10px;
    border-left: 3px solid var(--border);
    background: var(--bg-3);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 12px;
}
.export-issue-error { border-left-color: var(--danger); }
.export-issue-warn  { border-left-color: var(--warn); }

/* Keyboard shortcut cheat-sheet */
.shortcut-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.shortcut-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.shortcut-table td:first-child {
    width: 130px;
    text-align: right;
}
.shortcut-table tr:last-child td {
    border-bottom: none;
}

/* Inline fix buttons in the validation panel */
.vp-fixes {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}
.vp-fixes .btn {
    padding: 1px 6px;
    font-size: 10px;
}

/* Cytoscape edge handles helper styles use inline; nothing extra needed here */

/* Authoring checklist (sidebar footer) */
.authoring-checklist {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 10px 12px;
    background: var(--bg-2);
}
.checklist-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-dim);
}
.checklist-item:hover {
    background: var(--bg-3);
    color: var(--text);
}
.checklist-item.done {
    color: var(--text);
}
.checklist-item.done .checklist-mark {
    color: var(--ok);
}
.checklist-mark {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* Welcome modal */
.welcome-credit {
    margin: 14px 0 0;
    font-size: 12px;
    text-align: center;
}
.welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.export-ingame {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
}

/* Event list search */
.event-list-search {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 8px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
}
.event-toolbar .event-list-search,
.character-toolbar .event-list-search {
    margin: 0;
}
.event-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.character-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
#panel-events.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-events .event-toolbar {
    flex-shrink: 0;
}
#panel-events #event-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#panel-characters.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-characters .character-toolbar {
    flex-shrink: 0;
}
#panel-characters #character-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.item-list li.error-item { border-left: 2px solid var(--danger); }
.item-list li.orphan-item { opacity: 0.85; }
.item-badge.error { background: var(--danger); color: #fff; }
.item-badge.orphan { background: transparent; border: 1px dashed var(--warn); color: var(--warn); }

/* Option card focus flash */
.option-card-focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Effect presets */
.effect-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
}
.effect-preset-chip { font-size: 11px; }
.effect-preset-trait {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.trait-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trait-picker-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* Export script preview */
.export-preview { margin-top: 12px; }
.export-preview-details summary { cursor: pointer; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.export-preview-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.export-preview-tab.active { background: var(--accent); color: var(--on-accent); }
.export-preview-code {
    max-height: 200px;
    overflow: auto;
    font-size: 10px;
    line-height: 1.4;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Install hint */
.install-hint-path {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 12px;
    overflow-x: auto;
}
.install-steps {
    margin: 8px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.install-steps .install-hint-path { margin: 6px 0 0; }

/* Story walk overlay */
.story-walk-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.story-walk-overlay.hidden { display: none; }
.story-walk-panel {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 960px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.story-walk-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.story-walk-profile {
    flex: 0 0 248px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
    padding-right: 12px;
    border-right: 1px solid var(--border);
}
.story-walk-body {
    flex: 1;
    min-width: 0;
}
.preview-profile-sidebar-title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}
.preview-profile-sidebar-hint {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.35;
}
.story-walk-profile .preview-profile-grid {
    grid-template-columns: 1fr;
}
.story-walk-profile .preview-profile-sidebar .btn {
    margin-top: 8px;
}
.story-walk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.story-walk-header h3 { margin: 0; font-size: 16px; }
.story-walk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 11px;
}
.story-walk-crumb.active { background: var(--accent); color: var(--on-accent); }
.story-walk-crumb-sep { color: var(--text-dim); margin: 0 2px; }
.story-walk-options { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.story-walk-opt { text-align: left; justify-content: flex-start; }
.story-walk-opt-dead { opacity: 0.65; }
.story-walk-opt-letter { font-weight: 600; margin-right: 6px; color: var(--accent); }
.story-walk-warn { margin-top: 10px; font-size: 11px; }
.story-walk-start-row { margin-bottom: 8px; font-size: 12px; }

/* Checklist polish */
.checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.checklist-item.next {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: var(--radius);
}
.checklist-item.next .checklist-label { color: var(--accent); }

/* "Next:" nudge shown when the checklist is collapsed. */
.checklist-next {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    margin: 0;
    border: none;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.checklist-next:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* Numbered "how it works" list in the welcome modal. */
.welcome-steps {
    margin: 12px 0 4px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}
.welcome-steps li { padding-left: 2px; }

/* Guided tutorial spotlight */
.guided-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}
.guided-tour-overlay.hidden { display: none; }
.guided-tour-dim {
    position: fixed;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: auto;
}
.guided-tour-cutout {
    position: fixed;
    border-radius: 8px;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--start) 55%, transparent);
}
.guided-tour-glow {
    position: fixed;
    border-radius: 10px;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--start) 40%, transparent),
        0 0 22px 4px color-mix(in srgb, var(--start) 28%, transparent);
    animation: guided-tour-glow-breath 2.4s ease-in-out infinite;
}
@keyframes guided-tour-glow-breath {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}
.guided-tour-card {
    position: fixed;
    z-index: 91;
    pointer-events: none;
    background: var(--bg-2);
    border: 1px solid color-mix(in srgb, var(--start) 35%, var(--border));
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.45),
        0 0 0 1px color-mix(in srgb, var(--start) 18%, transparent);
}
.guided-tour-card.guided-tour-card-armed {
    pointer-events: auto;
}
.guided-tour-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.guided-tour-step {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--start);
    text-transform: uppercase;
}
.guided-tour-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}
.guided-tour-text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
}
.guided-tour-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.guided-tour-back {
    flex: 0 0 auto;
    color: var(--text-dim);
}
.guided-tour-back.hidden {
    display: none;
}
.guided-tour-actions [data-tour-continue] {
    flex: 0 0 auto;
}
.guided-tour-skip {
    margin-left: auto;
    font-size: 12px;
}
.checklist-replay {
    display: block;
    margin: 8px 4px 2px;
    font-size: 12px;
    text-align: left;
}

/* Plain-language glossary */
.glossary {
    margin: 12px 0 0;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 6px;
}
.glossary dt {
    font-weight: 600;
    color: var(--accent);
    margin-top: 12px;
}
.glossary dt:first-child { margin-top: 0; }
.glossary dd {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

/* Help sheet extras */
.help-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.help-actions a.btn {
    display: inline-block;
}
.help-actions a.btn:visited {
    color: var(--text);
}

#btn-walk:disabled { opacity: 0.45; cursor: not-allowed; }

/* Entry points sidebar & forms */
.entrypoint-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.modifier-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.trait-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.trait-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.trait-filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
#panel-traits.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-traits .trait-toolbar {
    flex-shrink: 0;
}
#panel-traits #trait-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#panel-court-positions.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-court-positions .list-toolbar {
    flex-shrink: 0;
}
#panel-court-positions #court-position-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#trait-list li.trait-list-item,
#court-position-list li.trait-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}
#trait-list .trait-list-head,
#court-position-list .trait-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}
#trait-list .trait-list-head .item-title,
#court-position-list .trait-list-head .item-title {
    flex: 1;
    min-width: 0;
}
#trait-list .trait-list-head .item-badge,
#court-position-list .trait-list-head .item-badge {
    flex-shrink: 0;
}
#trait-list .trait-list-summary,
#court-position-list .trait-list-summary {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modifier-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.modifier-filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

#panel-modifiers.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-modifiers .modifier-toolbar {
    flex-shrink: 0;
}
#panel-modifiers #modifier-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#modifier-list li.modifier-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}
#modifier-list .modifier-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}
#modifier-list .modifier-list-head .item-title {
    flex: 1;
    min-width: 0;
}
#modifier-list .modifier-list-head .item-badge {
    flex-shrink: 0;
}
#modifier-list .modifier-list-summary {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nickname-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
#panel-reputation.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-reputation .nickname-toolbar,
#panel-reputation .reputation-toolbar {
    flex-shrink: 0;
}
#panel-reputation #reputation-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#reputation-list li.reputation-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}
#reputation-list .reputation-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}
#reputation-list .reputation-list-head .item-title {
    flex: 1;
    min-width: 0;
}
#reputation-list .reputation-list-head .item-badge {
    flex-shrink: 0;
}
#reputation-list .reputation-list-summary {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.artifact-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.artifact-filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
#panel-artifacts.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-artifacts .artifact-toolbar {
    flex-shrink: 0;
}
#panel-artifacts #artifact-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#artifact-list li.artifact-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}
#artifact-list .artifact-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#artifact-list .artifact-list-head .item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#artifact-list .artifact-list-head .item-badge {
    flex-shrink: 0;
}
#artifact-list .artifact-list-summary {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.maa-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.maa-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.maa-filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
#panel-regiments.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-regiments .maa-toolbar {
    flex-shrink: 0;
}
#panel-regiments #maa-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#maa-list li.maa-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}
#maa-list .maa-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#maa-list .maa-list-head .item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#maa-list .maa-list-head .item-badge {
    flex-shrink: 0;
}
#maa-list .maa-list-summary {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contract-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.contract-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.contract-filter-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Event firing / game moments */
.event-firing-summary {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
}
.event-firing-warnings {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 12px;
}
.event-firing-warnings .validation-warn { color: var(--warn, #c9a227); }
.event-firing-warnings .validation-error { color: var(--danger, #c44); }
.event-entry-controls .entry-subsection-label {
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 4px;
}
.entry-path-panel {
    margin-top: 8px;
    padding-left: 4px;
    border-left: 2px solid var(--border, rgba(255, 255, 255, 0.1));
    padding-bottom: 4px;
}
.moment-filter-chips,
.moment-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 8px;
}
.moment-scope-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    white-space: nowrap;
    opacity: 0.85;
    align-self: start;
    margin-top: 4px;
}
.moment-scope-badge--character { border-color: #4a8; }
.moment-scope-badge--alternate { border-color: #c9a227; }
.moment-scope-badge--blocked { border-color: #c44; }
.moment-hint {
    font-size: 11px;
    margin: 4px 0 8px;
}
.entry-hooks-builder-wrap {
    margin: 6px 0 8px;
}
.builder-row.builder-row-entry-hook {
    grid-template-columns: 1fr auto auto;
    align-items: start;
}
.builder-row.builder-row-entry-hook-header {
    grid-template-columns: 1fr auto auto;
}
.builder-row.builder-row-entry-hook--picker {
    border-style: dashed;
}
.entry-hook-picker-cell {
    min-width: 0;
}
.entry-hook-picker-cell .builder-kind-select,
.custom-key-inline-picker .builder-kind-select {
    width: 100%;
}
/* Shared custom-key picker (flags, traits, moments, catalog keys) */
.custom-key-picker,
.custom-key-inline-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}
.custom-key-picker-value {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.custom-key-field-host {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.custom-key-input,
.entry-hook-custom-key {
    width: 100%;
    min-width: 0;
}
.custom-key-suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 4px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--bg-2, rgba(0, 0, 0, 0.2));
}
.custom-key-suggestion {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
}
.custom-key-suggestion:hover {
    background: var(--accent-dim, rgba(90, 138, 184, 0.2));
}
.custom-key-suggestion-label {
    flex: 1;
    min-width: 0;
}
.custom-key-suggestion-key {
    font-size: 10px;
    opacity: 0.7;
}
.custom-key-suggestions-empty {
    font-size: 11px;
    margin: 2px 0 0;
    padding: 0 2px;
}
/* Legacy alias */
.entry-hook-inline-picker,
.entry-hook-custom-host {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.entry-hook-row-block {
    margin-bottom: 4px;
}
.entry-hooks-empty {
    font-size: 12px;
    margin: 4px 0 8px;
    padding: 0 2px;
}

#panel-contracts.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#panel-contracts .contract-toolbar {
    flex-shrink: 0;
}
#panel-contracts #contract-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#contract-list li.contract-list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow: hidden;
    min-height: 0;
}
#contract-list .contract-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#contract-list .contract-list-head .item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
#contract-list .contract-list-head .item-badge {
    flex-shrink: 0;
}
#contract-list .contract-list-summary {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contract-flow-strip {
    margin-bottom: 10px;
    background: var(--panel-elevated, #1e1c18);
    border: 1px solid var(--border-subtle, #3a352c);
    border-radius: 6px;
}
.contract-flow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
}
.contract-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.contract-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4a4030;
    color: #e7decb;
    font-size: 10px;
    font-weight: 600;
}
.contract-flow-arrow {
    color: #8a7d68;
    font-size: 11px;
}
.contract-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.warn-banner {
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(180, 120, 40, 0.12);
    border: 1px solid rgba(180, 120, 40, 0.35);
    font-size: 12px;
    line-height: 1.4;
}
.contract-phase-legacy-banner {
    margin-bottom: 8px;
}
.contract-timing-warn {
    margin-bottom: 0;
}
.artifact-wear-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.radio-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.item-list .item-subtitle {
    display: block;
    font-size: 11px;
    margin-top: 2px;
}
.item-list .item-badge.entry-type {
    background: #4a5568;
    color: #e8ecf0;
    font-size: 10px;
}
.item-list .item-badge.entry-decision {
    background: #5a4a6a;
    color: #f0e8f5;
}
.item-list .item-badge.entry-interaction {
    background: #3a5a6a;
    color: #e8f2f8;
}
.item-list .item-badge.entry-group {
    background: #4a4a5a;
    color: #e8e8f0;
    font-size: 10px;
}
.item-list li.entrypoint-empty {
    padding: 10px 8px;
    line-height: 1.45;
    cursor: default;
}
.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.entrypoint-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.entrypoint-summary-list {
    margin: 6px 0 0;
    padding-left: 18px;
}
.entrypoint-summary-list li { margin: 4px 0; }
.entrypoint-linked-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.entrypoint-linked-title { flex: 1; min-width: 0; }
.entrypoint-link-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.entrypoint-link-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 8px;
}
.entrypoint-link-row--empty {
    align-items: baseline;
}
.entrypoint-link-label {
    font-size: 12px;
    color: var(--muted);
}
.entrypoint-link-select {
    width: 100%;
    min-width: 0;
}
.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-align: left;
}
.btn-link:hover { text-decoration: underline; }
.radio-group { display: flex; flex-direction: column; gap: 6px; }
.radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.entrypoint-pick-modal .entrypoint-event-pick {
    width: 100%;
    max-width: 100%;
}
.warn-text { color: var(--warn); }

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