/* TRACE Sandbox — "A Day in the SOC"
 * Mail-client simulation for phishing forensics practice.
 * Accent: --color-forensic (inherited from main.css).
 */

.trace-sim {
  /* Soft editorial palette — shares the site's design language (rounded
   * corners, warm neutrals, serif headings) while keeping a distinct
   * "mail-client workspace" feel via the bone desk surface.
   * Monospace is reserved for real data (addresses, URLs, raw headers). */
  --sim-bg: #f5efe2;             /* warm bone — the desk surface */
  --sim-panel: #ffffff;          /* email paper */
  --sim-panel-alt: #fbf7ec;      /* soft cream — action panel */
  --sim-border: #e8dfc9;         /* warm hairline */
  --sim-border-strong: #c8bfa5;  /* softer emphasis (replaces hard black) */
  --sim-text: #2b2821;
  --sim-text-muted: #7a7062;
  --sim-row-hover: #f3ecdb;
  --sim-row-selected: #ece2c9;
  --sim-accent: var(--color-forensic);
  --sim-accent-dark: var(--color-forensic-dark);
  --sim-accent-soft: #f1eafb;
  --sim-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Depth + edges — match the site's softer material language. */
  --sim-radius-sm: 6px;
  --sim-radius-md: 10px;
  --sim-radius-lg: 16px;
  --sim-shadow-sm: 0 1px 2px rgba(60, 48, 20, 0.05);
  --sim-shadow-md: 0 4px 16px rgba(60, 48, 20, 0.08);
  --sim-shadow-lg: 0 12px 36px rgba(60, 48, 20, 0.12);

  min-height: calc(100vh - var(--nav-height, 64px));
  background: var(--sim-bg);
  color: var(--sim-text);
  font-family: var(--font-sans);
}

/* Hide site-wide chrome that doesn't belong in a sim */
body:has(#trace-sim-app) .site-footer,
body:has(#trace-sim-app) #scrollToTop { display: none !important; }

/* Lock body scroll ONLY while the mail-client layout is mounted.
 * Briefing and scorecard need normal page scroll. */
body:has(.trace-sim__layout) { overflow: hidden; }

/* Header bar — editorial rather than utilitarian. Soft border, site body font. */
.trace-sim__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--sim-border);
  background: var(--sim-panel);
  font-size: 0.875rem;
}

.trace-sim__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sim-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.trace-sim__back:hover { color: var(--sim-accent-dark); }

.trace-sim__title {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 1rem;
}
.trace-sim__sep { color: var(--sim-text-muted); margin: 0 0.5rem; opacity: 0.6; }
.trace-sim__clock {
  color: var(--sim-text);
  font-family: var(--sim-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8125rem;
}

.trace-sim__progress {
  display: inline-flex;
  gap: 4px;
}

.trace-sim__progress-dot {
  width: 22px;
  height: 5px;
  background: var(--sim-border);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.trace-sim__progress-dot--done { background: var(--sim-accent); opacity: 0.4; }
.trace-sim__progress-dot--current { background: var(--sim-accent); opacity: 1; }

/* Main area — overridden by sub-layouts */
.trace-sim__main {
  display: block;
}

/* Toast */
.trace-sim__toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sim-text);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  z-index: 1000;
}

.trace-sim__toast[hidden] { display: none; }

/* More styles added in later phases:
 *   Phase 2: briefing screen, three-panel mail-client layout
 *   Phase 3: hover tooltip, "..." menu, attachment warning
 *   Phase 4: action panel renderers
 *   Phase 7: scorecard
 */

/* Briefing screen — soft editorial card, serif heading, generous padding */
.trace-sim__briefing {
  max-width: 720px;
  margin: 3rem auto;
  padding: 2.5rem 2.5rem 2rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-lg);
  box-shadow: var(--sim-shadow-md);
}

.trace-sim__briefing-title {
  font-family: var(--font-serif);
  margin: 0 0 0.75rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.trace-sim__briefing-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sim-text);
  margin-bottom: 1.25rem;
}

