/* ========================================
   CHARACTER MANAGER SPECIFIC STYLES
   Base terminal theme loaded from terminal-theme.css
   
   PANEL SYSTEM:
   Three panels (character-grid, character-sheet, campaign) shown 2 at a time.
   Each panel handles its own padding. View state controlled via data-view attribute.
   
   SCROLLBAR STRUCTURE:
   - Character grid panel: white/gray scrollbars
   - Character sheet panel: white/gray scrollbars
   - Campaign panel: white/gray scrollbars (matches sheet)
   - Modal content: scrolls if form content is too large
   All scrollbars inherit from terminal-theme.css custom scrollbar styles
   
   MODAL THEMING:
   Character manager modals use YELLOW theme (base modal style from terminal-theme.css)
   ======================================== */

/* ===== TERMINAL CHROME ===== */
.app-root,
.terminal-frame {
    border-color: var(--ui-border-color);
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.main-content.is-hidden {
    display: none;
}

/* Ensure splash content can scroll if needed */
.app-root .splash-content,
.terminal-frame .splash-content {
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
}

/* ===== HEADER LAYOUT ===== */
.header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

/* ===== PANEL: CHARACTER GRID ===== */
.panel-character-grid {
    padding: var(--spacing-xl);
    padding-top: 0;
    /* White/gray scrollbar via CSS variables - inherited by *::-webkit-scrollbar-* rules */
    --scrollbar-track-color: hsl(0, 0%, 7%);
    --scrollbar-thumb-color: hsla(0, 0%, 50%, 0.5);
    --scrollbar-thumb-hover-color: hsla(0, 0%, 70%, 0.9);
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* ===== PANEL: CHARACTER SHEET ===== */
.panel-character-sheet {
    padding: 32px;
    /* Border removed for cleaner look */
    border-right: none;
    /* Fill parent container */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative; /* For absolute positioning of nav bar */
    /* White/gray scrollbar via CSS variables - inherited by *::-webkit-scrollbar-* rules */
    --scrollbar-track-color: hsl(0, 0%, 7%);
    --scrollbar-thumb-color: hsla(0, 0%, 50%, 0.5);
    --scrollbar-thumb-hover-color: hsla(0, 0%, 70%, 0.9);
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Wrapper for character sheet - fills parent container */
/* BEM alias: .sheet__content */
.sheet-scroll-wrapper,
.sheet__content {
    position: relative; /* For expand loading overlay positioning */
    z-index: 1; /* Below nav bar (z-index: 10) */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    /* Border inherits theme from character sheet - use character sheet's dim color */
    border: 1px solid var(--ui-dim-color, var(--terminal-dim));
    /* Smooth transitions for nav bar padding changes */
    transition: padding-top 0.25s ease;
    /* Don't set theme tokens here - let child components set their own themes */
    /* Scrollbar colors inherit from parent theme - character sheet sets these */
}

/* Inherit border color from character sheet theme */
.sheet-scroll-wrapper:has(.character-sheet.ui-theme-pink),
.sheet__content:has(.character-sheet.ui-theme-pink) {
    border-color: var(--ui-dim-color);
}

.sheet-scroll-wrapper:has(.character-sheet.ui-theme-green),
.sheet__content:has(.character-sheet.ui-theme-green) {
    border-color: var(--ui-dim-color);
}

.sheet-scroll-wrapper:has(.character-sheet.ui-theme-white),
.sheet__content:has(.character-sheet.ui-theme-white) {
    border-color: var(--ui-dim-color);
}

.sheet-scroll-wrapper:has(.character-sheet.ui-theme-yellow),
.sheet__content:has(.character-sheet.ui-theme-yellow) {
    border-color: var(--ui-dim-color);
}

/* Inherit scrollbar colors from character sheet theme */
.sheet-scroll-wrapper:has(.character-sheet.ui-theme-pink),
.sheet__content:has(.character-sheet.ui-theme-pink) {
    /* Scrollbar stays teal for consistency - only border changes to match theme */
    --scrollbar-track-color: hsl(var(--theme-teal-h), 70%, 7%) !important;
    --scrollbar-thumb-color: hsla(var(--theme-teal-h), calc(var(--theme-teal-s) * 0.67), var(--theme-teal-l-dim), 0.5) !important;
    --scrollbar-thumb-hover-color: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.9) !important;
    /* Also set border color so campaign-panel-slot border-top inherits it */
    --ui-border-color: var(--campaign-accent);
}

.sheet-scroll-wrapper:has(.character-sheet.ui-theme-green),
.sheet__content:has(.character-sheet.ui-theme-green) {
    /* Scrollbar stays teal for consistency - only border changes to match theme */
    --scrollbar-track-color: hsl(var(--theme-teal-h), 70%, 7%) !important;
    --scrollbar-thumb-color: hsla(var(--theme-teal-h), calc(var(--theme-teal-s) * 0.67), var(--theme-teal-l-dim), 0.5) !important;
    --scrollbar-thumb-hover-color: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.9) !important;
    /* Also set border color so campaign-panel-slot border-top inherits it */
    --ui-border-color: var(--terminal-border);
}

.sheet-scroll-wrapper:has(.character-sheet.ui-theme-white),
.sheet__content:has(.character-sheet.ui-theme-white) {
    /* Scrollbar stays teal for consistency - only border changes to match theme */
    --scrollbar-track-color: hsl(var(--theme-teal-h), 70%, 7%) !important;
    --scrollbar-thumb-color: hsla(var(--theme-teal-h), calc(var(--theme-teal-s) * 0.67), var(--theme-teal-l-dim), 0.5) !important;
    --scrollbar-thumb-hover-color: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.9) !important;
    /* Also set border color so campaign-panel-slot border-top inherits it */
    --ui-border-color: var(--white-border);
}

.sheet-scroll-wrapper:has(.character-sheet.ui-theme-yellow),
.sheet__content:has(.character-sheet.ui-theme-yellow) {
    /* Scrollbar stays teal for consistency - only border changes to match theme */
    --scrollbar-track-color: hsl(var(--theme-teal-h), 70%, 7%) !important;
    --scrollbar-thumb-color: hsla(var(--theme-teal-h), calc(var(--theme-teal-s) * 0.67), var(--theme-teal-l-dim), 0.5) !important;
    --scrollbar-thumb-hover-color: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.9) !important;
    /* Also set border color so campaign-panel-slot border-top inherits it */
    --ui-border-color: var(--ui-fg-color);
}

/* Character sheet theme is set in .character-sheet base rule in terminal-theme.css */
/* Theme classes can override if needed */

/* Grid for character sheet and campaign panel - stacks vertically in grid view, side-by-side in expanded view */
/* BEM alias: .sheet__layout */
.sheet-campaign-grid,
.sheet__layout {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* White/gray scrollbar for character sheet panel */
    --scrollbar-track-color: hsl(0, 0%, 7%);
    --scrollbar-thumb-color: hsla(0, 0%, 50%, 0.5);
    --scrollbar-thumb-hover-color: hsla(0, 0%, 70%, 0.9);
}

/* Scrollbar pseudo-elements for sheet-campaign-grid - uses theme variables */
.sheet-campaign-grid::-webkit-scrollbar-track,
.sheet__layout::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color) !important;
}
.sheet-campaign-grid::-webkit-scrollbar-thumb,
.sheet__layout::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color) !important;
}
.sheet-campaign-grid::-webkit-scrollbar-thumb:hover,
.sheet__layout::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color) !important;
}

/* In grid view, character sheet should not scroll independently - scrolls with campaign panel */
.sheet-campaign-grid .character-sheet,
.sheet__layout .character-sheet {
    overflow-y: visible;
    flex: 0 0 auto;
}

/* In expanded view, use side-by-side 2-column grid */
/* grid-template-columns is overridden in the media query below with var(--sheet-column-width) 1fr */
.split-layout.is-sheet-expanded .sheet-campaign-grid,
.split-layout.is-sheet-expanded .sheet__layout {
    display: grid;
    overflow: hidden;
}

/* In expanded view, character sheet gets its own scroll back */
.split-layout.is-sheet-expanded .sheet-campaign-grid .character-sheet,
.split-layout.is-sheet-expanded .sheet__layout .character-sheet {
    overflow-y: auto;
    flex: 1 1 0;
}

/* Campaign panel slot in the grid */
/* BEM alias: .sheet__sidebar */
.campaign-panel-slot,
.sheet__sidebar {
    min-height: 0;
    padding: var(--spacing-lg) 16px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    /* In grid view, campaign panel is below sheet in the same scroll area */
    overflow: visible;
    flex: 0 0 auto;
    /* Removed border-top - spacing provides enough visual separation */
    margin-top: var(--spacing-lg);
    margin-bottom: 24px;
    
    /* No default theme tokens - inherits from parent container */
    /* Set theme explicitly on .campaign-panel-slot if different from parent */
}

/* Campaign panel slot border-top will inherit --ui-border-color from .sheet-scroll-wrapper */

/* Theme classes override parent theme - ensure they work for campaign panel */
/* Use more specific selectors to ensure theme classes override root defaults */
.sheet-campaign-grid .campaign-panel-slot.ui-theme-white,
.sheet__layout .sheet__sidebar.ui-theme-white,
.campaign-panel-slot.ui-theme-white,
.sheet__sidebar.ui-theme-white {
    --ui-border-color: var(--white-border) !important;
    --ui-fg-color: var(--white-fg) !important;
    --ui-dim-color: var(--white-dim) !important;
    --ui-primary-bg-color: var(--white-accent) !important;
    --ui-on-primary-color: var(--white-bg) !important;
    --ui-bg-color: var(--white-bg) !important;
    --ui-bg-translucent: hsla(var(--theme-white-h), var(--theme-white-s), var(--theme-white-l-bright), 0.1) !important;
    --context-hover: hsla(var(--theme-white-h), var(--theme-white-s), var(--theme-white-l-bright), 0.1) !important;
}

/* White theme layout adjustments - remove side padding, use margins instead */
.sheet__sidebar.theme-white.ui-theme-white {
    padding: 0 !important;
    margin-left: 24px;
    margin-right: 16px;
}

.sheet-campaign-grid .campaign-panel-slot.ui-theme-teal,
.sheet__layout .sheet__sidebar.ui-theme-teal,
.campaign-panel-slot.ui-theme-teal,
.sheet__sidebar.ui-theme-teal {
    --ui-border-color: var(--sheet-accent) !important;
    --ui-fg-color: var(--sheet-accent) !important;
    --ui-dim-color: var(--sheet-accent-dim) !important;
    --ui-primary-bg-color: var(--sheet-accent) !important;
    --ui-on-primary-color: var(--terminal-bg) !important;
    --ui-bg-color: var(--terminal-bg) !important;
    --ui-bg-translucent: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.1) !important;
    --context-hover: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.1) !important;
}

/* Pink theme - use most specific selector to override root defaults */
/* Ensure these override both root defaults AND the .ui-theme-pink class from terminal-theme.css */
.sheet-scroll-wrapper .sheet-campaign-grid .campaign-panel-slot.ui-theme-pink,
.sheet__content .sheet__layout .sheet__sidebar.ui-theme-pink,
.sheet-campaign-grid .campaign-panel-slot.ui-theme-pink,
.sheet__layout .sheet__sidebar.ui-theme-pink,
.campaign-panel-slot.ui-theme-pink,
.sheet__sidebar.ui-theme-pink,
div.campaign-panel-slot.ui-theme-pink,
div.sheet__sidebar.ui-theme-pink {
    --ui-border-color: var(--campaign-accent) !important;
    --ui-fg-color: var(--campaign-accent) !important;
    --ui-dim-color: var(--campaign-accent-dim) !important;
    --ui-primary-bg-color: var(--campaign-accent) !important;
    --ui-on-primary-color: var(--terminal-bg) !important;
    --ui-bg-color: var(--terminal-bg) !important;
    --ui-bg-translucent: hsla(var(--theme-pink-h), var(--theme-pink-s), var(--theme-pink-l-bright), 0.1) !important;
    --context-hover: hsla(var(--theme-pink-h), var(--theme-pink-s), var(--theme-pink-l-bright), 0.1) !important;
}


/* In expanded view, campaign panel gets its own scrolling */
.split-layout.is-sheet-expanded .campaign-panel-slot,
.split-layout.is-sheet-expanded .sheet__sidebar {
    padding: 0 16px 0 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    margin-top: 0;
    gap: 0; /* Remove gap so borders are flush */
    /* Transition for smooth reveal */
    transition: opacity 0.3s ease 0.1s;
}

/* ===== EXPANDING STATE (loading overlay during expand transition) ===== */
/* Sheet stays visible during expansion - only sidebar shows loading */
/* The sheet content is already loaded, so we keep it visible while campaign loads */

/* Hide the full-page loading overlay (no longer used during expansion) */
/* BEM alias: .sheet__loading */
.expand-loading-overlay,
.sheet__loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--terminal-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Sidebar loading overlay - shows only over campaign panel during expansion */
.sidebar__loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--terminal-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Show sidebar loading during expansion */
.split-layout.is-expanding .sidebar__loading {
    display: flex;
}

/* Make sidebar position relative so loading overlay positions correctly */
.sheet__sidebar {
    position: relative;
}

/* Sidebar content wrapper - contains the actual campaign panel content */
.sidebar__content {
    flex: 1 1 auto;
}

/* Hide sidebar content during expansion to show loading overlay */
.split-layout.is-expanding .sidebar__content {
    display: none;
}

/* ===== RESTORING EXPANDED VIEW (no animation, just loading) ===== */
/* When restoring expanded state from URL, show loading state until data loads */

/* Hide all content during restore - show loading spinner */
.split-layout.is-restoring-expanded .sheet__layout,
.split-layout.is-restoring-expanded .sheet-placeholder,
.split-layout.is-restoring-expanded .sheet__nav {
    visibility: hidden;
}

