/* ==========================================================================
   AIME Trust — training component styles
   Tokens copied from aime-crm/frontend/static/css/base.css (CONTRACT.md §0,
   "UI: CRM look"). Loaded alongside base.css by the training-player page
   (owned by another workstream); the :root fallback below keeps every
   training/*.js component renderable stand-alone (Playwright, previews).
   No inline style attributes are used anywhere in the JS — every visual
   state here is a class toggle or an SVG/`<progress>` attribute.
   ========================================================================== */

:root {
  --t-teal: #00d4b8;
  --t-teal-dark: #00a896;
  --t-gold: #f5a623;
  --t-surface-base: #faf9f7;
  --t-surface-raised: #ffffff;
  --t-surface-overlay: #f5f3ef;
  --t-surface-inset: #ede9e3;
  --t-border: #e2ddd6;
  --t-border-strong: #cdc7be;
  --t-text: #1a1714;
  --t-text-secondary: #4a453f;
  --t-text-tertiary: #7a746d;
  --t-success: #1a7a5e;
  --t-success-bg: #e8f5f0;
  --t-success-border: #a8d5c4;
  --t-warning: #a0620a;
  --t-warning-bg: #fef3e2;
  --t-warning-border: #f5d5a0;
  --t-danger: #b83232;
  --t-danger-bg: #fceaea;
  --t-danger-border: #e8a8a8;
  --t-info: #2660a4;
  --t-info-bg: #e8f0fc;
  --t-neutral: #5a5550;
  --t-neutral-bg: #f0ede8;
  --t-radius-sm: 4px;
  --t-radius-md: 8px;
  --t-radius-lg: 12px;
  --t-radius-xl: 16px;
  --t-space-2: 8px;
  --t-space-3: 12px;
  --t-space-4: 16px;
  --t-space-6: 24px;
  --t-shadow-sm: 0 1px 3px rgba(26, 23, 20, 0.08), 0 1px 2px rgba(26, 23, 20, 0.04);
  --t-shadow-md: 0 4px 8px rgba(26, 23, 20, 0.08), 0 2px 4px rgba(26, 23, 20, 0.04);
  --t-focus: 0 0 0 3px rgba(0, 212, 184, 0.35);
  --t-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --t-font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* Prefer the host page's real tokens where present, without re-declaring. */
.trn-root, [class^="trn-"], [class*=" trn-"] {
  font-family: var(--font-body, var(--t-font));
}

.trn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.d-none { display: none !important; }

/* ── Generic step shells ─────────────────────────────────────────────── */
.trn-cards, .trn-inbox, .trn-spot, .trn-ai-review, .trn-classify, .trn-incident, .trn-access {
  display: flex;
  flex-direction: column;
  gap: var(--t-space-4);
  color: var(--text-primary, var(--t-text));
}

.trn-instruction {
  font-size: 15px;
  color: var(--text-secondary, var(--t-text-secondary));
  margin: 0;
}

.trn-progress-text {
  font-size: 13px;
  color: var(--color-neutral, var(--t-neutral));
  font-weight: 600;
}

.trn-cards-header {
  display: flex;
  align-items: center;
  gap: var(--t-space-3);
}

/* ── Progress ring ────────────────────────────────────────────────────── */
.trn-ring-track {
  fill: none;
  stroke: var(--surface-inset, var(--t-surface-inset));
}
.trn-ring-fill {
  fill: none;
  stroke: var(--aime-teal, var(--t-teal));
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset var(--transition-slow, 300ms ease);
}
@media (prefers-reduced-motion: reduce) {
  .trn-ring-fill { transition: none; }
}

/* ── Motivation bar ───────────────────────────────────────────────────── */
.trn-motivation {
  display: flex;
  align-items: center;
  gap: var(--t-space-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral, var(--t-neutral));
}
.trn-streak { display: inline-flex; align-items: center; gap: 4px; }
.trn-streak-flame { color: var(--aime-gold, var(--t-gold)); }
.trn-badge {
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  background: var(--aime-gold-light, var(--t-warning-bg));
  color: var(--text-gold, var(--t-warning));
  font-size: 12px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.trn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-md, var(--t-radius-md));
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface-raised, var(--t-surface-raised));
  color: var(--text-primary, var(--t-text));
  border-color: var(--surface-border, var(--t-border));
  transition: transform var(--transition-fast, 100ms ease), box-shadow var(--transition-fast, 100ms ease), background var(--transition-fast, 100ms ease);
}
.trn-btn:hover:not(:disabled) { box-shadow: var(--shadow-sm, var(--t-shadow-sm)); }
.trn-btn:active:not(:disabled) { transform: translateY(1px); }
.trn-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.trn-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, var(--t-focus));
}
@media (prefers-reduced-motion: reduce) {
  .trn-btn { transition: none; }
  .trn-btn:active:not(:disabled) { transform: none; }
}

