/* How it works (how-it-works.html, js/how-it-works.js).
 * An eight-step locum journey on one timeline. The line fills with scrolling (and empties when
 * scrolling back up); the step at the reading position is highlighted and its mock-up plays a small
 * "done" state. Desktop alternates text and mock-up either side of a centre line; below 820px it is a
 * single column with the line on the left. Colours, type and spacing come from css/tokens.css.
 * Without JavaScript every step is shown in its finished state and the line stays empty. */

/* ── Hero ── */
.hiw-hero { padding:var(--space-xl) 0 var(--space-lg); }
.hiw-eyebrow { color:var(--color-accent); font-size:var(--text-2xs); font-weight:700; letter-spacing:0.14em; margin:0 0 var(--space-sm); }
.hiw-hero h1 { color:var(--color-ink); font-size:var(--text-display-s); font-weight:800; letter-spacing:-0.035em; line-height:1.05; margin:0 0 var(--space-sm); max-width:16ch; }
.hiw-hero h1 span { color:var(--color-accent); font-weight:400; }
.hiw-lead { color:var(--color-ink-2); font-size:var(--text-lg); line-height:1.6; margin:0 0 var(--space-md); max-width:40rem; }
.hiw-hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-2xs); }
.hiw-legend { color:var(--color-muted); display:flex; flex-wrap:wrap; font-size:var(--text-sm); gap:var(--space-2xs) var(--space-md); list-style:none; margin:var(--space-lg) 0 0; padding:0; }
.hiw-legend li { align-items:center; display:flex; gap:var(--space-2xs); }

/* Who does the step */
.hiw-who { border-radius:var(--radius-pill); display:inline-block; font-size:var(--text-2xs); font-weight:700; letter-spacing:0.04em; padding:3px 10px; }
.hiw-who + .hiw-who { margin-left:6px; }
.hiw-who-you { background:var(--color-paper-3); color:var(--color-accent-deep); }
.hiw-who-hr { background:oklch(93% 0.02 255); color:var(--color-ink); }
.hiw-who-branch { background:var(--color-filled-bg); color:oklch(45% 0.1 70); }

/* ── Timeline ── */
.hiw-journey { padding:var(--space-lg) 0 var(--space-2xl); }
.hiw-track { --marker:44px; position:relative; }
.hiw-steps { display:grid; gap:var(--space-2xl); list-style:none; margin:0; padding:0; position:relative; }
/* The line runs between the first and last markers; js/how-it-works.js sets its exact top and height. */
.hiw-rail { background:var(--color-rule); border-radius:2px; bottom:0; left:50%; position:absolute; top:0; transform:translateX(-50%); width:2px; }
.hiw-rail-fill { background:var(--color-accent); border-radius:2px; inset:0; position:absolute; transform:scaleY(0); transform-origin:top; will-change:transform; }

.hiw-step { align-items:center; column-gap:var(--space-lg); display:grid; grid-template-areas:"text marker visual"; grid-template-columns:minmax(0,1fr) var(--marker) minmax(0,1fr); }
.hiw-step:nth-child(even) { grid-template-areas:"visual marker text"; }
.hiw-marker { align-items:center; background:var(--color-paper-2); border:2px solid var(--color-rule-strong); border-radius:50%; color:var(--color-muted); display:flex; font-family:var(--font-display); font-size:var(--text-md); font-weight:800; grid-area:marker; height:var(--marker); justify-content:center; justify-self:center; position:relative; transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); width:var(--marker); z-index:1; }
.hiw-text { grid-area:text; max-width:26rem; }
.hiw-step:nth-child(odd) .hiw-text { justify-self:end; }
.hiw-text h3 { color:var(--color-ink); font-size:var(--text-xl); font-weight:800; letter-spacing:-0.02em; line-height:1.2; margin:var(--space-xs) 0 var(--space-2xs); transition:color var(--dur-med) var(--ease-out); }
.hiw-text p { color:var(--color-ink-2); font-size:var(--text-md); line-height:1.65; margin:0; }
.hiw-visual { grid-area:visual; min-width:0; width:100%; }
.hiw-step:nth-child(even) .hiw-visual { justify-self:end; }
.hiw-visual .mock { max-width:400px; }
.hiw-step:nth-child(even) .hiw-visual .mock { margin-left:auto; }

/* Passed steps: filled marker. Current step: ringed marker, coloured heading, lifted mock-up. */
.hiw-step.is-done .hiw-marker { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }
.hiw-step.is-active .hiw-marker { background:var(--color-paper-2); border-color:var(--color-accent); box-shadow:0 0 0 6px var(--color-paper-3); color:var(--color-accent-deep); transform:scale(1.12); }
.hiw-step.is-active .hiw-text h3 { color:var(--color-accent-deep); }
.hiw-step.is-active .mock { box-shadow:0 18px 40px oklch(27% 0.05 253 / 0.12); transform:translateY(-4px); }

/* ── Interface mock-ups (illustrative: labels and placeholder bars, no real data) ── */
.mock { background:var(--color-paper-2); border:var(--rule); border-radius:14px; box-shadow:var(--shadow-lift); color:var(--color-ink); font-size:var(--text-sm); padding:var(--space-md); transition:box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.mock-title { font-family:var(--font-display); font-size:var(--text-md); font-weight:700; margin:0 0 var(--space-sm); }
.mock-line { background:var(--color-rule); border-radius:4px; display:block; height:8px; }
.w30 { width:30%; } .w40 { width:40%; } .w50 { width:50%; } .w60 { width:60%; } .w70 { width:70%; } .w80 { width:80%; }
.mock-button { background:var(--color-accent); border-radius:8px; color:var(--color-accent-ink); display:block; font-size:var(--text-xs); font-weight:700; margin-top:var(--space-sm); padding:10px; text-align:center; }
.mock-done-dot, .mock-checklist b, .mock-check b, .mock-stage b { border:2px solid var(--color-rule-strong); border-radius:50%; flex:0 0 auto; height:16px; position:relative; transition:background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); width:16px; }
/* Tick drawn inside a filled dot */
.mock-checklist .is-done b::after, .mock-check b::after, .mock-stage b::after, .mock-bell::after, .mock-paid-mark::after { border:solid var(--color-accent-ink); border-width:0 2px 2px 0; content:""; height:7px; left:50%; opacity:0; position:absolute; top:45%; transform:translate(-50%,-50%) rotate(45deg); transition:opacity var(--dur-short) var(--ease-out); width:4px; }
.mock-checklist .is-done b { background:var(--color-accent); border-color:var(--color-accent); }
.mock-checklist .is-done b::after { opacity:1; }

/* 1 · Register */
.mock-field { margin-bottom:var(--space-xs); }
.mock-field span { color:var(--color-muted); display:block; font-size:var(--text-2xs); font-weight:700; margin-bottom:4px; }
.mock-field i { background:var(--color-paper); border:var(--rule); border-radius:8px; display:block; height:32px; }
.mock-segment { background:var(--color-paper); border:var(--rule); border-radius:8px; display:grid; gap:4px; grid-template-columns:1fr 1fr; padding:3px; }
.mock-segment span { border-radius:6px; color:var(--color-muted); font-size:var(--text-xs); font-weight:700; padding:6px; text-align:center; }
.mock-segment .is-on { background:var(--color-paper-2); box-shadow:0 1px 3px oklch(27% 0.05 253 / 0.12); color:var(--color-accent-deep); }

/* 2 · Profile completion: the progress bar fills when the step is reached */
.mock-progress { background:var(--color-paper-3); border-radius:4px; height:6px; margin-bottom:var(--space-sm); overflow:hidden; }
.mock-progress span { background:var(--color-accent); border-radius:4px; display:block; height:100%; transition:width 700ms var(--ease-out); width:25%; }
.hiw-step:is(.is-active,.is-done) .mock-progress span, .hiw-track:not(.is-live) .mock-progress span { width:75%; }
.mock-checklist ul { display:grid; gap:10px; list-style:none; margin:0; padding:0; }
.mock-checklist li { align-items:center; display:flex; gap:10px; }
.mock-checklist em { background:var(--color-paper-3); border-radius:4px; color:var(--color-accent-deep); font-size:var(--text-2xs); font-style:normal; font-weight:700; margin-left:auto; padding:1px 6px; }

