@charset "utf-8";
/* ============================================================================
   STRATAMIZE — "THE LIVE READOUT" · SURFACES + DATA-VIZ  (surfaces-viz.css)
   ----------------------------------------------------------------------------
   Two jobs, one system, proven across BOTH themes:

   A) THE OPERATOR INSTRUMENT KIT (reads best in [data-theme="dark"])
      • Stat / KPI tiles — the panel that shows the state of the money
      • A lightweight, dependency-free CSS+SVG data-viz kit:
        sparkline · horizontal bar chart · micro column bars · donut · funnel
      Money figures are mono + tabular-nums and never reflow. Value is shown
      moving/settling (scaleX/opacity only — compositor-safe). Mint is the single
      live signal: one rail, one live dot, one active series per viewport.

   B) THE CUSTOMER SURFACES (read best in [data-theme="light"])
      • Invoice document · Checkout / payment form (card + ACH) · Receipt
      The Dual-Read Rule: each lands for a risk underwriter (settlement, MID,
      audit trail, secured) AND a paying customer (Total due, Paid, your receipt).

   This file is the canonical, detailed home for these components. It also owns
   the panel/card surface (.panel*) — the raised hairline container the operator
   screens compose into. The compact .kpi tile lives in data.css; the richer
   .stat tile + the .viz-* kit live HERE. Every component class is defined in
   exactly ONE slice — there are no duplicate stubs in elements.css anymore — so
   they compose cleanly and never collide, in any load order.

   RULES OBEYED
     • Tokens only — no hex literals, no new global --vars (locals are --_scoped).
       Inline style="" carries geometry only (percentages), colors stay tokens.
     • Mint rationed: one signal-rail / one live dot / one active underline.
     • State double-encoded (shape + color): ▲ up / ▼ down / – flat, paid stamp.
     • Every interactive element has hover / focus-visible / active and honors
       prefers-reduced-motion. Animations are transform/opacity only.

   Load order: tokens.css → elements.css → actions-forms.css → data.css → THIS
   MAP
     0  PANELS / CARDS (raised hairline container + signal-rail variant)
     1  STAT TILES (grid, tile, label, value, delta, live-rail, spark slot)
     2  data-viz scaffolding (figure frame, caption, legend, axis)
     3  SPARKLINE (inline SVG: area + line + live dot)
     4  HORIZONTAL BAR CHART (scaleX reveal, value lock)
     5  MICRO COLUMN BARS (KPI inline sparkbars)
     6  DONUT (conic + mask; single-value + segmented)
     7  FUNNEL (tapered stages + conversion rate)
     8  INVOICE DOCUMENT (light customer doc, paid stamp)
     9  CHECKOUT / PAYMENT FORM (card + ACH, method toggle, secure)
    10  RECEIPT (narrow mono receipt, perforated edges)
    11  REDUCED MOTION
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════
   0 · PANELS / CARDS — the raised hairline container every screen composes into.
       Hairline structure over a lifted surface, never card-soup. The optional
       signal-rail left edge marks a LIVE/active panel (rationed, one per view).
   ════════════════════════════════════════════════════════════════════════ */
.panel{
  position:relative;
  background:var(--surface-raised);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:var(--s-6);
  box-shadow:var(--shadow-2);
}
/* flush variant — no lift, transparent fill (a bordered region, not a card) */
.panel--flush{box-shadow:none;background:transparent;border-color:var(--hairline)}
/* a panel header strip — title + trailing meta, hairline-ruled */
.panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  margin-bottom:var(--s-5);padding-bottom:var(--s-3);
  border-bottom:1px solid var(--hairline);
}
.panel-title{font:600 var(--fs-h4)/1.2 var(--font-display);color:var(--ink)}
/* signal-rail panel — the lit left edge marks an active/live surface */
.panel--rail{padding-inline-start:calc(var(--s-6) + var(--rail-w))}
.panel--rail::before{
  content:"";position:absolute;inset-block:var(--s-5);inset-inline-start:0;
  width:var(--rail-w);background:var(--accent);border-radius:var(--r-full);
}