.trace-sim__briefing-tip {
  padding: 1rem 1.125rem;
  background: var(--sim-accent-soft);
  border-left: 3px solid var(--sim-accent);
  border-radius: 0 var(--sim-radius-md) var(--sim-radius-md) 0;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.trace-sim__briefing-tip strong { margin-right: 0.25rem; }
.trace-sim__briefing-tip a { color: var(--sim-accent-dark); font-weight: 600; }

.trace-sim__briefing-actions {
  display: flex;
  gap: 0.75rem;
}

.trace-sim__btn {
  padding: 0.6875rem 1.375rem;
  border: 1px solid var(--sim-border);
  background: var(--sim-panel);
  color: var(--sim-text);
  border-radius: var(--sim-radius-md);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.06s ease;
  box-shadow: var(--sim-shadow-sm);
}

.trace-sim__btn:hover {
  background: var(--sim-row-hover);
  border-color: var(--sim-border-strong);
  box-shadow: var(--sim-shadow-md);
}

.trace-sim__btn:active { transform: translateY(1px); }

.trace-sim__btn--primary {
  background: var(--sim-accent);
  border-color: var(--sim-accent);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.trace-sim__btn--primary:hover {
  background: var(--sim-accent-dark);
  border-color: var(--sim-accent-dark);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32);
}

.trace-sim__btn--secondary {
  background: var(--sim-panel);
  color: var(--sim-text);
}

/* Mail-client layout: fixed viewport, three internal panes — like a real mail client.
 * Inset with padding + gaps so each pane feels like its own rounded card
 * rather than hard-divided sections. Two collapse modifiers let learners
 * reclaim space: folder sidebar shrinks to icon-only (48px), inbox list
 * collapses to a narrow "peek" tab (28px). */
.trace-sim__layout {
  display: grid;
  grid-template-columns: 220px 360px 1fr;
  gap: 1rem;
  padding: 1rem;
  height: calc(100vh - var(--nav-height, 64px) - 45px);
  background: var(--sim-bg);
  transition: grid-template-columns 180ms ease;
}

.trace-sim__layout--sidebar-collapsed { grid-template-columns: 48px 360px 1fr; }
.trace-sim__layout--list-collapsed    { grid-template-columns: 220px 28px 1fr; }
.trace-sim__layout--sidebar-collapsed.trace-sim__layout--list-collapsed {
  grid-template-columns: 48px 28px 1fr;
}

.trace-sim__sidebar {
  background: var(--sim-panel);
  /* Top padding reserves space for the absolutely-positioned collapse chevron
   * so it never overlaps the first folder row. */
  padding: 2.25rem 0 0.75rem;
  overflow-y: auto;
  position: relative;
  border-radius: var(--sim-radius-md);
  border: 1px solid var(--sim-border);
  box-shadow: var(--sim-shadow-sm);
}

/* Pane-toggle chevron lives top-right inside its pane. */
.trace-sim__pane-toggle {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sim-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 2px;
  z-index: 2;
}

.trace-sim__pane-toggle:hover {
  background: var(--sim-row-hover);
  border-color: var(--sim-border);
  color: var(--sim-text);
}

.trace-sim__layout--sidebar-collapsed .trace-sim__pane-toggle--sidebar i,
.trace-sim__layout--list-collapsed .trace-sim__pane-toggle--list i {
  transform: rotate(180deg);
}

/* Center the collapse toggle horizontally when the sidebar is narrow so it
 * lines up with the centered folder icons below instead of clinging to the
 * right edge. */
.trace-sim__layout--sidebar-collapsed .trace-sim__pane-toggle--sidebar {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.trace-sim__folders {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trace-sim__folder {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.875rem;
  margin: 0.15rem 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--sim-text);
  border-radius: var(--sim-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.trace-sim__folder:hover { background: var(--sim-row-hover); }
.trace-sim__folder--active {
  background: var(--sim-accent-soft);
  color: var(--sim-accent-dark);
  font-weight: 600;
}

.trace-sim__folder--active i { color: var(--sim-accent); }

.trace-sim__folder i { width: 14px; font-size: 0.8125rem; color: var(--sim-text-muted); }
.trace-sim__folder--active i { color: var(--sim-text); }

.trace-sim__folder-label { flex: 1; }
.trace-sim__folder-count {
  color: var(--sim-text-muted);
  font-size: 0.75rem;
  font-family: var(--sim-mono);
  min-width: 12px;
  text-align: right;
}

.trace-sim__folder--active .trace-sim__folder-count { color: var(--sim-text); }

.trace-sim__list-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--sim-text-muted);
  font-family: var(--sim-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sidebar collapsed: icon-only column. Hide labels/counts; the row margin
 * is SYMMETRIC so icons (and their active-state highlights) sit on the same
 * vertical center line as the collapse chevron above. */
.trace-sim__layout--sidebar-collapsed .trace-sim__folder {
  justify-content: center;
  padding: 0.55rem 0;
  margin: 0.15rem 0.25rem;  /* symmetric horizontal margins — no left bias */
}
.trace-sim__layout--sidebar-collapsed .trace-sim__folder--active {
  background: var(--sim-accent-soft);
}
.trace-sim__layout--sidebar-collapsed .trace-sim__folder-label,
.trace-sim__layout--sidebar-collapsed .trace-sim__folder-count { display: none; }
.trace-sim__layout--sidebar-collapsed .trace-sim__folder i { width: auto; font-size: 0.9375rem; }

.trace-sim__list-pane {
  background: var(--sim-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: var(--sim-radius-md);
  border: 1px solid var(--sim-border);
  box-shadow: var(--sim-shadow-sm);
}

.trace-sim__list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--sim-border);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--sim-text);
  background: transparent;
  min-height: 48px;
}

.trace-sim__list-header .trace-sim__pane-toggle {
  position: static;
}

.trace-sim__list {
  flex: 1;
  overflow-y: auto;
}

/* Vertical peek-tab shown when inbox list is collapsed. Click to expand. */
.trace-sim__list-peek {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--sim-panel-alt);
  border: 0;
  border-right: 1px solid var(--sim-border);
  cursor: pointer;
  font-family: var(--sim-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sim-text-muted);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.6rem;
  gap: 0.6rem;
}

.trace-sim__list-peek:hover { background: var(--sim-row-hover); color: var(--sim-text); }
.trace-sim__list-peek-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.2em;
}

