styles.css

/* ============================================
   Scene Cards Plugin - Main Styles
   ============================================ */

/* ??? Theme-aware color tokens ???????????????????????????????? */
/* Light theme (default) */
body {
    /* Status colors */
    --sl-status-idea:       #9E9E9E;
    --sl-status-outlined:   #2196F3;
    --sl-status-draft:      #FF9800;
    --sl-status-written:    #4CAF50;
    --sl-status-revised:    #9C27B0;
    --sl-status-final:      #F44336;

    /* Emotion colors */
    --sl-emotion-tense:       #E53935;
    --sl-emotion-suspenseful: #D32F2F;
    --sl-emotion-joyful:      #43A047;
    --sl-emotion-happy:       #66BB6A;
    --sl-emotion-melancholic: #5C6BC0;
    --sl-emotion-sad:         #7986CB;
    --sl-emotion-romantic:    #EC407A;
    --sl-emotion-mysterious:  #8E24AA;
    --sl-emotion-angry:       #F44336;
    --sl-emotion-hopeful:     #29B6F6;
    --sl-emotion-peaceful:    #26A69A;
    --sl-emotion-default:     #9E9E9E;

    /* Act / POV accent palette */
    --sl-act-1: #2196F3;
    --sl-act-2: #4CAF50;
    --sl-act-3: #FF9800;
    --sl-act-4: #9C27B0;
    --sl-act-5: #F44336;

    /* Relationship map */
    --sl-rel-ally:     #4CAF50;
    --sl-rel-enemy:    #F44336;
    --sl-rel-romantic: #E91E63;
    --sl-rel-family:   #FF9800;

    /* Character role badges */
    --sl-role-protagonist:    #7c3aed;
    --sl-role-antagonist:     #dc2626;
    --sl-role-deuteragonist:  #2563eb;
    --sl-role-mentor:         #059669;
    --sl-role-sidekick:       #d97706;
    --sl-role-love-interest:  #db2777;
    --sl-role-foil:           #7c3aed;
    --sl-role-supporting:     #6b7280;
    --sl-role-minor:          #9ca3af;

    /* Semantic / UI */
    --sl-warning:    #FF9800;
    --sl-error:      #E53935;
    --sl-success:    #4CAF50;
    --sl-info:       #2196F3;
    --sl-badge-text: #ffffff;

    /* Shadows & subtle overlays ??use semi-transparent black on light */
    --sl-shadow-sm:      0 2px 8px rgba(0,0,0,0.12);
    --sl-shadow-md:      0 4px 12px rgba(0,0,0,0.15);
    --sl-shadow-panel:   -2px 0 10px rgba(0,0,0,0.10);
    --sl-border-subtle:  rgba(0,0,0,0.06);
    --sl-hover-overlay:  rgba(0,0,0,0.04);
    --sl-hover-overlay2: rgba(0,0,0,0.045);

    /* PlotGrid palette (light pastels) */
    --sl-palette-1: #fde8d8;
    --sl-palette-2: #fdf6d8;
    --sl-palette-3: #d8f5e0;
    --sl-palette-4: #d8eafd;
    --sl-palette-5: #ead8fd;
    --sl-palette-6: #fdd8e8;
    --sl-palette-7: #d8f5f5;
    --sl-palette-8: #f5d8d8;
    --sl-palette-9: #e8e8e8;

    /* Grid defaults */
    --sl-grid-border:   #e0e0e0;
    --sl-grid-flash:    rgba(255,255,0,0.18);
    --sl-checker-light: #ffffff;
    --sl-checker-dark:  #dddddd;

    /* Error/invalid tints */
    --sl-error-tint:    rgba(244,67,54,0.10);
    --sl-error-border:  rgba(229,83,83,0.28);
    --sl-error-bg:      rgba(229,83,83,0.12);
    --sl-warning-tint:  rgba(244,67,54,0.08);

    /* Plotgrid selection outline */
    --sl-focus-ring:    rgba(63,81,181,0.12);

    /* POV hue lightness for HSL-generated colors */
    --sl-pov-lightness: 55%;
}

/* Dark theme overrides — Obsidian dark OR project UI theme dark */
body.theme-dark,
body.narrative-lab-theme-dark {
    --sl-status-idea:       #BDBDBD;
    --sl-status-outlined:   #64B5F6;
    --sl-status-draft:      #FFB74D;
    --sl-status-written:    #81C784;
    --sl-status-revised:    #CE93D8;
    --sl-status-final:      #EF5350;

    --sl-emotion-tense:       #EF5350;
    --sl-emotion-suspenseful: #E57373;
    --sl-emotion-joyful:      #66BB6A;
    --sl-emotion-happy:       #81C784;
    --sl-emotion-melancholic: #7986CB;
    --sl-emotion-sad:         #9FA8DA;
    --sl-emotion-romantic:    #F06292;
    --sl-emotion-mysterious:  #BA68C8;
    --sl-emotion-angry:       #EF5350;
    --sl-emotion-hopeful:     #4FC3F7;
    --sl-emotion-peaceful:    #4DB6AC;
    --sl-emotion-default:     #BDBDBD;

    --sl-act-1: #64B5F6;
    --sl-act-2: #81C784;
    --sl-act-3: #FFB74D;
    --sl-act-4: #CE93D8;
    --sl-act-5: #EF5350;

    --sl-rel-ally:     #81C784;
    --sl-rel-enemy:    #EF5350;
    --sl-rel-romantic: #F06292;
    --sl-rel-family:   #FFB74D;

    --sl-role-protagonist:    #a78bfa;
    --sl-role-antagonist:     #f87171;
    --sl-role-deuteragonist:  #60a5fa;
    --sl-role-mentor:         #34d399;
    --sl-role-sidekick:       #fbbf24;
    --sl-role-love-interest:  #f472b6;
    --sl-role-foil:           #a78bfa;
    --sl-role-supporting:     #9ca3af;
    --sl-role-minor:          #d1d5db;

    --sl-warning:    #FFB74D;
    --sl-error:      #EF5350;
    --sl-success:    #81C784;
    --sl-info:       #64B5F6;
    --sl-badge-text: #ffffff;

    --sl-shadow-sm:      0 2px 8px rgba(0,0,0,0.35);
    --sl-shadow-md:      0 4px 12px rgba(0,0,0,0.40);
    --sl-shadow-panel:   -2px 0 10px rgba(0,0,0,0.35);
    --sl-border-subtle:  rgba(255,255,255,0.08);
    --sl-hover-overlay:  rgba(255,255,255,0.04);
    --sl-hover-overlay2: rgba(255,255,255,0.06);

    --sl-palette-1: #4a3328;
    --sl-palette-2: #4a4528;
    --sl-palette-3: #284a32;
    --sl-palette-4: #283a4a;
    --sl-palette-5: #3a284a;
    --sl-palette-6: #4a2838;
    --sl-palette-7: #284a4a;
    --sl-palette-8: #4a2828;
    --sl-palette-9: #3a3a3a;

    --sl-grid-border:   rgba(255,255,255,0.12);
    --sl-grid-flash:    rgba(255,255,100,0.12);
    --sl-checker-light: #2a2a2a;
    --sl-checker-dark:  #404040;

    --sl-error-tint:    rgba(244,67,54,0.15);
    --sl-error-border:  rgba(239,83,83,0.35);
    --sl-error-bg:      rgba(239,83,83,0.18);
    --sl-warning-tint:  rgba(255,183,77,0.12);

    --sl-focus-ring:    rgba(100,130,230,0.20);

    --sl-pov-lightness: 65%;
}

/* Project light theme wins over Obsidian dark for NarrativeLab tokens */
body.narrative-lab-theme-light {
    --sl-status-idea:       #9E9E9E;
    --sl-status-outlined:   #2196F3;
    --sl-status-draft:      #FF9800;
    --sl-status-written:    #4CAF50;
    --sl-status-revised:    #9C27B0;
    --sl-status-final:      #F44336;

    --sl-emotion-tense:       #E53935;
    --sl-emotion-suspenseful: #D32F2F;
    --sl-emotion-joyful:      #43A047;
    --sl-emotion-happy:       #66BB6A;
    --sl-emotion-melancholic: #5C6BC0;
    --sl-emotion-sad:         #7986CB;
    --sl-emotion-romantic:    #EC407A;
    --sl-emotion-mysterious:  #8E24AA;
    --sl-emotion-angry:       #F44336;
    --sl-emotion-hopeful:     #29B6F6;
    --sl-emotion-peaceful:    #26A69A;
    --sl-emotion-default:     #9E9E9E;

    --sl-act-1: #2196F3;
    --sl-act-2: #4CAF50;
    --sl-act-3: #FF9800;
    --sl-act-4: #9C27B0;
    --sl-act-5: #F44336;

    --sl-rel-ally:     #4CAF50;
    --sl-rel-enemy:    #F44336;
    --sl-rel-romantic: #E91E63;
    --sl-rel-family:   #FF9800;

    --sl-role-protagonist:    #7c3aed;
    --sl-role-antagonist:     #dc2626;
    --sl-role-deuteragonist:  #2563eb;
    --sl-role-mentor:         #059669;
    --sl-role-sidekick:       #d97706;
    --sl-role-love-interest:  #db2777;
    --sl-role-foil:           #7c3aed;
    --sl-role-supporting:     #6b7280;
    --sl-role-minor:          #9ca3af;

    --sl-warning:    #FF9800;
    --sl-error:      #E53935;
    --sl-success:    #4CAF50;
    --sl-info:       #2196F3;
    --sl-badge-text: #ffffff;

    --sl-shadow-sm:      0 2px 8px rgba(0,0,0,0.12);
    --sl-shadow-md:      0 4px 12px rgba(0,0,0,0.15);
    --sl-shadow-panel:   -2px 0 10px rgba(0,0,0,0.10);
    --sl-border-subtle:  rgba(0,0,0,0.06);
    --sl-hover-overlay:  rgba(0,0,0,0.04);
    --sl-hover-overlay2: rgba(0,0,0,0.045);

    --sl-palette-1: #fde8d8;
    --sl-palette-2: #fdf6d8;
    --sl-palette-3: #d8f5e0;
    --sl-palette-4: #d8eafd;
    --sl-palette-5: #ead8fd;
    --sl-palette-6: #fdd8e8;
    --sl-palette-7: #d8f5f5;
    --sl-palette-8: #f5d8d8;
    --sl-palette-9: #e8e8e8;

    --sl-grid-border:   #e0e0e0;
    --sl-grid-flash:    rgba(255,255,0,0.18);
    --sl-checker-light: #ffffff;
    --sl-checker-dark:  #dddddd;

    --sl-error-tint:    rgba(244,67,54,0.10);
    --sl-error-border:  rgba(229,83,83,0.28);
    --sl-error-bg:      rgba(229,83,83,0.12);
    --sl-warning-tint:  rgba(244,67,54,0.08);

    --sl-focus-ring:    rgba(63,81,181,0.12);
    --sl-pov-lightness: 55%;
}

/* Explicit project theme override for main NarrativeLab views only.
   Left/right sidebars (navigator, inspector) always follow Obsidian. */
body.narrative-lab-theme-light .story-line-board-container,
body.narrative-lab-theme-light .story-line-timeline-container,
body.narrative-lab-theme-light .story-line-storyline-container,
body.narrative-lab-theme-light .story-line-character-container,
body.narrative-lab-theme-light .story-line-location-container,
body.narrative-lab-theme-light .story-line-codex-container,
body.narrative-lab-theme-light .story-line-stats-container,
body.narrative-lab-theme-light .story-line-manuscript-container,
body.narrative-lab-theme-light .plot-grid-root {
    --background-primary: #ffffff;
    --background-primary-alt: #f7f7f7;
    --background-secondary: #f0f0f0;
    --background-secondary-alt: #e8e8e8;
    --background-modifier-border: rgba(0, 0, 0, 0.12);
    --background-modifier-hover: rgba(0, 0, 0, 0.05);
    --background-modifier-active-hover: rgba(0, 0, 0, 0.08);
    --text-normal: #222222;
    --text-muted: #666666;
    --text-faint: #999999;
    --text-on-accent: #ffffff;
    color-scheme: light;
    color: var(--text-normal);
    background-color: var(--background-primary);
}

body.narrative-lab-theme-dark .story-line-board-container,
body.narrative-lab-theme-dark .story-line-timeline-container,
body.narrative-lab-theme-dark .story-line-storyline-container,
body.narrative-lab-theme-dark .story-line-character-container,
body.narrative-lab-theme-dark .story-line-location-container,
body.narrative-lab-theme-dark .story-line-codex-container,
body.narrative-lab-theme-dark .story-line-stats-container,
body.narrative-lab-theme-dark .story-line-manuscript-container,
body.narrative-lab-theme-dark .plot-grid-root {
    --background-primary: #1e1e1e;
    --background-primary-alt: #252525;
    --background-secondary: #2a2a2a;
    --background-secondary-alt: #303030;
    --background-modifier-border: rgba(255, 255, 255, 0.12);
    --background-modifier-hover: rgba(255, 255, 255, 0.06);
    --background-modifier-active-hover: rgba(255, 255, 255, 0.1);
    --text-normal: #dcddde;
    --text-muted: #a0a0a0;
    --text-faint: #777777;
    --text-on-accent: #ffffff;
    color-scheme: dark;
    color: var(--text-normal);
    background-color: var(--background-primary);
}

.nl-ui-theme-toggle .nl-ui-theme-btn {
    min-width: 4.5em;
}

.nl-ui-theme-toggle .nl-ui-theme-btn.is-active {
    opacity: 1;
}

.nl-ui-theme-toggle .nl-ui-theme-btn:not(.is-active) {
    opacity: 0.75;
}

/* --- Variables (using Obsidian theme vars) --- */
.story-line-board-container,
.story-line-timeline-container,
.story-line-storyline-container,
.story-line-character-container,
.story-line-location-container,
.story-line-codex-container,
.story-line-stats-container {
    --sc-card-bg: var(--background-secondary);
    --sc-card-hover: var(--background-modifier-hover);
    --sc-card-border: var(--background-modifier-border);
    --sc-column-bg: var(--background-primary-alt);
    --sc-text: var(--text-normal);
    --sc-text-muted: var(--text-muted);
    --sc-text-faint: var(--text-faint);
    --sc-accent: var(--interactive-accent);
    --sc-radius: 8px;
    --sc-gap: 10px;

    height: 100%;
    overflow: auto;
    padding: 0;
    /* reserve space on the right for the inspector panel so it doesn't overlap Obsidian's right sidebar */
    padding-right: 320px;
}

/* --- Toolbar --- */
.story-line-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--sc-card-border);
    background: var(--background-primary);
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 6px 8px;
    flex-wrap: wrap;
    min-height: 40px;
    flex-shrink: 0;
    overflow: visible;
}

/* Board and spreadsheet use the same two-tier application header:
   project navigation above, page-specific actions below. Rows grow when
   controls wrap; fixed row heights let controls paint over adjacent rows. */
.story-line-toolbar.sl-two-row-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(28px, auto) minmax(28px, auto);
    column-gap: 8px;
    row-gap: 6px;
    min-height: 74px;
    padding: 6px 12px;
    box-sizing: border-box;
}

.story-line-toolbar.sl-two-row-toolbar > .story-line-title-row {
    grid-column: 1;
    grid-row: 1;
}

.story-line-toolbar.sl-two-row-toolbar > .story-line-view-switcher {
    grid-column: 2;
    grid-row: 1;
}

.story-line-toolbar.sl-two-row-toolbar > .story-line-view-actions {
    grid-column: 3;
    grid-row: 1;
}

.story-line-toolbar.sl-two-row-toolbar > .story-line-toolbar-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 28px;
    margin: 0;
}

/* Issue #98 ??when the toolbar is sticky inside a scroll container that has
   any top padding (or Obsidian's view-content edge), a thin strip of scrolling
   content could appear above the toolbar. This pseudo paints the same
   background colour upward to cover that gap on the Codex/Character pages. */
.story-line-toolbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: var(--background-primary);
    pointer-events: none;
}

.story-line-view-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    white-space: nowrap;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
}

/* Title + project selector row */
.story-line-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    flex-shrink: 0;
    min-width: 0;
    max-width: 240px;
}
/* WritingLab owns its project header. Hide Obsidian's duplicate view header
   (including Commander injections) for every plugin page. The explicit class
   is attached by the view factory before the view mounts; data-type remains a
   compatibility fallback for the embedded Narrative Canvas view. */
.workspace-leaf-content.nl-writing-lab-leaf > .view-header,
.workspace-leaf-content.nl-writing-lab-leaf > .view-header-container > .view-header,
.workspace-leaf-content.nl-writing-lab-leaf > .view-header-wrapper > .view-header,
.workspace-leaf-content[data-type^="narrative-lab-"] > .view-header,
.workspace-leaf-content[data-type^="narrative-lab-"] > .view-header-container > .view-header,
.workspace-leaf-content[data-type^="narrative-lab-"] > .view-header-wrapper > .view-header {
    display: none !important;
}
/* ?? Series management modal ?? */
.sl-series-modal {
    max-width: 500px;
}

.sl-series-empty {
    color: var(--text-muted);
    font-style: italic;
}

.sl-series-section-title {
    margin: 16px 0 4px;
}

.sl-series-section-title:first-child {
    margin-top: 0;
}

.sl-series-section-desc {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

.sl-series-project-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.sl-series-project-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
}

.sl-series-project-info {
    flex: 1;
    min-width: min(180px, 100%);
}

.sl-series-project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sl-delete-project-path {
    overflow-wrap: anywhere;
    font-family: var(--font-monospace);
}

.sl-series-project-name {
    font-weight: 600;
}

.sl-series-project-path {
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-series-convert-btn {
    flex-shrink: 0;
    cursor: pointer;
}

.modal-container.nl-stacked-modal {
    z-index: 100000;
}

.nl-stacked-modal-content {
    z-index: 100001;
}

.sl-series-card {
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.sl-series-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sl-series-title {
    font-weight: 600;
    font-size: 1.1em;
}

.sl-series-folder-hint {
    font-size: 0.8em;
    color: var(--text-muted);
    flex: 1;
}

.sl-series-action {
    flex-shrink: 0;
}

.sl-series-book-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sl-series-book-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
}

.sl-series-book-row:hover {
    background: var(--background-modifier-hover);
}

.sl-series-book-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-series-book-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.sl-series-book-row:hover .sl-series-book-actions,
.sl-series-book-row:focus-within .sl-series-book-actions,
.is-mobile .sl-series-book-actions {
    opacity: 1;
}

.sl-series-book-actions .clickable-icon {
    padding: 2px;
}

.sl-series-book-actions .clickable-icon svg {
    width: 14px;
    height: 14px;
}

.sl-series-remove:hover {
    color: var(--text-error);
}

.sl-series-add-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sl-series-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    cursor: grab;
}

.sl-series-add-btn span svg {
    width: 14px;
    height: 14px;
}

.sl-series-dissolve-btn {
    color: var(--text-warning);
}

/* Prevent tiled dropdown-arrow artifacts (seen on some Win11/Electron setups) */
.story-line-board-container.story-line-board-container select,
.story-line-timeline-container.story-line-timeline-container select,
.story-line-storyline-container.story-line-storyline-container select,
.story-line-character-container.story-line-character-container select,
.story-line-location-container.story-line-location-container select,
.story-line-stats-container.story-line-stats-container select,
.story-line-quick-add.story-line-quick-add select,
.storyline-export-modal.storyline-export-modal select,
.project-select-dropdown.project-select-dropdown {
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Push controls to the right; wrap as a unit when the row is too narrow
   (inspector open, long project title, etc.) instead of stacking on top. */
.story-line-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    min-height: 28px;
    max-width: 100%;
    justify-content: flex-end;
}

/* Board: mode / toggles / CTA always get their own row so they never
   collide with the view switcher when the scene inspector is open. */
.story-line-toolbar-controls.is-board-controls {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    align-items: center;
}

/* Order / Timeline controls: own row under tabs so they don't fight
   Stats / Converter for margin-left: auto. flex-shrink: 0 so they cannot
   squeeze onto the tab row. */
.workspace-leaf-content[data-type="narrative-lab-track-comparison"] .story-line-toolbar-controls,
.workspace-leaf-content[data-type="narrative-lab-subway"] .story-line-toolbar-controls,
.workspace-leaf-content[data-type="narrative-lab-timeline"] .story-line-toolbar-controls,
.workspace-leaf-content[data-type="narrative-lab-storyline"] .story-line-toolbar-controls {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    white-space: nowrap;
}

.workspace-leaf-content[data-type="narrative-lab-track-comparison"] .story-line-toolbar-controls::-webkit-scrollbar,
.workspace-leaf-content[data-type="narrative-lab-subway"] .story-line-toolbar-controls::-webkit-scrollbar,
.workspace-leaf-content[data-type="narrative-lab-timeline"] .story-line-toolbar-controls::-webkit-scrollbar,
.workspace-leaf-content[data-type="narrative-lab-storyline"] .story-line-toolbar-controls::-webkit-scrollbar {
    display: none;
}

.workspace-leaf-content[data-type="narrative-lab-track-comparison"] .story-line-toolbar-controls > *,
.workspace-leaf-content[data-type="narrative-lab-subway"] .story-line-toolbar-controls > *,
.workspace-leaf-content[data-type="narrative-lab-timeline"] .story-line-toolbar-controls > *,
.workspace-leaf-content[data-type="narrative-lab-storyline"] .story-line-toolbar-controls > * {
    flex: 0 0 auto;
}

.workspace-leaf-content[data-type="narrative-lab-track-comparison"] .story-line-toolbar-controls .story-line-add-btn,
.workspace-leaf-content[data-type="narrative-lab-subway"] .story-line-toolbar-controls .story-line-add-btn,
.workspace-leaf-content[data-type="narrative-lab-timeline"] .story-line-toolbar-controls .story-line-add-btn,
.workspace-leaf-content[data-type="narrative-lab-storyline"] .story-line-toolbar-controls .story-line-add-btn {
    min-width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    font-size: 0.86em;
}

.workspace-leaf-content[data-type="narrative-lab-track-comparison"] .story-line-toolbar-controls select,
.workspace-leaf-content[data-type="narrative-lab-subway"] .story-line-toolbar-controls select,
.workspace-leaf-content[data-type="narrative-lab-timeline"] .story-line-toolbar-controls select,
.workspace-leaf-content[data-type="narrative-lab-storyline"] .story-line-toolbar-controls select {
    width: auto;
    max-width: 126px;
    height: 28px;
    min-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.84em;
}

/* Kill Obsidian/theme button padding so CJK labels sit on the true
   vertical center of fixed-height toolbar controls. */
.story-line-toolbar button.mod-cta.story-line-add-btn,
.story-line-toolbar-controls button.story-line-add-btn,
.story-line-toolbar-controls .story-line-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    /* CJK em-box sits slightly high; nudge down optically */
    padding-top: 1px !important;
    padding-bottom: 0 !important;
}

.story-line-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 28px;
}
.story-line-icon-group .clickable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    box-sizing: border-box;
}

/* One icon-button specification for page action rows. Plot Grid previously
   rewrote these dimensions inline, which made it drift from the board. */
.story-line-toolbar-controls > .clickable-icon,
.story-line-toolbar-controls .story-line-icon-group > .clickable-icon,
.story-line-toolbar-controls .plot-grid-toolbar-left > .clickable-icon,
.story-line-toolbar-controls .plot-grid-toolbar-actions > .clickable-icon,
.story-line-toolbar-controls .plot-grid-open-actions > .clickable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--text-muted);
    box-sizing: border-box;
}

.story-line-toolbar-controls > .clickable-icon:hover,
.story-line-toolbar-controls .story-line-icon-group > .clickable-icon:hover,
.story-line-toolbar-controls .plot-grid-toolbar-left > .clickable-icon:hover,
.story-line-toolbar-controls .plot-grid-toolbar-actions > .clickable-icon:hover,
.story-line-toolbar-controls .plot-grid-open-actions > .clickable-icon:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.story-line-toolbar-controls .clickable-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.story-line-toolbar-controls .clickable-icon.is-active {
    color: var(--interactive-accent);
    background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
}

.story-line-toolbar-controls .story-line-open-native-action,
.story-line-toolbar-controls .plot-grid-open-actions {
    margin-left: auto;
}

/* --- View Switcher Tabs --- */
.story-line-view-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    height: 28px;
    flex: 1 1 auto;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.story-line-view-tab.story-line-view-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    margin: 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
    color: var(--text-muted);
    font-size: 0.82em;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}

.story-line-view-tab.story-line-view-tab:hover {
    background: none;
    color: var(--text-normal);
}

.story-line-view-tab.story-line-view-tab.is-reorderable {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

.story-line-view-tab.story-line-view-tab.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

.story-line-view-tab.story-line-view-tab.is-drag-over-before {
    box-shadow: inset 3px 0 0 var(--interactive-accent);
}

.story-line-view-tab.story-line-view-tab.is-drag-over-after {
    box-shadow: inset -3px 0 0 var(--interactive-accent);
}

.story-line-view-tab.story-line-view-tab:focus,
.story-line-view-tab.story-line-view-tab:focus-visible {
    outline: none;
    box-shadow: none;
}

.story-line-view-tab.story-line-view-tab.active {
    background: none;
    color: var(--interactive-accent);
    border-bottom-color: var(--interactive-accent);
    cursor: default;
    font-weight: 600;
}

.view-tab-icon {
    display: flex;
    align-items: center;
    line-height: 1;
}

.view-tab-icon svg {
    width: 14px;
    height: 14px;
}

.view-tab-label {
    line-height: 1;
}

/* Trailing Stats / Converter / Playmode — sits beside the tab strip */
.story-line-view-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid var(--background-modifier-border);
    flex: 0 0 auto;
    flex-shrink: 0;
    height: 28px;
}
.story-line-view-tab.story-line-view-tab-icon {
    width: 28px;
    min-width: 28px;
    padding: 0;
    border-bottom-color: transparent;
}
.story-line-view-tab.story-line-view-tab-icon.active {
    border-bottom-color: var(--interactive-accent);
}
.story-line-view-tab.story-line-view-tab-playmode {
    border: 1px solid color-mix(in srgb, var(--interactive-accent) 45%, transparent);
    border-radius: 999px;
    border-bottom-width: 1px;
    margin-left: 4px;
    padding: 0 10px;
    height: 28px;
    background: color-mix(in srgb, var(--interactive-accent) 10%, transparent);
    color: var(--interactive-accent);
    font-weight: 600;
}
.story-line-view-tab.story-line-view-tab-playmode:hover {
    background: color-mix(in srgb, var(--interactive-accent) 18%, transparent);
    color: var(--interactive-accent);
    border-color: var(--interactive-accent);
}
.story-line-view-tab.story-line-view-tab-playmode.active {
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border-bottom-color: var(--interactive-accent);
}

/* Auto-hide view-tab labels when the toolbar is too narrow (v1.10.17+). */
body.sl-auto-hide-tab-labels .story-line-view-switcher.sl-collapsed .view-tab-label {
    display: none;
}
body.sl-auto-hide-tab-labels .story-line-view-switcher.sl-collapsed .story-line-view-tab {
    padding-left: 6px;
    padding-right: 6px;
}
/* Compact toolbar: Playmode becomes icon-only so it cannot overlap filters. */
.story-line-toolbar.sl-toolbar-compact .story-line-view-tab-playmode .view-tab-label {
    display: none;
}
.story-line-toolbar.sl-toolbar-compact .story-line-view-tab-playmode {
    width: 28px;
    min-width: 28px;
    padding: 0;
    margin-left: 2px;
}

/* Manuscript filter row: keep search/filter and toggles from colliding */
.story-line-manuscript-container .story-line-filter-bar {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 8px;
}
.story-line-manuscript-container .story-line-filter-bar .sl-toggle-wrap {
    margin-left: 0;
}
.story-line-manuscript-container .story-line-filter-bar .story-line-search-wrapper {
    flex: 1 1 180px;
    max-width: 280px;
}

.story-line-group-control {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
}

.story-line-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 0.82em;
    font-weight: 600;
    padding: 0 12px;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
    white-space: nowrap;
    vertical-align: middle;
}

/* --- Main Area --- */
.story-line-main-area {
    display: flex;
    flex-direction: column;
    height: calc(100% - 52px);
    position: relative;
    min-width: 0;        /* allow flex child to shrink below content width */
    overflow: hidden;    /* contain children so swimlane scrollbar appears on the right element */
}

/* --- Filters --- */
.story-line-filters-container {
    border-bottom: 1px solid var(--sc-card-border);
}

.story-line-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    min-height: 40px;
    box-sizing: border-box;
}

.story-line-filter-spacer {
    flex: 1;
    min-width: 8px;
}

.story-line-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 360px;
    height: 28px;
}

.story-line-search {
    flex: 1;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    background: var(--background-primary);
    color: var(--sc-text);
    font-size: 0.85em;
    line-height: 28px;
    box-sizing: border-box;
}

.story-line-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    font-size: 0.85em;
    padding: 1px 10px 0;
    border-radius: var(--sc-radius);
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1;
    box-sizing: border-box;
}

.story-line-filter-toggle:hover,
.story-line-filter-toggle.is-open {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.story-line-filter-toggle.has-filters {
    color: var(--interactive-accent);
}

.story-line-filter-toggle-label {
    font-weight: 500;
}

.story-line-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.story-line-sort.story-line-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.story-line-sort.story-line-filter-toggle:hover {
    color: var(--text-normal);
}

/* Active filter chips row */
.story-line-active-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 16px 8px;
}

.story-line-active-chips.is-empty {
    display: none;
}