/* Show the sheet loading overlay centered during restore */
.split-layout.is-restoring-expanded .sheet__loading {
    display: flex;
    position: absolute;
    inset: 0;
    background: var(--ui-bg-color, #0a0a0a);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

/* Show loading spinner when sheet content is loading (collapsed view) */
.sheet__content.is-loading .sheet__loading {
    display: flex;
    position: absolute;
    inset: 0;
    background: var(--ui-bg-color, #0a0a0a);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

/* Theme-aware cube for expand overlay */
.expand-loading-overlay .panel-loading-cube i,
.sheet__loading .panel-loading-cube i {
    border-color: var(--ui-dim-color);
    background: var(--ui-bg-translucent);
}

/* Hidden state for transitions */
.campaign-panel-slot.is-hidden,
.sheet__sidebar.is-hidden {
    display: none;
}

/* When sheet panel is first (left position), adjust borders */
.split-layout[data-view="sheet-campaign"] .panel-character-sheet {
    border-right: none;
}

/* ===== CHARACTER NAV BAR (sequential navigation in expanded view) ===== */
/* BEM alias: .sheet__nav */
.character-nav-bar,
.sheet__nav {
    display: none;
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    z-index: 10;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px;
    background: var(--ui-bg-translucent, rgba(0, 0, 0, 0.3));
    border-radius: 2px;
    /* Animation properties */
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* Show nav bar only when expanded view is active */
.split-layout.is-sheet-expanded .character-nav-bar,
.split-layout.is-sheet-expanded .sheet__nav {
    display: flex;
}

/* Animate in after expanded transition completes (handled by JS adding .is-visible) */
.character-nav-bar.is-visible,
.sheet__nav.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.character-nav-bar.is-visible button,
.sheet__nav.is-visible button,
.character-nav-bar.is-visible .nav-count-link,
.sheet__nav.is-visible .nav-count-link {
    font-size: var(--font-size-base);
}

/* Nav buttons - styled as text links */
.character-nav-bar button,
.sheet__nav button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    background: transparent;
    border: none;
    color: var(--ui-dim-color);
    font-family: var(--font-terminal);
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-width: 0;
    max-width: 200px;
}

.character-nav-bar button:hover .nav-name,
.sheet__nav button:hover .nav-name {
    text-decoration: underline;
}

/* Arrow glyphs */
.character-nav-bar .nav-arrow,
.sheet__nav .nav-arrow {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* Character name in nav - truncate if too long */
.character-nav-bar .nav-name,
.sheet__nav .nav-name {
    color: var(--ui-dim-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Center count link - absolutely positioned for true center */
.character-nav-bar .nav-count-link,
.sheet__nav .nav-count-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ui-dim-color);
    font-family: var(--font-terminal);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Container for the two text states - 3D flip card */
.character-nav-bar .nav-count-link,
.sheet__nav .nav-count-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 200px;
}

/* Count value (e.g., "3/15") - front face */
.character-nav-bar .nav-count-value,
.sheet__nav .nav-count-value {
    display: inline-block;
    backface-visibility: hidden;
    transform: rotateX(0deg);
    transition: transform 0.3s ease;
}

/* Hover text - back face (pre-rotated) */
.character-nav-bar .nav-count-hover,
.sheet__nav .nav-count-hover {
    position: absolute;
    backface-visibility: hidden;
    transform: rotateX(-180deg);
    transition: transform 0.3s ease;
    color: var(--ui-dim-color);
}

/* Hover state - flip the card */
.character-nav-bar .nav-count-link:hover,
.sheet__nav .nav-count-link:hover {
    /* No background on hover - keep transparent */
}

.character-nav-bar .nav-count-link:hover .nav-count-value,
.sheet__nav .nav-count-link:hover .nav-count-value {
    transform: rotateX(180deg);
}

.character-nav-bar .nav-count-link:hover .nav-count-hover,
.sheet__nav .nav-count-link:hover .nav-count-hover {
    transform: rotateX(0deg);
}

/* Underline on hover for count link text */
.character-nav-bar .nav-count-link:hover .nav-count-value,
.character-nav-bar .nav-count-link:hover .nav-count-hover,
.sheet__nav .nav-count-link:hover .nav-count-value,
.sheet__nav .nav-count-link:hover .nav-count-hover {
    text-decoration: underline;
}

/* ===== SHEET NAV BAR (above character sheet) ===== */
.sheet-nav-bar {
    padding: 32px 0 0 0;
    border-bottom: 1px solid var(--ui-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--terminal-bg);
    z-index: 10;
}

.sheet-nav-bar.is-hidden {
    display: none;
}

/* Theme-aware nav bar buttons */
.sheet-nav-bar .terminal-btn-small {
    color: var(--ui-fg-color);
    border-color: var(--ui-border-color);
}

.sheet-nav-bar .terminal-btn-small:hover {
    background: var(--ui-primary-bg-color);
    color: var(--ui-on-primary-color);
}

/* View navigation buttons - show/hide based on current view */
/* In grid+sheet view: show "Campaign ->" button, hide "<- Characters" */
.split-layout[data-view="grid-sheet"] .sheet-nav-btn--to-characters {
    display: none !important;
}

/* In sheet+campaign view: show "<- Characters" button, hide "Campaign ->" */
.split-layout[data-view="sheet-campaign"] .sheet-nav-btn--to-campaign {
    display: none !important;
}

/* ===== Expandable Navigation Buttons =====
   Desktop: Show icon only (standard small button size), expand to show icon + label on hover
   Mobile: Hidden (no room for nav buttons) */

.sheet-nav-btn--expandable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    /* Standard small button size */
    min-width: var(--btn-height-sm);
    height: var(--btn-height-sm);
    padding: 0 8px;
    transition: width 0.2s ease, gap 0.2s ease, padding 0.2s ease;
}

.sheet-nav-btn__icon {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fine-tune vertical position for icon glyphs */
    transform: translateY(-1px);
}

/* Arrow icons need extra vertical adjustment */
.sheet-nav-btn--to-characters .sheet-nav-btn__icon,
.sheet-nav-btn--to-campaign .sheet-nav-btn__icon {
    transform: translateY(-3px);
}

.sheet-nav-btn__label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.15s ease, width 0.2s ease;
    line-height: 1;
}

/* Desktop: Expand on hover to show icon + label */
@media (min-width: 769px) {
    .sheet-nav-btn--expandable:hover {
        width: auto;
        gap: 6px;
        padding: 0 12px 0 8px;
    }

    .sheet-nav-btn--expandable:hover .sheet-nav-btn__label {
        opacity: 1;
        width: auto;
    }
}

/* Mobile: Hide expand/collapse buttons entirely */
@media (max-width: 768px) {
    .sheet-nav-btn--expandable {
        display: none;
    }
}

/* Also hide expand/collapse below 1024px */
@media (max-width: 1024px) {
    .sheet-nav-btn--expandable {
        display: none;
    }
}

/* ===== PANEL: CAMPAIGN ===== */
.panel-campaign,
#campaignPanel.panel-campaign {
    padding: 32px;
    background: var(--terminal-bg);
    border-left-width: 1px !important;
    border-left-style: solid !important;
    /* Inherit border color from parent theme */
    border-left-color: var(--ui-border-color) !important;

    /* Flex containment for scrollable journal entries */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    /* Inherit theme colors from parent container - no hardcoded overrides */
    color: var(--ui-fg-color);
}

/* Campaign panel components inherit theme from parent - no hardcoded overrides */
/* Buttons, inputs, links, etc. will use --ui-* tokens from parent theme class */

/* Campaign panel placeholder */
.campaign-panel-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ui-dim-color);
    text-align: center;
    padding: var(--spacing-xl);
}

.campaign-panel-placeholder-text {
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* ===== CAMPAIGN AREA (TOP SECTION) ===== */
.campaign-area {
    padding: 16px var(--spacing-md) var(--spacing-md) var(--spacing-md);
    margin-top: 4px; /* Space for top serrated edge */
    margin-bottom: 32px;
    background: var(--ui-bg-translucent, var(--ui-bg-color, var(--terminal-bg)));
    /* Allow overflow menu to escape bounds */
    overflow: visible;
    position: relative;
}

/* Serrated top edge on campaign area (visible in collapsed view) */
.campaign-area::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: 
        conic-gradient(
            from 135deg at 50% 0%,
            var(--ui-bg-translucent, var(--ui-bg-color, var(--terminal-bg))) 90deg,
            transparent 90deg
        );
    background-size: 8px 100%;
    background-repeat: repeat-x;
}

/* In expanded view: hide campaign-area's top serration (sticky border handles it) */
/* Also remove margin-top since sticky border provides the edge */
.split-layout.is-sheet-expanded .campaign-area::before {
    display: none;
}

.split-layout.is-sheet-expanded .campaign-area {
    margin-top: 0;
}

/* Serrated bottom edge on campaign area (visible when scrolling past bottom border) */
.campaign-area::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: 
        conic-gradient(
            from -45deg at 50% 100%,
            var(--ui-bg-translucent, var(--ui-bg-color, var(--terminal-bg))) 90deg,
            transparent 90deg
        );
    background-size: 8px 100%;
    background-repeat: repeat-x;
}

/* ===== SIDEBAR DECORATIVE BORDERS (sticky torn edges) ===== */
/* These use solid black triangles pointing inward to mask scrolling content */
/* Negative margins make them overlap the campaign content so the serrated edge is always visible */
.sidebar__border {
    display: none; /* Hidden by default (collapsed view) */
    height: 4px;
    flex-shrink: 0;
    position: sticky;
    z-index: 5;
}

/* Show borders only in expanded view */
.split-layout.is-sheet-expanded .sidebar__border {
    display: block;
}

/* Top border - black triangles pointing DOWN (masks content scrolling up) */
.sidebar__border--top {
    top: 0;
    margin-bottom: -4px; /* Overlap into content below */
    background: 
        conic-gradient(
            from -45deg at 50% 100%,
            var(--terminal-bg, #0a0a0a) 90deg,
            transparent 90deg
        );
    background-size: 8px 100%;
    background-repeat: repeat-x;
}

/* Bottom border - black triangles pointing UP (masks content scrolling down) */
.sidebar__border--bottom {
    bottom: 0;
    margin-top: -4px; /* Overlap into content above */
    background: 
        conic-gradient(
            from 135deg at 50% 0%,
            var(--terminal-bg, #0a0a0a) 90deg,
            transparent 90deg
        );
    background-size: 8px 100%;
    background-repeat: repeat-x;
}

.campaign-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: 0 0 16px 0;
    flex-wrap: wrap;
}

/* No campaign state: actions always below title */
.campaign-area-header--no-campaign {
    flex-direction: column;
    align-items: flex-start;
}

.campaign-area-header--no-campaign .campaign-area-title {
    width: 100%;
}

.campaign-area-header--no-campaign .campaign-area-actions {
    width: 100%;
    margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
    /* Title first, actions below */
    .campaign-area-header .campaign-area-title {
        order: 1;
    }
    
    .campaign-area-header .campaign-area-actions {
        order: 2;
    }
}

.campaign-area-title {
    font-size: 18px;
    color: var(--ui-fg-color);
    margin: 0;
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
    white-space: nowrap;
}

.campaign-status-inline {
    font-weight: var(--font-weight-normal);
    color: var(--ui-fg-muted);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
}

@media (max-width: 768px) {
    .campaign-area-title {
        font-size: var(--font-size-base);
    }
    
    .campaign-status-inline {
        font-size: var(--font-size-xs);
    }
    
    /* Reduced padding and margins on mobile */
    .campaign-area {
        padding: 8px;
    }
    
    .campaign-area-info,
    .campaign-area-party,
    .journal-section {
        margin-bottom: 16px;
    }
}

/* No campaign state */
.campaign-area-empty {
    text-align: left;
}

.campaign-area-empty-icon {
    font-size: 2em;
    opacity: 0.3;
    margin-bottom: var(--spacing-sm);
}

.campaign-area-empty-text {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
}

.campaign-area-empty-text.has-invitations {
    color: var(--ui-fg-color);
    font-weight: var(--font-weight-normal);
}

.campaign-area-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* Actions in header (no campaign state) - no margin needed */
.campaign-area-header .campaign-area-actions {
    margin-top: 0;
}

/* Single action (create only) */
.campaign-area-actions--single {
    display: flex;
    margin-bottom: 32px;
}

/* Split buttons when invitations exist */
.campaign-area-actions--split {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: 32px;
}

/* Invitation notice text */
.campaign-area-invitation-notice {
    margin: 0 0 16px 0;
    color: var(--ui-fg-color);
}

/* Bottom margin for no-campaign header */
.campaign-area-header--no-campaign {
    margin-bottom: 32px;
}

/* ===== CAMPAIGN SKELETON LOADERS ===== */
.campaign-skeleton {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.skeleton-line {
    background: var(--ui-dim-color);
    border-radius: 2px;
    height: 1em;
}

.skeleton-line--title {
    width: 60%;
    height: 1.25em;
    margin-bottom: var(--spacing-sm);
}

.skeleton-line--text {
    width: 80%;
    margin-bottom: var(--spacing-xs);
}

.skeleton-line--text-short {
    width: 40%;
}

/* Skeleton party card - matches character-card structure */
.skeleton-party-card {
    /* Uses character-card base styling via class */
}

.skeleton-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--ui-dim-color);
    opacity: 0.15;
}

.skeleton-card-name {
    width: 80%;
    height: 14px;
    margin-bottom: var(--spacing-xs);
}

.skeleton-card-info {
    width: 60%;
    height: 12px;
}

.skeleton-journal-entry {
    padding: var(--spacing-md);
    border: 1px solid var(--ui-border-color);
    margin-bottom: var(--spacing-sm);
}

.skeleton-journal-date {
    width: 60px;
    height: 0.85em;
    margin-bottom: var(--spacing-xs);
}

.skeleton-journal-title {
    width: 70%;
    height: 1.1em;
    margin-bottom: var(--spacing-sm);
}

.skeleton-journal-content {
    width: 90%;
    margin-bottom: var(--spacing-xs);
}

/* ===== CHARACTER GRID SKELETON LOADERS ===== */
/* Skeleton character card for grid loading state */
.character-card--skeleton {
    pointer-events: none;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.character-card--skeleton .card-thumbnail {
    background-color: var(--ui-dim-color);
    opacity: 0.15;
}

.character-card--skeleton .card-details {
    padding: var(--spacing-sm);
}

.character-card--skeleton .skeleton-name {
    height: 16px;
    width: 70%;
    background: var(--ui-dim-color);
    border-radius: 2px;
    margin-bottom: var(--spacing-xs);
}

.character-card--skeleton .skeleton-info {
    height: 12px;
    width: 50%;
    background: var(--ui-dim-color);
    border-radius: 2px;
    opacity: 0.7;
}

/* Staggered animation delays for skeleton cards */
.character-card--skeleton:nth-child(1) { animation-delay: 0s; }
.character-card--skeleton:nth-child(2) { animation-delay: 0.1s; }
.character-card--skeleton:nth-child(3) { animation-delay: 0.2s; }
.character-card--skeleton:nth-child(4) { animation-delay: 0.15s; }
.character-card--skeleton:nth-child(5) { animation-delay: 0.25s; }
.character-card--skeleton:nth-child(6) { animation-delay: 0.05s; }
.character-card--skeleton:nth-child(7) { animation-delay: 0.12s; }
.character-card--skeleton:nth-child(8) { animation-delay: 0.22s; }
.character-card--skeleton:nth-child(9) { animation-delay: 0.08s; }

/* Invite code display */
.campaign-area-invite {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--terminal-bg);
    border: 1px solid var(--ui-border-color);
    border-radius: 4px;
    margin-bottom: var(--spacing-md);
}

.invite-label {
    color: var(--ui-dim-color);
    font-size: var(--font-size-small);
}

.invite-code {
    font-family: var(--font-mono);
    color: var(--ui-fg-color);
    letter-spacing: var(--tracking-widest);
}

/* ===== MANAGE CAMPAIGN MODAL - INVITE SECTION ===== */
/* Uses same styling as share modal */
.invite-section {
    margin-top: var(--spacing-md);
}

.invite-section-title {
    font-size: 0.85em;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ui-dim-color);
    margin-bottom: 0.5rem;
    display: block;
}

.invite-input-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.invite-input-row .terminal-input {
    flex: 1;
    min-width: 0;
}

/* Pending invites list - matches share modal collaborators styling */
.pending-invites-list {
    border: 1px solid var(--ui-dim-color);
    border-radius: 4px;
    background: var(--terminal-bg-dim);
    max-height: 150px;
    overflow-y: auto;
}

.pending-invites-empty {
    color: var(--ui-dim-color);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 0.75rem;
}

.pending-invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ui-dim-color);
    transition: background-color 0.15s ease;
}

.pending-invite-item:last-child {
    border-bottom: none;
}

.pending-invite-item:hover {
    background-color: var(--ui-bg-translucent);
}

.pending-invite-email {
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.pending-invite-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ui-dim-color);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pending-invite-remove:hover {
    color: var(--error-color, #f44);
    background-color: hsla(0, 70%, 50%, 0.15);
}

/* Modal footer with items spread (delete left, save/cancel right) */
.modal-footer-spread {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-footer-right {
    display: flex;
    gap: var(--spacing-sm);
}

.modal-footer-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-footer-space-between .modal-footer-left,
.modal-footer-space-between .modal-footer-right,
.modal-footer-space-between .modal-footer-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Text link button - follows .text-link pattern from terminal-theme.css */
.terminal-btn-link {
    /* Extends: .text-link */
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    color: var(--ui-dim-color);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-speed);
}

.terminal-btn-link:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

/* Danger variant - follows .text-link.link--danger pattern */
.terminal-btn-link--danger {
    color: var(--terminal-error, #f44);
}

.terminal-btn-link--danger:hover {
    color: var(--terminal-error, #f44);
    text-decoration: underline;
}

/* ===== JOIN CAMPAIGN - INVITATIONS LIST ===== */
.invitations-list {
    border: 1px solid var(--ui-dim-color);
    border-radius: 4px;
    background: var(--terminal-bg-dim);
    max-height: 250px;
    overflow-y: auto;
}

.invitations-loading,
.invitations-empty {
    color: var(--ui-dim-color);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: 1.5rem;
}

.invitation-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ui-dim-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

.invitation-item:hover {
    background-color: var(--ui-bg-translucent);
}

.invitation-item.is-selected {
    background-color: color-mix(in srgb, var(--ui-primary-bg-color) 15%, transparent);
}

.invitation-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ui-dim-color);
    border-radius: 50%;
    margin-right: 0.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease;
}

.invitation-item:hover .invitation-radio {
    border-color: var(--ui-fg-color);
}

.invitation-item.is-selected .invitation-radio {
    border-color: var(--ui-fg-color);
}

.invitation-item.is-selected .invitation-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--ui-fg-color);
    border-radius: 50%;
}

.invitation-info {
    flex: 1;
    min-width: 0;
}

.invitation-name {
    font-size: var(--font-size-base);
    color: var(--ui-fg-color);
    font-weight: var(--font-weight-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invitation-inviter {
    font-size: var(--font-size-sm);
    color: var(--ui-primary-color);
    margin-top: 0.125rem;
}

.invitation-desc {
    font-size: var(--font-size-sm);
    color: var(--ui-dim-color);
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-btn-icon {
    background: transparent;
    border: none;
    color: var(--ui-dim-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    font-size: 1em;
    line-height: 1;
    transition: color var(--transition-speed);
}

.terminal-btn-icon:hover {
    color: var(--ui-fg-color);
}

/* Party members */
.campaign-area-party {
    margin: 0 0 32px 0;
}

/* Party section uses sheet-header--collapsible - inherits theme */
.campaign-area-party .sheet-header--collapsible {
    color: var(--ui-dim-color);
    border-color: var(--ui-border-color);
}

.campaign-area-party .sheet-header--collapsible:hover {
    color: var(--ui-fg-color);
    border-color: var(--ui-dim-color);
}

.campaign-area-party .sheet-header-toggle {
    color: var(--ui-dim-color);
}

.campaign-area-party .sheet-header--collapsible:hover .sheet-header-toggle {
    color: var(--ui-fg-color);
}

.party-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* ===== PARTY CARD (compact character card for party grid) ===== */
/* Party cards use identical styling to main character grid cards */
.party-card {
    /* Inherits all character-card base styling */
}

/* Party card tags (You, Admin) - positioned over thumbnail top-left */
.party-card-tags {
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    z-index: 1;
}

.party-card-tag {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-radius: 3px;
    padding: 1px 4px;
    background-color: rgba(0, 0, 0, 0.7);
}

.party-card-tag--you {
    color: var(--ui-fg-color);
}

.party-card-tag--admin {
    color: var(--ui-dim-color);
}

.party-card-tag--left {
    color: var(--ui-dim-color);
    opacity: 0.8;
}

/* Past campaign party cards - readonly, slightly dimmed */
.party-card--past {
    cursor: default;
    opacity: 0.9;
}

.party-card--past:hover {
    border-color: var(--ui-border-color);
    background-color: transparent;
}

/* Invited card - placeholder state */
.party-card--invited {
    opacity: 0.7;
}

.party-card--invited .card-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-dim-color);
    font-size: 24px;
    opacity: 0.5;
}

.party-card--invited .card-name {
    text-align: center;
    color: var(--ui-dim-color);
}

.party-card--invited .card-info {
    text-align: center;
}

/* No character assigned state */
.party-card--no-char .card-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-dim-color);
    font-size: 20px;
    opacity: 0.4;
}

.party-card--no-char .card-name {
    color: var(--ui-dim-color);
    font-style: italic;
}

/* Responsive: 2 columns on narrow screens */
@media (max-width: 500px) {
    .party-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Clickable party cards (other users' characters) */
.party-card--clickable {
    cursor: pointer;
}

.party-card--clickable:hover {
    border-color: var(--ui-border-color);
    background-color: var(--ui-bg-translucent);
}

/* Party card placeholder thumbnail */
.party-card .party-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-dim-color);
    font-size: 24px;
    opacity: 0.5;
}

.party-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

.party-member-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.party-member-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.party-member-name {
    color: var(--ui-fg-color);
}

.party-member-separator {
    color: var(--ui-dim-color);
    opacity: 0.5;
}

.party-member-info {
    color: var(--ui-dim-color);
    font-size: var(--font-size-small);
}

.party-member-email {
    color: var(--ui-dim-color);
    font-size: 12px;
    opacity: 0.7;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .party-member {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

.party-empty {
    color: var(--ui-dim-color);
    font-size: var(--font-size-small);
    font-style: italic;
    padding: var(--spacing-sm) 0;
}

.party-member--no-char .party-member-name {
    color: var(--ui-dim-color);
    font-style: italic;
}

/* Admin tag - uses dim bg + bright text style (like condition tags) */
.party-member-admin-tag {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

/* Invited tag - dimmer style for pending invitations */
.party-member-invited-tag {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-dim-color);
    background-color: color-mix(in srgb, var(--ui-dim-color) 15%, transparent);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

/* You tag - indicates the current user's character (accent style like Admin) */
.party-member-you-tag {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

/* Invited party member row - dimmed appearance */
.party-member--invited {
    opacity: 0.7;
}

.party-member--invited .party-member-email {
    font-style: normal;
    font-size: var(--font-size-base);
}

/* See more link for party members when >3 */
.party-see-more {
    font-size: var(--font-size-xs);
    color: var(--ui-fg-color);
    text-decoration: underline;
    cursor: pointer;
    margin-top: var(--spacing-xs);
    display: inline-block;
}

.party-see-more:hover {
    color: var(--ui-fg-color);
    opacity: 0.8;
}

/* Clickable party members (other users' characters) */
.party-member--clickable {
    cursor: pointer;
    transition: background-color var(--transition-speed), 
                transform var(--transition-speed);
    border-radius: 4px;
    margin: 0 calc(var(--spacing-xs) * -1);
    padding: var(--spacing-xs);
}

.party-member--clickable:hover {
    background-color: var(--context-hover);
}

.party-member--clickable:active {
    transform: scale(0.98);
}

.party-member--clickable .party-member-name::after {
    content: '→';
    margin-left: var(--spacing-xs);
    opacity: 0;
    transition: opacity var(--transition-speed);
    color: var(--ui-dim-color);
    font-size: var(--font-size-xs);
}

.party-member--clickable:hover .party-member-name::after {
    opacity: 0.7;
}

/* Party member sheet modal (view-only) */
.party-member-sheet-modal {
    max-width: min(90%, 600px);
    /* Follow same height constraint as other modals: calc(100% - 48px) is base,
       but we use 85vh like spell edit modal for scrollable content */
    max-height: min(calc(100% - 48px), 85vh);
    display: flex;
    flex-direction: column;
}

.party-member-sheet-modal .modal-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    padding-top: 8px;
}

.party-member-modal-title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.party-member-sheet-modal .modal-title {
    font-size: 18px;
    font-weight: 500;
}

.party-member-modal-email {
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    color: var(--ui-fg-color);
    opacity: 0.7;
}

.party-sheet-badge {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-dim-color);
    background-color: transparent;
    border: 1px solid var(--ui-dim-color);
    border-radius: 3px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.party-member-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-md);
}

/* Use theme for character sheet inside the view modal - inherits from modal's parent theme */
.party-member-sheet-body .character-sheet {
    --context-accent: var(--ui-fg-color);
    --context-accent-dim: var(--ui-dim-color);
    --sheet-accent: var(--ui-fg-color);
    --sheet-accent-dim: var(--ui-dim-color);
    --sheet-accent-bright: var(--ui-fg-color);
    --sheet-label-color: var(--ui-fg-color);
    --sheet-value-color: var(--ui-fg-color);
    --sheet-border-color: var(--ui-dim-color, hsla(var(--theme-yellow-h), var(--theme-yellow-s), var(--theme-yellow-l-dim), 0.5));
    --sheet-box-bg: var(--ui-bg-translucent, hsla(var(--theme-yellow-h), var(--theme-yellow-s), var(--theme-yellow-l-dim), 0.15));
    --sheet-ability-box-bg: var(--ui-bg-translucent, hsla(var(--theme-yellow-h), var(--theme-yellow-s), var(--theme-yellow-l-dim), 0.15));
    --sheet-box-border-color: var(--ui-dim-color, hsla(var(--theme-yellow-h), var(--theme-yellow-s), var(--theme-yellow-l-dim), 0.4));
    color: var(--ui-fg-color);
}

/* Portrait area theme - brighter background for multiply blend - uses theme colors */
.party-member-sheet-body .portrait-container--original-mode:has(.original-portrait.is-loaded) {
    /* Use theme accent color for portrait background blend */
    background: var(--ui-accent-bg, var(--ui-fg-color));
}

.party-member-sheet-body .ascii-portrait {
    color: var(--ui-fg-color);
}

/* Party member navigation bar - matches CharacterNavBar style */
.party-member-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 4px 16px;
    margin: 8px;
    background: var(--ui-bg-translucent, rgba(0, 0, 0, 0.3));
    border-radius: 2px;
    flex-shrink: 0;
}

.party-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--ui-dim-color);
    font-family: var(--font-terminal);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 4px 0;
    transition: color var(--transition-speed);
    max-width: 120px;
}

.party-nav-btn:hover {
    color: var(--ui-fg-color);
}

.party-nav-btn:hover .party-nav-name {
    text-decoration: underline;
}

.party-nav-arrow {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.party-nav-name {
    color: var(--ui-dim-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-nav-count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-sm);
    color: var(--ui-dim-color);
    font-family: var(--font-terminal);
    white-space: nowrap;
}

/* Loading state for party member sheet modal */
.party-member-sheet-modal--loading {
    min-width: 200px;
    min-height: 200px;
}

.party-member-sheet-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

/* ===== PAST ADVENTURES ===== */

/* Past Adventures link in no-campaign state */
.campaign-area-past-link {
    margin-top: var(--spacing-md);
    text-align: left;
}

.past-adventures-link {
    /* Extends: .action-link */
    font-size: var(--font-size-sm);
    color: var(--ui-dim-color);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.past-adventures-link:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

.past-adventures-link-icon {
    font-size: var(--font-size-base);
}

/* Past Adventures modal content */
#pastAdventuresModal .modal-content {
    max-width: 700px;
}

/* Breadcrumb navigation */
.modal-breadcrumb {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.breadcrumb-link {
    /* Extends: .link-button */
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.breadcrumb-link:hover {
    color: var(--ui-fg-color);
}

/* Past campaigns list */
.past-adventures-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.past-adventures-loading,
.past-adventures-empty,
.past-adventures-error {
    text-align: center;
    color: var(--ui-dim-color);
    padding: var(--spacing-xl);
}

/* Past campaign card */
.past-campaign-card {
    padding: var(--spacing-md);
    border: 1px solid var(--ui-border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-speed), 
                border-color var(--transition-speed);
}

.past-campaign-card:hover {
    background-color: var(--context-hover);
    border-color: var(--ui-fg-color);
}

.past-campaign-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.past-campaign-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--ui-fg-color);
    flex: 1;
    min-width: 0;
}

.past-campaign-status {
    font-size: var(--font-size-2xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.past-campaign-status--left {
    color: var(--ui-dim-color);
    background-color: color-mix(in srgb, var(--ui-dim-color) 20%, transparent);
}

.past-campaign-status--completed {
    color: var(--ui-fg-color);
    background-color: color-mix(in srgb, var(--ui-fg-color) 20%, transparent);
}

.past-campaign-status--archived {
    color: var(--ui-dim-color);
    background-color: color-mix(in srgb, var(--ui-dim-color) 15%, transparent);
}

.past-campaign-desc {
    font-size: var(--font-size-sm);
    color: var(--ui-dim-color);
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.past-campaign-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--ui-dim-color);
}

.past-campaign-dates {
    font-family: var(--font-mono);
}

.past-campaign-party {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
}

/* Past campaign detail view */
.past-campaign-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.past-campaign-info-section {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--ui-border-color);
}

.past-campaign-info-header {
    margin-bottom: var(--spacing-sm);
}

.past-campaign-info-dates {
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    color: var(--ui-fg-color);
}

.past-campaign-description {
    font-size: var(--font-size-base);
    color: var(--ui-dim-color);
    line-height: var(--line-height-normal);
}

.past-campaign-section {
    /* Uses existing sheet-header styles */
}

.past-campaign-party-list {
    margin-top: var(--spacing-sm);
    /* Use same grid layout as active campaign party */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* Responsive: 2 columns on narrow screens (matching active campaign) */
@media (max-width: 500px) {
    .past-campaign-party-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.past-campaign-journal-list {
    margin-top: var(--spacing-sm);
}

/* Read-only party members in past campaigns */
.party-member--readonly {
    cursor: default;
}

.party-member-left-badge {
    font-size: var(--font-size-2xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ui-dim-color);
    background-color: color-mix(in srgb, var(--ui-dim-color) 15%, transparent);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: var(--spacing-xs);
}

/* Read-only journal entries in past campaigns */
.journal-entry--readonly {
    border: 1px solid var(--ui-border-color);
    border-radius: 4px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.journal-entry--readonly .journal-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--ui-dim-color);
}

.journal-entry--readonly .journal-entry-title {
    font-weight: var(--font-weight-medium);
    color: var(--ui-fg-color);
    margin-bottom: var(--spacing-xs);
}

.journal-entry--readonly .journal-entry-content {
    font-size: var(--font-size-sm);
    color: var(--ui-dim-color);
    line-height: var(--line-height-normal);
    white-space: pre-wrap;
}

.journal-empty {
    text-align: center;
    color: var(--ui-dim-color);
    padding: var(--spacing-lg);
    font-style: italic;
}

/* Campaign info (name + description) */
.campaign-area-info {
    margin: 0 0 32px 0;
}

/* Campaign info header - eyebrow + name + overflow menu */
.campaign-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--ui-border-color);
}

.campaign-info-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Eyebrow label - small caps */
.campaign-eyebrow {
}

/* Campaign name - larger, below eyebrow */
.campaign-name {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--ui-fg-color);
    line-height: 1.2;
}

/* Campaign action link (manage/leave) - follows .action-link pattern */
.campaign-action-link {
    /* Extends: .action-link */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    color: var(--ui-dim-color);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-speed);
}

.campaign-action-link:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

.campaign-action-icon {
    font-size: 1em;
    line-height: 1;
}

/* Danger variant - follows .action-link.link--danger pattern */
.campaign-action-link--danger {
    color: var(--ui-dim-color);
}

.campaign-action-link--danger:hover {
    color: var(--color-danger, #ff6b6b);
    text-decoration: underline;
}

/* Campaign description */
.campaign-desc-text {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    white-space: pre-line;
    margin-top: var(--spacing-sm);
    padding-top: 16px;
}

/* ===== JOURNAL SECTION (inside campaign-area) ===== */
.journal-section {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin: 0 0 32px 0;
}

/* Journal controls row - below collapsible header */
.journal-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-sm);
}

.journal-controls-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.journal-add-link {
    /* Extends: .action-link */
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--ui-dim-color);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.journal-add-link:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

/* Journal section uses sheet-header--collapsible - inherits theme */
.journal-section .sheet-header--collapsible {
    color: var(--ui-dim-color);
    border-color: var(--ui-border-color);
}

.journal-section .sheet-header--collapsible:hover {
    color: var(--ui-fg-color);
}

.journal-section .sheet-header-toggle {
    color: var(--ui-dim-color);
}

.journal-section .sheet-header--collapsible:hover .sheet-header-toggle {
    color: var(--ui-fg-color);
}

/* Journal filter selector (uses custom selector component) */
.journal-filter {
    min-width: 80px;
}

.journal-filter-trigger {
    font-size: var(--font-size-sm);
    padding: 4px 8px;
    min-height: 28px;
}

.journal-filter .selector-menu {
    min-width: 140px;
    max-width: 200px;
}

.journal-filter .selector-caret {
    font-size: 8px;
}

/* Journal settings button - matches .manager-settings-link */
.journal-settings-btn {
    color: var(--ui-dim-color);
    font-size: var(--font-size-xl);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-speed);
}

.journal-settings-btn:hover {
    color: var(--ui-fg-color);
}

@media (max-width: 768px) {
    .journal-title {
        font-size: var(--font-size-base);
    }
    
    .journal-header-left {
        gap: var(--spacing-xs);
    }
    
    .journal-filter-trigger {
        font-size: var(--font-size-xs);
        padding: 3px 6px;
        min-height: 24px;
    }
    
    .journal-filter {
        min-width: 60px;
    }
}

/* Journal entries list - matches skill-prof-list pattern */
.journal-entries {
    flex: 1 0 auto;
    overflow: visible;
    padding-top: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
}

/* Individual journal entry - matches skill-prof-item pattern */
.journal-entry {
    position: relative;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: black;
    transition: border-color var(--transition-speed), background var(--transition-speed);
}

.journal-entry:hover {
    background: var(--context-hover);
}

/* Header - stacked with date above title */
.journal-entry-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
}

/* Meta line - name and date on one line */
.journal-entry-meta {
    display: inline-flex;
    align-items: baseline;
}

/* Date */
.journal-entry-date {
    color: var(--ui-fg-color);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* Character name - displayed before date */
.journal-entry-author {
    color: var(--ui-fg-color);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.journal-entry-author::after {
    content: " • ";
    color: var(--ui-dim-color);
}

/* Style for entries from other party members */
.journal-entry--other {
    /* Removed left border for other users' entries */
}

/* Title - main heading */
.journal-entry-title {
    color: var(--ui-fg-color);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Preview text - matches skill-prof-desc pattern */
.journal-entry-preview {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Full content (hidden by default) */
.journal-entry-full {
    display: none;
    width: 100%;
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    word-break: break-word;
}

/* Character updates shown below journal content */
.journal-entry-updates {
    margin: 8px 0;
    padding: 8px;
    background: var(--ui-bg-translucent, var(--sheet-box-bg));
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

/* Stat boxes within journal entries should use white theme */
.campaign-panel-slot .journal-entry-updates .stat-box,
.campaign-panel-slot.ui-theme-white .journal-entry-updates .stat-box {
    background: var(--ui-bg-translucent, hsla(var(--theme-white-h), var(--theme-white-s), var(--theme-white-l-bright), 0.1));
}

.campaign-panel-slot .journal-entry-updates .stat-box-label,
.campaign-panel-slot.ui-theme-white .journal-entry-updates .stat-box-label {
    color: var(--ui-dim-color);
}

.campaign-panel-slot .journal-entry-updates .stat-box-value,
.campaign-panel-slot.ui-theme-white .journal-entry-updates .stat-box-value {
    color: var(--ui-fg-color);
}

.journal-update-stats {
    color: var(--ui-fg-color);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.journal-update-conditions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Expanded state */
.journal-entry.is-expanded .journal-entry-preview {
    display: none;
}

.journal-entry.is-expanded .journal-entry-full {
    display: block;
}

.journal-entry.is-expanded {
    background: var(--ui-bg-translucent, transparent);
}

/* Clickable cursor */
.journal-entry {
    cursor: pointer;
}

/* Action buttons container */
.journal-entry-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-speed);
}

.journal-entry:hover .journal-entry-actions {
    opacity: 1;
}

/* Edit & Delete buttons - dim by default, brighten on direct hover */
.journal-entry-edit.terminal-btn-icon,
.journal-entry-delete.terminal-btn-icon {
    color: var(--ui-fg-color);
    opacity: 0.4;
    transition: opacity var(--transition-speed);
}

.journal-entry-edit.terminal-btn-icon:hover,
.journal-entry-delete.terminal-btn-icon:hover {
    opacity: 1;
}

/* Delete button sizing */
.journal-entry-delete {
    font-size: var(--font-size-lg);
    line-height: 1;
}

/* Empty journal state */
.journal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    height: 100%;
    background: var(--ui-bg-translucent, var(--sheet-box-bg));
}

.journal-empty-text {
    color: var(--ui-dim-color);
    margin-bottom: var(--spacing-xs);
}

.journal-empty-hint {
    color: var(--ui-dim-color);
    font-size: var(--font-size-small);
    opacity: 0.7;
}

/* Hide on mobile utility */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    /* On mobile, only show grid panel regardless of view state */
    .split-layout[data-view="sheet-campaign"] .panel-character-sheet,
    .split-layout[data-view="sheet-campaign"] .panel-campaign {
        display: none;
    }
    
    .split-layout[data-view="sheet-campaign"] .panel-character-grid {
        display: flex;
    }
}

/* ===== CONTROLS SECTION ===== */
/* BEM alias: .grid__controls */
.controls-section,
.grid__controls {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--ui-bg-color);
    /* Extend background padding to cover scrolling content behind */
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
    /* Negative margins to counteract panel padding so we go edge-to-edge */
    margin: 0 calc(-1 * var(--spacing-xl)) 0 calc(-1 * var(--spacing-xl));
    /* Safari fix: use will-change instead of transform to avoid z-index stacking bugs */
    will-change: transform;
    /* Safari-specific: force compositing layer without transform */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Isolation creates stacking context for pseudo-element */
    isolation: isolate;
}

/* Safari sticky z-index fix: opaque backdrop pseudo-element */
.controls-section::before,
.grid__controls::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: inherit;
    z-index: -1;
    /* Extend slightly below to prevent sub-pixel gaps during scroll */
    bottom: -1px;
}

/* Session in progress notice */
.session-notice {
    margin: 0 0 var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--ui-border-color);
    background-color: var(--ui-bg-translucent);
    font-size: var(--font-size-small);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--ui-fg-color);
}

.session-notice-icon {
    color: var(--ui-fg-color);
}

.session-notice-text {
    flex: 1;
    color: var(--ui-fg-color);
}

.session-notice-time {
    color: var(--ui-dim-color);
}

.session-notice-actions {
    display: flex;
    gap: var(--spacing-md);
}

.session-notice-action {
    /* Extends: .link-button */
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    color: var(--ui-fg-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.session-notice-action:hover {
    color: var(--ui-fg-color);
}

.guest-notice {
    margin: 0 0 var(--spacing-lg) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--ui-border-color);
    background-color: var(--ui-bg-translucent);
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--ui-fg-color);
}

.guest-notice .highlight {
    color: var(--ui-fg-color);
}

.guest-notice-icon {
    color: var(--ui-fg-color);
}

.guest-notice-close {
    margin-left: auto;
    color: var(--ui-fg-color);
}

.guest-notice-close:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

.guest-notice-link {
    /* Extends: .link-button (inherits color from parent) */
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.guest-notice-link:hover {
    color: inherit;
}

/* ===== SEARCH INPUT STYLING TO MATCH .terminal-btn-small =====
   Non-focused: dim border/text, transparent bg, 0.7 opacity (matches selector)
   Focused: bright border/text, full opacity (matches selector hover) */

/* Default unfocused state - dim to match selector */
#searchInput,
#spellSearchInput,
input[type="search"],
input.search-input {
    border: 1px solid var(--ui-dim-color) !important;
    background: transparent !important;
    color: var(--ui-dim-color) !important;
    -webkit-text-fill-color: var(--ui-dim-color) !important;
    opacity: 0.7;
}

/* Focused state - brighten like selector hover */
#searchInput:focus,
#spellSearchInput:focus,
input[type="search"]:focus,
input.search-input:focus {
    border: 1px solid var(--ui-fg-color) !important;
    color: var(--ui-fg-color) !important;
    -webkit-text-fill-color: var(--ui-fg-color) !important;
    opacity: 1;
    box-shadow: 0 0 8px var(--ui-dim-color) !important;
}

/* Spell search in modal - same pattern */
.modal #spellSearchInput {
    border: 1px solid var(--ui-dim-color) !important;
    background: transparent !important;
    opacity: 0.7;
}

.modal #spellSearchInput:focus {
    border: 1px solid var(--ui-fg-color) !important;
    opacity: 1;
    box-shadow: 0 0 8px var(--ui-dim-color) !important;
}

/* ===== SEARCH INPUT ACROSS ALL COLOR THEMES ===== */
/* Unfocused state within themes - dim */
[class*="theme-"] #searchInput,
[class*="theme-"] .search-input-wrapper .terminal-input,
.panel-character-grid[class*="theme-"] #searchInput,
.panel-character-grid[class*="theme-"] .search-input-wrapper .terminal-input {
    border: 1px solid var(--ui-dim-color) !important;
    background: transparent !important;
    opacity: 0.7;
}

/* Focused state within themes - brighten */
[class*="theme-"] #searchInput:focus,
[class*="theme-"] .search-input-wrapper .terminal-input:focus,
.panel-character-grid[class*="theme-"] #searchInput:focus,
.panel-character-grid[class*="theme-"] .search-input-wrapper .terminal-input:focus {
    border: 1px solid var(--ui-fg-color) !important;
    color: var(--ui-fg-color) !important;
    -webkit-text-fill-color: var(--ui-fg-color) !important;
    opacity: 1;
    box-shadow: 0 0 8px var(--ui-dim-color) !important;
}

.search-bar {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: stretch;
    gap: var(--spacing-sm);
}

/* Mobile search button - hidden on desktop */
.mobile-search-btn {
    display: none;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

/* Override base terminal-input styles for search input in character grid panel */
.panel-character-grid .search-input-wrapper .terminal-input {
    padding-right: 28px; /* make room for clear button */
    padding-left: 32px;  /* make room for leading search icon */
    color: var(--ui-dim-color) !important;
    /* iOS Safari fix: override -webkit-text-fill-color to match theme */
    -webkit-text-fill-color: var(--ui-dim-color) !important;
    /* Match search input text size to small button text */
    font-size: var(--font-size-base);
    /* Match .terminal-btn-small: transparent bg + dimmed opacity */
    background: transparent !important;
    opacity: 0.7;
}

/* Placeholder copy (e.g., "Search all 15 characters") */
.panel-character-grid .search-input-wrapper .terminal-input::placeholder {
    color: var(--ui-dim-color) !important;
    font-size: var(--font-size-base);
}

/* Dim the search box when not focused so it feels secondary until active */
/* Use full border shorthand to match .terminal-btn-small exactly */
.panel-character-grid .search-input-wrapper .terminal-input:not(:focus) {
    border: 1px solid var(--ui-dim-color) !important;
}

/* When focused, brighten to match selector hover state */
.panel-character-grid .search-input-wrapper .terminal-input:focus {
    border: 1px solid var(--ui-fg-color) !important;
    color: var(--ui-fg-color) !important;
    -webkit-text-fill-color: var(--ui-fg-color) !important;
    opacity: 1;
    box-shadow: 0 0 8px var(--ui-dim-color) !important;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .terminal-input {
    padding-right: 64px; /* make room for toggle button */
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ui-fg-color);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    padding: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
}

.password-toggle-btn:hover {
    color: var(--terminal-accent);
}

.password-toggle-btn:focus {
    outline: 1px dashed var(--terminal-accent);
    outline-offset: 2px;
}

/* Search icon and clear button use theme colors */
.panel-character-grid .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--ui-dim-color);
    pointer-events: none;
    /* Match input opacity for consistent dimmed appearance */
    opacity: 0.7;
}

.panel-character-grid .search-input-wrapper:focus-within .search-icon {
    color: var(--ui-fg-color);
    opacity: 1;
}

.panel-character-grid .search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ui-dim-color);
    cursor: pointer;
    font-size: var(--font-size-lg);
    line-height: 1;
    padding: 0;
    transition: color var(--transition-speed), transform var(--transition-speed);
}

.panel-character-grid .search-clear-btn:hover {
    color: var(--ui-fg-color);
    /* Match modal close spin: quarter turn on hover */
    transform: translateY(-50%) rotate(90deg);
}

.search-clear-btn.is-hidden {
    display: none;
}

.search-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Grid inline new character button */
.grid-new-character-wrap {
    display: flex;
    align-items: stretch;
}

.grid-new-character-btn {
    white-space: nowrap;
    /* Match sort button padding and font-size */
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    /* Match sort button height behavior */
    height: auto;
    display: inline-flex;
    align-items: center;
}

/* Show quota tooltip on hover for create new button.
   Uses CSS hover similar to .selector-option-wrapper tooltips for reliability. */
.grid-new-character-wrap:hover .custom-tooltip:not(:empty) {
    opacity: 1;
    transform: scale(1);
}

/* Always use bright theme colors for the new character button - override all themes */
#gridNewCharacterBtn,
.panel-character-grid #gridNewCharacterBtn,
button#gridNewCharacterBtn.terminal-btn-small {
    background-color: var(--ui-fg-color) !important;
    color: var(--ui-bg-color) !important;
    border-color: var(--ui-fg-color) !important;
    opacity: 1 !important;
}

#gridNewCharacterBtn:hover:not(:disabled),
.panel-character-grid #gridNewCharacterBtn:hover:not(:disabled),
button#gridNewCharacterBtn.terminal-btn-small:hover:not(:disabled) {
    background-color: transparent !important;
    color: var(--ui-fg-color) !important;
    border-color: var(--ui-fg-color) !important;
    opacity: 1 !important;
}

.sort-trigger-wrap {
    position: relative;
    display: inline-block;
}

.search-sort-btn {
    /* Inherit core visuals (border, colors, font, states) from .terminal-btn-small.
       This class now only handles layout tweaks specific to the sort control. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
    white-space: nowrap;
    /* Match search input padding and font-size to maintain consistent height */
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    /* Fixed width sized for longest label "Date modified" to prevent layout shift
       Override width: 100% from .selector-trigger */
    width: 140px;
    /* Override fixed height from .terminal-btn-small so it matches search input height */
    height: auto;
}

.panel-character-grid .search-sort-btn:hover {
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
}

.panel-character-grid .search-sort-btn.is-active {
    /* Dimmed look while listbox is open */
    border-color: var(--ui-dim-color);
    color: var(--ui-dim-color);
    background-color: rgba(0, 0, 0, 0.6);
}

/* Sort dropdown uses shared .selector-menu / .selector-option styles
   from terminal-theme.css; no additional manager-specific overrides. */

/* ===== CHARACTER COUNT ===== */
.panel-character-grid .character-count {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--ui-dim-color);
}

/* ===== CHARACTER GRID ===== */
/* BEM alias: .grid__list */
.character-grid,
.grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding-top: 1px; /* Ensure top border of cards is visible */
}

/* ===== CHARACTER CARD ===== */
.character-card {
    background-color: var(--ui-bg-color);
    /* Default/unselected: dim theme outline */
    border: 1px solid var(--ui-dim-color);
    padding: 0;
    transition: all var(--transition-speed);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    /* Account for sticky controls section when scrollIntoView is called.
       Height includes: padding (32px top + 16px bottom), search bar (~45px),
       margin (16px), plus optional guest notice (~50px). */
    scroll-margin-top: 160px;
    /* Position context for demo tag */
    position: relative;
}

/* Sample character tag - top left corner */
/* Uses dim bg + bright text style (like condition tags) */
.card-demo-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    padding: 0 4px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent);
    border-radius: 3px;
}

/* Shared character tag - top left corner (matches demo tag position) */
/* Uses dim bg + bright text style (like condition tags) */
.card-shared-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    padding: 0 4px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent);
    border-radius: 3px;
}

/* Pinned character indicator - top right corner (legacy, kept for compatibility) */
.card-pinned-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    opacity: 0.7;
    line-height: 1;
}

/* Subtle highlight for pinned cards */
.character-card.is-pinned {
    border-color: var(--ui-dim-color);
    opacity: 0.7;
}

/* Card status icons - icon-only indicators in top-left corner */
.card-status-icons {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.card-status-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    line-height: 1;
    background-color: color-mix(in srgb, var(--terminal-bg) 70%, transparent);
    border-radius: 3px;
    padding-bottom: 1px;
}

/* Card status icon tooltips - desktop hover */
.card-status-icon.has-tooltip {
    position: relative;
    cursor: help;
}

/* Hide original tooltip - we use portal tooltips instead */
.card-status-icon.has-tooltip .custom-tooltip {
    display: none !important;
}

/* Portal tooltip styles (appended to body by JS) - matches .custom-tooltip in terminal-theme.css */
.card-portal-tooltip {
    max-width: 360px;
    width: max-content;
    white-space: nowrap;
    text-align: left;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
    padding: 4px 8px;
    /* Match .custom-tooltip exactly */
    background-color: rgba(0, 0, 0, 0.85);
    color: var(--ui-dim-color, var(--sheet-accent-dim));
    border: 1px solid var(--ui-dim-color, var(--sheet-accent-dim));
    border-radius: 2px;
    box-shadow: 0 0 8px var(--ui-bg-translucent, hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-dim), 0.3));
    font-family: var(--font-mono);
    word-break: normal;
    overflow-wrap: break-word;
    pointer-events: none;
}

/* Elevate the hovered card above others */
.character-card:has(.card-status-icon.has-tooltip:hover) {
    z-index: 100;
}

/* Mobile: disable tooltips to avoid tap conflicts with card click */
@media (hover: none), (pointer: coarse) {
    .card-status-icon.has-tooltip {
        cursor: default;
        pointer-events: none;
    }
}


/* Hover and keyboard focus (unselected) - bright theme outline, text, and ASCII */
.character-card:hover:not(.is-selected),
.character-card.is-keyboard-focused:not(.is-selected) {
    border-color: var(--ui-border-color);
    background-color: var(--ui-bg-translucent);
    box-shadow: 0 0 15px var(--ui-bg-translucent);
}

.character-card:hover:not(.is-selected) .card-thumbnail,
.character-card.is-keyboard-focused:not(.is-selected) .card-thumbnail,
.character-card:hover:not(.is-selected) .card-name,
.character-card.is-keyboard-focused:not(.is-selected) .card-name,
.character-card:hover:not(.is-selected) .card-info,
.character-card.is-keyboard-focused:not(.is-selected) .card-info {
    color: var(--ui-fg-color);
}
    
.card-thumbnail {
    width: 100%;
    aspect-ratio: 3 / 4;
    font-size: 2.2px;
    line-height: var(--line-height-snug);
    /* Default/unselected: dim theme ASCII */
    color: var(--ui-dim-color);
    /* ASCII art needs a consistent monospace font across all browsers.
       Menlo/Monaco (macOS), Consolas (Windows) have identical metrics in Safari & Chrome. */
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    /* Cross-browser monospace consistency (Safari fix) */
    letter-spacing: 0;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0, 'clig' 0;
    /* Disable Safari's text size adjustment completely */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overflow: hidden;
    /* Flexbox centers the inner <pre> horizontally, pins to top vertically */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0;
    flex: 1 1 auto;
    /* Prevent text selection on ASCII art */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Inner element that holds ASCII text - centered by parent flex */
.card-thumbnail > pre {
    white-space: pre;
    margin: 0;
    /* Explicit font properties instead of 'font: inherit' for Safari compatibility */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    flex-shrink: 0;
    /* Ensure pre takes only content width, not container width */
    width: max-content;
}

/* Original image thumbnail variant */
.card-thumbnail--image {
    /* Reset ASCII-specific styles */
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    white-space: normal;
    color: inherit;
    text-align: left;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    /* Teal background hidden until image loads (prevents flash) */
    background-color: transparent;
    transition: background-color 0.12s ease-in 0.08s;
}

/* Only show theme background once image has loaded */
.card-thumbnail--image:has(img.is-loaded) {
    background-color: var(--ui-fg-color);
}

.card-thumbnail--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    /* Multiply blend with teal background for terminal aesthetic */
    mix-blend-mode: multiply;
    /* Hidden until loaded, then fades in */
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

.card-thumbnail--image img.is-loaded {
    opacity: 0.85;
}

/* On hover/selection, slightly increase opacity for clearer view */
.character-card:hover .card-thumbnail--image img.is-loaded,
.character-card.is-selected .card-thumbnail--image img.is-loaded,
.character-card.is-keyboard-focused .card-thumbnail--image img.is-loaded {
    opacity: 0.95;
}

.card-details {
    padding: var(--spacing-md);
}

.card-name {
    /* Default/unselected: dim theme text */
    color: var(--ui-dim-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-snug);
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-info {
    color: var(--ui-dim-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== EMPTY STATE ===== */
/* BEM alias: .grid__empty */
.empty-state,
.grid__empty {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    display: none;
}

.empty-state.show,
.grid__empty.show {
    display: block;
}

.empty-icon {
    font-size: var(--font-size-6xl);
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-title {
    font-size: var(--font-size-base);
    color: var(--ui-fg-color);
    margin-bottom: var(--spacing-sm);
}

.empty-message {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
}

.new-character-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-character-card .card-details {
    text-align: center;
}

/* ===== CHARACTER SHEET (Right Panel) ===== */
.sheet-placeholder {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--terminal-dim);
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: var(--spacing-lg);
}

.sheet-placeholder:not(.is-hidden) {
    display: flex;
}

/* Empty state container - matches campaign-area-description styling */
.sheet-empty-state {
    color: var(--ui-dim-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    padding: var(--spacing-lg);
    background: var(--ui-bg-translucent, var(--ui-bg-color, var(--terminal-bg)));
    border-radius: 4px;
    text-align: center;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.sheet-empty-text {
    opacity: 0.8;
}

.placeholder-icon {
    font-size: var(--font-size-6xl);
    margin-bottom: var(--spacing-md);
    opacity: 0.3;
}

.placeholder-text {
    font-size: var(--font-size-base);
}

/* ===== EDIT DETAILS MODAL ===== */
#editDetailsModal .terminal-textarea {
    min-height: 120px;
}

#editDetailsModal #editBackstory {
    min-height: 180px;
}

/* Disabled inputs for owner-only fields (e.g., name for shared characters) */
#editDetailsModal .terminal-input:disabled,
#editDetailsModal .terminal-textarea:disabled,
#editDetailsModal .terminal-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.02);
}

/* Owner-only field indicator - subtle lock icon effect */
#editDetailsModal .terminal-input.is-owner-only {
    border-style: dashed;
}

/* Remove border for sections with grid layouts */
.stat-grid + .sheet-header,
.ability-grid + .sheet-header,
.sheet-section:has(.stat-grid) .sheet-header,
.sheet-section:has(.ability-grid) .sheet-header {
    border-bottom: none;
    padding-bottom: 0;
}

.sheet-header-title {
    flex: 1;
    text-transform: uppercase;
}

.sheet-subsection-title {
    margin-top: 4px;
    padding-top: 8px;
    color: var(--ui-fg-color);
}

/* Character sheet bullet lists - proper hanging indent */
.sheet-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.2em;
}

.sheet-list li {
    padding-left: 0.3em;
}

/* Spell list items need special handling for the description */
.sheet-list .spell-list-item {
    margin-bottom: 0;
}

.sheet-list .spell-list-description {
    margin-left: -1.5em;
    padding-left: 1.5em;
    margin-top: 2px;
    margin-bottom: 4px;
}

/* Currency display in equipment section */
.sheet-currency {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--ui-dim-color, var(--terminal-dim));
    font-size: 0.95em;
}

.sheet-currency .currency-label {
    color: var(--ui-fg-color);
}

.sheet-currency .currency-value {
    color: var(--ui-fg-color);
    font-weight: var(--font-weight-normal);
}

/* Status conditions display - inline in header */
.conditions-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
    /* Allow tooltips to overflow */
    overflow: visible;
}

/* Combat stats section: wrap conditions to own row on smaller viewports */
#combat-stats-section .sheet-header {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    #combat-stats-section .conditions-tags {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: var(--spacing-xs);
    }
}

.condition-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 3px;
    border: none;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    background: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent);
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    /* Position relative for tooltip */
    position: relative;
    /* Allow tooltips to overflow */
    overflow: visible;
}

/* Condition-specific tooltip styling */
.condition-tag.has-tooltip[data-tooltip]:hover::before {
    /* Align to right side of trigger */
    left: auto;
    right: 0;
    /* Sensible width */
    width: max-content;
    max-width: 280px;
    /* Typography matching .custom-tooltip */
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--ui-dim-color);
    border-radius: 2px;
    color: var(--ui-dim-color);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
    text-transform: none;
    text-align: left;
    box-shadow: 0 0 8px var(--context-hover);
}

/* Hide print-only name on screen - only shown in print */
.print-only-name {
    display: none;
}

.original-portrait {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: none;
}

/* ===== WELCOME MODAL (BUILDER-STYLE SPLASH) ===== */
.welcome-modal {
    width: fit-content;
    max-width: 90%;
}

.welcome-modal .modal-body {
    padding: 24px;
}

.welcome-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: center;
    justify-content: center;
}

.welcome-modal .splash-content {
    flex: 1 1 auto;
    min-width: min(400px, 100%);
    max-height: 60vh;
    overflow: auto;
}

.welcome-modal .splash-art {
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-modal .splash-logo-img {
    max-height: 60vh;
    max-width: 100%;
    width: auto;
    height: auto;
}

.welcome-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 220px;
    flex: 0 1 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.welcome-actions .terminal-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
}

.welcome-actions .terminal-btn:hover {
    border-color: var(--ui-fg-color);
    background: var(--context-hover);
    box-shadow: 0 0 10px var(--context-hover);
}

.welcome-actions .terminal-btn-primary {
    background-color: var(--ui-fg-color);
    border-color: var(--ui-fg-color);
    color: var(--terminal-bg);
}

.welcome-actions .terminal-btn-primary:hover {
    background-color: transparent;
    color: var(--ui-fg-color);
    border-color: var(--ui-fg-color);
    box-shadow: 0 0 15px var(--context-hover);
}

.welcome-version {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-small);
    color: var(--ui-dim-color);
    text-align: center;
}

/* Short viewport: side-by-side layout */
@media (max-height: 580px) {
    .welcome-modal {
        max-width: 95%;
    }
    
    .welcome-body {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .welcome-modal .splash-content {
        flex: 0 0 auto;
        min-width: 0;
        max-height: none;
    }
    
    .welcome-modal .splash-logo-img {
        max-height: 50vh;
        height: auto;
        width: auto;
    }
    
    .welcome-actions {
        flex: 0 0 auto;
        min-width: 180px;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* Very short viewport: even more compact */
@media (max-height: 450px) {
    .welcome-modal .modal-body {
        padding: var(--spacing-md);
    }
    
    .welcome-modal .splash-logo-img {
        max-height: 40vh;
    }
    
    .welcome-actions {
        min-width: 160px;
        gap: var(--spacing-xs);
    }
    
    .welcome-version {
        margin-top: var(--spacing-sm);
    }
}

/* ===== UTILITY CLASSES ===== */
.is-hidden {
    display: none !important;
}

.file-input-hidden {
    display: none;
}

.fade-out {
    opacity: 0 !important;
    transition: opacity 0.3s ease-out;
}

.fade-in {
    opacity: 1 !important;
    transition: opacity 0.3s ease-in;
}

/* Inline-style replacements from HTML */
.file-name-label {
    margin-left: var(--spacing-sm);
}

.modal-body-question {
    margin-top: var(--spacing-md);
}

.duplicate-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.modal-footer-centered {
    justify-content: center;
}

.modal-footer-end {
    justify-content: flex-end;
}

/* Inline notice - replaces modal body/footer when shown */
.modal-inline-notice {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--spacing-lg);
}

.modal-inline-notice-body {
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.modal-inline-notice-body .terminal-text {
    color: var(--ui-fg-color);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.modal-inline-notice-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--spacing-lg);
}

/* ===== CAMPAIGN MODALS ===== */
/* Manage Campaign modal - flex to content, scroll if needed */
#manageCampaignModal .modal-content {
    max-height: 85vh;
}

#manageCampaignModal .modal-body {
    overflow-y: auto;
}

/* Members list should scroll if content overflows */
#manageCampaignModal .share-collaborators-list {
    max-height: 150px;
    overflow-y: auto;
}

#manageCampaignDesc {
    min-height: 120px;
    resize: none;
}

/* Narrow modal variant for simple forms */
.modal-content--narrow {
    max-width: 480px;
}

/* Small modal variant for settings/simple dialogs */
/* Code input styling (for invite codes) */
.terminal-input--code {
    font-family: var(--font-mono);
    font-size: 1.2em;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    text-align: center;
}

/* Invite code display */
.invite-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l), 0.1);
    border: 1px solid var(--ui-dim-color);
    border-radius: 4px;
}

.invite-code-text {
    font-family: var(--font-mono);
    font-size: 1.8em;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-widest);
    color: var(--ui-fg-color);
}

.campaign-created-body {
    text-align: center;
}

/* ===== CHARACTER UPDATE MODAL ===== */
#characterUpdateModal .settings-row-inline {
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-lg);
}

#characterUpdateModal .settings-inline-field {
    flex: 1 1 120px;
    min-width: 120px;
}

#characterUpdateModal .settings-inline-field .terminal-input {
    width: 100%;
}

/* Hide number input spinners */
#characterUpdateModal input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

#characterUpdateModal input[type="number"]::-webkit-outer-spin-button,
#characterUpdateModal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.terminal-input--short {
    width: 80px;
}

.terminal-select--narrow {
    width: auto;
    min-width: 44px;
    padding: var(--spacing-xs) var(--spacing-sm);
}

.hp-input-group,
.gold-input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.hp-input-group .terminal-input,
.gold-input-group .terminal-input {
    flex: 1;
    min-width: 50px;
}

.hp-divider {
    color: var(--ui-fg-color);
    opacity: 0.6;
}

.hp-max {
    color: var(--ui-fg-color);
    opacity: 0.6;
    min-width: 24px;
}

/* Gold sign custom selector - compact, matches input height */
.gold-sign-selector {
    flex-shrink: 0;
}

.gold-sign-selector .selector-trigger {
    min-width: 0;
    width: 40px;
    padding: var(--spacing-sm);
    text-align: center;
    line-height: var(--line-height-normal);
}

.gold-sign-selector .selector-menu {
    min-width: 40px;
}

.gold-sign-selector .selector-option {
    justify-content: center;
    padding: var(--spacing-sm);
}

/* Condition checkboxes layout */
.condition-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-xl);
}

/* Settings row inline variant for side-by-side label + input */
.settings-row--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.settings-row--inline .settings-label {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ===== AUTH UI / HEADER THEMING ===== */
/* Header uses theme colors - can be themed by applying theme classes to header or parent */
.terminal-header .terminal-title {
    /* Use theme foreground color - inherits from parent theme class */
    color: var(--ui-fg-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.manager-settings-link {
    /* Extends: .action-link (icon variant) */
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-xl);
    color: var(--ui-dim-color);
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-speed);
    /* Center the gear icon visually */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-1px);
}

.manager-settings-link:hover {
    color: var(--ui-fg-color);
}

/* Settings modal layout (shared with builder via SettingsModal) */
.settings-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
}

.settings-section {
    padding: var(--spacing-md);
    border-radius: 4px;
    /* Use a translucent, theme-aware background instead of an explicit outline.
       This respects the active UI theme tokens (green / teal / yellow). */
    background: color-mix(in srgb, var(--ui-primary-bg-color) 10%, transparent);
}

.settings-row {
    margin-bottom: 0;
}

/* Spacing utilities */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Inline row: places multiple fields side by side */
.settings-row-inline {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.settings-inline-field {
    flex: 0 1 auto;
}

.settings-inline-field--grow {
    flex: 2;
}

.settings-inline-field--quality {
    flex: 0 0 auto;
    min-width: 100px;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-group-label {
    color: var(--terminal-fg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
}

/* Inherit theme from modal parent (uses base modal theme as fallback) */
.modal .settings-group-label,
.modal-content .settings-group-label {
    color: var(--ui-fg-color) !important;
    text-transform: uppercase !important;
}

.settings-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--context-accent);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: var(--tracking-wider);
}

.settings-radio-label {
    color: var(--context-accent);
}

/* Settings modal: custom radio buttons for portrait view and similar options */
.settings-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.settings-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.settings-radio-option input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1.5px solid var(--context-accent);
    background: transparent;
    margin: 0;
    position: relative;
    box-shadow: 0 0 0 0 transparent;
    cursor: pointer;
}

.settings-radio-option input[type='radio']::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--context-accent);
    transform: scale(0);
    opacity: 0;
    transition:
        transform 120ms ease-out,
        opacity 120ms ease-out;
}

.settings-radio-option input[type='radio']:checked::before {
    transform: scale(1);
    opacity: 1;
}

.settings-radio-option input[type='radio']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--context-hover);
}

/* Builder settings modal: selector menus are detached to <body> so they
   escape overflow clipping automatically. Modal can scroll normally. */
.builder-settings-modal .selector-menu {
    z-index: 999;
}

/* Reduce bottom padding in settings modal - the grid gap provides enough spacing */
.builder-settings-modal .modal-body {
    padding-bottom: var(--spacing-sm);
}

/* Settings checkbox (similar to spell picker checkbox) */
.settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.settings-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--ui-border-color);
    border-radius: 2px;
    background-color: transparent;
    position: relative;
}

.settings-checkbox:checked {
    border-color: var(--ui-primary-bg-color);
    background-color: var(--ui-primary-bg-color);
}

.settings-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ui-on-primary-color, var(--terminal-bg));
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

.settings-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--context-hover);
}

.settings-checkbox-text {
    color: var(--ui-fg-color);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.settings-hint--small {
    font-size: var(--font-size-base);
    color: var(--ui-fg-color);
    margin-top: 4px;
    margin-left: 22px; /* align with checkbox label (14px checkbox + 8px gap) */
}

/* User status text styling (inside trigger button) */
/* Header user info display - uses theme colors */
.terminal-header #userInfoDisplay {
    font-size: var(--font-size-base);
    white-space: nowrap;
    color: var(--ui-fg-color);
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-right: 4px;
    overflow: hidden;
    opacity: 1;
    padding-right: 0;
}

.user-status-icon {
    display: none; /* hide cloud/local glyph; we only show the text label */
}

.user-status-text {
    line-height: var(--line-height-snug);
}

/* Username + auth/log links in header should all use theme colors */
.terminal-header #userInfoDisplay .terminal-link {
    color: var(--ui-fg-color);
}

/* userInfoDisplay is now non-interactive, no hover state needed */

/* Dim the header auth button (LOGIN / LOGOUT) so it reads as secondary */
.terminal-header .header-actions #authBtn {
    /* Use theme dim color */
    border-color: var(--ui-dim-color);
    color: var(--ui-dim-color);
    opacity: 0.7;
}

.terminal-header .header-actions #authBtn:hover:not(:disabled) {
    /* On hover, brighten slightly but keep it softer than primary CTAs */
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
    opacity: 1;
}

/* Mobile: disable hover states for login/logout buttons */
@media (hover: none), (pointer: coarse) {
    .terminal-header .header-actions #authBtn:hover:not(:disabled) {
        border-color: var(--ui-dim-color);
        color: var(--ui-dim-color);
        opacity: 0.7;
    }
}

/* Mobile: hide account info in header (accessible via overflow menu instead) */
@media (max-width: 768px) {
    .terminal-header #userInfoDisplay {
        display: none !important;
    }
}


/* Header primary buttons: always show filled style using header's theme.
   Works with ANY theme class (yellow, teal, green, pink, white, orange, red, violet, blue).
   The header's theme class sets --ui-primary-bg-color, and the button inherits it.
   Using !important to ensure these override any other rules. */
.terminal-header .terminal-btn-primary {
    /* Use modal-accent directly as fallback if ui-primary-bg-color doesn't resolve */
    background-color: var(--ui-primary-bg-color) !important;
    color: var(--ui-on-primary-color, var(--terminal-bg)) !important;
    border-color: var(--ui-primary-bg-color) !important;
}

.terminal-header .terminal-btn-primary:hover:not(:disabled) {
    background-color: transparent !important;
    color: var(--ui-primary-bg-color) !important;
    border-color: var(--ui-primary-bg-color) !important;
}

.terminal-text-error {
    color: var(--terminal-error);
    font-weight: var(--font-weight-normal);
    margin-top: var(--spacing-sm);
}

.terminal-link {
    /* Extends: .text-link */
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--ui-dim-color);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.terminal-link:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

/* ===== MIGRATION STATUS ===== */
#migrationStatus {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--ui-border-color);
    background: hsla(var(--theme-terminal-h), var(--theme-terminal-s), var(--theme-terminal-l-bright), 0.05);
}

.modal-section-label {
    margin-top: var(--spacing-lg);
}

/* Account styles */
.account-mode {
    /* No special styles needed - transitions handled by JS */
}

.account-mode.is-hidden {
    display: none;
}

.account-username {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--ui-fg-color);
}

.account-edit-link {
    /* Extends: .link-button .link--muted */
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    margin-left: var(--spacing-sm);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.account-edit-link:hover {
    opacity: 1;
}

.account-email {
    font-size: var(--font-size-base);
    color: var(--ui-fg-color);
    opacity: 0.7;
    margin: 0;
}

.account-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.account-field-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ui-fg-color);
    opacity: 0.6;
}

/* ========================================
   OVERFLOW ACCOUNT HEADER
   ======================================== */

.overflow-account-header {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overflow-account-header.is-hidden {
    display: none;
}

.overflow-username {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--ui-fg-color);
    line-height: var(--line-height-snug);
}

.overflow-email {
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    color: var(--ui-fg-color);
    opacity: 0.8;
    line-height: var(--line-height-snug);
}

.overflow-edit-username {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--ui-fg-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease;
    margin-top: var(--spacing-xs);
}

.overflow-edit-username:hover {
    opacity: 1;
}

.overflow-separator {
    border-bottom: 1px solid var(--ui-border-color);
    margin: 0;
}

.overflow-separator.is-hidden {
    display: none;
}

