/* splash-ui.css - additions of the SPLASH design on top of cashflow-ui.css (spec 12 12.3.1).
 * Source of every value: docs/splash2/design/claude-design-v2/prototype/SPLASH 2.dc.html
 * (global <style>, seg.js and the inline styles of the locally built components).
 * Tokens only - no colour literals (CI lint). */

/* ---- Prototype page base (global <style> of the prototype) ---- */
body { margin: 0; background: var(--paper-3); color: var(--ink); font-family: var(--font-family-base); font-size: var(--t-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; white-space: nowrap; }

/* ---- Animations (ANIMATIONS.md, copied exactly from the prototype) ---- */
@keyframes spPulse { 0% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.9); opacity: 0 } 100% { transform: scale(1); opacity: 0 } }
@keyframes spBar { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } }
@keyframes spIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.sp-in { animation: spIn .15s ease-out; }
.sp-in-panel { animation: spIn .18s ease-out; }
.sp-in-toast { animation: spIn .25s ease-out; }

/* Reduce motion: the OS setting and Preferences -> Appearance (class on <html>). Final states
 * stay visible: every animated element is styled in its end state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.sp-reduce-motion *, .sp-reduce-motion *::before, .sp-reduce-motion *::after { animation: none !important; transition: none !important; }

/* ---- SegmentedControl = SplashSeg (seg.js, CD-69) ---- */
.sp-seg { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; height: 32px; box-sizing: border-box; background: var(--paper-3, var(--paper-2)); border: 1px solid var(--line-2); max-width: 100%; width: auto; }
.sp-seg.sp-sm { height: 28px; }
.sp-seg.sp-block { width: 100%; }
.sp-seg-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid transparent; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 500; font-family: inherit; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .12s, color .12s; outline-offset: 1px; }
.sp-seg.sp-block .sp-seg-btn { flex: 1 1 0; }
.sp-seg.sp-sm .sp-seg-btn { padding: 0 10px; font-size: 12px; }
.sp-seg-btn:hover:not(.sp-on) { background: color-mix(in oklch, var(--paper) 55%, transparent); }
.sp-seg-btn.sp-on { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-weight: 600; cursor: default; box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 12%, transparent); }
.sp-seg-badge { font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.sp-seg-btn.sp-on .sp-seg-badge { color: var(--ink-3); }

/* ---- Field: required marker, hint, error (form fields of the prototype) ---- */
/* D-035: screens follow the prototype's form labels (regular weight, .05em), not the semibold
   CashflowUI Field label. */
.Input_field > .Input_label { font-size: var(--t-label); font-weight: normal; letter-spacing: .05em; }
.sp-field-req { color: var(--neg); }
.sp-field-hint { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.sp-field-error { font-size: 11.5px; color: var(--neg); line-height: 1.4; }
.Input_input[aria-invalid="true"], .Input_textarea[aria-invalid="true"] { outline: 1px solid var(--neg); outline-offset: 1px; }
.sp-textarea-count { align-self: flex-end; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-textarea-count.sp-over { color: var(--neg); }

/* ---- Confirm (inline styles of CashflowUI Confirm) ---- */
.sp-confirm { text-align: center; padding: 8px 4px; }
.sp-confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.sp-confirm-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 18px; }
.sp-confirm-desc.sp-gated { margin-bottom: 14px; }
.sp-confirm-check { display: flex; gap: 8px; justify-content: center; font-size: 12px; color: var(--ink-2); margin: 0 0 14px; }

/* ---- Square state marker with spPulse echo (prototype pulseEl) ---- */
.sp-dot { position: relative; display: block; flex-shrink: 0; }
.sp-dot > span { position: absolute; inset: 0; background: var(--sp-dot-color, var(--accent)); }
.sp-dot > .sp-dot-echo { animation: spPulse 1.6s ease-out infinite; }
.sp-dot-7 { width: 7px; height: 7px; }
.sp-dot-9 { width: 9px; height: 9px; }
.sp-dot-12 { width: 12px; height: 12px; }

/* Tone -> marker colour (dots, toasts); no inline styles because of the CSP (spec 12 12.8). */
.sp-tone-default { --sp-dot-color: var(--ink-3); }
.sp-tone-pos { --sp-dot-color: var(--pos); }
.sp-tone-neg { --sp-dot-color: var(--neg); }
.sp-tone-amber { --sp-dot-color: var(--amber); }
.sp-tone-accent { --sp-dot-color: var(--accent); }

/* ---- StatusDot states beyond on/off ---- */
.AdminUi_sdot.sp-sdot-warn { background: var(--amber); }
.AdminUi_sdot.sp-sdot-error { background: var(--neg); }
.AdminUi_sdot.sp-sdot-pulse { position: relative; }
.AdminUi_sdot.sp-sdot-pulse::after { content: ""; position: absolute; inset: 0; background: inherit; border-radius: inherit; animation: spPulse 1.6s ease-out infinite; }

/* ---- Wizard stepper: error step ---- */
.wiz-step.sp-err .wiz-step-n { background: var(--neg); border-color: var(--neg); color: var(--paper); }
.wiz-step.sp-err .wiz-step-l { color: var(--neg); }

/* ---- Signing stepper (SCR-053 step tiles) ---- */
.sp-sign-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sp-sign-step { padding: 14px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; background: var(--paper); --sp-step-color: transparent; --sp-step-ring: var(--line-strong); }
.sp-sign-step.sp-done { --sp-step-color: var(--pos); --sp-step-ring: var(--pos); }
.sp-sign-step.sp-current { background: var(--accent-soft); --sp-step-color: var(--accent); --sp-step-ring: var(--accent); }
.sp-sign-step.sp-failed { background: var(--paper-2); --sp-step-color: var(--neg); --sp-step-ring: var(--neg); }
.sp-sign-step.sp-stalled { background: var(--paper-2); --sp-step-color: var(--amber); --sp-step-ring: var(--amber); }
.sp-sign-head { display: flex; align-items: center; gap: 8px; }
.sp-sign-dot { width: 9px; height: 9px; background: var(--sp-step-color); border: 1px solid var(--sp-step-ring); }
.sp-sign-label { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.sp-done .sp-sign-label { color: var(--ink); }
.sp-current .sp-sign-label, .sp-failed .sp-sign-label, .sp-stalled .sp-sign-label { font-weight: 700; color: var(--ink); }
.sp-sign-sub { font-size: 11px; color: var(--ink-3); }
.sp-bar-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: var(--line); }
.sp-bar { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent); animation: spBar 1.3s ease-in-out infinite; }

/* ---- Banner (form / release / settings banners of the prototype) ---- */
.sp-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 14px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--line); animation: spIn .18s ease-out; }
.sp-banner.sp-error { background: var(--paper); border-color: var(--neg); }
.sp-banner.sp-warn { background: var(--amber-soft); border-color: var(--amber); }
.sp-banner.sp-info { background: var(--accent-soft); border-color: var(--accent); }
.sp-banner.sp-success { background: var(--paper); border-color: var(--pos); }
.sp-banner-title { color: var(--ink); }
.sp-banner.sp-error .sp-banner-title { color: var(--neg); }
.sp-banner.sp-success .sp-banner-title { color: var(--pos); }
.sp-banner-text { flex: 1 1 300px; }
.sp-banner-link { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12.5px; cursor: pointer; white-space: nowrap; }