.story-line-active-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 10px;
    font-size: 0.75em;
    font-weight: 500;
    border: 1px solid var(--interactive-accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
    color: var(--interactive-accent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.story-line-active-chip:hover {
    background: color-mix(in srgb, var(--interactive-accent) 22%, transparent);
}

.story-line-active-chip-x {
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.7;
}

.story-line-active-chip-clear {
    border-style: dashed;
    border-color: var(--sc-card-border);
    background: transparent;
    color: var(--text-muted);
}

.story-line-active-chip-clear:hover {
    border-color: var(--text-muted);
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.relation-builder-add-picker {
    width: 100%;
}
.story-line-preset-chip { background: var(--background-secondary-alt); border-style: dashed; }

.story-line-sort {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
}

.story-line-filter-panel {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--sc-card-border);
    background: var(--background-primary-alt);
    max-height: min(55vh, 420px);
    overflow-y: auto;
}

.story-line-filter-section {
    margin-bottom: 12px;
}

.story-line-filter-section:last-child {
    margin-bottom: 0;
}

.story-line-filter-section-title {
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.story-line-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.story-line-inactive-toggle {
    margin: 0;
}

.story-line-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
}

.story-line-chip {
    padding: 3px 10px;
    font-size: 0.8em;
    border: 1px solid var(--sc-card-border);
    border-radius: 20px;
    background: var(--background-primary);
    color: var(--sc-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.story-line-chip:hover {
    border-color: var(--sc-accent);
    color: var(--sc-text);
}

.story-line-chip.active {
    background: var(--sc-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
    border-color: var(--sc-accent);
}

.story-line-chip-clear {
    border-style: dashed;
    opacity: 0.85;
}

.character-tag-filter-chips,
.library-filter-chips {
    margin-top: 0;
    margin-bottom: 8px;
    max-height: 88px; /* ~3 compact rows; scroll instead of eating the card area */
    overflow-x: hidden;
    overflow-y: auto;
    gap: 4px;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-shrink: 0;
}

.library-archive-filter-bar {
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.library-archive-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.library-archive-filter-field-btn {
    flex: 0 1 auto;
    max-width: 100%;
}

.library-archive-filter-field-btn .library-browse-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(420px, 70vw);
}

.library-archive-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 88px;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: flex-start;
}

.library-filter-empty-hint {
    font-size: 0.78em;
    color: var(--text-faint);
}

.story-line-character-content .story-line-filter-chips.character-tag-filter-chips .story-line-chip {
    padding: 1px 7px;
    font-size: 0.75em;
    line-height: 1.35;
}

.story-line-preset-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.story-line-preset-header .story-line-filter-section-title {
    margin-bottom: 0;
}

.story-line-preset-name-input {
    flex: 1;
    min-width: 120px;
    padding: 2px 8px;
    font-size: 0.8em;
}

.story-line-clear-filters {
    font-size: 0.8em;
    padding: 4px 12px;
    margin-top: 4px;
}

/* --- Board View --- */
/* Segmented control — distinct from view-switcher underlines so heights/baselines match */
.story-line-board-mode-toggle.story-line-board-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 7px;
    background: var(--background-secondary);
    box-shadow: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.story-line-board-mode-btn.story-line-board-mode-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 24px !important;
    min-height: 24px !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent;
    color: var(--text-muted);
    border-radius: 5px;
    padding: 1px 10px 0 !important;
    margin: 0 !important;
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1 !important;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
    box-sizing: border-box !important;
}

.story-line-board-mode-btn.story-line-board-mode-btn:focus,
.story-line-board-mode-btn.story-line-board-mode-btn:active {
    outline: none;
    box-shadow: none;
    border: none !important;
}

.story-line-board-mode-btn.story-line-board-mode-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.story-line-board-mode-btn.story-line-board-mode-btn.active {
    background: var(--background-primary);
    color: var(--text-normal);
    font-weight: 600;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.story-line-board-mode-btn.story-line-board-mode-btn.active:focus {
    border: none !important;
}

/* --- Toggle switch --- */
.sl-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.sl-toggle-label {
    display: inline-flex;
    align-items: center;
    height: 20px;
    font-size: 0.8em;
    color: var(--text-muted);
    line-height: 1;
    /* Match optical center of the 20px track for CJK glyphs */
    padding-top: 1px;
    box-sizing: border-box;
}
.sl-toggle-wrap input[type="checkbox"] {
    display: none;
}
.sl-toggle-track {
    position: relative;
    width: 42px;
    height: 20px;
    border-radius: 10px;
    background: var(--background-modifier-border);
    transition: background 0.2s;
    flex-shrink: 0;
    overflow: hidden;
}
.sl-toggle-track::before {
    content: 'OFF';
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    transition: opacity 0.15s;
}
.sl-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    z-index: 1;
}
.sl-toggle-wrap input:checked + .sl-toggle-track {
    background: var(--interactive-accent);
}
.sl-toggle-wrap input:checked + .sl-toggle-track::before {
    content: 'ON';
    right: auto;
    left: 6px;
    color: var(--text-on-accent, #ffffff);
}
html[data-narrative-lab-language='zh'] .sl-toggle-track::before {
    content: '关';
    font-size: 9px;
}
html[data-narrative-lab-language='zh'] .sl-toggle-wrap input:checked + .sl-toggle-track::before {
    content: '开';
}
.sl-toggle-wrap input:checked + .sl-toggle-track::after {
    transform: translateX(22px);
}

.story-line-board {
    display: flex;
    gap: var(--sc-gap);
    padding: 16px;
    overflow-x: auto;
    flex: 1;
    align-items: flex-start;
}

/* Extra trailing space so users can scroll the last column(s) clear of the inspector panel */
.story-line-board::after {
    content: '';
    flex-shrink: 0;
    min-width: 360px;
}

/* Native Obsidian Canvas host inside corkboard mode */
.story-line-board.story-line-corkboard.is-native-canvas-host {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.story-line-corkboard-native-host {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--background-primary);
}
.story-line-corkboard-native-host.is-live > .view-content,
.story-line-corkboard-native-host.is-live > .workspace-leaf-content,
.story-line-corkboard-native-host > .workspace-leaf,
.story-line-corkboard-native-host > [data-type="canvas"],
.story-line-corkboard-native-host > .view-content,
.story-line-corkboard-native-host > .story-line-corkboard-native-split,
.story-line-corkboard-native-host .workspace-split,
.story-line-corkboard-native-host .workspace-leaf {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
/* NL toolbar already identifies the board — hide nested Canvas tab chrome. */
.story-line-corkboard-native-host .view-header,
.story-line-corkboard-native-host .workspace-leaf-header {
    display: none !important;
}
.story-line-corkboard-native-host .view-content {
    padding: 0 !important;
    height: 100% !important;
}
/* File-card previews on the corkboard: never show Obsidian Properties. */
.story-line-corkboard-native-host .metadata-container,
.story-line-corkboard-native-host .metadata-properties-heading,
.story-line-corkboard-native-host .metadata-properties,
.story-line-corkboard-native-host .metadata-content,
.story-line-corkboard-native-host .mod-header-content > .metadata-container,
.story-line-corkboard-native-host .canvas-node .cm-line.HyperMD-frontmatter,
.workspace-leaf-content.sl-corkboard-canvas-leaf .metadata-container,
.workspace-leaf-content.sl-corkboard-canvas-leaf .metadata-properties-heading,
.workspace-leaf-content.sl-corkboard-canvas-leaf .metadata-properties,
.workspace-leaf-content.sl-corkboard-canvas-leaf .metadata-content,
.workspace-leaf-content.sl-corkboard-canvas-leaf .canvas-node .cm-line.HyperMD-frontmatter {
    display: none !important;
}
.story-line-corkboard-native-fallback {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.story-line-corkboard-native-fallback p {
    margin: 0;
    flex: 1 1 220px;
}

.story-line-board.story-line-corkboard {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0;
}

.story-line-corkboard-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    background-color: var(--background-primary);
    background-image: none;
}

.story-line-corkboard-viewport.is-panning {
    cursor: grabbing;
}

.story-line-corkboard-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    transform-origin: 0 0;
    will-change: transform;
}

.story-line-corkboard-node {
    position: absolute;
    width: 280px;
    cursor: grab;
}

.story-line-corkboard-node.is-dragging {
    cursor: grabbing;
    z-index: 2147483647 !important;
}

.story-line-corkboard-card {
    box-shadow: var(--sl-shadow-sm);
    contain: none;
}

.story-line-corkboard-card:hover {
    transform: none;
}

.story-line-corkboard-research-node {
    width: 220px;
}

.story-line-corkboard-research-card {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
    color: var(--text-normal);
    box-shadow: var(--sl-shadow-sm);
    cursor: grab;
    user-select: none;
}

.story-line-corkboard-research-card:hover {
    border-color: var(--background-modifier-border-hover);
    background: var(--background-primary-alt);
}

.story-line-corkboard-research-card.selected {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.story-line-corkboard-node.is-dragging .story-line-corkboard-research-card {
    cursor: grabbing;
}

.story-line-corkboard-research-title {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-line-corkboard-note-card .scene-card-characters,
.story-line-corkboard-note-card .scene-card-footer {
    display: none;
}

/* ?? Kanban note cards ? sticky-note look in column view ?? */
.scene-card.scene-card.story-line-kanban-note {
    --sl-note-bg: transparent;
    --sl-note-text: var(--text-normal);
    --sl-note-accent: var(--text-muted);
    border-left: 0;
    border: 1px solid var(--background-modifier-border);
    background: var(--sl-note-bg);
    border-radius: var(--sc-radius);
}
.scene-card.scene-card.story-line-kanban-note:hover {
    background: var(--sl-note-bg);
}
.scene-card.story-line-kanban-note::after {
    content: none;
}
.scene-card.story-line-kanban-note .scene-card-seq,
.scene-card.story-line-kanban-note .scene-card-status-icon {
    display: none;
}
.scene-card.story-line-kanban-note .scene-card-characters,
.scene-card.story-line-kanban-note .scene-card-footer {
    display: none;
}
.scene-card.story-line-kanban-note .scene-card-title {
    color: var(--sl-note-text, var(--text-normal));
    font-style: inherit;
}

.scene-card.scene-card.story-line-corkboard-note-card {
    /* Default: no fill — outline only. Tint via right-click color menu. */
    --sl-note-bg: transparent;
    --sl-note-text: var(--text-normal);
    --sl-note-accent: var(--text-muted);
    --sl-note-accent-strong: var(--text-muted);
    --sl-note-accent-ui: color-mix(in srgb, var(--sl-note-accent) 55%, transparent 45%);
    border-left: 0;
    border: 1px solid var(--background-modifier-border);
    background: var(--sl-note-bg);
    border-radius: 8px;
    box-shadow: none;
    resize: none;
    overflow: hidden;
    width: 100%;
    min-width: 240px;
    min-height: 220px;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Collapsed sticky notes keep a standard note footprint and show an excerpt. */
.scene-card.scene-card.story-line-corkboard-note-card.is-collapsed {
    min-height: 220px;
    height: 220px !important;
    cursor: default;
}

.scene-card.scene-card.story-line-corkboard-note-card.is-collapsed .story-line-corkboard-note-editor,
.scene-card.scene-card.story-line-corkboard-note-card.is-collapsed .story-line-corkboard-note-resize-handle {
    display: none !important;
}

.story-line-corkboard-note-titlebar {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
    color: var(--sl-note-text, var(--text-normal));
}

.story-line-corkboard-note-filename {
    position: absolute;
    top: -20px;
    left: 6px;
    right: 6px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.story-line-corkboard-note-titlebar:hover {
    background: transparent;
}

.story-line-corkboard-note-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--sl-note-accent, var(--text-muted));
    opacity: 0.85;
    margin-top: 1px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.story-line-corkboard-note-chevron:hover {
    background: color-mix(in srgb, var(--sl-note-accent, var(--text-muted)) 12%, transparent);
}

.story-line-corkboard-note-chevron svg {
    width: 16px;
    height: 16px;
}

.story-line-corkboard-note-title-text {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    font-weight: 650;
    font-size: 1.08em;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.story-line-corkboard-note-collapsed-preview {
    display: none;
}

.scene-card.scene-card.story-line-corkboard-note-card.is-collapsed .story-line-corkboard-note-collapsed-preview {
    display: -webkit-box;
    min-height: 0;
    margin: 2px 16px 16px 36px;
    color: var(--sl-note-text, var(--text-muted));
    font-size: 0.88em;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.72;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.scene-card.scene-card.story-line-corkboard-note-card.is-collapsed .story-line-corkboard-note-collapsed-preview.is-empty {
    display: none;
}

.scene-card.scene-card.story-line-corkboard-note-card.is-expanded .story-line-corkboard-note-titlebar {
    border-bottom: 1px solid color-mix(in srgb, var(--sl-note-accent, var(--background-modifier-border)) 35%, transparent);
}

.scene-card.scene-card.story-line-corkboard-note-card.is-editing {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.scene-card.scene-card.story-line-corkboard-note-card.is-tinted {
    box-shadow: var(--sl-shadow-sm);
}

.scene-card.scene-card.story-line-corkboard-note-card:hover {
    background: var(--sl-note-bg);
    box-shadow: none;
}

.scene-card.scene-card.story-line-corkboard-note-card.is-tinted:hover {
    box-shadow: var(--sl-shadow-sm);
}

.scene-card.story-line-corkboard-note-card::after {
    content: none;
}

.story-line-corkboard-note-resize-handle {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    pointer-events: auto;
    cursor: nwse-resize;
    z-index: 3;
    opacity: 1;
    border-radius: 0;
    background:
        linear-gradient(135deg,
            transparent 0 50%,
            var(--sl-note-accent-ui, var(--sl-note-accent, var(--text-muted))) 51% 59%,
            transparent 60% 100%),
        linear-gradient(135deg,
            transparent 0 66%,
            var(--sl-note-accent-ui, var(--sl-note-accent, var(--text-muted))) 67% 75%,
            transparent 76% 100%),
        linear-gradient(135deg,
            transparent 0 82%,
            var(--sl-note-accent-ui, var(--sl-note-accent, var(--text-muted))) 83% 91%,
            transparent 92% 100%);
}

.story-line-corkboard-note-card .scene-card-header {
    display: none;
}

.story-line-corkboard-note-card .scene-card-title {
    display: none;
}

.story-line-corkboard-note-editor {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    flex: 1;
    padding-top: 20px;
    box-sizing: border-box;
}

.story-line-corkboard-note-text.story-line-corkboard-note-text {
    width: 100%;
    min-height: 150px;
    resize: none;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 1em;
    line-height: 1.45;
    background: transparent;
    color: var(--sl-note-text, var(--text-normal));
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: none;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.story-line-corkboard-note-preview.story-line-corkboard-note-preview {
    width: 100%;
    min-height: 150px;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 1em;
    line-height: 1.45;
    background: transparent;
    color: var(--sl-note-text, var(--text-normal));
    box-sizing: border-box;
    overflow: hidden;
    cursor: text;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.story-line-corkboard-note-preview * {
    overflow-wrap: anywhere;
    word-break: break-word;
    color: inherit;
}

.story-line-corkboard-note-preview strong,
.story-line-corkboard-note-preview b {
    font-weight: var(--bold-weight, 700);
}

.story-line-corkboard-note-preview em,
.story-line-corkboard-note-preview i {
    font-style: italic;
}

.story-line-corkboard-note-preview > :first-child {
    margin-top: 0;
}

.story-line-corkboard-note-preview > :last-child {
    margin-bottom: 0;
}

.story-line-corkboard-note-preview-empty.story-line-corkboard-note-preview-empty {
    color: var(--sl-note-text, var(--text-muted));
    opacity: 0.6;
}

.story-line-corkboard-note-text.story-line-corkboard-note-text:focus {
    outline: none;
    border: none;
    background: transparent;
    box-shadow: none;
}

.story-line-corkboard-note-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-right: 6px;
    padding-bottom: 4px;
}

.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn {
    background: transparent;
    color: var(--sl-note-accent-ui, var(--sl-note-accent));
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    border: none;
    outline: none;
}

.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    shape-rendering: geometricPrecision;
    opacity: 1;
    color: var(--sl-note-accent-ui, var(--sl-note-accent, var(--text-muted)));
    stroke: var(--sl-note-accent-ui, var(--sl-note-accent, var(--text-muted)));
    fill: none;
    filter: none;
}

.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn svg * {
    stroke: var(--sl-note-accent-ui, var(--sl-note-accent, var(--text-muted)));
}

.story-line-corkboard-convert-btn:hover {
    color: var(--sl-note-accent);
    background: none;
    opacity: 1;
}

.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn:hover,
.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn:focus,
.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn:focus-visible,
.story-line-corkboard-convert-btn.story-line-corkboard-convert-btn:active {
    box-shadow: none;
    border: none;
    background: transparent;
    outline: none;
}

/* ?? Image Sticky Notes ?? */

.story-line-corkboard-image-note {
    overflow: hidden;
    height: 280px;
}

.story-line-corkboard-image-editor {
    padding-top: 4px;
    gap: 0;
}

.story-line-corkboard-note-img {
    width: 100%;
    flex: 1;
    min-height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
    display: block;
}

.story-line-corkboard-note-caption.story-line-corkboard-note-caption {
    padding: 6px 10px 2px;
    font-size: 0.85em;
    line-height: 1.35;
    color: var(--sl-note-text, var(--text-normal));
    cursor: text;
    min-height: 1.5em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.story-line-corkboard-note-caption * {
    overflow-wrap: anywhere;
    word-break: break-word;
    color: inherit;
}

.story-line-corkboard-note-caption-empty.story-line-corkboard-note-caption-empty {
    color: var(--sl-note-text, var(--text-muted));
    opacity: 0.5;
    font-style: italic;
}

.story-line-corkboard-note-caption-input.story-line-corkboard-note-caption-input {
    width: 100%;
    resize: none;
    border: none;
    border-radius: 0;
    padding: 6px 10px 2px;
    font-size: 0.85em;
    line-height: 1.35;
    background: transparent;
    color: var(--sl-note-text, var(--text-normal));
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: none;
}

.story-line-corkboard-note-caption-input.story-line-corkboard-note-caption-input:focus {
    outline: none;
    border: none;
    background: transparent;
    box-shadow: none;
}



.story-line-note-color-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

/* Bulk action bar */
.story-line-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--background-secondary-alt);
    border-bottom: 2px solid var(--sc-accent, #7c3aed);
    flex-wrap: wrap;
}
.bulk-bar-label { font-weight: 600; font-size: 0.85em; margin-right: 8px; }
.bulk-bar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 0.8em; border-radius: 4px; border: 1px solid var(--sc-card-border); background: var(--background-primary); cursor: pointer; }
.bulk-bar-btn:hover { border-color: var(--sc-accent); background: var(--background-modifier-hover); }
.bulk-bar-delete { color: var(--text-error); border-color: var(--text-error); }
.bulk-bar-delete:hover { background: var(--sl-error-tint); }
.bulk-bar-clear { color: var(--sc-text-muted); border: none; background: none; text-decoration: underline; }

.story-line-column {
    display: flex;
    flex-direction: column;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    background: var(--sc-column-bg);
    border-radius: var(--sc-radius);
    border: 1px solid var(--sc-card-border);
    flex-shrink: 0;
}

.story-line-column-header {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.9em;
    border-bottom: 1px solid var(--sc-card-border);
    background: var(--background-secondary);
    border-radius: var(--sc-radius) var(--sc-radius) 0 0;
}

/* Description subtitle shown under column title on the board */
.story-line-column-description {
    font-weight: 400;
    font-size: 0.82em;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
    white-space: pre-line;
    max-height: 3.9em; /* ~3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-line-column-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    transition: background 0.2s;
}

.story-line-column-body.drag-over {
    background: var(--background-modifier-hover);
    outline: 2px dashed var(--sc-accent);
    outline-offset: -4px;
}

.story-line-column-add {
    padding: 8px 12px;
    font-size: 0.8em;
    color: var(--sc-text-muted);
    border-top: 1px solid var(--sc-card-border);
    background: transparent;
    cursor: pointer;
    text-align: center;
    border-radius: 0 0 var(--sc-radius) var(--sc-radius);
}

.story-line-column-add:hover {
    color: var(--sc-accent);
    background: var(--background-modifier-hover);
}

/* --- Scene Card --- */
.scene-card {
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-left: 4px solid var(--sc-accent);
    border-radius: var(--sc-radius);
    padding: 10px 12px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
    user-select: none;
    contain: content;
}

.scene-card:hover {
    background: var(--sc-card-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.scene-card.scene-card-inactive {
    opacity: 0.68;
    border-style: dashed;
}

.scene-card.scene-card-inactive:hover {
    opacity: 0.9;
}

.scene-card-inactive-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
    background: var(--background-secondary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Custom scene color (background fill, independent of border-left edge color) */
.scene-card.scene-card.sl-scene-colored,
.timeline-card.timeline-card.sl-scene-colored {
    background: color-mix(in srgb, var(--sl-scene-bg) 18%, var(--sc-card-bg, var(--background-primary)));
    border-color: color-mix(in srgb, var(--sl-scene-bg) 30%, var(--sc-card-border, var(--background-modifier-border)));
}
.scene-card.scene-card.sl-scene-colored:hover,
.timeline-card.timeline-card.sl-scene-colored:hover {
    background: color-mix(in srgb, var(--sl-scene-bg) 26%, var(--sc-card-bg, var(--background-primary)));
}

.scene-card.selected {
    outline: 2px solid var(--sc-accent);
    outline-offset: -1px;
}

/* Drop indicators for card-level reordering */

/* Timeline drag indicators */
.timeline-entry.drop-above {
    box-shadow: 0 -3px 0 0 var(--sc-accent);
    z-index: 2;
}
.timeline-entry.drop-below {
    box-shadow: 0 3px 0 0 var(--sc-accent);
    z-index: 2;
}

/* Timeline date/time badges */
.timeline-date-badge {
    font-family: var(--font-monospace);
    font-size: 0.72em;
    font-weight: 600;
    color: var(--sc-accent);
    background: var(--background-modifier-hover);
    border-radius: 6px;
    padding: 1px 6px;
    margin-bottom: 2px;
    margin-right: 2px;
    white-space: normal;
    word-break: break-word;
}
.timeline-time-badge {
    font-family: var(--font-monospace);
    font-size: 0.72em;
    font-weight: 600;
    color: var(--sc-text-faint);
    background: var(--background-modifier-hover);
    border-radius: 6px;
    padding: 1px 6px;
    margin-bottom: 2px;
    white-space: nowrap;
}

/* Red highlight when a scene's date/time is out of chronological order */
.timeline-date-badge.timeline-date-badge.timeline-date-invalid,
.timeline-time-badge.timeline-time-invalid {
    color: var(--sl-error);
    background: var(--sl-error-bg);
    border: 1px solid var(--sl-error-border);
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
}

.scene-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.scene-card-seq {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--sc-text-muted);
    background: var(--background-primary-alt);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-monospace);
}

.scene-card-status-icon {
    display: inline-flex;
    align-items: center;
}

.scene-card-status-icon svg {
    width: 14px;
    height: 14px;
}

.scene-card-title {
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.3;
    margin-bottom: 4px;
    color: var(--sc-text);
}

.scene-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75em;
    color: var(--sc-text-muted);
}

.scene-card-wordcount {
    font-family: var(--font-monospace);
    font-size: 0.9em;
}

.scene-card-progress {
    display: flex;
    gap: 2px;
    font-size: 0.85em;
}

.scene-card-dot.filled {
    color: var(--sc-accent);
}

.scene-card-dot.empty {
    color: var(--sc-text-faint);
}

.scene-card-characters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.scene-card-char-tag {
    font-size: 0.72em;
    padding: 1px 6px;
    background: var(--background-primary-alt);
    border-radius: 10px;
    color: var(--sc-text-muted);
}

.scene-card-char-more {
    font-size: 0.72em;
    color: var(--sc-text-faint);
    padding: 1px 4px;
}

/* --- Empty state --- */
.story-line-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--sc-text-muted);
}

.story-line-empty p {
    margin: 8px 0;
}

.story-line-inspector-panel.story-line-inspector-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 340px;
    background: var(--background-primary);
    border-left: 1px solid var(--sc-card-border);
    overflow-y: auto;
    z-index: 20;
    box-shadow: var(--sl-shadow-panel);
    padding: 16px;
    box-sizing: border-box;
}

.story-line-inspector.story-line-inspector {
    padding-left: 16px;
}

.inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.inspector-header h3 {
    margin: 0;
    font-size: 1em;
}

.inspector-close {
    font-size: 1.3em;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

/* Narrative Canvas host — match official plugin.css so the shadow app
   fills the leaf instead of sitting in Obsidian's padded view-content. */
.nl-canvas-project-toolbar {
    flex-shrink: 0;
    padding: 8px 16px;
    margin: 0;
}

.narrative-canvas-plugin-host {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    --nc-font-interface: var(--font-interface, system-ui, "Segoe UI", sans-serif);
    --nc-font-text: var(--nc-plugin-content-font, var(--font-text, var(--font-interface, system-ui, "Segoe UI", sans-serif)));
    --nc-font-monospace: var(--font-monospace, "Cascadia Code", "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.workspace-leaf-content[data-type="narrative-lab-canvas-view"] {
    padding: 0;
    position: relative;
}

.nl-canvas-library-profile-host {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    background: var(--background-primary);
    color: var(--text-normal);
    overflow: hidden;
}

.nl-canvas-library-profile-rail {
    overflow: auto;
    padding: 16px 14px 20px;
    border-right: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}

.nl-canvas-library-backlinks-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
}

.nl-canvas-library-backlinks-title small,
.nl-canvas-library-backlink-group summary small {
    color: var(--text-muted);
    font-weight: 500;
}

.nl-canvas-library-backlinks-empty {
    color: var(--text-muted);
    font-size: 12px;
}

.nl-canvas-library-backlink-group {
    margin-bottom: 10px;
}

.nl-canvas-library-backlink-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.nl-canvas-library-backlink-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.nl-canvas-library-backlink {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
    color: var(--text-normal);
    text-align: left;
    cursor: pointer;
}

.nl-canvas-library-backlink:hover {
    background: var(--background-modifier-hover);
}

.nl-canvas-library-backlink-icon {
    display: inline-flex;
    margin-top: 2px;
    color: var(--text-muted);
}

.nl-canvas-library-backlink-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nl-canvas-library-backlink-main strong {
    font-size: 13px;
}

.nl-canvas-library-backlink-main small {
    color: var(--text-muted);
    font-size: 11px;
}

.nl-canvas-library-profile-main {
    overflow: auto;
    min-width: 0;
    padding: 0;
    font-size: 13px;
}

.nl-canvas-library-profile-main .character-detail-header,
.nl-canvas-library-profile-main .location-detail-header,
.nl-canvas-library-profile-main .codex-detail-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--background-primary);
}

@media (max-width: 720px) {
    .nl-canvas-library-profile-host {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(120px, 30%) minmax(0, 1fr);
    }
}
.story-line-open-native-action {
    margin-left: auto;
}

/* Exact NarrativeLab-owned paths receive this class at runtime. Name-only CSS
   selectors must not hide user-created root folders such as Library/ or Canvas/. */
.workspace-leaf-content[data-type="file-explorer"] .sl-narrative-lab-hidden-file-tree-item {
    display: none !important;
}

.workspace-leaf-content[data-type="narrative-lab-canvas-view"] > .view-content,
.workspace-leaf-content[data-type="narrative-lab-canvas-view"] .view-content.narrative-canvas-plugin-host {
    padding: 0 !important;
    overflow: hidden;
    height: 100%;
    flex: 1 1 auto;
}

/* Per-project NCanvas manager */
.narrative-lab-ncanvas-modal {
    width: min(560px, calc(100vw - 48px));
    max-width: 100%;
}
.narrative-lab-ncanvas-modal .ncanvas-modal-hint {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}
.narrative-lab-ncanvas-modal h3 {
    margin: 16px 0 8px;
    font-size: var(--font-ui-medium);
}
.ncanvas-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(280px, 40vh);
    overflow-y: auto;
    margin-bottom: 8px;
}
.ncanvas-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--background-modifier-border);
    border-radius: 8px;
}
.ncanvas-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
}
.ncanvas-file-row.is-current {
    border-color: var(--interactive-accent);
}
.ncanvas-file-info {
    flex: 1;
    min-width: 0;
}
.ncanvas-file-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncanvas-file-path {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncanvas-file-badge {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--font-ui-smaller);
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    border-radius: 4px;
    padding: 0 6px;
}
.ncanvas-file-row button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.ncanvas-sample-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.ncanvas-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
    margin-top: 8px;
}

/* Project select modal tweaks */
.narrative-lab-project-modal {
    width: min(560px, calc(100vw - 48px));
    max-width: 100%;
    overflow-x: hidden;
}
.project-select-info p {
    margin: 0 0 12px 0;
}
.project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.project-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.project-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.narrative-lab-project-modal .project-select-info {
    margin: 0 0 10px;
}
.narrative-lab-project-modal .project-select-info p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.narrative-lab-project-modal .project-list {
    margin-bottom: 12px;
}
.project-actions-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.project-actions-primary button {
    flex: 0 0 auto;
    width: auto;
    min-width: 108px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
}
.project-actions-secondary {
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}
.project-actions-secondary button {
    flex: 0 0 auto;
}
.project-actions-cancel {
    order: 99;
    margin-left: auto;
    min-width: 0;
}

.project-select-dropdown {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--sc-card-border);
    border-radius: 6px;
    background: var(--background-primary);
    appearance: auto;
    -webkit-appearance: menulist;
    background-image: none;
}

@media (max-width: 520px) {
    .project-actions-primary button,
    .project-actions-secondary button {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        width: auto;
    }
    .project-actions-cancel {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.inspector-title-section {
    margin-bottom: 16px;
}

.inspector-title-section h4 {
    margin: 4px 0 0;
    font-size: 1em;
}

.inspector-section {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sc-card-border);
}

/* Custom status dropdown with Lucide icons */
.inspector-status-dropdown {
    display: inline-block;
    position: relative;
    margin-left: 6px;
}

.inspector-status-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    background: var(--background-primary);
    color: var(--sc-text);
    cursor: pointer;
    font-size: 0.85em;
}

.inspector-status-button:hover {
    background: var(--background-modifier-hover);
}

.inspector-status-icon {
    display: inline-flex;
    align-items: center;
}

.inspector-status-icon svg {
    width: 14px;
    height: 14px;
}

.inspector-status-chevron {
    display: inline-flex;
    align-items: center;
    opacity: 0.5;
}

.inspector-status-chevron svg {
    width: 12px;
    height: 12px;
}

.inspector-status-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 150px;
    background: var(--background-primary);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    margin-top: 4px;
}

.inspector-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--sc-text);
}

.inspector-status-item:hover {
    background: var(--background-modifier-hover);
}

.inspector-status-item.active {
    background: var(--interactive-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
}

.inspector-label {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--sc-text-muted);
}

.inspector-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--sc-text);
    cursor: pointer;
}

.inspector-checkbox-row input[type="checkbox"] {
    margin: 0;
}

.inspector-help-text {
    margin-top: 4px;
    font-size: 0.78em;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ??? Prologue / Epilogue quick-select buttons ??? */
.sl-inspector-act-quick {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.sl-inspector-act-quick-btn {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.sl-inspector-act-quick-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.sl-inspector-act-quick-btn.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent, #fff);
    border-color: var(--interactive-accent);
}

.inspector-description {
    font-size: 0.85em;
    color: var(--sc-text);
    margin: 4px 0 0;
    line-height: 1.4;
    white-space: pre-wrap;
}

.inspector-conflict {
    font-size: 0.85em;
    color: var(--sc-text);
    margin: 4px 0 0;
    line-height: 1.4;
}

.inspector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.inspector-actions button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 12px;
    font-size: 0.85em;
    white-space: normal;
}

/* Custom (universal) scene fields in Inspector */
.inspector-universal-fields { margin-top: 10px; }
.inspector-universal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.inspector-universal-add-btn { border: none; background: none; cursor: pointer; color: var(--sc-text-muted); padding: 2px; }
.inspector-universal-add-btn:hover { color: var(--interactive-accent); }
.inspector-universal-field-row { margin-bottom: 8px; }
.inspector-universal-label-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.inspector-universal-edit-btn { border: none; background: none; cursor: pointer; color: var(--sc-text-muted); padding: 0 2px; font-size: 0.75em; }
.inspector-universal-edit-btn:hover { color: var(--interactive-accent); }
.inspector-universal-textarea { width: 100%; resize: vertical; font-size: 0.85em; min-height: 60px; }
.inspector-universal-select { width: 100%; font-size: 0.85em; }
.inspector-universal-input { width: 100%; font-size: 0.85em; }
.inspector-universal-multi { display: flex; flex-direction: column; gap: 4px; }
.inspector-universal-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.inspector-universal-input-row { display: flex; gap: 4px; }

/* Setup / Payoff tracking */
.inspector-setup-payoff { margin-top: 8px; }
.inspector-sp-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.85em; font-weight: 600; }
.inspector-sp-label { color: var(--sc-text-muted); }
.inspector-sp-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.inspector-sp-remove { border: none; background: none; cursor: pointer; color: var(--sc-text-muted); font-size: 1em; padding: 0 2px; line-height: 1; }
.inspector-sp-remove:hover { color: var(--text-error); }
.inspector-sp-empty { font-size: 0.8em; color: var(--sc-text-muted); font-style: italic; }
.inspector-sp-warning { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 8px; font-size: 0.8em; color: var(--text-error); background: var(--sl-warning-tint); border-radius: 4px; }

/* Inspector Notes / Comments */
.inspector-notes { margin-top: 10px; }
.inspector-notes-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.inspector-notes-header .inspector-label { font-weight: 600; font-size: 0.85em; flex: 1; }
.inspector-notes-header .clickable-icon { padding: 2px 4px; color: var(--sc-text-muted); cursor: pointer; }
.inspector-notes-header .clickable-icon:hover { color: var(--interactive-accent); }
.inspector-notes-textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    font-size: 0.85em;
    padding: 6px 8px;
    border: 1px solid var(--sc-card-border, var(--background-modifier-border));
    border-radius: var(--sc-radius, 4px);
    background: var(--sc-card-bg, var(--background-primary));
    color: var(--sc-text, var(--text-normal));
    font-family: inherit;
}
.inspector-notes-textarea:focus {
    border-color: var(--sc-accent);
    outline: none;
}
.inspector-notes-container { width: 100%; }
.inspector-notes-live {
    width: 100%;
    min-height: 40px;
    border-radius: var(--sc-radius, 4px);
    font-size: 0.85em;
    line-height: 1.5;
}
.inspector-notes-live.is-preview {
    padding: 6px 8px;
    border: 1px solid var(--sc-card-border, var(--background-modifier-border));
    background: var(--sc-card-bg, var(--background-primary));
    color: var(--sc-text, var(--text-normal));
    cursor: text;
    min-height: 130px;
    max-height: 280px;
    overflow-y: auto;
}
.inspector-notes-live.is-preview:hover {
    border-color: var(--sc-accent, var(--interactive-accent));
}
.inspector-notes-live.is-preview p { margin: 0.3em 0; }
.inspector-notes-live.is-preview ul, .inspector-notes-live.is-preview ol { margin: 0.3em 0; padding-left: 1.5em; }
.inspector-notes-live.is-preview input[type="checkbox"] { margin-right: 4px; cursor: pointer; }
.inspector-notes-live.is-preview .task-list-item { list-style: none; }
.inspector-notes-live.is-preview a { color: var(--interactive-accent); }
.inspector-notes-live.is-empty {
    padding: 12px 8px;
    border: 1px dashed var(--sc-card-border, var(--background-modifier-border));
    cursor: pointer;
}
.inspector-notes-live.is-empty:hover {
    border-color: var(--sc-accent, var(--interactive-accent));
    background: var(--sc-card-bg, var(--background-primary));
}
.inspector-notes-placeholder {
    color: var(--sc-text-muted, var(--text-muted));
    font-style: italic;
    text-align: center;
}

/* --- Snapshots --- */
.inspector-snapshots { margin-top: 10px; }
.inspector-snapshots-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.inspector-snapshots-header .inspector-label { font-weight: 600; font-size: 0.85em; }
.inspector-snapshot-save-btn {
    background: none;
    border: none;
    font: inherit;
    margin-left: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}
.inspector-snapshot-save-btn:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.inspector-snapshot-save-btn:focus,
.inspector-snapshot-save-btn:focus-visible {
    outline: none;
    box-shadow: none;
}
.inspector-snapshot-save-btn svg {
    width: 16px;
    height: 16px;
}
.inspector-snapshot-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Reserve space so the layout doesn't jump while the async
       `listSnapshots()` call resolves (placeholder swap to rows). */
    min-height: 32px;
    max-height: 180px;
    overflow-y: auto;
}
.inspector-snapshot-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--background-secondary);
    font-size: 0.82em;
}
.inspector-snapshot-info { flex: 1; min-width: 0; }
.inspector-snapshot-label {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inspector-snapshot-meta {
    font-size: 0.85em;
    color: var(--text-muted);
}
.inspector-snapshot-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.inspector-snapshot-btns button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
}
.inspector-snapshot-btns button:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.inspector-snapshot-btns button:focus,
.inspector-snapshot-btns button:focus-visible {
    outline: none;
    box-shadow: none;
}
.inspector-snapshot-btns button svg {
    width: 14px;
    height: 14px;
}


/* --- Quick Add Modal --- */
/*
   The following rules are commented out or removed to prevent style leakage into Obsidian modals.
   If you need to style the plugin's own modals, use a unique container class and scope all rules to it.
*/

/* --- Timeline View --- */
.story-line-timeline {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

/* Vertical timeline track */
.timeline-track {
    position: relative;
    padding-left: 0;
}

/* Act divider */
.timeline-act-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 12px 0;
    padding-left: 60px;
    position: relative;
}

.timeline-act-label {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sc-accent);
    background: var(--background-secondary);
    padding: 4px 14px;
    border-radius: 12px;
}

/* Timeline entry row */
.timeline-entry {
    display: flex;
    align-items: stretch;
    min-height: 60px;
    position: relative;
}

/* Left: sequence badge + date/time */
.timeline-entry-seq {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 10px;
    padding-right: 10px;
    flex-shrink: 0;
    gap: 2px;
}

.timeline-seq-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    transition: background 0.15s;
}

.timeline-seq-clickable:hover {
    background: var(--background-modifier-hover);
}

.timeline-seq-badge {
    font-family: var(--font-monospace);
    font-size: 0.72em;
    font-weight: 600;
    color: var(--sc-text-faint);
    white-space: nowrap;
}

/* Chronological order badge ??shown when chrono order differs from reading order */
.timeline-chrono-badge {
    display: inline-block;
    font-family: var(--font-monospace);
    font-size: 0.65em;
    font-weight: 500;
    color: var(--sl-accent, var(--interactive-accent));
    background: var(--sl-accent-muted, rgba(var(--interactive-accent-rgb, 72, 120, 220), 0.12));
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: 4px;
    white-space: nowrap;
}


/* Order selector dropdown */
.story-line-order-select {
    font-size: 0.82em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--sc-card-border);
    background: var(--sc-card-bg);
    color: var(--sc-text-normal);
    cursor: pointer;
}

/* Hint icon shown when no date/time is set */
.timeline-add-time-hint {
    display: none;
    color: var(--sc-text-faint);
    opacity: 0.4;
}

.timeline-add-time-hint svg {
    width: 12px;
    height: 12px;
}

.timeline-seq-clickable:hover .timeline-add-time-hint {
    display: inline-flex;
}

/* Center: dot + vertical line */
.timeline-entry-dot-col {
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

/* The connecting line behind dots */
.timeline-entry-dot-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--sc-card-border);
    transform: translateX(-50%);
}

.timeline-entry:first-child .timeline-entry-dot-col::before {
    top: 14px;
}

.timeline-entry:last-child .timeline-entry-dot-col::before {
    bottom: 50%;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sc-accent);
    border: 2px solid var(--background-primary);
    position: relative;
    z-index: 2;
    margin-top: 14px;
    flex-shrink: 0;
}

.timeline-dot[data-status="idea"]     { background: var(--sl-status-idea); }
.timeline-dot[data-status="outlined"] { background: var(--sl-status-outlined); }
.timeline-dot[data-status="draft"]    { background: var(--sl-status-draft); }
.timeline-dot[data-status="written"]  { background: var(--sl-status-written); }
.timeline-dot[data-status="revised"]  { background: var(--sl-status-revised); }
.timeline-dot[data-status="final"]    { background: var(--sl-status-final); border-color: var(--sl-status-final); }

/* Right: scene card */
.timeline-entry-card {
    flex: 1;
    padding: 6px 0 6px 12px;
    min-width: 0;
}

.timeline-card {
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    max-width: 500px;
    contain: content;
}

.timeline-card:hover {
    box-shadow: var(--sl-shadow-sm);
    transform: translateX(2px);
}

.timeline-card-title {
    font-weight: 600;
    font-size: 0.95em;
    margin-bottom: 4px;
    color: var(--sc-text);
}

.timeline-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78em;
    color: var(--sc-text-muted);
    margin-bottom: 4px;
}

.timeline-card-conflict {
    font-size: 0.8em;
    color: var(--sc-text-faint);
    margin: 4px 0;
    font-style: italic;
}

.timeline-card-footer {
    display: flex;
    gap: 12px;
    font-size: 0.75em;
    margin-top: 4px;
}

.timeline-card-status {
    font-weight: 600;
}

.timeline-card-wc {
    color: var(--sc-text-faint);
}

.timeline-card-chars {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.timeline-char-tag {
    font-size: 0.72em;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--background-secondary);
    color: var(--sc-text-muted);
}

.inspector-arc-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inspector-arc-checkbox,
.inspector-arc-label {
    cursor: pointer;
}

.inspector-arc-label {
    font-weight: 600;
    font-size: var(--font-ui-small);
}

/* ????????????????????????????????????????
   Swimlane (multi-lane) timeline mode
   ???????????????????????????????????????? */

.swimlane-timeline {
    overflow: auto;      /* scroll both axes */
    -webkit-overflow-scrolling: touch;
}

.swimlane-grid {
    display: grid;
    gap: 0;
    min-width: max-content;
}

/* Corner cell (top-left, "#" label) */
.swimlane-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    background: var(--background-primary);
    font-weight: 700;
    font-size: 0.78em;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 4px;
    border-bottom: 2px solid var(--background-modifier-border);
    border-right: 1px solid var(--background-modifier-border);
}

/* Lane column headers (sticky) */
.swimlane-lane-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--background-secondary);
    font-weight: 700;
    font-size: 0.82em;
    padding: 8px 10px;
    text-align: center;
    border-bottom: 2px solid var(--background-modifier-border);
    border-right: 1px solid var(--sl-border-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swimlane-lane-header:last-child {
    border-right: none;
}

/* Act divider row ??spans all columns */
.swimlane-act-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Sequence axis cell (left column per scene row) */
.swimlane-seq-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 8px 8px 8px 4px;
    gap: 2px;
    border-right: 1px solid var(--background-modifier-border);
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--background-primary);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s;
}

.swimlane-seq-cell:hover {
    background: var(--background-modifier-hover);
}

/* Lane cell (holds a scene card or is empty) */
.swimlane-lane-cell {
    min-height: 48px;
    padding: 4px 6px;
    border-right: 1px solid var(--sl-border-subtle);
    border-bottom: 1px solid var(--sl-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.swimlane-lane-cell:last-child {
    border-right: none;
}

/* Dot wrap inside swimlane card */
.swimlane-dot-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 4px;
}

.swimlane-dot-wrap .timeline-dot {
    margin-top: 0;
}

/* Swimlane card: inherits .timeline-card but with a smaller max-width */
.swimlane-card {
    max-width: none;
}

.swimlane-card.selected {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

/* Swimlane group-by dropdown */
.story-line-swimlane-group-select {
    font-size: 0.82em;
    padding: 2px 6px;
    border-radius: var(--sc-radius);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
}

.story-line-zoom-level {
    font-size: 0.8em;
    color: var(--sc-text-muted);
    min-width: 40px;
    text-align: center;
}

/* ?? Drag-to-pan cursors ?? */
.swimlane-timeline,
.story-line-board,
.plot-grid-scroll-area {
    cursor: grab;
}

.swimlane-timeline.sl-panning,
.story-line-board.sl-panning,
.plot-grid-scroll-area.sl-panning {
    cursor: grabbing;
    user-select: none;
}

/* --- Storyline View --- */
.story-line-storyline-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.storyline-section {
    margin-bottom: 16px;
}

.storyline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--background-secondary);
    border-radius: var(--sc-radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    transition: background 0.15s;
    border-left: 4px solid transparent;
}

.storyline-header:hover {
    background: var(--background-modifier-hover);
}

.storyline-header.warning {
    color: var(--sl-warning);
    cursor: default;
}

.storyline-toggle {
    font-size: 0.85em;
}

.storyline-body {
    padding: 12px 16px;
}

.storyline-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.storyline-arrow {
    color: var(--sc-text-faint);
    font-size: 0.9em;
}

.storyline-node {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    font-size: 0.82em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.storyline-node:hover {
    background: var(--sc-card-hover);
    transform: translateY(-1px);
}

.storyline-node[data-status="draft"] {
    border-left: 3px solid var(--sl-status-draft);
}
.storyline-node[data-status="written"] {
    border-left: 3px solid var(--sl-status-written);
}
.storyline-node[data-status="revised"] {
    border-left: 3px solid var(--sl-status-revised);
}
.storyline-node[data-status="final"] {
    border-left: 3px solid var(--sl-status-final);
}
.storyline-node[data-status="outlined"] {
    border-left: 3px solid var(--sl-status-outlined);
}
.storyline-node[data-status="idea"] {
    border-left: 3px solid var(--sl-status-idea);
}

.storyline-node-id {
    font-family: var(--font-monospace);
    font-weight: 600;
    color: var(--sc-text-muted);
    font-size: 0.9em;
}

.storyline-node-title {
    color: var(--sc-text);
}

.storyline-orphaned {
    margin-top: 24px;
}

.storyline-orphaned .storyline-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

/* Storyline help text */
.storyline-help {
    margin-bottom: 12px;
    padding: 0 4px;
}

.storyline-help-text {
    font-size: 0.8em;
    color: var(--sc-text-faint);
    font-style: normal;
}

.storyline-help-icon {
    display: inline-flex;
    vertical-align: middle;
    font-style: normal;
    color: var(--text-muted);
}
.storyline-help-icon svg {
    width: 14px;
    height: 14px;
}

/* Subway map */
.subway-map-wrapper {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
}
/* Sticky plotline labels that stay visible on horizontal scroll */
.subway-label-col {
    border-right: 1px solid var(--background-modifier-border);
}
.subway-lane-label {
    pointer-events: auto;
    padding: 2px 6px;
    margin-left: -6px;
    border-radius: 4px;
    user-select: none;
}
.subway-lane-label:hover {
    background: var(--background-modifier-hover);
}
.subway-map-wrapper svg {
    display: block;
}
.subway-map-wrapper svg text {
    font-family: var(--font-interface);
}

/* Unassigned header */
.storyline-unassigned-header.storyline-unassigned-header {
    color: var(--sl-warning);
    cursor: default;
}

.storyline-unassigned-hint {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--sc-text-faint);
    margin-left: 4px;
}

/* Plotline header actions (rename, add, delete) */
.storyline-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}