/* ════════════════════════════════════════════════════════════════════════
   1 · STAT TILES — the instrument panel cell
   ════════════════════════════════════════════════════════════════════════ */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--grid-gap);
}

/* the tile — hairline structure, sunken floor, no card-soup; a top hairline
   keyline that can be lit by the accent/status to flag a panel's mode */
.stat{
  position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-5);
  background:var(--surface-raised);
  border:1px solid var(--hairline);
  border-top:2px solid var(--hairline-strong);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
/* eyebrow — tracked uppercase label (the instrument's name) */
.stat-label{
  display:flex;align-items:center;gap:var(--s-2);
  font:600 var(--fs-kicker)/1 var(--font-text);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);
  color:var(--ink-3);
}
/* the figure — money/count is mono + tabular so it never dances on update */
.stat-value{
  display:flex;align-items:baseline;gap:var(--s-2);
  font:500 var(--fs-num-m)/1 var(--font-mono);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);
  color:var(--ink);
}
.stat-value .stat-cur{font-size:.6em;color:var(--ink-3);font-weight:500} /* $ prefix */
.stat-value .stat-unit{font:500 var(--fs-meta)/1 var(--font-mono);color:var(--ink-4)} /* bps / % / ms */

/* delta — double-encoded shape+color, mono, vs a quiet baseline note */
.stat-foot{display:flex;align-items:center;gap:var(--s-3);margin-top:auto}
.stat-delta{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font:500 var(--fs-meta)/1 var(--font-mono);font-variant-numeric:tabular-nums;
}
.stat-delta::before{content:"";width:0;height:0;flex:none}
.stat-delta--up{color:var(--success)}
.stat-delta--up::before{border-inline:4px solid transparent;border-bottom:6px solid currentColor}  /* ▲ */
.stat-delta--down{color:var(--danger)}
.stat-delta--down::before{border-inline:4px solid transparent;border-top:6px solid currentColor}    /* ▼ */
.stat-delta--flat{color:var(--ink-4)}
.stat-delta--flat::before{width:8px;height:2px;border-radius:var(--r-full);background:currentColor}  /* – */
.stat-base{font:400 var(--fs-meta)/1 var(--font-text);color:var(--ink-4)}

/* a slot for an inline sparkline / sparkbars at the foot of the tile */
.stat-spark{margin-top:var(--s-1);height:34px}

/* live tile — the signal-rail left edge + the lit top keyline = updating now.
   one per view, per the rationing rule. pair with aria-live in markup. */
.stat--live{border-top-color:var(--accent)}
.stat--live::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:var(--rail-w);background:var(--accent);
}
.stat--warn{border-top-color:var(--warn)}
.stat--danger{border-top-color:var(--danger)}
.stat--info{border-top-color:var(--info)}

/* interactive tile (drills into a detail view) — lift + focus halo */
a.stat,button.stat,.stat--link{
  cursor:pointer;text-align:left;width:100%;
  -webkit-appearance:none;appearance:none;
  transition:transform var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out);
}
a.stat:hover,button.stat:hover,.stat--link:hover{
  transform:translateY(-2px);
  border-color:var(--hairline-strong);
  box-shadow:var(--shadow-2);
}
a.stat:active,button.stat:active,.stat--link:active{transform:translateY(0)}
a.stat:focus-visible,button.stat:focus-visible,.stat--link:focus-visible{
  outline:none;box-shadow:var(--ring);
}

/* the live dot — the single reserved status pip (shape+color) */
.live-pip{
  display:inline-flex;width:8px;height:8px;flex:none;border-radius:var(--r-full);
  background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:live-pip-pulse var(--blink) var(--ease-out) infinite;
}
@keyframes live-pip-pulse{
  0%{box-shadow:0 0 0 0 var(--accent-glow)}
  70%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ════════════════════════════════════════════════════════════════════════
   2 · DATA-VIZ SCAFFOLDING — a framed figure with caption + legend
   ════════════════════════════════════════════════════════════════════════ */
.viz{
  position:relative;display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-5);
  background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-3);
  box-shadow:var(--shadow-1);
}
.viz-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.viz-title{
  font:600 var(--fs-meta)/1 var(--font-text);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--ink-3);
}
.viz-note{font:500 var(--fs-meta)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-4)}

