/*
 * Scribere Studio V3 - Theme System
 * Clean, minimal theming with CSS custom properties
 */

/* ==================== Light Theme (Default) ==================== */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #f5f5f5;
    --bg-surface: #ffffff;
    --bg-elevated: #e8e8e8;
    --bg-sidebar: #1f2937;
    --bg-header: #1f2937;
    --bg-input: #ffffff;
    --bg-hover: rgba(37, 99, 235, 0.05);

    /* Text */
    --text-primary: #1a1a1a;
    --text-body: #374151;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-inverse: #ffffff;
    --text-sidebar: #e5e7eb;

    /* Accent */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: rgba(37, 99, 235, 0.1);
    --accent-rgb: 37, 99, 235;

    /* Status Colors */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.1);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.1);

    /* Borders */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #374151;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Editor specific */
    --editor-bg: #ffffff;
    --editor-text: #1a1a1a;
    --editor-cursor: #1a1a1a;
    --editor-selection: rgba(37, 99, 235, 0.2);
}

/* ==================== Dark Theme ==================== */
[data-theme="dark"] {
    /* Backgrounds - neutral grays */
    --bg-primary: #121212;
    --bg-surface: #1e1e1e;
    --bg-elevated: #2d2d2d;
    --bg-sidebar: #161616;
    --bg-header: #161616;
    --bg-input: #2d2d2d;
    --bg-hover: rgba(59, 130, 246, 0.1);

    /* Text */
    --text-primary: #f3f4f6;
    --text-body: #e5e7eb;
    --text-muted: #9ca3af;
    --text-light: #6b7280;
    --text-inverse: #121212;
    --text-sidebar: #e5e7eb;

    /* Accent - slightly lighter for dark mode */
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-light: rgba(59, 130, 246, 0.15);
    --accent-rgb: 59, 130, 246;

    /* Status Colors */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.15);

    /* Borders */
    --border-light: #374151;
    --border-medium: #4b5563;
    --border-dark: #1f2937;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* Editor specific */
    --editor-bg: #1e1e1e;
    --editor-text: #e5e7eb;
    --editor-cursor: #e5e7eb;
    --editor-selection: rgba(59, 130, 246, 0.3);
}

/* ==================== Base Reset & Typography ==================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg-primary);
    color: var(--text-body);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Prevent transition flash on page load */
body.no-transition,
body.no-transition * {
    transition: none !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem 0; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

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

/* ==================== Layout ==================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Editor page - no container padding */
body.write-page .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==================== Cards ==================== */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    border-color: var(--border-medium);
}

/* ==================== Sticky Notes ==================== */
/*
 * Sticky note styling for Planning Cards and Scene Notes
 * Color-coded by type with folded corner effect
 */

/* Sticky note colors - Light mode */
:root,
[data-theme="light"] {
    --sticky-yellow: #fef9c3;
    --sticky-pink: #fce7f3;
    --sticky-blue: #dbeafe;
    --sticky-green: #d1fae5;
    --sticky-orange: #ffedd5;
    --sticky-text: #1f2937;
    --sticky-text-muted: #4b5563;
}

/* Sticky note colors - Dark mode */
[data-theme="dark"] {
    --sticky-yellow: #6E5415;
    --sticky-pink: #9d174d;
    --sticky-blue: #1e40af;
    --sticky-green: #065f46;
    --sticky-orange: #9a3412;
    --sticky-text: #f9fafb;
    --sticky-text-muted: #e5e7eb;
}

/* Base sticky note */
.notecard {
    position: relative;
    border-radius: 2px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
    overflow: visible;
}

/* Folded corner effect */
.notecard::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent rgba(0,0,0,0.1) transparent;
}

/* Content area */
.notecard-content {
    padding: 0.75rem;
    min-height: 80px;
}

/* Header with title and status */
.notecard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

