/* ── Global ─────────────────────────────────────────────── */
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f8f9fa; }
.footer { font-size: .8rem; }

/* ── Hero ───────────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 60%, #0dcaf0 100%);
    min-height: 280px;
    display: flex;
    align-items: center;
}
.hero-section .opacity-90 { opacity: .9; }

/* ── Scenario cards ──────────────────────────────────────── */
.scenario-card {
    border-left: 4px solid #0d6efd;
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}
.scenario-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }

/* ── Wizard progress bar ─────────────────────────────────── */
.wizard-progress { position: sticky; top: 0; z-index: 100; }
.step-circle {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
    background: #dee2e6; color: #6c757d;
    flex-shrink: 0;
}
.step-circle.active { background: #0d6efd; color: #fff; }
.step-circle.done { background: #198754; color: #fff; }
.step-line { height: 3px; background: #dee2e6; border-radius: 2px; }
.step-line.done { background: #198754; }
.step-label { font-size: .85rem; }

/* ── Cards ───────────────────────────────────────────────── */
.card { border-radius: .75rem; }
.card-header { border-radius: .75rem .75rem 0 0 !important; }

/* ── Heuristic / Objective selector cards ────────────────── */
.heuristic-card, .objective-card {
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-height: 80px;
}
.heuristic-card:hover { border-color: #0dcaf0 !important; }
.objective-card:hover { border-color: #198754 !important; }

/* ── Narrative / Markdown ────────────────────────────────── */
.narrative-content h1 { font-size: 1.5rem; font-weight: 700; border-bottom: 2px solid #dee2e6; padding-bottom: .5rem; }
.narrative-content h2 { font-size: 1.2rem; font-weight: 700; margin-top: 1.5rem; color: #0d6efd; }
.narrative-content h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; }
.narrative-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.narrative-content th { background: #e9ecef; padding: .4rem .6rem; border: 1px solid #dee2e6; text-align: left; }
.narrative-content td { padding: .35rem .6rem; border: 1px solid #dee2e6; }
.narrative-content blockquote { border-left: 4px solid #ffc107; padding-left: 1rem; color: #6c757d; margin: 1rem 0; }
.narrative-content code { background: #f8f9fa; padding: .1rem .3rem; border-radius: .25rem; font-size: .85em; }
.narrative-content ul { padding-left: 1.5rem; }

/* ── Gantt ───────────────────────────────────────────────── */
#gantt-container .gantt-container { padding: 0 !important; }
.bar-late rect { fill: #dc3545 !important; }
.bar-ontime rect { fill: #198754 !important; }

/* ── Form helpers ────────────────────────────────────────── */
.form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
.badge { font-weight: 500; }