/* Ability + combat grids inside Edit Details modal */
.modal-grid-combat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.modal-grid-abilities {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.modal-grid-abilities label,
.modal-grid-combat label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* iOS Safari fix: ensure number inputs in narrow grid columns display text properly */
.modal-grid-abilities input[type="number"],
.modal-grid-combat-hp input[type="number"],
.modal-grid-combat-def input[type="number"] {
    /* Force text visibility on iOS Safari */
    -webkit-text-fill-color: var(--ui-fg-color);
    opacity: 1;
    /* Prevent iOS zoom on focus (requires >= 16px) */
    font-size: var(--font-size-md);
    /* Center text in narrow inputs for better readability */
    text-align: center;
    /* Ensure padding doesn't clip text */
    padding: var(--spacing-sm) 4px;
    /* Remove iOS default styling that may interfere */
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.modal-grid-combat-hp,
.modal-grid-combat-def {
    display: grid;
    gap: var(--spacing-sm);
}

.modal-grid-combat-hp {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modal-grid-combat-def {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-grid-combat-hp label,
.modal-grid-combat-def label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===== CARD SELECTION OVERRIDES (left panel) ===== */
/* Manager screen scrollbars keep teal theme for the right-hand sheet panel */
.manager-screen {
    --scrollbar-track-color: hsl(var(--theme-teal-h), 70%, 7%);
    --scrollbar-thumb-color: hsla(var(--theme-teal-h), calc(var(--theme-teal-s) * 0.67), var(--theme-teal-l-dim), 0.5);
    --scrollbar-thumb-hover-color: hsla(var(--theme-teal-h), var(--theme-teal-s), var(--theme-teal-l-bright), 0.9);
}

/* Selected card uses theme colors */
.character-card.is-selected {
    border-color: var(--ui-border-color) !important;
    background-color: var(--ui-bg-translucent);
    /* Breathing glow - soft diffuse glow, plus drop shadow to ground the card. */
    box-shadow:
        0 0 0 1px var(--ui-bg-translucent),
        0 0 12px var(--ui-bg-translucent),
        0 0 28px var(--ui-bg-translucent),
        0 10px 22px rgba(0, 0, 0, 0.6);
    animation: card-glow 4.6s ease-in-out 0.3s infinite;
}

.character-card.is-selected .card-thumbnail {
    /* Selected: bright theme ASCII art */
    color: var(--ui-border-color) !important;
}

.character-card.is-selected .card-name {
    /* Selected: reversed text area → bright theme background, black text */
    color: #000000 !important;
}

.character-card.is-selected .card-info {
    color: #000000 !important;
}

.character-card.is-selected .card-details {
    background-color: var(--ui-primary-bg-color);
    color: var(--ui-on-primary-color);
}

/* Hover and keyboard focus for selected cards - keep bright theme treatment */
.character-card.is-selected:hover,
.character-card.is-selected.is-keyboard-focused {
    border-color: var(--ui-border-color) !important;
    background-color: var(--ui-bg-translucent);
    /* Slightly intensified glow on hover/focus, keep the grounding drop shadow. */
    box-shadow:
        0 0 0 1px var(--ui-bg-translucent),
        0 0 16px var(--ui-bg-translucent),
        0 0 35px var(--ui-bg-translucent),
        0 10px 24px rgba(0, 0, 0, 0.7) !important;
}

/* (All modal theming is now handled by terminal-theme.css so it can be shared across apps.) */

/* ===== ANIMATIONS ===== */
/* DEPRECATED: Old text-based spinner (↻ glyph). Replaced by .spinner-cube-* in terminal-theme.css.
   Keeping these rules for backward compatibility with any legacy code that hasn't been migrated yet. */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    font-size: var(--font-size-lg);
    color: currentColor;
    text-shadow: none;
    vertical-align: middle;
    margin-right: 8px;
}

.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl);
    /* Solid background to cover content underneath while loading */
    background: var(--ui-bg-color);
    /* Ensure full coverage of grid cell */
    width: 100%;
    height: 100%;
}

.split-layout {
    position: relative;
}

/* ===== ANIMATED SHEET EXPANSION (Desktop) ===== */
@media (min-width: 769px) {
    /* Default state: both panels at 50%, no transform */
    .panel-character-grid {
        flex: 0 0 50%;
        transform: translateX(0);
        margin-right: 0;
        transition: 
            transform 0.4s ease,
            margin-right 0.4s ease,
            opacity 0.3s ease;
    }
    
    .panel-character-sheet {
        flex: 0 0 50%;
        transition: flex-basis 0.4s ease;
    }
    
    /* Expanded state: grid slides off-screen, maintaining its size */
    .split-layout.is-sheet-expanded .panel-character-grid {
        display: flex !important;
        /* Slide left by its own width */
        transform: translateX(-100%);
        /* Collapse its space so sheet can expand */
        margin-right: -50%;
        opacity: 0;
        pointer-events: none;
    }
    
    /* Expanded state: sheet fills full width */
    .split-layout.is-sheet-expanded .panel-character-sheet {
        flex: 1 1 100%;
    }
    
    /* Sheet column width is calculated by JS to match minimized view: (50% of split-layout) - 66px.
       Campaign panel takes remaining space with 1fr. */
    .split-layout.is-sheet-expanded .sheet-campaign-grid,
    .split-layout.is-sheet-expanded .sheet__layout,
    .split-layout.is-collapsing .sheet-campaign-grid,
    .split-layout.is-collapsing .sheet__layout {
        grid-template-columns: var(--sheet-column-width) 1fr !important;
    }
    
    /* Lock character sheet to calculated width in expanded view */
    .split-layout.is-sheet-expanded .character-sheet {
        width: var(--sheet-column-width) !important;
        max-width: var(--sheet-column-width) !important;
        flex: 0 0 var(--sheet-column-width) !important;
    }
    
    /* Keep character sheet at fixed width during expand/collapse transitions.
       This prevents the sheet from scaling while the panel container animates. */
    .split-layout.is-expanding .character-sheet,
    .split-layout.is-collapsing .character-sheet {
        width: var(--sheet-column-width) !important;
        max-width: var(--sheet-column-width) !important;
        flex: 0 0 var(--sheet-column-width) !important;
    }
    
    /* Keep sidebar at fixed width during collapse - don't scale, just clip off to the right.
       Uses the same width as in expanded view so it slides out smoothly. */
    .split-layout.is-collapsing .sheet-campaign-grid,
    .split-layout.is-collapsing .sheet__layout {
        overflow: hidden;
    }
    
    .split-layout.is-collapsing .campaign-panel-slot,
    .split-layout.is-collapsing .sheet__sidebar {
        min-width: var(--sheet-column-width);
        flex-shrink: 0;
    }
    
    /* During collapse: grid slides back in, sheet shrinks back to 50% */
    .split-layout.is-collapsing .panel-character-grid {
        display: flex !important;
        transform: translateX(0);
        margin-right: 0;
        opacity: 1;
        pointer-events: auto;
    }
    
    .split-layout.is-collapsing .panel-character-sheet {
        flex: 0 0 50%;
    }
}

.panel-loading-row {
    position: absolute;
    /* Fill the split layout and let CSS Grid handle centering so that
       parent transforms don't interfere with the cube's 3D axis. */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    pointer-events: none; /* let clicks fall through to underlying UI */
    /* Ensure loading row appears above panel content */
    z-index: 100;
}

/* In sheet-campaign view, hide grid loading and reposition sheet/campaign loading */
.split-layout[data-view="sheet-campaign"] #gridPanelLoading {
    display: none;
}

.split-layout[data-view="sheet-campaign"] #sheetPanelLoading {
    grid-column: 1;
}

.split-layout[data-view="sheet-campaign"] #campaignPanelLoading {
    grid-column: 2;
}

/* In grid-sheet view, hide campaign loading */
.split-layout[data-view="grid-sheet"] #campaignPanelLoading {
    display: none;
}

.loading-text {
    color: var(--ui-fg-color);
    font-family: var(--font-mono);
    font-size: calc(var(--font-size-base) * 1.1);
    text-shadow: 0 0 10px var(--ui-fg-color);
}

/* Grid panel loading cube - uses theme colors */
#gridPanelLoading .panel-loading-cube i {
    border-color: var(--ui-border-color);
    background: var(--ui-bg-translucent);
    box-shadow: 
        inset 0 0 20px var(--ui-bg-translucent),
        0 0 15px var(--ui-bg-translucent);
}

#gridPanelLoading .panel-loading-text {
    color: var(--ui-fg-color);
    text-shadow: 0 0 10px var(--ui-fg-color);
}

/* Panel loading cube - larger, portrait-style cube */
.panel-loading-cube-container {
  perspective: 200px;
  width: 60px;
  height: 60px;
  margin-bottom: var(--spacing-lg);
}

.panel-loading-cube {
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;
  animation: panel-loading-cube-spin 8s infinite linear;
}

/* Base panel loading cube - now uses theme colors from terminal-theme.css */
/* Override only if needed for specific contexts */

/* Cube faces */
.panel-loading-cube i:nth-child(1) { transform: translateZ(30px); }
.panel-loading-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(30px); }
.panel-loading-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(30px); }
.panel-loading-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(30px); }
.panel-loading-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(30px); }
.panel-loading-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(30px); }

@keyframes panel-loading-cube-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.panel-loading-text {
  color: var(--ui-fg-color);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  text-shadow: 0 0 10px var(--ui-fg-color);
}

/* Left panel loading cube - inherits theme from parent */
#leftPanelLoading .panel-loading-cube i {
  border-color: var(--ui-border-color);
  background: var(--ui-bg-translucent);
  box-shadow: 
    inset 0 0 20px var(--ui-bg-translucent),
    0 0 15px var(--ui-bg-translucent);
}

#leftPanelLoading .panel-loading-text {
  color: var(--ui-fg-color);
  text-shadow: 0 0 10px var(--ui-fg-color);
}

/* Modal loading overlay - shown while saving */
.modal-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Above animated content */
  z-index: 100;
  border-radius: var(--radius-md);
}

.modal-loading-overlay.is-visible {
  display: flex;
}

/* Modal loading cube - uses ui-* theme tokens */
.modal-loading-overlay .panel-loading-cube i,
.modal-body .panel-loading-cube i {
  border-color: var(--ui-fg-color);
  background: var(--ui-bg-translucent);
  box-shadow: 
    inset 0 0 20px var(--ui-bg-translucent),
    0 0 15px color-mix(in srgb, var(--ui-primary-bg-color) 20%, transparent);
}

.modal-loading-overlay .panel-loading-text,
.modal-body .panel-loading-text {
  color: var(--ui-fg-color);
  text-shadow: 0 0 10px var(--ui-fg-color);
}

.modal-content {
  position: relative; /* needed for absolute overlay positioning */
}

/* Modal content transition animations - collapse/expand vertically from center */
.modal-content-inner {
  animation: modalContentExpand 350ms var(--ease-bounce) forwards;
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Ensure modal-body inside modal-content-inner takes available space and scrolls */
.modal-content-inner .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Spell picker list inside modal-content-inner should scroll */
.modal-content-inner .spell-picker-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Spell Edit Modal - ensure proper height constraints for scrolling */
#spellEditModal .modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-content-inner.slide-out-left,
.modal-content-inner.slide-out-right {
  animation: modalContentCollapse 150ms var(--ease-bounce) forwards;
  transform-origin: center center;
}

.modal-content-inner.slide-in-right,
.modal-content-inner.slide-in-left {
  animation: modalContentExpand 350ms var(--ease-bounce) forwards;
  transform-origin: center center;
}

@keyframes modalContentCollapse {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.15);
    opacity: 0;
  }
}

@keyframes modalContentExpand {
  0% {
    transform: scaleY(0.15);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* ===== RESPONSIVE ===== */

/* Tablet breakpoint: 2-column grid with card details */
@media (max-width: 1024px) {
    /* Switch to 2 columns with card details visible */
    .character-grid,
    .grid__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .character-card {
        aspect-ratio: 3 / 4;
    }
    
    /* Sort button on tablet - auto width, keep natural height to match search input */
    .search-sort-btn {
        width: auto;
        min-width: 100px;
    }
    
    /* Adjust grid new character button on tablet */
    .grid-new-character-btn {
        padding: var(--spacing-sm) var(--spacing-sm);
    }
    
    /* New character card in empty state - show centered "+" on compact view */
    .new-character-card {
        position: relative;
    }
    
    .new-character-card .card-details {
        display: flex;
        background: transparent;
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: center;
    }
    
    .new-character-card .card-name {
        font-size: var(--font-size-large);
        color: var(--terminal-dim);
    }
    
    /* Hide inline Edit link/button - it moves to overflow menu */
    .character-sheet .sheet-edit-btn,
    .character-sheet .sheet-edit-link {
        display: none !important;
    }
    
    
    /* Session notice: wrap actions below message */
    .session-notice-text {
        flex: 1 1 100%;
    }
    
    .session-notice-actions {
        padding-left: 1.2em; /* indent to align with text after icon */
    }
    
    /* Combat stats and abilities: 2-column grid on tablet */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ability-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mid-mobile breakpoint: 3-column grid between 768px and 520px */
@media (max-width: 768px) and (min-width: 521px) {
    .character-grid,
    .grid__list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
}

/* On wider viewports, hide the Edit option in overflow menu (inline link is visible) */
@media (min-width: 1025px) {
    #overflowEditCharacterBtn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .header-content {
        gap: var(--spacing-sm);
    }
    
    .split-layout {
        flex-direction: column;
        /* Let split-layout fill available space but not exceed it */
        flex: 1;
        min-height: 0;
        /* Split layout itself doesn't scroll - child panels do */
        overflow: hidden;
        /* Prevent overscroll effects */
        overscroll-behavior: none;
    }
    
    /* On mobile, only grid panel is shown - sheet shown inline via mobile-sheet-container */
    .panel-character-grid {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: none;
        padding: var(--spacing-md);
        padding-top: 0;
        /* Enable smooth momentum scrolling on iOS, vertical only */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Ensure panel doesn't grow beyond container */
        min-height: 0;
        /* Contain scroll to prevent page bounce */
        overscroll-behavior: contain;
    }
    
    /* Hide sheet and campaign panels on mobile */
    .panel-character-sheet,
    .panel-campaign {
        display: none !important;
    }
    
    /* Adjust controls section for mobile */
    .controls-section,
    .grid__controls {
        padding: 16px;
        margin: 0 calc(-1 * var(--spacing-md)) 0 calc(-1 * var(--spacing-md));
    }
    
    /* Remove bottom margin on search bar */
    .search-bar {
        margin-bottom: 0;
    }
    
    /* Mobile search toggle button - show on mobile */
    .mobile-search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-lg);
        padding: var(--spacing-sm);
        min-width: var(--btn-height-sm);
        height: var(--btn-height-sm);
        flex-shrink: 0;
    }
    
    /* Hide search input on mobile by default */
    .search-bar .search-input-wrapper {
        display: none;
    }
    
    /* When search is expanded on mobile, show full-width input and hide button + actions */
    .search-bar.is-search-expanded .mobile-search-btn {
        display: none;
    }
    
    .search-bar.is-search-expanded .search-input-wrapper {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
    }
    
    .search-bar.is-search-expanded .search-actions {
        display: none;
    }
    
    /* Make search-actions fill remaining space so button group is full width */
    .search-actions {
        flex: 1;
    }
    
    /* Make sort selector fill remaining space in search-actions */
    .sort-trigger-wrap {
        flex: 1;
        display: flex;
    }
    
    .sort-trigger-wrap .selector-trigger {
        flex: 1;
        width: 100%;
    }
    
    /* Always show clear button when search is expanded (acts as close) */
    .search-bar.is-search-expanded .search-clear-btn.is-hidden {
        display: block !important;
    }
    
    /* Make Create New button same height as sort button */
    .grid-new-character-btn {
        height: var(--btn-height-sm);
        min-height: var(--btn-height-sm);
        padding: 0 var(--spacing-md) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide the sheet loading indicator on mobile */
    .panel-loading-row {
        grid-template-columns: 1fr;
    }
    
    #sheetPanelLoading {
        display: none;
    }
    
    .terminal-select {
        width: 100%;
    }
    
    /* Bump up thumbnail font size on mobile for better readability */
    .card-thumbnail {
        font-size: 2.8px;
    }
    
    /* On mobile, no cards should appear selected (no glow/highlight)
       EXCEPT portrait history cards which need selection styling in the modal */
    .character-card.is-selected:not(.portrait-history-card) {
        border-color: var(--white-dim) !important;
        background-color: var(--terminal-bg) !important;
        box-shadow: none !important;
        animation: none !important;
    }
    
    .character-card.is-selected:not(.portrait-history-card) .card-thumbnail {
        color: var(--white-dim) !important;
    }
    
    /* Reset image thumbnail opacity on mobile (no special hover/selection effects) */
    .character-card.is-selected:not(.portrait-history-card) .card-thumbnail--image img {
        opacity: 0.85 !important;
    }
    
    .character-card.is-selected:not(.portrait-history-card) .card-name,
    .character-card.is-selected:not(.portrait-history-card) .card-info {
        color: var(--white-dim) !important;
    }
    
    .character-card.is-selected:not(.portrait-history-card) .card-details {
        background-color: transparent !important;
        color: var(--white-dim) !important;
    }
    
    /* Reset new-character-card to default layout */
    .new-character-card {
        position: static;
    }
    
    .new-character-card .card-details {
        display: block;
        position: static;
        background: transparent;
    }
    
    .new-character-card .card-name {
        font-size: var(--font-size-small);
    }
    
    /* Grid new character button on mobile - adjust padding */
    .grid-new-character-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ability-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sheet-title-buttons {
        flex-wrap: wrap;
    }
    
    .ascii-portrait {
        font-size: 4px;
    }

    /* Stack inline fields vertically on mobile */
    .settings-row-inline {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* ===== WELCOME MODAL RESPONSIVE ===== */
    /* Shrink ASCII art on mobile */
    .welcome-modal .splash-content {
        max-height: 45vh;
    }
    
    .welcome-modal .splash-logo-img {
        max-height: 45vh;
    }
    
    .welcome-actions {
        width: 100%;
        min-width: unset;
    }
}

/* ========================================
   MOBILE CHARACTER SHEET VIEW
   On mobile, we swap the grid for the character sheet
   ======================================== */

/* Mobile back button - shown at top of left panel when viewing a character */
/* BEM alias: .grid__mobile-nav */
.mobile-back-bar,
.grid__mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-back-bar,
    .grid__mobile-nav {
        display: none;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid var(--ui-dim-color);
        background: #000;
        position: sticky;
        top: 0;
        z-index: 100;
        /* Relative positioning for absolutely centered nav count */
        position: relative;
    }
    
    /* Show back bar when viewing character sheet on mobile */
    .panel-character-grid.is-viewing-sheet .mobile-back-bar,
    .panel-character-grid.is-viewing-sheet .grid__mobile-nav {
        display: flex;
    }
    
    /* Navigation count - absolutely centered */
    .mobile-nav-count {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        color: var(--ui-dim-color);
        font-family: var(--font-mono);
        font-size: var(--font-size-small);
        white-space: nowrap;
        text-decoration: none;
    }

    /* Campaign link - pinned right - follows .action-link pattern */
    .mobile-campaign-link {
        /* Extends: .action-link */
        margin-left: auto;
        background: none;
        border: none;
        padding: 0;
        font-family: var(--font-mono);
        font-size: var(--font-size-small);
        color: var(--ui-dim-color);
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
        transition: color var(--transition-speed);
    }

    .mobile-campaign-link:hover {
        color: var(--ui-fg-color);
        text-decoration: underline;
    }
    
    /* Hide grid and controls when viewing sheet */
    .panel-character-grid.is-viewing-sheet .controls-section,
    .panel-character-grid.is-viewing-sheet .grid__controls,
    .panel-character-grid.is-viewing-sheet .character-grid,
    .panel-character-grid.is-viewing-sheet .grid__list,
    .panel-character-grid.is-viewing-sheet .empty-state,
    .panel-character-grid.is-viewing-sheet .grid__empty,
    .panel-character-grid.is-viewing-sheet .character-count {
        display: none !important;
    }
    
    /* Show the inline character sheet on mobile */
    .panel-character-grid.is-viewing-sheet .mobile-sheet-container,
    .panel-character-grid.is-viewing-sheet .grid__mobile-sheet {
        display: block;
    }
}

