/* ============================================================================
   STRATAMIZE — "THE LEDGER" · ACTIONS + FORMS  (actions-forms.css)
   ----------------------------------------------------------------------------
   The interactive layer of the global design system: every button variant and
   the complete form kit. Theme-agnostic — each value derives from a semantic
   token in tokens.css, so the SAME classes render the dark operator cockpit
   ([data-theme="dark"]) and the light customer paper ([data-theme="light"]).

   RULES OBEYED
     • Tokens only. No hex literals, no new --vars (locals are --_scoped).
     • Mint is the single live signal: focus ring, primary fill, checked state,
       active underline — never sprayed as decoration.
     • Money/IDs ride mono + tabular-nums via .input--mono.
     • Every interactive element has hover / focus-visible / active states and
       honors prefers-reduced-motion.
     • Motion is compositor-only (transform / opacity).

   Load order: tokens.css → actions-forms.css
   MAP
     1  buttons — base, variants, sizes, icon, loading, group
     2  form scaffold — fieldset, layout grid, field, label, hints/errors
     3  text controls — input, textarea, select, input affixes/groups
     4  choice controls — checkbox, radio, switch, segmented option cards
     5  validation states (invalid / valid)
     6  reduced-motion
   ============================================================================ */

/* ── 1 · BUTTONS ───────────────────────────────────────────────────────────── */
.btn{
  --_pad-y:var(--s-3);
  --_pad-x:var(--s-5);
  --_fs:var(--fs-base);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--_pad-y) var(--_pad-x);
  font:600 var(--_fs)/1 var(--font-text);
  letter-spacing:0.005em;
  color:var(--ink);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-3);
  cursor:pointer;user-select:none;white-space:nowrap;
  text-decoration:none;          /* usable on <a> */
  -webkit-appearance:none;appearance:none;
  transition:
    transform var(--dur-1) var(--ease-snap),
    background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}
.btn :where(svg){width:1.15em;height:1.15em;flex:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}

/* variants ------------------------------------------------------------------- */
/* primary — the one mint action; gets the bloom on hover */
.btn--primary{background:var(--accent);color:var(--on-accent-solid);border-color:var(--accent)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--glow-accent)}
.btn--primary:active{transform:translateY(1px);box-shadow:none}

/* secondary — raised neutral, mint reveals on hover (the live edge) */
.btn--secondary{background:var(--surface-raised);color:var(--ink);border-color:var(--hairline-strong);box-shadow:var(--shadow-1)}
.btn--secondary:hover{border-color:var(--accent-edge);color:var(--accent-text)}
.btn--secondary:active{background:var(--surface-sunken)}

/* ghost — chromeless, fills with a faint live wash */
.btn--ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn--ghost:hover{background:var(--row-hover);color:var(--ink)}
.btn--ghost:active{background:var(--accent-wash)}

/* danger — outline by default; solid for destructive confirm */
.btn--danger{background:transparent;color:var(--danger);border-color:var(--danger-edge)}
.btn--danger:hover{background:var(--danger-wash);border-color:var(--danger)}
.btn--danger:focus-visible{box-shadow:0 0 0 2px var(--surface-page),0 0 0 4px var(--danger)}
.btn--danger-solid{background:var(--danger);color:var(--surface-page);border-color:var(--danger)}
.btn--danger-solid:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--danger-edge),0 12px 28px -16px var(--danger-edge)}

/* link — inline text action, no box */
.btn--link{padding:0;border:0;background:none;color:var(--accent-text);font-weight:600}
.btn--link:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.btn--link:active{transform:none;opacity:.8}

/* sizes ---------------------------------------------------------------------- */
.btn--sm{--_pad-y:var(--s-2);--_pad-x:var(--s-3);--_fs:var(--fs-sm)}
.btn--md{--_pad-y:var(--s-3);--_pad-x:var(--s-5);--_fs:var(--fs-base)}
.btn--lg{--_pad-y:var(--s-4);--_pad-x:var(--s-8);--_fs:var(--fs-lead)}

/* modifiers ------------------------------------------------------------------ */
.btn--block{display:flex;width:100%}
.btn--icon{--_pad-x:var(--_pad-y);aspect-ratio:1;gap:0}
.btn--icon.btn--sm{--_pad-x:var(--s-2)}
.btn--icon.btn--lg{--_pad-x:var(--s-4)}