/* legend — shape-encoded swatches so series survive color-vision deficiency */
.viz-legend{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
.viz-legend-item{display:inline-flex;align-items:center;gap:var(--s-2);
  font:500 var(--fs-meta)/1 var(--font-text);color:var(--ink-3)}
.viz-legend-item::before{content:"";width:10px;height:10px;flex:none;border-radius:var(--r-1)}
.viz-legend--accent::before{background:var(--accent)}
.viz-legend--info::before{background:var(--info);transform:rotate(45deg)}            /* ◆ */
.viz-legend--warn::before{background:var(--warn);clip-path:polygon(50% 0,100% 100%,0 100%)} /* ▲ */
.viz-legend--muted::before{background:var(--ink-4)}

/* ════════════════════════════════════════════════════════════════════════
   3 · SPARKLINE — inline SVG, no library. Area wash under a mint line + a
       pulsing live dot at the latest reading. Stretches to its box; the SVG
       carries vector-effect:non-scaling-stroke so the line stays hairline.
       Markup:
         <svg class="spark" viewBox="0 0 100 32" preserveAspectRatio="none">
           <polygon class="spark-area" points="…"/>
           <polyline class="spark-line" points="…"/>
           <circle class="spark-dot" cx="…" cy="…" r="2.2"/>
         </svg>
   ════════════════════════════════════════════════════════════════════════ */
.spark{display:block;width:100%;height:100%;overflow:visible}
.spark-line{
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.spark-area{fill:var(--accent-wash);stroke:none}
.spark-dot{
  fill:var(--accent);stroke:var(--surface-raised);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  animation:spark-pulse var(--blink) var(--ease-out) infinite;
}
@keyframes spark-pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* trend tints — a falling series reads danger (color + the data shape itself) */
.spark--down .spark-line,.spark--down .spark-dot{stroke:var(--danger);fill:var(--danger)}
.spark--down .spark-area{fill:var(--danger-wash)}
.spark--muted .spark-line{stroke:var(--ink-4)}
.spark--muted .spark-area{fill:color-mix(in oklab,var(--ink-4) 14%,transparent)}
.spark--muted .spark-dot{display:none}

/* ════════════════════════════════════════════════════════════════════════
   4 · HORIZONTAL BAR CHART — ranked categories (top MIDs, channels, etc).
       Fill is a full-width bar SCALED on X (compositor-safe) from inline
       style="--_v:.72". The reveal animates scaleX from 0; value never moves.
   ════════════════════════════════════════════════════════════════════════ */
.barchart{display:flex;flex-direction:column;gap:var(--s-3)}
.bar{
  display:grid;
  grid-template-columns:minmax(6rem,9rem) 1fr minmax(3.5rem,auto);
  align-items:center;gap:var(--s-3);
  font-size:var(--fs-sm);
}
.bar-name{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{
  position:relative;height:10px;
  background:var(--surface-sunken);
  border-radius:var(--r-full);overflow:hidden;
  box-shadow:var(--shadow-1);
}
.bar-fill{
  position:absolute;inset:0;
  transform:scaleX(var(--_v,0));transform-origin:left center;
  background:var(--accent);border-radius:var(--r-full);
  animation:bar-grow var(--dur-4) var(--ease-out) both;
}
@keyframes bar-grow{from{transform:scaleX(0)}to{transform:scaleX(var(--_v,0))}}
.bar-num{
  text-align:right;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;
}
/* status-tinted bars — keep mint rationed; only the "live"/leader bar is mint */
.bar--info .bar-fill{background:var(--info)}
.bar--warn .bar-fill{background:var(--warn)}
.bar--danger .bar-fill{background:var(--danger)}
.bar--muted .bar-fill{background:var(--ink-4)}
/* the one leader/live bar carries the signal */
.bar--live .bar-track{box-shadow:var(--shadow-1),var(--glow-accent)}

/* ════════════════════════════════════════════════════════════════════════
   5 · MICRO COLUMN BARS — tiny vertical sparkbars for a KPI tile foot.
       Each column height set structurally via style="--_h:60%"; reveal is a
       scaleY from the baseline (transform-only). The latest column lights mint.
   ════════════════════════════════════════════════════════════════════════ */
.sparkbars{display:flex;align-items:flex-end;gap:3px;height:100%;width:100%}
.sparkbars > i{
  display:block;flex:1;min-width:2px;
  height:var(--_h,30%);
  background:var(--hairline-strong);border-radius:var(--r-1);
  transform:scaleY(1);transform-origin:bottom;
  animation:col-grow var(--dur-3) var(--ease-out) both;
}
.sparkbars > i:last-child{background:var(--accent)} /* latest reading = live */
@keyframes col-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ════════════════════════════════════════════════════════════════════════
   6 · DONUT — conic-gradient ring, masked hollow, mono center readout.
       Single-value: style="--_pct:68". Segmented: add .donut--seg + inline
       cumulative stops --_p1/--_p2/--_p3 (colors stay semantic tokens).
   ════════════════════════════════════════════════════════════════════════ */
.donut{
  position:relative;display:grid;place-items:center;
  width:var(--_size,132px);aspect-ratio:1;flex:none;
}
.donut::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--accent) calc(var(--_pct,66) * 1%),
    var(--surface-sunken) 0);
  /* punch the centre to a ring (mask alpha — black/transparent, not palette) */
  -webkit-mask:radial-gradient(closest-side,transparent 64%,#000 65%);
          mask:radial-gradient(closest-side,transparent 64%,#000 65%);
  animation:donut-in var(--dur-4) var(--ease-out) both;
}
@keyframes donut-in{from{opacity:0;transform:rotate(-12deg) scale(.96)}to{opacity:1;transform:none}}
/* segmented variant — cumulative stops; tail fills with the track colour */
.donut--seg::before{
  background:conic-gradient(from -90deg,
    var(--success) 0 calc(var(--_p1,40) * 1%),
    var(--info)    0 calc(var(--_p2,70) * 1%),
    var(--warn)    0 calc(var(--_p3,88) * 1%),
    var(--surface-sunken) 0);
}
.donut-center{position:relative;text-align:center;display:flex;flex-direction:column;gap:2px}
.donut-num{font:500 var(--fs-num-s)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.donut-cap{font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-caps);color:var(--ink-4)}

/* ════════════════════════════════════════════════════════════════════════
   7 · FUNNEL — stage drop-off (visits → checkout → authorized → settled).
       Each stage: a head row (label + conversion rate) over a tapered fill
       whose width is set structurally via style="--_w:64%". The fill reveals
       with a scaleX from centre; value stays mono + locked.
   ════════════════════════════════════════════════════════════════════════ */
.funnel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.funnel-stage{display:flex;flex-direction:column;gap:var(--s-1)}
.funnel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.funnel-name{font:500 var(--fs-sm)/1 var(--font-text);color:var(--ink-2)}
.funnel-rate{font:500 var(--fs-meta)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-4)}
.funnel-bar{
  width:var(--_w,100%);min-width:0;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:38px;padding-inline:var(--s-3);
  background:var(--accent-wash);
  border:1px solid var(--accent-edge);
  border-radius:var(--r-2);
  transform:scaleX(1);transform-origin:center;
  animation:funnel-in var(--dur-4) var(--ease-out) both;
}
@keyframes funnel-in{from{transform:scaleX(.4);opacity:0}to{transform:scaleX(1);opacity:1}}
.funnel-val{font:600 var(--fs-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.funnel-sub{font:500 var(--fs-meta)/1 var(--font-text);color:var(--ink-3)}
/* the converted (final, settled) stage lights mint solid — the payoff */
.funnel-stage--final .funnel-bar{
  background:var(--accent);border-color:var(--accent);
}
.funnel-stage--final .funnel-val,
.funnel-stage--final .funnel-sub{color:var(--on-accent-solid)}
/* a dropped/lost stage reads neutral, never alarmist unless flagged */
.funnel-stage--drop .funnel-bar{background:var(--surface-sunken);border-color:var(--hairline)}
.funnel-stage--drop .funnel-val{color:var(--ink-2)}

/* ════════════════════════════════════════════════════════════════════════
   8 · INVOICE DOCUMENT — the customer-light flagship. Lands as a paper
       statement (customer: Total due / Paid) AND an auditable record
       (operator: invoice #, MID, terms). Token-driven → on-brand in both themes.
   ════════════════════════════════════════════════════════════════════════ */
.invoice{
  position:relative;max-width:var(--measure-max);margin-inline:auto;
  background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);overflow:hidden;
}
/* the powered signal-rail across the top — the "this is a STRATAMIZE doc" tell */
.invoice::before{content:"";position:absolute;inset-inline:0;top:0;height:var(--rail-w);background:var(--accent)}

.invoice-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
  padding:var(--s-8) var(--s-8) var(--s-6);
  border-bottom:1px solid var(--hairline);
}
.invoice-brand{display:flex;flex-direction:column;gap:var(--s-2)}
/* the wordmark + live caret lockup, inline so the mark stays CSS */
.invoice-wordmark{
  display:inline-flex;align-items:center;
  font:600 var(--fs-h4)/1 var(--font-display);
  letter-spacing:var(--tracking-wordmark);text-transform:uppercase;color:var(--ink);
}
.invoice-wordmark .caret{
  display:inline-block;width:6px;height:1em;margin-inline-start:3px;
  background:var(--accent);
  animation:caret-blink var(--blink) step-end infinite;
}
.invoice-issuer{font:400 var(--fs-meta)/1.5 var(--font-text);color:var(--ink-4)}
.invoice-issuer .mono{font-family:var(--font-mono)}

/* the doc identity block — INVOICE kind + number + status, right-aligned */
.invoice-id{text-align:right;display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-end}
.invoice-kind{font:700 var(--fs-h3)/.9 var(--font-display);text-transform:uppercase;
  letter-spacing:var(--tracking-tight);color:var(--ink)}
.invoice-no{font:500 var(--fs-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}

/* parties + meta grid */
.invoice-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-6);
  padding:var(--s-6) var(--s-8);
  border-bottom:1px solid var(--hairline);
}
.invoice-party-label{font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-3);margin-bottom:var(--s-2)}
.invoice-party{font:400 var(--fs-sm)/1.55 var(--font-text);color:var(--ink-2)}
.invoice-party strong{color:var(--ink);font-weight:600}
.invoice-party .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}