/* List collapsed: hide header + rows, show peek tab. */
.trace-sim__layout--list-collapsed .trace-sim__list-header,
.trace-sim__layout--list-collapsed .trace-sim__list { display: none; }
.trace-sim__layout--list-collapsed .trace-sim__list-peek { display: flex; }

/* Right column — email (the document) and action panel (the analyst's
 * workstation) live SIDE BY SIDE, each filling full viewport height with
 * its own scroll context. Email gets the larger share (~60%) because it's
 * the subject of investigation; action panel is generous but narrower so
 * questions and options are compact without squashing the email. */
.trace-sim__right {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.95fr);
  gap: 1rem;
  min-height: 0;
  min-width: 0;
}

/* When the whole viewport is tight, fall back to stacked layout. Also stack
 * whenever the right column can't comfortably host both panes. */
@media (max-width: 1180px) {
  .trace-sim__right {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 1fr) auto;
  }
  .trace-sim__action-panel { max-height: 60vh; }
}

.trace-sim__viewer {
  overflow-y: auto;
  padding: 2rem 2.5rem;
  background: var(--sim-panel);
  border-radius: var(--sim-radius-md);
  border: 1px solid var(--sim-border);
  box-shadow: var(--sim-shadow-sm);
  min-height: 0;
  min-width: 0;
}

.trace-sim__viewer-empty {
  color: var(--sim-text-muted);
  text-align: center;
  padding: 3rem 0;
  font-family: var(--sim-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* Action panel = the analyst's workstation beside the document. Full-height
 * column with its own scroll so questions + feedback never push the email
 * off-screen. Cream surface distinguishes it from the white email paper. */
.trace-sim__action-panel {
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--sim-panel-alt);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-md);
  box-shadow: var(--sim-shadow-sm);
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.trace-sim__action-panel::before { content: none; }

/* Hide separator + clock until a shift is active */
.trace-sim__sep,
.trace-sim__clock { display: none; }
.trace-sim--shift-active .trace-sim__sep,
.trace-sim--shift-active .trace-sim__clock { display: inline; }

@media (max-width: 900px) {
  .trace-sim__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    height: auto;
  }
  .trace-sim__sidebar { display: flex; overflow-x: auto; padding: 0.5rem; }
  .trace-sim__folders { display: flex; gap: 0.25rem; }
  .trace-sim__list-pane { max-height: 300px; }
}

.trace-sim__row {
  padding: 0.8rem 1rem;
  margin: 0.25rem 0.5rem;
  border-radius: var(--sim-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  position: relative;
}

.trace-sim__row:hover { background: var(--sim-row-hover); }
.trace-sim__row--selected {
  background: var(--sim-accent-soft);
  box-shadow: inset 3px 0 0 var(--sim-accent);
}
.trace-sim__row--selected:hover { background: var(--sim-accent-soft); }

.trace-sim__row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}

.trace-sim__row-sender { font-weight: 500; color: var(--sim-text); }
.trace-sim__row--unread .trace-sim__row-sender { font-weight: 700; }
.trace-sim__row-time {
  color: var(--sim-text-muted);
  font-size: 0.6875rem;
  font-family: var(--sim-mono);
  text-transform: lowercase;
  flex-shrink: 0;
}

.trace-sim__row-subject {
  color: var(--sim-text);
  margin-bottom: 0.15rem;
  font-size: 0.8125rem;
}
.trace-sim__row--unread .trace-sim__row-subject { font-weight: 600; }

.trace-sim__row-snippet {
  color: var(--sim-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace-sim__msg-head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--sim-border);
  margin-bottom: 1.5rem;
}

.trace-sim__msg-subject {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--sim-text);
}

.trace-sim__msg-sender-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.trace-sim__msg-avatar {
  width: 40px; height: 40px;
  background: var(--sim-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  flex-shrink: 0;
  border-radius: 50%;
}

.trace-sim__msg-sender-info { flex: 1; line-height: 1.35; }
.trace-sim__msg-sender-name strong { font-weight: 600; font-size: 0.9375rem; }
.trace-sim__msg-sender-addr {
  color: var(--sim-text-muted);
  font-family: var(--sim-mono);
  font-size: 0.8125rem;
}
.trace-sim__msg-sender-time {
  color: var(--sim-text-muted);
  font-family: var(--sim-mono);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

.trace-sim__msg-menu {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--sim-text-muted);
  line-height: 1;
}

.trace-sim__msg-menu:hover {
  background: var(--sim-row-hover);
  border-color: var(--sim-border);
  color: var(--sim-text);
}

.trace-sim__msg-body {
  line-height: 1.65;
  font-size: 0.9375rem;
  color: var(--sim-text);
  max-width: 64ch;
}

.trace-sim__msg-body p { margin: 0 0 1rem; }
.trace-sim__msg-body a {
  color: var(--sim-accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-family: var(--sim-mono);
  font-size: 0.9em;
  word-break: break-all;
}

.trace-sim__msg-attachments {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sim-border);
}

.trace-sim__msg-attachments-label {
  font-size: 0.8125rem;
  color: var(--sim-text-muted);
  margin-bottom: 0.4rem;
}

.trace-sim__attachment {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sim-border);
  border-radius: var(--radius-md);
  background: #fafbfc;
  cursor: pointer;
  font-size: 0.875rem;
  width: 100%;
  text-align: left;
}

.trace-sim__attachment:hover { background: var(--sim-row-hover); }
.trace-sim__attachment i { color: var(--sim-text-muted); }
.trace-sim__attachment-name { flex: 1; }
.trace-sim__attachment-size { color: var(--sim-text-muted); font-size: 0.8125rem; }