/* ---- Empty / error state cards (list patterns) ---- */
.sp-state { background: var(--paper); border: 1px solid var(--line); padding: 36px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sp-state-title { font-weight: 700; font-size: 15px; }
.sp-state-text { color: var(--ink-2); }
.sp-skeleton-stack { background: var(--paper); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* ---- Toast (prototype toast; 4 s and spIn .25s per spec 12.3.3 / ANIMATIONS.md) ---- */
.sp-toast-host { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); }
.sp-toast { display: flex; align-items: center; gap: 14px; max-width: 460px; padding: 12px 16px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-toast); font-size: 12.5px; animation: spIn .25s ease-out; }
.sp-toast-dot { width: 8px; height: 8px; background: var(--sp-dot-color, var(--pos)); flex-shrink: 0; }
.sp-toast-text { line-height: 1.45; }
.sp-toast-action { background: none; border: 1px solid var(--ink-3); color: var(--paper); padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ---- Global tooltip for data-tip (prototype tipEl) ---- */
.sp-tip { position: fixed; z-index: 1000; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 5px 8px; box-shadow: var(--shadow-toast); white-space: nowrap; opacity: 0; transition: opacity .08s linear; font-family: var(--font-family-base); left: 0; top: 0; }

/* ---- WCAG 2.1 AA contrast (D-041 pkt 1; values in wcag-tokens.css, spec 17 OI-E10B-03) ----
   Buttons with white text on a light accent / danger fill in the dark theme and the user avatar
   (white on the light ink of the dark theme) get fills / text with >= 4.5:1. */
[data-theme=dark] .Button_var-primary { background: var(--accent-fill); border-color: var(--accent-fill); }
[data-theme=dark] .Button_var-primary:hover:not(:disabled) { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
[data-theme=dark] .Button_var-danger { background: var(--neg-fill); border-color: var(--neg-fill); }
[data-theme=dark] .SegmentedControl_on { background: var(--accent-fill); border-color: var(--accent-fill); }
.Section_uAvatar:not(.Section_uAvatarSvc) { color: var(--paper); }
/* Text for screen readers only (accessible names that keep the visible text first, axe rule
   label-content-name-mismatch; D-041 pkt 1). */
.sp-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* MultiFilter options without a nested checkbox (D-041 pkt 1): the checked box follows aria-selected
   with the look of `input:checked + .an-mf-box` of the CashflowUI bundle. */
.an-mf-opt[aria-selected="true"] .an-mf-box { background: var(--accent); border-color: var(--accent); }
.an-mf-opt[aria-selected="true"] .an-mf-box::after { content: "\2713"; position: absolute; inset: 0; color: var(--sp-on-accent); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }