*, *::before, *::after { box-sizing: border-box; }
:root {
 --navy: #0a1628;
 --ink: #172033;
 --muted: #64748b;
 --soft: #f6f8fb;
 --line: #dbe3ee;
 --white: #ffffff;
 --teal: #0ea5e9;
 --teal-dark: #0369a1;
 --amber: #f59e0b;
 --green: #16a34a;
 --red: #dc2626;
 --purple: #7c3aed;
 --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
 --radius: 8px;
}

html { scroll-behavior: smooth; }
body {
 margin: 0;
 min-height: 100vh;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 background: var(--soft);
 color: var(--ink);
 line-height: 1.5;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.scbd-topbar {
 position: sticky;
 top: 0;
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 min-height: 64px;
 padding: 10px 22px;
 background: rgba(10, 22, 40, 0.96);
 color: var(--white);
 border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand {
 font-size: 1.35rem;
 font-weight: 850;
 letter-spacing: 0;
 white-space: nowrap;
}
.brand span { color: var(--teal); }
.top-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: flex-end;
}
.nav-tab, .nav-link {
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 999px;
 background: rgba(255,255,255,0.04);
 color: rgba(255,255,255,0.78);
 padding: 8px 13px;
 font-size: 0.84rem;
 font-weight: 750;
}
.nav-tab.active, .nav-tab:hover, .nav-link:hover {
 background: rgba(14,165,233,0.16);
 border-color: rgba(56,189,248,0.35);
 color: var(--white);
}

.app-shell {
 width: min(1480px, calc(100% - 32px));
 margin: 0 auto;
 padding: 24px 0 44px;
}
.loading-panel, .noscript {
 margin: 50px auto;
 max-width: 680px;
 padding: 24px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}

.page-grid {
 display: grid;
 grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
 gap: 18px;
 align-items: start;
}
.side-panel {
 position: sticky;
 top: 82px;
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.panel, .case-card, .practice-card, .debrief-card, .framework-card {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.panel { padding: 16px; }
.panel-title {
 margin: 0 0 10px;
 color: var(--teal-dark);
 font-size: 0.72rem;
 font-weight: 850;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}
.hero-panel {
 padding: 24px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 margin-bottom: 10px;
 color: #92400e;
 background: #fffbeb;
 border: 1px solid #fde68a;
 border-radius: 999px;
 padding: 5px 10px;
 font-size: 0.72rem;
 font-weight: 850;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.hero-panel h1, .debrief-title {
 margin: 0 0 8px;
 color: var(--navy);
 font-size: clamp(1.55rem, 2.4vw, 2.35rem);
 line-height: 1.1;
 letter-spacing: 0;
}
.hero-panel p, .muted {
 color: var(--muted);
 margin: 0;
}
.notice {
 margin-top: 14px;
 padding: 12px 14px;
 border: 1px solid #bae6fd;
 background: #f0f9ff;
 border-radius: var(--radius);
 color: #075985;
 font-size: 0.9rem;
}
.warning {
 border-color: #fed7aa;
 background: #fff7ed;
 color: #9a3412;
}

.filter-stack {
 display: grid;
 gap: 10px;
}
.field-label {
 display: block;
 margin-bottom: 5px;
 color: var(--muted);
 font-size: 0.76rem;
 font-weight: 760;
}
.input, .select, .textarea {
 width: 100%;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--white);
 color: var(--ink);
 padding: 10px 11px;
 outline: none;
}
.textarea {
 resize: vertical;
 min-height: 120px;
 line-height: 1.55;
}
.input:focus, .select:focus, .textarea:focus {
 border-color: var(--teal);
 box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.mini-stat-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap: 8px;
}
.mini-stat {
 padding: 12px;
 background: var(--soft);
 border: 1px solid #e8eef6;
 border-radius: var(--radius);
}
.mini-stat strong {
 display: block;
 color: var(--navy);
 font-size: 1.35rem;
 line-height: 1;
}
.mini-stat span {
 display: block;
 margin-top: 4px;
 color: var(--muted);
 font-size: 0.76rem;
 font-weight: 720;
}

.case-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px;
 margin-top: 16px;
}
.case-card {
 display: flex;
 flex-direction: column;
 min-height: 280px;
 padding: 16px;
}
.case-meta {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 margin-bottom: 12px;
}
.pill {
 display: inline-flex;
 align-items: center;
 border-radius: 999px;
 padding: 4px 8px;
 background: #f1f5f9;
 color: #475569;
 font-size: 0.68rem;
 font-weight: 850;
 letter-spacing: 0.03em;
 text-transform: uppercase;
}
.pill.red { background: #fee2e2; color: #991b1b; }
.pill.amber { background: #fef3c7; color: #92400e; }
.pill.green { background: #dcfce7; color: #166534; }
.pill.blue { background: #e0f2fe; color: #075985; }
.pill.purple { background: #ede9fe; color: #5b21b6; }
.case-card h2 {
 margin: 0 0 8px;
 font-size: 1.06rem;
 line-height: 1.25;
 color: var(--navy);
}
.case-card p {
 margin: 0 0 14px;
 color: var(--muted);
 font-size: 0.9rem;
}
.case-card footer {
 margin-top: auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 border: 1px solid transparent;
 border-radius: 999px;
 background: var(--teal);
 color: var(--white);
 padding: 10px 15px;
 font-size: 0.86rem;
 font-weight: 850;
 transition: transform 0.16s, background 0.16s, border-color 0.16s;
}
.btn:hover { background: #38bdf8; transform: translateY(-1px); }
.btn:disabled {
 opacity: 0.62;
 cursor: not-allowed;
 transform: none;
}
.btn.secondary {
 background: var(--white);
 color: var(--navy);
 border-color: var(--line);
}
.btn.secondary:hover { background: #f8fafc; border-color: var(--teal); }
.btn.warn {
 background: #fff7ed;
 color: #9a3412;
 border-color: #fed7aa;
}
.btn.danger {
 background: #fee2e2;
 color: #991b1b;
 border-color: #fecaca;
}
.btn.small {
 padding: 7px 11px;
 font-size: 0.76rem;
}
.btn-row {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.practice-layout {
 display: grid;
 grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
 gap: 16px;
 align-items: start;
}
.practice-card { padding: 18px; }
.station-title {
 margin: 0 0 8px;
 color: var(--navy);
 font-size: 1.35rem;
 line-height: 1.2;
}
.stem {
 margin: 10px 0 0;
 padding: 12px;
 background: #f8fafc;
 border: 1px solid #e8eef6;
 border-radius: var(--radius);
 color: #334155;
}
.timer-box {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 8px 12px;
 align-items: center;
 padding: 12px;
 border: 1px solid var(--line);
 background: #f8fafc;
 border-radius: var(--radius);
}
.timer-label {
 color: var(--muted);
 font-size: 0.72rem;
 font-weight: 850;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.timer-num {
 color: var(--navy);
 font-size: 1.55rem;
 line-height: 1;
 font-weight: 900;
 font-variant-numeric: tabular-nums;
}
.timer-num.urgent { color: var(--red); }
.progress-line {
 grid-column: 1 / -1;
 height: 6px;
 background: #e2e8f0;
 border-radius: 999px;
 overflow: hidden;
}
.progress-line span {
 display: block;
 height: 100%;
 background: var(--teal);
 width: 0%;
 transition: width 0.5s linear;
}
.recording-list {
 display: grid;
 gap: 9px;
 margin: 14px 0;
}
.recording-line {
 padding: 11px 12px;
 border: 1px solid #e8eef6;
 background: #f8fafc;
 border-radius: var(--radius);
 color: #334155;
}
.recording-line strong {
 color: var(--navy);
 display: block;
 margin-bottom: 3px;
 font-size: 0.78rem;
 text-transform: uppercase;
 letter-spacing: 0.07em;
}

.station-stepper {
 display: grid;
 grid-template-columns: repeat(5, minmax(0,1fr));
 gap: 6px;
 margin-bottom: 12px;
}
.step-chip {
 border: 1px solid var(--line);
 background: #f8fafc;
 border-radius: var(--radius);
 padding: 8px;
 color: var(--muted);
 font-size: 0.72rem;
 font-weight: 850;
 text-align: center;
}
.step-chip.active { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.phase-kicker {
 display: inline-flex;
 align-items: center;
 margin-bottom: 9px;
 border: 1px solid #bae6fd;
 background: #f0f9ff;
 color: #075985;
 border-radius: 999px;
 padding: 5px 10px;
 font-size: 0.72rem;
 font-weight: 900;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.phase-stepper {
 display: grid;
 gap: 8px;
}
.phase-step {
 display: grid;
 grid-template-columns: 30px 1fr;
 gap: 8px;
 align-items: center;
 width: 100%;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #f8fafc;
 color: var(--ink);
 padding: 9px;
 text-align: left;
}
.phase-step:disabled {
 cursor: not-allowed;
 opacity: 0.58;
}
.phase-step span {
 grid-row: 1 / 3;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: 999px;
 background: #e2e8f0;
 color: #475569;
 font-size: 0.8rem;
 font-weight: 900;
}
.phase-step strong {
 color: var(--navy);
 font-size: 0.84rem;
 line-height: 1.2;
}
.phase-step em {
 color: var(--muted);
 font-size: 0.68rem;
 font-style: normal;
 font-weight: 760;
}
.phase-step.active {
 border-color: #7dd3fc;
 background: #f0f9ff;
}
.phase-step.active span {
 background: var(--teal);
 color: var(--white);
}
.phase-step.done span {
 background: var(--green);
 color: var(--white);
}
.section-grid {
 display: grid;
 gap: 14px;
}
.two-col {
 display: grid;
 grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
 gap: 12px;
}
.subhead {
 margin: 0 0 9px;
 color: var(--navy);
 font-size: 0.98rem;
}
.compact-card {
 padding: 14px 16px;
}
.ddx-card {
 min-height: 100%;
}
.working-ddx-panel {
 border-color: #bae6fd;
 background: #f8fbff;
}
.ddx-quick-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 8px;
 align-items: start;
}
.working-ddx-panel .ddx-list {
 max-height: 240px;
 overflow: auto;
 padding-right: 2px;
}
.working-ddx-panel .ddx-chip {
 background: var(--white);
}
.draft-note {
 padding: 10px 11px;
 border: 1px solid #fed7aa;
 background: #fff7ed;
 border-radius: var(--radius);
 color: #9a3412!important;
}
.micro-copy {
 margin: 8px 0 0;
 color: var(--muted);
 font-size: 0.76rem;
 line-height: 1.5;
}
.save-panel .muted {
 font-weight: 850;
 color: var(--teal-dark);
}
.helper {
 margin: 6px 0 0;
 color: var(--muted);
 font-size: 0.78rem;
}
.ddx-list, .answer-log, .missed-list, .framework-list, .source-list {
 display: grid;
 gap: 8px;
 margin: 10px 0 0;
 padding: 0;
 list-style: none;
}
.ddx-chip {
 display: flex;
 justify-content: space-between;
 gap: 8px;
 align-items: center;
 padding: 8px 10px;
 background: #f8fafc;
 border: 1px solid #e8eef6;
 border-radius: var(--radius);
}
.ddx-chip span {
 min-width: 0;
 overflow-wrap: anywhere;
}
.ddx-review-row {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
}
.ddx-review-chip {
 display: inline-flex;
 align-items: center;
 border: 1px solid #dbeafe;
 background: #eff6ff;
 color: #1e3a8a;
 border-radius: 999px;
 padding: 5px 9px;
 font-size: 0.76rem;
 font-weight: 850;
}
.phase-instruction {
 display: grid;
 gap: 3px;
 margin-bottom: 10px;
 padding: 10px 12px;
 border: 1px solid #e8eef6;
 border-radius: var(--radius);
 background: #f8fafc;
}
.phase-instruction strong {
 color: var(--navy);
 font-size: 0.82rem;
}
.phase-instruction span {
 color: var(--muted);
 font-size: 0.8rem;
}
.phase-actions-card {
 border-color: #bae6fd;
}
.textarea.tall {
 min-height: 220px;
}
.management-prompts {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 9px;
}
.management-prompts span {
 border: 1px solid #e8eef6;
 background: #f8fafc;
 color: var(--muted);
 border-radius: 999px;
 padding: 4px 8px;
 font-size: 0.7rem;
 font-weight: 820;
}
.icon-btn {
 width: 28px;
 height: 28px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--white);
 color: var(--muted);
 flex: 0 0 auto;
}
.segmented {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 4px;
 background: #eef2f7;
 border-radius: 999px;
 margin-bottom: 10px;
}
.segmented button {
 border: 0;
 background: transparent;
 border-radius: 999px;
 color: #475569;
 padding: 8px 11px;
 font-size: 0.78rem;
 font-weight: 850;
}
.segmented button.active {
 background: var(--white);
 color: var(--navy);
 box-shadow: 0 2px 8px rgba(15,23,42,0.09);
}
.examiner-row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 8px;
 align-items: start;
}
.answer-card {
 padding: 12px;
 border: 1px solid #e8eef6;
 background: #f8fafc;
 border-radius: var(--radius);
}
.answer-card strong {
 display: block;
 color: var(--navy);
 margin-bottom: 3px;
}
.answer-card p { margin: 5px 0 0; color: #334155; }
.answer-card .why { color: #075985; font-size: 0.83rem; }
.answer-card.empty {
 border-style: dashed;
 color: var(--muted);
}
.strictness-grid {
 display: grid;
 gap: 7px;
}
.mode-toggle {
 display: grid;
 gap: 7px;
}
.mode-note p {
 font-size: 0.86rem;
}
.radio-row {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 8px;
 align-items: start;
 padding: 9px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #f8fafc;
}
.radio-row strong { display: block; font-size: 0.86rem; color: var(--navy); }
.radio-row span { display: block; font-size: 0.75rem; color: var(--muted); }
.checkbox-row {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 8px;
 align-items: start;
 margin-top: 10px;
 color: var(--muted);
 font-size: 0.78rem;
 font-weight: 720;
}
.checkbox-row.inline {
 display: inline-grid;
 grid-template-columns: auto auto;
 margin-top: 0;
 align-items: center;
 white-space: nowrap;
}
.coach-box {
 margin-top: 10px;
 padding: 11px;
 border: 1px solid #bae6fd;
 border-radius: var(--radius);
 background: #f0f9ff;
}
.coach-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
 justify-content: space-between;
}
.coach-box p {
 margin: 8px 0 0;
 color: #075985;
 font-size: 0.84rem;
}
.coach-box .coach-error {
 color: #9a3412;
}

.score-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0,1fr));
 gap: 10px;
 margin-top: 16px;
}
.score-tile {
 padding: 14px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #f8fafc;
}
.score-tile strong {
 display: block;
 color: var(--navy);
 font-size: 1.6rem;
 line-height: 1;
}
.score-tile span {
 display: block;
 margin-top: 6px;
 color: var(--muted);
 font-size: 0.78rem;
 font-weight: 800;
}
.debrief-card {
 padding: 18px;
 margin-top: 14px;
}
.missed-item {
 border-left: 4px solid var(--teal);
 padding: 10px 12px;
 background: #f8fafc;
 border-radius: 0 var(--radius) var(--radius) 0;
}
.missed-item.red { border-left-color: var(--red); background: #fff7f7; }
.missed-item.amber { border-left-color: var(--amber); background: #fffbeb; }
.missed-item.green { border-left-color: var(--green); background: #f0fdf4; }
.missed-item strong { color: var(--navy); }
.missed-item p { margin: 4px 0 0; color: #334155; }
.reasoning-trail {
 display: grid;
 grid-template-columns: repeat(4, minmax(0,1fr));
 gap: 10px;
}
.trail-box {
 border: 1px solid #e8eef6;
 background: #f8fafc;
 border-radius: var(--radius);
 padding: 11px;
}
.trail-box strong {
 display: block;
 color: var(--teal-dark);
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: 5px;
}
.trail-box p {
 margin: 0;
 color: #334155;
 font-size: 0.82rem;
 line-height: 1.5;
}
.source-list a {
 color: var(--teal-dark);
 text-decoration: underline;
 text-underline-offset: 2px;
}

.framework-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px;
 margin-top: 16px;
}
.framework-card { padding: 16px; }
.framework-card h2 {
 margin: 0 0 8px;
 color: var(--navy);
 font-size: 1.08rem;
}
.framework-columns {
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 gap: 10px;
 margin-top: 10px;
}
.framework-block {
 padding: 11px;
 background: #f8fafc;
 border: 1px solid #e8eef6;
 border-radius: var(--radius);
}
.framework-block h3 {
 margin: 0 0 6px;
 color: var(--teal-dark);
 font-size: 0.73rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.framework-block ul {
 margin: 0;
 padding-left: 17px;
 color: #334155;
 font-size: 0.86rem;
}

.empty-state {
 padding: 24px;
 border: 1px dashed var(--line);
 border-radius: var(--radius);
 background: var(--white);
 color: var(--muted);
 text-align: center;
}

@media (max-width: 1080px) {
 .page-grid, .practice-layout, .two-col { grid-template-columns: 1fr; }
 .side-panel { position: static; }
 .case-grid, .framework-grid, .reasoning-trail { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
 .scbd-topbar {
  position: static;
  align-items: flex-start;
  flex-direction: column;
 }
 .top-actions { justify-content: flex-start; }
 .app-shell { width: min(100% - 20px, 1480px); padding-top: 14px; }
 .station-stepper, .score-grid, .framework-columns { grid-template-columns: 1fr; }
 .examiner-row, .ddx-quick-row { grid-template-columns: 1fr; }
 .btn { width: 100%; }
 .btn.small { width: auto; }
}