.trace-sim__link-tooltip {
  position: absolute;
  background: #111827;
  color: #f9fafb;
  padding: 0.375rem 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1100;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menu is appended to document.body — OUTSIDE the `.trace-sim` scope — so
 * `var(--sim-panel)` etc. don't resolve. Use explicit colors so the menu
 * doesn't render with a transparent background that lets the viewer's
 * header-separator line bleed through it. */
.trace-sim__menu {
  background: #ffffff;
  border: 1px solid #d9d2bf;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.35rem;
  min-width: 220px;
  z-index: 1200;
}

.trace-sim__menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.trace-sim__menu-item:hover { background: #f2ecd9; }
.trace-sim__menu-item i { width: 16px; color: #6b6256; }
.trace-sim__menu-item--danger { color: #b91c1c; }
.trace-sim__menu-item--danger i { color: #b91c1c; }
.trace-sim__menu-item--danger:hover { background: #fdecea; }

/* Action panel — MC renderer */
.trace-sim__action-prompt {
  font-family: var(--font-serif);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  color: var(--sim-text);
  line-height: 1.35;
}

.trace-sim__action-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 0;
  background: transparent;
}

.trace-sim__action-option {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-md);
  color: var(--sim-text);
  text-align: left;
  font-size: 0.9375rem;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
  box-shadow: var(--sim-shadow-sm);
}

.trace-sim__action-option:last-child { border-bottom: 1px solid var(--sim-border); }

.trace-sim__action-option:hover:not(:disabled) {
  border-color: var(--sim-accent);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}

.trace-sim__action-option:disabled { cursor: not-allowed; opacity: 0.7; transform: none; }
.trace-sim__action-option--correct {
  background: #f0fdf4;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #86efac;
}
.trace-sim__action-option--correct:hover:not(:disabled) { background: #f0fdf4; }
.trace-sim__action-option--wrong {
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: 0 0 0 1px #fca5a5;
}
.trace-sim__action-option--wrong:hover:not(:disabled) { background: #fef2f2; }

.trace-sim__action-feedback {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border-left: 3px solid;
  border-radius: 0 var(--sim-radius-sm) var(--sim-radius-sm) 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  background: var(--sim-panel);
}

.trace-sim__action-feedback--correct {
  border-left-color: #16a34a;
  background: #f0fdf4;
  color: #166534;
}
.trace-sim__action-feedback--wrong {
  border-left-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

/* Action panel — hover-reveal renderer */
.trace-sim__link-table {
  margin-bottom: 0.875rem;
  padding: 0.625rem;
  background: #fafbfc;
  border: 1px solid var(--sim-border);
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
}

.trace-sim__link-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
}

.trace-sim__link-row + .trace-sim__link-row { border-top: 1px solid var(--sim-border); }
.trace-sim__link-appears { color: var(--sim-text-muted); }
.trace-sim__link-real { color: var(--sim-accent-dark); word-break: break-all; }
.trace-sim__link-arrow { color: var(--sim-text-muted); }

/* Action panel — report-form renderer */
.trace-sim__report-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.trace-sim__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.trace-sim__field-label {
  font-size: 0.8125rem;
  color: var(--sim-text-muted);
}

.trace-sim__field-input {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--sim-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--sim-panel);
  color: var(--sim-text);
}

.trace-sim__field-input:focus { outline: 2px solid var(--sim-accent); outline-offset: 1px; }

.trace-sim__field-input--textarea { resize: vertical; }

/* TRACE letter badges — circular purple pills. */
.trace-sim__letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sim-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* =========================================================================
 * Scorecard — end-of-shift debrief.
 *
 * Structure: hero (serif headline) → overall card (big numeric score with
 * badge) → rubric grid (5 TRACE letter cards, staggered entrance) → optional
 * decision log → primary/secondary CTAs.
 *
 * Feels like the payoff screen of a prestige analysis app — not a test
 * result page. Editorial typography, generous whitespace, tier-aware tone.
 * ========================================================================= */
.trace-sim__scorecard {
  max-width: 860px;
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem;
}

/* Hero ──────────────────────────────────────────────────────────────────── */
.trace-sim__scorecard-hero {
  text-align: center;
  padding: 1.5rem 0 2rem;
  animation: trace-sim-fade-up 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.trace-sim__scorecard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.375rem 0.9rem;
  background: var(--sim-accent-soft);
  color: var(--sim-accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.trace-sim__scorecard-eyebrow i { font-size: 0.75rem; }

.trace-sim__scorecard-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--sim-text);
  margin: 0 0 1rem;
}

.trace-sim__scorecard-lead {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sim-text-muted);
}

/* Overall score card ─────────────────────────────────────────────────────── */
.trace-sim__scorecard-overall {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2.25rem;
  margin-bottom: 2.5rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-lg);
  box-shadow: var(--sim-shadow-md);
  position: relative;
  overflow: hidden;
  animation: trace-sim-fade-up 500ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Tier-colored top stripe — strong=purple, solid=amber, rough=muted. */
.trace-sim__scorecard-overall::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--sim-accent);
}
.trace-sim__scorecard-overall[data-tier="solid"]::before { background: #f59e0b; }
.trace-sim__scorecard-overall[data-tier="rough"]::before { background: #b8a888; }

.trace-sim__overall-pct-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--sim-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trace-sim__overall-pct {
  font-size: 5rem;
  letter-spacing: -0.04em;
}

.trace-sim__overall-pct-sign {
  font-size: 2.25rem;
  color: var(--sim-text-muted);
  font-weight: 500;
}

.trace-sim__overall-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.trace-sim__overall-meta-label {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sim-text);
  letter-spacing: -0.005em;
}

.trace-sim__overall-meta-detail {
  font-size: 0.875rem;
  color: var(--sim-text-muted);
}

.trace-sim__earned-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(145deg, #faf5ff, #f1e7ff);
  border: 1px solid var(--sim-accent);
  border-radius: var(--sim-radius-md);
  color: var(--sim-accent-dark);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.2);
  animation: trace-sim-badge-pop 700ms 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.trace-sim__earned-badge i {
  font-size: 1.75rem;
  color: var(--sim-accent);
}

.trace-sim__earned-badge span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes trace-sim-badge-pop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Section heading between overall and rubric ─────────────────────────────── */
.trace-sim__scorecard-section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--sim-text);
  margin: 0 0 1.25rem;
  text-align: center;
  animation: trace-sim-fade-up 450ms 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Rubric — 5 staggered TRACE cards ───────────────────────────────────────── */
.trace-sim__rubric {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.875rem;
  margin-bottom: 2.5rem;
}

.trace-sim__rubric-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem 1rem 1.25rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-md);
  box-shadow: var(--sim-shadow-sm);
  position: relative;
  overflow: hidden;
  animation: trace-sim-fade-up 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(220ms + var(--stagger, 0) * 70ms);
}

