@import url("../brand/tokens.css");

/* Local presentation only; the simulation uses the platform tokens (B2). */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; }
body {
  color: var(--ink);
  background: var(--bg-page-soft);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { line-height: 1.3; font-weight: 650; }
h1, h2, h3, p, li, button { overflow-wrap: break-word; }
p { color: var(--ink-2); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--brand-press); outline-offset: 4px; }
h1:focus, #app:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 20px; padding: 10px 18px; transform: translateY(-160%); border-radius: var(--r-pill); color: #fff; background: var(--ink); text-decoration: none; }
.skip-link:focus { transform: none; }

.simulation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 16px;
  padding: 22px clamp(22px, 4vw, 56px);
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-card-lg);
}
.simulation-brand { display: flex; align-items: center; gap: 14px; }
.simulation-brand img { display: block; width: 104px; height: auto; }
.simulation-brand span { padding-left: 14px; border-left: 1px solid var(--card-line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.simulation-meta { display: grid; gap: 4px; text-align: right; font-size: 12px; }
.simulation-meta strong { font-weight: 650; }
.simulation-meta span { color: var(--muted); }
#app { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 60px; }
#app[data-phase="brief"] { padding-top: clamp(36px, 5vw, 60px); }
.eyebrow, .brief-layout h2 { color: var(--brand-press); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

/* Briefing mirrors the participant entry used by The Valid Login. */
.brief-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.brief-copy h1 { margin-top: 8px; font-size: clamp(36px, 4.3vw, 54px); line-height: 1.04; letter-spacing: -.035em; }
.lede { margin-top: 22px; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; }
.brief-value { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-card); }
.brief-value p { margin-top: 8px; font-size: 15px; }
.brief-copy .actions { margin-top: 28px; }
.brief-task { margin-top: 28px; padding: 24px; border-left: 4px solid var(--brand); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--brand-soft); }
.brief-task p { margin-top: 10px; color: var(--ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.4; font-weight: 550; letter-spacing: -.02em; }
.brief-aside { padding: 28px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card-lg); }
.brief-aside ul { display: grid; gap: 14px; margin-top: 20px; padding: 0; list-style: none; }
.brief-aside li { position: relative; padding-left: 22px; color: var(--ink-2); }
.brief-aside li::before { content: ""; position: absolute; top: .62em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.brief-boundaries { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--card-line); }
.brief-boundaries h3 { font-size: 16px; }
.brief-boundaries p { margin-top: 8px; }
.fine-print { margin-top: 24px; padding: 14px; border-radius: var(--r-md); background: var(--card-soft); color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Neutral choices: accent denotes interaction, never a preferred decision. */
button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-2);
  background: var(--card);
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
button:hover { color: var(--ink); border-color: var(--brand-line); background: var(--bg-page-soft); box-shadow: 0 0 0 3px rgb(139 92 246 / 8%); }
button:active { background: var(--brand-soft); }
button[aria-pressed="true"] { border-color: var(--brand-press); color: var(--brand-press); background: var(--brand-soft); box-shadow: inset 3px 0 var(--brand-press); }
button[data-act="start"], button[data-repeat] { width: auto; padding: 14px 24px; border-color: var(--brand-press); border-radius: var(--r-pill); color: #fff; background: var(--brand-press); font-weight: 650; box-shadow: var(--shadow-card); }
button[data-act="start"]::after { content: " →"; margin-left: 12px; }
button[data-act="start"]:hover, button[data-repeat]:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* The live desk keeps case context separate from available actions. */
.stage-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 12px; list-style: none; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card); }
.stage-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--r-md); color: var(--muted); font-size: 13px; font-weight: 650; line-height: 1.4; }
.stage-list small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.stage-number { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid var(--card-line); border-radius: 50%; background: var(--card-soft); font-size: 12px; }
.stage-list [aria-current="step"] { border-color: var(--brand-line); color: var(--ink); box-shadow: 0 0 0 4px rgb(139 92 246 / 9%); }
.stage-list [aria-current="step"] .stage-number { border-color: var(--ink); color: #fff; background: var(--ink); }
.stage-list .complete .stage-number { border-color: var(--brand-line); color: var(--brand-press); background: var(--brand-soft); }
.workspace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 24px; align-items: start; }
.desk-summary { padding: 28px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card-lg); }
.desk-summary h1 { margin-top: 10px; font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -.03em; }
.desk-summary p:not(.eyebrow) { margin-top: 16px; }
.desk-summary h2 { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--card-line); font-size: 16px; }
.desk-summary h2 + p { margin-top: 8px; }
.desk-summary .clock { display: inline-block; padding: 6px 12px; border: 1px solid var(--brand-line); border-radius: var(--r-pill); color: var(--brand-press); background: var(--brand-soft); font: 12px/1.5 var(--mono); }
.workspace > .actions { display: grid; gap: 20px; }
.group { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card); }
.group h3 { margin-bottom: 6px; color: var(--ink); font-size: 17px; letter-spacing: -.015em; }
.group button { font-size: 14px; }
.group[data-group="call"], .group[data-group="adapt"] { border-color: var(--brand-line); background: var(--control-well); }
.group[data-group="tool"] button { border-left: 3px solid var(--brand-line); }
.notice { margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--warn-line); border-radius: var(--r-md); color: var(--warn); background: var(--warn-bg); }

/* Debrief remains descriptive rather than looking like a scorecard. */
.workspace-closed { display: block; max-width: 900px; margin: 0 auto; }
.workspace-closed .desk-summary { padding: clamp(24px, 4vw, 48px); }
.debrief, .profile { margin-top: 28px; padding: 4px 24px 24px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.debrief { border-color: var(--brand-line); }
.debrief h2:first-child, .profile h2:first-child { border-top: 0; padding-top: 0; }
.profile p { font-size: 14px; overflow-wrap: anywhere; }
.practice-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.practice-actions button { flex: 1 1 240px; width: auto; border-radius: var(--r-pill); text-align: center; }

@media (max-width: 900px) {
  .brief-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 28px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .simulation-meta { max-width: 260px; }
}
@media (max-width: 720px) {
  .simulation-header { margin: 12px; padding: 18px 16px; gap: 16px; align-items: flex-start; }
  .simulation-brand { flex-wrap: wrap; gap: 10px; }
  .simulation-brand img { width: 92px; }
  .simulation-brand span { font-size: 9px; }
  .simulation-meta { max-width: 180px; font-size: 11px; }
  #app { width: calc(100% - 28px); padding: 24px 0 40px; }
  #app[data-phase="brief"] { padding-top: 28px; }
  .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .brief-copy h1 { font-size: clamp(32px, 7vw, 44px); }
  .brief-aside { padding: 24px; }
  .stage-list { gap: 8px; padding: 10px; }
  .stage-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 8px; font-size: 11px; }
  .stage-number { flex-basis: auto; width: 28px; height: 28px; }
  .stage-list small { font-size: 10px; }
  .desk-summary, .group { padding: 22px; }
  .debrief, .profile { padding-inline: 16px; }
}
@media (max-width: 390px) {
  .simulation-header { flex-direction: column; gap: 12px; }
  .simulation-meta { max-width: none; text-align: left; }
  .brief-copy h1 { font-size: 32px; }
  .brief-value, .brief-task, .brief-aside, .desk-summary, .group { padding: 18px; }
  button[data-act="start"] { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}