/* line items — editorial spacing, money mono + right-locked */
.invoice-items{width:100%;border-collapse:collapse}
.invoice-items thead th{
  padding:var(--s-3) var(--s-8);text-align:left;
  font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-caps);color:var(--ink-3);
  border-bottom:1px solid var(--hairline-strong);
  background:var(--surface-header);
}
.invoice-items th.amt,.invoice-items td.amt,
.invoice-items th.qty,.invoice-items td.qty{text-align:right}
.invoice-items tbody td{
  padding:var(--s-4) var(--s-8);
  border-bottom:1px solid var(--hairline-faint);
  color:var(--ink-2);vertical-align:top;font-size:var(--fs-sm);
}
.invoice-items td.desc strong{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-base)}
.invoice-items td.desc span{color:var(--ink-4);font-size:var(--fs-meta)}
.invoice-items td.amt,.invoice-items td.qty{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;
}

/* totals — a right-aligned ledger close; the grand total is emphatic mono */
.invoice-foot{
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-5);
  padding:var(--s-6) var(--s-8) var(--s-8);
}
.invoice-totals{width:min(320px,100%);display:flex;flex-direction:column}
.invoice-totals .row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-6);
  padding:var(--s-2) 0;
}
.invoice-totals .row .k{font:500 var(--fs-sm)/1.3 var(--font-text);color:var(--ink-3)}
.invoice-totals .row .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.invoice-totals .row--total{
  margin-top:var(--s-2);padding-top:var(--s-3);
  border-top:1px solid var(--hairline-strong);
}
.invoice-totals .row--total .k{font:600 var(--fs-base)/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--ink)}
.invoice-totals .row--total .v{font-size:var(--fs-num-s);font-weight:600;color:var(--ink)}

/* a "due" callout sits beside the stamp area */
.invoice-due{display:flex;align-items:center;gap:var(--s-4);align-self:stretch;justify-content:space-between;flex-wrap:wrap}
.invoice-due-amt{display:flex;flex-direction:column;gap:2px}
.invoice-due-amt .lbl{font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-3)}
.invoice-due-amt .amt{font:500 var(--fs-num-m)/1 var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-tight);color:var(--ink)}

/* THE PAID STAMP — mint outline, settles into place; the customer's reassurance
   and the operator's settled-state in one mark. */
.paid-stamp{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);
  font:700 var(--fs-sm)/1 var(--font-display);text-transform:uppercase;
  letter-spacing:0.14em;color:var(--accent-text);
  border:2px solid var(--accent);border-radius:var(--r-2);
  background:var(--accent-wash);
  transform:rotate(-4deg);
  animation:stamp-settle var(--dur-3) var(--ease-snap) both;
}
.paid-stamp::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--accent)}
@keyframes stamp-settle{
  from{opacity:0;transform:rotate(-4deg) scale(1.4)}
  to{opacity:1;transform:rotate(-4deg) scale(1)}
}
.paid-stamp--danger{color:var(--danger);border-color:var(--danger);background:var(--danger-wash)}
.paid-stamp--danger::before{background:var(--danger);
  clip-path:polygon(20% 0,0 20%,30% 50%,0 80%,20% 100%,50% 70%,80% 100%,100% 80%,70% 50%,100% 20%,80% 0,50% 30%)} /* ✕ overdue */
.paid-stamp--warn{color:var(--warn);border-color:var(--warn);background:var(--warn-wash);transform:rotate(0)} /* pending */

/* notes + the dual-read trust strip */
.invoice-notes{
  padding:var(--s-6) var(--s-8);border-top:1px solid var(--hairline);
  font:400 var(--fs-sm)/var(--leading-body) var(--font-text);color:var(--ink-3);
}
.invoice-notes .lbl{display:block;font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-4);margin-bottom:var(--s-2)}
.invoice-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-8);
  border-top:1px solid var(--hairline);background:var(--surface-header);
  font:500 var(--fs-meta)/1 var(--font-text);color:var(--ink-4);
}
.invoice-trust .mono{font-family:var(--font-mono);color:var(--ink-3)}

/* the secured lock — small padlock drawn from borders, no asset */
.secure-lock{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--ink-3);
  font:500 var(--fs-meta)/1 var(--font-text)}
.secure-lock::before{content:"";width:11px;height:13px;flex:none;
  border:1.5px solid var(--success);border-radius:0 0 2px 2px;
  box-shadow:inset 0 3px 0 -1.5px transparent;position:relative;margin-top:5px}
.secure-lock::after{content:"";width:7px;height:7px;border:1.5px solid var(--success);
  border-bottom:none;border-radius:6px 6px 0 0;margin-inline-start:-9px;align-self:flex-start;margin-top:1px}

/* ════════════════════════════════════════════════════════════════════════
   9 · CHECKOUT / PAYMENT FORM — card + ACH. Reuses .field/.input/.label/.btn
       from actions-forms.css; adds the order summary, the method toggle, the
       brand-glyph card row, and the secured footer. Dual-read: "Total due" for
       the customer, MID/secured/PCI for the underwriter.
   ════════════════════════════════════════════════════════════════════════ */
.checkout{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);
  max-width:480px;margin-inline:auto;
  padding:var(--s-8);
  background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
}
/* split layout — order summary beside the form on wide viewports */
.checkout--split{max-width:920px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}
@media (max-width:768px){.checkout--split{grid-template-columns:minmax(0,1fr)}}

.checkout-head{display:flex;flex-direction:column;gap:var(--s-2)}
.checkout-eyebrow{font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-3)}
.checkout-merchant{font:600 var(--fs-h4)/1.1 var(--font-display);color:var(--ink)}

/* the amount — heroic mono total; never reflows on update */
.checkout-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) 0;border-block:1px solid var(--hairline);
}
.checkout-total .lbl{font:600 var(--fs-sm)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-caps);color:var(--ink-3)}
.checkout-total .amt{font:500 var(--fs-num-l)/1 var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-tight);color:var(--ink)}
.checkout-total .amt .cur{font-size:.5em;color:var(--ink-3);vertical-align:.35em;margin-inline-end:2px}

/* order summary lines */
.checkout-summary{display:flex;flex-direction:column;gap:var(--s-1);margin:0;padding:0;list-style:none}
.checkout-summary li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-2) 0;border-bottom:1px solid var(--hairline-faint);font-size:var(--fs-sm);color:var(--ink-2)}
.checkout-summary li:last-child{border-bottom:0}
.checkout-summary .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* METHOD TOGGLE — segmented radio cards (Card / Bank). Real radios drive
   :checked + :focus-within; the active card lights a mint rail + border. */
.pay-methods{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);
}
.pay-method{
  position:relative;display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--hairline);border-radius:var(--r-3);
  background:var(--surface-sunken);cursor:pointer;
  font:600 var(--fs-sm)/1 var(--font-text);color:var(--ink-2);
  transition:border-color var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out);
}
.pay-method input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pay-method::before{ /* the radio mark, shape-encoded */
  content:"";width:14px;height:14px;flex:none;border-radius:var(--r-full);
  border:1.5px solid var(--hairline-strong);
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.pay-method:hover{border-color:var(--hairline-strong);color:var(--ink)}
.pay-method:has(input:checked){
  border-color:var(--accent-edge);background:var(--accent-wash);color:var(--ink);
}
.pay-method:has(input:checked)::before{
  border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent);
}
.pay-method:has(input:focus-visible){outline:none;box-shadow:var(--ring)}
.pay-method .ico{margin-inline-start:auto;font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-4)}

/* the brand-glyph rail beside the card-number field (Visa/MC/Amex marks drawn
   as tiny mono tags so we ship no raster card logos) */
.card-brands{display:inline-flex;align-items:center;gap:4px}
.card-brands i{
  display:inline-flex;align-items:center;justify-content:center;
  height:16px;padding-inline:5px;font-style:normal;
  font:600 9px/1 var(--font-mono);letter-spacing:.04em;
  color:var(--ink-3);background:var(--surface-sunken);
  border:1px solid var(--hairline);border-radius:var(--r-1);
}
.card-brands i[data-on]{color:var(--accent-text);border-color:var(--accent-edge)} /* detected brand lights */

/* field groupings for the card / ACH blocks */
.pay-fields{display:flex;flex-direction:column;gap:var(--s-4)}
.pay-row-3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-3)}
.pay-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media (max-width:480px){.pay-row-3{grid-template-columns:1fr 1fr}}
/* a panel that swaps in/out by method; hidden ones collapse */
.pay-panel[hidden]{display:none}

/* the pay action — full width, the amount restated so the click is unambiguous */
.pay-submit{width:100%;justify-content:center}
.pay-submit .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin-inline-start:var(--s-1)}

/* secured footer — the dual-read trust line under the button */
.pay-secure{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-3);
  font:500 var(--fs-meta)/1.4 var(--font-text);color:var(--ink-4);text-align:center;
}
.pay-secure .mono{font-family:var(--font-mono);color:var(--ink-3)}

