/* Sentinel v2 - whatif.css
   What if: Simulation Theater, kept answers, phase rail, composer.
   Owned by the 'whatif' area of the v2 redesign; tokens come from v2/tokens.css.
   Colours read the v2 tokens first and the pre-v2 names second, so the page is right before and after the tokens land.
   Party colours are mixed toward the theme's own ink, so one rule reads on parchment and on midnight alike. */

.wi-layout, .wi-th, .wi-stage-wrap {
  --wi-brand: var(--brand, var(--accent-ink, #1a2fe6));
  --wi-brand-soft: color-mix(in srgb, var(--wi-brand) 11%, transparent);
  --wi-on-brand: var(--on-brand, var(--text-inverse, #fff));
  --wi-crit: var(--sev-critical, var(--severity-critical, #9f1239));
  --wi-ok: var(--severity-success, #15803d);
  --wi-a: var(--party-a, color-mix(in srgb, #0f9e8f 72%, var(--text-primary, #111)));
  --wi-b: var(--party-b, color-mix(in srgb, #8b5cf6 72%, var(--text-primary, #111)));
  --wi-ink-1: var(--ink-1, var(--text-primary, #111));
  --wi-ink-2: var(--ink-2, var(--text-secondary, #3b424c));
  --wi-ink-3: var(--ink-3, var(--text-muted, #5f6874));
  --wi-ink-4: var(--ink-4, var(--text-faint, #a3a9b1));
  --wi-line: var(--line-1, var(--border-subtle, rgba(0, 0, 0, .1)));
  --wi-line-2: var(--line-2, var(--border-strong, rgba(0, 0, 0, .18)));
  --wi-bg-1: var(--bg-1, var(--bg-pane, #fff));
  --wi-bg-2: var(--bg-2, var(--bg-soft, #f5f4ef));
  --wi-serif: var(--font-serif, var(--font-doc, "Source Serif 4", Georgia, serif));
  --wi-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  --wi-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------- under the shell's contract header */
/* The header above already names the contract and lights the "What if" tab: the page opens on one quiet line, then the box. */
.wi-layout.is-under-shell { padding-top: 20px; }
.wi-lede { margin: 0 0 12px; max-width: 72ch; font-size: 14px; line-height: 20px; color: var(--wi-ink-3); text-wrap: pretty; }

/* ---------------------------------------------------------------- verdict band */
.wi-th { display: grid; gap: 16px; }
.wi-band {
  display: grid; gap: 10px; padding: 20px 22px 18px;
  border: 1px solid var(--wi-line); border-radius: 14px; background: var(--wi-bg-1);
}
.wi-band-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wi-band-top .sv-verdict-pill { margin: 0; }
.wi-readfor { font-size: 13px; color: var(--wi-ink-3); }
.wi-readfor b { color: var(--wi-ink-1); font-weight: 600; }
.wi-band-q { font-size: 13px; line-height: 18px; color: var(--wi-ink-3); max-width: 72ch; }
.wi-band-title {
  margin: 0; font: 500 24px/1.25 var(--wi-serif); letter-spacing: -.01em; color: var(--wi-ink-1);
  max-width: 40ch; text-wrap: balance;
}
.wi-band-lede { margin: 0; font-size: 15px; line-height: 22px; color: var(--wi-ink-2); max-width: 72ch; }
.wi-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.wi-kpi {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 11px;
  border: 1px solid var(--wi-line-2); border-radius: 999px; background: var(--wi-bg-2);
  font-size: 13px; line-height: 18px; color: var(--wi-ink-2);
}
.wi-kpi b { color: var(--wi-ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.wi-kpi.is-breach b, .wi-kpi.is-unpaid b { color: var(--wi-crit); }
.wi-kpi .sv-tl-clause { margin: 0; }

/* ---------------------------------------------------------------- the stage */
.wi-th-host { display: grid; gap: 12px; }
.wi-th-svgwrap {
  border: 1px solid var(--wi-line); border-radius: 14px; background: var(--wi-bg-1);
  overflow-x: auto; overscroll-behavior-x: contain;
}
.wi-th-svg { display: block; width: 100%; min-width: 720px; height: auto; }
.wi-th-host.is-vertical .wi-th-svg { min-width: 0; max-width: 420px; margin: 0 auto; }
.wi-th-svg:focus-visible { outline: 2px solid var(--focus, var(--wi-brand)); outline-offset: -2px; border-radius: 14px; }
.wi-th-svg text { font-family: var(--font-ui, Inter, system-ui, sans-serif); }
.wi-th-lane { fill: var(--wi-bg-2); }
.wi-th-lane.is-contract { fill: color-mix(in srgb, var(--wi-bg-2) 55%, transparent); }
.wi-th-lname { font-size: 14px; font-weight: 600; fill: var(--wi-ink-1); }
.wi-th-lname.is-mine { fill: var(--wi-a); }
.wi-th-lname.is-other { fill: var(--wi-b); }
.wi-th-lrole { font-size: 12px; fill: var(--wi-ink-3); }
/* a lane headed by the party's role: its name, under it, in the small line */
.wi-th-lrole.is-name { fill: var(--wi-ink-2); }
.wi-th-lhead { cursor: default; }
.wi-th-lname.is-v { font-size: 12px; }
.wi-th-lline { stroke: var(--wi-line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.wi-th-axis { stroke: var(--wi-line-2); }
.wi-th-tick { stroke: var(--wi-ink-4); }
.wi-th-ticklabel { font-size: 12px; fill: var(--wi-ink-3); font-family: var(--wi-mono) !important; }
.wi-th-node { transition: opacity 160ms var(--wi-ease); cursor: pointer; }
.wi-th-node.is-future { opacity: .22; }
.wi-th-node.is-quiet { opacity: .55; }
.wi-th-node.is-quiet.is-future { opacity: .12; }
.wi-th-n-breach { fill: var(--wi-crit); }
.wi-th-n-paid { fill: var(--wi-brand); }
.wi-th-n-unpaid { fill: var(--wi-bg-1); stroke: var(--wi-crit); stroke-width: 2; stroke-dasharray: 3 3; }
.wi-th-n-due { fill: var(--wi-bg-1); stroke: var(--wi-ink-3); stroke-width: 1.6; }
.wi-th-n-right { fill: var(--wi-brand); }
.wi-th-n-right-ring { fill: none; stroke: var(--wi-brand); stroke-opacity: .45; stroke-width: 1.4; }
.wi-th-n-cons { fill: var(--wi-ink-2); }
.wi-th-n-end { fill: var(--wi-crit); }
.wi-th-n-end-ring { fill: none; stroke: var(--wi-crit); stroke-width: 2; }
.wi-th-n-act { fill: var(--wi-ink-3); }
.wi-th-nlabel { font-size: 12px; fill: var(--wi-ink-2); font-variant-numeric: tabular-nums; }
.wi-th-nlabel.is-chip { font-family: var(--wi-mono) !important; font-weight: 500; fill: var(--wi-ink-1); }
.wi-th-nlabel[data-unit]:hover { fill: var(--wi-brand); text-decoration: underline; }
.wi-th-arrow { fill: none; stroke: var(--wi-brand); stroke-width: 1.5; opacity: 0; transition: opacity 220ms var(--wi-ease); }
.wi-th-arrow.is-on { opacity: .85; }
.wi-th-arrowhead { fill: var(--wi-brand); }
.wi-th-coin { fill: var(--wi-brand); }
.wi-th-ph-line { stroke: var(--wi-brand); stroke-width: 2; }
.wi-th-ph-pill { fill: var(--wi-brand); }
.wi-th-ph-text { font-size: 11.5px; font-weight: 600; fill: var(--wi-on-brand); font-variant-numeric: tabular-nums; }

.wi-th-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wi-th-range { flex: 1 1 220px; min-width: 160px; accent-color: var(--wi-brand); min-height: 28px; }
.wi-th-day { font: 500 13px/18px var(--wi-mono); color: var(--wi-ink-2); min-width: 168px; font-variant-numeric: tabular-nums; }

.wi-th-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wi-th-meter {
  display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--wi-line); border-radius: 10px; background: var(--wi-bg-2);
}
.wi-th-mlabel { font-size: 12px; line-height: 16px; color: var(--wi-ink-3); }
.wi-th-asof { display: block; font-size: 11px; color: var(--wi-ink-3); }
.wi-th-meter b { font: 600 20px/1.15 var(--font-ui, Inter, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--wi-ink-1); overflow-wrap: anywhere; }
.wi-th-meter.is-unpaid b { color: var(--wi-crit); }
.wi-th-meter.is-net.is-dim { opacity: .6; }
.wi-th-meter.is-bump { animation: wi-bump 600ms var(--wi-ease); }
@keyframes wi-bump { 0% { background: var(--wi-brand-soft); } 100% { background: var(--wi-bg-2); } }
.wi-th-moot, .wi-th-gate { margin: 0; font-size: 13px; line-height: 18px; color: var(--wi-ink-3); max-width: 80ch; }
.wi-th-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--wi-ink-3); }
.wi-th-legend li { display: inline-flex; align-items: center; gap: 6px; }
.wi-th-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.wi-th-legend .lg-breach { background: var(--wi-crit); border-radius: 1px; transform: rotate(45deg) scale(.85); }
.wi-th-legend .lg-paid { background: var(--wi-brand); }
.wi-th-legend .lg-unpaid { border: 2px dashed var(--wi-crit); }
.wi-th-legend .lg-due { border: 1.5px solid var(--wi-ink-3); }
.wi-th-legend .lg-right { background: var(--wi-brand); box-shadow: 0 0 0 3px var(--wi-brand-soft); }
.wi-th-legend .lg-cons { background: var(--wi-ink-2); border-radius: 2px; }
.wi-th-legend .lg-end { background: var(--wi-crit); box-shadow: 0 0 0 2px var(--wi-bg-1), 0 0 0 4px var(--wi-crit); }

/* ---------------------------------------------------------------- tabs */
.wi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wi-line); overflow-x: auto; scrollbar-width: none; }
.wi-tab {
  appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  min-height: 40px; padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 500 14px/20px var(--font-ui, Inter, sans-serif); color: var(--wi-ink-3);
}
.wi-tab:hover { color: var(--wi-ink-1); }
.wi-tab[aria-selected="true"] { color: var(--wi-ink-1); border-bottom-color: var(--wi-brand); }
.wi-tab:focus-visible { outline: 2px solid var(--focus, var(--wi-brand)); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.wi-tab-n { margin-left: 6px; font-size: 12px; color: var(--wi-ink-3); font-variant-numeric: tabular-nums; }
.wi-panel { display: grid; gap: 14px; min-width: 0; }
.wi-panel[hidden] { display: none !important; }
.wi-panel > .sv-sec:first-child, .wi-panel > .sv-notes:first-child { margin-top: 0; }
.wi-panel .sv-more.sv-agent > summary { display: none; }
.wi-money-chartbox { position: relative; height: 240px; border: 1px solid var(--wi-line); border-radius: 12px; background: var(--wi-bg-1); padding: 12px; }
.wi-money-chartbox[hidden] { display: none; }
.wi-money-chartbox canvas { width: 100% !important; height: 100% !important; }
.wi-panel-note { margin: 0; font-size: 13px; color: var(--wi-ink-3); }

/* the story list follows the playhead: past rows in ink, the row "now" lit, later rows quiet */
.wi-th .sv-tl-dated li[data-day] { transition: opacity 160ms var(--wi-ease), background-color 160ms var(--wi-ease); border-radius: 8px; }
.wi-th .sv-tl-dated li[data-day]:not(.is-past) { opacity: .5; }
.wi-th .sv-tl-dated li[data-day].is-now { background: var(--wi-brand-soft); }

/* ---------------------------------------------------------------- live run: phase rail + steps */
.wi-phases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 0; list-style: none; }
.wi-phase { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--wi-ink-3); letter-spacing: .02em; }
.wi-phase-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--wi-ink-4); }
.wi-phase.is-done { color: var(--wi-ink-2); }
.wi-phase.is-done .wi-phase-dot { background: var(--wi-ink-2); border-color: var(--wi-ink-2); }
.wi-phase.is-now { color: var(--wi-ink-1); }
.wi-phase.is-now .wi-phase-dot { background: var(--wi-brand); border-color: var(--wi-brand); box-shadow: 0 0 0 3px var(--wi-brand-soft); }
.wi-phase-sep { width: 14px; height: 1px; background: var(--wi-line-2); }
.sr-step.is-new { animation: wi-rise 280ms var(--wi-ease) both; }
@keyframes wi-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- composer + starter cards */
.wi-compose { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--wi-line-2); border-radius: 12px; }
.wi-compose-h { font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--wi-ink-3); }
.wi-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--wi-ink-2); }
.wi-sel, .wi-num, .wi-date {
  min-height: 30px; padding: 3px 8px; border: 1px solid var(--wi-line-2); border-radius: 6px;
  background: var(--wi-bg-1); color: var(--wi-ink-1); font: inherit;
}
.wi-num { width: 64px; font-variant-numeric: tabular-nums; }
.wi-sel:focus-visible, .wi-num:focus-visible, .wi-date:focus-visible { outline: 2px solid var(--focus, var(--wi-brand)); outline-offset: 1px; }
.wi-tpl-use { margin-left: auto; }
.wi-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.wi-starter {
  appearance: none; display: grid; gap: 4px; text-align: start; cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--wi-line); border-radius: 10px; background: var(--wi-bg-1); color: var(--wi-ink-1);
  font: 400 14px/20px var(--font-ui, Inter, sans-serif);
  transition: border-color 120ms var(--wi-ease), background-color 120ms var(--wi-ease);
}
.wi-starter:hover { border-color: var(--wi-brand); background: var(--wi-brand-soft); }
.wi-starter:focus-visible { outline: 2px solid var(--focus, var(--wi-brand)); outline-offset: 1px; }
.wi-starter-k { font-size: 11px; line-height: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--wi-ink-3); }
.wi-kept-when { margin-left: auto; font-size: 12px; color: var(--wi-ink-3); white-space: nowrap; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
  .wi-band { padding: 16px; }
  .wi-band-title { font-size: 20px; }
  .wi-th-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wi-th-meter { padding: 10px 12px; }
  .wi-th-meter b { font-size: 17px; }
  .wi-th-meter.is-net { grid-column: 1 / -1; }
  .wi-th-day { min-width: 0; }
  .wi-tpl-use { margin-left: 0; }
  .wi-tab { padding: 8px 10px; min-height: 44px; }
}
@media (pointer: coarse) {
  .wi-sel, .wi-num, .wi-date { min-height: 44px; }
}

/* ---------------------------------------------------------------- the Theater inside the old answer shell */
/* one frame, not three: the answer region and the tone border step back for the band and the stage */
.stress-current:has(.wi-th) { background: none; border: 0; padding: 0; }
.stress-current:has(.wi-th) > .stress-q { display: none; }
.stress-verdict.wi-th { margin-top: 0; border: 0; border-radius: 0; overflow: visible; background: none; }
.wi-th.is-unsafe .wi-band { border-top: 3px solid var(--wi-crit); }
.wi-th.is-safe .wi-band { border-top: 3px solid var(--wi-ok); }
.wi-th.is-warn .wi-band { border-top: 3px solid var(--severity-medium, #a16207); }
.wi-th.is-ask .wi-band { border-top: 3px solid var(--wi-ink-4); }
.wi-th > .sv-actions:empty { display: none; }

/* the question builder folds away until wanted */
details.wi-compose { padding: 0; }
details.wi-compose > summary {
  list-style: none; cursor: pointer; padding: 10px 14px; min-height: 40px; display: flex; align-items: center; gap: 8px;
}
details.wi-compose > summary::-webkit-details-marker { display: none; }
details.wi-compose > summary::before { content: "+"; font: 600 14px/1 var(--wi-mono); color: var(--wi-ink-3); width: 12px; }
details.wi-compose[open] > summary::before { content: "−"; }
details.wi-compose > summary:focus-visible { outline: 2px solid var(--focus, var(--wi-brand)); outline-offset: -2px; border-radius: 12px; }
details.wi-compose > .wi-tpl { padding: 0 14px; }
details.wi-compose[open] { padding-bottom: 12px; }
details.wi-compose[open] > .wi-tpl + .wi-tpl { margin-top: 8px; }

/* the working panel's Stop, and what it says while the run winds down */
.stress-run .sr-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.stress-run .sr-stopping { font-size: 12.5px; color: var(--wi-ink-3); }
/* an answer's own notes: that the reader stopped it, and what it cost (credits, as the Usage page counts them) */
.wi-run-note { margin: 6px 0 0; font-size: 12.5px; line-height: 18px; color: var(--wi-ink-3); max-width: 72ch; }
.wi-run-note b { color: var(--wi-ink-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.wi-run-note.is-stopped { color: var(--wi-ink-2); }
.wi-panel > .wi-run-note.wi-cost { margin: 0 0 12px; }
.sv-body > .wi-run-note { margin: 0 0 10px; }
.wi-hist-cost { flex: 0 0 auto; font-size: var(--fs-micro, 11px); color: var(--wi-ink-3); white-space: nowrap; }
.wi-hist-cost b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ================================================================================================================================
   WHAT IF, COMING IN THE NEXT MAJOR UPDATE (app.js renderWhatIfSoon; the owner, 2026-10-15). One card: the pill, what What if will
   do, an example played on a loop - the question typed, the clauses it rests on read, the contract's calendar built and played
   day by day, the clause that decides - and the pages that already cover the contract's risks.
   THE LOOP: one 10 s cycle every part keeps to (the same duration, no delays, so nothing drifts): 0-9 % the question, 9-28 %
   Read (a scan down the clauses, each cited clause lit as it passes), 28-42 % Build (the calendar drawn, its days marked), 42-70 %
   Play (the playhead runs day 0 to 60, linear, each event appearing as it is reached), 70-86 % Weigh (the verdict), then a hold,
   and 94-100 % everything lets go together. Only transforms, opacity, clip-path and four registered numbers (the steps' and the
   clauses' state, the day) move; colours are the theme's. Always running while on screen (the owner's rule).
================================================================================================================================ */
@property --wsd-act { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wsd-done { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wsd-lit { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wsd-day { syntax: "<integer>"; inherits: true; initial-value: 0; }

.wi-soon {
  --wi-brand: var(--brand, var(--accent-ink, #1a2fe6));
  --wi-brand-soft: color-mix(in srgb, var(--wi-brand) 12%, transparent);
  --wi-crit: var(--sev-critical, var(--severity-critical, #9f1239));
  --wi-ink-1: var(--ink-1, var(--text-primary, #111));
  --wi-ink-2: var(--ink-2, var(--text-secondary, #3b424c));
  --wi-ink-3: var(--ink-3, var(--text-muted, #5f6874));
  --wi-ink-4: var(--ink-4, var(--text-faint, #a3a9b1));
  --wi-line: var(--line-1, var(--border-subtle, rgba(0, 0, 0, .1)));
  --wi-bg-1: var(--surface-card, var(--bg-pane, #fff));
  --wi-bg-2: var(--bg-2, var(--bg-soft, #f5f4ef));
  --wi-serif: var(--font-serif, var(--font-doc, "Source Serif 4", Georgia, serif));
  --wi-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  --wsd-cycle: 10s;
  container-type: inline-size;
  padding: 32px 24px 56px;
}
.wi-soon-card {
  max-width: 820px; margin: 0 auto; padding: 28px 30px 26px; border: 1px solid var(--wi-line); border-radius: 18px;
  background: var(--wi-bg-1);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wi-ink-1) 6%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--wi-ink-1) 30%, transparent);
}
.wi-soon-head { display: grid; gap: 10px; justify-items: start; }
.wi-soon-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--wi-brand-soft); color: var(--wi-brand); font: 600 12.5px/1.4 var(--font-ui, Inter, sans-serif);
}
.wi-soon-pill i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--wi-brand); flex: none; }
.wi-soon-pill i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wi-brand);
  animation: wsdBeacon 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes wsdBeacon { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.wi-soon-h { margin: 2px 0 0; font: 600 28px/1.2 var(--wi-serif); color: var(--wi-ink-1); }
.wi-soon-lede { margin: 0; max-width: 64ch; font: 15px/1.55 var(--font-ui, Inter, sans-serif); color: var(--wi-ink-2); }

/* the example */
.wsd {
  margin: 22px 0 18px; padding: 18px 20px 20px; border-radius: 14px; background: var(--wi-bg-2);
  border: 1px solid var(--wi-line); display: grid; gap: 16px; overflow: hidden;
}
.wsd-q {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-radius: 10px;
  background: var(--wi-bg-1); border: 1px solid var(--wi-line);
  animation: wsdQBox var(--wsd-cycle) linear infinite;
}
.wsd-q-k { flex: none; font: 600 12px/1 var(--font-ui, Inter, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--wi-brand); }
.wsd-q-t { min-width: 0; font: 500 15px/1.4 var(--wi-serif); color: var(--wi-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsd-q-t > span { display: inline-block; animation: wsdQ var(--wsd-cycle) linear infinite; }
@keyframes wsdQ {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  9% { clip-path: inset(0 0 0 0); opacity: 1; }
  94% { clip-path: inset(0 0 0 0); opacity: 1; }
  99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes wsdQBox {
  0%, 9% { border-color: color-mix(in srgb, var(--wi-brand) 45%, var(--wi-line)); }
  13%, 100% { border-color: var(--wi-line); }
}

/* the four steps: each a dot that lights (--wsd-act) and fills with a check (--wsd-done) */
.wsd-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wsd-st {
  display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12.5px/1.3 var(--font-ui, Inter, sans-serif);
  color: color-mix(in srgb, var(--wi-ink-1) calc(max(var(--wsd-act), var(--wsd-done)) * 100%), var(--wi-ink-3));
}
.wsd-st span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsd-st i {
  position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--wi-brand) calc(max(var(--wsd-act), var(--wsd-done)) * 100%), var(--wi-ink-4));
  background: color-mix(in srgb, var(--wi-brand) calc(var(--wsd-done) * 100%), color-mix(in srgb, var(--wi-brand) calc(var(--wsd-act) * 16%), transparent));
  box-shadow: 0 0 0 calc(var(--wsd-act) * 4px) var(--wi-brand-soft);
}
.wsd-st i::after {
  content: ""; position: absolute; left: 4.5px; top: 2.5px; width: 3.5px; height: 6.5px; border: solid var(--on-brand, #fff);
  border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: var(--wsd-done);
}
.wsd-st1 { animation: wsdSt1 var(--wsd-cycle) linear infinite; }
.wsd-st2 { animation: wsdSt2 var(--wsd-cycle) linear infinite; }
.wsd-st3 { animation: wsdSt3 var(--wsd-cycle) linear infinite; }
.wsd-st4 { animation: wsdSt4 var(--wsd-cycle) linear infinite; }
@keyframes wsdSt1 { 0%, 8% { --wsd-act: 0; --wsd-done: 0; } 10%, 27% { --wsd-act: 1; --wsd-done: 0; } 29%, 94% { --wsd-act: 0; --wsd-done: 1; } 99%, 100% { --wsd-act: 0; --wsd-done: 0; } }
@keyframes wsdSt2 { 0%, 27% { --wsd-act: 0; --wsd-done: 0; } 29%, 41% { --wsd-act: 1; --wsd-done: 0; } 43%, 94% { --wsd-act: 0; --wsd-done: 1; } 99%, 100% { --wsd-act: 0; --wsd-done: 0; } }
@keyframes wsdSt3 { 0%, 41% { --wsd-act: 0; --wsd-done: 0; } 43%, 69% { --wsd-act: 1; --wsd-done: 0; } 71%, 94% { --wsd-act: 0; --wsd-done: 1; } 99%, 100% { --wsd-act: 0; --wsd-done: 0; } }
@keyframes wsdSt4 { 0%, 69% { --wsd-act: 0; --wsd-done: 0; } 71%, 85% { --wsd-act: 1; --wsd-done: 0; } 87%, 94% { --wsd-act: 0; --wsd-done: 1; } 99%, 100% { --wsd-act: 0; --wsd-done: 0; } }

.wsd-body { display: grid; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); gap: 22px; align-items: stretch; }

/* the contract: seven lines of clauses, a scan down them, the three it rests on lit as it passes */
.wsd-doc {
  position: relative; padding: 14px 14px 2px; border-radius: 10px; background: var(--wi-bg-1); border: 1px solid var(--wi-line);
  box-shadow: 0 6px 16px -14px color-mix(in srgb, var(--wi-ink-1) 40%, transparent);
}
.wsd-l { display: flex; align-items: center; gap: 6px; height: 12px; margin-bottom: 12px; }
.wsd-l i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--wi-ink-1) 11%, transparent); }
.wsd-tag {
  flex: none; padding: 0 5px; border-radius: 4px; font: 600 10px/12px var(--wi-mono);
  color: color-mix(in srgb, var(--wi-brand) calc(var(--wsd-lit) * 100%), var(--wi-ink-3));
  background: color-mix(in srgb, var(--wi-brand) calc(var(--wsd-lit) * 14%), transparent);
  box-shadow: 0 0 0 calc(var(--wsd-lit) * 1px) color-mix(in srgb, var(--wi-brand) 40%, transparent);
}
.wsd-t1 { animation: wsdT1 var(--wsd-cycle) linear infinite; }
.wsd-t2 { animation: wsdT2 var(--wsd-cycle) linear infinite; }
.wsd-t3 { animation: wsdT3 var(--wsd-cycle) linear infinite; }
@keyframes wsdT1 { 0%, 9% { --wsd-lit: 0; } 11%, 94% { --wsd-lit: 1; } 99%, 100% { --wsd-lit: 0; } }
@keyframes wsdT2 { 0%, 15% { --wsd-lit: 0; } 17%, 94% { --wsd-lit: 1; } 99%, 100% { --wsd-lit: 0; } }
@keyframes wsdT3 { 0%, 24% { --wsd-lit: 0; } 26%, 94% { --wsd-lit: 1; } 99%, 100% { --wsd-lit: 0; } }
.wsd-scan {
  position: absolute; left: 8px; right: 8px; top: 10px; height: 20px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wi-brand) 16%, transparent) 30%, color-mix(in srgb, var(--wi-brand) 16%, transparent) 70%, transparent);
  animation: wsdScan var(--wsd-cycle) linear infinite;
}
@keyframes wsdScan {
  0%, 8% { transform: translateY(0); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  26% { transform: translateY(144px); opacity: 1; }
  29%, 100% { transform: translateY(144px); opacity: 0; }
}

/* the calendar: a track drawn and marked, a playhead that runs day 0 to 60, the events it reaches, the verdict */
.wsd-time { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-width: 0; }
.wsd-day { font: 500 12px/1.2 var(--font-ui, Inter, sans-serif); color: var(--wi-ink-3); animation: wsdDayShow var(--wsd-cycle) linear infinite; }
.wsd-n {
  font: 600 15px/1 var(--wi-mono); color: var(--wi-ink-1); font-variant-numeric: tabular-nums;
  counter-reset: wsdday var(--wsd-day); animation: wsdDay var(--wsd-cycle) linear infinite;
}
.wsd-n::after { content: counter(wsdday); }
@keyframes wsdDay { 0%, 44% { --wsd-day: 0; } 70%, 96% { --wsd-day: 60; } 100% { --wsd-day: 0; } }
@keyframes wsdDayShow { 0%, 40% { opacity: 0; } 44%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.wsd-track { position: relative; height: 110px; margin: 0 64px; }
.wsd-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--wi-ink-1) 16%, transparent);
  transform-origin: left center; animation: wsdDraw var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes wsdDraw {
  0%, 29% { transform: scaleX(0); opacity: 1; }
  37%, 94% { transform: scaleX(1); opacity: 1; }
  99% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
.wsd-fill {
  position: absolute; left: 0; right: 0; top: 54px; height: 2px; border-radius: 1px; background: var(--wi-brand);
  transform-origin: left center; animation: wsdFill var(--wsd-cycle) linear infinite;
}
@keyframes wsdFill {
  0%, 44% { transform: scaleX(0); opacity: 1; }
  70%, 94% { transform: scaleX(1); opacity: 1; }
  99% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}
.wsd-tick {
  position: absolute; top: 50px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px;
  background: color-mix(in srgb, var(--wi-ink-1) 26%, transparent); transform-origin: center;
  animation: wsdTick var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes wsdTick { 0%, 33% { transform: scaleY(0); opacity: 0; } 37%, 94% { transform: scaleY(1); opacity: 1; } 99%, 100% { transform: scaleY(1); opacity: 0; } }
.wsd-run { position: absolute; left: 0; right: 0; top: 47px; height: 16px; animation: wsdRun var(--wsd-cycle) linear infinite; }
@keyframes wsdRun {
  0%, 44% { transform: translateX(-100%); opacity: 0; }
  44.5% { transform: translateX(-99.04%); opacity: 1; }
  70%, 94% { transform: translateX(0); opacity: 1; }
  98%, 100% { transform: translateX(0); opacity: 0; }
}
.wsd-head {
  position: absolute; right: -8px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--wi-bg-1);
  border: 2px solid var(--wi-brand); box-sizing: border-box; box-shadow: 0 0 0 5px var(--wi-brand-soft);
}
.wsd-ev {
  position: absolute; display: grid; gap: 1px; padding: 5px 9px; border-radius: 8px; white-space: nowrap;
  background: var(--wi-bg-1); border: 1px solid var(--wi-line);
  box-shadow: 0 6px 14px -12px color-mix(in srgb, var(--wi-ink-1) 45%, transparent);
  --ex: -50%; transform: translateX(var(--ex)); opacity: 0;
}
.wsd-ev b { font: 600 11.5px/1.25 var(--font-ui, Inter, sans-serif); color: var(--wi-ink-1); }
.wsd-ev small { font: 500 10.5px/1.2 var(--wi-mono); color: var(--wi-ink-3); }
.wsd-ev.is-up { bottom: 66px; }
.wsd-ev.is-down { top: 66px; }
.wsd-ev.is-crit { border-color: color-mix(in srgb, var(--wi-crit) 55%, var(--wi-line)); }
.wsd-ev.is-crit b { color: var(--wi-crit); }
.wsd-e1 { animation: wsdE1 var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite; }
.wsd-e2 { animation: wsdE2 var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite; }
.wsd-e3 { animation: wsdE3 var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite; }
.wsd-e4 { animation: wsdE4 var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes wsdE1 { 0%, 44% { opacity: 0; transform: translate(var(--ex), 5px) scale(.94); } 46.5%, 94% { opacity: 1; transform: translate(var(--ex), 0) scale(1); } 98%, 100% { opacity: 0; transform: translate(var(--ex), 0) scale(1); } }
@keyframes wsdE2 { 0%, 57% { opacity: 0; transform: translate(var(--ex), -5px) scale(.94); } 59.5%, 94% { opacity: 1; transform: translate(var(--ex), 0) scale(1); } 98%, 100% { opacity: 0; transform: translate(var(--ex), 0) scale(1); } }
@keyframes wsdE3 { 0%, 63.5% { opacity: 0; transform: translate(var(--ex), 5px) scale(.94); } 66%, 94% { opacity: 1; transform: translate(var(--ex), 0) scale(1); } 98%, 100% { opacity: 0; transform: translate(var(--ex), 0) scale(1); } }
@keyframes wsdE4 { 0%, 70% { opacity: 0; transform: translate(var(--ex), -5px) scale(.94); } 72.5%, 94% { opacity: 1; transform: translate(var(--ex), 0) scale(1); } 98%, 100% { opacity: 0; transform: translate(var(--ex), 0) scale(1); } }
/* the event that decides, once reached: one ring that widens and lets go */
.wsd-e4::after {
  content: ""; position: absolute; inset: -1px; border-radius: 8px; border: 1.5px solid var(--wi-crit); pointer-events: none;
  animation: wsdRing var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes wsdRing { 0%, 72% { transform: scale(1); opacity: 0; } 73% { transform: scale(1); opacity: .7; } 84%, 100% { transform: scale(1.35, 1.7); opacity: 0; } }
.wsd-verdict {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-self: start; padding: 7px 12px 7px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--wi-crit) 9%, var(--wi-bg-1)); border: 1px solid color-mix(in srgb, var(--wi-crit) 30%, var(--wi-line));
  font: 500 12.5px/1.3 var(--font-ui, Inter, sans-serif); color: var(--wi-ink-1);
  animation: wsdVerdict var(--wsd-cycle) cubic-bezier(.22, 1, .36, 1) infinite;
}
.wsd-vd { padding: 2px 8px; border-radius: 999px; background: var(--wi-crit); color: var(--on-brand, #fff); font-weight: 600; font-size: 11.5px; }
.wsd-vt b { font-family: var(--wi-mono); font-size: 12px; color: var(--wi-crit); }
@keyframes wsdVerdict { 0%, 75% { opacity: 0; transform: translateY(6px); } 78%, 94% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(0); } }

.wi-soon-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.wi-soon-foot p { margin: 0; font: 14px/1.5 var(--font-ui, Inter, sans-serif); color: var(--wi-ink-2); }
.wi-soon-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* a phone: the steps two by two, the calendar alone (the contract is the pages' own), the labels kept inside the track */
@container (max-width: 600px) {
  .wi-soon-card { padding: 20px 16px 18px; border-radius: 14px; }
  .wi-soon-h { font-size: 24px; }
  .wsd { padding: 14px 12px 16px; }
  .wsd-q { align-items: flex-start; }
  .wsd-q-k { margin-top: 3px; }
  .wsd-q-t { white-space: normal; }
  .wsd-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .wsd-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wsd-doc { display: none; }
  .wsd-track { margin: 0 6px; }
  .wsd-ev { padding: 4px 7px; }
  .wsd-ev b { font-size: 10.5px; }
  .wsd-ev small { display: none; }
  /* the first and the last held to the track's ends, so no label hangs past the card */
  .wsd-e1 { --ex: 0%; }
  .wsd-e4 { --ex: -100%; }
  .wsd-ev.is-up { bottom: 64px; }
  .wsd-ev.is-down { top: 64px; }
  /* three events on a phone: interest is left out, and the end of the contract rises above the track, clear of the late payment */
  .wsd-e3 { display: none; }
  .wsd-e4.is-down { top: auto; bottom: 64px; }
  .wsd-st { align-items: flex-start; }
  .wsd-st span { white-space: normal; overflow: visible; }
}
@media (max-width: 600px) { .wi-soon { padding: 16px 12px 40px; } }
@media print { .wsd, .wsd *, .wsd *::before, .wsd *::after, .wi-soon-pill i::after { animation: none !important; } }