/* 3 · HR review: checks tick one after another, then "Pending" becomes "Verified" */
.mock-row { align-items:center; display:flex; gap:var(--space-xs); margin-bottom:var(--space-sm); }
.mock-row .mock-line { flex:1 1 auto; }
.mock-avatar { background:var(--color-paper-3); border-radius:50%; flex:0 0 auto; height:34px; width:34px; }
.mock-chip { border-radius:var(--radius-pill); flex:0 0 auto; font-size:var(--text-2xs); font-weight:700; }
.mock-chip-swap { display:inline-grid; }
.mock-chip-swap span { border-radius:var(--radius-pill); grid-area:1 / 1; padding:3px 10px; text-align:center; transition:opacity var(--dur-med) var(--ease-out) 600ms; }
.mock-chip-swap span:first-child { background:var(--color-filled-bg); color:oklch(45% 0.1 70); }
.mock-chip-swap span:last-child { background:var(--color-open-bg); color:var(--color-open); opacity:0; }
.hiw-step:is(.is-active,.is-done) .mock-chip-swap span:first-child, .hiw-track:not(.is-live) .mock-chip-swap span:first-child { opacity:0; }
.hiw-step:is(.is-active,.is-done) .mock-chip-swap span:last-child, .hiw-track:not(.is-live) .mock-chip-swap span:last-child { opacity:1; }
.mock-check { align-items:center; border-top:var(--rule); display:flex; gap:10px; padding:10px 0 0; }
.mock-check + .mock-check { margin-top:10px; }
.hiw-step:is(.is-active,.is-done) .mock-check b, .hiw-track:not(.is-live) .mock-check b { background:var(--color-open); border-color:var(--color-open); }
.hiw-step:is(.is-active,.is-done) .mock-check b::after, .hiw-track:not(.is-live) .mock-check b::after { opacity:1; }
.mock-check:nth-of-type(2) b, .mock-check:nth-of-type(2) b::after { transition-delay:150ms; }
.mock-check:nth-of-type(3) b, .mock-check:nth-of-type(3) b::after { transition-delay:300ms; }
.mock-check:nth-of-type(4) b, .mock-check:nth-of-type(4) b::after { transition-delay:450ms; }

