* { box-sizing: border-box; }
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background: #f4f1ea;
  color: #1a1a1a;
}
.wrap {
  max-width: 920px;
  margin: 0 auto;
  /* A little extra bottom breathing room (not a full FAB-clearance reserve, which made every
     screen — including the intro splash — need more scroll than it should). The Decision 7
     document is now compact enough, and the answer UI now sits beside rather than below the
     photo on form/dragmatch/hotspot screens, that a large reserved gap isn't needed. */
  padding: 12px 16px 28px;
  position: relative;
  z-index: 1;
}

/* Large low-opacity badge watermark, fixed behind all screens for a consistent visual identity */
.bg-watermark {
  position: fixed;
  top: -70px;
  right: -90px;
  width: 460px;
  height: 460px;
  color: #154734;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
.bg-watermark svg { width: 100%; height: 100%; }
header.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px 10px;
  border-bottom: 3px solid #154734;
  margin-bottom: 12px;
}
header.top h1 {
  font-size: 17px;
  margin: 0;
  color: #154734;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.progress {
  font-size: 14px;
  font-weight: bold;
  color: #154734;
  background: #e4ede9;
  border: 1px solid #154734;
  border-radius: 20px;
  padding: 6px 14px;
}
.session-timer {
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  font-weight: bold;
  color: #555;
  background: #f4f1ea;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 6px 12px;
  letter-spacing: 0.5px;
}
/* Splashy intro-screen hero banner. Shows the full photo at its natural aspect ratio (no
   cropping) so nothing in the shot gets cut off; the photo's dark left third (per the art
   brief) plus a matching CSS scrim keeps the overlaid title legible. */
.intro-hero {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 14px;
  background: #0c2c1f;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.intro-hero-photo {
  display: block;
  width: 100%;
  height: auto;
}
.intro-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9,36,25,0.94) 0%, rgba(9,36,25,0.8) 32%, rgba(9,36,25,0.25) 58%, rgba(9,36,25,0) 74%);
}
.intro-hero-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro-hero-eyebrow {
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #daaa00;
  margin-bottom: 6px;
}
.intro-hero-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.intro-hero-sub {
  font-size: 12.5px;
  font-style: italic;
  color: #cfe3d8;
}

/* Floating "View Case File" button: the folder graphic (with the label baked into the art)
   fixed in the corner so it stays reachable without occupying header space. */
.case-file-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: block;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
}
.case-file-fab:hover { transform: scale(1.06); }
.case-file-fab-icon {
  display: block;
  width: 92px;
  height: auto;
}

/* Incident-callout wrapper for each decision prompt, echoes a field-report framing */
.incident-callout {
  border: 1px solid #154734;
  border-top: none;
  border-left: 6px solid #daaa00;
  background: #fbf3da;
  border-radius: 0 0 6px 6px;
  padding: 8px 14px 2px;
  margin-bottom: 10px;
}
.incident-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a6d00;
  margin: 6px 0 2px;
}

.screen.hidden { display: none; }

.instructions {
  background: #e1eef9;
  border-left: 6px solid #0065bd;
  padding: 10px 16px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.45;
}
.instructions.secondary {
  background: #fbf3da;
  border-left-color: #daaa00;
}
.instructions.tertiary {
  background: #f4f1ea;
  border-left-color: #154734;
  font-style: italic;
}

.decision-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.decision-card:focus { outline: none; }
.decision-card.card-enter { opacity: 0; transform: translateY(8px); }

/* Large faint per-decision icon in the card background, purely decorative */
.card-icon-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 110px;
  height: 110px;
  color: #154734;
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}

/* Full-width banner sitting directly above the incident callout, spanning the same width */
.decision-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: #154734;
  padding: 10px 14px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}
.incident-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.prompt {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.choice-list { list-style: none; padding: 0; margin: 0; }
.choice-list li { margin-bottom: 8px; }
.choice-list button {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 2px solid #ccc;
  background: #fafafa;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}
.choice-list button:hover { border-color: #daaa00; background: #fffdf5; }

.field-form { margin-top: 4px; }
.field-wrap { margin-bottom: 14px; }
.field-wrap label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #154734;
  margin-bottom: 4px;
}
.field-wrap input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #999;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

/* Decision 4: drag-and-drop labeling. Slots (the blanks on the evidence label) sit above a word
   bank of draggable/tappable value chips, including decoys. */
.dragmatch-slots { margin-bottom: 16px; }
.dragmatch-slot { margin-bottom: 10px; }
.dragmatch-slot-label {
  font-weight: bold;
  font-size: 13px;
  color: #154734;
  margin-bottom: 4px;
}
.dragmatch-target {
  min-height: 42px;
  padding: 9px 12px;
  border: 2px dashed #999;
  border-radius: 6px;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  color: #999;
  background: #fafafa;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.dragmatch-target.filled {
  border: 2px solid #154734;
  background: #e4ede9;
  color: #154734;
  font-weight: bold;
}
.dragmatch-bank { margin-bottom: 16px; }
.dragmatch-bank-label {
  font-size: 12px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.dragmatch-bank-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dragmatch-chip {
  padding: 9px 14px;
  border: 2px solid #daaa00;
  background: #fffdf5;
  border-radius: 20px;
  font-size: 13.5px;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: #6b5400;
  cursor: grab;
}
.dragmatch-chip:hover { background: #fbf3da; }
.dragmatch-chip.selected {
  background: #daaa00;
  color: #3a2c00;
  box-shadow: 0 0 0 2px #b48f00;
}

/* Decision 7: click-the-mistake document. Rows are buttons styled as document fields so any
   field is a valid click target, with no visual hint of which one is the problem. */
.hotspot-doc {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 4px;
}
.hotspot-doc-title {
  background: #154734;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 10px 14px;
}
.hotspot-doc-fields { background: #fff; }
/* Label and value sit side by side (rather than stacked) to keep this document compact, since a
   full document's worth of stacked rows was pushing Decision 7 tall enough to need scrolling.
   Wraps back to a stacked layout on narrow viewports. */
.hotspot-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 8px 14px;
  border: none;
  border-bottom: 1px dashed #ddd;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.hotspot-field:last-child { border-bottom: none; }
.hotspot-field:hover { background: #fbf3da; }
.hotspot-field-label {
  flex: 0 0 190px;
  font-size: 11px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hotspot-field-value {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 14px;
  color: #1a1a1a;
  font-family: "Courier New", Courier, monospace;
}

/* Scene illustration shown on the prompt and feedback screens. Shown at full, uncropped size
   (natural aspect ratio), but capped to a moderate width and centered rather than stretched to
   the full card width, so the illustration stays intact without adding excessive scroll. */
.feedback-photo {
  max-width: 440px;
  margin: 0 auto 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.feedback-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Two-column layout: pairs a photo with text beside it (rather than the text overlaying the
   photo), used on decision prompt screens (prompt text left, photo right), feedback screens
   (photo left, result + Continue right), and ending screens (photo left, score/card/remember
   right). Stays side by side at any width (flex-wrap: nowrap) rather than collapsing to a
   stacked single column when the window narrows — stacking made the photo take the full (still
   fairly wide) column width on its own line, which needed more scroll, not less. Both sides
   shrink together instead, down to a sensible floor.

   The photo side has flex-grow: 0, so it never renders larger than its own basis just because
   the browser window happens to be wide (a wider window means more room for the row, not a
   bigger photo) — that growth was what made these screens need more vertical scroll specifically
   in wide windows. Only the text side grows to fill leftover width. */
.split-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.split-row > .feedback-photo,
.split-row > .ending-photo {
  flex: 0 1 420px;
  min-width: 160px;
  margin: 0;
}
.split-row > .incident-callout,
.split-row > .split-text {
  flex: 1 1 280px;
  min-width: 180px;
  margin: 0;
  text-align: left;
}
.split-row > .split-text > *:last-child { margin-bottom: 0; }
/* Prompt screens for form/dragmatch/hotspot decisions stack the answer UI directly under the
   question (inside .split-text) instead of pushing it below the whole row; give it breathing
   room from the callout above it. */
.split-row > .split-text > .incident-callout { margin-bottom: 14px; }

.feedback {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.feedback.correct { background: #e4ede9; border-left: 6px solid #154734; }
.feedback.incorrect { background: #fde3d3; border-left: 6px solid #ff6e00; }

.feedback-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 6px;
}
.feedback-icon { font-size: 17px; }
.feedback.correct .feedback-header { color: #154734; }
.feedback.incorrect .feedback-header { color: #a3121f; }
.feedback-byline {
  font-size: 12px;
  font-weight: bold;
  color: #555;
  margin-bottom: 4px;
}
.feedback-text { margin: 0; }

.btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
}
.btn.primary { background: #154734; color: #fff; }
.btn.primary:hover { background: #0f3527; }

/* Begin Scenario gets a distinct, more attention-grabbing hover than other primary buttons */
#beginBtn {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#beginBtn:hover {
  background: #daaa00;
  color: #3a2c00;
  transform: scale(1.06);
}

.screen#endingScreen { text-align: center; padding: 20px 4px; }

/* Ending-specific scene illustration, replaces the small SVG ending icon when a photo exists */
.ending-photo {
  margin: 0 auto 16px;
  max-width: 440px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.ending-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.score { font-size: 42px; font-weight: bold; color: #154734; }
.status { font-size: 15px; font-weight: bold; margin: 6px 0 20px; }
.status.passed { color: #154734; }
.status.failed { color: #a3121f; }

.ending-card {
  text-align: left;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0 auto;
  max-width: 600px;
  border-left: 8px solid #154734;
  background: #e4ede9;
}
.ending-card h2 { margin: 0 0 8px; font-size: 18px; color: #154734; }
.ending-card p { margin: 0; font-size: 15px; line-height: 1.5; }

.ending-card.ending-minor { border-left-color: #daaa00; background: #fbf3da; }
.ending-card.ending-minor h2 { color: #8a6d00; }
.ending-card.ending-major,
.ending-card.ending-scope,
.ending-card.ending-role {
  border-left-color: #ed2939;
  background: #fde3d3;
}
.ending-card.ending-major h2,
.ending-card.ending-scope h2,
.ending-card.ending-role h2 { color: #a3121f; }

.ending-note {
  max-width: 600px;
  margin: 10px auto 0;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* Emphasized callout so students actually notice and retain which ending they reached, since
   later activities (5.2, 6.2) ask them to recall it. Styled to stand out, matching the gold
   callout treatment used for the case-file reference tip. */
.ending-remember {
  max-width: 600px;
  margin: 14px auto 0;
  background: #fbf3da;
  border: 2px solid #daaa00;
  border-radius: 8px;
  padding: 14px 18px;
  text-align: left;
  animation: rememberPulse 1.1s ease-in-out 3;
}
/* A few attention-grabbing pulses on arrival, then it settles into its normal static gold
   styling, rather than pulsing forever (which would be distracting to re-read against). Already
   covered by the site-wide prefers-reduced-motion override, which disables all animation. */
@keyframes rememberPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(218, 170, 0, 0); }
  50% { box-shadow: 0 0 0 8px rgba(218, 170, 0, 0.35); }
}
.ending-remember-eyebrow {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a6d00;
  margin-bottom: 6px;
}
.ending-remember p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #3a2c00;
  line-height: 1.5;
}

/* Case file reference panel */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }

/* The popup is a flex column: a fixed-height max box, a scrollable middle section, and a footer
   that stays pinned so the Close button is always reachable without scrolling. */
.case-file {
  position: relative;
  background: #fdfaf2;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #c9c2ab;
  border-radius: 3px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.35);
  overflow: hidden;
}
.case-file-tab {
  position: absolute;
  top: -16px;
  left: 24px;
  background: #daaa00;
  color: #3a2c00;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
}
.case-file-scroll {
  overflow-y: auto;
  padding: 20px 26px 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.case-file-banner {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 12px;
}

.case-file-header {
  border-bottom: 2px solid #154734;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.case-file-title {
  font-size: 18px;
  font-weight: bold;
  color: #154734;
  font-style: italic;
}
.case-file-sub {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Reference tip, moved to the top of the popup (above the table) and styled to stand out,
   since it's easy to miss when it used to sit below the table at the bottom of a scrolling view. */
.case-file-tip {
  background: #fbf3da;
  border-left: 4px solid #daaa00;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: bold;
  color: #6b5400;
  line-height: 1.4;
}
.case-file-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.case-file-table tr { border-bottom: 1px dashed #c9c2ab; }
.case-file-table tr:last-child { border-bottom: none; }
.case-file-table td {
  padding: 8px 4px;
  vertical-align: top;
}
.case-file-table td:first-child {
  font-weight: bold;
  color: #555;
  width: 42%;
  white-space: nowrap;
}
.case-file-table td:last-child {
  font-family: "Courier New", Courier, monospace;
  color: #1a1a1a;
}
.case-file-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 12px 26px 20px;
  border-top: 1px solid #e2dcc4;
  background: #fdfaf2;
}

/* Decision recap + skills-practiced debrief */
.recap-wrap {
  text-align: left;
  /* Wide enough that the two-column recap list below gets ~400px per column, so a decision title
     fits on one line instead of wrapping (which would erase the height savings of going to two
     columns in the first place). */
  max-width: 820px;
  margin: 28px auto 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 22px;
}
.recap-wrap h3 {
  font-size: 14px;
  color: #154734;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.recap-wrap h3 + h3 { margin-top: 20px; }
.recap-list, .wlg-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Two columns instead of one long single-column list, so the recap doesn't run so much taller
   than the photo it now sits under. */
.recap-list {
  column-count: 2;
  column-gap: 20px;
}
.recap-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.recap-list li:last-child { border-bottom: none; }
.recap-icon { font-size: 14px; flex-shrink: 0; }
.recap-list li.correct { color: #154734; }
.recap-list li.incorrect { color: #a3121f; }
.wlg-list li {
  font-size: 13.5px;
  color: #333;
  padding: 4px 0 4px 18px;
  position: relative;
}
.wlg-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: #154734;
}

/* Dramatic opening/closing transition screens (skipped instantly when motion is reduced,
   since the global "* { animation:none!important }" rules below neutralize the keyframes and
   app.js also shortens the timed delay to 0ms in that case). */
.transition-screen { text-align: center; padding: 14px 4px; }
.transition-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 20px;
}
/* Bookend transition photo (opening/closing case file), sits above the small badge icon */
.transition-photo {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  opacity: 0;
  animation: fadeInPhoto 0.8s ease-out forwards;
}
@keyframes fadeInPhoto { to { opacity: 1; } }

.transition-icon {
  width: 56px;
  height: 56px;
  color: #154734;
  animation: sealIn 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.transition-icon.tone-warn { color: #8a6d00; }
.transition-icon.tone-risk { color: #a3121f; }
@keyframes sealIn {
  0% { opacity: 0; transform: scale(0.55) rotate(-8deg); }
  65% { opacity: 1; transform: scale(1.08) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.transition-text {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #154734;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInText 0.6s ease-out 0.45s forwards;
}
@keyframes fadeInText { to { opacity: 1; } }

/* Ending-screen icon */
.ending-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  color: inherit;
}

/* Visible focus indicators (keyboard navigation) */
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0065bd;
  outline-offset: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}