/* ============================================================
   MPH+ Scenario Engine — VISUAL SYSTEM
   Follows MPH+ design tokens and typography.
   Priority: UTILITY → IDENTITY → COMPOSITION → DECORATION
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --deep-scene:    #0D1B2A;
  --field-surface: #1A2B3C;
  --surface-raised:#1F3347;
  --alert-red:     #CC2936;
  --tech-white:    #F0F2F4;
  --gray:          #7B8FA6;
  --gray-dim:      #4A5E72;
  --amber:         #E8960C;
  --success:       #6FCF97;
  --border:        rgba(120,160,200,.12);
  --border-med:    rgba(120,160,200,.22);

  /* decision type colors */
  --correct:    #6FCF97;
  --acceptable: #90C4E4;
  --equivalent: #9BAFD0;
  --suboptimal: #E8960C;
  --critical:   #CC2936;

  /* outcome colors */
  --favorable:  #6FCF97;
  --partial:    #E8960C;
  --adverse:    #CC2936;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --radius:       3px;
  --radius-lg:    6px;
  --transition:   140ms ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  font-family:      var(--font-body);
  background-color: var(--deep-scene);
  color:            var(--tech-white);
  min-height:       100vh;
  line-height:      1.5;
}

/* ── Scenario shell ─────────────────────────────────────── */
.scenario-shell {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  max-width:      860px;
  margin:         0 auto;
  padding:        0;
}

/* ── Header bar ─────────────────────────────────────────── */
.scenario-header {
  display:         flex;
  align-items:     center;
  gap:             16px;
  padding:         10px 20px;
  border-bottom:   1px solid var(--border-med);
  background:      var(--field-surface);
  position:        sticky;
  top:             0;
  z-index:         100;
  flex-shrink:     0;
}

.scenario-header__badge {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:        var(--alert-red);
  padding:      3px 7px;
  border:       1px solid rgba(204,41,54,.35);
  border-radius:var(--radius);
  white-space:  nowrap;
}

.scenario-header__title {
  font-family:  var(--font-display);
  font-size:    16px;
  font-weight:  600;
  letter-spacing:.02em;
  color:        var(--tech-white);
  flex:         1;
  overflow:     hidden;
  text-overflow:ellipsis;
  white-space:  nowrap;
}

.scenario-header__time {
  font-family:  var(--font-display);
  font-size:    18px;
  font-weight:  700;
  color:        var(--amber);
  letter-spacing:.04em;
  white-space:  nowrap;
}

/* ── Phase indicator ─────────────────────────────────────── */
.phase-tag {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:        var(--gray);
  padding:      8px 20px 6px;
  border-bottom:1px solid var(--border);
}