/* loading — caption hides, mint caret-style ring spins; width is preserved ---- */
.btn[data-loading="true"],.btn.is-loading{color:transparent !important;pointer-events:none;cursor:progress}
.btn[data-loading="true"]>*,.btn.is-loading>*{visibility:hidden}
.btn[data-loading="true"]::after,.btn.is-loading::after{
  content:"";position:absolute;width:1.1em;height:1.1em;border-radius:var(--r-full);
  border:2px solid color-mix(in oklab,currentColor 28%,transparent);
  border-top-color:var(--accent);
  animation:btn-spin .6s linear infinite;
}
.btn--primary[data-loading="true"]::after,.btn--primary.is-loading::after{
  border-color:color-mix(in oklab,var(--on-accent-solid) 30%,transparent);
  border-top-color:var(--on-accent-solid);
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* button group — segmented, hairline-joined ---------------------------------- */
.btn-group{display:inline-flex;isolation:isolate}
.btn-group>.btn{border-radius:0;margin-inline-start:-1px}
.btn-group>.btn:first-child{border-start-start-radius:var(--r-3);border-end-start-radius:var(--r-3);margin-inline-start:0}
.btn-group>.btn:last-child{border-start-end-radius:var(--r-3);border-end-end-radius:var(--r-3)}
.btn-group>.btn:hover,.btn-group>.btn:focus-visible{z-index:1}
.btn-group>.btn[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent-text);border-color:var(--accent-edge);z-index:1}

/* ── 2 · FORM SCAFFOLD ─────────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:var(--s-5)}

.fieldset{border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-6);margin:0;background:var(--surface-raised)}
.fieldset>.legend,.fieldset>legend{
  padding:0 var(--s-2);margin-inline-start:calc(var(--s-2) * -1);
  font:600 var(--fs-kicker)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--ink-3);
}

/* responsive field grid — collapses to one column on narrow viewports */
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-4) var(--grid-gap)}
.form-grid .span-12{grid-column:span 12}
.form-grid .span-8{grid-column:span 8}
.form-grid .span-6{grid-column:span 6}
.form-grid .span-4{grid-column:span 4}
.form-grid .span-3{grid-column:span 3}

/* a single labelled control + its hint/error */
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field--inline{flex-direction:row;align-items:center;gap:var(--s-3)}

.label{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font:600 var(--fs-meta)/1 var(--font-text);text-transform:uppercase;
  letter-spacing:var(--tracking-caps);color:var(--ink-3);
}
.label .req{color:var(--danger);font-size:0.9em;line-height:0}             /* required mark */
.label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-4)}

/* help + error text */
.field-hint{font:400 var(--fs-meta)/1.45 var(--font-text);color:var(--ink-4)}
.field-error{display:flex;align-items:center;gap:var(--s-2);font:500 var(--fs-meta)/1.45 var(--font-text);color:var(--danger)}
.field-error::before{content:"";width:7px;height:7px;flex:none;background:currentColor;
  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%)} /* ✕ — shape-encoded */
.field-success{display:flex;align-items:center;gap:var(--s-2);font:500 var(--fs-meta)/1.45 var(--font-text);color:var(--success)}
.field-success::before{content:"";width:8px;height:8px;flex:none;border-radius:var(--r-full);background:currentColor} /* ● dot */

.form-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-2)}
.form-actions--end{justify-content:flex-end}
.form-actions--split{justify-content:space-between}

/* ── 3 · TEXT CONTROLS ─────────────────────────────────────────────────────── */
.input,.textarea,.select{
  width:100%;
  padding:var(--s-3) var(--s-4);
  font:400 var(--fs-base)/1.3 var(--font-text);
  color:var(--ink);
  background:var(--surface-sunken);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-3);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-4)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--ink-4)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible,
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
  background:var(--surface-raised);
}
.input:disabled,.textarea:disabled,.select:disabled{
  opacity:.5;cursor:not-allowed;background:var(--surface-page);
}
.input[readonly]{background:var(--surface-page);color:var(--ink-2)}

.input--mono,.input.input--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.input--sm{padding:var(--s-2) var(--s-3);font-size:var(--fs-sm)}
.input--lg{padding:var(--s-4) var(--s-5);font-size:var(--fs-lead)}

.textarea{min-height:7rem;resize:vertical;line-height:var(--leading-body)}