.storyline-header:hover .storyline-header-actions {
    opacity: 1;
}

.storyline-action-btn {
    width: 24px;
    height: 24px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--sc-text-muted);
}

.storyline-action-btn:hover {
    color: var(--sc-text);
    background: var(--background-modifier-hover);
}

.storyline-action-btn svg {
    width: 14px;
    height: 14px;
}

.storyline-delete-btn:hover {
    color: var(--sl-error);
}

.storyline-plotline-title {
    flex: 1;
}

/* Getting-started hint */
.storyline-getting-started {
    padding: 24px 32px;
    text-align: left;
    color: var(--sc-text-muted);
    font-size: 0.9em;
    background: var(--background-secondary);
    border-radius: var(--sc-radius);
    margin: 16px 0;
}

.storyline-getting-started h4 {
    margin: 12px 0 4px 0;
    color: var(--sc-text);
    font-size: 0.95em;
}

.storyline-getting-started h4:first-child {
    margin-top: 0;
}

.storyline-getting-started ol {
    margin: 4px 0;
    padding-left: 20px;
}

.storyline-getting-started li {
    margin: 2px 0;
}

/* Plotline act group */
.plotline-act-group {
    margin-bottom: 8px;
}

.plotline-act-label {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-accent);
    margin-bottom: 4px;
    display: block;
}

/* Plotline coverage summary */
.plotline-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--sc-card-border);
}

.plotline-summary-text {
    font-size: 0.72em;
    color: var(--sc-text-faint);
    white-space: nowrap;
}

.plotline-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--background-modifier-border);
    border-radius: 2px;
    max-width: 120px;
    overflow: hidden;
}

.plotline-progress-fill {
    height: 100%;
    background: var(--sc-accent);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Tag badges on scene nodes */
.storyline-node-tags {
    display: flex;
    gap: 3px;
    margin-left: 4px;
}

.storyline-tag-badge {
    font-size: 0.68em;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--sc-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
    white-space: nowrap;
}

/* Scene picker in modals */
.storyline-scene-picker-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    margin: 8px 0;
}

.storyline-scene-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 0.85em;
    cursor: pointer;
}

.storyline-scene-picker-row:hover {
    background: var(--background-modifier-hover);
}

.storyline-scene-picker-row input[type="checkbox"] {
    margin: 0;
}

/* --- Character View --- */
.story-line-character-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.story-line-character-content:has(> .character-detail--board) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.story-line-character-content {
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.story-line-character-content > .codex-search-row {
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--background-primary);
    padding-bottom: 4px;
}

.scene-status-badge svg {
    width: 14px;
    height: 14px;
}

.stats-status-entry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stats-status-icon {
    display: inline-flex;
    align-items: center;
}

.stats-status-icon svg {
    width: 14px;
    height: 14px;
}

.character-progress {
    margin: 24px 0;
}

.character-progress h4 {
    margin-bottom: 8px;
    font-size: 12px;
}

.character-progress-bar {
    width: 100%;
    height: 20px;
    background: var(--background-secondary);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}

.character-progress-filled {
    height: 100%;
    background: var(--sc-accent);
    border-radius: 10px;
    transition: width 0.3s;
}

.character-progress-label {
    font-size: 12px;
    color: var(--sc-text-muted);
}

/* Character gap detection */
.character-gaps-section { margin-top: 20px; padding: 12px; background: var(--background-secondary); border-radius: var(--sc-radius); }
.character-gaps-section h4 { margin: 0 0 8px; font-size: 0.95em; }
.character-gap-ok { display: flex; align-items: center; gap: 6px; color: var(--sl-success); font-size: 0.85em; }
.character-gap-item { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 0.85em; color: var(--text-error); }
.character-presence-bar { display: flex; gap: 1px; margin: 8px 0; height: 14px; }
.character-presence-cell { flex: 1; border-radius: 2px; min-width: 4px; transition: opacity 0.15s; }
.character-presence-cell.presence-active { background: var(--sc-accent, #7c3aed); opacity: 1; }
.character-presence-cell.presence-absent { background: var(--sc-text-muted, #999999); opacity: 0.2; }
.character-presence-cell:hover { opacity: 1; transform: scaleY(1.3); }
.character-presence-legend { font-size: 0.75em; color: var(--sc-text-muted); margin-top: 4px; }

/* Character arc intensity curve */
.character-arc-section {
    margin-top: 20px;
    padding: 12px;
    background: var(--background-secondary);
    border-radius: var(--sc-radius);
}

.character-arc-section h4 {
    margin: 0 0 8px;
    font-size: 0.9em;
}

.character-arc-svg {
    display: block;
    max-width: 500px;
}

.arc-line {
    fill: none;
    stroke: var(--sc-accent);
    stroke-width: 2;
    stroke-linejoin: round;
}

.arc-area {
    fill: var(--sc-accent);
    opacity: 0.1;
}

.arc-dot {
    fill: var(--sc-accent);
    stroke: var(--background-primary);
    stroke-width: 2;
    cursor: pointer;
}

.arc-dot:hover {
    r: 6;
}

.arc-grid-line {
    stroke: var(--background-modifier-border);
    stroke-width: 0.5;
    stroke-dasharray: 3 3;
}

.arc-axis-label {
    font-size: 9px;
    fill: var(--sc-text-faint);
}

.arc-scene-label {
    font-size: 8px;
    fill: var(--sc-text-faint);
}

.character-overview-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0 6px;
    flex-shrink: 0;
}
.character-overview-progress {
    font-size: 0.78em;
    color: var(--text-muted);
}
.character-overview-load-more {
    font-size: 0.78em;
    padding: 2px 10px;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-muted);
    cursor: pointer;
}
.character-overview-load-more:hover {
    color: var(--text-normal);
    border-color: var(--interactive-accent);
}
.character-overview-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}
.character-overview-sentinel {
    width: 100%;
    height: 24px;
    flex-shrink: 0;
    pointer-events: none;
}
.character-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
    margin-top: 4px;
    align-content: start;
}
.character-overview-card.is-lite {
    padding: 8px;
}
.character-overview-card.is-lite .character-card-portrait {
    max-height: 72px;
}

.character-overview-card {
    padding: 10px;
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    min-width: 0;
    text-align: center;
}

.character-overview-card:hover {
    background: var(--sc-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--sl-shadow-sm);
}

.character-overview-card h4 {
    margin: 0 0 4px;
    font-size: 0.92em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-overview-card p {
    margin: 2px 0;
    font-size: 0.82em;
    color: var(--sc-text-muted);
}

/* Character role badge on overview card */
.character-role-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: var(--sc-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
    opacity: 0.85;
}
.character-role-badge.role-protagonist { background: var(--sl-role-protagonist); }
.character-role-badge.role-antagonist { background: var(--sl-role-antagonist); }
.character-role-badge.role-deuteragonist { background: var(--sl-role-deuteragonist); }
.character-role-badge.role-mentor { background: var(--sl-role-mentor); }
.character-role-badge.role-sidekick { background: var(--sl-role-sidekick); }
.character-role-badge.role-love-interest { background: var(--sl-role-love-interest); }
.character-role-badge.role-foil { background: var(--sl-role-foil); opacity: 0.7; }
.character-role-badge.role-supporting { background: var(--sl-role-supporting); }
.character-role-badge.role-minor { background: var(--sl-role-minor); }

.character-card-snippet {
    margin: 2px 0 4px;
    font-size: 0.78em;
    color: var(--sc-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-card-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.72em;
    color: var(--sc-text-muted);
    margin-bottom: 4px;
}
.character-stat-sep { opacity: 0.5; }
.character-stat-none { font-style: italic; opacity: 0.6; }

/* Completeness bar on overview card */
.character-card-completeness {
    display: flex;
    align-items: center;
    gap: 8px;
}
.character-completeness-bar {
    flex: 1;
    height: 4px;
    background: var(--background-modifier-border);
    border-radius: 2px;
    overflow: hidden;
}
.character-completeness-fill {
    height: 100%;
    background: var(--sc-accent);
    border-radius: 2px;
    transition: width 0.3s;
}
.character-completeness-label {
    font-size: 0.72em;
    color: var(--sc-text-faint);
    white-space: nowrap;
}

/* Character card prop tags */
.character-card-props {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
}

.character-prop-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.7em;
    background: var(--sl-sg-prop, #E91E63);
    color: #ffffff;
    opacity: 0.85;
    cursor: context-menu;
}

.character-loc-tag {
    background: var(--sl-sg-location, #4CAF50);
}

.character-prop-more {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    color: var(--text-muted);
    background: var(--background-modifier-hover);
}

/* Unlinked characters divider */
.character-unlinked-divider {
    margin-top: 24px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: 0.82em;
    color: var(--sc-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.character-overview-card.character-unlinked {
    border-style: dashed;
    opacity: 0.8;
}

.character-create-profile-btn {
    margin-top: 8px;
    font-size: 0.78em;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--sc-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
    border: none;
}
.character-create-profile-btn:hover {
    opacity: 0.9;
}

/* Unlinked card action row */
.character-unlinked-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.character-link-btn,
.character-ignore-btn {
    font-size: 0.78em;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
}
.character-link-btn:hover,
.character-ignore-btn:hover {
    background: var(--background-modifier-hover);
}

/* Link-to-character modal */
.link-character-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    max-height: 300px;
    overflow-y: auto;
}
.link-character-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.link-character-row:hover {
    background: var(--background-modifier-hover);
}
.link-character-name {
    font-weight: 600;
}
.link-character-nickname {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-left: 4px;
}

/* Empty state */
.character-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--sc-text-muted);
}
.character-empty-icon {
    margin-bottom: 12px;
    opacity: 0.4;
}
.character-empty-icon svg { width: 48px; height: 48px; }
.character-empty-state h4 { margin: 0 0 8px; }
.character-empty-state p { font-size: 0.85em; max-width: 360px; }

/* ?? Mode Toggle (Grid / Map) ?? */
.character-mode-toggle {
    display: flex;
    gap: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.character-mode-btn.character-mode-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 0.8em;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: color 0.15s, border-color 0.15s;
}

.character-mode-btn.character-mode-btn:hover {
    background: transparent;
    color: var(--text-normal);
}

.character-mode-btn.character-mode-btn.active {
    background: transparent;
    color: var(--interactive-accent);
    border-bottom: 2px solid var(--interactive-accent);
}

.character-mode-btn.character-mode-btn:focus {
    outline: none;
    box-shadow: none;
}


/* ?? Character Detail View ?? */

.character-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
    flex-shrink: 0;
}

.character-detail-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Per-category archive profile direction (横式 / 竖式). */
.library-profile-orientation {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}

button.library-profile-orientation-btn,
.character-detail-header-right button.library-profile-orientation-btn,
.location-detail-header-right button.library-profile-orientation-btn,
.codex-detail-header-right button.library-profile-orientation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 26px;
    margin: 0;
    padding: 3px 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

button.library-profile-orientation-btn:hover,
.character-detail-header-right button.library-profile-orientation-btn:hover,
.location-detail-header-right button.library-profile-orientation-btn:hover,
.codex-detail-header-right button.library-profile-orientation-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

button.library-profile-orientation-btn.is-active,
button.library-profile-orientation-btn.is-active:hover,
.character-detail-header-right button.library-profile-orientation-btn.is-active,
.location-detail-header-right button.library-profile-orientation-btn.is-active,
.codex-detail-header-right button.library-profile-orientation-btn.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.library-profile-orientation-icon,
.library-profile-orientation-icon svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* Detail shell: fill pane so the board can scroll horizontally */
.character-detail--board,
.character-detail--vertical,
.codex-detail--board,
.codex-detail--vertical,
.location-detail--board,
.location-detail--vertical {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 10px;
    /* px so Obsidian / host UI font cannot enlarge the sheet. */
    font-size: 13px;
}

.character-detail-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 8px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--sc-radius);
    background: var(--background-secondary);
}

.character-detail-hero-portrait {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-modifier-hover);
    border: 1px solid var(--background-modifier-border);
    cursor: pointer;
    position: relative;
}
.character-detail-hero-portrait:hover {
    border-color: var(--interactive-accent);
}
.character-detail-hero-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.character-detail-hero-portrait-placeholder {
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.character-detail-hero-portrait-placeholder svg {
    width: 28px;
    height: 28px;
}
.character-detail-hero-portrait .character-portrait-change-label {
    font-size: 8px;
}

.character-detail-hero-meta {
    min-width: 0;
    flex: 1;
}
.character-detail-hero-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.character-detail-hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.character-detail-hero-chip {
    font-size: 11px;
    line-height: 1.3;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--background-modifier-hover);
    color: var(--sc-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.character-detail-hero-chip.is-muted {
    color: var(--sc-text-muted);
    background: transparent;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 1px 6px;
}

/* Detail layout: form + side panel */
.character-detail-layout {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.character-detail-layout--board,
.codex-detail-layout--board,
.location-detail-layout--board {
    flex: 1;
    min-height: 0;
    gap: 14px;
    overflow: hidden;
}

/* Vertical = stacked accordion sections; side rail stays beside the form. */
.character-detail-layout--vertical,
.codex-detail-layout--vertical,
.location-detail-layout--vertical {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.character-detail-vertical-track {
    width: 100%;
    min-width: 0;
    overflow-y: auto;
}

.character-detail-form {
    flex: 1;
    min-width: 0;
}

.character-detail-board-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 0;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
}

.character-detail-board-track > .character-section,
.character-detail-board-track > .character-board-column,
.character-detail-board-track > .codex-section,
.character-detail-board-track > .location-section {
    flex: 0 0 300px;
    width: 300px;
    max-width: min(340px, 86vw);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--background-primary);
    /* Stronger than --background-modifier-border so columns stay readable in light theme */
    border: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--background-modifier-border));
    border-radius: var(--sc-radius);
    box-shadow: none;
}

.character-detail-board-track > .character-section:first-of-type,
.character-detail-board-track > .character-board-column:first-of-type,
.character-detail-board-track > .codex-section:first-of-type,
.character-detail-board-track > .location-section:first-of-type {
    flex-basis: 320px;
    width: 320px;
}

.character-detail-board-track > .character-section > .character-section-header,
.character-detail-board-track > .codex-section > .codex-section-header,
.character-detail-board-track > .location-section > .location-section-header {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    cursor: default;
    border-bottom: 1px solid var(--background-modifier-border);
}

.character-detail-board-track > .character-section > .character-section-body,
.character-detail-board-track > .codex-section > .codex-section-body,
.character-detail-board-track > .location-section > .location-section-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 14px;
    display: block !important;
}

.character-detail-board-track .character-section-chevron.is-hidden,
.character-detail-board-track .character-section-chevron,
.character-detail-board-track .codex-section-chevron.is-hidden,
.character-detail-board-track .codex-section-chevron,
.character-detail-board-track .location-section-chevron.is-hidden,
.character-detail-board-track .location-section-chevron {
    display: inline-flex;
}

/* Horizontal and vertical profiles share the same real accordion state. */
.character-detail-board-track > [data-profile-section-token].is-collapsed {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    align-self: stretch;
    max-height: 100%;
}

.character-detail-board-track > [data-profile-section-token].is-collapsed > .character-section-header,
.character-detail-board-track > [data-profile-section-token].is-collapsed > .location-section-header,
.character-detail-board-track > [data-profile-section-token].is-collapsed > .codex-section-header {
    position: static;
    flex: 1;
    min-height: 0;
    padding: 8px 6px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    border-bottom: 0;
    cursor: pointer;
}

.character-detail-board-track > [data-profile-section-token].is-collapsed .profile-section-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    max-width: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.character-detail-board-track > [data-profile-section-token].is-collapsed .profile-section-actions {
    margin: auto 0 0;
    flex-direction: column;
}

.character-detail-board-track > [data-profile-section-token].is-collapsed
    .profile-section-actions > .profile-section-action-btn:not(.profile-section-drag-handle) {
    display: none;
}

.character-detail-board-track > [data-profile-section-token].is-collapsed > .character-section-body,
.character-detail-board-track > [data-profile-section-token].is-collapsed > .location-section-body,
.character-detail-board-track > [data-profile-section-token].is-collapsed > .codex-section-body {
    display: none !important;
}

.profile-section-drag-handle {
    cursor: grab;
    touch-action: none;
}

.profile-section-drag-handle:active {
    cursor: grabbing;
}

[data-profile-section-token].is-dragging {
    opacity: 0.42;
}

.character-detail-board-track > [data-profile-section-token].is-drop-before {
    box-shadow: -4px 0 0 var(--interactive-accent);
}

.character-detail-board-track > [data-profile-section-token].is-drop-after {
    box-shadow: 4px 0 0 var(--interactive-accent);
}

.character-detail-vertical-track > [data-profile-section-token].is-drop-before {
    box-shadow: 0 -4px 0 var(--interactive-accent);
}

.character-detail-vertical-track > [data-profile-section-token].is-drop-after {
    box-shadow: 0 4px 0 var(--interactive-accent);
}

.character-detail-board-track .character-field-row,
.character-detail-board-track .codex-field-row,
.character-detail-board-track .location-field-row {
    margin-bottom: 8px;
}

.character-detail-board-track .character-field-label,
.character-detail-board-track .codex-field-label,
.character-detail-board-track .location-field-label {
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.character-detail-board-track .character-field-textarea,
.character-detail-board-track .codex-field-textarea,
.character-detail-board-track .location-field-textarea {
    min-height: 72px;
}

.character-detail-board-track > .codex-add-custom-section-row {
    flex: 0 0 180px;
    width: 180px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    margin: 0;
}

.character-detail-side {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
}

.character-detail-layout--board .character-detail-side,
.codex-detail-layout--board .codex-detail-side,
.location-detail-layout--board .location-detail-side {
    width: 292px;
    max-height: 100%;
    overflow-y: auto;
    position: static;
    padding-right: 2px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--background-modifier-border));
}

/* Right rail cards (gallery, scene stats, notes) — match board column contrast */
.character-detail-side .character-gallery,
.character-detail-side .library-relations-panel,
.character-detail-side .character-side-stats,
.character-detail-side .character-progress,
.character-detail-side .character-references-panel,
.character-detail-side .character-linked-aliases-panel,
.character-detail-side .codex-side-section,
.character-detail-side .entity-notes-section {
    border: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--background-modifier-border));
    border-radius: var(--sc-radius);
}

/* Shared profile association card — Gallery → Related notes → scene stats. */
.library-relations-panel {
    margin: 0 0 12px;
    padding: 10px 12px 12px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--background-modifier-border));
    border-radius: var(--sc-radius, 6px);
    background: var(--background-primary);
    min-width: 0;
}

.location-detail-side .library-relations-panel,
.codex-detail-side .library-relations-panel {
    margin-bottom: 0;
}

.library-relations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.library-relations-header h4 {
    margin: 0;
    font-size: 12px;
}

.library-relations-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.library-relations-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.library-relations-empty {
    padding: 8px 4px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.library-relation-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.library-relation-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(74px, 0.85fr) repeat(3, 26px);
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.library-relation-row.is-new .library-relation-controls {
    grid-template-columns: minmax(0, 1.35fr) minmax(82px, 0.85fr) 26px 26px;
}

.library-relation-row.is-busy {
    opacity: 0.65;
    pointer-events: none;
}

.library-relation-row.is-partial {
    padding-left: 5px;
    border-left: 2px dashed var(--text-warning, #d97706);
}

.library-relation-target,
.library-relation-type {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 2px 22px 2px 7px;
    font-size: 12px;
    text-overflow: ellipsis;
}

.library-relations-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

.library-relations-icon-button:hover {
    background: var(--background-modifier-hover);
    color: var(--interactive-accent);
}

.library-relations-icon-button.is-confirm:not(:disabled) {
    color: var(--interactive-accent);
}

.library-relations-icon-button:focus-visible,
.library-relation-notes:focus-visible,
.library-relation-target:focus-visible,
.library-relation-type:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}

.library-relations-icon-button.is-danger:hover {
    color: var(--text-error);
}

.library-relations-icon-button svg {
    width: 15px;
    height: 15px;
}

.library-relation-notes {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    border: 0;
    border-left: 2px solid var(--nl-relation-color, var(--interactive-accent));
    border-radius: 2px 4px 4px 2px;
    background: var(--background-secondary);
    color: var(--text-muted);
    box-shadow: none;
    text-align: left;
    font-size: 0.78em;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.library-relation-notes:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.character-detail-side .character-progress {
    padding: 12px;
    background: var(--background-secondary);
    margin: 0 0 12px;
}

@media (max-width: 800px) {
    .character-detail-layout {
        flex-direction: column;
    }
    .character-detail-side {
        width: 100%;
        position: static;
    }
    .character-detail-layout--board {
        flex-direction: column;
        overflow: auto;
    }
    .character-detail-board-track {
        overflow-x: auto;
        max-height: none;
    }
    .character-detail-layout--board .character-detail-side {
        width: 100%;
        max-height: none;
        padding-left: 0;
        border-left: none;
    }
}

/* Collapsible sections */
.character-section {
    margin-bottom: 4px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--sc-radius);
    overflow: hidden;
}

.character-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 12px;
    background: var(--background-secondary);
    transition: background 0.15s;
}
.character-section-header:hover {
    background: var(--background-modifier-hover);
}
.character-section-chevron,
.character-section-icon {
    display: inline-flex;
    align-items: center;
}
.character-section-chevron svg,
.character-section-icon svg {
    width: 14px;
    height: 14px;
}
.character-section-icon {
    color: var(--sc-accent);
}

.character-section-body {
    padding: 8px 12px 12px;
}

/* Field rows */
.character-field-row {
    margin-bottom: 10px;
}

.character-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-text-muted);
    margin-bottom: 3px;
    text-transform: none;
    letter-spacing: 0;
}

.character-field-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--sc-text);
    font-size: 13px;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.character-field-input:focus {
    border-color: var(--sc-accent);
    outline: none;
}
.character-field-input::placeholder {
    color: var(--sc-text-faint);
    font-style: italic;
}

.character-field-textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--sc-text);
    font-size: 13px;
    resize: vertical;
    min-height: 48px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s;
    box-sizing: border-box;
    overflow: hidden;
}
.character-field-textarea:focus {
    border-color: var(--sc-accent);
    outline: none;
}
.character-field-textarea::placeholder {
    color: var(--sc-text-faint);
    font-style: italic;
}

/* Custom fields */
.character-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.character-custom-key {
    flex: 0 0 35%;
}
.character-custom-value {
    flex: 1;
}
.character-custom-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sc-text-faint);
    padding: 4px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    flex-shrink: 0;
}
.character-custom-remove:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}
.character-custom-remove svg {
    width: 14px;
    height: 14px;
}

.character-custom-add-row {
    margin-top: 8px;
}
.character-custom-add-btn {
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px dashed var(--background-modifier-border);
    background: none;
    color: var(--sc-text-muted);
    cursor: pointer;
}
.character-custom-add-btn:hover {
    border-color: var(--sc-accent);
    color: var(--sc-accent);
}

/* ?? Universal field: '+' button in section headers ?? */
.character-section-add-field-btn.character-section-add-field-btn {
    margin-left: auto;
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.character-section-add-field-btn.character-section-add-field-btn:hover,
.character-section-add-field-btn.character-section-add-field-btn:focus,
.character-section-add-field-btn.character-section-add-field-btn:active {
    color: var(--sc-accent);
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
}
.character-section-add-field-btn svg {
    width: 18px;
    height: 18px;
}

/* ?? Universal field rows ?? */
.character-universal-field-row {
    position: relative;
}
.character-universal-label-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.character-universal-label-wrap .character-field-label {
    margin-bottom: 0;
}
.character-universal-edit-btn,
.character-universal-move-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.character-universal-field-row:hover .character-universal-edit-btn,
.character-universal-field-row:hover .character-universal-move-btn {
    opacity: 0.6;
}
.character-universal-edit-btn:hover,
.character-universal-move-btn:hover {
    opacity: 1;
    color: var(--text-accent);
}
.character-universal-edit-btn:focus,
.character-universal-move-btn:focus,
.character-universal-edit-btn:focus-visible,
.character-universal-move-btn:focus-visible {
    outline: none;
    box-shadow: none;
}
.character-universal-edit-btn svg {
    width: 14px;
    height: 14px;
}
.character-universal-move-btn svg {
    width: 14px;
    height: 14px;
}

/* ?? Multi-select (tags) universal field ?? */
.universal-multi-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.universal-multi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
}
.universal-multi-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 12px;
    padding: 2px 6px 2px 8px;
    font-size: 12px;
    line-height: 1.3;
    max-width: 200px;
    overflow: hidden;
}
.universal-multi-pill > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.universal-multi-pill-x {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
    flex-shrink: 0;
}
.universal-multi-pill-x:hover {
    color: var(--text-error);
    background: var(--background-modifier-error);
}
.universal-multi-input-row {
    position: relative;
}
.universal-multi-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--sc-radius);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 13px;
}
.universal-multi-input:focus {
    border-color: var(--interactive-accent);
    outline: none;
}
.universal-multi-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 160px;
    overflow-y: auto;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--sc-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    margin-top: 2px;
}
.universal-multi-dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-normal);
}
.universal-multi-dropdown-item:hover {
    background: var(--background-modifier-hover);
}

/* ?? Add / Edit Field Modal ?? */
.storyline-add-field-modal {
    max-width: 480px;
}
.storyline-add-field-modal h3 {
    margin-top: 0;
    margin-bottom: 4px;
}
.storyline-add-field-desc {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-bottom: 12px;
}
.storyline-field-options-container {
    margin-bottom: 12px;
    padding: 8px 0;
}
.storyline-field-options-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
}
.storyline-field-option-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.storyline-field-option-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--sc-radius);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 0.9em;
}
.storyline-field-option-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1em;
    padding: 2px 4px;
    border-radius: var(--sc-radius);
}
.storyline-field-option-remove:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}
.storyline-field-option-add {
    background: none;
    border: 1px dashed var(--background-modifier-border);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85em;
    padding: 4px 10px;
    border-radius: var(--sc-radius);
}
.storyline-field-option-add:hover {
    border-color: var(--sc-accent);
    color: var(--sc-accent);
}
.storyline-add-field-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}
.storyline-field-delete-btn {
    margin-right: auto;
}

/* ?? Character tag field (allies/enemies picker) ?? */
.character-tag-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.story-line-filters-container.is-corkboard-mode .story-line-sort,
.story-line-filters-container.is-kanban-mode .story-line-sort {
    display: none;
}
/* Relation builder layout: stack items vertically and keep add-row width aligned */
.relation-builder-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.relation-builder-item {
    width: 100%;
    margin-bottom: 0;
    cursor: grab;
}

.relation-builder-item.relation-builder-item .character-field-input {
    width: 100%;
    box-shadow: none;
}

.relation-builder-inline-row {
    display: grid;
    grid-template-columns: minmax(150px, 33%) 22px minmax(0, 1fr) 32px;
    gap: 0 12px;
}

.relation-builder-inline-row.relation-builder-inline-row .character-field-input {
    min-width: 0;
    box-shadow: none;
}

.relation-builder-remove.relation-builder-remove {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    font-size: 1.25em;
    line-height: 1;
}

.relation-builder-drag-handle {
    width: 22px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: grab;
}

.relation-builder-drag-handle:hover {
    color: var(--text-normal);
}

.relation-builder-drag-handle:active {
    cursor: grabbing;
}

.relation-builder-drag-handle svg {
    width: 15px;
    height: 15px;
}

.relation-builder-add-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
}

.relation-builder-add-row .character-field-input {
    min-width: 0;
}

.relation-builder-custom-input {
    width: 100%;
}

.relation-builder-add-row .character-custom-add-btn {
    width: 100%;
}

.relation-builder-item.relation-builder-dragging {
    opacity: 0.65;
    cursor: grabbing;
}

.relation-builder-item.relation-builder-drag-over {
    outline: 2px dashed var(--interactive-accent);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (max-width: 700px) {
    .relation-builder-item,
    .relation-builder-add-row {
        width: 100%;
    }

    .relation-builder-inline-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }

    .relation-builder-drag-handle {
        justify-self: start;
    }

    .relation-builder-remove {
        justify-self: end;
    }
}

/* Defensive fallback for Win11/Electron arrow tiling in relationships pickers */
.story-line-character-container.story-line-character-container .character-field-input.dropdown {
    background-image: none;
}

/* Apply same safeguard in Timeline and Location views */
.story-line-timeline-container.story-line-timeline-container select,
.story-line-location-container.story-line-location-container select {
    background-image: none;
}

/* ?? Image Gallery Carousel ?? */
.character-gallery {
    background: var(--background-secondary);
    border-radius: var(--sc-radius);
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--background-modifier-border));
}
.character-gallery-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.character-gallery-header h4 {
    margin: 0;
    font-size: 12px;
    flex: 1;
}
.character-gallery-header .character-section-chevron {
    display: flex;
    align-items: center;
}
.character-gallery-header .character-section-chevron svg {
    width: 14px;
    height: 14px;
    color: var(--sc-text-muted);
}
.character-gallery-body {
    margin-top: 10px;
}
.character-gallery-viewer {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--background-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.character-gallery:has(.character-gallery-empty) {
    padding: 8px 10px;
}
.character-gallery-viewer:has(.character-gallery-empty) {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    margin-bottom: 0;
}
.character-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.character-gallery-placeholder,
.character-gallery-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--sc-text-muted);
    font-size: 12px;
}
.character-gallery-empty {
    height: auto;
    min-height: 32px;
    padding: 6px 4px;
}
.character-gallery-placeholder svg {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}
.character-gallery-caption {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.character-gallery-caption-input {
    flex: 1;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    background: var(--background-primary);
    color: var(--text-normal);
}
.character-gallery-caption-input:focus {
    border-color: var(--sc-accent);
    outline: none;
}
.character-gallery-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    color: var(--sc-text-muted);
    display: flex;
    align-items: center;
}
.character-gallery-remove-btn:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}
.character-gallery-remove-btn svg {
    width: 14px;
    height: 14px;
}
.character-gallery-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.character-gallery-nav.is-single {
    display: none;
}
.character-gallery-arrow {
    background: none;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.character-gallery-arrow:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.character-gallery-arrow svg {
    width: 14px;
    height: 14px;
}
.character-gallery-thumbs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    padding: 2px 0;
}
.character-gallery-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-primary);
}
.character-gallery-thumb.active {
    border-color: var(--sc-accent);
}
.character-gallery-thumb:hover {
    border-color: var(--text-muted);
}
.character-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.character-gallery-thumb svg {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

/* ?? Gallery Lightbox (non-modal floating window) ?? */
.gallery-lightbox-window {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 200px;
    min-height: 150px;
    background: var(--background-primary);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
}
.gallery-lightbox-titlebar {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--background-secondary);
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.gallery-lightbox-titlebar:active {
    cursor: grabbing;
}
.gallery-lightbox-title {
    flex: 1;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-lightbox-close.gallery-lightbox-close {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
}
.gallery-lightbox-close:hover {
    color: var(--text-error);
}
.gallery-lightbox-close svg {
    width: 16px;
    height: 16px;
}
.gallery-lightbox-content-row {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0;
    overflow: hidden;
}
.gallery-lightbox-nav-btn.gallery-lightbox-nav-btn {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    padding: 8px 4px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}
.gallery-lightbox-nav-btn:hover {
    color: var(--text-normal);
}
.gallery-lightbox-nav-btn svg {
    width: 18px;
    height: 18px;
}
.gallery-lightbox-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    height: 100%;
    cursor: zoom-in;
}
.gallery-lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.1s ease;
}
.gallery-lightbox-caption {
    padding: 6px 10px;
    font-size: 0.8em;
    color: var(--text-muted);
    background: var(--background-secondary);
    text-align: center;
    flex-shrink: 0;
}
.gallery-lightbox-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    opacity: 0.4;
}
.gallery-lightbox-resize-handle::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
}

/* ?? Side panel (scene info) ?? */
.character-side-stats {
    padding: 12px;
    background: var(--background-secondary);
    border-radius: var(--sc-radius);
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--background-modifier-border));
}
.character-side-stats h4 {
    margin: 0 0 10px;
    font-size: 12px;
}

.character-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}
.character-stat-item {
    background: var(--background-primary);
    border-radius: 6px;
    padding: 8px 4px;
}
.character-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-accent);
}
.character-stat-label {
    font-size: 10px;
    color: var(--sc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.character-side-pov-dist {
    padding: 8px 12px;
    background: var(--background-secondary);
    border-radius: var(--sc-radius);
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--sc-text-muted);
}
.character-side-pov-dist p { margin: 0; }

.character-side-scenes {
    margin-bottom: 12px;
}
.character-side-scenes h4 {
    font-size: 12px;
    margin: 0 0 8px;
    color: var(--sc-text-muted);
}

.character-side-scene-item {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
}
.character-side-scene-item:hover {
    background: var(--background-modifier-hover);
}
.character-side-scene-item .scene-id {
    font-family: var(--font-monospace);
    font-size: 0.85em;
    color: var(--sc-text-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.character-side-scene-item .scene-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.character-side-scene-item .scene-status-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.character-side-plotgrid-hint {
    margin: 0 0 8px;
    font-size: 0.78em;
    line-height: 1.35;
}
.character-side-plotgrid-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 10px;
}
.character-side-plotgrid-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.character-side-plotgrid-item .scene-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.35;
}
.character-side-plotgrid-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 22px;
    font-size: 0.78em;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-word;
}
.character-side-plotgrid-scene {
    align-self: flex-start;
    margin: 2px 0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-accent);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.character-side-plotgrid-scene:hover {
    color: var(--text-accent-hover, var(--text-accent));
}
/* POV badge in scene list */
.character-pov-badge {
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--sc-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

/* --- Location / World View --- */

.story-line-location-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Match Character/Codex: only the inner pane scrolls. Nested overflow:auto
       on this shell + .story-line-location-content made wheel events bounce
       the archive grid back to the top. */
    overflow: hidden;
}

.story-line-location-content {
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.story-line-location-content > h3 {
    margin: 0 0 12px 0;
    font-size: 1.15em;
}

.location-type-badge,
.location-type-badge-sm {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--interactive-accent);
    color: var(--text-on-accent, var(--sl-badge-text));
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.location-type-badge-sm {
    font-size: 0.65em;
    padding: 0 4px;
}

/* ?? Empty state ??????????????????????? */

.location-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 48px 16px;
    text-align: center;
    color: var(--text-muted);
}

.location-empty-icon {
    font-size: 2.2em;
    margin-bottom: 10px;
    opacity: 0.4;
}

.location-empty-icon svg {
    width: 40px;
    height: 40px;
}

.location-empty-state h4 {
    margin: 0 0 6px 0;
}

.location-empty-state p {
    margin: 0 0 16px;
    font-size: 0.9em;
    max-width: 340px;
}

.location-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ?? Detail view ??????????????????????? */

.location-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* .location-back-btn ??Legacy, replaced by .codex-nav-back-link */

.location-detail-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.location-detail-header-right button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-muted);
}

.location-detail-header-right button:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.location-detail-type {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.location-detail-layout {
    display: flex;
    gap: 20px;
}

.location-detail-form {
    flex: 1;
    min-width: 0;
}

.location-detail-side {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.location-detail-layout.is-vertical {
    flex-direction: column;
}

.location-detail-layout.is-vertical .location-detail-side {
    width: 100%;
}

@media (max-width: 700px) {
    .location-detail-layout {
        flex-direction: column;
    }
    .location-detail-side {
        width: 100%;
    }
}

/* ?? Collapsible sections ?????????????? */

.location-section {
    margin-bottom: 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    overflow: hidden;
}

.location-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    background: var(--background-secondary);
    user-select: none;
}

.location-section-header:hover {
    background: var(--background-modifier-hover);
}

.location-section-chevron,
.location-section-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.location-section-body {
    padding: 8px 12px;
}

/* ?? Fields ???????????????????????????? */

.location-field-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
}

.location-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.location-field-input,
.location-field-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.15s;
}

.location-field-input:focus,
.location-field-textarea:focus {
    border-color: var(--interactive-accent);
    outline: none;
}

.location-field-input::placeholder,
.location-field-textarea::placeholder {
    color: var(--text-faint);
    font-style: italic;
}

.location-field-textarea {
    resize: vertical;
    min-height: 56px;
}

.location-field-input.dropdown {
    cursor: pointer;
}

/* ?? Custom fields ????????????????????? */

.location-custom-row {
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.location-custom-key {
    flex: 0 0 35%;
}

.location-custom-value {
    flex: 1;
}

.location-custom-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
}

.location-custom-remove:hover {
    color: var(--text-error);
    background: var(--background-modifier-hover);
}

.location-custom-add-row {
    margin-top: 4px;
}

.location-custom-add-btn {
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    border: 1px dashed var(--background-modifier-border);
    color: var(--text-muted);
}

.location-custom-add-btn:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
}

/* ?? Side panel ???????????????????????? */

.location-side-stats {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 12px;
}

.location-side-stats h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.location-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.location-stat-item {
    text-align: center;
    background: var(--background-secondary);
    border-radius: 6px;
    padding: 8px 4px;
}

.location-stat-value {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--interactive-accent);
}

.location-stat-label {
    font-size: 0.7em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.location-side-world-info,
.location-side-parent-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.location-side-list,
.location-side-scenes,
.location-side-chars {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 12px;
}

.location-side-list h4,
.location-side-scenes h4,
.location-side-chars h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.location-side-item,
.location-side-scene-item,
.location-side-char-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.15s;
}

.location-side-item:hover,
.location-side-scene-item:hover {
    background: var(--background-modifier-hover);
}

.location-side-item-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.location-side-scene-item .scene-id {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}

.location-side-scene-item .scene-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-side-scene-item .scene-status-badge {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.location-side-char-count {
    margin-left: auto;
    font-size: 0.8em;
    color: var(--text-muted);
    background: var(--background-modifier-border);
    padding: 0 5px;
    border-radius: 8px;
}

.location-add-to-world-btn {
    width: 100%;
    padding: 8px;
    font-size: 0.8em;
    border: 1px dashed var(--background-modifier-border);
    background: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
}

.location-add-to-world-btn:hover {
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
}

/* --- Statistics View --- */
.story-line-stats-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    max-width: 700px;
}

.stats-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sc-card-border);
}

.stats-section h4 {
    margin: 0 0 10px;
    font-size: 0.95em;
    color: var(--sc-text);
}

.stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stats-list li {
    padding: 6px 0;
    font-size: 0.85em;
}

.stats-bar {
    width: 100%;
    height: 8px;
    background: var(--background-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

.stats-bar-wide {
    height: 14px;
    border-radius: 7px;
}

.stats-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.3s;
    background: var(--sc-accent);
}

.stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.85em;
}

.stats-row span:first-child {
    min-width: 180px;
}

.stats-row .stats-bar {
    flex: 1;
}

.stats-percent {
    min-width: 40px;
    text-align: right;
    color: var(--sc-text-muted);
    font-size: 0.9em;
}

.stats-warning {
    color: var(--sl-warning);
    font-weight: 600;
}

.stats-ok {
    color: var(--sl-success);
}

/* Plot Hole Detection - Severity Styling */
.stats-warning-summary {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    background: var(--background-secondary);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.9em;
}

.stats-severity-error {
    color: var(--sl-error);
    font-weight: 600;
}

.stats-severity-warning {
    color: var(--sl-warning);
    font-weight: 600;
}

.stats-severity-info {
    color: var(--text-muted);
}

.stats-warning-category {
    margin-top: 12px;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-normal);
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 4px;
}

.stats-warning-icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.88em;
    line-height: 1.4;
}

.stats-warning-icon svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Writing Sprint / Velocity Tracking */

/* Sprint timer controls */
.stats-sprint-controls {
    padding: 12px;
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    margin-bottom: 16px;
}
.stats-sprint-duration-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.stats-sprint-duration-label {
    font-size: 0.85em;
    color: var(--sc-text-muted);
}
.stats-sprint-duration-input {
    width: 52px;
    padding: 3px 6px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 0.9em;
    text-align: center;
}
.stats-sprint-duration-input:disabled {
    opacity: 0.5;
}
.stats-sprint-duration-unit {
    font-size: 0.85em;
    color: var(--sc-text-muted);
}
.stats-sprint-timer {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.stats-sprint-timer-display {
    font-size: 2em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sc-text);
    letter-spacing: 0.02em;
}
.stats-sprint-timer-display.stats-sprint-timer-overtime {
    color: var(--text-error, #e74c3c);
}
.stats-sprint-timer-words,
.stats-sprint-timer-wpm {
    font-size: 0.9em;
    color: var(--sc-text-muted);
}
.stats-sprint-btn-row {
    display: flex;
    gap: 8px;
}
.stats-sprint-btn {
    padding: 4px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--text-normal);
    transition: background 0.15s;
}
.stats-sprint-btn:hover:not(:disabled) {
    background: var(--background-modifier-hover);
}
.stats-sprint-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.stats-sprint-btn-start {
    background: var(--sl-success, #4CAF50);
    color: #ffffff;
    border-color: var(--sl-success, #4CAF50);
}
.stats-sprint-btn-start:hover:not(:disabled) {
    opacity: 0.9;
}
.stats-sprint-btn-stop {
    background: var(--text-error, #e74c3c);
    color: #ffffff;
    border-color: var(--text-error, #e74c3c);
}
.stats-sprint-btn-stop:hover:not(:disabled) {
    opacity: 0.9;
}
.stats-sprint-log-list {
    font-size: 0.85em;
    color: var(--sc-text-muted);
    margin: 6px 0 0 18px;
    padding: 0;
}
.stats-sprint-log-list li {
    margin-bottom: 2px;
}

.stats-sprint-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stats-sprint-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius);
    min-width: 80px;
    flex: 1;
}

.stats-sprint-card-icon {
    margin-bottom: 4px;
    color: var(--sc-accent);
}

.stats-sprint-card-value {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--sc-text);
}

.stats-sprint-card-label {
    font-size: 0.8em;
    color: var(--sc-text-muted);
    margin-top: 2px;
}

.stats-sprint-goal {
    margin-bottom: 12px;
}

.stats-sprint-goal span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9em;
}

.stats-rings {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 4px;
}

.stats-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 110px;
    gap: 4px;
}

.stats-ring-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-normal);
}

.stats-ring-svg {
    display: block;
}

.stats-ring-pct {
    font-size: 16px;
    font-weight: 600;
    fill: var(--text-normal);
}

.stats-ring-sub {
    font-size: 11px;
    color: var(--sc-text-muted, var(--text-muted));
}

.stats-sprint-sparkline {
    margin-top: 8px;
}

.stats-sprint-sparkline-label {
    font-size: 0.85em;
    color: var(--sc-text-muted);
    margin-bottom: 4px;
    display: block;
}

.stats-sprint-spark-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 60px;
}

.stats-sprint-spark-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.stats-sprint-spark-bar {
    width: 100%;
    max-width: 20px;
    background: var(--sc-accent);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s;
    cursor: pointer;
}

.stats-sprint-spark-bar:hover {
    opacity: 0.8;
}

.stats-sprint-spark-label {
    font-size: 0.65em;
    color: var(--sc-text-faint);
    margin-top: 2px;
}

/* Pacing Analysis */
.pacing-avg-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.pacing-avg-label {
    min-width: 70px;
    font-weight: 600;
    font-size: 0.88em;
}

.pacing-avg-value {
    font-size: 0.82em;
    color: var(--text-muted);
    min-width: 160px;
}

.pacing-avg-row .stats-bar {
    flex: 1;
    min-width: 60px;
}

/* Word-count distribution histogram */
.pacing-dist-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 130px;
    padding: 8px 0;
    border-bottom: 2px solid var(--background-modifier-border);
}

.pacing-dist-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.pacing-dist-bar {
    width: 100%;
    max-width: 40px;
    background: var(--sl-info, #2196F3);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s;
    cursor: default;
}

.pacing-dist-bar:hover {
    opacity: 0.8;
}

.pacing-dist-count {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-normal);
    margin-top: 3px;
}

.pacing-dist-label {
    font-size: 0.62em;
    color: var(--text-muted);
    margin-top: 1px;
    text-align: center;
    white-space: nowrap;
}

/* Tension Curve */
.tension-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 8px 0;
    border-bottom: 2px solid var(--sc-card-border);
}

.tension-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.tension-bar {
    width: 100%;
    max-width: 30px;
    background: var(--sc-accent);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s;
    cursor: pointer;
}

.tension-bar:hover {
    opacity: 0.8;
}

.tension-label {
    font-size: 0.7em;
    color: var(--sc-text-faint);
    margin-top: 4px;
}

/* Collapsible statistics sections */
.stats-collapsible {
    margin-bottom: 16px;
    border: 1px solid var(--sc-card-border);
    border-radius: var(--sc-radius, 8px);
    overflow: hidden;
}

.stats-collapsible-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    background: var(--background-secondary);
    user-select: none;
    list-style: none;
}

.stats-collapsible-summary::-webkit-details-marker { display: none; }

.stats-collapsible-summary::before {
    content: '▶';
    display: inline-block;
    transition: transform 0.15s;
    font-size: 0.8em;
    color: var(--sc-text-muted);
}

.stats-collapsible[open] > .stats-collapsible-summary::before {
    transform: rotate(90deg);
}

.stats-collapsible-icon {
    display: flex;
    color: var(--sc-accent);
}

.stats-collapsible-icon svg { width: 16px; height: 16px; }

.stats-collapsible-body {
    padding: 12px 14px;
}

/* ?? Subsection titles inside collapsibles ?? */
.stats-subsection {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.stats-subsection:last-child { border-bottom: none; margin-bottom: 0; }

.stats-subsection-title {
    margin: 0 0 8px;
    font-size: 0.88em;
    font-weight: 600;
    color: var(--sc-text);
}

/* ?? Pace projection ?? */
.stats-pace-projection {
    font-size: 0.82em;
    color: var(--sc-text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* ?? Writing History ?? */
.stats-history-range-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.stats-range-btn {
    padding: 2px 6px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8em;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.stats-range-btn:hover {
    color: var(--sc-text);
    background: var(--background-modifier-hover);
}

.stats-range-btn.active {
    color: var(--sc-accent);
    background: transparent;
    font-weight: 600;
}

.stats-history-chart-wrap {
    margin-top: 8px;
}

.stats-history-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 4px 0;
    border-bottom: 2px solid var(--background-modifier-border);
}

.stats-history-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.stats-history-bar {
    width: 100%;
    max-width: 18px;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.3s;
    cursor: pointer;
    background: var(--sc-accent);
}

.stats-history-bar:hover { opacity: 0.8; }

.stats-history-label {
    font-size: 0.55em;
    color: var(--sc-text-faint);
    margin-top: 2px;
    white-space: nowrap;
}

/* ?? Outlier highlighting ?? */
.stats-outlier {
    background: rgba(255, 152, 0, 0.08);
    border-radius: 4px;
    padding: 2px 4px;
}

.stats-outlier-item { list-style: none; padding: 4px 0; }

.stats-scene-link {
    color: var(--sc-accent);
    cursor: pointer;
    text-decoration: underline;
}

.stats-scene-link:hover { opacity: 0.8; }

/* ?? Dialogue / narrative stacked bar ?? */
.stats-stacked-bar {
    display: flex;
    overflow: hidden;
}

.stats-dialogue-fill {
    background: var(--sc-accent);
}

.stats-narrative-fill {
    background: var(--background-modifier-border);
}

/* ?? Prose analysis ?? */
.stats-spinner-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--sc-text-muted);
    font-size: 0.9em;
}

.stats-spinner svg {
    animation: sl-spin 1s linear infinite;
}

@keyframes sl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stats-word-freq-row {
    gap: 8px;
}

.stats-word-freq-word {
    min-width: 100px;
    font-weight: 600;
    font-size: 0.88em;
}

.stats-word-freq-count {
    min-width: 110px;
    font-size: 0.8em;
    color: var(--sc-text-muted);
    text-align: right;
}

.stats-overused-title {
    color: var(--sl-warning, #FF9800);
}

.stats-overused-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stats-overused-tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 12px;
    background: rgba(255, 152, 0, 0.15);
    color: var(--sl-warning, #FF9800);
    font-weight: 600;
}

/* ?? Echo Finder ?? */
.stats-echo-scene {
    margin-bottom: 10px;
}
.stats-echo-scene .stats-scene-link {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.88em;
}
.stats-echo-tag {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 12px;
    background: rgba(156, 39, 176, 0.15);
    color: var(--sl-echo, #9C27B0);
    font-weight: 600;
    cursor: default;
}

/* ?? Character ? Chapter Heatmap ?? */
.stats-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78em;
    margin-top: 8px;
}
.stats-heatmap-table th,
.stats-heatmap-table td {
    padding: 4px 6px;
    text-align: center;
    border: 1px solid var(--sc-card-border);
}
.stats-heatmap-ch-header {
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
}
.stats-heatmap-name.stats-heatmap-name {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-heatmap-cell {
    min-width: 28px;
    font-size: 0.85em;
    color: var(--text-normal);
    transition: background-color 0.15s;
}

/* ?? Setup & Payoff Map ?? */
.stats-setup-payoff-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}
.stats-setup-payoff-row:last-child {
    border-bottom: none;
}
.stats-sp-from {
    flex-shrink: 0;
    min-width: 140px;
}
.stats-sp-arrow {
    color: var(--sc-text-muted);
    font-size: 1.1em;
    flex-shrink: 0;
}
.stats-sp-to {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.stats-sp-target {
    padding: 2px 8px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 4px;
    font-size: 0.88em;
}

/* ?? Revision sparkline bar colour ?? */
.stats-revision-bar.stats-revision-bar {
    background: var(--sl-revision, #FF9800);
}

/* ?? Pacing Coach chart ?? */
.pacing-coach-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sc-card-border);
}
.pacing-coach-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 4px;
}
.pacing-coach-bar {
    width: 100%;
    min-height: 2px;
    background: var(--sl-info, #2196F3);
    border-radius: 2px 2px 0 0;
    transition: height 0.2s;
}
.pacing-coach-bar.pacing-no-conflict {
    background: var(--sl-warning, #FF9800);
    opacity: 0.7;
}
.pacing-coach-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 3px;
    background: transparent;
}
.pacing-coach-dot.pacing-has-conflict {
    background: var(--sl-success, #4CAF50);
}
.pacing-coach-legend {
    display: flex;
    gap: 16px;
    font-size: 0.78em;
    color: var(--sc-text-muted);
    margin-top: 6px;
}
.pacing-coach-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pacing-coach-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 8px;
    border-radius: 2px;
}
.pacing-coach-bar-swatch {
    background: var(--sl-info, #2196F3);
}
.pacing-coach-noconflict-swatch {
    background: var(--sl-warning, #FF9800);
    opacity: 0.7;
}

/* ?? Misc stats helpers ?? */
.stats-hint {
    font-size: 0.82em;
    color: var(--sc-text-muted);
    font-style: italic;
    margin: 4px 0 8px;
}

.stats-empty {
    color: var(--sc-text-muted);
    font-style: italic;
    font-size: 0.9em;
}

.stats-show-more-btn {
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px solid var(--sc-card-border);
    border-radius: 4px;
    background: transparent;
    color: var(--sc-accent);
    font-size: 0.8em;
    cursor: pointer;
}

.stats-show-more-btn:hover {
    background: var(--sc-accent);
    color: var(--background-primary);
}

/* --- Responsive / Mobile --- */
@media (max-width: 768px) {
    .story-line-board {
        flex-direction: column;
    }

    .story-line-column {
        min-width: 100%;
        max-width: 100%;
    }

    .story-line-inspector-panel {
        width: 100%;
        position: fixed;
        bottom: 0;
        top: auto;
        height: 50vh;
        border-left: none;
        border-top: 1px solid var(--sc-card-border);
    }

    .story-line-filter-bar {
        flex-wrap: wrap;
    }

    .story-line-search {
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   Structure Modal (Acts & Chapters)
   ============================================ */

/* Quick Add Modal Compactness */
.story-line-quick-add.story-line-quick-add h2 {
    margin: 0 0 8px 0;
}

.story-line-quick-add.story-line-quick-add .setting-item {
    padding: 4px 0;
    margin: 0;
    border-top: none;
}

.story-line-quick-add.story-line-quick-add .setting-item-info {
    flex: 0 0 120px;
    margin-right: 12px;
}

.story-line-quick-add.story-line-quick-add .setting-item-control {
    flex: 1;
    justify-content: flex-start;
}

.story-line-quick-add.story-line-quick-add .setting-item-control input[type="text"],
.story-line-quick-add.story-line-quick-add .setting-item-control select,
.story-line-quick-add.story-line-quick-add .setting-item-control textarea {
    width: 100%;
}

.story-line-quick-add.story-line-quick-add .setting-item-name {
    font-size: 0.9em;
}

.story-line-quick-add.story-line-quick-add .setting-item-description {
    font-size: 0.8em;
    margin-top: 2px;
}

.story-line-quick-add .story-line-act-chapter-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    margin: 4px 0;
}

.story-line-quick-add .story-line-field-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    gap: 8px;
}

.story-line-quick-add .story-line-field-label {
    flex: 0 0 120px;
    font-size: 0.9em;
    font-weight: 500;
}

.story-line-quick-add .story-line-field-group:last-child .story-line-field-label {
    flex: 0 0 60px;
}

.story-line-quick-add .story-line-field-input {
    flex: 1;
}

.story-line-quick-add .story-line-wide-input {
    width: 100%;
    max-width: 100%;
}

.story-line-quick-add.story-line-quick-add .story-line-conflict-section {
    margin-top: 4px;
    padding-top: 4px;
    border-top: none;
}

.story-line-quick-add .story-line-conflict-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.story-line-quick-add .story-line-conflict-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    color: var(--text-muted);
    cursor: pointer;
}

.story-line-quick-add.story-line-quick-add .story-line-button-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: none;
}

.structure-list {
    margin: 8px 0 16px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.structure-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    gap: 8px;
    border-radius: 4px;
}

.structure-row:hover {
    background: var(--background-modifier-hover);
}

.structure-label {
    font-weight: 500;
    flex: 1;
}

.structure-count {
    color: var(--text-muted);
    font-size: 0.85em;
}

.structure-remove {
    opacity: 0.4;
    font-size: 1.1em;
    cursor: pointer;
    padding: 2px 6px;
}

.structure-remove:hover {
    opacity: 1;
    color: var(--text-error);
}

.structure-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 12px;
    text-align: center;
}

.structure-add-row {
    margin-bottom: 16px;
}

.structure-add-row .setting-item {
    border-top: none;
    padding-top: 4px;
}

.structure-input {
    min-width: 120px;
}

/* Inline label editor in structure modal */
.structure-label-input {
    flex: 1;
    padding: 2px 6px;
    font-size: 0.9em;
    border: 1px solid var(--interactive-accent);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    outline: none;
}

.structure-edit {
    opacity: 0.4;
    font-size: 0.85em;
    cursor: pointer;
    padding: 2px 6px;
}

.structure-edit:hover {
    opacity: 1;
    color: var(--interactive-accent);
}

/* Item wrapper groups the row + description together */
.structure-item-wrapper {
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.structure-item-wrapper:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Description textarea in structure modal */
.structure-description {
    display: block;
    width: 100%;
    min-height: 36px;
    max-height: 160px;
    padding: 4px 10px;
    margin-top: 2px;
    font-size: 0.82em;
    line-height: 1.4;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    resize: none;
    overflow: hidden;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.structure-description:focus {
    border-color: var(--interactive-accent);
    background: var(--background-primary);
    color: var(--text-normal);
    outline: none;
}

.structure-description::placeholder {
    color: var(--text-faint);
    font-style: italic;
}

/* ============================================
   Beat Sheet Template Cards
   ============================================ */

/* ?? Beat Sheet Template items (rendered as Setting items ??issue #214) ?? */

/* ?? Beat Sheet List (compact rows) ??kept for any external references ?? */
.beat-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    /* Issue #214: use overflow-y:auto instead of overflow:hidden so the list
       never collapses to zero height on mobile (overflow:hidden with no explicit
       height causes the flex container to be invisible in some WebKit layouts). */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 45vh;
}

.beat-sheet-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--background-modifier-border);
    flex-wrap: wrap;
    transition: background 0.12s ease;
}
.beat-sheet-row:last-child {
    border-bottom: none;
}
.beat-sheet-row:hover {
    background: var(--background-secondary);
}

.beat-sheet-row-text {
    flex: 1;
    min-width: 0;
}

.beat-sheet-row-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.beat-sheet-row-name {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-normal);
}

.beat-sheet-row-info {
    font-size: 0.75em;
    color: var(--text-faint);
    white-space: nowrap;
}

.beat-sheet-row-summary {
    font-size: 0.8em;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}

.beat-sheet-expand-btn {
    font-size: 0.9em;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}
.beat-sheet-expand-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.beat-sheet-row .beat-sheet-beats-preview {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    flex-basis: 100%;
    margin-top: 0;
}

.beat-sheet-row.is-expanded .beat-sheet-beats-preview {
    max-height: 600px;
    margin-top: 6px;
}

.beat-sheet-beat-item {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 2px 0;
    font-size: 0.78em;
    line-height: 1.3;
}

.beat-sheet-beat-act {
    font-family: var(--font-monospace);
    font-size: 0.85em;
    font-weight: 600;
    color: var(--interactive-accent);
    flex-shrink: 0;
    min-width: 22px;
}

.beat-sheet-beat-label {
    font-weight: 500;
    color: var(--text-normal);
    flex-shrink: 0;
}

.beat-sheet-beat-desc {
    color: var(--text-muted);
    font-size: 0.92em;
}

.beat-sheet-apply-btn {
    flex-shrink: 0;
    font-size: 0.8em;
    padding: 3px 10px;
}

.structure-close-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--background-modifier-border);
}

/* ============================================
   Timeline ??Empty entries & selected state
   ============================================ */

.timeline-entry.selected .timeline-card {
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent);
}

.timeline-entry-empty {
    opacity: 0.6;
}

.timeline-card-empty {
    border: 2px dashed var(--background-modifier-border);
    background: transparent;
    cursor: pointer;
    text-align: center;
    padding: 16px;
}

.timeline-card-empty:hover {
    border-color: var(--interactive-accent);
    opacity: 1;
}

.timeline-card-hint {
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 4px 0 0;
}

.timeline-act-add-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s;
}

.timeline-act-divider:hover .timeline-act-add-btn {
    opacity: 1;
}

/* ============================================
   Plot Grid view styles (added)
   ============================================ */

/* Root and layout */
.plot-grid-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
}

.plot-grid-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Concept Grid: main pane shares height with bottom sheet tabs */
.plot-grid-wrapper.concept-grid-main {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.plot-grid-toolbar {
    background: var(--background-primary);
}

.plot-grid-toolbar-left { display:flex; align-items:center; gap:8px; }
.plot-grid-toolbar-actions { display:flex; align-items:center; gap:6px; margin-left:0; }
.plot-grid-open-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.plot-grid-zoom-label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 28px;
    line-height: 28px;
    color: var(--text-normal);
    font-variant-numeric: tabular-nums;
}

/* Plot Grid tools: own row under tabs so they stay left-aligned and do not
   wrap above Stats / Converter / Play-in-Canvas. */
.workspace-leaf-content[data-type="narrative-lab-plotgrid"] .story-line-toolbar-controls,
.story-line-toolbar-controls.is-plotgrid-controls {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.plot-grid-work-area {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    position: relative;
}

.plot-grid-scroll-area {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    position: relative;
}

.plot-grid-canvas {
    position:relative;
    transform-origin: top left;
    box-sizing: border-box;
    background: transparent;
}

/* Univer fills the scroll host via flex; it owns internal scrolling. */
.plot-grid-scroll-area.is-univer-host {
    overflow: hidden !important;
    cursor: default !important;
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

.plot-grid-scroll-area.is-univer-host .plot-grid-univer-canvas,
.plot-grid-scroll-area.is-univer-host .plot-grid-univer-host {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    /* Transforms break OS IME caret geometry (candidate window "flies away"). */
    transform: none !important;
}

/* Classic ribbon + native sheet bar must fill the host, not collapse. */
.plot-grid-scroll-area.is-univer-host .univer-app,
.plot-grid-scroll-area.is-univer-host [class*="univer-workbench"] {
    height: 100%;
    min-height: 0;
}

/* Formula / cell editors need unclipped caret reporting for CJK IME. */
.plot-grid-scroll-area.is-univer-host textarea,
.plot-grid-scroll-area.is-univer-host [contenteditable="true"] {
    transform: none !important;
}

/* Univer keeps previous context flyouts for 500ms. Hide retired siblings so
   they cannot stack. No transition — open/close must be instant. */
[data-u-context-menu-submenu="true"] {
    transition: none !important;
    animation: none !important;
}

[data-u-context-menu-submenu="true"].narrativelab-univer-submenu-retired {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

[data-u-context-menu-submenu="true"].narrativelab-univer-submenu-live {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Sheet-list dropdown: grip on the right so click-to-activate stays on the name. */
[data-slot="dropdown-menu-item"]:has(.narrativelab-sheet-list-handle) {
    gap: 4px;
}

[data-slot="dropdown-menu-item"]:has(.narrativelab-sheet-list-handle) > div {
    flex: 1 1 auto;
    min-width: 0;
}

.narrativelab-sheet-list-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    margin-left: auto;
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    touch-action: none;
    border-radius: 4px;
}

.narrativelab-sheet-list-handle:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.narrativelab-sheet-list-handle:active,
.narrativelab-sheet-list-dragging .narrativelab-sheet-list-handle {
    cursor: grabbing;
}

.narrativelab-sheet-list-handle-grip {
    width: 8px;
    height: 12px;
    background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.25px);
    background-size: 4px 4px;
    background-position: 0 0;
    opacity: 0.85;
}

.narrativelab-sheet-list-dragging {
    opacity: 0.55;
}

[data-slot="dropdown-menu-item"].narrativelab-sheet-list-drop-before {
    box-shadow: inset 0 2px 0 var(--interactive-accent);
}

[data-slot="dropdown-menu-item"].narrativelab-sheet-list-drop-after {
    box-shadow: inset 0 -2px 0 var(--interactive-accent);
}

.plot-grid-univer-loading {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: var(--background-primary);
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    pointer-events: none;
}

.plot-grid-univer-host.is-univer-pending {
    opacity: 0;
    pointer-events: none;
}

.plot-grid-univer-error {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: min(520px, calc(100% - 48px));
    margin: auto;
    padding: 24px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-l);
    background: var(--background-primary);
}

.plot-grid-univer-error h3,
.plot-grid-univer-error p {
    margin: 0;
}

.plot-grid-univer-error code {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--text-muted);
}

.plot-grid-wrapper.is-univer-mode .story-line-filters-container {
    flex: 0 0 auto;
}

/* Concept Grid: Excel-style worksheet tabs along the bottom */
.story-line-board-container:has(> .concept-grid-body),
.plot-grid-root:has(.concept-grid-body) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Inspector is docked in-flex; do not reserve Storyline's 320px gutter. */
    padding-right: 0;
}
.concept-grid-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}
.concept-grid-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
/* Concept Grid cell markdown floating editor (draggable / resizable / always-on-top) */
.plot-grid-cell-editor-window {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Below Obsidian modals / FuzzySuggestModal so note pickers stay usable. */
    z-index: calc(var(--layer-modal, 50) - 6);
    display: flex;
    flex-direction: column;
    min-width: 420px;
    min-height: 260px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: var(--background-primary);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.plot-grid-cell-editor-window.is-always-on-top {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--interactive-accent) 55%, transparent),
        0 14px 44px rgba(0, 0, 0, 0.34);
}
/* Wikilink FuzzySuggestModal must paint above floating cell editors. */
body.nl-wikilink-picker-open .modal-container {
    z-index: 100000 !important;
}
body.nl-wikilink-picker-open .plot-grid-cell-editor-window {
    z-index: 1 !important;
}
.nl-wikilink-suggest-modal {
    z-index: 100001;
}
.plot-grid-cell-editor-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 10px 12px 8px 16px;
    background: var(--background-secondary);
    cursor: grab;
    user-select: none;
}
.plot-grid-cell-editor-titlebar:active {
    cursor: grabbing;
}
.plot-grid-cell-editor-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
.plot-grid-cell-editor-title-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
.plot-grid-cell-editor-pin.is-active {
    color: var(--text-on-accent);
    background: var(--interactive-accent);
}
.plot-grid-cell-editor-title-kicker {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.plot-grid-cell-editor-title-text {
    color: var(--text-normal);
    font-size: var(--h3-size, 1.1em);
    font-weight: var(--h3-weight, 600);
    line-height: 1.15;
}
.plot-grid-cell-editor-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 0 18px 10px;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}
.plot-grid-cell-editor-kicker {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.plot-grid-cell-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 6px 14px;
    overflow-x: auto;
    border-block: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}
.plot-grid-cell-editor-format {
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    padding: 6px 8px;
    border-radius: var(--button-radius, 5px);
}
.plot-grid-cell-editor-separator {
    flex: 0 0 auto;
    width: 1px;
    height: 24px;
    margin: 0 6px;
    background: var(--background-modifier-border);
}
.plot-grid-cell-editor-mode {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 70px;
}
.plot-grid-cell-editor-mode.is-active {
    color: var(--text-on-accent);
    background: var(--interactive-accent);
}
.plot-grid-cell-editor-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 160px;
    overflow: hidden;
    background: var(--background-primary);
}
.plot-grid-cell-editor-input,
.plot-grid-cell-editor-preview {
    width: 100%;
    height: 100%;
    min-height: 160px;
    box-sizing: border-box;
    padding: 20px 24px;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-normal);
    font-family: var(--font-text);
    font-size: var(--font-text-size, 16px);
    line-height: var(--line-height-normal, 1.6);
    resize: none;
    box-shadow: none;
}
.plot-grid-cell-editor-input:focus {
    border: 0;
    box-shadow: inset 0 2px 0 var(--interactive-accent);
    outline: none;
}
.plot-grid-cell-editor-preview {
    max-width: none;
}
.plot-grid-cell-editor-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 16px;
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    overflow: hidden;
}
.plot-grid-cell-editor-links-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    white-space: nowrap;
}
.plot-grid-cell-editor-links-empty {
    flex: 1 1 auto;
    color: var(--text-faint);
    font-size: var(--font-ui-smaller);
}
.plot-grid-cell-editor-links-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.plot-grid-cell-editor-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    max-width: 200px;
    margin: 0;
    padding: 1px 2px 1px 4px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-secondary);
    color: var(--text-normal);
    font-size: var(--font-ui-smaller);
    line-height: 1.4;
    overflow: hidden;
}
.plot-grid-cell-editor-window button.plot-grid-cell-editor-link-chip-open {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 3px 8px;
    border: none;
    box-shadow: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plot-grid-cell-editor-link-chip-open:hover {
    color: var(--text-accent);
}
.plot-grid-cell-editor-link-chip-remove {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
}
.plot-grid-cell-editor-link-chip-remove:hover {
    color: var(--text-error);
}
.plot-grid-cell-editor-links-add {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-muted);
}
.plot-grid-cell-editor-links-add:hover {
    color: var(--text-accent);
}
.plot-grid-cell-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex: 0 0 auto;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}
.plot-grid-cell-editor-footer-hint {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}
.plot-grid-cell-editor-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 2;
}
.plot-grid-cell-editor-resize-handle::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
}

/* Responsive */
@media (max-width: 720px) {
    .plot-grid-cell-editor-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .plot-grid-cell-editor-input,
    .plot-grid-cell-editor-preview {
        padding: 18px;
    }
    .plot-grid-toolbar { gap:6px; padding:6px; }
}

/* Origin label on corkboard sticky notes (from plotgrid auto-note) */
.story-line-corkboard-note-origin {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.5;
    padding: 2px 6px 0;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story-line-corkboard-note-origin-icon {
    display: inline-flex;
    align-items: center;
    width: 12px;
    height: 12px;
}
.story-line-corkboard-note-origin-icon svg {
    width: 12px;
    height: 12px;
}

.story-line-inspector-panel button.mod-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 1px 14px 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background-color: var(--interactive-accent) !important;
    color: var(--text-on-accent, var(--text-on-accent-inverted, #fff)) !important;
    border-color: transparent !important;
}

/* ??? Export Modal ???????????????????????????????????????????? */
.modal.mod-storyline-export {
    max-width: 520px;
    width: 520px;
}

.storyline-export-modal {
    max-width: 100%;
}

.storyline-export-project-name {
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.storyline-export-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Converter modal tabs */
.nl-converter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 8px;
}

.nl-converter-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.nl-converter-tab:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.nl-converter-tab.is-active {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
    font-weight: 600;
}

.nl-converter-body {
    min-height: 120px;
}

.nl-converter-plotline-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-secondary);
}

.nl-converter-plotline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.nl-converter-plotline-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.nl-converter-plotline-toolbar button {
    font-size: 12px;
}

/* ============================================
   Timeline Mode Badges
   ============================================ */

/* Shared badge styling for timeline mode indicators */
.timeline-mode-badge,
.scene-card-timeline-mode {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.3;
    white-space: nowrap;
    margin-top: 2px;
}

.timeline-mode-badge svg,
.scene-card-timeline-mode svg {
    width: 12px;
    height: 12px;
}

/* Scene card variant ??compact, sits below title */
.scene-card-timeline-mode {
    margin: 2px 0 4px 0;
    font-size: 9px;
}

.scene-card-strand,
.timeline-strand-label {
    opacity: 0.75;
    font-weight: 400;
}

/* Arc Point badge (issue #128) */
.scene-card-arc-point-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.3;
    white-space: nowrap;
    margin: 2px 0 4px 0;
    background: var(--sl-arc-point-bg, rgba(255, 152, 0, 0.15));
    color: var(--sl-arc-point-fg, #E65100);
}
.scene-card-arc-point-badge svg {
    width: 12px;
    height: 12px;
}