/* ════════════════════════════════════════════════════════════════════════
   10 · RECEIPT — the narrow, mono-forward confirmation. Reads like a terminal
        slip; perforated top/bottom edges via a scalloped mask (no asset).
   ════════════════════════════════════════════════════════════════════════ */
.receipt{
  position:relative;width:min(340px,100%);margin-inline:auto;
  padding:var(--s-8) var(--s-6) var(--s-6);
  background:var(--surface-raised);
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-2);
  /* scalloped perforation top + bottom */
  -webkit-mask:
    radial-gradient(7px at 7px 0,transparent 6px,#000 6.5px) repeat-x top/14px 14px,
    radial-gradient(7px at 7px 100%,transparent 6px,#000 6.5px) repeat-x bottom/14px 14px,
    linear-gradient(#000,#000) center/100% calc(100% - 26px) no-repeat;
          mask:
    radial-gradient(7px at 7px 0,transparent 6px,#000 6.5px) repeat-x top/14px 14px,
    radial-gradient(7px at 7px 100%,transparent 6px,#000 6.5px) repeat-x bottom/14px 14px,
    linear-gradient(#000,#000) center/100% calc(100% - 26px) no-repeat;
}
.receipt-head{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);text-align:center;
  padding-bottom:var(--s-4);border-bottom:1px dashed var(--hairline-strong)}
.receipt-wordmark{display:inline-flex;align-items:center;font:600 var(--fs-base)/1 var(--font-display);
  text-transform:uppercase;letter-spacing:var(--tracking-wordmark);color:var(--ink)}
.receipt-wordmark .caret{display:inline-block;width:5px;height:1em;margin-inline-start:3px;
  background:var(--accent);animation:caret-blink var(--blink) step-end infinite}
.receipt-status{display:inline-flex;align-items:center;gap:var(--s-2);
  font:700 var(--fs-meta)/1 var(--font-display);text-transform:uppercase;letter-spacing:0.14em;
  color:var(--accent-text)}
.receipt-status::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--accent)}
.receipt-amt{font:500 var(--fs-num-m)/1 var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-tight);color:var(--ink)}

.receipt-lines{display:flex;flex-direction:column;gap:0;padding:var(--s-4) 0;
  border-bottom:1px dashed var(--hairline-strong)}
.receipt-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-1) 0;font-size:var(--fs-sm)}
.receipt-line .k{color:var(--ink-3)}
.receipt-line .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.receipt-line--total{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--hairline-strong)}
.receipt-line--total .k{font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:var(--tracking-caps);
  font-size:var(--fs-meta)}
.receipt-line--total .v{font-size:var(--fs-num-s);font-weight:600;color:var(--ink)}

.receipt-foot{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  padding-top:var(--s-4);text-align:center}
.receipt-meta{font:400 var(--fs-meta)/1.5 var(--font-mono);color:var(--ink-4);font-variant-numeric:tabular-nums}
.receipt-thanks{font:400 var(--fs-sm)/1.4 var(--font-text);color:var(--ink-3)}

/* ════════════════════════════════════════════════════════════════════════
   11 · REDUCED MOTION — zero the reveals + the live pulses, no loss of meaning
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .stat,a.stat,button.stat,.stat--link,.pay-method,.card-brands i{transition-duration:1ms !important}
  .live-pip,.spark-dot{animation:none}
  .bar-fill,.sparkbars > i,.donut::before,.funnel-bar,.paid-stamp{animation:none}
  .bar-fill{transform:scaleX(var(--_v,0))}
  .sparkbars > i{transform:scaleY(1)}
  .funnel-bar{transform:scaleX(1)}
  .donut::before{opacity:1;transform:none}
  .paid-stamp{transform:rotate(-4deg)}
  .paid-stamp--warn{transform:rotate(0)}
  .invoice-wordmark .caret,.receipt-wordmark .caret{animation:none;opacity:1}
}