/* ── Main content ───────────────────────────────────────── */
.scenario-main {
  padding: 20px;
  flex:    1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Context panel ──────────────────────────────────────── */
.context-panel {
  background:   var(--field-surface);
  border:       1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:      16px 20px;
}

.node-title {
  font-family:  var(--font-display);
  font-size:    20px;
  font-weight:  600;
  letter-spacing:.02em;
  color:        var(--tech-white);
  margin-bottom:10px;
}

.context-line {
  font-size:    13px;
  color:        rgba(240,242,244,.80);
  line-height:  1.6;
  margin-top:   5px;
}

.context-line:first-child { margin-top: 0; }

/* ── Patient panel ──────────────────────────────────────── */
.patient-panel {
  background:   var(--surface-raised);
  border:       1px solid var(--border-med);
  border-radius:var(--radius-lg);
  padding:      14px 20px;
}

.patient-panel-header {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  margin-bottom:  10px;
}

.patient-label {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:        var(--gray);
}

.patient-status {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:      2px 8px;
  border-radius:var(--radius);
}

.status-unknown      { color: var(--gray);    background: rgba(123,143,166,.12); }
.status-stable       { color: var(--success); background: rgba(111,207,151,.12); }
.status-deteriorating{ color: var(--amber);   background: rgba(232,150,12,.12);  }
.status-critical     { color: var(--alert-red);background: rgba(204,41,54,.12); }
.status-deceased     { color: var(--gray);    background: rgba(0,0,0,.4);        }

.vitals-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.vital-cell {
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           1px;
  padding:       8px 12px;
  background:    var(--field-surface);
  border-radius: var(--radius);
  border:        1px solid var(--border);
  min-width:     72px;
}

.vital-label {
  font-family:   var(--font-display);
  font-size:     10px;
  font-weight:   600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:         var(--gray);
}

.vital-value {
  font-family:  var(--font-display);
  font-size:    22px;
  font-weight:  700;
  line-height:  1;
}

.vital-unit {
  font-size:  10px;
  color:      var(--gray);
  margin-top: 1px;
}

.vital-normal  .vital-value { color: var(--tech-white); }
.vital-warning .vital-value { color: var(--amber); }
.vital-danger  .vital-value { color: var(--alert-red); }

.vital-normal  { border-color: var(--border); }
.vital-warning { border-color: rgba(232,150,12,.3); }
.vital-danger  { border-color: rgba(204,41,54,.3); }

.vitals-pending {
  font-size: 12px;
  color:     var(--gray);
  font-style:italic;
}

/* ── Decision area ──────────────────────────────────────── */
.decision-question {
  font-family:  var(--font-display);
  font-size:    16px;
  font-weight:  500;
  color:        var(--tech-white);
  margin-bottom:12px;
  letter-spacing:.01em;
}

.decision-list {
  display:       flex;
  flex-direction:column;
  gap:           8px;
}

.btn-decision {
  width:        100%;
  text-align:   left;
  background:   var(--field-surface);
  border:       1px solid var(--border-med);
  border-radius:var(--radius);
  color:        var(--tech-white);
  font-family:  var(--font-body);
  font-size:    13px;
  font-weight:  400;
  padding:      13px 16px;
  cursor:       pointer;
  transition:   background var(--transition), border-color var(--transition), transform var(--transition);
  line-height:  1.45;
}

.btn-decision:hover:not(:disabled) {
  background:   var(--surface-raised);
  border-color: rgba(240,242,244,.3);
  transform:    translateX(2px);
}

.btn-decision:active:not(:disabled) {
  transform: translateX(0) scale(0.99);
}

.btn-decision.is-disabled {
  opacity: 0.4;
  cursor:  default;
}

.btn-continue {
  background:   transparent;
  border:       1px solid var(--border-med);
  border-radius:var(--radius);
  color:        var(--gray);
  font-family:  var(--font-body);
  font-size:    13px;
  padding:      10px 20px;
  cursor:       pointer;
  transition:   color var(--transition), border-color var(--transition);
}

.btn-continue:hover {
  color:        var(--tech-white);
  border-color: rgba(240,242,244,.3);
}

/* ── Feedback banner ─────────────────────────────────────── */
.feedback-banner {
  border-radius: var(--radius);
  padding:       12px 16px;
  display:       flex;
  flex-direction:column;
  gap:           4px;
  border:        1px solid;
  animation:     fadeIn 180ms ease;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.feedback-verdict {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.feedback-text {
  font-size:  13px;
  line-height:1.55;
  color:      rgba(240,242,244,.85);
}

.feedback-banner.is-correct   { background: rgba(111,207,151,.08); border-color: rgba(111,207,151,.25); }
.feedback-banner.is-correct   .feedback-verdict { color: var(--correct); }

.feedback-banner.is-acceptable { background: rgba(144,196,228,.08); border-color: rgba(144,196,228,.25); }
.feedback-banner.is-acceptable .feedback-verdict { color: var(--acceptable); }

.feedback-banner.is-equivalent { background: rgba(155,175,208,.08); border-color: rgba(155,175,208,.25); }
.feedback-banner.is-equivalent .feedback-verdict { color: var(--equivalent); }

.feedback-banner.is-suboptimal { background: rgba(232,150,12,.08); border-color: rgba(232,150,12,.25); }
.feedback-banner.is-suboptimal .feedback-verdict { color: var(--suboptimal); }

.feedback-banner.is-critical   { background: rgba(204,41,54,.10); border-color: rgba(204,41,54,.30); }
.feedback-banner.is-critical   .feedback-verdict { color: var(--alert-red); }

/* ── Decision log ────────────────────────────────────────── */
.log-section {
  border-top: 1px solid var(--border);
  padding:    12px 20px;
}

.log-toggle {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:        var(--gray);
  background:   none;
  border:       none;
  cursor:       pointer;
  padding:      0;
  display:      flex;
  align-items:  center;
  gap:          6px;
  width:        100%;
  text-align:   left;
  margin-bottom:8px;
}

.log-toggle:hover { color: var(--tech-white); }

.log-toggle .toggle-arrow {
  transition: transform var(--transition);
  font-size:  10px;
}

.log-toggle.is-open .toggle-arrow { transform: rotate(90deg); }

.log-entries { display: none; }
.log-entries.is-visible { display: flex; flex-direction: column; gap: 4px; }

.log-entry {
  display:       grid;
  grid-template-columns: 44px 90px 1fr auto;
  gap:           8px;
  align-items:   center;
  padding:       7px 10px;
  border-radius: var(--radius);
  font-size:     11px;
  background:    rgba(255,255,255,.03);
  border-left:   2px solid transparent;
}

.log-entry.is-correct   { border-left-color: var(--correct);   }
.log-entry.is-acceptable{ border-left-color: var(--acceptable);}
.log-entry.is-equivalent{ border-left-color: var(--equivalent);}
.log-entry.is-suboptimal{ border-left-color: var(--suboptimal);}
.log-entry.is-critical  { border-left-color: var(--critical);  }

.log-time    { font-family: var(--font-display); font-size: 11px; color: var(--amber); font-weight: 600; }
.log-phase   { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.log-label   { font-size: 11px; color: rgba(240,242,244,.7); line-height: 1.4; }
.log-verdict { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.log-entry.is-correct   .log-verdict { color: var(--correct);   }
.log-entry.is-acceptable .log-verdict{ color: var(--acceptable);}
.log-entry.is-equivalent .log-verdict{ color: var(--equivalent);}
.log-entry.is-suboptimal .log-verdict{ color: var(--suboptimal);}
.log-entry.is-critical  .log-verdict { color: var(--critical);  }

/* ── Summary / Debrief screen ───────────────────────────── */
.summary-screen {
  position:   fixed;
  inset:      0;
  background: var(--deep-scene);
  z-index:    200;
  overflow-y: auto;
  display:    none;
}

.summary-screen.is-active { display: block; }

.summary-inner {
  max-width: 800px;
  margin:    0 auto;
  padding:   32px 20px 60px;
}

.summary-header {
  margin-bottom: 28px;
}

.summary-header h1 {
  font-family:  var(--font-display);
  font-size:    32px;
  font-weight:  700;
  letter-spacing:.02em;
  margin-bottom:4px;
}

.summary-header p {
  font-size: 13px;
  color:     var(--gray);
}

.summary-outcome {
  border:        1px solid;
  border-radius: var(--radius-lg);
  padding:       20px 24px;
  margin-bottom: 20px;
}

.summary-outcome.is-favorable { border-color: rgba(111,207,151,.4); background: rgba(111,207,151,.07); }
.summary-outcome.is-partial   { border-color: rgba(232,150,12,.4);  background: rgba(232,150,12,.07);  }
.summary-outcome.is-adverse   { border-color: rgba(204,41,54,.4);   background: rgba(204,41,54,.07);   }

.summary-outcome-label {
  font-family:  var(--font-display);
  font-size:    24px;
  font-weight:  700;
  margin-bottom:4px;
}

.is-favorable .summary-outcome-label { color: var(--favorable); }
.is-partial   .summary-outcome-label { color: var(--partial);   }
.is-adverse   .summary-outcome-label { color: var(--adverse);   }

.summary-performance {
  font-size: 13px;
  color:     rgba(240,242,244,.75);
}

.summary-stats {
  display:       grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:           8px;
  margin-bottom: 20px;
}

.summary-stat {
  background:    var(--field-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
  display:       flex;
  flex-direction:column;
  gap:           2px;
}

.stat-label {
  font-size: 11px;
  color:     var(--gray);
  line-height:1.3;
}

.stat-value {
  font-family:  var(--font-display);
  font-size:    24px;
  font-weight:  700;
  color:        var(--tech-white);
}

.summary-stat.stat-critical .stat-value { color: var(--alert-red); }

.summary-section-title {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:        var(--gray);
  margin-bottom:8px;
  margin-top:   20px;
}

.summary-decision-row {
  display:       grid;
  grid-template-columns: 90px 1fr auto;
  gap:           10px;
  align-items:   flex-start;
  padding:       9px 12px;
  border-radius: var(--radius);
  margin-bottom: 4px;
  font-size:     12px;
  background:    var(--field-surface);
  border-left:   3px solid transparent;
}

.summary-decision-row.is-correct   { border-left-color: var(--correct);   }
.summary-decision-row.is-acceptable{ border-left-color: var(--acceptable);}
.summary-decision-row.is-equivalent{ border-left-color: var(--equivalent);}
.summary-decision-row.is-suboptimal{ border-left-color: var(--suboptimal);}
.summary-decision-row.is-critical  { border-left-color: var(--critical);  }

.sdr-phase   { font-family: var(--font-display); font-size: 10px; letter-spacing:.06em; text-transform:uppercase; color: var(--gray); padding-top: 2px; }
.sdr-label   { color: rgba(240,242,244,.85); line-height: 1.4; }
.sdr-verdict { font-family: var(--font-display); font-size: 10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }

.summary-decision-row.is-correct   .sdr-verdict { color: var(--correct);   }
.summary-decision-row.is-acceptable .sdr-verdict{ color: var(--acceptable);}
.summary-decision-row.is-equivalent .sdr-verdict{ color: var(--equivalent);}
.summary-decision-row.is-suboptimal .sdr-verdict{ color: var(--suboptimal);}
.summary-decision-row.is-critical  .sdr-verdict { color: var(--critical);  }

/* ── Debrief ─────────────────────────────────────────────── */
.debrief-section {
  margin-top: 32px;
  padding-top:24px;
  border-top: 1px solid var(--border-med);
}

.debrief-section-title {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:        var(--gray);
  margin-bottom:10px;
  margin-top:   20px;
}

.debrief-what-matters {
  font-size:   14px;
  color:       var(--tech-white);
  line-height: 1.6;
  padding:     14px 16px;
  background:  var(--field-surface);
  border:      1px solid var(--border);
  border-radius:var(--radius);
}

.debrief-key-points {
  list-style:  none;
  display:     flex;
  flex-direction:column;
  gap:         6px;
}

.debrief-key-points li {
  font-size:   13px;
  color:       rgba(240,242,244,.82);
  line-height: 1.55;
  padding:     8px 12px 8px 16px;
  border-left: 2px solid var(--alert-red);
  background:  rgba(204,41,54,.05);
  border-radius:0 var(--radius) var(--radius) 0;
}

.debrief-decision {
  margin-bottom: 10px;
  padding:       12px 14px;
  border-radius: var(--radius);
  background:    var(--field-surface);
  border-left:   3px solid transparent;
}

.debrief-decision.is-correct   { border-left-color: var(--correct);   }
.debrief-decision.is-acceptable{ border-left-color: var(--acceptable);}
.debrief-decision.is-equivalent{ border-left-color: var(--equivalent);}
.debrief-decision.is-suboptimal{ border-left-color: var(--suboptimal);}
.debrief-decision.is-critical  { border-left-color: var(--critical);  }

.dd-header {
  display:       flex;
  gap:           10px;
  align-items:   center;
  margin-bottom: 5px;
}

.dd-phase {
  font-family:  var(--font-display);
  font-size:    10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:        var(--gray);
}

.dd-verdict {
  font-family:  var(--font-display);
  font-size:    10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.debrief-decision.is-correct   .dd-verdict { color: var(--correct);   }
.debrief-decision.is-acceptable .dd-verdict{ color: var(--acceptable);}
.debrief-decision.is-equivalent .dd-verdict{ color: var(--equivalent);}
.debrief-decision.is-suboptimal .dd-verdict{ color: var(--suboptimal);}
.debrief-decision.is-critical  .dd-verdict { color: var(--critical);  }

.dd-label {
  font-size:   13px;
  color:       var(--tech-white);
  font-weight: 500;
  margin-bottom:4px;
}

.dd-feedback {
  font-size:   12px;
  color:       rgba(240,242,244,.70);
  line-height: 1.55;
  margin-top:  4px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background:    var(--alert-red);
  border:        none;
  border-radius: var(--radius);
  color:         #fff;
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   600;
  padding:       11px 22px;
  cursor:        pointer;
  transition:    opacity var(--transition), transform var(--transition);
}

.btn-primary:hover  { opacity: .88; }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  background:    transparent;
  border:        1px solid var(--border-med);
  border-radius: var(--radius);
  color:         var(--gray);
  font-family:   var(--font-body);
  font-size:     13px;
  padding:       9px 18px;
  cursor:        pointer;
  transition:    color var(--transition), border-color var(--transition);
}

.btn-ghost:hover { color: var(--tech-white); border-color: rgba(240,242,244,.3); }

/* ── Start screen ────────────────────────────────────────── */
.start-screen {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  justify-content:center;
  min-height:     calc(100vh - 52px);
  padding:        40px 20px;
  gap:            20px;
}

.start-eyebrow {
  font-family:  var(--font-display);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:        var(--alert-red);
}

.start-title {
  font-family:  var(--font-display);
  font-size:    40px;
  font-weight:  700;
  letter-spacing:.01em;
  color:        var(--tech-white);
  line-height:  1.1;
  max-width:    540px;
}

.start-description {
  font-size:   14px;
  color:       rgba(240,242,244,.70);
  max-width:   480px;
  line-height: 1.6;
}

.start-objectives {
  list-style:  none;
  display:     flex;
  flex-direction:column;
  gap:         6px;
  max-width:   480px;
}

.start-objectives li {
  font-size:   13px;
  color:       rgba(240,242,244,.65);
  padding-left:14px;
  position:    relative;
}

.start-objectives li::before {
  content:    '—';
  position:   absolute;
  left:       0;
  color:      var(--alert-red);
}

.start-actions {
  display: flex;
  gap:     12px;
  margin-top: 8px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .scenario-header { padding: 8px 16px; }
  .scenario-main   { padding: 16px; }
  .vitals-grid     { gap: 6px; }
  .vital-cell      { min-width: 60px; padding: 7px 10px; }
  .vital-value     { font-size: 18px; }
  .start-title     { font-size: 28px; }
  .log-entry       { grid-template-columns: 40px 1fr; }
  .log-phase,
  .log-verdict     { display: none; }
  .summary-stats   { grid-template-columns: repeat(2, 1fr); }
  .summary-decision-row { grid-template-columns: 1fr auto; }
  .sdr-phase       { display: none; }
}