/* ?? Per-mode colors ?? */
.timeline-mode-flashback {
    background: var(--sl-mode-flashback-bg, rgba(156, 39, 176, 0.15));
    color: var(--sl-mode-flashback-fg, #9C27B0);
}
.timeline-mode-flash_forward {
    background: var(--sl-mode-flashforward-bg, rgba(0, 150, 136, 0.15));
    color: var(--sl-mode-flashforward-fg, #009688);
}
.timeline-mode-parallel {
    background: var(--sl-mode-parallel-bg, rgba(33, 150, 243, 0.15));
    color: var(--sl-mode-parallel-fg, #2196F3);
}
.timeline-mode-frame {
    background: var(--sl-mode-frame-bg, rgba(121, 85, 72, 0.15));
    color: var(--sl-mode-frame-fg, #795548);
}
.timeline-mode-simultaneous {
    background: var(--sl-mode-simultaneous-bg, rgba(255, 152, 0, 0.15));
    color: var(--sl-mode-simultaneous-fg, #FF9800);
}
.timeline-mode-timeskip {
    background: var(--sl-mode-timeskip-bg, rgba(96, 125, 139, 0.15));
    color: var(--sl-mode-timeskip-fg, #607D8B);
}
.timeline-mode-dream {
    background: var(--sl-mode-dream-bg, rgba(103, 58, 183, 0.15));
    color: var(--sl-mode-dream-fg, #673AB7);
}
.timeline-mode-mythic {
    background: var(--sl-mode-mythic-bg, rgba(255, 193, 7, 0.15));
    color: var(--sl-mode-mythic-fg, #F9A825);
}
.timeline-mode-circular {
    background: var(--sl-mode-circular-bg, rgba(233, 30, 99, 0.15));
    color: var(--sl-mode-circular-fg, #E91E63);
}

/* ?? Dark theme adjustments ?? */
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-flashback,
body.narrative-lab-theme-dark .timeline-mode-flashback {
    background: rgba(186, 104, 200, 0.18);
    color: #CE93D8;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-flash_forward,
body.narrative-lab-theme-dark .timeline-mode-flash_forward {
    background: rgba(77, 182, 172, 0.18);
    color: #80CBC4;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-parallel,
body.narrative-lab-theme-dark .timeline-mode-parallel {
    background: rgba(100, 181, 246, 0.18);
    color: #90CAF9;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-frame,
body.narrative-lab-theme-dark .timeline-mode-frame {
    background: rgba(161, 136, 127, 0.18);
    color: #BCAAA4;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-simultaneous,
body.narrative-lab-theme-dark .timeline-mode-simultaneous {
    background: rgba(255, 183, 77, 0.18);
    color: #FFB74D;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-timeskip,
body.narrative-lab-theme-dark .timeline-mode-timeskip {
    background: rgba(144, 164, 174, 0.18);
    color: #B0BEC5;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-dream,
body.narrative-lab-theme-dark .timeline-mode-dream {
    background: rgba(149, 117, 205, 0.18);
    color: #B39DDB;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-mythic,
body.narrative-lab-theme-dark .timeline-mode-mythic {
    background: rgba(255, 213, 79, 0.18);
    color: #FFD54F;
}
body.theme-dark:not(.narrative-lab-theme-light) .timeline-mode-circular,
body.narrative-lab-theme-dark .timeline-mode-circular {
    background: rgba(240, 98, 146, 0.18);
    color: #F48FB1;
}

/* ?? Time Edit Modal ?? */
.time-edit-mode-section {
    margin-top: 4px;
    border-top: 1px solid var(--background-modifier-border);
    padding-top: 8px;
}

/* ????????????????????????????????????????????????????????
   Detected Links (Inspector)
   ????????????????????????????????????????????????????????*/

.inspector-detected-links {
    border-top: 1px dashed var(--background-modifier-border);
    padding-top: 6px;
}

.inspector-detected-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.82em;
}

.inspector-detected-header svg {
    width: 14px;
    height: 14px;
}

.inspector-detected-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.inspector-detected-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78em;
    border: 1px dashed var(--background-modifier-border);
    background: var(--background-secondary);
    cursor: context-menu;
}
.inspector-detected-pill.is-assignable {
    cursor: pointer;
}
.inspector-detected-pill.is-assignable:hover {
    background: var(--background-modifier-hover);
}

.inspector-detected-icon svg {
    width: 12px;
    height: 12px;
}

.detected-type-character {
    border-color: var(--sl-sg-character, #2196F3);
    color: var(--sl-sg-character, #2196F3);
}

.detected-type-location {
    border-color: var(--sl-sg-location, #4CAF50);
    color: var(--sl-sg-location, #4CAF50);
}

.detected-type-codex {
    border-color: var(--sl-sg-codex, #0EA5E9);
    color: var(--sl-sg-codex, #0EA5E9);
}

.detected-type-other {
    border-color: var(--sl-sg-other, #FF9800);
    color: var(--sl-sg-other, #FF9800);
}

.detected-type-prop {
    border-color: var(--sl-sg-prop, #E91E63);
    color: var(--sl-sg-prop, #E91E63);
}

/* Manual tag-type override indicator — subtle underline dot */
.tag-overridden {
    position: relative;
}
.tag-overridden::after {
    content: '●';
    position: absolute;
    bottom: -2px;
    right: 2px;
    font-size: 10px;
    line-height: 1;
    opacity: 0.7;
}

.character-prop-tag.tag-overridden {
    cursor: context-menu;
}
.inspector-detected-pill.tag-overridden {
    cursor: context-menu;
}

/* Note: base `cursor: context-menu` is already set on `.character-prop-tag`
   (line ~3114) and `.inspector-detected-pill` (line ~6837); duplicate
   rules previously here were removed to silence stylelint warnings. */

/* ????????????????????????????????????????????????????????
   Scene Card ??Detected Badge
   ????????????????????????????????????????????????????????*/

.scene-card-detected-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    margin-top: 4px;
    border-radius: 10px;
    font-size: 0.72em;
    color: var(--text-muted);
    background: var(--background-modifier-hover);
    border: 1px dashed var(--background-modifier-border);
}

.scene-card-detected-badge svg {
    width: 11px;
    height: 11px;
}

/* ????????????????????????????????????????????????????????
   Scene Card ??Custom (universal) field badges
   ????????????????????????????????????????????????????????*/

.scene-card-custom-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.scene-card-custom-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.72em;
    color: var(--text-normal);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scene-card-custom-badge-label {
    color: var(--text-muted);
    font-weight: 500;
}

/* ????????????????????????????????????????????????????????
   Story Graph
   ????????????????????????????????????????????????????????*/

.story-graph-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

.library-story-graph-host {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.story-graph-page.is-story-graph-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 10px 14px 12px;
    background: var(--background-primary);
    overflow: hidden;
}

.story-graph-page.is-story-graph-fullscreen > .story-graph-title,
.story-graph-page.is-story-graph-fullscreen > .story-graph-description {
    display: none;
}

.story-graph-page.is-story-graph-fullscreen .story-graph-container,
.story-graph-container.is-fullscreen {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.story-graph-page.is-story-graph-fullscreen .story-graph-wrapper {
    min-height: 0;
    flex: 1 1 auto;
}

.story-graph-page > .story-graph-title {
    margin: 0 0 2px;
    padding: 0;
    line-height: 1.25;
    font-size: 1.15em;
}

.story-graph-page > .story-graph-description.setting-item-description,
.story-graph-page > .story-graph-description {
    margin: 0 0 6px;
    padding: 0;
    line-height: 1.35;
}

.story-graph-container {
    width: 100%;
    min-height: 420px;
    height: calc(100vh - 170px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.story-graph-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.story-graph-empty .story-graph-reset-filters {
    margin-top: 14px;
}

.story-graph-filters {
    display: flex;
    gap: 4px;
    padding: 0 0 4px;
    flex-wrap: wrap;
    align-items: center;
}

.story-graph-filter-tools {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 0;
}

.story-graph-size-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    font-size: 0.78em;
    color: var(--text-muted);
}

.story-graph-size-control input[type="range"] {
    width: 88px;
}

.story-graph-node-avatar-ring {
    pointer-events: none;
}

.story-graph-node-label-outer {
    paint-order: stroke;
    stroke: var(--background-primary);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.story-graph-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.82em;
    cursor: pointer;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.story-graph-filter-btn.active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.story-graph-filter-btn svg {
    width: 14px;
    height: 14px;
}

.story-graph-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 4px;
    font-size: 0.78em;
    color: var(--text-muted);
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
}

.story-graph-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.story-graph-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.story-graph-legend-item.is-interactive,
.story-graph-legend-item.is-add {
    margin: 0;
    padding: 2px 8px 2px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    line-height: 1.35;
}

.story-graph-legend-item.is-interactive:hover,
.story-graph-legend-item.is-add:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border);
    color: var(--text-normal);
}

.story-graph-legend-item.is-focused {
    background: color-mix(in srgb, var(--interactive-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--interactive-accent) 55%, transparent);
    color: var(--text-normal);
}

.story-graph-legend-item.is-add {
    color: var(--text-muted);
    border-style: dashed;
    border-color: var(--background-modifier-border);
    flex-shrink: 0;
    pointer-events: auto;
    position: relative;
    z-index: 6;
}

.story-graph-legend-add-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
}

.story-graph-legend-add-icon svg {
    width: 12px;
    height: 12px;
}

.story-graph-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.story-graph-wrapper {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 450px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--background-primary);
    overscroll-behavior: none;
}

.story-graph-filter-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
    pointer-events: none;
}

.story-graph-svg {
    display: block;
    touch-action: none;
    overscroll-behavior: none;
}
.story-graph-edge-label {
    paint-order: stroke;
    stroke: var(--background-primary);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Focus-style rim ports + filled arrow tips on the main Story Graph */
.story-graph-edge-port {
    fill: var(--interactive-accent);
    stroke: #fff;
    stroke-width: 1.75;
    filter: drop-shadow(0 1px 2px rgba(20, 30, 50, 0.22));
    pointer-events: none;
}

.story-graph-edge-arrow {
    stroke: none;
    pointer-events: none;
}

.story-graph-node {
    cursor: grab;
    transition: fill-opacity 0.15s;
}

.story-graph-node.story-graph-node:hover {
    fill-opacity: 1;
}

.story-graph-legend-line.story-graph-legend-line {
    background: transparent;
    border-bottom: 3px solid;
    border-radius: 0;
    height: 0;
    width: 14px;
    margin-top: 5px;
}

/* ============================================
   Story Graph — single-edge focus view (P1)
   ============================================ */

.story-graph-container.is-focus-hidden {
    display: none;
}

.story-graph-connect-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
    font-size: 12px;
}

.story-graph-wrapper.is-connecting {
    outline: 1px dashed var(--interactive-accent);
    outline-offset: -2px;
    cursor: crosshair;
}

.story-graph-wrapper.is-connecting .story-graph-node {
    cursor: crosshair;
}

.story-graph-node.is-connect-target {
    filter: brightness(1.15);
    stroke: var(--interactive-accent) !important;
    stroke-width: 3px !important;
}

.story-graph-connect-drag-line {
    pointer-events: none;
}

.story-graph-connect-chooser {
    position: fixed;
    z-index: var(--layer-menu);
    min-width: 180px;
    max-width: 320px;
    padding: var(--size-4-1);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background-color: var(--background-secondary);
    box-shadow: var(--shadow-s);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

.story-graph-connect-chooser-item {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    padding: var(--size-4-1) var(--size-4-2);
    border-radius: var(--radius-s);
    cursor: pointer;
    line-height: var(--line-height-tight);
}

.story-graph-connect-chooser-item:hover {
    background-color: var(--background-modifier-hover);
}

.story-graph-connect-chooser-item.is-disabled,
.story-graph-connect-chooser-item.is-disabled:hover {
    color: var(--text-muted);
    cursor: default;
    background-color: transparent;
}

.story-graph-connect-chooser-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
}

.story-graph-connect-chooser-title {
    min-width: 0;
}

.story-graph-connect-chooser-separator {
    height: 1px;
    margin: var(--size-4-1) 0;
    background-color: var(--background-modifier-border);
}

.story-graph-focus-host {
    position: relative;
    min-height: 560px;
}

.story-graph-focus {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 560px;
}

.story-graph-focus-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.story-graph-focus-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.story-graph-focus-undo,
.story-graph-focus-redo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.story-graph-focus-undo:disabled,
.story-graph-focus-redo:disabled {
    opacity: 0.45;
    cursor: default;
}

.story-graph-filter-btn.story-graph-undo:disabled,
.story-graph-filter-btn.story-graph-redo:disabled {
    opacity: 0.45;
    cursor: default;
}

.story-graph-focus-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.story-graph-focus-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-normal);
}

.story-graph-focus-parent-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Canvas-like sub-board */
.story-graph-focus-stage {
    position: relative;
    flex: 1;
    min-height: 520px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--background-modifier-border) 80%, transparent);
    background-color: #eceef2;
    background-image: radial-gradient(rgba(120, 130, 150, 0.45) 1px, transparent 1px);
    background-size: 18px 18px;
    overflow: hidden;
}

.theme-dark .story-graph-focus-stage {
    background-color: #1e2128;
    background-image: radial-gradient(rgba(160, 170, 190, 0.22) 1px, transparent 1px);
}

.story-graph-focus-stage.is-canvas {
    cursor: default;
}

.story-graph-focus-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
}

.story-graph-focus-edge-label {
    paint-order: stroke;
    stroke: #eceef2;
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
    user-select: none;
}

.story-graph-focus-label-guide {
    fill: none;
    stroke: none;
    pointer-events: none;
}

.theme-dark .story-graph-focus-edge-label {
    stroke: #1e2128;
}

.story-graph-focus-edge-hit {
    cursor: pointer;
}

.story-graph-focus-mid-handle {
    fill: #fff;
    stroke: var(--interactive-accent);
    stroke-width: 2;
    cursor: grab;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.story-graph-focus-edge:hover .story-graph-focus-mid-handle,
.story-graph-focus-mid-handle.is-dragging {
    opacity: 1;
    pointer-events: all;
    filter: drop-shadow(0 1px 3px rgba(20, 30, 50, 0.22));
}

.story-graph-focus-mid-handle:active,
.story-graph-focus-mid-handle.is-dragging {
    cursor: grabbing;
}

.story-graph-focus-rubber {
    stroke: var(--interactive-accent);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    pointer-events: none;
}

.story-graph-focus-nodes {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Position origin = avatar center (name sits below via absolute). */
.story-graph-focus-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
}

.story-graph-focus-node.is-dragging {
    cursor: grabbing;
    z-index: 5;
}

.story-graph-focus-node .story-graph-focus-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 3px solid #fff;
    box-shadow:
        0 1px 2px rgba(20, 30, 50, 0.08),
        0 8px 24px rgba(20, 30, 50, 0.12);
}

.theme-dark .story-graph-focus-node .story-graph-focus-avatar {
    background: var(--background-primary);
    border-color: var(--background-primary);
}

.story-graph-focus-node .story-graph-focus-name {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
}

.story-graph-focus-ports {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.story-graph-focus-port {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 50%;
    background: var(--interactive-accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: crosshair;
    z-index: 3;
    pointer-events: auto;
    /* left/top set in JS to sit on the rim toward the other node */
    transform: translate(-50%, -50%);
}

.story-graph-focus-add-port {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0 !important;
    border: 1px dashed color-mix(in srgb, var(--interactive-accent) 55%, #fff) !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--background-primary) 88%, transparent) !important;
    color: var(--interactive-accent) !important;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.story-graph-focus-add-port svg {
    width: 12px;
    height: 12px;
}

.story-graph-focus-inline-label {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, -50%);
    width: min(220px, 46%);
    height: 30px;
    margin: 0;
    padding: 0 10px !important;
    border: none !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--background-primary) 94%, transparent) !important;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--interactive-accent) 45%, transparent),
        0 6px 18px rgba(20, 30, 50, 0.14) !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-normal);
    text-align: center;
}

/* Excalidraw-style floating canvas toolbar */
.story-graph-focus-canvas-tools {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    pointer-events: none;
}

.story-graph-focus-tool-bar {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--background-primary) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
    box-shadow:
        0 1px 2px rgba(20, 30, 50, 0.06),
        0 8px 24px rgba(20, 30, 50, 0.1);
}

.theme-dark .story-graph-focus-tool-bar {
    background: color-mix(in srgb, var(--background-primary) 92%, transparent);
}

.story-graph-focus-tool-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    padding: 0 8px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-normal) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.story-graph-focus-tool-btn svg {
    width: 18px;
    height: 18px;
}

.story-graph-focus-tool-btn:hover {
    background: color-mix(in srgb, var(--background-modifier-hover) 85%, transparent) !important;
}

.story-graph-focus-tool-btn.is-active,
.story-graph-focus-tool-btn.is-open {
    background: color-mix(in srgb, var(--interactive-accent) 18%, transparent) !important;
    color: var(--interactive-accent) !important;
}

.story-graph-focus-tool-key {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 9px;
    line-height: 1;
    color: var(--text-faint);
    pointer-events: none;
}

.story-graph-focus-tool-btn.is-active .story-graph-focus-tool-key {
    color: color-mix(in srgb, var(--interactive-accent) 70%, var(--text-faint));
}

.story-graph-focus-tool-divider {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: var(--background-modifier-border);
    flex-shrink: 0;
}

.story-graph-focus-strands-menu {
    position: relative;
    display: inline-flex;
}

.story-graph-focus-strands-trigger {
    min-width: auto;
    padding: 0 10px !important;
}

.story-graph-focus-strands-trigger-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.story-graph-focus-strands-chevron {
    display: inline-flex;
    opacity: 0.55;
}

.story-graph-focus-strands-chevron svg {
    width: 14px;
    height: 14px;
}

.story-graph-focus-strands-panel {
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(640px, calc(100vw - 48px));
    max-height: min(320px, 46vh);
    padding: 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--background-primary) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--background-modifier-border) 75%, transparent);
    box-shadow:
        0 2px 6px rgba(20, 30, 50, 0.08),
        0 16px 40px rgba(20, 30, 50, 0.14);
    z-index: 6;
}

.story-graph-focus-strand-search {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 12px !important;
    border: none !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, #e8eaef 90%, transparent) !important;
    box-shadow: none !important;
    font-size: 13px;
}

.theme-dark .story-graph-focus-strand-search {
    background: color-mix(in srgb, var(--background-secondary) 90%, transparent) !important;
}

.story-graph-focus-strand-search:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 35%, transparent) !important;
}

.story-graph-focus-strand-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    max-height: min(220px, 34vh);
    padding: 2px;
    pointer-events: auto;
}

.story-graph-focus-strand-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.story-graph-focus-stage.is-arrow-tool .story-graph-focus-port {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-accent) 28%, transparent);
}

.story-graph-focus-strand-card {
    display: grid;
    grid-template-columns: 148px auto minmax(0, 1fr) 76px 28px 30px;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, #f3f4f7 92%, transparent);
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
}

@media (max-width: 720px) {
    .story-graph-focus-strand-card {
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto;
    }
    .story-graph-focus-strand-preview {
        grid-column: 1 / -1;
    }
    .story-graph-focus-strand-label {
        grid-column: 1 / -1;
    }
}

.theme-dark .story-graph-focus-strand-card {
    background: color-mix(in srgb, var(--background-primary) 92%, transparent);
}

.story-graph-focus-strand-card.is-selected {
    border-color: color-mix(in srgb, var(--interactive-accent) 55%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--interactive-accent) 25%, transparent),
        0 4px 16px rgba(20, 30, 50, 0.08);
}

.story-graph-focus-strand-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

.story-graph-focus-strand-dirs {
    display: inline-flex;
    gap: 4px;
}

.story-graph-focus-dir-btn {
    width: 28px;
    height: 28px;
    min-width: 28px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.story-graph-focus-dir-btn.is-active {
    background: var(--interactive-accent) !important;
    color: var(--text-on-accent) !important;
}

.story-graph-focus-strand-label {
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 12px !important;
    border: none !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, #e8eaef 90%, transparent) !important;
    box-shadow: none !important;
    font-size: 13px;
    color: var(--text-normal);
}

.theme-dark .story-graph-focus-strand-label {
    background: color-mix(in srgb, var(--background-secondary) 90%, transparent) !important;
}

.story-graph-focus-strand-label:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 35%, transparent) !important;
}

.story-graph-focus-strand-style {
    height: 32px;
    min-width: 72px;
    padding: 0 8px !important;
    border: none !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, #e8eaef 90%, transparent) !important;
    box-shadow: none !important;
    font-size: 12px;
    color: var(--text-normal);
}

.theme-dark .story-graph-focus-strand-style {
    background: color-mix(in srgb, var(--background-secondary) 90%, transparent) !important;
}

.story-graph-focus-color-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: #6C7AE0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Native color swatch is clipped off-center in circular masks — hide it and
   paint the wrap background instead; the input only captures clicks. */
.story-graph-focus-color {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.story-graph-focus-strand-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-faint) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.story-graph-focus-strand-remove:hover {
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--background-modifier-hover) 80%, transparent) !important;
}

.story-graph-focus-strand-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.story-graph-focus-add-strand {
    pointer-events: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    font-size: 13px;
    cursor: pointer;
}

.story-graph-focus-add-strand:hover {
    color: var(--text-normal) !important;
    background: color-mix(in srgb, var(--background-primary) 70%, transparent) !important;
}

.story-graph-focus-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-graph-focus-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-graph-focus-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: #6b7a99;
    background: linear-gradient(180deg, #f7f8fb 0%, #e9edf5 100%);
}

.theme-dark .story-graph-focus-avatar-fallback {
    color: var(--text-muted);
    background: var(--background-secondary);
}

.story-graph-focus-name {
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    max-width: 140px;
    color: var(--text-normal);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.theme-dark .story-graph-focus-name {
    text-shadow: none;
}

.story-graph-focus-hint-bar {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--background-primary) 78%, transparent);
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-graph-relation-manager {
    min-width: min(520px, 75vw);
}
.story-graph-relation-manager h4 {
    margin: 16px 0 4px;
    font-size: 13px;
}
.story-graph-entity-color-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 8px;
}
.story-graph-entity-color-row {
    display: grid;
    grid-template-columns: 22px minmax(80px, 1fr) 40px 40px;
    align-items: center;
    gap: 10px;
}
.story-graph-entity-color-header {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    padding-bottom: 2px;
}
.story-graph-entity-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    box-sizing: border-box;
}
.story-graph-entity-color-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.story-graph-entity-color-row input[type="color"] {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.story-graph-relation-category-row.is-character input[type="text"] {
    min-width: 0;
}
.story-graph-relation-category-row.is-character {
    grid-template-columns: 36px minmax(0, 1.2fr) minmax(0, 1fr) auto auto 34px;
}
.story-graph-relation-category-select {
    min-width: 0;
    font-size: 12px;
}
.story-graph-relation-category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}
.story-graph-relation-category-row {
    display: grid;
    grid-template-columns: 38px minmax(120px, 1fr) minmax(96px, auto) 34px;
    align-items: center;
    gap: 8px;
}
.story-graph-relation-category-row.is-default {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    color: var(--text-muted);
}
.story-graph-relation-arrow-select {
    min-width: 96px;
    font-size: 12px;
}
.story-graph-relation-arrow-hint {
    font-size: 12px;
    opacity: 0.85;
}
.story-graph-relation-category-row input[type="color"] {
    width: 36px;
    height: 30px;
    padding: 2px;
}
.story-graph-relation-category-row button {
    padding: 4px;
}

/* ============================================
   Settings — horizontal tabs (Annotation-style)
   ============================================ */
.narrative-lab-settings .nl-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.narrative-lab-settings .nl-settings-tab {
    appearance: none;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    transition: background 0.12s ease, color 0.12s ease;
}
.narrative-lab-settings .nl-settings-tab:hover {
    background: var(--background-modifier-border);
}
.narrative-lab-settings .nl-settings-tab.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent, #fff);
}
.narrative-lab-settings .nl-settings-panel {
    min-width: 0;
}
.narrative-lab-settings .nl-settings-panel .setting-item {
    border-radius: 8px;
    background: var(--background-secondary);
    border: none;
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 8px;
}
.narrative-lab-settings .nl-settings-panel .setting-item-heading {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    margin-top: 12px;
    margin-bottom: 4px;
}

/* ============================================
   Settings — Collapsible Color Section
   ============================================ */
.story-line-color-section {
    margin: 12px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 0;
}
.story-line-color-section > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.story-line-color-section > summary::-webkit-details-marker {
    display: none;
}
.story-line-color-section > summary::before {
    content: '▶';
    font-size: 10px;
    transition: transform 0.15s ease;
}
.story-line-color-section[open] > summary::before {
    transform: rotate(90deg);
}
.story-line-color-section > div {
    padding: 8px 16px 16px;
}

/* Plotline color scheme — compact equal-width card grid */
.sl-scheme-picker {
    margin-top: 2px;
}
.sl-scheme-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 10px 0 6px;
}
.sl-scheme-picker > .sl-scheme-group-label:first-child {
    margin-top: 4px;
}
.sl-scheme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 6px;
    margin-bottom: 8px;
    align-items: stretch;
}
.sl-scheme-grid.is-single {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    max-width: 140px;
}
.sl-scheme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    box-sizing: border-box;
    min-width: 0;
    padding: 10px 10px 9px;
    border: 1.5px solid var(--background-modifier-border);
    border-radius: 6px;
    background: transparent;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sl-scheme-card:hover {
    background: var(--background-modifier-hover);
}
.sl-scheme-card.is-active {
    border-color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}
.sl-scheme-card:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
}
.sl-scheme-card-name {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-scheme-card-hint {
    width: 100%;
    min-height: 2.4em;
    font-size: 9px;
    line-height: 1.2;
    color: var(--text-faint);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.sl-scheme-swatches {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    margin-top: 1px;
}
.sl-scheme-swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sl-scheme-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-top: 2px;
}
.sl-scheme-card-icon svg {
    width: 16px;
    height: 16px;
}

/* DOCX export settings (collapsible, framed) */
.story-line-docx-settings {
    margin: 12px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 0;
}
.story-line-docx-settings > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.story-line-docx-settings > summary::-webkit-details-marker {
    display: none;
}
.story-line-docx-settings > summary::before {
    content: '▶';
    font-size: 10px;
    transition: transform 0.15s ease;
}
.story-line-docx-settings[open] > summary::before {
    transform: rotate(90deg);
}
.story-line-docx-settings > div {
    padding: 4px 14px 14px;
}

/* PDF/import settings (collapsible, framed) */
.story-line-pdf-settings,
.story-line-import-settings {
    margin: 12px 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 0;
}
.story-line-pdf-settings > summary,
.story-line-import-settings > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.story-line-pdf-settings > summary::-webkit-details-marker,
.story-line-import-settings > summary::-webkit-details-marker {
    display: none;
}
.story-line-pdf-settings > summary::before,
.story-line-import-settings > summary::before {
    content: '▶';
    font-size: 10px;
    transition: transform 0.15s ease;
}
.story-line-pdf-settings[open] > summary::before,
.story-line-import-settings[open] > summary::before {
    transform: rotate(90deg);
}
.story-line-pdf-settings > div,
.story-line-import-settings > div {
    padding: 4px 14px 14px;
}

/* ============================================
   Character & Location ??Portrait / Image
   ============================================ */

/* ?? Character Overview Card Portrait ?? */
.character-card-portrait {
    width: var(--sl-character-card-portrait-size, 48px);
    height: var(--sl-character-card-portrait-size, 48px);
    margin: 0 auto 6px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-modifier-hover);
    border: 2px solid var(--background-modifier-border);
    flex-shrink: 0;
}
.character-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.character-portrait-placeholder {
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.character-portrait-placeholder svg {
    width: 24px;
    height: 24px;
}

.character-overview-card .character-role-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin-bottom: 4px;
}

.character-overview-card .character-role-badge {
    margin-bottom: 0;
    font-size: 0.65em;
    padding: 1px 6px;
}

.character-overview-card .character-card-completeness {
    margin-top: 2px;
}

.character-overview-card .character-card-props {
    display: none; /* overview stays compact; full tags live in detail */
}

/* Location archive cards: large rectangular previews (not circles) */
.story-line-location-container .character-overview-grid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
}
.location-overview-card {
    padding: 0 0 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}
.location-overview-card .character-role-badges {
    margin: 8px 10px 0;
    justify-content: center;
}
.location-overview-card .character-card-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: none;
    margin: 8px 0;
    border-radius: 0;
    border: none;
    border-block: 1px solid var(--background-modifier-border);
    background: var(--background-modifier-hover);
}
.location-overview-card .character-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.location-overview-card .character-portrait-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.location-overview-card .character-portrait-placeholder svg {
    width: 36px;
    height: 36px;
}
.location-overview-card h4,
.location-overview-card > p,
.location-overview-card .character-card-snippet,
.location-overview-card .character-card-stats {
    padding: 0 10px;
    box-sizing: border-box;
}
.location-overview-card.is-lite .character-card-portrait {
    max-height: none;
    aspect-ratio: 16 / 10;
}

.character-portrait-change-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.character-detail-hero-portrait:hover .character-portrait-change-label {
    opacity: 1;
}

/* ============================================
   Image Choice Modal
   ============================================ */
.storyline-image-choice-modal h3 {
    margin-bottom: 12px;
}
.image-choice-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.image-choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.image-choice-buttons button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
}
.image-choice-btn-icon {
    display: flex;
    align-items: center;
}
.image-choice-btn-icon svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   Mobile Support (iOS / iPadOS / Android)
   ============================================ */

/*
 * .sl-mobile   ??all mobile devices
 * .sl-phone    ??phone-sized screens
 * .sl-tablet   ??tablet-sized screens (iPad, etc.)
 *
 * Obsidian also provides body.is-mobile, body.is-phone, body.is-tablet
 */

/* ?? Touch-friendly scene cards ?????????????????????? */

.sl-mobile .scene-card {
    min-height: 64px;
    padding: 10px 12px;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
    flex: 0 0 auto;
}

body /* Clamp title on mobile too, in case it's very long */
.sl-mobile.sl-mobile .scene-card-title {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.9em;  /* 3 lines fallback */
}
.sl-phone .scene-card-title {
    line-clamp: 2;
    -webkit-line-clamp: 2;
    max-height: 2.6em;  /* 2 lines fallback */
}

.sl-mobile .scene-card.touch-dragging {
    opacity: 0.4;
    box-shadow: 0 0 0 2px var(--interactive-accent);
}

/* Drop indicators for scene cards (touch drag-and-drop) */
.scene-card.drop-above {
    box-shadow: 0 -3px 0 0 var(--sc-accent, var(--interactive-accent));
    z-index: 2;
}
.scene-card.drop-below {
    box-shadow: 0 3px 0 0 var(--sc-accent, var(--interactive-accent));
    z-index: 2;
}

.sl-touch-ghost {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s ease;
}

/* ?? Board layout: stack columns vertically on phones ?? */

.sl-phone .story-line-board {
    flex-direction: column;
    gap: 12px;
    padding: 8px;
}

.sl-phone .story-line-column {
    min-width: 100%;
    max-width: 100%;
}

.sl-phone .story-line-column-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--background-primary);
    padding: 8px 12px;
}

/* Tablets: allow 3 columns side-by-side */
.sl-tablet .story-line-board {
    flex-wrap: wrap;
}

.sl-tablet .story-line-column {
    min-width: 30%;
    max-width: 32%;
    flex: 1 1 30%;
}

/* ?? Toolbar mobile adjustments ???????????????????? */

.sl-mobile .story-line-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
}

.sl-mobile .story-line-view-switcher {
    flex-wrap: wrap;
    gap: 2px;
}

.sl-mobile .story-line-view-tab {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px;
}

/* Hide tab labels on phones, keep icons */
.sl-phone .view-tab-label {
    display: none;
}

/* ?? Inspector as bottom sheet on mobile ????????????? */

.sl-mobile .story-line-inspector-panel {
    width: 100%;
    max-width: none;
    flex: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 60vh;
    height: auto;
    border-left: none;
    border-top: 2px solid var(--interactive-accent);
    border-radius: 12px 12px 0 0;
    overflow-y: auto;
    z-index: 100;
    background: var(--background-primary);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-overflow-scrolling: touch;
}

/* Drag handle at top of the bottom sheet */
.sl-mobile .inspector-drag-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto;
    background: var(--text-muted);
    border-radius: 2px;
    opacity: 0.4;
}

/* Inspector action buttons: stack vertically, full width */
.sl-mobile .inspector-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.sl-mobile .inspector-actions button {
    width: 100%;
    min-height: 44px;
}

/* ?? Filters on mobile ??????????????????????????????? */

.sl-mobile .story-line-filter-bar {
    flex-wrap: wrap;
    gap: 6px;
}

.sl-mobile .story-line-search {
    max-width: 100%;
    width: 100%;
}

/* ?? Bulk action bar on mobile ??????????????????????? */

.sl-mobile .story-line-bulk-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}

.sl-mobile .bulk-bar-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
}

/* ?? Character view grid: single column on phones ???? */

.sl-phone .character-grid {
    grid-template-columns: 1fr;
}

.sl-tablet .character-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Hide map/story-graph toggle buttons on mobile */
.sl-mobile .character-mode-btn[data-mode="story-graph"],
.sl-mobile .library-mode-toggle {
    display: none;
}

/* ?? Quick Add modal on mobile ??????????????????????? */

.sl-mobile .story-line-quick-add .setting-item {
    flex-direction: column;
    align-items: stretch;
}

.sl-mobile .story-line-quick-add .setting-item-info {
    flex: none;
    margin-right: 0;
    margin-bottom: 4px;
}

/* ?? General mobile touch improvements ??????????????? */

.sl-mobile button,
.sl-mobile select,
.sl-mobile input {
    min-height: 44px;
}

.sl-mobile .dropdown {
    min-height: 44px;
}

/* No extra top padding needed ??Obsidian?s nav bar handles the notch. */

/* Prevent text selection during interactions */
.sl-mobile .story-line-board,
.sl-mobile .story-line-column-body {
    -webkit-user-select: none;
    user-select: none;
}

/* Desktop-only notice shown in views disabled on mobile */
.sl-mobile-unavailable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}

.sl-mobile-unavailable h3 {
    margin-bottom: 8px;
    color: var(--text-normal);
}

.sl-mobile-unavailable p {
    max-width: 300px;
    line-height: 1.5;
}

/* ?? Compact mobile layout: remove empty space ?? */

/* Remove inspector panel padding on mobile (it overlays instead) */
.sl-mobile.story-line-board-container,
.sl-mobile.story-line-timeline-container,
.sl-mobile.story-line-storyline-container,
.sl-mobile.story-line-character-container,
.sl-mobile.story-line-stats-container,
.sl-mobile.story-line-location-container {
    padding-right: 0;
}

/* Compact the title row on mobile */
.sl-mobile .story-line-view-title {
    font-size: 0.95em;
    margin: 0;
}

/* ?? Phone-specific toolbar compaction ?????????????? */

/* Hide the redundant leaf title row on phones ??Obsidian's nav bar already shows the title */
.sl-phone .story-line-title-row {
    display: none;
}

/* Tighter toolbar on phones */
.sl-phone .story-line-toolbar {
    padding: 4px 8px;
    gap: 2px;
}

.sl-phone .story-line-toolbar.sl-two-row-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 36px 32px;
    row-gap: 2px;
    min-height: 78px;
}

.sl-phone .story-line-toolbar.sl-two-row-toolbar > .story-line-view-switcher {
    grid-column: 1;
}

.sl-phone .story-line-toolbar.sl-two-row-toolbar > .story-line-view-actions {
    grid-column: 2;
}

/* Smaller view-switcher tabs on phone */
.sl-phone .story-line-view-tab {
    min-width: 36px;
    min-height: 36px;
    padding: 4px 6px;
}

/* Toolbar controls row: compact single line */
.sl-phone .story-line-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 0.85em;
}

/* Make the "Group by" dropdown smaller on phone */
.sl-phone .story-line-group-control {
    font-size: 0.8em;
}
.sl-phone .story-line-group-control select {
    min-height: 32px;
    padding: 2px 4px;
}

/* Smaller "+ New Scene" button on phone */
.sl-phone .story-line-add-btn {
    font-size: 0.8em;
    padding: 4px 8px;
    min-height: 32px;
    white-space: nowrap;
}

/* Smaller filter bar on mobile */
.sl-mobile .story-line-filters-container {
    padding: 2px 8px;
}

/* Compact filter bar on phone */
.sl-phone .story-line-filter-bar {
    padding: 4px 8px;
    gap: 4px;
}

/* Smaller search box on phone */
.sl-phone .story-line-search {
    padding: 3px 6px;
    font-size: 0.8em;
}

/* Compact sort controls on phone */
.sl-phone .story-line-sort {
    font-size: 0.8em;
    gap: 2px;
}

/* ?? Issue #190: mobile keyboard / overflow fixes ??????? */

/*
 * Use dynamic viewport height units where supported so the layout
 * shrinks when the soft keyboard appears, instead of the keyboard
 * covering the bottom of the content. `dvh` is the live viewport
 * (excluding keyboard); `vh` is the legacy fallback.
 */
@supports (height: 100dvh) {
    .sl-mobile.story-line-board-container,
    .sl-mobile.story-line-timeline-container,
    .sl-mobile.story-line-storyline-container,
    .sl-mobile.story-line-character-container,
    .sl-mobile.story-line-location-container,
    .sl-mobile.story-line-codex-container,
    .sl-mobile.story-line-stats-container,
    .sl-mobile .story-line-main-area,
    .sl-mobile .sl-scene-inspector-sidebar,
    .sl-mobile .sl-inspector-panels,
    .sl-mobile .sl-inspector-panel.is-active {
        height: 100dvh;
        max-height: 100dvh;
    }
    /* But the view containers themselves should fill their leaf, not the
       whole viewport ??cap with min-height so flex children still scroll. */
    .sl-mobile.story-line-board-container,
    .sl-mobile.story-line-timeline-container,
    .sl-mobile.story-line-storyline-container,
    .sl-mobile.story-line-character-container,
    .sl-mobile.story-line-location-container,
    .sl-mobile.story-line-codex-container,
    .sl-mobile.story-line-stats-container {
        height: 100%;
        max-height: 100%;
    }
}

/*
 * Inspector bottom sheet on mobile: cap its height to the dynamic
 * viewport so it never extends behind the keyboard, and make sure its
 * inner content scrolls rather than the sheet growing off-screen.
 */
.sl-mobile .story-line-inspector-panel {
    max-height: 60dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Pad the bottom so the last field clears the keyboard + safe area. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40vh);
    /* But cap total padding so short sheets don't waste space. */
    box-sizing: border-box;
}

/* When a field inside the inspector is focused, the global JS handler
   scrolls it into view; ensure the scroll container is the panel. */
.sl-mobile .story-line-inspector-panel:focus-within {
    scroll-margin-bottom: 45dvh;
}

/*
 * Corkboard note editor textarea: when focused on mobile, ensure it
 * sits above the keyboard. The corkboard camera is panned by JS
 * (panCorkboardToRevealNote); this just keeps the textarea itself
 * scrollable if it grows tall.
 */
.sl-mobile .story-line-corkboard-note-text {
    max-height: 50dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Board view toolbar: on phones the controls row can overrun the
 * screen width, causing horizontal scroll and making the sidebar
 * toggle unreachable. Allow the controls to wrap and the toolbar to
 * scroll vertically instead of overflowing horizontally.
 */
.sl-phone .story-line-toolbar {
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 50dvh;
}

.sl-phone .story-line-toolbar-controls {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
}

/* Keep the view-switcher on its own line on phones so it doesn't
   compete with the controls for width. */
.sl-phone .story-line-view-switcher {
    width: 100%;
    flex: 1 1 100%;
}

/*
 * Timeline view: the swimlane grid can overflow horizontally on
 * phones. Make sure the container scrolls rather than pushing the
 * toolbar off-screen.
 */
.sl-phone .story-line-timeline-container .swimlane-timeline {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Codex / Character / Location detail forms: on phones the side
 * panel stacks below the form. Make sure the form area scrolls
 * independently and the last fields clear the keyboard.
 */
.sl-phone .codex-detail-layout,
.sl-phone .character-detail-layout,
.sl-phone .location-detail-layout {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40dvh;
}

/*
 * Generic: any NarrativeLab scroll container should leave breathing room
 * at the bottom equal to roughly half the viewport, so a focused field
 * near the end of the content can be scrolled above the keyboard.
 */
.sl-mobile .story-line-storyline-content,
.sl-mobile .story-line-codex-container .story-line-main-area,
.sl-mobile .sl-inspector-panel.is-active {
    padding-bottom: 40dvh;
}

/* ============================================================
   Story Navigator — dense binder (aligned gutters / indent)
   ============================================================ */

.sl-navigator {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    font-size: 13px;
    --sl-nav-row-h: 22px;
    --sl-nav-pad-x: 6px;
    /* Compact but still readable project → section → item hierarchy. */
    --sl-nav-indent-step: 8px;
    /* Hierarchy: toggle/folder icons (upper) > leaf row icons > status/plotline dots */
    --sl-nav-toggle-w: 16px;
    --sl-nav-icon-w: 16px;
    --sl-nav-seq-w: 16px;
    --sl-nav-toggle-size: 14px;
    --sl-nav-folder-icon-size: 14px;
    --sl-nav-leaf-icon-size: 12px;
    --sl-nav-leaf-dot-size: 5px;
    --sl-nav-depth: 0;
}

/* Toolbar: search + icon buttons on one row */
.sl-nav-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--background-modifier-border);
    flex-shrink: 0;
}

.sl-nav-search-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    height: 26px;
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    padding: 0 6px;
}

.sl-nav-search-icon {
    flex-shrink: 0;
    color: var(--text-faint);
    display: flex;
    align-items: center;
}
.sl-nav-search-icon svg {
    width: 13px;
    height: 13px;
}

.sl-nav-search {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--text-normal);
    width: 100%;
    padding: 0;
    line-height: 1;
}

.sl-nav-icon-btn {
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    color: var(--text-muted);
    border: none;
    background: transparent;
}
.sl-nav-icon-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.sl-nav-icon-btn svg,
.sl-nav-icon-btn .svg-icon {
    width: 15px;
    height: 15px;
}

/* Plotline filter (nested under active project) */
.sl-nav-plotlines-folder.has-filter .sl-nav-folder-label {
    color: var(--interactive-accent);
}
.sl-nav-plotline-list {
    padding: 0 0 2px;
    max-height: 180px;
    overflow-y: auto;
}
.sl-nav-plotline-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--sl-nav-pad-x);
    padding-left: calc(var(--sl-nav-pad-x) + (var(--sl-nav-depth, 0) * var(--sl-nav-indent-step)));
    min-height: var(--sl-nav-row-h);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    box-sizing: border-box;
}
.sl-nav-plotline-item:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.sl-nav-plotline-item.is-active {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    font-weight: 600;
}
.sl-nav-plotline-item.is-drag-over {
    background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
    box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.sl-nav-plotline-dot {
    flex-shrink: 0;
    width: var(--sl-nav-leaf-dot-size);
    height: var(--sl-nav-leaf-dot-size);
    border-radius: 50%;
}
.sl-nav-plotline-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-nav-plotline-count {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Binder tree */
.sl-nav-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0 4px;
}
.sl-nav-empty {
    padding: 16px 10px;
    text-align: center;
    color: var(--text-faint);
    font-size: 12px;
}

.sl-nav-folder {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--sl-nav-pad-x);
    padding-left: calc(var(--sl-nav-pad-x) + (var(--sl-nav-depth, 0) * var(--sl-nav-indent-step)));
    min-height: var(--sl-nav-row-h);
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    border-radius: 0;
    box-sizing: border-box;
}
.sl-nav-folder:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.sl-nav-project-root {
    color: var(--text-normal);
    font-size: 12.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--background-modifier-border);
    margin-bottom: 1px;
    min-height: 26px;
}
.sl-nav-project-root.is-inactive-project {
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: none;
    margin-bottom: 0;
    opacity: 0.85;
}
.sl-nav-project-root.is-inactive-project:hover {
    color: var(--text-normal);
    opacity: 1;
}
.sl-nav-project-root.is-active-project {
    border-bottom: 1px solid var(--background-modifier-border);
}
.sl-nav-series-root {
    font-weight: 700;
}
.sl-nav-series-root.is-inactive-project {
    font-weight: 500;
}
.sl-nav-series-root .sl-nav-folder-count {
    margin-left: auto;
}
.sl-nav-project-root .sl-nav-project-open {
    margin-left: auto;
}
.sl-nav-project-root .sl-nav-folder-count + .sl-nav-project-open,
.sl-nav-project-root .sl-nav-folder-label + .sl-nav-project-open {
    margin-left: auto;
}

/* Primary binder sections: Notes / Scenes / Research */
.sl-nav-primary-folder {
    font-weight: 600;
    color: var(--text-normal);
    min-height: 24px;
}
.sl-nav-plotlines-folder {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 11px;
}
/* Shared leading gutters. Sequence width is reserved only on scene rows that
   actually display a sequence number; notes/folders do not carry an empty slot. */