.trace-sim__rubric-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sim-border);
}
.trace-sim__rubric-card[data-tier="perfect"]::before  { background: #16a34a; }
.trace-sim__rubric-card[data-tier="good"]::before     { background: #f59e0b; }
.trace-sim__rubric-card[data-tier="weak"]::before     { background: #dc2626; }
.trace-sim__rubric-card[data-tier="untested"]         { opacity: 0.72; }

.trace-sim__rubric-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trace-sim__rubric-name-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trace-sim__rubric-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--sim-text);
}

.trace-sim__rubric-status {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
  color: var(--sim-text-muted);
}

.trace-sim__rubric-card[data-tier="perfect"] .trace-sim__rubric-status { color: #16a34a; }
.trace-sim__rubric-card[data-tier="good"]    .trace-sim__rubric-status { color: #b45309; }
.trace-sim__rubric-card[data-tier="weak"]    .trace-sim__rubric-status { color: #b91c1c; }

.trace-sim__rubric-score-line {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.trace-sim__rubric-score-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--sim-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.trace-sim__rubric-score-suffix {
  font-size: 0.75rem;
  color: var(--sim-text-muted);
}

.trace-sim__rubric-bar {
  height: 4px;
  background: var(--sim-row-hover);
  border-radius: 999px;
  overflow: hidden;
}

.trace-sim__rubric-bar-fill {
  height: 100%;
  background: var(--sim-accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.trace-sim__rubric-card[data-tier="perfect"] .trace-sim__rubric-bar-fill { background: #16a34a; }
.trace-sim__rubric-card[data-tier="good"]    .trace-sim__rubric-bar-fill { background: #f59e0b; }
.trace-sim__rubric-card[data-tier="weak"]    .trace-sim__rubric-bar-fill { background: #dc2626; }

.trace-sim__rubric-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sim-accent-dark);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.trace-sim__rubric-link:hover {
  color: var(--sim-accent);
}
.trace-sim__rubric-link:hover i { transform: translateX(2px); }

.trace-sim__rubric-link i {
  font-size: 0.6875rem;
  transition: transform 0.15s ease;
}

/* Stack rubric on narrow screens so each card has room to breathe */
@media (max-width: 860px) {
  .trace-sim__rubric { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .trace-sim__rubric { grid-template-columns: 1fr; }
}

/* Scorecard CTAs ─────────────────────────────────────────────────────────── */
.trace-sim__scorecard-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
  animation: trace-sim-fade-up 450ms 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.trace-sim__scorecard-ctas .trace-sim__btn {
  padding: 0.8rem 1.75rem;
  font-size: 0.9375rem;
}

/* Decision log ───────────────────────────────────────────────────────────── */
.trace-sim__decision-log {
  margin: 0 auto 2rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-md);
  box-shadow: var(--sim-shadow-sm);
  overflow: hidden;
  animation: trace-sim-fade-up 450ms 540ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.trace-sim__decision-log summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--sim-text);
  transition: background-color 0.15s ease;
}

.trace-sim__decision-log summary::-webkit-details-marker { display: none; }
.trace-sim__decision-log summary:hover { background: var(--sim-row-hover); }

.trace-sim__decision-log-label { font-size: 0.9375rem; flex: 1; }
.trace-sim__decision-log-count {
  font-size: 0.75rem;
  color: var(--sim-text-muted);
  font-family: var(--sim-mono);
}

.trace-sim__decision-log-chev {
  font-size: 0.75rem;
  color: var(--sim-text-muted);
  transition: transform 0.2s ease;
}

.trace-sim__decision-log[open] .trace-sim__decision-log-chev { transform: rotate(180deg); }

.trace-sim__decision-list {
  list-style: none;
  padding: 0.25rem 1.25rem 1rem;
  margin: 0;
  border-top: 1px solid var(--sim-border);
}

.trace-sim__decision-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 0.8125rem;
  color: var(--sim-text);
  border-bottom: 1px dashed var(--sim-border);
}
.trace-sim__decision-item:last-child { border-bottom: 0; }

.trace-sim__decision-item--right .trace-sim__decision-mark { color: #16a34a; font-weight: 700; }
.trace-sim__decision-item--wrong .trace-sim__decision-mark { color: #dc2626; font-weight: 700; }

.trace-sim__decision-mark {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.trace-sim__decision-meta {
  color: var(--sim-text-muted);
  font-family: var(--sim-mono);
  font-size: 0.75rem;
}

@keyframes trace-sim-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge pill on briefing */
.trace-sim__badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: var(--color-forensic);
  color: #fff;
  border-radius: 999px;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.trace-sim__badge-pill i { color: #fef3c7; }

/* Briefing polish: eyebrow, TRACE preview row */
.trace-sim__briefing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
  background: var(--sim-accent-soft);
  color: var(--sim-accent-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
}

.trace-sim__briefing-eyebrow i { font-size: 0.8125rem; }

.trace-sim__briefing-preview {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.875rem;
  margin: 1.5rem 0;
  padding: 1.5rem 1rem;
  background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
  border: 1px solid var(--sim-accent-soft);
  border-radius: var(--sim-radius-lg);
  box-shadow: var(--sim-shadow-sm);
}

.trace-sim__briefing-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.trace-sim__briefing-preview-name {
  font-size: 0.75rem;
  color: var(--sim-text-muted);
  line-height: 1.3;
}

/* Letter badge size variants */
.trace-sim__letter-badge--lg {
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

.trace-sim__letter-badge--sm {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3);
}

/* Action prompt header: TRACE-letter badge beside a small eyebrow label */
.trace-sim__action-header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.trace-sim__action-letter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  background: var(--sim-accent-soft);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sim-accent-dark);
}

.trace-sim__action-letter-name { letter-spacing: 0; }

/* Action option prefix — circular pill at the start of each option row */
.trace-sim__action-option-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0.75rem 0 0.75rem 0.875rem;
  background: var(--sim-panel-alt);
  color: var(--sim-text-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--sim-border);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.trace-sim__action-option:hover:not(:disabled) .trace-sim__action-option-prefix {
  background: var(--sim-accent);
  color: #fff;
  border-color: var(--sim-accent);
}

.trace-sim__action-option-label {
  flex: 1;
  padding: 0.875rem 1rem 0.875rem 0.875rem;
  line-height: 1.4;
}

.trace-sim__action-option--correct .trace-sim__action-option-prefix {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.trace-sim__action-option--wrong .trace-sim__action-option-prefix {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Viewer: "to me" line */
.trace-sim__msg-sender-to {
  font-size: 0.75rem;
  color: var(--sim-text-muted);
  margin-top: 0.1rem;
  font-family: var(--sim-mono);
}

.trace-sim__msg-sender-to-label { font-weight: 500; }

/* Hover-reveal table: let long punycode wrap without crushing the arrow column */
.trace-sim__link-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
}

.trace-sim__link-appears,
.trace-sim__link-real { min-width: 0; word-break: break-all; }

/* Briefing: small-screen fallback */
@media (max-width: 640px) {
  .trace-sim__briefing-preview {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
    padding: 0.875rem 0.25rem;
  }
  .trace-sim__letter-badge--lg { width: 34px; height: 34px; font-size: 0.9375rem; }
  .trace-sim__briefing-preview-name { font-size: 0.625rem; }
}

/* =========================================================================
 * Investigation mode — decoder workspace takes over the ENTIRE screen.
 * Sidebar + inbox list + email viewer all fold away; the email is accessible
 * on demand via a modal triggered by the "View email" button in the workspace.
 *
 * Specificity note: the sidebar-collapsed + list-collapsed combo selector
 * has specificity (0,2,0), so the investigation rule must match that level
 * to override `grid-template-columns` — hence the doubled class selector.
 * ========================================================================= */
.trace-sim__layout.trace-sim__layout--investigation {
  grid-template-columns: 1fr;
}

.trace-sim__layout--investigation .trace-sim__sidebar,
.trace-sim__layout--investigation .trace-sim__list-pane,
.trace-sim__layout--investigation .trace-sim__viewer {
  display: none;
}

/* Investigation mode collapses the side-by-side split — the action panel
 * (decoder workspace) takes the entire right column since the email is
 * available on-demand via the View Email modal, not a cramped strip. */
.trace-sim__layout--investigation .trace-sim__right {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  position: relative;
}

.trace-sim__layout--investigation .trace-sim__action-panel {
  grid-column: 1 / -1;
}

/* =========================================================================
 * Email modal — shown on demand when the learner clicks "View email" in the
 * investigation workspace. Reuses the persistent viewer DOM by toggling a
 * class that repositions it as a floating dialog over a dimmed overlay.
 * ========================================================================= */
.trace-sim__viewer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1400;
  animation: trace-sim-fade-in 140ms ease;
}

@keyframes trace-sim-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Centered modal — true center of viewport so the top doesn't collide with
 * the site header / sim top bar. Width ~900px with 5vw breathing room on
 * narrow screens; height capped at 85vh so attachments never force scroll. */
.trace-sim__layout--investigation .trace-sim__viewer.trace-sim__viewer--modal {
  display: block;
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  max-height: 85vh;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border-strong);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  z-index: 1500;
  overflow-y: auto;
  padding: 2rem 2.5rem;
}

.trace-sim__viewer-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  color: var(--sim-text-muted);
  font-size: 0.9375rem;
  cursor: pointer;
  border-radius: 2px;
  z-index: 1;
}

.trace-sim__viewer-modal-close:hover {
  background: var(--sim-row-hover);
  color: var(--sim-text);
  border-color: var(--sim-border-strong);
}

/* Hide the non-functional "..." message menu in investigation mode — the
 * mailbox actions (Show Original, Forward, Archive, Delete) aren't wired up
 * for the sim and clicking them does nothing, which is worse than absent. */
.trace-sim__layout--investigation .trace-sim__msg-menu {
  display: none;
}

/* =========================================================================
 * Investigation workspace top row — prompt on the left, "View email" on right.
 * ========================================================================= */
.trace-sim__investigation-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.trace-sim__investigation-top .trace-sim__action-header {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.trace-sim__view-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  color: var(--sim-accent-dark);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  border-radius: var(--sim-radius-md);
  flex-shrink: 0;
  box-shadow: var(--sim-shadow-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.trace-sim__view-email-btn:hover {
  background: var(--sim-accent-soft);
  border-color: var(--sim-accent);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
}

.trace-sim__view-email-btn i { font-size: 0.875rem; }

/* =========================================================================
 * Question scroll-button — a soft pill that jumps the action panel down
 * to the follow-up MC. Loud enough to notice, quiet enough to fit the site.
 * ========================================================================= */
.trace-sim__question-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 1.25rem auto 0.25rem;
  padding: 0.875rem 1.75rem;
  background: var(--sim-accent);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.trace-sim__question-divider:hover {
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}

.trace-sim__question-divider:active { transform: translateY(0); }

.trace-sim__question-divider-label {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.trace-sim__question-divider-arrow {
  color: #fff;
  font-size: 0.875rem;
  animation: trace-sim-bounce 1.4s ease-in-out infinite;
}

@keyframes trace-sim-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.trace-sim__layout--investigation .trace-sim__viewer {
  padding: 0.875rem 1.5rem;
  overflow-y: auto;
  background: var(--sim-panel);
  border-bottom: 1px solid var(--sim-border-strong);
}

/* Action panel becomes the workbench — no max-height cap, scrolls if tall. */
.trace-sim__layout--investigation .trace-sim__action-panel {
  max-height: none;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

.trace-sim__investigation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trace-sim__investigation-label {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--sim-text);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--sim-border);
}

/* Embedded decoder: single column — raw headers on top, decoded forensic view
 * below. A two-column layout wasted horizontal space and stretched the decoded
 * view vertically to match the short textarea; stacking makes each section
 * occupy only the space its content needs. */
.header-decoder--embedded {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-md);
  box-shadow: var(--sim-shadow-sm);
}

.header-decoder__input-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header-decoder__output-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sim-panel-alt);
  padding: 1rem 1.125rem;
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-sm);
}

/* Override the standalone decoder's textarea sizing inside the sim — much
 * taller, full-width monospace block. This is the main UX complaint fix. */
.header-decoder--embedded .header-decoder__textarea {
  min-height: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  background: #fdfcf7;
  border-color: var(--sim-border);
  border-radius: var(--sim-radius-sm);
  resize: none;           /* auto-size via JS — manual resize would fight it */
  overflow: hidden;       /* no internal scrollbar; textarea grows to content */
}

.header-decoder--embedded .header-decoder__textarea:focus {
  border-color: var(--sim-accent);
  background: #fff;
}

/* Always show the decoded output in the sim workspace (it's the whole point
 * of the right column). The standalone decoder hides it until first decode;
 * we auto-click decode on mount so by the time a learner looks here it's filled. */
.header-decoder--embedded .header-decoder__output {
  display: block;
  margin-top: 0;
}

.header-decoder--embedded .header-decoder__card {
  border-radius: var(--sim-radius-sm);
  border-color: var(--sim-border);
  background: var(--sim-panel);
  margin-bottom: 0.75rem;
}

.header-decoder--embedded .header-decoder__card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--sim-text);
  margin-bottom: 0.75rem;
}

.header-decoder--embedded .header-decoder__flags,
.header-decoder--embedded .header-decoder__reminder {
  border-radius: var(--sim-radius-sm);
}

.trace-sim__investigation-followup {
  margin-top: 0.25rem;
}


/* =========================================================================
 * Resolved-message notice — read-only action panel shown when the learner
 * clicks a past message in the inbox. Previously those clicks could re-run
 * nodes and skip the current message; now they open read-only.
 * ========================================================================= */
.trace-sim__resolved-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem 1.375rem;
  background: var(--sim-panel);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius-md);
  box-shadow: var(--sim-shadow-sm);
}

.trace-sim__resolved-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--sim-text);
}

.trace-sim__resolved-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sim-text-muted);
  max-width: 60ch;
}

.trace-sim__resolved-badges {
  display: flex;
  gap: 0.4rem;
}