.trn-btn-primary {
  /* aime-teal (#00d4b8) is too light for white text to clear WCAG AA
     (1.89:1) — aime-teal-dark with dark text clears 5.98:1 while staying
     visibly on-brand. */
  background: var(--aime-teal-dark, var(--t-teal-dark));
  border-color: var(--aime-teal-dark, var(--t-teal-dark));
  color: var(--text-primary, var(--t-text));
}
.trn-btn-ghost { background: transparent; }
.trn-btn-outline { background: transparent; border-color: var(--surface-border-strong, var(--t-border-strong)); }
.trn-btn-danger {
  background: var(--color-danger-bg, var(--t-danger-bg));
  border-color: var(--color-danger-border, var(--t-danger-border));
  color: var(--color-danger, var(--t-danger));
}

.trn-choice { min-width: 96px; }
.trn-choice[aria-pressed="true"], .trn-choice-true[aria-pressed="true"] {
  background: var(--color-success-bg, var(--t-success-bg));
  border-color: var(--color-success-border, var(--t-success-border));
  color: var(--color-success, var(--t-success));
}
.trn-choice-false[aria-pressed="true"] {
  background: var(--color-danger-bg, var(--t-danger-bg));
  border-color: var(--color-danger-border, var(--t-danger-border));
  color: var(--color-danger, var(--t-danger));
}

.trn-card-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--t-space-2);
  justify-content: flex-end;
}

/* ── Feedback ─────────────────────────────────────────────────────────── */
.trn-feedback {
  margin: 0;
  padding: var(--t-space-3);
  border-radius: var(--radius-md, var(--t-radius-md));
  font-size: 13.5px;
  line-height: 1.5;
}
.trn-feedback-ok { background: var(--color-success-bg, var(--t-success-bg)); color: var(--color-success, var(--t-success)); border: 1px solid var(--color-success-border, var(--t-success-border)); }
.trn-feedback-no { background: var(--color-danger-bg, var(--t-danger-bg)); color: var(--color-danger, var(--t-danger)); border: 1px solid var(--color-danger-border, var(--t-danger-border)); }
.trn-feedback-neutral { background: var(--color-info-bg, var(--t-info-bg)); color: var(--color-info, var(--t-info)); border: 1px solid var(--color-info-border, var(--t-border)); }
.trn-feedback:empty { display: none; }

/* ── Celebrate burst ──────────────────────────────────────────────────── */
.trn-celebrate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 212, 184, 0.45);
  animation: trn-pulse 700ms ease-out;
}
@keyframes trn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 212, 184, 0.45); }
  100% { box-shadow: 0 0 0 18px rgba(0, 212, 184, 0); }
}

/* ── cards.js ─────────────────────────────────────────────────────────── */
.trn-card-stage { position: relative; min-height: 160px; }
.trn-card-face {
  background: var(--surface-raised, var(--t-surface-raised));
  border: 1px solid var(--surface-border, var(--t-border));
  border-radius: var(--radius-xl, var(--t-radius-xl));
  padding: var(--t-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--t-space-3);
  box-shadow: var(--shadow-sm, var(--t-shadow-sm));
}
.trn-card-face:focus-visible { outline: none; box-shadow: var(--shadow-focus, var(--t-focus)); }
.trn-card-content { font-size: 17px; line-height: 1.5; margin: 0; }
.trn-card-statement { font-size: 17px; font-weight: 600; margin: 0; }
.trn-card-choices { display: flex; gap: var(--t-space-2); }
.trn-flip-btn { align-self: flex-start; }

