/* Expense Desk reviewer training: three-step course.
   One visual system: white canvas, one accent, one card style, four type sizes, one primary action per screen. */

:root {
  --text: #18202B;
  --muted: #5B6472;
  --line: #E3E6EB;
  --surface: #F6F7F9;
  --accent: #2350C8;
  --accent-hover: #173A99;
  --accent-weak: #EEF2FC;
  --done: #1A6B34;

  --fs-small: 14px;
  --fs-body: 17px;
  --fs-h2: 22px;
  --fs-h1: 34px;

  --radius: 12px;
  --bar-h: 64px;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #FFFFFF; color: var(--text); }
h1, h2, h3, h4, p, figure, ol, ul { margin: 0; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; text-wrap: balance; }
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: #FFFFFF; border: 2px solid var(--accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Top bar with the stepper ---------- */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h); background: #FFFFFF; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: var(--fs-small); font-weight: 600; min-width: 0; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: flex; align-items: center; gap: 12px; list-style: none; padding: 0; }
.stepper li { display: flex; align-items: center; gap: 12px; }
.stepper li + li::before { content: ""; width: 40px; height: 1px; background: var(--line); }
.stepper a {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border-radius: 8px;
  text-decoration: none; color: var(--muted); font-size: var(--fs-small); white-space: nowrap;
}
.stepper a:hover { color: var(--text); }
.step-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #C4CAD3; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0; background: #FFFFFF;
}
.stepper a[aria-current="step"] { color: var(--text); font-weight: 600; }
.stepper a[aria-current="step"] .step-dot { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.stepper a.is-done .step-dot { border-color: var(--accent); color: var(--accent); }
.bar-end { justify-self: end; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; }
  .brand span, .bar-end { display: none; }
  .stepper { gap: 6px; }
  .stepper li { gap: 6px; }
  .stepper li + li::before { width: 14px; }
  .stepper a:not([aria-current="step"]) .step-label { display: none; }
}