.sl-nav-gutter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sl-nav-toggle-w);
    height: var(--sl-nav-toggle-w);
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.9;
}
.sl-nav-gutter-toggle.is-spacer {
    /* Reserve alignment column when the row is not expandable */
    visibility: hidden;
}
.sl-nav-gutter-toggle svg {
    width: var(--sl-nav-toggle-size);
    height: var(--sl-nav-toggle-size);
    stroke-width: 2.25;
}
.sl-nav-gutter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sl-nav-icon-w);
    height: var(--sl-nav-icon-w);
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.85;
}
.sl-nav-gutter-icon.has-icon svg {
    width: var(--sl-nav-folder-icon-size);
    height: var(--sl-nav-folder-icon-size);
}
/* Project root: largest binder icons */
.sl-nav-project-root .sl-nav-gutter-icon.has-icon svg {
    width: 15px;
    height: 15px;
}
/* Primary sections (Notes / Scenes / Research): still above leaf marks */
.sl-nav-primary-folder .sl-nav-gutter-icon.has-icon svg {
    width: var(--sl-nav-folder-icon-size);
    height: var(--sl-nav-folder-icon-size);
}
/* Nested folders / leaf file icons: smaller than section icons */
.sl-nav-folder:not(.sl-nav-project-root):not(.sl-nav-primary-folder) .sl-nav-gutter-icon.has-icon svg,
.sl-nav-row .sl-nav-gutter-icon.has-icon svg {
    width: var(--sl-nav-leaf-icon-size);
    height: var(--sl-nav-leaf-icon-size);
}
.sl-nav-gutter-seq {
    flex-shrink: 0;
    width: var(--sl-nav-seq-w);
    min-width: var(--sl-nav-seq-w);
    font-size: 10px;
    line-height: 1;
    color: var(--text-faint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sl-nav-folder-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-nav-folder-count,
.sl-nav-act-count,
.sl-nav-chapter-count,
.sl-nav-wc {
    flex: 0 0 auto;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
/* Active draft name shown left of the layers picker on Scenes */
.sl-nav-draft-active-label {
    flex: 0 1 auto;
    max-width: 4.5em;
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    color: var(--text-muted);
    opacity: 0.85;
    cursor: pointer;
}
.sl-nav-folder:hover .sl-nav-draft-active-label,
.sl-nav-draft-active-label:hover {
    color: var(--text-normal);
    opacity: 1;
}

.sl-nav-folder-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: var(--text-muted);
    opacity: 0;
    flex-shrink: 0;
}
.sl-nav-folder-action.is-always {
    opacity: 0.55;
}
.sl-nav-folder:hover .sl-nav-folder-action,
.sl-nav-folder-action.is-always:hover {
    opacity: 1;
}
.sl-nav-folder-action:hover {
    background: var(--background-modifier-border);
    color: var(--text-normal);
}
.sl-nav-folder-action svg {
    width: 13px;
    height: 13px;
}
.sl-nav-empty-action {
    display: block;
    margin: 8px auto 0;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    border: 1px solid var(--background-modifier-border);
    border-radius: 5px;
    background: var(--background-primary);
    color: var(--text-normal);
}
.sl-nav-empty-action:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
    color: var(--interactive-accent);
}

/* Act / chapter group headers */
.sl-nav-act-header,
.sl-nav-chapter-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--sl-nav-pad-x);
    padding-left: calc(var(--sl-nav-pad-x) + (var(--sl-nav-depth, 0) * var(--sl-nav-indent-step)));
    min-height: 20px;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
    user-select: none;
    box-sizing: border-box;
}
.sl-nav-act-header:hover,
.sl-nav-chapter-header:hover {
    color: var(--text-muted);
    background: var(--background-modifier-hover);
}
.sl-nav-act-label,
.sl-nav-chapter-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Indent comes from --sl-nav-depth on rows — don't double-shift here */
.sl-nav-chapter-body {
    margin: 0;
    padding: 0;
    border: none;
}
.sl-nav-chapter-body .sl-nav-row {
    margin: 0;
}

/* Scene / note / research rows */
.sl-nav-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 var(--sl-nav-pad-x);
    padding-left: calc(var(--sl-nav-pad-x) + (var(--sl-nav-depth, 0) * var(--sl-nav-indent-step)));
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    min-height: var(--sl-nav-row-h);
    transition: background 0.08s;
    box-sizing: border-box;
}
.sl-nav-row:hover {
    background: var(--background-modifier-hover);
}
.sl-nav-row:active {
    background: var(--background-modifier-active-hover, var(--background-modifier-hover));
}
.sl-nav-row.is-selected {
    background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}
.sl-nav-row.is-selected .sl-nav-title {
    font-weight: 600;
    color: var(--text-normal);
}
.sl-nav-row.is-pinned {
    box-shadow: inset 2px 0 0 var(--interactive-accent);
}
.sl-nav-row[draggable="true"] {
    cursor: grab;
}
.sl-nav-row.is-dragging {
    cursor: grabbing;
    opacity: 0.45;
}
.sl-nav-row.is-drop-before {
    box-shadow: inset 0 2px 0 var(--interactive-accent);
}
.sl-nav-row.is-drop-after {
    box-shadow: inset 0 -2px 0 var(--interactive-accent);
}

.sl-nav-status-dot {
    flex-shrink: 0;
    width: var(--sl-nav-leaf-dot-size);
    height: var(--sl-nav-leaf-dot-size);
    border-radius: 50%;
}
.sl-nav-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-normal);
    font-size: 12px;
    line-height: 1.2;
}
.sl-nav-wc {
    opacity: 0;
}
.sl-nav-row:hover .sl-nav-wc,
.sl-nav-row.is-selected .sl-nav-wc {
    opacity: 0.85;
}

/* Bottom progress */
.sl-nav-bottom {
    flex-shrink: 0;
    padding: 5px 8px 6px;
    border-top: 1px solid var(--background-modifier-border);
}
.sl-nav-progress-bar {
    height: 3px;
    background: var(--background-modifier-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}
.sl-nav-progress-fill {
    height: 100%;
    background: var(--interactive-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}
.sl-nav-progress-label {
    font-size: 10px;
    color: var(--text-faint);
    text-align: center;
}

/* ============================================
   Inline Suggest / Autocomplete
   ============================================ */

/* Dropdown container (appended to document.body, position: fixed) */
.sl-suggest-dropdown {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.sl-suggest-item {
    padding: 6px 12px;
    font-size: 0.88em;
    cursor: pointer;
    color: var(--text-normal);
    /* Allow long hierarchical labels (e.g. "Forest > Old House > Scary Room")
       to wrap instead of being clipped, so sibling locations that share a
       short name under different parents stay distinguishable. A title
       attribute is also set in JS for hover. */
    white-space: normal;
    word-break: break-word;
}

.sl-suggest-item:hover,
.sl-suggest-item.sl-suggest-active {
    background: var(--background-modifier-hover);
}

.sl-suggest-highlight {
    color: var(--interactive-accent);
    font-weight: 600;
}

.sl-suggest-new {
    color: var(--text-muted);
    font-style: italic;
}

/* ?? Tag-Pill Container ?? */
.sl-tag-pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

.sl-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--background-modifier-border);
    color: var(--text-normal);
    line-height: 1.4;
}

.sl-tag-pill-highlighted.sl-tag-pill-highlighted {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.sl-tag-pill-badge {
    font-size: 10px;
    opacity: 0.85;
}

.sl-tag-pill-remove {
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: 0.6;
    margin-left: 1px;
}

.sl-tag-pill-remove:hover {
    opacity: 1;
    color: var(--text-error);
}

.sl-tag-pill-input {
    flex: 1 0 80px;
    min-width: 80px;
    max-width: 200px;
    border: none;
    background: transparent;
    color: var(--text-normal);
    font-size: 12px;
    padding: 2px 4px;
    outline: none;
}

.sl-tag-pill-input::placeholder {
    color: var(--text-faint);
    font-style: italic;
}

/* ?? Autocomplete single-value display ?? */
.sl-autocomplete-container {
    display: inline-flex;
    align-items: center;
    min-width: 120px;
}

.sl-autocomplete-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.85em;
    background: var(--background-modifier-border);
    cursor: pointer;
    transition: background 0.15s;
}

.sl-autocomplete-display:hover {
    background: var(--background-modifier-hover);
}

.sl-autocomplete-value {
    color: var(--text-normal);
}

.sl-autocomplete-clear {
    cursor: pointer;
    font-size: 13px;
    opacity: 0.5;
    line-height: 1;
}

.sl-autocomplete-clear:hover {
    opacity: 1;
    color: var(--text-error);
}

.sl-autocomplete-input {
    width: 100%;
    min-width: 120px;
    max-width: 200px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 0.85em;
    padding: 3px 8px;
    outline: none;
    transition: border-color 0.15s;
}

.sl-autocomplete-input:focus {
    border-color: var(--interactive-accent);
}

/* QuickAdd modal autocomplete containers */
.sl-quickadd-autocomplete {
    min-width: 180px;
}

.sl-quickadd-tagpill {
    min-width: 200px;
    max-width: 320px;
}

/* ????????????????????????????????????????????????????
   CODEX VIEW
   ????????????????????????????????????????????????????*/

.story-line-codex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.story-line-codex-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
}

.story-line-codex-content > .codex-overview-heading,
.story-line-codex-content > h3 {
    margin: 0 0 12px 0;
    font-size: 1.15em;
}

/* Detail editor still needs the content pane to scroll */
.story-line-codex-content:has(> .codex-detail-header) {
    overflow-y: auto;
    display: block;
}
.story-line-codex-content.codex-detail--board,
.story-line-codex-content.codex-detail--vertical {
    display: flex;
    overflow: hidden;
}
.story-line-codex-content:has(> .library-native-base-embed),
.story-line-character-content:has(> .library-native-base-embed),
.story-line-location-content:has(> .library-native-base-embed) {
    display: block;
    overflow-y: auto;
    padding-top: 5px;
}

.codex-list-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Bases-style library browse toolbar */
.library-native-base-embed {
    width: 100%;
    min-width: 0;
}
.library-native-base-embed > .internal-embed,
.library-native-base-embed .markdown-embed {
    width: 100%;
    max-width: none;
    border: 0;
    padding: 0;
}
.library-native-base-embed .markdown-embed-title,
.library-native-base-embed .markdown-embed-link {
    display: none;
}
.library-native-base-embed .markdown-embed-content {
    max-height: none;
    overflow: visible;
}
.library-native-base-loading {
    padding: 16px;
    color: var(--text-muted);
}
.library-native-base-bottom-scroll {
    position: fixed;
    z-index: 20;
    display: none;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--background-primary);
    border-top: 1px solid var(--background-modifier-border);
    scrollbar-width: auto;
}
.library-native-base-bottom-scroll-spacer {
    height: 1px;
}

.library-browse-chrome {
    flex-shrink: 0;
    margin-bottom: 8px;
}
.library-mode-only-chrome {
    margin-bottom: 2px;
}
.library-mode-only-chrome .library-browse-toolbar {
    min-height: 26px;
    margin-bottom: 0;
    flex-wrap: nowrap;
}
.library-mode-only-chrome .character-mode-btn.character-mode-btn {
    min-height: 26px;
    padding: 2px 7px;
}
.library-mode-only-chrome .library-open-native-base {
    width: 26px;
    height: 26px;
    padding: 4px;
}
.library-browse-toolbar {
    gap: 6px;
    justify-content: flex-start;
}
.library-browse-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
.library-browse-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.library-browse-action:hover,
.library-browse-action.is-open {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.library-browse-action.has-filters {
    color: var(--interactive-accent);
}
.library-browse-action-icon,
.library-browse-action-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.library-browse-action-label {
    font-weight: 500;
    line-height: 1;
}
.library-browse-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.library-browse-search-slot {
    margin: 0 0 8px;
}
.library-browse-search-input {
    width: 100%;
    max-width: 420px;
}
.library-browse-chip-host.is-collapsed {
    display: none;
}
.library-browse-toolbar .library-layout-toggle {
    margin-left: 0;
}
.library-browse-mode-actions {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 4px;
    order: -1;
}
.library-browse-mode-actions:empty {
    display: none;
}
.library-browse-mode-actions .library-mode-toggle {
    margin-left: 0;
}
.library-browse-mode-actions .character-mode-btn span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.library-browse-mode-actions .character-mode-btn svg {
    width: 14px;
    height: 14px;
}
.library-browse-actions .codex-book-filter {
    margin-left: 4px;
}

/* Bases-style property chooser */
.library-properties-popover {
    z-index: var(--layer-popover);
    display: flex;
    flex-direction: column;
    width: 300px;
    max-height: min(520px, calc(100vh - 24px));
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
    box-shadow: var(--shadow-l);
    color: var(--text-normal);
}
.library-properties-title {
    padding: 3px 6px 8px;
    font-size: 13px;
    font-weight: 600;
}
.library-properties-search {
    width: 100%;
    height: 30px;
    margin-bottom: 6px;
}
.library-properties-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.library-properties-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 2px 4px;
    border-radius: 5px;
    cursor: pointer;
}
.library-properties-row:hover {
    background: var(--background-modifier-hover);
}
.library-properties-row.is-selected {
    cursor: grab;
}
.library-properties-row.is-drag-over {
    box-shadow: inset 0 2px 0 var(--interactive-accent);
}
.library-properties-check {
    flex: 0 0 auto;
    margin: 0;
}
.library-properties-type-icon,
.library-properties-type-icon svg {
    width: 14px;
    height: 14px;
    color: var(--text-faint);
}
.library-properties-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.library-properties-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}
.library-properties-edit svg {
    width: 14px;
    height: 14px;
}
.library-properties-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px -8px -8px;
    padding: 6px 8px;
    border-top: 1px solid var(--background-modifier-border);
}
.library-properties-footer-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: 30px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-normal);
    box-shadow: none;
    font-size: 13px;
}
.library-properties-footer-btn:hover {
    background: var(--background-modifier-hover);
}
.library-properties-footer-btn svg {
    width: 14px;
    height: 14px;
}

/* Library browse layout toggle (list / cards / table view) */
.library-layout-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    border-radius: 8px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
}
.library-layout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.library-layout-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.library-layout-btn.is-active {
    background: var(--background-modifier-hover);
    color: var(--interactive-accent);
}
.library-layout-btn-icon,
.library-layout-btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.codex-entry-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 8px 0 16px;
}
.codex-entry-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: var(--background-primary);
    cursor: pointer;
    min-height: 120px;
    box-sizing: border-box;
}
.codex-entry-card:hover {
    border-color: var(--interactive-accent);
    background: var(--background-modifier-hover);
}
.codex-entry-card-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    border-radius: 8px;
    background: var(--background-secondary);
    color: var(--text-muted);
    overflow: hidden;
}
.codex-entry-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.codex-entry-card-cover svg {
    width: 28px;
    height: 28px;
}
.codex-entry-card h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.library-base-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    margin: 8px 0 16px;
}
.library-base-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.library-base-table th {
    white-space: nowrap;
}
.library-base-table-header-label {
    vertical-align: middle;
}
.library-base-table-sort {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-faint);
    box-shadow: none;
    vertical-align: middle;
}
.library-base-table-sort:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}
.library-base-table-sort.is-active {
    color: var(--interactive-accent);
}
.library-base-table-sort svg {
    width: 13px;
    height: 13px;
}
.library-base-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 8px 10px;
    background: var(--background-secondary);
    border-bottom: 1px solid var(--background-modifier-border);
    white-space: nowrap;
}
.library-base-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--background-modifier-border);
    vertical-align: middle;
}
.library-base-table tr:hover td {
    background: var(--background-modifier-hover);
}
.library-base-table .library-base-table-name-btn.library-base-table-name-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text-accent);
    cursor: pointer;
    padding: 0;
    min-height: 0;
    height: auto;
    font: inherit;
    text-align: left;
}
.library-base-table .library-base-table-name-btn.library-base-table-name-btn:hover,
.library-base-table .library-base-table-name-btn.library-base-table-name-btn:focus,
.library-base-table .library-base-table-name-btn.library-base-table-name-btn:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-decoration: underline;
}
.library-base-table-input {
    width: 100%;
    min-width: 80px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-normal);
    font: inherit;
    padding: 2px 4px;
    border-radius: 4px;
}
.library-base-table-input:hover,
.library-base-table-input:focus {
    border-color: var(--background-modifier-border);
    background: var(--background-primary);
}
.library-base-table-muted {
    color: var(--text-muted);
}
.library-browse-load-more {
    display: block;
    margin: 8px auto 20px;
}

.codex-entry-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ?? Category tabs ???????????????????????????????????? */

.codex-category-tabs {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 2px;
    padding: 2px 12px 0;
    border-bottom: 1px solid var(--background-modifier-border);
    margin: 0;
    align-items: stretch;
    box-sizing: border-box;
}
.codex-category-tabs .library-story-graph-tab {
    margin-left: 0;
}

/* Divider before the left-aligned category-management group. */
.codex-category-tabs .codex-category-actions {
    margin-left: 8px;
    margin-right: 0;
    padding-left: 8px;
    border-left: 1px solid var(--background-modifier-border);
    display: inline-flex;
    align-items: stretch;
    align-self: stretch;
    flex-shrink: 0;
    gap: 2px;
}
.codex-category-actions .character-mode-btn span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.codex-category-actions .character-mode-btn svg {
    width: 14px;
    height: 14px;
}
.codex-category-actions .library-open-native-base {
    align-self: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}
.codex-category-actions .library-open-native-base svg {
    width: 16px;
    height: 16px;
}

.codex-tab.codex-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 10px;
    margin: 0 0 -1px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
    color: var(--text-muted);
    font-size: 0.82em;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
}
.codex-tab.codex-tab.is-reorderable {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}
.codex-tab.codex-tab.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.codex-tab.codex-tab.is-drag-over-before {
    box-shadow: inset 3px 0 0 var(--interactive-accent);
}
.codex-tab.codex-tab.is-drag-over-after {
    box-shadow: inset -3px 0 0 var(--interactive-accent);
}
.codex-tab.codex-uncategorized-tab {
    margin-left: 0;
    padding-left: 10px;
    border-left: none;
}
.codex-category-actions .character-mode-btn {
    min-height: 30px;
    margin: 0 0 -1px;
}
.codex-tab.codex-tab:hover {
    background: none;
    color: var(--text-normal);
}
.codex-tab.codex-tab.active {
    background: none;
    color: var(--interactive-accent);
    border-bottom-color: var(--interactive-accent);
    font-weight: 600;
}
.codex-tab.codex-tab:focus,
.codex-tab.codex-tab:focus-visible {
    outline: none;
    box-shadow: none;
}
.codex-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    line-height: 0;
}
.codex-tab-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}
.codex-tab-label {
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Pseudo-tabs (Characters / Locations) ??same style as regular tabs */

/* ?? Search + Sort row (shared) ??????????????????????? */

.codex-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.codex-search-input {
    width: 33%;
    min-width: 120px;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 13px;
}

/* Series book filter toggle (CharacterView, LocationView) */
.codex-book-filter {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 999px;
    background: var(--background-primary);
    color: var(--text-muted);
    cursor: pointer;
    margin-left: auto;
}
.codex-book-filter.active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.codex-entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    /* Keep row height stable for VirtualScroller estimates */
    min-height: 32px;
    box-sizing: border-box;
}
.codex-entry-row:hover {
    background: var(--background-modifier-hover);
}

.codex-entry-icon {
    flex-shrink: 0;
    opacity: 0.5;
}
.codex-entry-icon svg { width: 16px; height: 16px; }

.codex-entry-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codex-entry-type-badge {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--background-modifier-border);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

.codex-entry-pct {
    font-size: 11px;
    color: var(--text-faint);
    min-width: 32px;
    text-align: right;
}

/* ?? Empty state ?????????????????????????????????????? */

.codex-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
}
.codex-empty-state p {
    margin: 0 0 16px;
    max-width: 340px;
}

/* ?? Detail view ?????????????????????????????????????? */

.codex-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.codex-back-link.codex-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
}
.codex-back-link svg { width: 18px; height: 18px; }
.codex-back-link.codex-back-link:hover { color: var(--interactive-accent); background: none; }
.codex-detail-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.codex-detail-action-btn.codex-detail-action-btn {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}
.codex-detail-action-btn.codex-detail-action-btn:hover { color: var(--text-normal); background: none; }
.codex-detail-action-btn.codex-detail-action-btn:focus,
.codex-detail-action-btn.codex-detail-action-btn:focus-visible { outline: none; box-shadow: none; }
.codex-detail-action-btn svg { width: 16px; height: 16px; }
.codex-detail-delete-btn:hover { color: var(--text-error); }

.codex-detail-type-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.codex-detail-type-icon svg { width: 14px; height: 14px; }

/* Layout: form + side panel */
.codex-detail-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
.codex-detail-layout--board {
    display: flex;
}
.codex-detail-layout--vertical {
    display: grid;
    grid-template-columns: 1fr 280px;
}
.codex-detail-layout.is-vertical {
    grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 700px) {
    .codex-detail-layout,
    .codex-detail-layout--vertical,
    .codex-detail-layout--board {
        display: flex;
        flex-direction: column;
    }
    .codex-detail-layout--board .codex-detail-side,
    .location-detail-layout--board .location-detail-side {
        width: 100%;
        max-height: none;
        padding-left: 0;
        border-left: none;
    }
}

.codex-detail-form { min-width: 0; flex: 1; }
.codex-detail-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
}

/* ?? Field sections ??????????????????????????????????? */

.codex-section {
    margin-bottom: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    overflow: hidden;
}
.codex-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--background-secondary);
    cursor: pointer;
    user-select: none;
}

/* ============================================
   Scene Card Subtitle
   ============================================ */

.scene-card-subtitle {
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted);
    padding: 0 8px 4px;
    line-height: 1.3;
}

/* Issue #112 ??optional preview text shown under the card title (synopsis or
   first lines of draft). User chooses via Settings ??Scene card preview text. */
.scene-card-preview {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px 6px;
    line-height: 1.35;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ============================================
   Manuscript Scene Subtitle
   ============================================ */

.sl-manuscript-scene-subtitle {
    display: block;
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================
   Inspector Subtitle Input
   ============================================ */

.inspector-subtitle-input {
    margin-top: 4px;
    font-size: 13px;
}

.codex-section-header:hover { background: var(--background-modifier-hover); }
.codex-section-chevron svg,
.codex-section-icon svg { width: 14px; height: 14px; }
.codex-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-normal);
}
.codex-section-body {
    padding: 8px 12px;
}

/* Field rows */
.codex-field-row {
    margin-bottom: 8px;
}
.codex-field-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.codex-field-input,
.codex-field-textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.codex-field-textarea {
    resize: vertical;
    min-height: 48px;
}
.codex-field-input:focus,
.codex-field-textarea:focus {
    border-color: var(--interactive-accent);
    outline: none;
}

/* Issue #223 ??toggle field for boolean codex options (case-sensitive) */
.codex-field-toggle-wrap {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.codex-field-toggle-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Codex universal field rows */
.codex-universal-field-row {
    position: relative;
}
.codex-universal-label-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.codex-universal-label-wrap .codex-field-label {
    margin-bottom: 0;
}
.codex-universal-edit-btn,
.codex-universal-move-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.codex-universal-field-row:hover .codex-universal-edit-btn,
.codex-universal-field-row:hover .codex-universal-move-btn {
    opacity: 0.6;
}
.codex-universal-edit-btn:hover,
.codex-universal-move-btn:hover {
    opacity: 1;
    color: var(--text-accent);
}
.codex-universal-edit-btn:focus,
.codex-universal-move-btn:focus,
.codex-universal-edit-btn:focus-visible,
.codex-universal-move-btn:focus-visible {
    outline: none;
    box-shadow: none;
}
.codex-universal-edit-btn svg {
    width: 14px;
    height: 14px;
}
.codex-universal-move-btn svg {
    width: 14px;
    height: 14px;
}

/* Codex dropdown styling */
.codex-field-input.dropdown {
    appearance: auto;
    cursor: pointer;
}

/* Dark mode: ensure native <select> dropdowns use dark color scheme */
body.theme-dark:not(.narrative-lab-theme-light) .codex-field-input.dropdown,
body.theme-dark:not(.narrative-lab-theme-light) .location-field-input.dropdown,
body.narrative-lab-theme-dark .codex-field-input.dropdown,
body.narrative-lab-theme-dark .location-field-input.dropdown {
    color-scheme: dark;
    background: var(--background-primary);
    color: var(--text-normal);
}

/* Custom-section fields use a two-line layout: the field name and all five
   actions share the heading row, while the editor gets the full row below. */
.profile-custom-field-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.library-browse-native-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.library-open-native-base {
    color: var(--text-muted);
}
.library-open-native-base:hover {
    color: var(--interactive-accent);
}
.profile-custom-field-heading {
    display: flex;
    align-items: center;
    min-width: 0;
}
.profile-custom-field-heading > label {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
.profile-custom-field-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}
.profile-custom-field-control {
    width: 100%;
    min-width: 0;
}
.profile-custom-field-control > .codex-field-input,
.profile-custom-field-control > .character-field-input,
.profile-custom-field-control > .location-field-input,
.profile-custom-field-control > .codex-custom-multi-wrap {
    width: 100%;
    min-width: 0;
}
.profile-custom-field-control > .codex-custom-checkbox {
    width: auto;
}

/* User-created text fields use a textarea so their editing area can be
   enlarged. The exact height is remembered per project in profile layout. */
textarea.nl-resizable-custom-field {
    width: 100%;
    box-sizing: border-box;
    resize: vertical !important;
    overflow-y: auto !important;
    font-family: inherit;
    font-size: 13px;
}

/* Multi-select widget used inside custom-section fields (v1.10.17). Compact
   pills + a free-form text input. Comma-friendly storage on save. */
.codex-custom-multi-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
}
.codex-custom-multi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.codex-custom-multi-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--background-modifier-hover);
    border-radius: 10px;
    font-size: 0.85em;
}
.codex-custom-multi-pill-x {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 600;
}
.codex-custom-multi-pill-x:hover {
    color: var(--text-error);
}
.codex-custom-checkbox {
    /* Use the host view's accent for checked state but otherwise inherit. */
    accent-color: var(--interactive-accent);
    width: auto;
    flex: 0 0 auto;
}

/* Multi-select suggestion dropdown (issue #202) */
.codex-custom-multi-suggest {
    position: absolute;
    z-index: 100;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    box-shadow: var(--sl-shadow-md);
    max-height: 180px;
    overflow-y: auto;
    width: min(280px, 100%);
    margin-top: 2px;
}
.codex-custom-multi-suggest.is-hidden {
    display: none;
}
.codex-custom-multi-suggest-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-normal);
}
.codex-custom-multi-suggest-item:hover {
    background: var(--background-modifier-hover);
}

/* Row-action icons (Edit / Move-up / Move-down / Remove) on custom-section
   fields. The renderer in `components/CustomSectionsRenderer.ts` builds the
   class name from the host view's `cssPrefix`, so the same control is
   `codex-custom-field-remove` on Codex, `character-custom-field-remove` on
   Characters, and `location-custom-field-remove` on Locations. We list all
   three so the rule fires on every view. */
.codex-custom-field-remove,
.character-custom-field-remove,
.location-custom-field-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    /* Tight padding + 14?14 icon to exactly match the built-in field
       chevrons (`.field-move-btn` / `.field-hide-btn`). */
    padding: 0 2px;
    margin-left: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Hover-only visibility, matching the `.field-hide-btn` and
       `.field-move-btn` chevrons on built-in fields. */
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.codex-custom-field-row:hover .codex-custom-field-remove,
.codex-custom-field-row:hover .character-custom-field-remove,
.codex-custom-field-row:hover .location-custom-field-remove,
.character-custom-field-row:hover .codex-custom-field-remove,
.character-custom-field-row:hover .character-custom-field-remove,
.character-custom-field-row:hover .location-custom-field-remove,
.location-custom-field-row:hover .codex-custom-field-remove,
.location-custom-field-row:hover .character-custom-field-remove,
.location-custom-field-row:hover .location-custom-field-remove {
    opacity: 0.6;
}
.codex-custom-field-remove:hover,
.character-custom-field-remove:hover,
.location-custom-field-remove:hover {
    color: var(--text-accent);
    opacity: 1;
}
.codex-custom-field-remove[data-disabled="true"],
.character-custom-field-remove[data-disabled="true"],
.location-custom-field-remove[data-disabled="true"] {
    /* Disabled (first/last) field icons stay hidden by default and only
       fade in to a faint ghost when the row is hovered. */
    opacity: 0;
    cursor: default;
    pointer-events: none;
}
.codex-custom-field-row:hover .codex-custom-field-remove[data-disabled="true"],
.codex-custom-field-row:hover .character-custom-field-remove[data-disabled="true"],
.codex-custom-field-row:hover .location-custom-field-remove[data-disabled="true"],
.character-custom-field-row:hover .codex-custom-field-remove[data-disabled="true"],
.character-custom-field-row:hover .character-custom-field-remove[data-disabled="true"],
.character-custom-field-row:hover .location-custom-field-remove[data-disabled="true"],
.location-custom-field-row:hover .codex-custom-field-remove[data-disabled="true"],
.location-custom-field-row:hover .character-custom-field-remove[data-disabled="true"],
.location-custom-field-row:hover .location-custom-field-remove[data-disabled="true"] {
    opacity: 0.25;
}
/* Force the SVG inside the row buttons to exactly 14?14. `setIcon()` may
   write inline `width`/`height` attributes on the SVG element; we rely
   on the fact that an attribute selector with the parent row class chain
   gives us higher CSS specificity than the inline attributes, while still
   following Obsidian's plugin-style guidelines (no `!important`). */
.codex-custom-field-row .codex-custom-field-remove svg,
.codex-custom-field-row .codex-custom-field-remove .svg-icon,
.codex-custom-field-row .character-custom-field-remove svg,
.codex-custom-field-row .character-custom-field-remove .svg-icon,
.codex-custom-field-row .location-custom-field-remove svg,
.codex-custom-field-row .location-custom-field-remove .svg-icon,
.character-custom-field-row .codex-custom-field-remove svg,
.character-custom-field-row .codex-custom-field-remove .svg-icon,
.character-custom-field-row .character-custom-field-remove svg,
.character-custom-field-row .character-custom-field-remove .svg-icon,
.character-custom-field-row .location-custom-field-remove svg,
.character-custom-field-row .location-custom-field-remove .svg-icon,
.location-custom-field-row .codex-custom-field-remove svg,
.location-custom-field-row .codex-custom-field-remove .svg-icon,
.location-custom-field-row .character-custom-field-remove svg,
.location-custom-field-row .character-custom-field-remove .svg-icon,
.location-custom-field-row .location-custom-field-remove svg,
.location-custom-field-row .location-custom-field-remove .svg-icon {
    width: 14px;
    height: 14px;
}

.codex-add-custom-field-row { margin-top: 6px; }
.codex-add-custom-btn {
    background: none;
    border: 1px dashed var(--background-modifier-border);
    border-radius: 4px;
    padding: 4px 10px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}
.codex-add-custom-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

/* User-defined custom sections (#114) */
.codex-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.codex-section-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    user-select: none;
    /* Hover-only visibility (v1.10.17). The Move-up / Move-down / Rename /
       Delete icons on a custom-section header are hidden by default and
       fade in when the user hovers anywhere on the section, matching the
       behavior of the field-row icons below. */
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.codex-section-custom:hover .codex-section-action-btn,
.character-section-custom:hover .codex-section-action-btn,
.location-section-custom:hover .codex-section-action-btn {
    opacity: 0.6;
}
.character-section-header:hover .builtin-section-actions .codex-section-action-btn,
.location-section-header:hover .builtin-section-actions .codex-section-action-btn,
.codex-section-header:hover .builtin-section-actions .codex-section-action-btn {
    opacity: 0.6;
}
.codex-section-action-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    opacity: 1;
}
.codex-section-action-btn[data-disabled="true"] {
    /* Disabled (boundary) chevrons stay hidden by default and only fade
       in to a faint ghost on section hover. */
    opacity: 0;
    cursor: default;
    pointer-events: none;
}
.codex-section-custom:hover .codex-section-action-btn[data-disabled="true"],
.character-section-custom:hover .codex-section-action-btn[data-disabled="true"],
.location-section-custom:hover .codex-section-action-btn[data-disabled="true"] {
    opacity: 0.25;
}
/* Higher-specificity selector to size the section action icons without
   `!important` ??the parent `.codex-section-actions` class adds the
   specificity needed to beat the inline width/height attributes that
   Obsidian's `setIcon()` writes on the SVG element. */
.codex-section-actions .codex-section-action-btn .svg-icon,
.codex-section-actions .codex-section-action-btn svg {
    width: 14px;
    height: 14px;
}
.codex-blank-profile-hint {
    margin: 8px 0 16px;
}
.codex-blank-profile-name {
    margin-bottom: 8px;
}
.codex-category-custom-section-block {
    margin-bottom: 8px;
}
.codex-category-field-row.is-nested {
    padding-left: 20px;
    opacity: 0.95;
}
.codex-category-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0.75em;
}
.codex-category-section-head h5 {
    margin: 0;
}
.codex-category-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.codex-category-field-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.codex-category-field-add:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.codex-category-field-add svg {
    width: 14px;
    height: 14px;
}
.codex-add-custom-section-row {
    margin-top: 10px;
    margin-bottom: 6px;
}
.codex-add-custom-section-btn {
    background: none;
    border: 1px dashed var(--interactive-accent);
    border-radius: 4px;
    padding: 6px 12px;
    color: var(--interactive-accent);
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}
.codex-add-custom-section-btn:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* ?? Side panel sections ?????????????????????????????? */

.codex-side-section {
    margin-bottom: 16px;
}
.codex-side-section h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-normal);
}

/* Keep free-form notes as the final, flexible right-column section. */
.entity-notes-section {
    order: 100;
    flex: 1 1 280px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--background-primary);
}
.entity-notes-header {
    min-height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    background: var(--background-secondary);
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 30%, var(--background-modifier-border));
}
.entity-notes-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.entity-notes-icon svg {
    width: 15px;
    height: 15px;
}
.entity-notes-header .entity-notes-title {
    min-width: 0;
    margin: 0;
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-normal);
}
.entity-notes-format {
    padding: 2px 6px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 999px;
    color: var(--text-faint);
    background: var(--background-primary);
    font-family: var(--font-monospace);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* Notes textarea (side panel) */
.codex-notes-textarea {
    width: 100%;
    min-height: 240px;
    flex: 1 1 auto;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.6;
    resize: none;
    box-sizing: border-box;
    box-shadow: none;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.codex-notes-textarea::placeholder {
    color: var(--text-faint);
    opacity: 1;
}
.codex-notes-textarea:focus {
    outline: none;
    background: color-mix(in srgb, var(--background-primary) 96%, var(--interactive-accent));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--interactive-accent) 52%, transparent);
}

/* ?? Category manager modal ??????????????????????????? */

.codex-category-manager-modal {
    width: min(760px, calc(100vw - 32px));
    max-width: min(760px, calc(100vw - 32px));
}
.codex-category-manager-modal .modal-content {
    overflow-x: hidden;
    scrollbar-gutter: stable;
}
.codex-category-manager {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline-end: 20px;
    box-sizing: border-box;
}
.codex-category-manager-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0 20px;
}
.codex-category-manager-row {
    display: grid;
    grid-template-columns: 22px 36px minmax(120px, 1fr) auto auto 28px;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
    min-width: 0;
    box-sizing: border-box;
}
.codex-category-manager-header {
    padding-block: 2px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
}
.codex-category-manager-header .codex-category-manager-preset,
.codex-category-manager-header .codex-category-manager-fields-col {
    padding: 0;
    background: transparent;
    color: inherit;
    border: 0;
    font-weight: 600;
}
.codex-category-manager-row input[type="checkbox"] {
    margin: 0;
    justify-self: center;
}
.codex-category-manager-icon-select,
.codex-category-manager-name {
    width: 100%;
    min-width: 0;
}
.codex-category-manager-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.codex-category-manager-icon-select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    justify-self: center;
}
.codex-category-manager-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--text-normal);
    cursor: pointer;
    padding: 0;
}
.codex-category-manager-icon-btn:hover {
    background: var(--background-modifier-hover);
}
.codex-category-manager-icon-btn svg {
    width: 18px;
    height: 18px;
}
.codex-icon-picker-pop {
    position: fixed;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 4px;
    padding: 8px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    box-shadow: var(--shadow-l, 0 8px 24px rgba(0, 0, 0, 0.18));
}
.codex-icon-picker-option {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-normal);
    cursor: pointer;
    padding: 0;
}
.codex-icon-picker-option:hover {
    background: var(--background-modifier-hover);
}
.codex-icon-picker-option.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}
.codex-icon-picker-option svg {
    width: 18px;
    height: 18px;
}
.codex-category-manager-preset {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--background-modifier-hover);
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    white-space: nowrap;
}
.codex-category-manager-preset.is-custom {
    color: var(--interactive-accent);
}
.codex-category-manager-fields {
    white-space: nowrap;
    min-width: 0;
    padding: 2px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-ui-smaller);
}
.codex-category-manager-fields:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}
.codex-category-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.codex-category-delete-btn:hover { color: var(--text-error); }
.codex-category-manager-add {
    padding-top: 8px;
    border-top: 1px solid var(--background-modifier-border);
}
.codex-category-manager-add .setting-item {
    min-width: 0;
}
.codex-category-manager-add .setting-item-control {
    min-width: 0;
    flex: 1 1 auto;
}
.codex-category-manager-add-icon .setting-item-control {
    flex: 0 0 auto;
    justify-content: flex-start;
}
.codex-category-fields-manager {
    min-width: min(520px, 75vw);
}
.codex-category-fields-manager h5 {
    margin: 18px 0 8px;
}
.codex-category-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.codex-category-field-row input[type="checkbox"] {
    margin: 0;
}
.codex-category-field-label {
    flex: 1 1 auto;
    min-width: 0;
}
.codex-category-field-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-s);
}
.codex-category-field-remove:hover {
    color: var(--text-error, var(--color-red));
    background: var(--background-modifier-hover);
}
.codex-category-field-row-removed .codex-category-field-label {
    color: var(--text-muted);
}
.codex-category-field-restore {
    font-size: 0.8em;
}
.codex-category-fields-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}
@media (max-width: 700px) {
    .codex-category-manager-modal {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }
    .codex-category-manager {
        width: 100%;
        padding-inline-end: 14px;
    }
    .codex-category-manager-row {
        grid-template-columns: 18px minmax(100px, 1fr) auto 32px;
    }
    .codex-category-manager-icon-select,
    .codex-category-manager-preset,
    .codex-category-manager-header .codex-category-manager-fields-col {
        display: none;
    }
}