/* ── phishing_inbox.js ────────────────────────────────────────────────── */
.trn-inbox-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--surface-border, var(--t-border)); border-radius: var(--radius-lg, var(--t-radius-lg)); overflow: hidden; }
.trn-inbox-item { background: var(--surface-raised, var(--t-surface-raised)); }
.trn-inbox-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--t-space-3);
  padding: var(--t-space-3) var(--t-space-4);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-height: 56px;
  font-family: inherit;
}
.trn-inbox-row:hover { background: var(--surface-overlay, var(--t-surface-overlay)); }
.trn-inbox-row:focus-visible { outline: none; box-shadow: inset var(--shadow-focus, var(--t-focus)); }
.trn-inbox-status { font-size: 16px; width: 20px; text-align: center; flex: none; }
.trn-inbox-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trn-inbox-from { font-weight: 700; font-size: 13.5px; }
.trn-inbox-subject { font-size: 13.5px; }
.trn-inbox-preview { font-size: 12.5px; color: var(--color-neutral, var(--t-neutral)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-inbox-panel { padding: var(--t-space-4); border-top: 1px solid var(--surface-border, var(--t-border)); background: var(--surface-overlay, var(--t-surface-overlay)); display: flex; flex-direction: column; gap: var(--t-space-3); }
.trn-inbox-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; margin: 0; }
.trn-inbox-actions { display: flex; flex-wrap: wrap; gap: var(--t-space-2); }

/* ── spot_secret.js / ai_review.js (shared line-list pattern) ───────── */
.trn-spot-lines, .trn-pr-lines {
  border: 1px solid var(--surface-border-strong, var(--t-border-strong));
  border-radius: var(--radius-md, var(--t-radius-md));
  overflow: hidden;
  background: #1a1714;
}
.trn-spot-line, .trn-pr-line {
  display: block;
  padding: 8px var(--t-space-3);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.trn-spot-line:last-child, .trn-pr-line:last-child { border-bottom: none; }
.trn-spot-line-text, .trn-pr-line-text {
  font-family: var(--font-mono, var(--t-font-mono));
  font-size: 12.5px;
  color: #f2efe9;
  white-space: pre-wrap;
  word-break: break-word;
}
.trn-spot-line:hover, .trn-pr-line:hover { background: rgba(255, 255, 255, 0.06); }
.trn-spot-line:focus-visible, .trn-pr-line:focus-visible { outline: none; box-shadow: inset var(--shadow-focus, var(--t-focus)); }
.trn-spot-line.is-flagged, .trn-pr-line.is-flagged { background: rgba(245, 166, 35, 0.22); }
.trn-pr-line-command .trn-pr-line-text::before { content: "$ "; color: var(--aime-gold, var(--t-gold)); }
.trn-pr-context { padding: var(--t-space-3) var(--t-space-4); background: var(--surface-overlay, var(--t-surface-overlay)); border-radius: var(--radius-md, var(--t-radius-md)); }
.trn-pr-context h4 { margin: 0 0 4px; }
.trn-pr-context p { margin: 0; font-size: 13.5px; }

.trn-spot-action legend, .trn-ai-followup legend {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: var(--t-space-2);
}
.trn-radio-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-height: 32px; }
.trn-radio-row input[type="radio"], .trn-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--aime-teal, var(--t-teal)); }
.trn-checkbox-row { display: flex; align-items: center; gap: 8px; min-height: 32px; }

/* ── classify.js ──────────────────────────────────────────────────────── */
.trn-drop-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--t-space-2); }
.trn-drop-zone {
  border: 2px dashed var(--surface-border-strong, var(--t-border-strong));
  border-radius: var(--radius-md, var(--t-radius-md));
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-neutral, var(--t-neutral));
}
.trn-drop-zone[data-level="public"] { color: var(--color-neutral, var(--t-neutral)); }
.trn-drop-zone[data-level="internal"] { color: var(--color-info, var(--t-info)); }
.trn-drop-zone[data-level="confidential"] { color: var(--color-warning, var(--t-warning)); }
.trn-drop-zone[data-level="secret"] { color: var(--color-danger, var(--t-danger)); }
.trn-drop-zone.is-dragover { background: var(--surface-overlay, var(--t-surface-overlay)); border-style: solid; }