.mobile-back-link {
    /* Extends: .action-link */
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    color: var(--ui-dim-color);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.mobile-back-link:hover {
    color: var(--ui-fg-color);
    text-decoration: underline;
}

/* Mobile sheet title header (cloned from desktop sheet-title-header) */
.mobile-sheet-title-header {
    display: none;
}

@media (max-width: 768px) {
    /* Show mobile sheet title header when viewing sheet */
    .panel-character-grid.is-viewing-sheet .mobile-sheet-title-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        background: #000;
        /* Sticky positioning: sticks below terminal-header (41px when scrolled) */
        position: sticky;
        top: 0;
        z-index: 100;
    }
    
    /* Style the title within mobile header */
    .mobile-sheet-title-header .sheet-title {
        flex: 1;
        min-width: 0;
        font-family: var(--font-mono);
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--ui-fg-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Hide header-menu-shell in mobile header (not used) */
    .mobile-sheet-title-header .header-menu-shell {
        display: none;
    }
    
    /* Style the actions menu in mobile header */
    .mobile-sheet-title-header .sheet-title-buttons {
        flex-shrink: 0;
    }

    /* Overflow button in mobile header uses inherited theme */
    .mobile-sheet-title-header .terminal-btn-small {
        color: var(--ui-fg-color);
        border-color: var(--ui-border-color);
    }

    .mobile-sheet-title-header .terminal-btn-small:hover:not(:disabled) {
        background: var(--context-hover);
        border-color: var(--ui-fg-color);
        color: var(--ui-fg-color);
        box-shadow: 0 0 10px var(--context-hover);
    }

    .mobile-sheet-title-header .sheet-actions-dot {
        background-color: var(--ui-dim-color);
    }

    .mobile-sheet-title-header .terminal-btn-small:hover .sheet-actions-dot,
    .mobile-sheet-title-header .terminal-btn-small.is-open .sheet-actions-dot {
        background-color: var(--ui-fg-color);
    }
}

/* Container for character sheet on mobile (inside left panel) */
/* BEM alias: .grid__mobile-sheet */
.mobile-sheet-container,
.grid__mobile-sheet {
    display: none;
    padding: 0 0 var(--spacing-md) 0;
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll, capture horizontal swipes */
    overflow-x: hidden;
}

/* Override .character-sheet's overflow-y: auto to prevent nested scroll context.
   gridPanel should be the only scrolling container on mobile.
   Using high-specificity selector to ensure this wins. */
.mobile-sheet-container.character-sheet,
.grid__mobile-sheet.character-sheet {
    border-top: none;
    overflow-y: visible !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Campaign section at bottom of mobile sheet */
.mobile-campaign-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--ui-dim-color);
}

/* Swipe loading overlay - positioned over the portrait area only */
.mobile-swipe-loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.mobile-swipe-loader.is-visible {
    display: flex;
}

.mobile-swipe-loader .panel-loading-cube-container {
    transform: scale(0.5);
}

/* When viewing sheet on mobile, allow swipe gestures */
.panel-character-grid.is-viewing-sheet {
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll, capture horizontal swipes */
}

/* During active horizontal swipe, prevent all scrolling */
.panel-character-grid.is-swiping-horizontal {
    touch-action: none !important;
    overflow: hidden !important;
}

/* ========================================
   MODAL DISCARD CONFIRMATION OVERLAY
   ======================================== */
.modal-discard-confirm {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 4px;
}

.modal-discard-confirm.show {
    display: flex;
}

.modal-discard-content {
    text-align: center;
    padding: var(--spacing-xl);
}

.modal-discard-content .terminal-text {
    color: var(--ui-fg-color);
    margin-bottom: var(--spacing-sm);
}

.modal-discard-content .terminal-text-small {
    margin-bottom: var(--spacing-lg);
}

.modal-discard-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

/* ========================================
   HEADER OVERFLOW MENU
   Settings and auth are always in the overflow menu
   ======================================== */

/* Show overflow menu, positioned in header-actions */
.header-overflow {
    display: inline-block;
}

/* Hide settings icon - it's in the overflow menu */
.terminal-header .manager-settings-link {
    display: none;
}

/* Hide auth button - it's in the overflow menu */
.terminal-header .header-action-btn,
.terminal-header #authBtn {
    display: none;
}

/* Show user info to the left of overflow button */
.terminal-header #userInfoDisplay {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: none;
    opacity: 1;
    overflow: hidden;
    padding-right: 0;
}

/* ===== HEADER OVERFLOW - TEAL THEME ===== */

/* Trigger button: default state */
.header-overflow-trigger {
    border-color: var(--ui-dim-color);
    color: var(--ui-dim-color);
    background: transparent;
    /* Mobile: avoid iOS/Android tap highlight + reduce "sticky hover" artifacts */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Trigger button: hover state */
.header-overflow-trigger:hover {
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
    background-color: var(--context-hover);
    box-shadow: 0 0 8px var(--context-hover);
}

/* Trigger button: active (touch press) state */
.header-overflow-trigger:active {
    border-color: var(--ui-fg-color) !important;
    color: var(--ui-fg-color) !important;
    background-color: var(--context-hover) !important;
    box-shadow: 0 0 8px var(--context-hover) !important;
}

/* Trigger button: focus state */
.header-overflow-trigger:focus {
    outline: none;
    border-color: var(--ui-fg-color);
    box-shadow: 0 0 0 2px var(--context-hover);
}

/* Trigger button: open state - must override .selector-trigger.is-open */
.header-overflow-trigger.is-open,
.header-overflow .selector-trigger.is-open {
    border-color: var(--ui-fg-color) !important;
    color: var(--ui-fg-color) !important;
    background-color: var(--context-hover) !important;
}

/* Dots: default state (vertical three-dot overflow) */
.header-overflow-trigger .sheet-actions-dot {
    background-color: var(--ui-dim-color);
    /* Use same dot size as other overflow buttons */
    width: var(--overflow-dot-size, 3px);
    height: var(--overflow-dot-size, 3px);
    border-radius: 50%;
}

/* Dots: vertically stacked positioning (same as other overflow buttons) */
.header-overflow-trigger .sheet-actions-dot.dot-1 {
    top: 0;
}

.header-overflow-trigger .sheet-actions-dot.dot-2 {
    top: 50%;
    transform: translate(-50%, -50%);
}

.header-overflow-trigger .sheet-actions-dot.dot-3 {
    bottom: 0;
    top: auto;
}

/* Dots: hover state */
.header-overflow-trigger:hover .sheet-actions-dot {
    background-color: var(--ui-fg-color);
}

/* Dots: open state (X morph) */
.header-overflow-trigger.is-open .sheet-actions-dot {
    background-color: var(--ui-fg-color);
}

.header-overflow-trigger.is-open .sheet-actions-dot.dot-2::after {
    background-color: var(--ui-fg-color);
}

/* Menu container - set teal theme variables, let base styles handle the rest */
.header-overflow-menu {
    right: 0;
    left: auto;
    min-width: 160px;
    z-index: 9999;
    /* Inherit theme from parent - no hardcoded colors */
}

@media (max-width: 768px) {
    /* ===== MOBILE HEADER =====
       Ensure header stays above mobile sheet content */
    
    .terminal-header {
        position: relative;
        height: auto;
        z-index: 200;
    }
    
    /* Allow overflow menu to extend beyond header when open */
    .terminal-header:has(.selector-menu.is-open) {
        overflow: visible;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    /* Hide the body::before glow pseudo-element */
    body::before {
        display: none !important;
        content: none !important;
    }

    /* =========================================================
       BLACK & WHITE ONLY (global print override)
       ========================================================= */
    body {
        -webkit-print-color-adjust: economy !important;
        print-color-adjust: economy !important;
        background: #fff !important;
        color: #000 !important;
    }

    body,
    body *,
    body *::before,
    body *::after {
        color: #000 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #000 !important;
        outline-color: #000 !important;
    }

    img,
    svg,
    canvas,
    video {
        filter: grayscale(100%) !important;
    }

    /* Reset all backgrounds to white for print */
    body,
    html,
    .app-root,
    .terminal-frame,
    .main-content,
    .split-layout,
    .panel,
    .app-panel,
    .panel-character-grid,
    .panel-character-sheet,
    .panel-campaign {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
    }

    /* CRITICAL: Remove ALL height constraints and overflow clipping */
    html,
    body,
    .app-root,
    .terminal-frame,
    .main-content,
    .split-layout,
    .panel-character-sheet,
    #characterSheet,
    .character-sheet {
        display: block !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Hide grid and campaign panels in print */
    .panel-character-grid,
    .panel-campaign {
        display: none !important;
    }

    /* Show character sheet panel as block, full width */
    .panel-character-sheet {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
    }

    /* CRITICAL: Ensure character sheet is visible (override .is-hidden) */
    #characterSheet,
    .character-sheet {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Ensure all sheet sections and content are visible */
    .character-sheet .sheet-section,
    .character-sheet .sheet-header,
    .character-sheet .sheet-content,
    .character-sheet .sheet-subsection,
    .character-sheet .sheet-subsection-title,
    .character-sheet .stat-grid,
    .character-sheet .ability-grid,
    .character-sheet .stat-box,
    .character-sheet .ability-box,
    .character-sheet .spell-list-item,
    .character-sheet .spell-list-description,
    .character-sheet .spellcasting-ability-note,
    .character-sheet .stat-line,
    .character-sheet .text-dim,
    .character-sheet div,
    .character-sheet ul,
    .character-sheet li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000 !important;
    }

    /* Restore real list markers for sheet bullet lists (the block override above
       would otherwise hide markers by forcing li off of display:list-item). */
    .character-sheet ul.sheet-bullet-list {
        display: block !important;
        padding-left: 1.25rem !important;
        list-style: disc !important;
        list-style-position: outside !important;
    }

    .character-sheet ul.sheet-bullet-list > li {
        display: list-item !important;
    }

    /* Reset grids to proper display */
    .character-sheet .stat-grid,
    .character-sheet .ability-grid {
        display: grid !important;
    }
    
    /* Reset flex containers */
    .character-sheet .stat-line,
    .character-sheet .sheet-header {
        display: flex !important;
    }

    /* Portrait + Basic Info side-by-side layout for print */
    .character-sheet .sheet-portrait-info-row,
    .sheet-portrait-info-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-bottom: 16px !important;
    }

    /* Fix portrait container for print - remove fixed aspect ratio */
    .character-sheet .sheet-portrait-info-row .portrait-container,
    .character-sheet .sheet-portrait-info-row .portrait-container--original-mode,
    .sheet-portrait-info-row .portrait-container,
    .sheet-portrait-info-row .portrait-container--original-mode {
        position: static !important;
        aspect-ratio: auto !important;
        height: auto !important;
        width: auto !important;
        max-width: 300px !important;
        min-width: 250px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Basic info section in print - sits to the right of portrait */
    .character-sheet .sheet-portrait-info-row > .sheet-section,
    .sheet-portrait-info-row > .sheet-section {
        flex: 1 !important;
        margin: 0 !important;
        border: none !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Print-only character name above stats */
    .print-only-name {
        display: block !important;
        font-size: var(--font-size-lg) !important;
        font-weight: 500 !important;
        margin-bottom: 12px !important;
    }

    /* Hide the empty header in basic info section */
    .sheet-section--basic-info .sheet-header {
        display: none !important;
    }

    /* Hide the header name in print - keep only the one above stats */
    .character-sheet .sheet-title-header,
    .sheet-title-header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Portrait image should be static and sized properly */
    .portrait-container .original-portrait,
    .portrait-container--original-mode .original-portrait {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-width: 300px !important;
        opacity: 1 !important;
    }

    /* Hide sheet placeholder */
    .sheet-placeholder {
        display: none !important;
    }

    /* Hide mobile sheet container (desktop print only) */
    .mobile-sheet-container,
    .grid__mobile-sheet,
    .mobile-back-bar,
    .grid__mobile-nav {
        display: none !important;
    }

    /* Hide controls section */
    .controls-section,
    .grid__controls {
        display: none !important;
    }

    /* Hide character grid */
    .character-grid,
    .grid__list,
    #characterGrid {
        display: none !important;
    }

    /* Hide empty state */
    .empty-state,
    .grid__empty,
    #emptyState {
        display: none !important;
    }

    /* Hide loading indicators */
    .loading-indicator,
    .panel-loading-row {
        display: none !important;
    }

    /* Hide placeholder portrait (cube loading animation) */
    .ascii-portrait--placeholder {
        display: none !important;
    }

    /* Hide portrait actions in print */
    .portrait-actions {
        display: none !important;
    }

    /* Allow content to flow across multiple pages */
    * {
        max-height: none !important;
    }

    /* Keep whole sections together - avoid breaking mid-section */
    .character-sheet .sheet-section {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-before: auto;
        break-before: auto;
    }

    /* Avoid breaking inside individual stat/ability boxes */
    .character-sheet .stat-box,
    .character-sheet .ability-box {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* For very long spell lists, allow individual spell items to start on new page if needed,
       but keep each spell entry together */
    .character-sheet .spell-list li,
    .character-sheet .sheet-content ul li,
    .character-sheet .sheet-content ol li {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Make all images black and white for print */
    img,
    .original-portrait,
    .portrait-container img {
        filter: grayscale(100%) !important;
        -webkit-filter: grayscale(100%) !important;
    }

    /* In expanded view, campaign panel should render BELOW character sheet (like collapsed view) */
    .sheet-campaign-grid,
    .sheet__layout {
        display: block !important;
        grid-template-columns: none !important;
    }

    /* Campaign panel slot - render below character sheet */
    .campaign-panel-slot,
    .sheet__sidebar {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: 24px !important;
    }

    /* Campaign area in print */
    .campaign-area {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Hide character nav bar in print (expanded view navigation) */
    #characterNavBar,
    .sheet__nav {
        display: none !important;
    }

    /* Remove border from sheet content in print */
    .sheet__content,
    .sheet-scroll-wrapper {
        border: none !important;
    }
}

/* ========================================
   Demo Character List (Migration Modal)
   ======================================== */
.terminal-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0;
}

.terminal-list li {
    padding: var(--spacing-xs) 0;
    color: var(--text-muted);
    position: relative;
    padding-left: var(--spacing-md);
}

.terminal-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--terminal-cyan);
}

.terminal-list .demo-char-name {
    color: var(--text-primary);
    font-weight: var(--font-weight-normal);
}

.terminal-list .demo-char-info {
    color: var(--text-dim);
    font-size: var(--font-sm);
}

/* Demo character tag - overlays portrait in sheet view */
/* Uses dim bg + bright text style (like condition tags) */
.sheet-demo-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    padding: 0 4px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent) !important;
    border-radius: 3px;
}