/* ?? Back to Codex navigation button ?????????????????? */

.codex-nav-back {
    padding: 4px 0 0;
}
.codex-nav-back-link.codex-nav-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
    font-size: 13px;
}
.codex-nav-back-link.codex-nav-back-link:hover {
    color: var(--interactive-accent);
    background: none;
}
.codex-nav-back-link svg { width: 18px; height: 18px; }

/* ?? Codex dropdown (ViewSwitcher) ???????????????????? */

.codex-dropdown-chevron {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 6px 2px 6px 4px;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-right: -2px;
}
.codex-dropdown-chevron svg { width: 12px; height: 12px; }

.codex-dropdown-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    animation: codex-dropdown-fade 0.12s ease-out;
}
@keyframes codex-dropdown-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.codex-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    color: var(--text-normal);
    font-size: 13px;
    transition: background 0.1s;
}
.codex-dropdown-item:hover {
    background: var(--background-modifier-hover);
}
.codex-dropdown-item.active {
    color: var(--interactive-accent);
    font-weight: 600;
}
.codex-dropdown-item-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}
.codex-dropdown-item.active .codex-dropdown-item-icon {
    color: var(--interactive-accent);
}
.codex-dropdown-item-icon svg { width: 16px; height: 16px; }

/* ??? Instant JS tooltips (plotgrid toolbar etc.) ??????????? */
.sl-instant-tooltip {
    position: fixed;
    transform: translateX(-50%);
    padding: 3px 8px;
    background: var(--background-secondary);
    color: var(--text-normal);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    border: 1px solid var(--background-modifier-border);
}
.sl-instant-tooltip.is-above {
    transform: translate(-50%, -100%);
}

/* ?? Scene Inspector Sidebar ?? */
.sl-scene-inspector-sidebar .story-line-inspector-panel.sl-sidebar-inspector {
    position: static;
    width: 100%;
    border-left: none;
    box-shadow: none;
    z-index: auto;
}

.sl-scene-inspector-empty {
    padding: 24px 16px;
    color: var(--text-muted);
    text-align: center;
}

/* ????????????????????????????????????????????????????????????
   Manuscript View
   ????????????????????????????????????????????????????????????*/

.story-line-manuscript-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.sl-manuscript-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px 48px 64px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Act divider */
.sl-manuscript-act-divider {
    text-align: center;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--background-modifier-border);
}

.sl-manuscript-act-divider:first-child {
    margin-top: 8px;
}

/* Issue #105 ??when a scene block is immediately followed by an act or chapter
   divider, drop its bottom padding/margin so we don't compound spacing.
    Class is applied by ManuscriptView at render time. */
.sl-manuscript-scene-block.is-before-divider {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.sl-manuscript-act-label {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-normal);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Chapter divider */
.sl-manuscript-chapter-divider {
    text-align: center;
    margin: 32px 0 16px;
}

.sl-manuscript-chapter-label {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-muted);
}

/* Scene block */
.sl-manuscript-scene-block {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.sl-manuscript-scene-block.is-nav-target {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.sl-manuscript-scene-block:last-child {
    border-bottom: none;
}

/* ?? Focus mode ????????????????????????????????????????? */
.sl-focus-btn {
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.sl-focus-btn:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.sl-focus-btn.is-active { color: var(--text-accent); }

/* Hide non-writing UI in focus mode */
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-bar > .story-line-search-wrapper,
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-bar > .story-line-sort,
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-bar > .story-line-filter-toggle,
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-bar > .story-line-filter-spacer,
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-bar > button:not(.sl-focus-btn),
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-bar > .sl-toggle-wrap,
.sl-manuscript-focus.sl-manuscript-focus .story-line-filter-panel,
.sl-manuscript-focus.sl-manuscript-focus .story-line-active-chips,
.sl-manuscript-focus.sl-manuscript-focus .sl-fmt-toolbar,
.sl-manuscript-focus.sl-manuscript-focus .sl-manuscript-footer,
.sl-manuscript-focus.sl-manuscript-focus .sl-manuscript-act-divider,
.sl-manuscript-focus.sl-manuscript-focus .sl-manuscript-chapter-divider,
.sl-manuscript-focus.sl-manuscript-focus .sl-manuscript-scene-header {
    display: none;
}

/* Scene header */
.sl-manuscript-scene-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sl-manuscript-scene-title {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
}

.sl-manuscript-scene-title:hover {
    color: var(--text-accent);
    text-decoration: underline;
}

/* Status badge */
.sl-manuscript-status {
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--background-modifier-hover);
    color: var(--text-muted);
}

.sl-manuscript-status.sl-status-idea       { background: #e8d5f5; color: #6b3fa0; }
.sl-manuscript-status.sl-status-outlined   { background: #d5e8f5; color: #2b6cb0; }
.sl-manuscript-status.sl-status-draft      { background: #fef3cd; color: #856404; }
.sl-manuscript-status.sl-status-written    { background: #d4edda; color: #155724; }
.sl-manuscript-status.sl-status-revised    { background: #cce5ff; color: #004085; }
.sl-manuscript-status.sl-status-final      { background: #d1ecf1; color: #0c5460; }

/* Scene body */
.sl-manuscript-editor-wrap {
    min-height: 3em;
}

.sl-manuscript-loading {
    padding: 24px 0;
    font-size: 0;
    color: transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sl-manuscript-loading::before,
.sl-manuscript-loading::after {
    content: '';
    display: block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--background-modifier-hover) 25%,
        var(--background-modifier-border) 50%,
        var(--background-modifier-hover) 75%
    );
    background-size: 200% 100%;
    animation: sl-skeleton-shimmer 1.5s ease-in-out infinite;
}
.sl-manuscript-loading::before { width: 100%; }
.sl-manuscript-loading::after  { width: 70%; }
@keyframes sl-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ?? Embedded editor chrome removal ?????????????????????? */

/*
 * The splitEl gets an explicit pixel height set via JS (syncHeight).
 * Obsidian's workspace children use position:absolute inside it, so
 * we just need relative positioning on the container and to hide chrome.
 */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Hide the file-name header bar */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .view-header {
    display: none;
}

/* Hide the view-actions / navigation buttons */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .view-actions,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .view-header-nav-buttons {
    display: none;
}

/* Collapse mode: hide the field list on first paint (keep 「属性」 heading).
   Once folded (.sl-fm-ready) or user expands, native toggle wins. */
body.sl-collapse-frontmatter-global .sl-manuscript-embedded-split .metadata-container:not(.is-collapsed):not(.sl-fm-ready) .metadata-content,
body.sl-collapse-frontmatter-global .workspace-leaf-content[data-type^="narrative-lab-"] .metadata-container:not(.is-collapsed):not(.sl-fm-ready) .metadata-content {
    display: none !important;
}

/* Hide frontmatter / properties — gated on Hide mode via body class so
   toggling OFF restores frontmatter inside Manuscript-embedded scenes too. */
body.sl-hide-frontmatter-global .sl-manuscript-embedded-split.sl-manuscript-embedded-split .metadata-container,
body.sl-hide-frontmatter-global .sl-manuscript-embedded-split.sl-manuscript-embedded-split .metadata-properties-container,
body.sl-hide-frontmatter-global .sl-manuscript-embedded-split.sl-manuscript-embedded-split .metadata-properties-heading {
    display: none !important;
}

/* Issue #104 / #110 ??Scoped hide-frontmatter (only when "Hide frontmatter"
   is on AND the markdown leaf is showing a file inside the NarrativeLab root).
   This avoids touching Obsidian's global "Properties in document" editor
   setting. Targets both the Properties UI (.metadata-container) and the raw
   YAML lines shown in Source mode (.HyperMD-frontmatter in CM6). All rules
   are also gated on body.sl-hide-frontmatter-global so toggling the setting
   OFF reliably restores frontmatter even if the per-leaf class lingers. */
body.sl-hide-frontmatter-global .view-content.sl-hide-frontmatter.sl-hide-frontmatter .metadata-container.metadata-container,
body.sl-hide-frontmatter-global .view-content.sl-hide-frontmatter.sl-hide-frontmatter .metadata-properties-container.metadata-properties-container,
body.sl-hide-frontmatter-global .view-content.sl-hide-frontmatter.sl-hide-frontmatter .metadata-properties-heading.metadata-properties-heading,
body.sl-hide-frontmatter-global .view-content.sl-hide-frontmatter.sl-hide-frontmatter .cm-line.HyperMD-frontmatter.HyperMD-frontmatter,
body.sl-hide-frontmatter-global .view-content.sl-hide-frontmatter.sl-hide-frontmatter .markdown-source-view .cm-line.HyperMD-frontmatter.HyperMD-frontmatter {
    display: none;
}

/* Frontmatter inside any NarrativeLab custom view (Board, Manuscript, Scene
   Inspector sidebar, Research, etc.) ??those views have no `view.file`, so
   we can't tag them per-leaf. Use the body-class + view data-type instead. */
body.sl-hide-frontmatter-global .workspace-leaf-content.workspace-leaf-content[data-type^="narrative-lab-"] .metadata-container.metadata-container,
body.sl-hide-frontmatter-global .workspace-leaf-content.workspace-leaf-content[data-type^="narrative-lab-"] .metadata-properties-container.metadata-properties-container,
body.sl-hide-frontmatter-global .workspace-leaf-content.workspace-leaf-content[data-type^="narrative-lab-"] .metadata-properties-heading.metadata-properties-heading,
body.sl-hide-frontmatter-global .workspace-leaf-content.workspace-leaf-content[data-type^="narrative-lab-"] .cm-line.HyperMD-frontmatter.HyperMD-frontmatter {
    display: none;
}

/* Issue #110 ??Manuscript view embeds scene editors via detached splits, so
   the JS toggle in updateFrontmatterVisibility() can't reach them. Gate on the
   body-level `sl-hide-frontmatter-global` class so the setting still
   round-trips: turning Hide Frontmatter OFF removes the class and restores
   frontmatter inside Manuscript-embedded scenes too. */
body.sl-hide-frontmatter-global .sl-manuscript-embedded-split .cm-line.HyperMD-frontmatter {
    display: none !important;
}

/* Remove background from inner containers */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .workspace-tabs,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .workspace-tab-container,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .workspace-leaf,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .workspace-leaf-content,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .view-content,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .markdown-source-view {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* CodeMirror transparent background */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .cm-editor {
    background: transparent;
    border: none;
}

/* Strip CM6 scrollPastEnd padding from .cm-content and remove the
   inner scroller so .cm-scroller.scrollHeight equals real document
   content (without ~70vh of trailing padding).
   !important is required: CM6 injects a per-editor-instance theme rule
   targeting .cm-content with equal specificity that loads after our
   styles.css. Scoped tightly to .sl-manuscript-embedded-split so no
   other editor in Obsidian is affected. */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .cm-scroller {
    overflow: visible !important;
}
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .cm-content {
    padding-bottom: 0 !important;
}
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .cm-sizer {
    padding-bottom: 0 !important;
}

/* Remove view-content padding */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .view-content {
    padding: 0;
}

/* Remove markdown-source-view internal padding */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .markdown-source-view {
    padding: 0;
}
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .markdown-source-view .cm-contentContainer {
    padding-bottom: 0;
}

/* Hide gutters (line numbers etc.) */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .cm-gutters {
    display: none;
}

/* Remove the resize handle between leaves */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .workspace-leaf-resize-handle {
    display: none;
}

/* Remove tab headers if present */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .workspace-tab-header-container {
    display: none;
}

.sl-manuscript-scene-empty {
    font-style: italic;
    color: var(--text-faint);
}

/* Empty state */
.sl-manuscript-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 64px 24px;
    font-size: 1.1em;
}

/* Footer */
.sl-manuscript-footer {
    flex: 0 0 auto;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.8em;
    color: var(--text-muted);
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
}

/* Dark theme adjustments for status badges */
body.theme-dark:not(.narrative-lab-theme-light) .sl-manuscript-status.sl-status-idea,
body.narrative-lab-theme-dark .sl-manuscript-status.sl-status-idea       { background: #3b2552; color: #d4b5f0; }
body.theme-dark:not(.narrative-lab-theme-light) .sl-manuscript-status.sl-status-outlined,
body.narrative-lab-theme-dark .sl-manuscript-status.sl-status-outlined   { background: #1e3a5f; color: #a3c9f0; }
body.theme-dark:not(.narrative-lab-theme-light) .sl-manuscript-status.sl-status-draft,
body.narrative-lab-theme-dark .sl-manuscript-status.sl-status-draft      { background: #4a3d1a; color: #f0d98c; }
body.theme-dark:not(.narrative-lab-theme-light) .sl-manuscript-status.sl-status-written,
body.narrative-lab-theme-dark .sl-manuscript-status.sl-status-written    { background: #1a3d25; color: #8fd4a8; }
body.theme-dark:not(.narrative-lab-theme-light) .sl-manuscript-status.sl-status-revised,
body.narrative-lab-theme-dark .sl-manuscript-status.sl-status-revised    { background: #1a2d4a; color: #8cb3e0; }
body.theme-dark:not(.narrative-lab-theme-light) .sl-manuscript-status.sl-status-final,
body.narrative-lab-theme-dark .sl-manuscript-status.sl-status-final      { background: #1a3a40; color: #80c8d4; }

/* Plain-text mode: hide link/tag decorations */

/* Wiki-links: remove link styling, make them look like normal text */
.sl-manuscript-plain.sl-manuscript-plain .cm-hmd-internal-link,
.sl-manuscript-plain.sl-manuscript-plain .cm-hmd-internal-link .cm-underline,
.sl-manuscript-plain.sl-manuscript-plain .internal-link,
.sl-manuscript-plain.sl-manuscript-plain .cm-link,
.sl-manuscript-plain.sl-manuscript-plain .cm-url,
.sl-manuscript-plain.sl-manuscript-plain a.internal-link,
.sl-manuscript-plain.sl-manuscript-plain .cm-hmd-internal-link.cm-link-alias,
.sl-manuscript-plain.sl-manuscript-plain .cm-hmd-internal-link.cm-link-alias .cm-underline,
.sl-manuscript-plain.sl-manuscript-plain .is-live-preview .internal-link,
.sl-manuscript-plain.sl-manuscript-plain .markdown-rendered .internal-link {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    box-shadow: none;
    cursor: text;
    pointer-events: none;
}

/* Wikilink brackets [[]] ??hide in Live Preview */
.sl-manuscript-plain.sl-manuscript-plain .cm-formatting-link,
.sl-manuscript-plain.sl-manuscript-plain .cm-formatting-link-string {
    display: none;
}

/* Tags: hide the # prefix and remove tag styling */
.sl-manuscript-plain.sl-manuscript-plain .cm-hashtag,
.sl-manuscript-plain.sl-manuscript-plain .cm-tag,
.sl-manuscript-plain.sl-manuscript-plain a.tag {
    color: inherit;
    text-decoration: none;
    background: none;
    cursor: text;
    pointer-events: none;
    padding: 0;
    border: none;
    font-size: inherit;
}

/* Hide the # character in tags (Live Preview renders it as a separate span) */
.sl-manuscript-plain.sl-manuscript-plain .cm-hashtag-begin::first-letter,
.sl-manuscript-plain.sl-manuscript-plain .cm-formatting-hashtag {
    font-size: 0;
}

/* Tags in reading/preview mode */
.sl-manuscript-plain.sl-manuscript-plain a.tag::before {
    content: '';
}
.sl-manuscript-plain.sl-manuscript-plain a.tag {
    font-variant: normal;
}

/* External links: plain text */
.sl-manuscript-plain.sl-manuscript-plain .cm-url {
    display: none;
}
.sl-manuscript-plain.sl-manuscript-plain .external-link {
    color: inherit;
    text-decoration: none;
    background: none;
    cursor: text;
    pointer-events: none;
}

/* ?? Formatting Toolbar ?????????????????????????????????? */

.sl-fmt-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 6px 12px;
    margin: 4px auto;
    width: fit-content;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    flex-wrap: wrap;
    flex: 0 0 auto;
    user-select: none;
}

.sl-fmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    color: var(--text-normal);
    cursor: pointer;
    border-radius: var(--radius-s);
}
.sl-fmt-btn:hover {
    background: var(--background-modifier-hover);
}
.sl-fmt-btn svg {
    width: 20px;
    height: 20px;
}

/* Text-label buttons (H2, H3, Hn) */
.sl-fmt-btn.sl-fmt-text {
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-interface);
    line-height: 1;
}

/* Small triangle indicator for sub-menu triggers */
.sl-fmt-btn.sl-fmt-has-sub::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3.5px solid var(--text-muted);
    margin-left: 1px;
    margin-top: 2px;
}

.sl-fmt-sep {
    width: 1px;
    height: 20px;
    background: var(--background-modifier-border);
    margin: 0 8px;
    flex-shrink: 0;
}

/* Sub-menu wrapper (hover-reveal like Editing Toolbar) */
.sl-fmt-submenu {
    display: inline-flex;
    position: relative;
}

.sl-fmt-subpanel {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 6px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border-hover);
    border-radius: var(--radius-m);
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity 0.15s;
}

.sl-fmt-submenu:hover > .sl-fmt-subpanel {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.2s, opacity 0.2s;
}

/* ?? Manuscript mobile adjustments ??????????????????????? */

/* Phone: tighter padding */
.sl-phone .sl-manuscript-scroll {
    padding: 16px 16px 48px;
}

/* Tablet: moderate padding */
.sl-tablet .sl-manuscript-scroll {
    padding: 20px 32px 48px;
}

/* ?? Issue #195 ??Manuscript cross-scene search & replace ???? */

.sl-manuscript-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    margin: 4px auto;
    width: fit-content;
    max-width: 720px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    flex: 0 0 auto;
}

.sl-manuscript-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sl-manuscript-search-input {
    flex: 1 1 auto;
    min-width: 180px;
    padding: 4px 8px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

.sl-manuscript-search-input:focus {
    border-color: var(--interactive-accent);
    outline: none;
}

.sl-manuscript-search-count {
    flex: 0 0 auto;
    min-width: 70px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

.sl-manuscript-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-normal);
    cursor: pointer;
    border-radius: var(--radius-s);
    background: transparent;
    border: none;
    padding: 0;
}
.sl-manuscript-search-btn:hover {
    background: var(--background-modifier-hover);
}
.sl-manuscript-search-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

.sl-manuscript-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-s);
    background: transparent;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
}
.sl-manuscript-search-toggle:hover {
    background: var(--background-modifier-hover);
}
.sl-manuscript-search-toggle.is-active {
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
}
.sl-manuscript-search-toggle svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

.sl-manuscript-replace-row .sl-manuscript-search-input {
    min-width: 180px;
}

/* Read-only preview fallback (phone) ??normal markdown rendering */
.sl-manuscript-preview {
    line-height: 1.6;
}

/* ?? Referenced By panel ????????????????????????????? */
.character-references-panel,
.location-references-panel,
.codex-references-panel,
.character-linked-aliases-panel {
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    background: var(--background-secondary);
}

.character-references-panel h3,
.location-references-panel h3,
.codex-references-panel h3,
.character-linked-aliases-panel h3 {
    margin: 0 0 8px;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-normal);
}

.reference-group h4 {
    margin: 8px 0 4px;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: capitalize;
}

.reference-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reference-list li {
    padding: 3px 0;
}

.reference-link {
    color: var(--text-accent);
    cursor: pointer;
    font-size: 0.9em;
}

.reference-link:hover {
    text-decoration: underline;
}

/* ?? Linked Aliases panel ???????????????????????????? */
.linked-aliases-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.linked-alias-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.linked-alias-name {
    font-weight: 600;
    color: var(--text-normal);
    font-size: 0.9em;
}

.linked-alias-target {
    color: var(--text-muted);
    font-size: 0.85em;
}

.linked-alias-unlink-btn {
    margin-left: auto;
    font-size: 0.8em;
    padding: 2px 8px;
    height: auto;
    line-height: 1.4;
}

/* ?? Codex stale-entry warning ??????????????????????? */
.codex-stale-warning {
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    background: hsla(40, 90%, 55%, 0.12);
    border-left: 3px solid hsl(40, 90%, 55%);
}

.codex-stale-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9em;
    color: hsl(40, 80%, 40%);
}

body.theme-dark:not(.narrative-lab-theme-light) .codex-stale-header,
body.narrative-lab-theme-dark .codex-stale-header {
    color: hsl(40, 80%, 65%);
}

.codex-stale-header svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.codex-stale-scene-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.codex-stale-scene-list li {
    padding: 2px 0;
}

.codex-stale-scene-list .reference-link {
    font-size: 0.85em;
}

.codex-stale-reviewed-btn {
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    background: var(--interactive-normal);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-normal);
}

.codex-stale-reviewed-btn:hover {
    background: var(--interactive-hover);
}

/* ?? Hide/show built-in fields ??????????????????????? */
.field-hide-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    opacity: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: opacity 0.15s;
    vertical-align: middle;
}

.field-hide-btn svg {
    width: 14px;
    height: 14px;
}

.character-field-row:hover .field-hide-btn,
.codex-field-row:hover .field-hide-btn,
.location-field-row:hover .field-hide-btn {
    opacity: 0.6;
}

.field-hide-btn.field-hide-btn:hover {
    opacity: 1;
    color: var(--text-accent);
}

.field-remove-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    opacity: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: opacity 0.15s;
    vertical-align: middle;
}

.field-remove-btn svg {
    width: 14px;
    height: 14px;
}

.character-field-row:hover .field-remove-btn,
.codex-field-row:hover .field-remove-btn,
.location-field-row:hover .field-remove-btn {
    opacity: 0.6;
}

.field-remove-btn:hover {
    opacity: 1;
    color: var(--text-error, var(--color-red));
}

.removed-fields-toggle {
    margin-top: 8px;
}

.removed-fields-toggle-link {
    font-size: 0.8em;
    color: var(--text-muted);
    cursor: pointer;
}

.removed-fields-container {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.removed-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.removed-field-restore-btn {
    font-size: 0.8em;
}

/* ?? Move-up / move-down chevrons (built-in field rows) ? */
.field-move-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    opacity: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: opacity 0.15s, color 0.15s;
    vertical-align: middle;
}
.field-move-btn svg {
    width: 14px;
    height: 14px;
}
.character-field-row:hover .field-move-btn,
.codex-field-row:hover .field-move-btn,
.location-field-row:hover .field-move-btn {
    opacity: 0.6;
}
.field-move-btn.field-move-btn:hover {
    opacity: 1;
    color: var(--text-accent);
}

/* Unified five-action field toolbar: edit, up, down, hide, remove. */
.profile-field-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    min-width: 14px !important;
    min-height: 14px !important;
    line-height: 14px;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 3px;
    background: none !important;
    color: var(--text-muted);
    vertical-align: middle;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.profile-field-action-btn svg {
    width: 14px !important;
    height: 14px !important;
}

.character-field-row:hover .profile-field-action-btn,
.location-field-row:hover .profile-field-action-btn,
.codex-field-row:hover .profile-field-action-btn {
    opacity: 0.6;
}

.profile-field-action-btn:hover {
    opacity: 1 !important;
    color: var(--text-accent);
}

.profile-field-action-btn.field-remove-btn:hover {
    color: var(--text-error, var(--color-red));
}

.profile-field-action-btn[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.2 !important;
    color: var(--text-faint);
}

.hidden-fields-toggle {
    padding: 4px 0;
    margin-top: 4px;
}

.hidden-fields-toggle-link {
    font-size: 0.85em;
    color: var(--text-muted);
    cursor: pointer;
}

.hidden-fields-toggle-link:hover {
    color: var(--text-accent);
    text-decoration: underline;
}

.hidden-fields-container {
    border-left: 2px solid var(--background-modifier-border);
    padding-left: 8px;
    margin-top: 4px;
    opacity: 0.7;
}

/* ????????????????????????????????????????????
   Research Sidebar
   ????????????????????????????????????????????*/

.sl-research-panel {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    overflow-y: auto;
}

.sl-research-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sl-research-title {
    font-weight: 600;
    font-size: 1.05em;
    flex: 1;
}

.sl-research-question-badge {
    background: var(--text-error);
    color: var(--text-on-accent);
    font-size: 0.75em;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.sl-research-new-btn {
    margin-left: auto;
}

/* Search row */
.sl-research-search-row {
    display: flex;
    gap: 4px;
}

.sl-research-search-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: 0.9em;
}

.sl-research-auto-btn.is-active {
    color: var(--text-accent);
}

/* Tag chips */
.sl-research-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sl-research-tag-chip {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--background-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sl-research-tag-chip:hover {
    background: var(--background-modifier-hover);
}

.sl-research-tag-chip.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Type filter row */
.sl-research-type-row {
    display: flex;
    justify-content: space-evenly;
    padding: 8px 0 10px;
}

.sl-research-type-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sl-research-type-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.sl-research-type-btn.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.sl-research-type-btn .svg-icon {
    width: 14px;
    height: 14px;
}

/* Results */
.sl-research-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sl-research-empty {
    color: var(--text-muted);
    font-size: 0.88em;
    font-style: italic;
    padding: 12px 4px;
    text-align: center;
}

/* Folder groups */
.sl-research-folder-group {
    margin-top: 6px;
}
.sl-research-folder-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.sl-research-folder-header:hover {
    color: var(--text-normal);
}
.sl-research-folder-icon .svg-icon {
    width: 14px;
    height: 14px;
}
.sl-research-folder-count {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--text-faint);
    margin-left: auto;
}
.sl-research-folder-group .sl-research-card {
    margin-left: 10px;
}

/* Card */
.sl-research-card {
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--background-primary);
    transition: border-color 0.15s;
}

.sl-research-card:hover {
    border-color: var(--interactive-accent);
}

.sl-research-card.is-expanded {
    border-color: var(--interactive-accent);
}

.sl-research-card.is-inactive {
    opacity: 0.62;
}

.sl-research-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.sl-research-card-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.sl-research-card-icon .svg-icon {
    width: 16px;
    height: 16px;
}

.sl-research-card-icon.is-resolved {
    color: var(--text-success);
}

.sl-research-card-icon.is-open {
    color: var(--text-error);
}

.sl-research-card-title {
    font-weight: 500;
    font-size: 0.9em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-research-card-inactive-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--background-modifier-border);
    color: var(--text-muted);
    font-size: 0.7em;
}

.sl-research-card-link-icon {
    flex-shrink: 0;
    color: var(--text-accent);
    opacity: 0.7;
}

.sl-research-card-link-icon .svg-icon {
    width: 14px;
    height: 14px;
}

.sl-research-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.sl-research-mini-tag {
    font-size: 0.72em;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--background-secondary);
    color: var(--text-faint);
}

/* Expanded body */
.sl-research-card-body {
    margin-top: 8px;
    font-size: 0.88em;
    line-height: 1.5;
    overflow-y: auto;
    border-top: 1px solid var(--background-modifier-border);
    padding-top: 6px;
}

/* Image preview in research cards */
.sl-research-card-image-preview {
    margin-top: 8px;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    background: var(--background-secondary);
}
.sl-research-image-not-found {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85em;
    padding: 12px;
}
/* Image preview in create/edit modal */
.sl-research-image-preview {
    margin-top: 4px;
    text-align: center;
}

.sl-research-card-source {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 6px;
}

.sl-research-card-source a {
    color: var(--text-accent);
}

/* Action buttons */
.sl-research-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--background-modifier-border);
}

.sl-research-action-btn {
    padding: 3px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-secondary);
    color: var(--text-normal);
    font-size: 0.8em;
    cursor: pointer;
}

.sl-research-action-btn:hover {
    background: var(--background-modifier-hover);
}

.sl-research-action-btn.mod-destructive {
    margin-left: auto;
    color: var(--text-normal);
}

.sl-research-action-btn.mod-destructive:hover {
    background: var(--background-modifier-hover);
}

/* Create modal */
.sl-research-create-modal {
    max-width: 500px;
}

.sl-research-create-modal .setting-item {
    border-top: none;
    padding-top: 6px;
    flex-direction: column;
    align-items: flex-start;
}

.sl-research-create-modal .setting-item-info {
    flex: none;
}

.sl-research-create-modal .setting-item-control {
    width: 100%;
}

.sl-research-create-modal .setting-item-control input[type="text"],
.sl-research-create-modal .setting-item-control textarea {
    width: 100%;
}

.sl-research-type-picker {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sl-research-type-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sl-research-type-pick-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.sl-research-type-pick-btn.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.sl-research-type-pick-btn .svg-icon {
    width: 16px;
    height: 16px;
}

/* Create modal buttons */
.sl-research-modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ?? Manuscript: hide backlinks & outgoing links to avoid gaps ?? */
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .backlink-pane,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .outgoing-link-pane,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .tree-item-self.search-result-file-title,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .search-result-container,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .embedded-backlinks,
.sl-manuscript-embedded-split.sl-manuscript-embedded-split .markdown-preview-sizer > .embedded-backlinks {
    display: none;
}

/* === Issue #72 Tier 2 ??Character role history editor === */
.character-role-history { margin-top: 8px; padding: 8px; border: 1px solid var(--background-modifier-border); border-radius: 6px; background: var(--background-secondary); }
.character-role-history-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.character-role-history-title { font-weight: 600; font-size: 12px; }
.character-role-history-hint { font-size: 11px; color: var(--text-muted); }
.character-role-history-list { display: flex; flex-direction: column; gap: 4px; }
.character-role-history-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr 1fr auto; gap: 4px; align-items: center; }
.character-role-history-input { font-size: 12px; padding: 3px 6px; }
.character-role-history-remove { background: transparent; border: 1px solid var(--background-modifier-border); border-radius: 4px; color: var(--text-muted); cursor: pointer; padding: 2px 8px; }
.character-role-history-remove:hover { color: var(--text-error); border-color: var(--text-error); }
.character-role-history-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px; }
.character-role-history-add { margin-top: 6px; font-size: 12px; padding: 4px 10px; background: var(--interactive-normal); border: 1px solid var(--background-modifier-border); border-radius: 4px; cursor: pointer; }
.character-role-history-add:hover { background: var(--interactive-hover); }



/* -------------------------------------------------------------------
   Kanban Board ??Custom Layout Overrides
   -------------------------------------------------------------------
   Cosmetic refinements scoped to the Kanban column view so they do
   not bleed into Board / Corkboard / Manuscript scene cards.
   Sources: user-provided CSS snippets attached to the relevant issue
   (Columns / Scene Counter / Scene Stage / Scene Badge / Word Count
   / Progress Buttons / Subtitle).
   =================================================================== */

/* -- Columns: translucent grey backgrounds + secondary card surface -- */
.story-line-column-header.story-line-column-header {
    --card-opacity: 0.25;
    --card-brightness: 128;
    background-color: rgba(
        var(--card-brightness),
        var(--card-brightness),
        var(--card-brightness),
        var(--card-opacity)
    );
}

.story-line-column-body.story-line-column-body {
    --card-opacity: 0.15;
    --card-brightness: 128;
    background-color: rgba(
        var(--card-brightness),
        var(--card-brightness),
        var(--card-brightness),
        var(--card-opacity)
    );
}

.story-line-column-add.story-line-column-add {
    --card-opacity: 0.25;
    --card-brightness: 128;
    background-color: rgba(
        var(--card-brightness),
        var(--card-brightness),
        var(--card-brightness),
        var(--card-opacity)
    );
}

.story-line-column-body.story-line-column-body .scene-card {
    background-color: var(--background-secondary);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* -- Scene counter (sequence chip) -- */
.story-line-column-body .scene-card-seq {
    width: auto;
    padding: 1px 5px;
    position: relative;
    left: -4px;
    background-color: rgba(200, 200, 200, 0.5);
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-normal);
    letter-spacing: 0.04em;
}

/* -- Scene stage / status icon -- */
.story-line-column-body .scene-card-status-icon {
    position: relative;
    left: -8px;
    filter: saturate(0.5);
}

.story-line-column-body .scene-card-status-icon svg {
    width: 12px;
    height: 12px;
}

/* -- Detected badge -- */
.story-line-column-body.story-line-column-body .scene-card-detected-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    border: none;
    overflow: hidden;
    opacity: 0.75;
    filter: saturate(1.4);
    line-height: 0;
}

.story-line-column-body.story-line-column-body .scene-card-detected-badge > span:nth-child(1) {
    display: flex;
    align-items: center;
}

.story-line-column-body.story-line-column-body .scene-card-detected-badge > span:nth-child(2) {
    display: inline-block;
    transform: translate(1px, -1px);
    line-height: normal;
}

/* -- Footer / wordcount / progress buttons (anchored top-right) -- */
.story-line-column-body.story-line-column-body .scene-card-footer {
    position: static;
}

.story-line-column-body.story-line-column-body .scene-card-wordcount {
    position: absolute;
    top: 12px;
    right: 8px;
}

.story-line-column-body.story-line-column-body .scene-card-progress {
    position: absolute;
    top: 32px;
    right: 8px;
    bottom: auto;
}

.story-line-column-body.story-line-column-body .scene-card-dot.filled {
    position: relative;
    top: -1.5px;
}

/* -- Subtitle -- */
.story-line-column-body .scene-card-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: -8px;
    margin-right: -12px;
}