.trn-classify-list { display: flex; flex-direction: column; gap: var(--t-space-4); }
.trn-classify-card {
  position: relative;
  border: 1px solid var(--surface-border, var(--t-border));
  border-radius: var(--radius-lg, var(--t-radius-lg));
  padding: var(--t-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--t-space-3);
  background: var(--surface-raised, var(--t-surface-raised));
}
.trn-classify-card[data-assigned="public"] { border-left: 4px solid var(--color-neutral, var(--t-neutral)); }
.trn-classify-card[data-assigned="internal"] { border-left: 4px solid var(--color-info, var(--t-info)); }
.trn-classify-card[data-assigned="confidential"] { border-left: 4px solid var(--color-warning, var(--t-warning)); }
.trn-classify-card[data-assigned="secret"] { border-left: 4px solid var(--color-danger, var(--t-danger)); }
.trn-classify-text { margin: 0; font-size: 14.5px; }
.trn-level-row { display: flex; flex-wrap: wrap; gap: var(--t-space-2); }
.trn-level-btn { min-width: 0; flex: 1 1 auto; }

/* ── incident_drill.js ────────────────────────────────────────────────── */
.trn-clock-wrap { display: flex; flex-direction: column; gap: 4px; }
.trn-clock-label { font-size: 12.5px; font-weight: 700; color: var(--color-neutral, var(--t-neutral)); margin: 0; }
.trn-clock { width: 100%; height: 12px; appearance: none; border: none; border-radius: var(--radius-full, 9999px); overflow: hidden; }
.trn-clock::-webkit-progress-bar { background: var(--surface-inset, var(--t-surface-inset)); border-radius: var(--radius-full, 9999px); }
.trn-clock::-webkit-progress-value { background: var(--color-success, var(--t-success)); border-radius: var(--radius-full, 9999px); }
.trn-clock::-moz-progress-bar { background: var(--color-success, var(--t-success)); border-radius: var(--radius-full, 9999px); }
.trn-clock.is-urgent::-webkit-progress-value { background: var(--color-warning, var(--t-warning)); }
.trn-clock.is-urgent::-moz-progress-bar { background: var(--color-warning, var(--t-warning)); }
.trn-clock.is-breach::-webkit-progress-value { background: var(--color-danger, var(--t-danger)); }
.trn-clock.is-breach::-moz-progress-bar { background: var(--color-danger, var(--t-danger)); }

.trn-incident-stage { display: flex; flex-direction: column; gap: var(--t-space-3); }
.trn-incident-narrative { margin: 0; font-size: 14.5px; line-height: 1.6; }
.trn-incident-choices { display: flex; flex-direction: column; gap: var(--t-space-2); }
.trn-outcome { font-weight: 700; padding: var(--t-space-3); border-radius: var(--radius-md, var(--t-radius-md)); }
.trn-outcome-good { background: var(--color-success-bg, var(--t-success-bg)); color: var(--color-success, var(--t-success)); }
.trn-outcome-bad { background: var(--color-warning-bg, var(--t-warning-bg)); color: var(--color-warning, var(--t-warning)); }

/* ── access_decision.js ───────────────────────────────────────────────── */
.trn-access-list { display: flex; flex-direction: column; gap: var(--t-space-3); }
.trn-access-card {
  border: 1px solid var(--surface-border, var(--t-border));
  border-radius: var(--radius-lg, var(--t-radius-lg));
  padding: var(--t-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--t-space-3);
  background: var(--surface-raised, var(--t-surface-raised));
}
.trn-access-card:focus-visible { outline: none; box-shadow: var(--shadow-focus, var(--t-focus)); }
.trn-access-meta p { margin: 0 0 2px; font-size: 13.5px; }
.trn-access-actions { display: flex; gap: var(--t-space-2); }

/* ── Responsive (down to 390px, task's mobile viewport) ─────────────── */
@media (max-width: 480px) {
  .trn-drop-zones { grid-template-columns: repeat(2, 1fr); }
  .trn-card-face { padding: var(--t-space-4); }
  .trn-level-row { flex-direction: column; }
  .trn-level-btn { width: 100%; }
  .trn-inbox-preview { display: none; }
  .trn-btn { min-height: 44px; }
  .trn-cards-header { flex-wrap: wrap; }
}