/* Title styling */
.notecard-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sticky-text);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body text */
.notecard-body {
    font-size: 0.8rem;
    color: var(--sticky-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Type-based colors */
.notecard-yellow { background: var(--sticky-yellow); }
.notecard-pink { background: var(--sticky-pink); }
.notecard-blue { background: var(--sticky-blue); }
.notecard-green { background: var(--sticky-green); }
.notecard-orange { background: var(--sticky-orange); }

/* Planning card type colors */
.notecard[data-type="plot"] { background: var(--sticky-yellow); }
.notecard[data-type="arc"] { background: var(--sticky-pink); }
.notecard[data-type="theme"] { background: var(--sticky-blue); }
.notecard[data-type="beat"] { background: var(--sticky-green); }

/* Scene note type colors */
.notecard[data-type="coaching"] { background: var(--sticky-yellow); }
.notecard[data-type="continuity"] { background: var(--sticky-pink); }
.notecard[data-type="research"] { background: var(--sticky-blue); }
.notecard[data-type="question"] { background: var(--sticky-orange); }
.notecard[data-type="todo"] { background: var(--sticky-green); }

/* Type and status badges */
.notecard-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Type badge colors - light mode */
.notecard-badge-plot { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.notecard-badge-arc { background: rgba(124, 58, 237, 0.15); color: #6d28d9; }
.notecard-badge-theme { background: rgba(5, 150, 105, 0.15); color: #047857; }
.notecard-badge-beat { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.notecard-badge-coaching { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.notecard-badge-continuity { background: rgba(220, 38, 38, 0.15); color: #b91c1c; }
.notecard-badge-research { background: rgba(124, 58, 237, 0.15); color: #6d28d9; }
.notecard-badge-question { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.notecard-badge-todo { background: rgba(5, 150, 105, 0.15); color: #047857; }

/* Type badge colors - dark mode (lighter, more readable) */
[data-theme="dark"] .notecard-badge-plot { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .notecard-badge-arc { background: rgba(167, 139, 250, 0.25); color: #c4b5fd; }
[data-theme="dark"] .notecard-badge-theme { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }
[data-theme="dark"] .notecard-badge-beat { background: rgba(251, 191, 36, 0.25); color: #fcd34d; }
[data-theme="dark"] .notecard-badge-coaching { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .notecard-badge-continuity { background: rgba(248, 113, 113, 0.25); color: #fca5a5; }
[data-theme="dark"] .notecard-badge-research { background: rgba(167, 139, 250, 0.25); color: #c4b5fd; }
[data-theme="dark"] .notecard-badge-question { background: rgba(251, 191, 36, 0.25); color: #fcd34d; }
[data-theme="dark"] .notecard-badge-todo { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }

/* Dark mode title - ensure white text on dark sticky notes */
[data-theme="dark"] .notecard-title { color: #ffffff; }

/* Status badges */
.notecard-status {
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
}
.notecard-status-planning,
.notecard-status-open { background: var(--bg-elevated); color: var(--text-muted); }
.notecard-status-active,
.notecard-status-in_progress { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.notecard-status-resolved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.notecard-status-cut,
.notecard-status-dismissed { background: rgba(239, 68, 68, 0.1); color: #ef4444; text-decoration: line-through; }

/* Status badges - dark mode */
[data-theme="dark"] .notecard-status-active,
[data-theme="dark"] .notecard-status-in_progress { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .notecard-status-resolved { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }
[data-theme="dark"] .notecard-status-cut,
[data-theme="dark"] .notecard-status-dismissed { background: rgba(248, 113, 113, 0.2); color: #fca5a5; text-decoration: line-through; }

/* Preview card (compact, for panel list) */
.notecard-preview {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 0.5rem;
}

.notecard-preview:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.notecard-preview .notecard-content {
    min-height: 96px; /* 4 lines at 24px */
}

.notecard-preview .notecard-body {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal card (full size for editing) */
.notecard-modal {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.notecard-modal .notecard-content {
    min-height: 288px; /* 12 lines at 24px */
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.notecard-modal .notecard-title {
    font-size: 1rem;
}

.notecard-modal .notecard-body {
    font-size: 0.85rem;
}

/* Modal line containers - each line is exactly 24px */
.notecard-line {
    height: 24px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.notecard-lines {
    min-height: 120px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Editable fields in modal - aligned to ruled lines */
.notecard-input {
    background: transparent;
    border: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sticky-text);
    width: 100%;
    height: 22px;
    line-height: 22px;
    padding: 0;
    margin: 0;
}

.notecard-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
}

.notecard-textarea {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--sticky-text-muted);
    width: 100%;
    resize: none;
    line-height: 24px;
    padding: 0;
    margin: 0;
    min-height: 144px; /* 6 lines */
    flex: 1;
    overflow-y: auto;
}

.notecard-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
}

/* Author notes section */
.notecard-author-notes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-light);
}

.notecard-author-notes label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

/* Legacy support */
.notecard-modal input,
.notecard-modal textarea {
    background: transparent;
    border: none;
    font-family: inherit;
    color: inherit;
    width: 100%;
    resize: none;
    line-height: 24px;
}

.notecard-modal input:focus,
.notecard-modal textarea:focus {
    outline: none;
}

/* Notes panel tabs */
.notes-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
}

/* Style toggle button */
.notes-style-toggle {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.15s ease;
}

.notes-style-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.notes-tab {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.notes-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notes-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Notes list container */
.notes-list {
    padding: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.notes-list:empty::after {
    content: 'No notes yet';
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 1rem;
}

/* Add note button */
.notes-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: transparent;
    border: 1px dashed var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notes-add-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .notecard-preview .notecard-content {
        min-height: 3.5rem;
    }

    .notecard-modal {
        max-width: 100%;
        border-radius: 0;
    }

    .notecard-modal .notecard-content {
        min-height: 250px;
    }
}

/* ==================== Index Card Style ==================== */
/*
 * Classic 3x5 index card styling with:
 * - Cream/off-white background
 * - Red margin line on left edge
 * - Red header line at top
 * - Blue ruled lines for content
 */

:root,
[data-theme="light"] {
    --indexcard-bg: #fffef5;
    --indexcard-margin: #e74c3c;
    --indexcard-header-line: #e74c3c;
    --indexcard-ruled-line: #a8d4f0;
    --indexcard-text: #1a1a1a;
    --indexcard-text-muted: #4a4a4a;
}

[data-theme="dark"] {
    --indexcard-bg: #2a2520;
    --indexcard-margin: #c0392b;
    --indexcard-header-line: #c0392b;
    --indexcard-ruled-line: #3a5a6a;
    --indexcard-text: #f0ece0;
    --indexcard-text-muted: #c0b8a0;
}

/* Base index card */
.indexcard {
    position: relative;
    background: var(--indexcard-bg);
    border-radius: 3px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.12),
        0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* Red margin line on left */
.indexcard::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--indexcard-margin);
    z-index: 1;
}

/* Card content wrapper */
.indexcard-content {
    padding: 0.5rem 0.75rem 0.75rem 2rem;
    position: relative;
}

/* Header area with red top line */
.indexcard-header {
    border-bottom: 2px solid var(--indexcard-header-line);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Type badge (left side) */
.indexcard-type {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Type badge colors */
.indexcard-type-plot { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.indexcard-type-arc { background: rgba(124, 58, 237, 0.15); color: #6d28d9; }
.indexcard-type-theme { background: rgba(5, 150, 105, 0.15); color: #047857; }
.indexcard-type-beat { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.indexcard-type-coaching { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
.indexcard-type-continuity { background: rgba(220, 38, 38, 0.15); color: #b91c1c; }
.indexcard-type-research { background: rgba(124, 58, 237, 0.15); color: #6d28d9; }
.indexcard-type-question { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.indexcard-type-todo { background: rgba(5, 150, 105, 0.15); color: #047857; }

/* Dark mode type badges */
[data-theme="dark"] .indexcard-type-plot { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .indexcard-type-arc { background: rgba(167, 139, 250, 0.25); color: #c4b5fd; }
[data-theme="dark"] .indexcard-type-theme { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }
[data-theme="dark"] .indexcard-type-beat { background: rgba(251, 191, 36, 0.25); color: #fcd34d; }
[data-theme="dark"] .indexcard-type-coaching { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .indexcard-type-continuity { background: rgba(248, 113, 113, 0.25); color: #fca5a5; }
[data-theme="dark"] .indexcard-type-research { background: rgba(167, 139, 250, 0.25); color: #c4b5fd; }
[data-theme="dark"] .indexcard-type-question { background: rgba(251, 191, 36, 0.25); color: #fcd34d; }
[data-theme="dark"] .indexcard-type-todo { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }

/* Status badge (right side) */
.indexcard-status {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    text-transform: uppercase;
}

.indexcard-status-planning,
.indexcard-status-open { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.indexcard-status-active,
.indexcard-status-in_progress { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.indexcard-status-resolved { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.indexcard-status-cut,
.indexcard-status-dismissed { background: rgba(239, 68, 68, 0.1); color: #ef4444; text-decoration: line-through; }
.indexcard-status-draft { background: rgba(245, 158, 11, 0.15); color: #d97706; }

[data-theme="dark"] .indexcard-status-planning,
[data-theme="dark"] .indexcard-status-open { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
[data-theme="dark"] .indexcard-status-active,
[data-theme="dark"] .indexcard-status-in_progress { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .indexcard-status-resolved { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; }
[data-theme="dark"] .indexcard-status-cut,
[data-theme="dark"] .indexcard-status-dismissed { background: rgba(248, 113, 113, 0.2); color: #fca5a5; text-decoration: line-through; }
[data-theme="dark"] .indexcard-status-draft { background: rgba(251, 191, 36, 0.2); color: #fcd34d; }

/* Card title */
.indexcard-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--indexcard-text);
    margin: 0.25rem 0 0 0;
    line-height: 1.3;
}

/* Ruled lines container */
.indexcard-body {
    position: relative;
    min-height: 48px;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 23px,
        var(--indexcard-ruled-line) 23px,
        var(--indexcard-ruled-line) 24px
    );
    background-position: 0 0;
    line-height: 24px;
}

/* Body text sits on the lines */
.indexcard-text {
    font-size: 0.8rem;
    color: var(--indexcard-text-muted);
    margin: 0;
    padding-top: 2px;
}

/* Preview card (compact for panel list) */
.indexcard-preview {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 0.5rem;
}

.indexcard-preview:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.15),
        0 2px 4px rgba(0,0,0,0.1);
}

.indexcard-preview .indexcard-body {
    min-height: 48px;
    max-height: 72px;
    overflow: hidden;
}

.indexcard-preview .indexcard-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal card (full size for editing) */
.indexcard-modal {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.indexcard-modal .indexcard-content {
    padding: 0.75rem 1rem 1rem 2.5rem;
}

.indexcard-modal .indexcard-body {
    min-height: 168px; /* 7 lines */
}

.indexcard-modal .indexcard-title {
    font-size: 1rem;
}

.indexcard-modal .indexcard-text {
    font-size: 0.85rem;
}

/* Editable fields in modal */
.indexcard-input {
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--indexcard-text);
    width: 100%;
    padding: 0;
    margin: 0.25rem 0 0 0;
    line-height: 1.3;
}

.indexcard-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.indexcard-textarea {
    background: transparent;
    border: none;
    font-size: 0.85rem;
    color: var(--indexcard-text-muted);
    width: 100%;
    resize: none;
    line-height: 24px;
    padding: 2px 0 0 0;
    margin: 0;
    min-height: 144px; /* 6 lines */
}

.indexcard-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Author notes section (below main content) */
.indexcard-notes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--indexcard-ruled-line);
}

.indexcard-notes-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

/* Linked scenes pills */
.indexcard-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.indexcard-link {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-elevated);
    border-radius: 3px;
    color: var(--text-muted);
}

.indexcard-link:hover {
    background: var(--accent-light);
    color: var(--accent);
}

/* Card actions (modal footer) */
.indexcard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.indexcard-actions-left {
    display: flex;
    gap: 0.5rem;
}

.indexcard-actions-right {
    display: flex;
    gap: 0.5rem;
}

/* Mobile adjustments for index cards */
@media (max-width: 768px) {
    .indexcard-modal {
        max-width: 100%;
        border-radius: 0;
    }

    .indexcard-modal .indexcard-body {
        min-height: 120px;
    }
}

/* ==================== Buttons ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button */
.btn, .btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

.btn:hover, .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Secondary Button */
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-body);
    border-color: var(--border-medium);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

/* Danger Button */
.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* Small Button */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* ==================== Forms ==================== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    border: 1px solid var(--border-medium);
    border-radius: 0.375rem;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light);
}

label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
}

/* ==================== Header ==================== */
.header {
    background: var(--bg-header);
    color: var(--text-sidebar);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header a {
    color: var(--text-sidebar);
}

.header a:hover {
    color: white;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo {
    font-family: 'Style Script', cursive;
    font-size: 1.85rem;
    font-weight: 400;
    color: white;
    letter-spacing: 0.02em;
}

.login-logo {
    font-family: 'Style Script', cursive;
    font-size: 3.25rem;
    font-weight: 400;
    color: var(--text-heading);
    text-align: center;
    margin-bottom: 0.5rem;
}

/* ==================== Theme Toggle ==================== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-sidebar);
    transition: background 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show/hide icons based on theme */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* ==================== Navigation Breadcrumbs ==================== */
.breadcrumb {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.breadcrumb a {
    color: var(--text-muted);
}

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

/* ==================== Grid ==================== */
.grid {
    display: grid;
    gap: 1rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ==================== Stats ==================== */
.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ==================== Utilities ==================== */
.text-muted {
    color: var(--text-muted);
}

.text-center {
    text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

.hidden {
    display: none !important;
}

/* ==================== Modal ==================== */
#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1100; /* Above mobile slide-up panels (z-index: 1000) */
    pointer-events: none;
    visibility: hidden;
}

#modal-container:not(:empty) {
    pointer-events: auto;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: var(--bg-surface);
    border-radius: 0.5rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-content h3 {
    margin-bottom: 1rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* ==================== Success/Error Messages ==================== */
.success {
    background: var(--success-light);
    color: var(--success);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--success);
}

.error {
    background: var(--danger-light);
    color: var(--danger);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--danger);
}

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) var(--bg-elevated);
}

/* ==================== Selection ==================== */
::selection {
    background: var(--accent-light);
    color: var(--text-primary);
}

/* ==================== Tabbed Forms ==================== */
.modal-lg {
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
}

.form-tabs {
    margin-bottom: 1rem;
}

.form-tabs input[type="radio"] {
    display: none;
}

.form-tabs label {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    margin-bottom: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.form-tabs label:hover {
    color: var(--text-primary);
}

.form-tabs input[type="radio"]:checked + label {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.tab-panel {
    display: none;
    padding: 1rem 0;
    height: 640px;
    overflow-y: auto;
}

/* Character form tab panels */
#tab-basic:checked ~ #panel-basic,
#tab-physical:checked ~ #panel-physical,
#tab-psychology:checked ~ #panel-psychology,
#tab-behavior:checked ~ #panel-behavior,
#tab-abilities:checked ~ #panel-abilities,
#tab-background:checked ~ #panel-background {
    display: block;
}

/* Location form tab panels */
#tab-loc-basic:checked ~ #panel-loc-basic,
#tab-magical:checked ~ #panel-magical,
#tab-sensory:checked ~ #panel-sensory,
#tab-physical-loc:checked ~ #panel-physical-loc,
#tab-narrative:checked ~ #panel-narrative {
    display: block;
}

/* Faction form tab panels */
#tab-faction-basic:checked ~ #panel-faction-basic,
#tab-faction-details:checked ~ #panel-faction-details {
    display: block;
}

/* Magic System form tab panels */
#tab-ms-basic:checked ~ #panel-ms-basic,
#tab-ms-requirements:checked ~ #panel-ms-requirements,
#tab-ms-effects:checked ~ #panel-ms-effects,
#tab-ms-lore:checked ~ #panel-ms-lore {
    display: block;
}

/* Artifact form tab panels */
#tab-art-basic:checked ~ #panel-art-basic,
#tab-art-desc:checked ~ #panel-art-desc,
#tab-art-powers:checked ~ #panel-art-powers,
#tab-art-history:checked ~ #panel-art-history {
    display: block;
}

/* Form grid for two-column layout within tabs */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-grid .full-width {
    grid-column: 1 / -1;
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-group label {
    margin-bottom: 0.25rem;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

/* ==================== Worldbuilding List ==================== */
.wb-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wb-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-elevated);
    border-radius: 0.375rem;
    border: 1px solid var(--border-light);
}

.wb-item:hover {
    border-color: var(--border-medium);
}

.wb-item-info {
    flex: 1;
}

.wb-item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.wb-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wb-item-actions {
    display: flex;
    gap: 0.25rem;
}

/* ==================== Editor Sidebar Reference ==================== */
.reference-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-dark);
}

.reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.reference-header:hover {
    color: var(--text-sidebar);
}

.reference-content {
    padding: 0.5rem 0;
}

.reference-content.collapsed {
    display: none;
}

.reference-group {
    margin-bottom: 0.75rem;
}

.reference-group-header {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

.reference-item {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    color: var(--text-muted);
    cursor: default;
}

.reference-item:hover {
    color: var(--text-sidebar);
}

/* ==================== Worldbuilding Buttons ==================== */
.wb-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.wb-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.wb-button:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    transform: translateY(-2px);
}

.wb-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.wb-button-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.wb-button-label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.wb-button-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ==================== Data Table ==================== */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-box input {
    min-width: 250px;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-controls label {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.sort-controls select {
    width: auto;
    min-width: 120px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.data-table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-elevated);
}

.data-table tbody tr:hover {
    background: var(--bg-hover);
}

.data-table td:last-child {
    white-space: nowrap;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.status-success {
    background: var(--success-light);
    color: var(--success);
}

.status-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.status-danger {
    background: var(--danger-light);
    color: var(--danger);
}

/* ==================== Mobile Modal Fixes ==================== */
@media (max-width: 1024px) {
    .modal-backdrop {
        padding: 0;
        align-items: flex-start;
    }

    .modal-content,
    .modal-lg {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .modal-content h3 {
        position: sticky;
        top: 0;
        background: var(--bg-surface);
        padding: 1rem 1rem 0.75rem;
        margin: -1.5rem -1.5rem 1rem -1.5rem;
        border-bottom: 1px solid var(--border-light);
        z-index: 10;
    }

    /* Close button for mobile modal */
    .modal-content h3::after {
        content: '×';
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        font-size: 1.5rem;
        color: var(--text-muted);
        cursor: pointer;
    }

    .modal-actions {
        position: sticky;
        bottom: 0;
        background: var(--bg-surface);
        padding: 1rem;
        margin: auto -1.5rem -1.5rem -1.5rem;
        border-top: 1px solid var(--border-light);
        gap: 0.75rem;
    }

    .modal-actions .btn {
        flex: 1;
        padding: 0.75rem 1rem;
        min-height: 44px;
    }

    /* Form tabs on mobile */
    .form-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1.5rem 1rem -1.5rem;
        padding: 0 1.5rem;
    }

    .form-tabs label {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }

    /* Form inputs larger touch targets */
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}


/* ==================== Help System ==================== */

.help-page {
    max-width: 900px;
    margin: 0 auto;
}

.help-header {
    margin-bottom: 2rem;
}

.help-header h1 {
    margin-bottom: 0.5rem;
}

.help-search {
    position: relative;
    max-width: 500px;
    margin-bottom: 2rem;
}

.help-search input {
    padding-left: 2.5rem;
}

.help-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.25rem;
}

.help-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.help-category-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.help-category-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.help-category-icon {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.help-category-icon .material-symbols-outlined {
    font-size: 2rem;
}

.help-category-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.help-category-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
}

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

.help-article-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
}

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

.help-article-item:hover {
    background: var(--bg-hover);
}

.help-article-title {
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    font-size: 1rem;
}

.help-article-title:hover {
    text-decoration: underline;
}

.help-article-summary {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.help-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 2rem;
}

.help-content h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.help-content h4:first-child {
    margin-top: 0;
}

.help-content p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.help-content code {
    background: var(--bg-elevated);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: monospace;
}

.help-content ul,
.help-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.help-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.help-content a {
    color: var(--accent);
}

.help-content a:hover {
    text-decoration: underline;
}

.help-related {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
}

.help-related h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.help-back {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .help-categories {
        grid-template-columns: 1fr;
    }

    .help-content {
        padding: 1.25rem;
    }

    .help-search {
        max-width: none;
    }
}

/* ==================== Coaching System ==================== */
.coaching-page {
    max-width: 800px;
    margin: 0 auto;
}

.coaching-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.coaching-header h2 {
    margin: 0;
}

/* Progress Bar */
.coaching-progress-container {
    margin-bottom: 2rem;
}

.coaching-progress-bar {
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.coaching-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.coaching-progress-text {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Step Card */
.coaching-step {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 2rem;
}

.coaching-step-header h3 {
    margin: 0 0 1rem 0;
    color: var(--accent);
}

.coaching-question {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.coaching-explanation {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Examples Section */
.coaching-examples {
    background: var(--bg-elevated);
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

.coaching-examples summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-heading);
}

.coaching-examples summary .material-symbols-outlined {
    color: var(--warning);
}

.coaching-examples ul {
    padding: 0 1rem 1rem 2.5rem;
    margin: 0;
}

.coaching-examples li {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

/* Tips */
.coaching-tips {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: 0 0.375rem 0.375rem 0;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.coaching-tips .material-symbols-outlined {
    color: var(--accent);
    flex-shrink: 0;
}

/* Form Elements */
.coaching-form {
    margin-top: 1.5rem;
}

.coaching-textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-medium);
    border-radius: 0.375rem;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 120px;
}

.coaching-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Selection Options */
.coaching-select-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coaching-select-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.coaching-select-option:hover {
    border-color: var(--accent);
}

.coaching-select-option input[type="radio"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

.coaching-select-option:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Navigation */
.coaching-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.coaching-nav .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Previous Responses */
.coaching-previous-responses {
    margin-top: 2rem;
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
}

.coaching-previous-responses summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.coaching-responses-list {
    padding: 0 1rem 1rem;
}

.coaching-response-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

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

.coaching-response-item strong {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.coaching-response-item p {
    margin: 0;
    font-size: 0.875rem;
}

/* Completion Screen */
.coaching-complete {
    text-align: center;
    padding: 2rem;
}

.coaching-complete-header {
    margin-bottom: 2rem;
}

.coaching-complete-icon {
    font-size: 4rem;
    color: var(--success);
    margin-bottom: 1rem;
}

.coaching-complete-header h3 {
    margin: 0 0 0.5rem 0;
}

.coaching-summary {
    text-align: left;
    background: var(--bg-elevated);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.coaching-summary-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

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

.coaching-summary-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.coaching-summary-value {
    line-height: 1.5;
}

.coaching-complete-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Hub Page */
.coaching-hub {
    max-width: 900px;
    margin: 0 auto;
}

.coaching-workflows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.coaching-workflow-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.coaching-workflow-card .workflow-icon {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.coaching-workflow-card .workflow-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--accent);
}

.coaching-workflow-card h3 {
    margin: 0 0 0.5rem 0;
}

.coaching-workflow-card .workflow-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.coaching-info-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.coaching-info-box h4 {
    margin: 0 0 1rem 0;
}

.coaching-info-box ul {
    padding-left: 1.5rem;
    margin: 0;
}

.coaching-info-box li {
    margin-bottom: 0.5rem;
}

/* View Session */
.coaching-view-summary {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    overflow: hidden;
}

.coaching-view-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

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

.coaching-view-item.coaching-view-empty {
    opacity: 0.5;
}

.coaching-view-step-num {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.coaching-view-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.coaching-view-content p {
    margin: 0;
    line-height: 1.5;
}

.coaching-view-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Mobile */
@media (max-width: 768px) {
    .coaching-step {
        padding: 1.25rem;
    }

    .coaching-question {
        font-size: 1.1rem;
    }

    .coaching-complete-actions,
    .coaching-view-actions {
        flex-direction: column;
    }

    .coaching-complete-actions .btn,
    .coaching-view-actions .btn {
        width: 100%;
        justify-content: center;
    }
}