/* native select chevron drawn from currentColor (no asset) */
.select{
  color:var(--ink);padding-right:var(--s-10);cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.select option{color:var(--ink);background:var(--surface-raised)}

/* input group — joins an addon + control on a shared field surface ----------- */
.input-group{display:flex;align-items:stretch;width:100%}
.input-group>.input{border-radius:0}
.input-group>.input:first-child{border-start-start-radius:var(--r-3);border-end-start-radius:var(--r-3)}
.input-group>.input:last-child{border-start-end-radius:var(--r-3);border-end-end-radius:var(--r-3)}
.input-group>.input:not(:first-child){margin-inline-start:-1px}
.input-group>.input:focus,.input-group>.input:focus-visible{z-index:1}
.input-addon{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:var(--s-3) var(--s-4);
  font:500 var(--fs-sm)/1 var(--font-mono);color:var(--ink-3);
  background:var(--surface-header);border:1px solid var(--hairline-strong);
}
.input-addon:first-child{border-start-start-radius:var(--r-3);border-end-start-radius:var(--r-3);border-inline-end:0}
.input-addon:last-child{border-start-end-radius:var(--r-3);border-end-end-radius:var(--r-3);border-inline-start:0;margin-inline-start:-1px}

/* affix wrapper — icon/symbol sitting inside the field well (e.g. $, search) */
.input-affix{position:relative;display:flex;align-items:center}
.input-affix .affix{position:absolute;display:inline-flex;align-items:center;pointer-events:none;
  color:var(--ink-3);font:500 var(--fs-base)/1 var(--font-mono)}
.input-affix .affix--lead{inset-inline-start:var(--s-4)}
.input-affix .affix--trail{inset-inline-end:var(--s-4)}
.input-affix:has(.affix--lead) .input{padding-inline-start:var(--s-8)}
.input-affix:has(.affix--trail) .input{padding-inline-end:var(--s-8)}

/* ── 4 · CHOICE CONTROLS ───────────────────────────────────────────────────── */
/* checkbox / radio — custom box, mint check, full a11y states */
.check{display:inline-flex;align-items:flex-start;gap:var(--s-3);cursor:pointer;
  font:400 var(--fs-base)/1.4 var(--font-text);color:var(--ink-2)}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:1.15rem;height:1.15rem;margin-top:0.14em;
  background:var(--surface-sunken);border:1px solid var(--hairline-strong);
  border-radius:var(--r-1);display:grid;place-content:center;cursor:pointer;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
.check input[type="radio"]{border-radius:var(--r-full)}
.check input:hover{border-color:var(--accent-edge)}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:0.5rem;height:0.5rem;background:var(--on-accent-solid);
  clip-path:polygon(14% 52%,0 66%,42% 100%,100% 22%,86% 10%,40% 70%)}
.check input[type="radio"]:checked::after{clip-path:none;border-radius:var(--r-full);width:0.5rem;height:0.5rem}
.check input:indeterminate{background:var(--accent);border-color:var(--accent)}
.check input:indeterminate::after{content:"";width:0.55rem;height:2px;background:var(--on-accent-solid);clip-path:none;border-radius:var(--r-full)}
.check input:focus-visible{outline:none;box-shadow:var(--ring)}
.check input:disabled{opacity:.5;cursor:not-allowed}
.check:has(input:disabled){color:var(--ink-4);cursor:not-allowed}
.check .check-aside{display:block;margin-top:2px;font-size:var(--fs-meta);color:var(--ink-4)}

/* switch — sliding knob (transform only), mint when on ----------------------- */
.switch{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer;color:var(--ink-2);font-size:var(--fs-base)}
.switch input{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;
  width:42px;height:24px;border-radius:var(--r-full);cursor:pointer;
  background:var(--hairline-strong);border:1px solid transparent;
  transition:background var(--dur-2) var(--ease-out);
}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:var(--r-full);background:var(--surface-raised);box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease-snap)}
.switch input:hover{background:var(--ink-4)}
.switch input:checked{background:var(--accent)}
.switch input:checked:hover{background:var(--accent)}
.switch input:checked::after{transform:translateX(18px)}
.switch input:focus-visible{outline:none;box-shadow:var(--ring)}
.switch input:disabled{opacity:.5;cursor:not-allowed}

/* option cards — a radio/checkbox styled as a selectable surface (POS / plans) */
.option-card{position:relative;display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-4);border:1px solid var(--hairline-strong);border-radius:var(--r-3);
  background:var(--surface-raised);cursor:pointer;
  transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.option-card:hover{border-color:var(--accent-edge)}
.option-card:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.option-card:has(input:focus-visible){box-shadow:var(--ring)}
.option-card .option-title{font:600 var(--fs-base)/1.2 var(--font-text);color:var(--ink)}
.option-card .option-desc{font:400 var(--fs-meta)/1.4 var(--font-text);color:var(--ink-4)}

/* ── 5 · VALIDATION STATES ─────────────────────────────────────────────────── */
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"],
.field--invalid .input,.field--invalid .textarea,.field--invalid .select{
  border-color:var(--danger);
}
.input[aria-invalid="true"]:focus,.textarea[aria-invalid="true"]:focus,.select[aria-invalid="true"]:focus,
.field--invalid .input:focus,.field--invalid .textarea:focus,.field--invalid .select:focus{
  box-shadow:0 0 0 3px var(--danger-wash);
}
.input--valid,.field--valid .input,.field--valid .select,.field--valid .textarea{border-color:var(--success)}
.input--valid:focus,.field--valid .input:focus{box-shadow:0 0 0 3px var(--accent-wash)}

/* ── 6 · REDUCED MOTION ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .btn[data-loading="true"]::after,.btn.is-loading::after{animation:none;border-top-color:var(--accent)}
  .btn,.input,.textarea,.select,.check input,.switch input,.switch input::after,.option-card{
    transition-duration:1ms !important;
  }
}