/* Shared character tag - inline with sheet title */
/* Uses dim bg + bright text style (like condition tags) */
.sheet-shared-tag {
    display: inline-block;
    padding: 2px 6px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--ui-tag-bg, var(--ui-primary-bg-color)) 20%, transparent) !important;
    border-radius: 3px;
    cursor: help;
    vertical-align: middle;
}

/* Shared tag tooltip - show on hover (CSS-only, desktop) */
.sheet-shared-tag.has-tooltip:hover .custom-tooltip {
    opacity: 1;
    transform: scale(1);
}

/* Shared tag tooltip - multiline content */
.sheet-shared-tag .custom-tooltip {
    white-space: nowrap;
    text-align: left;
}

/* Mobile: shared tag is display-only (no tap interaction to avoid lightbox collision) */
@media (hover: none), (pointer: coarse) {
    .sheet-shared-tag.has-tooltip {
        /* Remove pointer cursor - not tappable on mobile */
        cursor: default;
        /* Allow taps to pass through to portrait for lightbox */
        pointer-events: none;
    }
}

/* ========================================
   STATUS OVERLAY - Badges overlay portrait at top-left
   Shows: IN CAMPAIGN, SHARED, PINNED
   ======================================== */

.sheet-status-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: auto;
}

/* Legacy status row - kept for mobile duplication */
.sheet-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px 16px;
    background-color: var(--terminal-bg);
}

/* Status badge base styles - designed for portrait overlay */
.sheet-status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ui-tag-bg, var(--ui-primary-bg-color));
    background-color: color-mix(in srgb, var(--terminal-bg, #0a0a0a) 85%, transparent);
    border-radius: 3px;
    cursor: help;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

@media (prefers-reduced-transparency: reduce) {
    .sheet-status-badge {
        backdrop-filter: none;
    }
}

.sheet-status-badge__icon {
    font-size: var(--font-size-md);
    line-height: 1;
    position: relative;
    top: -1px;
}

/* Status badge tooltip - show on hover (CSS-only, desktop) */
.sheet-status-badge.has-tooltip:hover .custom-tooltip {
    opacity: 1;
    transform: scale(1);
}

/* Elevate hovered badge above siblings so tooltip isn't clipped */
.sheet-status-badge.has-tooltip:hover {
    z-index: 10;
}

/* Status badge tooltip - content styling */
.sheet-status-badge .custom-tooltip {
    white-space: nowrap;
    text-align: left;
    z-index: 100;
}

/* Mobile: status badges are display-only (no tap interaction to avoid conflicts) */
@media (hover: none), (pointer: coarse) {
    .sheet-status-badge.has-tooltip {
        cursor: default;
        pointer-events: none;
    }
}

/* Mobile status row - hidden since badges already show on portrait image */
.mobile-sheet-status-row {
    display: none;
}

/* ========================================
   SHARE MODAL - Unified add/manage access
   Uses yellow theme colors (base modal theme)
   ======================================== */

.share-section {
    margin-top: 1.25rem;
}

.share-section .modal-section-label {
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: block;
}

/* Add person row - input + button */
.share-add-row {
    display: flex;
    gap: var(--spacing-sm);
}

.share-add-row .terminal-input {
    flex: 1;
    min-width: 0;
}

.share-add-row .terminal-btn {
    flex-shrink: 0;
}

/* Collaborators list */
.share-collaborators-list {
    border: 1px solid var(--ui-dim-color);
    border-radius: 4px;
    background: var(--terminal-bg-dim);
    max-height: 180px;
    overflow-y: auto;
}

.share-collaborator-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--ui-dim-color);
    transition: opacity 0.2s ease, background-color 0.15s ease;
}

.share-collaborator-item:last-child {
    border-bottom: none;
}

.share-collaborator-item:hover {
    background-color: var(--ui-bg-translucent);
}

.share-collaborator-item.removing {
    opacity: 0.4;
    pointer-events: none;
}

.share-collaborator-email {
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.share-collaborator-status {
    font-size: var(--font-size-2xs);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ui-dim-color);
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.share-collaborator-pending .share-collaborator-email {
    opacity: 0.7;
}

.share-collaborator-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ui-dim-color);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.share-collaborator-remove:hover {
    color: var(--error-color, #f44);
    background-color: hsla(0, 70%, 50%, 0.15);
}

/* ========================================
   PENDING SHARES MODAL
   Uses teal theme colors (matches sheet accent)
   ======================================== */

.pending-shares-modal {
    max-width: 650px;
    width: 95vw;
}

.pending-shares-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 65vh;
    overflow-y: auto;
}

.pending-share-card {
    border: 2px solid var(--ui-fg-color);
    border-radius: 4px;
    background: var(--terminal-bg);
    transition: opacity 0.3s ease;
    overflow: hidden;
    box-shadow: 0 0 12px var(--ui-bg-translucent);
}

/* Two-column layout for share card */
.share-card-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
}

/* Portrait column - fixed 3:4 aspect ratio (140px × 187px) */
.share-card-portrait-col {
    flex: 0 0 140px;
    width: 140px;
    height: 187px; /* 140 * 4/3 for 3:4 aspect ratio */
    background: var(--ui-primary-bg-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--ui-dim-color);
}

/* ASCII portrait styling */
.share-card-portrait {
    /* ASCII art needs a consistent monospace font across all browsers */
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    font-size: 4.5px;
    line-height: 1;
    color: var(--ui-fg-color);
    margin: 0;
    white-space: pre;
    overflow: hidden;
    /* Cross-browser monospace consistency (Safari fix) */
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0, 'clig' 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Image portrait styling - teal themed with multiply blend */
.share-card-portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    mix-blend-mode: multiply;
    opacity: 0.9;
}

.share-card-portrait-placeholder {
    font-size: var(--font-size-2xs);
    color: var(--ui-dim-color);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* Info column - matches portrait height */
.share-card-info-col {
    flex: 1;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 187px;
    box-sizing: border-box;
}

.share-card-name {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--ui-fg-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem 0.5rem;
}

.share-card-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.share-card-label {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ui-fg-color);
    opacity: 0.6;
}

.share-card-value {
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-card-from {
    margin-top: 0.75rem;
    font-size: var(--font-size-2xs);
    color: var(--ui-fg-color);
    opacity: 0.5;
}

/* Action buttons - pinned to the right */
.share-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: auto;
}

.share-card-actions .terminal-btn {
    border-color: var(--ui-dim-color);
    color: var(--ui-fg-color);
}

.share-card-actions .terminal-btn:hover {
    border-color: var(--ui-fg-color);
    background-color: var(--ui-bg-translucent);
}

/* Responsive adjustments for pending shares */
@media (max-width: 480px) {
    .pending-shares-modal {
        max-width: 100%;
    }
    
    .share-card-layout {
        flex-direction: column;
    }
    
    .share-card-portrait-col {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-right: none;
        border-bottom: 1px solid var(--ui-dim-color);
    }
    
    .share-card-portrait {
        font-size: 5px;
    }
    
    .share-card-info-col {
        height: auto;
        padding: 1rem;
    }
    
    .share-card-actions {
        margin-top: var(--spacing-md);
    }
}

/* ===== SPELL PICKER MODAL ===== */
/* Back button for modal flow navigation */
.modal-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 1px solid var(--ui-dim-color);
    color: var(--ui-dim-color);
    padding: 0.25rem 0.75rem;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s ease;
    margin-right: auto;
}

.modal-back-btn:hover {
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
    background-color: var(--ui-bg-translucent);
}

.modal-back-btn .back-arrow {
    font-size: 1.1em;
}

/* Header with back button needs flex layout */
.modal-header:has(.modal-back-btn) {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-header:has(.modal-back-btn) .modal-title {
    flex: 1;
    text-align: center;
    margin: 0;
}

.modal-header:has(.modal-back-btn) .modal-close {
    margin-left: 0;
}

.spell-picker-modal {
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.spell-picker-modal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Inline spell picker in edit modal */
#editDetailsModal .modal-body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Left-aligned modal header variant */
.modal-header-left {
    justify-content: flex-start;
}

.modal-header-left .modal-title {
    flex: 1;
}

.modal-header-left .modal-close {
    margin-left: auto;
}

.spell-picker-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0 8px 0;
    color: var(--ui-fg-color);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--ui-dim-color);
}

.spell-picker-info-text {
    flex: 1;
}

/* Inline count display x/y */
.spell-picker-count {
    color: var(--ui-dim-color);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-sm);
}

.spell-picker-count.over-limit {
    color: var(--terminal-error, #ff6b6b);
    font-weight: var(--font-weight-normal);
}

/* Warning message when over limit */
.spell-picker-warning {
    color: var(--terminal-error, #ff6b6b);
    font-weight: var(--font-weight-normal);
}

.spell-picker-info.over-limit {
    border-bottom-color: var(--terminal-error, #ff6b6b);
}

.spell-picker-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: stretch;
}

.spell-picker-filters .terminal-input {
    flex: 1;
    min-width: 150px;
}

/* Spell school selector shell - teal themed */
.spell-picker-filters .selector-shell {
    min-width: 140px;
}

.spell-picker-filters .selector-trigger {
    height: 100%;
    min-width: 140px;
    border-color: var(--ui-dim-color);
    color: var(--ui-fg-color);
}

/* Hide caret for spell school selector */
.spell-picker-filters .selector-caret {
    display: none;
}

.spell-picker-filters .selector-trigger:hover {
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
    background-color: var(--ui-bg-translucent);
}

.spell-picker-filters .selector-trigger.is-open {
    border-color: var(--ui-dim-color);
    color: var(--ui-dim-color);
}

.spell-picker-filters .selector-menu {
    border-color: var(--ui-fg-color);
    background: var(--terminal-bg);
}

.spell-picker-filters .selector-option {
    color: var(--ui-fg-color);
}

.spell-picker-filters .selector-option:hover,
.spell-picker-filters .selector-option:focus {
    background-color: color-mix(in srgb, var(--ui-primary-bg-color) 15%, transparent);
    color: var(--ui-fg-color);
}

.spell-picker-filters .selector-option.is-selected {
    background-color: var(--ui-bg-translucent);
}

.spell-picker-filters .selector-option.is-selected::before {
    color: var(--ui-fg-color);
}

.spell-picker-list {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    border-radius: 2px;
    padding: var(--spacing-xs);
}

/* Spell card in picker */
.spell-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-dim-color) 30%, transparent);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.spell-picker-item:last-child {
    border-bottom: none;
}

.spell-picker-item:hover {
    background-color: var(--ui-bg-translucent);
}

.spell-picker-item.is-selected {
    background-color: color-mix(in srgb, var(--ui-primary-bg-color) 15%, transparent);
}

.spell-picker-item.is-existing {
    /* Visual indicator that spell is currently on character - but still selectable */
    border-left: 2px solid var(--ui-fg-color);
}

/* Badge showing spell is currently on character */
.spell-existing-badge {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    padding: 1px 4px;
    margin-left: 6px;
    background: color-mix(in srgb, var(--ui-dim-color) 30%, transparent);
    border-radius: 2px;
    vertical-align: middle;
}

/* Custom checkbox styling for spell picker */
.spell-picker-checkbox {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--ui-dim-color);
    background: transparent;
    cursor: pointer;
    position: relative;
}

.spell-picker-checkbox:checked {
    border-color: var(--ui-fg-color);
    background-color: var(--ui-fg-color);
}

.spell-picker-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--terminal-bg);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
}

.spell-picker-checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.spell-picker-item-content {
    flex: 1;
    min-width: 0;
}

.spell-picker-item-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.spell-picker-item-name {
    font-weight: var(--font-weight-normal);
    color: var(--ui-fg-color);
    font-size: var(--font-size-sm);
}

.spell-picker-item-school {
    font-size: var(--font-size-xs);
    color: var(--ui-fg-color);
    font-style: italic;
    opacity: 0.7;
}

.spell-picker-item-meta {
    font-size: var(--font-size-2xs);
    color: var(--ui-fg-color);
    opacity: 0.6;
    margin-top: 2px;
}

.spell-picker-item-desc {
    font-size: var(--font-size-xs);
    color: var(--ui-dim-color);
    margin-top: var(--spacing-xs);
    line-height: var(--line-height-normal);
    /* Truncate long descriptions */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spell-picker-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.spell-picker-selected-count {
    color: var(--ui-fg-color);
    font-size: var(--font-size-sm);
    transition: color 0.2s ease;
}

.spell-picker-selected-count.at-limit {
    color: var(--terminal-warning);
    font-weight: var(--font-weight-normal);
}

.spell-picker-info.at-limit {
    color: var(--terminal-warning);
}

.spell-picker-selected-count.over-limit,
.spell-picker-info.over-limit {
    color: var(--terminal-warning);
    font-weight: var(--font-weight-normal);
}

/* Spell picker loading state */
.spell-picker-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: var(--spacing-md);
}

/* Transition loader overlay - shown while loading spell list */
.spell-picker-transition-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.spell-picker-transition-loader.is-visible {
    opacity: 1;
}

.spell-picker-transition-loader .panel-loading-cube-container {
    transform: scale(0.7);
}

.modal-footer-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.spell-picker-empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--ui-dim-color);
}

/* Spell limits summary in edit modal */
.spell-limits-summary {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--ui-fg-color);
    background: var(--ui-bg-translucent);
    border-radius: 4px;
    border-left: 3px solid var(--ui-fg-color);
}

.spell-limits-summary.at-limit {
    color: var(--terminal-warning);
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.spell-limits-summary.over-limit {
    color: var(--terminal-warning);
    border-left-color: var(--terminal-warning);
    font-weight: var(--font-weight-normal);
}

.spell-limits-summary:empty {
    display: none;
}

/* Spell tags in edit modal */
.spell-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    min-height: 32px;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-dim);
    border-radius: var(--border-radius);
    background: var(--surface);
}

.spell-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--ui-dim-color);
    border: 1px solid var(--ui-fg-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: #1a1a1a;
    opacity: 0.75;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.spell-tag:hover {
    background: var(--ui-primary-bg-color);
    opacity: 1;
}

.spell-tag-remove {
    cursor: pointer;
    font-weight: var(--font-weight-normal);
    color: #1a1a1a;
    opacity: 0.6;
    display: inline-block;
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.spell-tag-remove:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Spell edit tags - use sheet-spell-tag style with yellow modal theme */
.spell-edit-tag {
    background: var(--ui-dim-color) !important;
    color: #1a1a1a !important;
    border: none;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.spell-edit-tag:hover {
    opacity: 1;
}

.spell-edit-tag.has-tooltip {
    cursor: help;
}

/* Yellow-themed tooltips for spell edit modal */
.spell-edit-tag .custom-tooltip {
    background-color: rgba(0, 0, 0, 0.9);
    color: var(--ui-fg-color);
    border: 1px solid var(--ui-dim-color);
    box-shadow: 0 0 8px hsla(var(--theme-yellow-h), var(--theme-yellow-s), var(--theme-yellow-l-dim), 0.4);
}

.spell-edit-tag.has-tooltip:hover .custom-tooltip,
.spell-edit-tag .custom-tooltip.show {
    opacity: 1;
    transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px))) scale(1);
}

/* Mobile: tap-to-show tooltip on spell edit tags */
@media (hover: none), (pointer: coarse) {
    .spell-edit-tag.has-tooltip.tooltip-active .custom-tooltip {
        opacity: 1;
        transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px))) scale(1);
        pointer-events: auto;
    }
}

.spell-edit-row {
    margin-bottom: var(--spacing-md);
}

.spell-edit-row .settings-label {
    margin-bottom: var(--spacing-xs);
}

/* Inline add button inside spell-tag-list */
.spell-add-btn-inline {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: transparent;
    border: 1px solid var(--ui-dim-color);
    border-radius: var(--border-radius);
    color: var(--ui-fg-color);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.spell-add-btn-inline:hover {
    background-color: var(--ui-bg-translucent);
    border-color: var(--ui-fg-color);
    color: var(--ui-fg-color);
}

/* Spellcasting section visibility */
#spellEditSection.is-hidden {
    display: none;
}

@media (max-width: 600px) {
    .spell-picker-modal {
        max-height: 90vh;
    }
    
    .spell-picker-filters {
        flex-direction: column;
    }
    
    .spell-picker-filters .terminal-input,
    .spell-picker-filters .terminal-select {
        width: 100%;
    }
    
}

/* Spell removal modal (level down) */
.spell-removal-section {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--terminal-border);
    background: var(--terminal-bg-darker, rgba(0,0,0,0.2));
}

.spell-removal-header {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-base);
    color: var(--terminal-accent);
    text-transform: uppercase;
}

.spell-removal-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 200px;
    overflow-y: auto;
}

.spell-removal-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.spell-removal-item:hover {
    background: var(--terminal-bg-hover, rgba(255,255,255,0.05));
}

.spell-removal-item.forced {
    opacity: 0.7;
    cursor: not-allowed;
}

.spell-removal-item.forced span {
    color: var(--terminal-error, #ff6b6b);
}

.spell-removal-item input[type="checkbox"] {
    accent-color: var(--terminal-accent);
    width: 16px;
    height: 16px;
}

#confirmSpellRemovalBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}