/* -- PlotgridView toolbar icon styling (moved from inline <style>) -- */
.plot-grid-toolbar .icon-button,
.plot-grid-toolbar .clickable-icon {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 5px;
    min-width: 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plot-grid-toolbar .icon-button:focus,
.plot-grid-toolbar .clickable-icon:focus {
    outline: none;
    box-shadow: none;
}
.plot-grid-toolbar .icon-button i[data-lucide],
.plot-grid-toolbar .icon-button svg,
.plot-grid-toolbar .clickable-icon i[data-lucide],
.plot-grid-toolbar .clickable-icon svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.plot-grid-toolbar .icon-button:hover,
.plot-grid-toolbar .clickable-icon:hover {
    background-color: var(--background-modifier-hover);
    border-radius: 6px;
}
.plot-grid-toolbar .clickable-icon.is-active {
    color: var(--interactive-accent);
    background-color: color-mix(in srgb, var(--interactive-accent) 16%, transparent);
    border-radius: 6px;
}
.plot-grid-toolbar .icon-button:active i,
.plot-grid-toolbar .icon-button:active svg,
.plot-grid-toolbar .clickable-icon:active i,
.plot-grid-toolbar .clickable-icon:active svg {
    transform: scale(0.96);
}

/* -- ManuscriptView focus mode (CSS variables driven from settings) -- */
/* CSS variables --sl-focus-opacity, --sl-focus-darken-filter, --sl-focus-blur-filter, --sl-focus-bg
    are set programmatically on the body element when focus mode is active. */


/* NarrativeLab focus-mode static rules; values driven from CSS custom properties set in JS. */
.sl-manuscript-focus .story-line-toolbar {
    opacity: var(--sl-focus-toolbar-opacity, 0.25);
    transition: opacity 0.25s ease;
}
body.sl-focus-active-global.sl-focus-has-darken .app-container {
    background-color: var(--sl-focus-bg, transparent);
}
body.sl-focus-active-global .workspace-split.mod-left-split,
body.sl-focus-active-global .workspace-split.mod-right-split,
body.sl-focus-active-global .workspace-ribbon,
body.sl-focus-active-global .mod-root > .workspace-tabs > .workspace-tab-header-container,
body.sl-focus-active-global .titlebar {
    filter: var(--sl-focus-filter, none);
    transition: filter 0.25s ease;
}



/* Flash a workspace tab when a sidebar view is opened / re-focused */
@keyframes sl-tab-flash-pulse {
    0% {
        box-shadow: inset 0 0 0 0 transparent;
        background-color: transparent;
    }
    25%,
    55% {
        box-shadow: inset 0 0 0 1.5px var(--interactive-accent);
        background-color: color-mix(in srgb, var(--interactive-accent) 22%, transparent);
    }
    100% {
        box-shadow: inset 0 0 0 0 transparent;
        background-color: transparent;
    }
}
.workspace-tab-header.sl-tab-flash {
    animation: sl-tab-flash-pulse 0.95s ease;
    border-radius: var(--radius-s, 4px);
}

/* Keep icon-only right-sidebar tabs on one baseline (Tags + Scene Details, etc.) */
.mod-right-split .workspace-tab-header-container .workspace-tab-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.mod-right-split .workspace-tab-header-container .workspace-tab-header-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.mod-right-split .workspace-tab-header-container .workspace-tab-header-inner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* --- Scene Inspector tabs + Info panel (right sidebar) --- */
/* The view marks its Obsidian leaf wrapper with `.sl-scene-inspector-leaf`
    so the leaf content can claim full height. In the right sidedock Obsidian
    does NOT give it `flex:1` by default. */
.workspace-leaf.sl-scene-inspector-leaf > .workspace-leaf-content {
    flex: 9999 1 auto;
    min-height: 0;
    height: 100%;
}
/* Orphan leaf-content siblings (stale DOM from previous sessions for the
   embedded views) steal vertical space. Workspace API confirms they aren't
   real leaves, so it's safe to hide them when they appear alongside us. */
.workspace-leaf.sl-scene-inspector-leaf > .workspace-leaf-content[data-type="narrative-lab-research"],
.workspace-leaf.sl-scene-inspector-leaf > .workspace-leaf-content[data-type="narrative-lab-help"] {
    display: none;
}
.view-content.sl-scene-inspector-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sl-scene-inspector-sidebar {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sl-inspector-panels {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.sl-inspector-panel {
    display: none;
}
.sl-inspector-panel.is-active {
    display: block;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px 10px 32px;
}

/* Info panel layout */
.sl-info-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px;
}
.sl-info-title {
    font-size: var(--font-ui-medium);
    font-weight: 700;
    color: var(--text-normal);
    margin-bottom: 4px;
}
.sl-info-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.sl-info-section-label {
    font-size: var(--font-ui-smaller);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.sl-info-synopsis-textarea {
    width: 100%;
    min-height: 320px;
    resize: vertical;
    font-family: var(--font-text);
    font-size: var(--font-ui-small);
    line-height: 1.4;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--text-normal);
    box-sizing: border-box;
}

/* Issue #200 — placeholder shown in the Notes sidebar view when a scene has
   no notes file yet. Clicking it creates the file lazily (no empty files
   spawned just by opening a scene). */
.sl-notes-placeholder {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}
.sl-notes-placeholder p {
    margin: 0;
    font-style: italic;
}
.sl-notes-create-btn {
    cursor: pointer;
}

.sl-inspector-panel.is-active.sl-inspector-panel-synopsis {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.sl-inspector-panel-synopsis .sl-info-panel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sl-inspector-panel-synopsis .sl-info-title {
    flex: 0 0 auto;
}
.sl-inspector-panel-synopsis .sl-info-section {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sl-inspector-panel-synopsis .sl-info-synopsis-textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    resize: none;
    overflow: auto;
    box-sizing: border-box;
}

/* Standalone Notes sidebar view */
.view-content.sl-notes-view-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sl-notes-view {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 10px 12px;
    box-sizing: border-box;
}

.sl-notes-editor-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
}
.sl-notes-editor-title {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: var(--font-ui-medium);
    color: var(--text-normal);
}
.sl-notes-open-btn {
    flex: 0 0 auto;
    color: var(--text-muted);
    cursor: pointer;
}
.sl-notes-open-btn:hover {
    color: var(--interactive-accent);
}
.sl-notes-editor-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
}
.sl-notes-embedded-split.sl-notes-embedded-split {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}
.sl-notes-embedded-split.sl-notes-embedded-split .workspace-tabs,
.sl-notes-embedded-split.sl-notes-embedded-split .workspace-tab-container,
.sl-notes-embedded-split.sl-notes-embedded-split .workspace-leaf,
.sl-notes-embedded-split.sl-notes-embedded-split .workspace-leaf-content,
.sl-notes-embedded-split.sl-notes-embedded-split .view-content,
.sl-notes-embedded-split.sl-notes-embedded-split .markdown-source-view,
.sl-notes-embedded-split.sl-notes-embedded-split .markdown-reading-view,
.sl-notes-embedded-split.sl-notes-embedded-split .cm-editor {
    height: 100%;
    min-height: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
}
.sl-notes-embedded-split.sl-notes-embedded-split .view-header,
.sl-notes-embedded-split.sl-notes-embedded-split .workspace-tab-header-container,
.sl-notes-embedded-split.sl-notes-embedded-split .workspace-leaf-resize-handle {
    display: none;
}
.sl-notes-embedded-split.sl-notes-embedded-split .view-content {
    padding: 0;
    overflow: hidden;
}
.sl-notes-embedded-split.sl-notes-embedded-split .markdown-source-view .cm-scroller.cm-scroller,
.sl-notes-embedded-split.sl-notes-embedded-split .markdown-reading-view .cm-scroller.cm-scroller,
.sl-notes-embedded-split.sl-notes-embedded-split .cm-editor .cm-scroller.cm-scroller {
    overflow: auto;
}
.sl-notes-embedded-split.sl-notes-embedded-split .cm-content,
.sl-notes-embedded-split.sl-notes-embedded-split .markdown-preview-sizer {
    min-height: 100%;
}

/* ??? Delete project warning modal ??????????????????????????? */
.sl-delete-warning {
    background: var(--background-modifier-error);
    border: 1px solid var(--text-error);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.sl-delete-warning p {
    margin: 0 0 6px 0;
    color: var(--text-error);
    font-weight: 600;
}

.sl-delete-warning ul {
    margin: 0 0 8px 0;
    padding-left: 20px;
    color: var(--text-normal);
}

.sl-delete-warning li {
    margin: 2px 0;
}

.sl-delete-warning-strong {
    color: var(--text-error) !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
}

/* ??? Series modal: delete-book button ???????????????????????? */
.sl-series-delete:hover {
    color: var(--text-error);
}
.nl-hidden-color-input {
    position: fixed;
    left: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.structure-mode-switcher {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1px;
    padding: 2px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    background: var(--background-secondary);
}

.structure-mode-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 7px;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.84em;
    white-space: nowrap;
}

.structure-mode-button:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.structure-mode-button.active {
    color: var(--text-accent);
    background: var(--background-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.structure-mode-icon,
.structure-mode-icon svg {
    width: 14px;
    height: 14px;
}

/* Floating sticky notes (workspace overlay, Web Novel Assistant–style) */
body.narrativelab-floating-notes-hidden .nl-floating-sticky-note {
    display: none;
}

body .nl-floating-sticky-note {
    position: fixed;
    min-width: 200px;
    min-height: 200px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    z-index: var(--nl-floating-sticky-z, calc(var(--layer-popover, 30) + 4));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: both;
    transition: box-shadow 0.3s ease;
    background-color: var(--note-bg-color-alpha, var(--note-bg-color, transparent));
}

body .nl-floating-sticky-note:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
}

body .nl-floating-sticky-header {
    padding: 8px 12px;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    cursor: grab;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    flex-shrink: 0;
    min-width: 0;
    gap: 10px;
}

body .nl-floating-sticky-note:hover .nl-floating-sticky-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body .nl-floating-sticky-header:active {
    cursor: grabbing;
}

body .nl-floating-sticky-title-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    flex-grow: 1;
    min-width: 0;
}

body .nl-floating-sticky-title-icon {
    display: flex;
    align-items: center;
    color: var(--note-text-color);
    opacity: 0.6;
    flex-shrink: 0;
}

body .nl-floating-sticky-title-icon svg {
    width: 14px;
    height: 14px;
}

body .nl-floating-sticky-title {
    font-weight: bold;
    font-size: 12px;
    color: var(--note-text-color);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

body .nl-floating-sticky-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body .nl-floating-sticky-note:hover .nl-floating-sticky-controls {
    opacity: 1;
    pointer-events: auto;
}

body .nl-floating-sticky-note button.nl-floating-sticky-btn,
body .nl-floating-sticky-note button.nl-floating-sticky-close {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    border: none;
    box-shadow: none !important;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--note-text-color);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, color 0.15s ease;
}

body .nl-floating-sticky-note button.nl-floating-sticky-btn svg,
body .nl-floating-sticky-note button.nl-floating-sticky-close svg {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
}

body .nl-floating-sticky-note button.nl-floating-sticky-btn:hover,
body .nl-floating-sticky-note button.nl-floating-sticky-btn:focus,
body .nl-floating-sticky-note button.nl-floating-sticky-btn:focus-visible,
body .nl-floating-sticky-note button.nl-floating-sticky-btn:active {
    background: rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    opacity: 1;
}

body .nl-floating-sticky-note button.nl-floating-sticky-btn.is-active {
    color: var(--interactive-accent);
    background: rgba(0, 0, 0, 0.06) !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
    opacity: 1;
}

body .nl-floating-sticky-note button.nl-floating-sticky-close:hover,
body .nl-floating-sticky-note button.nl-floating-sticky-close:focus,
body .nl-floating-sticky-note button.nl-floating-sticky-close:active {
    color: var(--text-error, var(--interactive-accent));
    background: color-mix(in srgb, var(--text-error, var(--interactive-accent)) 10%, transparent) !important;
    background-color: color-mix(in srgb, var(--text-error, var(--interactive-accent)) 10%, transparent) !important;
    box-shadow: none !important;
    opacity: 1;
}

body .nl-floating-sticky-palette {
    display: none;
    position: absolute;
    top: 32px;
    right: 25px;
    background-color: color-mix(in srgb, var(--note-bg-color, var(--background-secondary)) 82%, var(--background-secondary));
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: var(--layer-menu, 50);
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

body .nl-floating-sticky-palette.is-active {
    display: grid;
}

body .nl-floating-sticky-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: serif;
    font-size: 13px;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

body .nl-floating-sticky-swatch:hover,
body .nl-floating-sticky-swatch:focus,
body .nl-floating-sticky-swatch:active {
    transform: scale(1.15);
    border-color: rgba(0, 0, 0, 0.5);
    background-image: none;
    box-shadow: none;
}

body .nl-floating-sticky-content {
    padding: 15px;
    overflow-y: auto;
    font-size: calc(0.9em * var(--sticky-zoom, 1));
    flex-grow: 1;
    color: var(--note-text-color);
    padding-bottom: 25px;
    background: transparent !important;
    background-color: transparent !important;
}

body .nl-floating-sticky-content:hover,
body .nl-floating-sticky-content:focus,
body .nl-floating-sticky-content:focus-visible,
body .nl-floating-sticky-content:active {
    background: transparent !important;
    background-color: transparent !important;
}

body .nl-floating-sticky-content.is-hidden {
    display: none;
}

body .nl-floating-sticky-content * {
    color: inherit;
}

body .nl-floating-sticky-textarea {
    flex-grow: 1;
    width: 100%;
    height: calc(100% - 10px);
    resize: none;
    border: none;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--note-text-color);
    font-family: var(--font-text);
    font-size: calc(0.9em * var(--sticky-zoom, 1));
    padding: 15px;
    outline: none;
    box-shadow: none;
    display: none;
    line-height: 1.5;
}

body .nl-floating-sticky-textarea.is-visible {
    display: block;
}

body .nl-floating-sticky-textarea:hover,
body .nl-floating-sticky-textarea:focus,
body .nl-floating-sticky-textarea:focus-visible,
body .nl-floating-sticky-textarea:active {
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

body .nl-floating-sticky-note.is-pinned {
    resize: none;
}

body .nl-floating-sticky-save-location .setting-item-control {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

body .nl-floating-sticky-save-location select {
    min-width: 12em;
    max-width: 100%;
}

body .nl-floating-sticky-save-location input[type="text"] {
    min-width: 14em;
}

/* ── Writing tracker (sidebar panel + ribbon page) ── */

.nl-tracker-panel,
.nl-tracker-page {
    padding: 16px 18px 20px;
    overflow: auto;
    text-align: center;
    min-width: 0;
    box-sizing: border-box;
    container: writing-tracker / inline-size;
}

.nl-tracker-page {
    padding: 28px 32px 40px;
    max-width: 880px;
    margin: 0 auto;
}

.nl-tracker-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 16px;
    max-width: 240px;
}

.nl-tracker-tab {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}

.nl-tracker-tab.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: transparent;
}

.nl-tracker-panel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: calc(100% - 40px);
    min-width: 0;
}

.nl-tracker-project-context {
    width: 100%;
    margin: -4px 0 0;
    text-align: center;
}

.nl-tracker-project-name {
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.nl-tracker-project-status {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.nl-tracker-project-status.is-paused {
    color: var(--text-warning);
}

.nl-word-count-correction {
    align-items: flex-start;
}

.nl-word-count-correction .setting-item-control {
    flex-wrap: wrap;
}

.nl-word-count-correction select {
    max-width: min(360px, 100%);
}

.nl-word-count-correction input[type="date"] {
    width: 140px;
}

.nl-word-count-correction input[type="number"] {
    width: 110px;
}

.nl-tracker-section,
.nl-tracker-goal,
.nl-tracker-sparkline,
.nl-tracker-heatmap {
    width: 100%;
}

.nl-tracker-section h4,
.nl-tracker-page h3,
.nl-tracker-page h4,
.nl-tracker-subtitle {
    margin: 0 0 10px;
    text-align: center;
    font-weight: 600;
}

.nl-tracker-section h4,
.nl-tracker-subtitle,
.nl-tracker-page h4 {
    font-size: 13px;
    letter-spacing: 0.02em;
}

.nl-tracker-page h3 {
    font-size: 1.55em;
    letter-spacing: -0.02em;
}

.nl-tracker-empty {
    color: var(--text-muted);
    font-size: 0.9em;
}

.nl-tracker-sprint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.nl-tracker-duration-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.nl-tracker-duration-input {
    width: 3.6em;
    text-align: center;
}

.nl-tracker-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nl-tracker-timer-display {
    font-size: 2.35em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: 0.06em;
}

.nl-tracker-timer-display.is-overtime {
    color: var(--text-error, #e57373);
}

.nl-tracker-timer-meta {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

.nl-tracker-btn-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 260px;
}

.nl-tracker-btn {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    cursor: pointer;
    font-size: 12px;
}

.nl-tracker-btn.is-start {
    color: var(--color-green, #4CAF50);
    border-color: currentColor;
}

.nl-tracker-btn.is-stop:disabled,
.nl-tracker-btn:disabled {
    opacity: 0.45;
}

.nl-tracker-cards,
.nl-tracker-page-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.nl-tracker-page-cards {
    margin: 0 auto 28px;
}

.nl-tracker-card {
    box-sizing: border-box;
    flex: 1 1 96px;
    min-width: 96px;
    max-width: 132px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    padding: 12px 10px 10px;
    background: var(--background-secondary);
    text-align: center;
}

.nl-tracker-page .nl-tracker-card {
    flex: 1 1 140px;
    max-width: 180px;
    padding: 16px 12px 14px;
}

.nl-tracker-card-icon {
    display: flex;
    justify-content: center;
    color: var(--interactive-accent);
}

.nl-tracker-card-value {
    font-size: 1.2em;
    font-weight: 650;
    margin-top: 6px;
    line-height: 1.2;
}

.nl-tracker-page .nl-tracker-card-value {
    font-size: 1.35em;
}

.nl-tracker-card-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.nl-tracker-goal {
    font-size: 13px;
    color: var(--text-muted);
    max-width: none;
    margin: 0 auto 8px;
}

.nl-tracker-bar {
    height: 6px;
    border-radius: 99px;
    background: var(--background-modifier-border);
    overflow: hidden;
    margin: 8px auto 0;
    width: 100%;
    max-width: none;
}

.nl-tracker-bar-fill {
    height: 100%;
}

.nl-tracker-rings {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    justify-content: center;
    margin: 8px 0 8px;
}

.nl-tracker-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.nl-tracker-ring-label,
.nl-tracker-ring-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.nl-tracker-ring-pct {
    font-size: 14px;
    font-weight: 600;
    fill: var(--text-normal);
}

.nl-tracker-sparkline-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.nl-tracker-spark-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 72px;
    margin-top: 4px;
}

.nl-tracker-spark-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}

.nl-tracker-spark-bar {
    width: 100%;
    max-width: 18px;
    background: var(--interactive-accent);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.nl-tracker-spark-bar.is-revision {
    background: var(--sl-warning, #ffb74d);
}

.nl-tracker-spark-label {
    font-size: 9px;
    color: var(--text-muted);
}

.nl-tracker-heatmap-vertical {
    margin-top: auto;
    padding: 12px 10px 4px;
}

.nl-tracker-heatmap-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85em;
    margin-bottom: 8px;
    padding: 0 2px;
}

.nl-tracker-heatmap-today {
    color: var(--text-muted);
}

.nl-tracker-heatmap-dow,
.nl-tracker-heatmap-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.nl-tracker-heatmap-vertical .nl-tracker-heatmap-dow,
.nl-tracker-heatmap-vertical .nl-tracker-heatmap-week {
    grid-template-columns: repeat(7, 18px);
    justify-content: center;
    column-gap: 4px;
    row-gap: 4px;
}

.nl-tracker-heatmap-dow {
    margin-bottom: 4px;
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
}

.nl-tracker-heatmap-vertical .nl-tracker-heatmap-dow > span {
    white-space: nowrap;
}

.nl-tracker-heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nl-tracker-heatmap-vertical .nl-tracker-heatmap-grid {
    gap: 4px;
}

.nl-tracker-heat-cell {
    aspect-ratio: 1;
    min-width: 10px;
    min-height: 10px;
    border-radius: 2px;
    background: var(--background-modifier-border);
}

.nl-tracker-heatmap-vertical .nl-tracker-heat-cell {
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    justify-self: center;
    border-radius: 3px;
}

.nl-tracker-heat-l0 { background: var(--background-modifier-border); }
.nl-tracker-heat-l1 { background: color-mix(in srgb, var(--interactive-accent) 28%, var(--background-secondary)); }
.nl-tracker-heat-l2 { background: color-mix(in srgb, var(--interactive-accent) 48%, var(--background-secondary)); }
.nl-tracker-heat-l3 { background: color-mix(in srgb, var(--interactive-accent) 72%, var(--background-secondary)); }
.nl-tracker-heat-l4 { background: var(--interactive-accent); }
.nl-tracker-heat-out { opacity: 0.28; }

.nl-tracker-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--text-muted);
}

.nl-tracker-heatmap-legend .nl-tracker-heat-cell {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
}

.nl-tracker-page-header {
    margin: 0 auto 28px;
    max-width: 36em;
}

.nl-tracker-page-lead {
    color: var(--text-muted);
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.nl-tracker-heatmap-toolbar,
.nl-tracker-chart-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 28px 0 12px;
}

.nl-tracker-year-row,
.nl-tracker-range-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.nl-tracker-year-input {
    width: 5.5em;
}

.nl-tracker-range-btn {
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    cursor: pointer;
}

.nl-tracker-range-btn.is-active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: transparent;
}

.nl-tracker-heatmap-year-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.nl-tracker-heatmap-year-dow {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
    padding-top: 16px;
    font-size: 10px;
    color: var(--text-muted);
}

.nl-tracker-heatmap-year-cols {
    display: flex;
    gap: 3px;
}

.nl-tracker-heatmap-year-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 12px;
}

.nl-tracker-heatmap-month {
    font-size: 9px;
    color: var(--text-muted);
    height: 14px;
    overflow: hidden;
}

.nl-tracker-heatmap-year-col .nl-tracker-heat-cell {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    aspect-ratio: auto;
}

@media (max-width: 720px) {
    .nl-tracker-page {
        padding: 20px 16px 28px;
    }

    .nl-tracker-page .nl-tracker-card {
        flex-basis: calc(50% - 10px);
        max-width: none;
    }
}
.profile-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
    flex: 0 0 auto;
}

.profile-section-actions .profile-section-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    opacity: 0.62;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.profile-section-actions .profile-section-action-btn:hover:not([data-disabled="true"]) {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
    opacity: 1;
}

.profile-section-actions .profile-section-action-btn[data-disabled="true"] {
    opacity: 0.22;
    cursor: default;
    pointer-events: none;
}

.profile-section-actions .profile-section-action-btn svg,
.profile-section-actions .profile-section-action-btn .svg-icon {
    width: 14px;
    height: 14px;
}

.profile-section-actions .character-section-add-field-btn,
.profile-section-actions .profile-section-add-field-btn {
    margin-inline-start: 0;
    padding: 0;
    color: var(--text-muted);
    opacity: 0.62;
}

/* Project Canvas card box */
.narrative-lab-ncanvas-library-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.narrative-lab-ncanvas-library-view > .story-line-toolbar {
    flex: 0 0 auto;
}

.nl-ncanvas-library-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px clamp(18px, 4vw, 44px) 40px;
    overflow: auto;
}

.nl-ncanvas-library-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto 22px;
    max-width: 1180px;
}

.nl-ncanvas-library-heading-copy h2 {
    margin: 0 0 5px;
    font-size: 1.45em;
}

.nl-ncanvas-library-heading-copy p,
.nl-ncanvas-card-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

.nl-ncanvas-library-actions,
.nl-ncanvas-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nl-ncanvas-library-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.nl-ncanvas-library-actions svg {
    width: 15px;
    height: 15px;
}

.nl-ncanvas-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}

.nl-ncanvas-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-l);
    background: var(--background-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.nl-ncanvas-card:hover,
.nl-ncanvas-card:focus-visible {
    border-color: var(--interactive-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    outline: none;
    transform: translateY(-2px);
}

.nl-ncanvas-card.is-current {
    border-color: color-mix(in srgb, var(--interactive-accent) 60%, var(--background-modifier-border));
}

.nl-ncanvas-card-preview {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: color-mix(in srgb, var(--interactive-accent) 70%, var(--text-muted));
    background-color: var(--background-secondary);
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--text-muted) 28%, transparent) 1px, transparent 1.2px),
        linear-gradient(135deg, color-mix(in srgb, var(--interactive-accent) 8%, transparent), transparent 58%);
    background-size: 18px 18px, auto;
    border-bottom: 1px solid var(--background-modifier-border);
}

.nl-ncanvas-card-preview-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid color-mix(in srgb, var(--interactive-accent) 28%, var(--background-modifier-border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--background-primary) 86%, transparent);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}

.nl-ncanvas-card-preview-icon svg {
    width: 27px;
    height: 27px;
}

.nl-ncanvas-current-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--text-on-accent);
    background: var(--interactive-accent);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
}

.nl-ncanvas-card-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 12px 14px 15px;
}

.nl-ncanvas-card-copy {
    min-width: 0;
    flex: 1;
}

.nl-ncanvas-card-copy h3 {
    margin: 0 0 4px;
    overflow: hidden;
    font-size: var(--font-ui-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-ncanvas-card-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-ncanvas-card-actions {
    flex: 0 0 auto;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.nl-ncanvas-card:hover .nl-ncanvas-card-actions,
.nl-ncanvas-card:focus-within .nl-ncanvas-card-actions {
    opacity: 1;
}

.nl-ncanvas-card-actions button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-muted);
}

.nl-ncanvas-card-actions button:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

.nl-ncanvas-card-actions svg {
    width: 14px;
    height: 14px;
}

.nl-ncanvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 310px;
    max-width: 620px;
    margin: 25px auto 0;
    padding: 36px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--background-modifier-border);
    border-radius: var(--radius-l);
    background: var(--background-secondary-alt);
}

.nl-ncanvas-empty h3 {
    margin: 12px 0 6px;
    color: var(--text-normal);
}

.nl-ncanvas-empty p {
    max-width: 430px;
    margin: 0 0 18px;
}

.nl-ncanvas-empty-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: var(--interactive-accent);
    background: color-mix(in srgb, var(--interactive-accent) 10%, var(--background-primary));
}

.nl-ncanvas-empty-icon svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 640px) {
    .nl-ncanvas-library-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .nl-ncanvas-library-actions button {
        flex: 1;
        justify-content: center;
    }

    .nl-ncanvas-card-actions {
        opacity: 1;
    }
}
/* Project-local module picker: compact enough for small settings windows. */
.nl-project-module-choices {
    margin: 4px 0 0;
    overflow: visible;
}

.nl-project-settings-modal {
    width: min(760px, 94vw);
    font-family: var(--font-interface, system-ui, sans-serif);
    font-size: 13px;
    line-height: 1.5;
}
.nl-project-settings-modal .modal-title { font-size: 20px; line-height: 1.3; }
.nl-project-settings-modal .setting-item-name { font-size: 13px; line-height: 1.5; }
.nl-project-settings-modal .setting-item-description { font-size: 12px; line-height: 1.5; padding-inline: 8px; }
.nl-project-settings-modal button, .nl-project-settings-modal select { font-size: 13px; }
.nl-project-settings-modal.nl-project-settings-editor {
    height: min(790px, 90vh);
    display: flex;
    flex-direction: column;
    padding: 22px 24px 0;
    overflow: hidden;
}
.nl-project-settings-editor .nl-settings-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: none;
    margin-top: 4px;
    overflow: hidden;
}
.nl-settings-identity { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--text-muted); }
.nl-settings-project-icon, .nl-settings-tab-icon, .nl-module-group-icon { display: inline-flex; flex-shrink: 0; }
.nl-settings-project-icon svg, .nl-settings-tab-icon svg, .nl-module-group-icon svg { width: 15px; height: 15px; }
.nl-project-settings-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-settings-tabs { display: flex; flex-shrink: 0; gap: 4px; padding: 4px; border-radius: 8px; background: var(--background-secondary); }
.nl-project-settings-modal .nl-settings-tab {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1; min-width: 0; height: 34px; padding: 0 8px;
    color: var(--text-muted); font-weight: 500;
    background: transparent; border: 1px solid transparent; border-radius: 6px; box-shadow: none;
}
.nl-project-settings-modal .nl-settings-tab[aria-selected="true"] {
    color: var(--text-normal); background: var(--background-primary);
    border-color: var(--background-modifier-border); box-shadow: 0 1px 2px #00000008;
}
.nl-project-settings-modal .nl-settings-tab:focus-visible { outline: 2px solid var(--interactive-accent); outline-offset: -2px; }
.nl-settings-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 8px; padding: 4px 8px 20px 2px; margin-top: 10px; }
.nl-settings-panel[hidden] { display: none !important; }
.nl-project-settings-modal .nl-settings-panel > .setting-item { margin: 0; padding: 10px 8px 14px; }
.nl-project-settings-modal .nl-settings-preset { border: 0; }
.nl-project-settings-modal .nl-layout-default-page {
    padding: 12px 14px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: var(--background-primary);
}
.nl-layout-help {
    margin: 10px 8px 14px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.nl-layout-help p { margin: 2px 0; }
.nl-layout-groups { display: grid; gap: 12px; }
.nl-project-settings-modal .nl-layout-group {
    overflow: hidden;
    padding: 0 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: var(--background-secondary);
}
.nl-project-settings-modal .nl-layout-group-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 8px 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.5;
}
.nl-project-settings-modal .nl-layout-group-heading h4 { margin: 0; font: inherit; color: inherit; }
.nl-layout-group-icon { display: inline-flex; flex: 0 0 auto; }
.nl-layout-group-icon svg { width: 15px; height: 15px; }
body .nl-project-settings-modal .nl-layout-group > .setting-item.nl-layout-page-row,
body .nl-project-settings-modal .nl-layout-group > .setting-item.nl-layout-page-row:first-child,
body .nl-project-settings-modal .nl-layout-group > .setting-item.nl-layout-page-row:last-child {
    min-height: 54px;
    margin: 0;
    padding: 10px 8px;
    border-top: 1px solid var(--background-modifier-border);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}
body .nl-project-settings-modal .nl-layout-group.is-single > .setting-item.nl-layout-page-row { border-top: 0; }
.nl-project-settings-modal .nl-layout-page-row .setting-item-info { min-width: 0; }
.nl-project-settings-modal .nl-layout-page-row .setting-item-control { flex-wrap: nowrap; gap: 6px; }
.nl-project-settings-modal .nl-layout-page-row .clickable-icon { width: 30px; height: 30px; padding: 6px; }
.nl-project-settings-modal .nl-layout-page-row .checkbox-container { margin-left: 4px; }
.nl-settings-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; border-top: 1px solid var(--background-modifier-border); background: var(--background-primary); }
.nl-settings-safety-note { font-size: 12px; color: var(--text-muted); }
.nl-project-settings-modal .nl-settings-footer > .setting-item { padding: 0; margin: 0; border: 0; flex-shrink: 0; }
.nl-settings-footer .setting-item-info { display: none; }
.nl-settings-footer .setting-item-control { gap: 8px; }
.nl-settings-footer button { min-width: 64px; height: 32px; }
.nl-creation-step[hidden], .nl-creation-footer button[hidden] { display: none !important; }
.nl-creation-progress { color: var(--text-muted); font-size: var(--font-ui-small); }
.nl-creation-footer { position: sticky; bottom: -1px; background: var(--background-primary); padding-block: 14px; }
.nl-creation-footer .setting-item-control { flex-wrap: wrap; }
.nl-creation-footer button { order: 4; }
.nl-creation-footer .nl-create-back { order: 1; }
.nl-creation-footer .nl-create-next { order: 2; }
.nl-creation-footer .nl-create-submit { order: 3; }
.nl-note-card-search { width: min(100%, 440px); margin: 8px; }
.nl-module-group {
    margin: 0 0 14px;
    padding: 16px 16px 16px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: var(--background-secondary);
}
.nl-module-group-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--text-muted); }
.nl-project-settings-modal .nl-module-group h3,
.nl-project-module-picker .nl-module-group h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); line-height: 1.5; }
.nl-module-group-count { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-faint, var(--text-muted)); }
.nl-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    align-items: stretch;
}
/* Beat Obsidian's Setting first-child rules that zero padding and drop the top border. */
body .nl-project-module-picker .nl-module-grid > .setting-item.setting-item,
body .nl-project-module-picker .nl-module-grid > .setting-item.setting-item:first-child,
body .nl-project-module-picker .nl-module-grid > .setting-item.setting-item:last-child {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-width: 0;
    min-height: 64px;
    margin: 0;
    padding: 14px 18px;
    box-sizing: border-box;
    border: 1px solid var(--background-modifier-border);
    border-top: 1px solid var(--background-modifier-border);
    border-right: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
    border-left: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
}
.nl-project-module-picker .nl-module-grid > .setting-item:hover { background: var(--background-primary-alt, var(--background-primary)); }
.nl-project-module-picker .nl-module-grid .setting-item-info {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0 8px 0 0;
}
.nl-project-module-picker .nl-module-grid .setting-item-name { font-weight: 500; overflow-wrap: anywhere; line-height: 1.35; }
.nl-project-module-picker .nl-module-grid .setting-item-description {
    margin: 3px 0 0;
    padding-inline: 0;
    color: var(--text-muted);
    min-height: 2.7em;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.nl-project-module-picker .nl-module-grid .setting-item-control {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    margin: 0;
    padding: 0 0 0 8px;
    justify-content: flex-end;
}
.nl-project-module-picker .nl-module-grid > .setting-item:has(button) .setting-item-control { display: flex; align-items: center; gap: 8px; }
.nl-library-pack-choices {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px dashed var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-secondary);
}
.nl-library-pack-heading {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.4;
}
.nl-library-pack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
body .nl-project-module-picker .nl-library-pack-grid > .setting-item.setting-item,
body .nl-project-module-picker .nl-library-pack-grid > .setting-item.setting-item:first-child,
body .nl-project-module-picker .nl-library-pack-grid > .setting-item.setting-item:last-child {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-width: 0;
    min-height: 64px;
    margin: 0;
    padding: 14px 18px;
    box-sizing: border-box;
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    background: var(--background-primary);
}
.nl-project-module-picker .nl-library-pack-grid .setting-item-info {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0 8px 0 0;
}
.nl-project-module-picker .nl-library-pack-grid .setting-item-name { font-weight: 500; overflow-wrap: anywhere; line-height: 1.35; }
.nl-project-module-picker .nl-library-pack-grid .setting-item-description {
    margin: 3px 0 0;
    padding-inline: 0;
    color: var(--text-muted);
    min-height: 2.7em;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.nl-project-module-picker .nl-library-pack-grid .setting-item-control {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    align-self: center;
    width: auto;
    margin: 0;
    padding: 0 0 0 8px;
    justify-content: flex-end;
}
.nl-module-dependency-note { margin: 4px 4px 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 600px) {
    .nl-project-settings-modal.nl-project-settings-editor { padding: 18px 16px 0; height: 92vh; }
    .nl-settings-tabs { gap: 2px; }
    .nl-project-settings-modal .nl-settings-tab { padding-inline: 4px; font-size: 12px; }
    .nl-settings-tab-icon { display: none; }
    .nl-settings-footer { flex-wrap: wrap; padding: 12px 0; gap: 8px; }
    .nl-settings-safety-note { flex: 1; min-width: 100px; }
    .nl-module-group { padding: 14px; }
    .nl-module-grid { grid-template-columns: 1fr; }
    .nl-library-pack-grid { grid-template-columns: 1fr; }
    body .nl-project-module-picker .nl-module-grid > .setting-item.setting-item,
    body .nl-project-module-picker .nl-module-grid > .setting-item.setting-item:first-child,
    body .nl-project-module-picker .nl-module-grid > .setting-item.setting-item:last-child,
    body .nl-project-module-picker .nl-library-pack-grid > .setting-item.setting-item,
    body .nl-project-module-picker .nl-library-pack-grid > .setting-item.setting-item:first-child,
    body .nl-project-module-picker .nl-library-pack-grid > .setting-item.setting-item:last-child { padding: 14px 16px; }
}
.nl-project-actions-more { position: relative; }
.nl-project-actions-more summary { cursor: pointer; padding: 4px 10px; list-style: none; }
.nl-project-actions-menu { position: absolute; right: 0; top: 100%; z-index: 20; display: grid; gap: 6px; min-width: 160px; padding: 8px; border-radius: 8px; border: 1px solid var(--background-modifier-border); background: var(--background-primary); box-shadow: var(--shadow-s); }
.nl-project-actions-menu .sl-series-delete { order: 2; border-top: 1px solid var(--background-modifier-border); }
.story-line-view-switcher > button[hidden] { display: none !important; }
.nl-tab-more { flex-shrink: 0; }
.nl-project-settings-button { white-space: nowrap; }
.nl-chapter-templates-page { padding: 20px; overflow: auto; flex: 1; min-height: 0; }
.nl-project-overview { padding: clamp(24px, 5vw, 64px); text-align: center; color: var(--text-muted); }

.sl-manuscript-empty .mod-cta {
    margin-top: 16px;
}

.sl-manuscript-create-document {
    margin-left: 4px;
    white-space: nowrap;
}

.nl-manuscript-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 16px; border-bottom: 1px solid var(--background-modifier-border); }
.nl-manuscript-fold-controls { display: flex; gap: 8px; padding: 6px 16px; }
.nl-manuscript-fold-controls[hidden], .nl-manuscript-doc-actions[hidden] { display: none; }
.nl-manuscript-doc-actions.nl-manuscript-fold-controls { padding: 6px 16px; }
.nl-manuscript-fold-controls button { font-size: var(--font-ui-small); }
details.sl-manuscript-scene-block > summary.sl-manuscript-scene-header { cursor: pointer; list-style: none; margin-bottom: 0; padding-block: 12px; }
details.sl-manuscript-scene-block > summary::-webkit-details-marker { display: none; }
details.sl-manuscript-scene-block > summary::before { content: '›'; width: 14px; flex-shrink: 0; color: var(--text-muted); font-size: 18px; transform-origin: center; text-align: center; }
details.sl-manuscript-scene-block[open] > summary::before { transform: rotate(90deg); }
details.sl-manuscript-scene-block:not([open]) { min-height: 0; padding-bottom: 0; margin-bottom: 8px; border-bottom: 1px solid var(--background-modifier-border); }
details.sl-manuscript-scene-block:not([open]) > .sl-manuscript-editor-wrap { display: none; }
.sl-manuscript-scene-header .nl-manuscript-open-file { margin-left: auto; order: 10; padding: 2px 6px; height: 24px; color: var(--text-muted); background: transparent; box-shadow: none; }
.nl-folder-tracker {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 10px;
    background: var(--background-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nl-folder-tracker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.nl-folder-tracker-identity { min-width: 0; }
.nl-folder-tracker-name {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.nl-folder-tracker-path {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.nl-folder-tracker-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
    background: var(--background-modifier-border);
    color: var(--text-muted);
}
.nl-folder-tracker-status.is-recording {
    background: color-mix(in srgb, var(--interactive-accent) 18%, transparent);
    color: var(--interactive-accent);
}
.nl-folder-tracker-status.is-paused {
    background: color-mix(in srgb, var(--text-warning) 16%, transparent);
    color: var(--text-warning);
}
.nl-folder-tracker-status.is-idle {
    background: var(--background-modifier-hover, var(--background-modifier-border));
    color: var(--text-muted);
}
.nl-folder-tracker-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.nl-folder-tracker-hint,
.nl-folder-tracker-footnote {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}
.nl-folder-tracker-footnote { opacity: 0.85; }
.nl-folder-tracker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nl-folder-tracker-actions select {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 13px;
}
.nl-folder-tracker-actions button { flex: 1; font-size: 12px; }
.nl-folder-tracker-saved { display: flex; flex-direction: column; gap: 6px; }
.nl-folder-tracker-saved-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.nl-folder-tracker-saved button {
    text-align: left;
    font-size: 13px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 30px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    padding: 6px 10px;
}
.nl-folder-tracker-recursive {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--font-ui-small);
}
.nl-tracker-page-header .nl-folder-tracker { margin-top: 12px; }
.nl-tracker-panel-body > h4 { overflow-wrap: anywhere; }
.nl-project-structure-tools { width: min(860px, 94vw); }
.nl-project-structure-tools .beat-sheet-list { margin-bottom: 24px; }

/* Respond to the actual workspace pane, not the whole desktop viewport.
   ViewSwitcher sets this class from its existing resize observer. */
.story-line-toolbar.sl-toolbar-narrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 8px;
    padding: 8px 10px;
}
.story-line-toolbar.sl-toolbar-narrow > .story-line-title-row,
.story-line-toolbar.sl-toolbar-narrow > .story-line-view-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
}
.story-line-toolbar.sl-toolbar-narrow > .story-line-title-row { display: flex; }
.story-line-toolbar.sl-toolbar-narrow > .story-line-view-actions {
    grid-column: 2;
    grid-row: 1;
    padding-left: 6px;
}
.story-line-toolbar.sl-toolbar-narrow > .story-line-view-switcher {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}
.story-line-toolbar.sl-toolbar-narrow > .story-line-toolbar-controls {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    white-space: normal;
}
.nl-project-settings-button > .view-tab-icon { display: none; }
.sl-toolbar-narrow .nl-project-settings-button > .view-tab-icon { display: flex; }
.sl-toolbar-narrow .nl-project-settings-button > .view-tab-label { display: none; }
.sl-toolbar-narrow .nl-project-settings-button { width: 28px; min-width: 28px; padding-inline: 0; }
.sl-toolbar-narrow .plot-grid-toolbar-left,
.sl-toolbar-narrow .plot-grid-toolbar-actions { flex-wrap: wrap; min-width: 0; }
.sl-toolbar-narrow .story-line-toolbar-controls > .sl-toggle-wrap { flex-shrink: 0; }

/* Native buttons may have a minimum width and nowrap labels. Keep tracker
   actions inside narrow sidebars, including long saved-folder names. */
.nl-tracker-panel .nl-tracker-tabs,
.nl-tracker-page .nl-tracker-tabs { width: 100%; min-width: 0; }
.nl-tracker-panel .nl-tracker-tab,
.nl-tracker-page .nl-tracker-tab,
.nl-tracker-panel .nl-tracker-btn,
.nl-tracker-page .nl-tracker-btn,
.nl-folder-tracker-actions button {
    min-width: 0;
    height: auto;
    min-height: 30px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.nl-tracker-panel-body > *, .nl-tracker-sprint > * { min-width: 0; max-width: 100%; }
.nl-folder-tracker-status { max-width: 100%; overflow-wrap: anywhere; }
.nl-folder-tracker > button { min-width: 0; height: auto; min-height: 30px; font-size: 13px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
@container writing-tracker (max-width: 280px) {
    .nl-tracker-tabs { gap: 4px; }
    .nl-tracker-tab, .nl-tracker-btn { padding: 6px 4px; }
    .nl-tracker-duration-row { flex-wrap: wrap; }
    .nl-tracker-timer-display { font-size: 36px; }
    .nl-tracker-card-value { font-size: 20px; overflow-wrap: anywhere; }
}