/* ---------- Screens ---------- */
.screen {
  padding-block: 56px 72px;
  padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));
}
.measure { max-width: 720px; margin-inline: auto; }
.wide { max-width: 1040px; margin-inline: auto; }
.screen-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-body); }
.lede { color: var(--muted); max-width: 62ch; }
.small { font-size: var(--fs-small); color: var(--muted); }
p + p { margin-top: 12px; }
@media (max-width: 760px) {
  .screen { padding-block: 32px 56px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  :root { --fs-h1: 28px; --fs-body: 16px; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 10px; border: 0; background: var(--accent); color: #FFFFFF; font-weight: 600; font-size: var(--fs-body);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); color: #FFFFFF; }
.btn.btn-secondary {background:#FFFFFF;border:1px solid #C8D0DB;color:var(--text);}
.btn.btn-secondary:hover {background:var(--surface);border-color:#A5AFBD;color:var(--text);}
.link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--accent); font-weight: 600; font-size: var(--fs-body); text-decoration: none; cursor: pointer;
}
.link:hover { color: var(--accent-hover); text-decoration: underline; }
.link.quiet { color: var(--muted); font-weight: 500; }
.link.quiet:hover { color: var(--text); }

/* Bottom of each screen: back on the left, the one primary action on the right */
.actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
}
.actions > .btn { margin-left: 0; }
.actions > .btn:last-child:not(:first-child) { margin-left: auto; }

/* ---------- One card style ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; overflow: hidden; }

/* ---------- Intro ---------- */
.intro { min-height: calc(100vh - var(--bar-h)); display: flex; align-items: center; }
.intro .measure { width: 100%; }
.intro h1 { font-size: clamp(32px, 5vw, 44px); }
.path { list-style: none; padding: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.path li { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.path .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.path strong { font-weight: 600; }
.path .time { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.path p { grid-column: 2 / -1; color: var(--muted); font-size: var(--fs-small); }
.intro .btn { margin-top: 36px; }
.footnote { margin-top: 24px; font-size: var(--fs-small); color: var(--muted); }

/* ---------- Step 1: video ---------- */
.video { background: #0E1622; }
.video video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0E1622; }
.video-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 12px; }
.chapters { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; padding: 0; }
.chapters button {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: var(--fs-small);
}
.chapters button:hover .c { color: var(--text); text-decoration: underline; }
.chapters .t { font-variant-numeric: tabular-nums; }
.chapters .c { color: var(--text); }
.chapters button[aria-current="true"] .c { color: var(--accent); font-weight: 600; }
.chapters .play { display: none; }
details.transcript { margin-top: 8px; border-top: 1px solid var(--line); }
details.transcript summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; font-size: var(--fs-small); color: var(--muted); }
details.transcript summary:hover { color: var(--text); }
.transcript-body { padding-bottom: 8px; max-width: 68ch; }
.transcript-body h3 { margin-top: 20px; margin-bottom: 4px; font-size: var(--fs-small); color: var(--muted); }
.transcript-body p { font-size: var(--fs-small); }

/* ---------- Step 1: guide ---------- */
/* Guide copy uses one dark text color; weight provides emphasis. */
.guide { --muted: var(--text); color: var(--text); }
.guide section { padding-top: 8px; }
.guide h2 { margin-top: 48px; margin-bottom: 8px; }
.guide section:first-of-type h2 { margin-top: 0; }
.guide h3 { margin-top: 36px; margin-bottom: 4px; font-size: var(--fs-h2); }
.guide > section > p, .guide section > p { color: var(--muted); max-width: 64ch; }
.steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 32px; margin-top: 24px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 16px; }
.steps > li::before {
  content: counter(step); grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--muted);
}
.steps h4 { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.step-body { grid-column: 2; display: flex; flex-direction: column; gap: 12px; }
.step-body p { color: var(--muted); }
.shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.shot img { width: 100%; }
.shot.narrow { max-width: 440px; }
.badge { font-weight: 600; color: var(--text); }
.result-status { font-size: var(--fs-small); }
.questions { margin: 16px 0 20px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; }
.questions li::marker { color: var(--muted); font-weight: 600; }
.questions span { color: var(--muted); }
.continue-row { margin-top: 40px; display: flex; justify-content: center; }
.continue-btn { min-width: 220px; }
[data-chunk] h2, [data-chunk] h3, #summary-title, #sim { scroll-margin-top: calc(var(--bar-h) + 16px); }

/* ---------- Step 1: summary ---------- */
.summary { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.summary h2 { margin-bottom: 8px; }
.flowchart { margin-top: 24px; max-width: 560px; }
.flowchart > a { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.flowchart > a:hover { border-color: #C4CAD3; }
.flowchart figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }

/* ---------- Step 2: embedded simulation ---------- */
.practice-points { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.practice-points li { border-top: 1px solid var(--line); padding-top: 12px; }
.practice-points strong { display: block; font-size: var(--fs-body); }
.practice-points span { color: var(--muted); font-size: var(--fs-small); }
.sim-wrap { margin-top: 40px; }
.sim-frame { width: 100%; height: calc(100vh - var(--bar-h) - 32px); min-height: 640px; border: 1px solid var(--line); border-radius: var(--radius); background: #F5F6F8; }
.sim-done { margin-top: 16px; padding: 16px 20px; border-radius: var(--radius); background: var(--accent-weak); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sim-done p { font-weight: 600; }
.only-small { display: none; }
@media (max-width: 899px) {
  .only-large { display: none !important; }
  .only-small { display: block; }
  .practice-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .practice-points li { padding: 12px 0; }
}

/* ---------- Step 3: take it with you ---------- */
.takeaway { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 48px; align-items: start; }
.takeaway .flowchart { margin-top: 0; }
.policy h2 { font-size: var(--fs-body); margin-bottom: 4px; }
.policy dl { margin: 0; }
.policy dl div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.policy dt { font-weight: 600; font-size: var(--fs-small); }
.policy dd { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 899px) { .takeaway { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Polish: the view switch matches the chapter row; tighter gap before the summary */
.video-meta .link { font-size: var(--fs-small); }
.summary { margin-top: 32px; padding-top: 32px; }

/* Clear format choice, open reference navigation, and a single page scroll. */
.format-switch { display:flex; gap:8px; margin:0 0 20px; }
.format-switch [aria-pressed="true"] { background:var(--accent);color:white;border-color:var(--accent); }
.guide-index { display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 0;border-block:1px solid var(--line);margin-bottom:24px; }
.guide-index a {font-size:var(--fs-small);}
.policy-note {font-size:var(--fs-small);color:var(--muted);margin:0 0 16px;max-width:75ch;}
body[data-step="practice"] .sim-wrap {max-width:1600px;margin-inline:auto;}
.sim-frame {display:block;height:700px;min-height:0;}
.reference-card {border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.reference-card h3 {margin:24px 0 8px;font-size:var(--fs-body);}
.reference-card ol,.reference-card ul {padding-left:22px;}
.reference-card li {margin:10px 0;}
.takeaway {grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr);gap:32px;}
@media(min-width:900px) and (max-width:1000px) {body[data-step="practice"] .screen {padding-inline:0;} .practice-toolbar{padding-inline:12px;} }
@media(max-width:899px) {.takeaway {grid-template-columns:1fr;}}
.sim-frame {scroll-margin-top:calc(var(--bar-h) + 12px);}
.reference-card h2 {font-size:var(--fs-body);margin:24px 0 8px;}
.reference-card h2:first-child {margin-top:0;}
@media(min-width:700px) {.guide-index {position:sticky;top:var(--bar-h);z-index:10;background:white;}}

.format-switch .btn {background:white;color:var(--text);border:1px solid var(--line);}
.format-switch .btn[aria-pressed="true"] {background:var(--accent);color:white;border-color:var(--accent);}
.stepper a[aria-current="step"].is-done .step-dot {color:white;}

/* A short Learn-to-practice transition; instructions live on their own one-time page. */
.practice-bridge {margin-top:32px;padding-top:24px;border-top:1px solid var(--line);max-width:68ch;}
.practice-bridge h2 {margin-bottom:8px;}
.practice-intro .eyebrow {font-size:var(--fs-small);color:var(--muted);margin-bottom:12px;}
.practice-stages {list-style:none;padding:0;margin:28px 0;}
.practice-stages li {display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line);}
.practice-stages h2 {font-size:20px;margin-bottom:6px;}
.practice-stages p {color:var(--muted);}
.stage-number {display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;font-size:var(--fs-small);}
body[data-step="practice"] .sim-wrap {margin-top:0;}
#workflow-reference {scroll-margin-top:calc(var(--bar-h) + 20px);}

body[data-step="practice"]:has(.sim-wrap) .screen {padding-top:20px;}

/* Compact guide sections: one next step, stable anchor destinations. */
.guide-index {gap:8px 24px;padding:10px 0;}
.guide-index a {min-height:44px;display:inline-flex;align-items:center;text-decoration:none;}
.guide-index a[aria-current] {font-weight:600;text-decoration:underline;}
.guide [data-chunk] :is(h2,h3) {scroll-margin-top:calc(var(--bar-h) + var(--guide-nav-h, 64px) + 16px);}
.guide [data-chunk] > h2:first-child {margin-top:0;}
.guide-checks {padding-left:22px;margin:24px 0;}
.guide-checks li + li {margin-top:12px;}
@media(max-width:699px) {.guide [data-chunk] :is(h2,h3) {scroll-margin-top:calc(var(--bar-h) + 16px);}}

/* Portfolio demo navigation. */
.demo-bar-end { display: flex; align-items: center; justify-self: end; gap: 20px; }
.demo-switch { display: inline-flex; align-items: center; min-height: 44px; color: #2350c8; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.demo-switch:hover { color: #173a99; }
.demo-switch:focus-visible { outline: 2px solid #2350c8; outline-offset: 3px; }