/* 4 · Available slots */
.mock-slot { align-items:center; border:var(--rule); border-radius:10px; display:grid; gap:var(--space-xs); grid-template-columns:40px minmax(0,1fr) auto; padding:10px; transition:border-color var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.mock-slot + .mock-slot { margin-top:8px; }
.mock-date { background:var(--color-paper-3); border-radius:8px; display:grid; gap:4px; height:40px; justify-items:center; padding:8px 0; }
.mock-date b { background:var(--color-accent); border-radius:2px; height:5px; width:18px; }
.mock-date i { background:var(--color-rule-strong); border-radius:3px; height:10px; width:14px; }
.mock-lines { display:grid; gap:6px; }
.mock-tag { background:var(--color-open-bg); border-radius:var(--radius-pill); color:var(--color-open); font-size:var(--text-2xs); font-weight:700; padding:3px 9px; }
.hiw-step:is(.is-active,.is-done) .mock-slot:first-of-type { background:var(--color-paper-3); border-color:var(--color-accent); }

/* 5 · Apply: the button becomes the "Awaiting confirmation" status */
.mock-detail { align-items:center; display:grid; gap:var(--space-xs); grid-template-columns:64px minmax(0,1fr); padding:6px 0; }
.mock-detail span { color:var(--color-muted); font-size:var(--text-xs); }
.mock-button-swap { display:grid; padding:0; transition:background var(--dur-med) var(--ease-out) 400ms; }
.mock-button-swap span { grid-area:1 / 1; padding:10px; transition:opacity var(--dur-med) var(--ease-out) 400ms; }
.mock-button-swap span:last-child { color:oklch(40% 0.1 70); opacity:0; }
.hiw-step:is(.is-active,.is-done) .mock-button-swap, .hiw-track:not(.is-live) .mock-button-swap { background:var(--color-filled-bg); }
.hiw-step:is(.is-active,.is-done) .mock-button-swap span:first-child, .hiw-track:not(.is-live) .mock-button-swap span:first-child { opacity:0; }
.hiw-step:is(.is-active,.is-done) .mock-button-swap span:last-child, .hiw-track:not(.is-live) .mock-button-swap span:last-child { opacity:1; }

/* 6 · Booking confirmed: notification arrives, the day is marked in the calendar */
.mock-toast { align-items:center; background:var(--color-paper); border:var(--rule); border-radius:12px; display:flex; gap:var(--space-xs); padding:var(--space-xs); transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.mock-toast > span:last-child { display:grid; flex:1 1 auto; gap:6px; }
.mock-toast b { font-size:var(--text-sm); }
.mock-bell { background:var(--color-open); border-radius:50%; flex:0 0 auto; height:34px; position:relative; width:34px; }
.mock-bell::after { opacity:1; }
.mock-calendar { display:grid; gap:6px; grid-template-columns:repeat(7,1fr); margin-top:var(--space-sm); }
.mock-calendar span { aspect-ratio:1; background:var(--color-paper); border:var(--rule); border-radius:8px; transition:background var(--dur-med) var(--ease-out) 300ms, border-color var(--dur-med) var(--ease-out) 300ms, transform var(--dur-med) var(--ease-out) 300ms; }
.hiw-step:is(.is-active,.is-done) .mock-calendar .is-booked, .hiw-track:not(.is-live) .mock-calendar .is-booked { background:var(--color-accent); border-color:var(--color-accent); }
.hiw-step.is-active .mock-calendar .is-booked { transform:scale(1.08); }
.hiw-track.is-live .hiw-step:not(.is-active):not(.is-done) .mock-toast { opacity:.4; transform:translateY(-6px); }

/* 7 · After the shift: each stage completes in turn */
.mock-flow { display:grid; gap:0; }
.mock-stage { align-items:center; display:flex; gap:var(--space-xs); padding:9px 0; position:relative; }
.mock-stage:not(:last-child)::before { background:var(--color-rule); bottom:-9px; content:""; left:7px; position:absolute; top:27px; width:2px; }
.mock-stage.is-done b { background:var(--color-accent); border-color:var(--color-accent); }
.mock-stage.is-done b::after { opacity:1; }
.hiw-step:is(.is-active,.is-done) .mock-stage b, .hiw-track:not(.is-live) .mock-stage b { background:var(--color-accent); border-color:var(--color-accent); }
.hiw-step:is(.is-active,.is-done) .mock-stage b::after, .hiw-track:not(.is-live) .mock-stage b::after { opacity:1; }
.mock-stage:nth-child(3) b, .mock-stage:nth-child(3) b::after { transition-delay:250ms; }
.mock-stage:nth-child(4) b, .mock-stage:nth-child(4) b::after { transition-delay:500ms; }

/* 8 · Paid */
.mock-status-track { display:grid; gap:6px; grid-template-columns:repeat(3,1fr); margin-bottom:var(--space-sm); }
.mock-status-track span { background:var(--color-paper); border:var(--rule); border-radius:var(--radius-pill); color:var(--color-muted); font-size:var(--text-2xs); font-weight:700; padding:5px 4px; text-align:center; transition:background var(--dur-med) var(--ease-out) 300ms, color var(--dur-med) var(--ease-out) 300ms, border-color var(--dur-med) var(--ease-out) 300ms; }
.mock-status-track .is-done { background:var(--color-paper-3); border-color:transparent; color:var(--color-accent-deep); }
.hiw-step:is(.is-active,.is-done) .mock-status-track .is-final, .hiw-track:not(.is-live) .mock-status-track .is-final { background:var(--color-open-bg); border-color:transparent; color:var(--color-open); }
.mock-receipt { align-items:center; background:var(--color-paper); border-radius:10px; display:flex; gap:var(--space-xs); padding:var(--space-xs); }
.mock-receipt > span:last-child { display:grid; flex:1 1 auto; gap:6px; }
.mock-paid-mark { background:var(--color-rule-strong); border-radius:50%; flex:0 0 auto; height:30px; position:relative; transition:background var(--dur-med) var(--ease-out) 300ms; width:30px; }
.hiw-step:is(.is-active,.is-done) .mock-paid-mark, .hiw-track:not(.is-live) .mock-paid-mark { background:var(--color-open); }
.hiw-step:is(.is-active,.is-done) .mock-paid-mark::after, .hiw-track:not(.is-live) .mock-paid-mark::after { opacity:1; transition-delay:300ms; }

/* ── Closing call to action ── */
.hiw-cta { padding:0 0 var(--space-2xl); }
.hiw-cta-card { align-items:center; background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); box-shadow:var(--shadow-lift); display:flex; flex-wrap:wrap; gap:var(--space-md); justify-content:space-between; padding:var(--space-lg); }
.hiw-cta-card h2 { color:var(--color-ink); font-size:var(--text-2xl); letter-spacing:-0.02em; margin:0 0 var(--space-2xs); }
.hiw-cta-card p { color:var(--color-ink-2); line-height:1.6; margin:0; max-width:36rem; }

/* ── Entrance (js/public-motion.js reveals; directional variants for this page) ── */
@media (prefers-reduced-motion:no-preference) {
  .hiw-page [data-reveal="left"] { transform:translate3d(-28px,0,0); }
  .hiw-page [data-reveal="right"] { transform:translate3d(28px,0,0); }
  .hiw-page [data-reveal="zoom"] { transform:translate3d(0,16px,0) scale(.96); }
  .hiw-page [data-reveal].reveal-armed { transition-duration:550ms; }
}

/* ── Single column below 820px: line and markers on the left ── */
@media (max-width:820px) {
  .hiw-hero { padding:var(--space-lg) 0 var(--space-md); }
  .hiw-track { --marker:38px; }
  .hiw-steps { gap:var(--space-xl); }
  .hiw-rail { left:calc(var(--marker) / 2); }
  .hiw-step, .hiw-step:nth-child(even) { align-items:start; column-gap:var(--space-sm); grid-template-areas:"marker text" ". visual"; grid-template-columns:var(--marker) minmax(0,1fr); row-gap:var(--space-sm); }
  .hiw-step:nth-child(odd) .hiw-text, .hiw-step:nth-child(even) .hiw-visual { justify-self:stretch; }
  .hiw-text { max-width:none; }
  .hiw-text h3 { font-size:var(--text-lg); margin-top:var(--space-2xs); }
  .hiw-text p { font-size:var(--text-sm); }
  .hiw-visual .mock, .hiw-step:nth-child(even) .hiw-visual .mock { margin-left:0; max-width:none; }
  .mock { padding:var(--space-sm); }
  .hiw-step.is-active .hiw-marker { transform:scale(1.06); }
  .hiw-cta-card { padding:var(--space-md); }
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference) {
  .hiw-page [data-reveal="left"], .hiw-page [data-reveal="right"] { transform:translate3d(0,14px,0); }
}

/* ── Reduced motion: no movement, states change instantly ── */
@media (prefers-reduced-motion:reduce) {
  .hiw-page *, .hiw-page *::before, .hiw-page *::after { transition-duration:0s !important; transition-delay:0s !important; }
  .hiw-step.is-active .hiw-marker, .hiw-step.is-active .mock, .hiw-step.is-active .mock-calendar .is-booked { transform:none; }
}