/* ============================================================================
   Versa UI kit  —  /styles/ui.css
   Component styles for src/ui.js. Everything is namespaced `.ui-*` (no collision
   with existing app styles) and built on the design tokens in app.css :root, so
   the kit re-themes for free. Motion is subtle and fully disabled under
   prefers-reduced-motion. Soft borders, calm radii, gentle hovers — "soothing".
   ============================================================================ */

/* ---- tone tokens: each component reads --ui-c / --ui-bg / --ui-line --------- */
.ui-tone-neutral { --ui-c:var(--ink2);  --ui-bg:var(--bg2);       --ui-line:var(--line); }
.ui-tone-info    { --ui-c:var(--info);  --ui-bg:var(--info-bg);   --ui-line:var(--info-line); }
.ui-tone-good    { --ui-c:var(--good);  --ui-bg:var(--good-bg);   --ui-line:var(--good-line); }
.ui-tone-warn    { --ui-c:var(--warn);  --ui-bg:var(--warn-bg);   --ui-line:var(--warn-line); }
.ui-tone-bad     { --ui-c:var(--bad);   --ui-bg:var(--bad-bg);    --ui-line:var(--bad-line); }

/* ---- Button ---------------------------------------------------------------- */
.ui-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; line-height:1; white-space:nowrap;
  border:0.5px solid var(--line2); border-radius:var(--r-sm);
  background:var(--panel2); color:var(--ink); cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             transform .08s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.ui-btn:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.ui-btn:active { transform:scale(.985); }
.ui-btn--block { width:100%; }
.ui-btn--sm { padding:7px 12px; font-size:12.5px; }
.ui-btn--md { padding:11px 16px; font-size:14px; }
.ui-btn--lg { padding:14px 20px; font-size:15.5px; }
.ui-btn--primary  { background:var(--info); border-color:var(--info); color:#0b0e13; }
.ui-btn--primary:hover  { background:#9cc4ff; border-color:#9cc4ff; }
.ui-btn--secondary:hover { background:#222c3a; border-color:var(--info); }
.ui-btn--ghost  { background:transparent; border-color:var(--line2); color:var(--ink2); }
.ui-btn--ghost:hover  { background:var(--bg2); color:var(--ink); border-color:var(--info); }
.ui-btn--subtle { background:transparent; border-color:transparent; color:var(--ink2); }
.ui-btn--subtle:hover { background:var(--bg2); color:var(--ink); }
.ui-btn--danger { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); }
.ui-btn--danger:hover { background:#3a1d1f; border-color:var(--bad); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; pointer-events:none; }
.ui-btn.is-loading { cursor:progress; }

/* ---- Spinner --------------------------------------------------------------- */
.ui-spinner { display:inline-flex; width:var(--ui-spinner-size,16px); height:var(--ui-spinner-size,16px); color:currentColor; vertical-align:-0.15em; }
.ui-spinner__ring { width:100%; height:100%; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; opacity:.85; animation:ui-spin .7s linear infinite; }
@keyframes ui-spin { to { transform:rotate(360deg); } }

/* ---- Card ------------------------------------------------------------------ */
.ui-card { background:var(--panel); border:0.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); }
.ui-card--animate { animation:rise .35s var(--ease) both; }
.ui-card--pad-none .ui-card__body { padding:0; }
.ui-card--pad-sm   { padding:.7rem .8rem; }
.ui-card--pad-md   { padding:1.05rem 1.15rem; }
.ui-card--pad-lg   { padding:1.4rem 1.5rem; }
.ui-card__head { margin-bottom:.7rem; }
.ui-card__eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); font-weight:600; margin-bottom:4px; }
.ui-card__title { font-family:var(--disp); font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.ui-card__foot { margin-top:.9rem; padding-top:.8rem; border-top:0.5px solid var(--line); }

/* ---- StatTile + stats grid ------------------------------------------------- */
.ui-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:8px; }
.ui-stat { background:var(--bg2); border-radius:var(--r-md); padding:.65rem .7rem; }
.ui-stat--center { text-align:center; }
.ui-stat--right  { text-align:right; }
.ui-stat__label { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink2); }
.ui-stat__value { font-size:18px; font-weight:600; color:var(--ink); margin-top:3px; line-height:1.1; }
.ui-stat__value--mono { font-family:var(--mono); }
.ui-stat.ui-tone-info .ui-stat__value { color:var(--info); }
.ui-stat.ui-tone-good .ui-stat__value { color:var(--good); }
.ui-stat.ui-tone-warn .ui-stat__value { color:var(--warn); }
.ui-stat.ui-tone-bad  .ui-stat__value { color:var(--bad); }
.ui-stat__sub { font-size:10.5px; color:var(--ink3); margin-top:2px; }

/* ---- Progress -------------------------------------------------------------- */
.ui-progress { width:100%; }
.ui-progress__label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; color:var(--ink2); margin-bottom:6px; }
.ui-progress__pct { font-family:var(--mono); color:var(--ink3); }
.ui-progress__track { position:relative; width:100%; background:var(--line); border-radius:99px; overflow:hidden; }
.ui-progress--sm .ui-progress__track { height:6px; }
.ui-progress--md .ui-progress__track { height:8px; }
.ui-progress--lg .ui-progress__track { height:12px; }
.ui-progress__fill { height:100%; border-radius:99px; background:var(--ui-c,var(--info)); }
/* tone-aware gradient; if color-mix is unsupported the rule is dropped and the
   solid fill above shows through — graceful, no broken bar. */
.ui-progress__fill--grad { background:linear-gradient(90deg, color-mix(in srgb, var(--ui-c,var(--info)) 65%, #b3a6ff), var(--ui-c,var(--info))); }
.ui-progress__fill--animate { transition:width .5s var(--ease); }

/* ---- Chip ------------------------------------------------------------------ */
.ui-chip { display:inline-flex; align-items:center; gap:6px; border-radius:99px; font-family:var(--sans); font-weight:500; line-height:1; white-space:nowrap; border:0.5px solid transparent; }
.ui-chip--sm { padding:3px 9px;  font-size:11px; }
.ui-chip--md { padding:5px 11px; font-size:12.5px; }
.ui-chip__dot { width:8px; height:8px; border-radius:50%; background:var(--ui-chip-color,var(--ink3)); flex:none; }
.ui-chip--soft    { background:var(--ui-bg,var(--bg2)); color:var(--ui-c,var(--ink2)); }
.ui-chip--solid   { background:var(--ui-c,var(--panel2)); color:#0b0e13; }
.ui-chip--outline { background:transparent; border-color:var(--ui-line,var(--line2)); color:var(--ui-c,var(--ink2)); }
.ui-chip--custom  { color:var(--ui-chip-color); background:color-mix(in srgb, var(--ui-chip-color) 15%, transparent); }
.ui-chip--custom.ui-chip--outline { background:transparent; border-color:var(--ui-chip-color); }
.ui-chip--interactive { cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease); }
.ui-chip--interactive:hover { transform:translateY(-1px); }
.ui-chip--interactive:focus-visible { outline:2px solid var(--info); outline-offset:2px; }

/* ---- OptionCard ------------------------------------------------------------ */
.ui-option { display:block; width:100%; text-align:left; background:var(--panel); border:0.5px solid var(--line); border-radius:var(--r-md); padding:.85rem .95rem; color:var(--ink); cursor:pointer; font-family:var(--sans);
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .08s var(--ease), box-shadow .16s var(--ease); }
.ui-option:hover { border-color:var(--info); background:var(--panel2); }
.ui-option:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.ui-option:active { transform:scale(.992); }
.ui-option.is-selected { border-color:var(--info); box-shadow:inset 0 0 0 1px var(--info); background:var(--panel2); }
.ui-option.is-disabled { opacity:.5; cursor:not-allowed; }
.ui-option__main { display:flex; align-items:center; gap:12px; }
.ui-option__icon { flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--bg2); color:var(--info); font-size:18px; }
.ui-option__text { flex:1; min-width:0; }
.ui-option__title { display:block; font-weight:600; font-size:14px; }
.ui-option__desc { display:block; font-size:12px; color:var(--ink2); margin-top:2px; line-height:1.45; }
.ui-option__meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.ui-option__badge { flex:none; font-size:10.5px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; }
.ui-option__check { flex:none; color:var(--info); font-size:18px; }

/* ---- EmptyState ------------------------------------------------------------ */
.ui-empty { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:2rem 1.2rem; color:var(--ink2); }
.ui-empty__icon { font-size:34px; color:var(--ink3); opacity:.85; margin-bottom:2px; }
.ui-empty__title { font-family:var(--disp); font-size:17px; font-weight:600; color:var(--ink); }
.ui-empty__body { max-width:34ch; font-size:13px; color:var(--ink2); line-height:1.55; }
.ui-empty__action { margin-top:8px; }

/* ---- Skeleton -------------------------------------------------------------- */
.ui-skeleton-group { display:flex; flex-direction:column; gap:8px; }
.ui-skeleton { display:block; background:linear-gradient(100deg, var(--bg2) 30%, var(--panel2) 50%, var(--bg2) 70%); background-size:200% 100%; border-radius:var(--r-sm); animation:ui-shimmer 1.4s ease-in-out infinite; }
.ui-skeleton--text   { height:.8em; border-radius:6px; }
.ui-skeleton--circle { border-radius:50%; }
.ui-skeleton--rect   { border-radius:var(--r-md); }
.ui-skeleton--tile   { height:64px; border-radius:var(--r-md); }
@keyframes ui-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---- responsive polish (mirrors app.css breakpoints) ----------------------- */
@media (max-width:520px) {
  .ui-card { border-radius:var(--r-md); }
  .ui-card--pad-md { padding:.9rem 1rem; }
  .ui-card--pad-lg { padding:1.1rem 1.15rem; }
  .ui-btn--lg { padding:13px 16px; }
  .ui-option__icon { width:32px; height:32px; font-size:16px; }
}

/* ---- breathing orbs (Tideglass: diversification you FEEL) ------------------- */
/* diversified money breathes slow + deep (long --orb-breath, larger --orb-amp);
   concentrated breathes quick + shallow. --orb-i shifts each orb out of phase. */
.ui-orb { animation:ui-orb-breath var(--orb-breath,4s) ease-in-out infinite; animation-delay:calc(var(--orb-i,0) * -0.7s); }
@keyframes ui-orb-breath { 0%,100% { transform:scale(1); } 50% { transform:scale(var(--orb-amp,1.04)); } }

/* ---- reduced motion: keep meaning, drop movement --------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* keep the MEANING (deeper = healthier) as a static size; drop the movement */
  .ui-orb { animation:none; transform:scale(var(--orb-amp,1)); }
  .ui-card--animate { animation:none; }
  .ui-progress__fill--animate { transition:none; }
  .ui-skeleton { animation:none; background:var(--panel2); }
  .ui-spinner__ring { animation-duration:1.6s; } /* slow turn still signals "busy" */
  .ui-btn:active, .ui-option:active, .ui-chip--interactive:hover { transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAP-FILL COMPONENTS (Tiers 1–3) — styles for the new components in ui.js.
   Same rules: namespaced .ui-*, tokens only, soft borders, calm motion, and a
   reduced-motion block at the very end keeps meaning while dropping movement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Badge / notification dot --------------------------------------------- */
.ui-badge { display:inline-flex; align-items:center; gap:5px; border-radius:99px; font-family:var(--sans); font-weight:600; line-height:1; white-space:nowrap; background:var(--ui-bg,var(--bg2)); color:var(--ui-c,var(--ink2)); border:0.5px solid var(--ui-line,transparent); }
.ui-badge--sm { padding:2px 7px; font-size:10px; }
.ui-badge--md { padding:3px 9px; font-size:11.5px; }
.ui-badge__dot { width:6px; height:6px; border-radius:50%; background:var(--ui-c,var(--ink3)); flex:none; }
.ui-badge--custom { color:var(--ui-badge-color); background:color-mix(in srgb, var(--ui-badge-color) 16%, transparent); border-color:transparent; }
.ui-badge--custom .ui-badge__dot { background:var(--ui-badge-color); }
.ui-badge--dot-only { width:9px; height:9px; min-width:9px; padding:0; border-radius:50%; background:var(--ui-c,var(--good)); border:none; }
.ui-badge--custom.ui-badge--dot-only { background:var(--ui-badge-color); }
.ui-badge--pulse { position:relative; isolation:isolate; }
.ui-badge--pulse::after { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--ui-c,var(--good)); z-index:-1; animation:ui-badge-pulse 1.9s var(--ease) infinite; }
.ui-badge--custom.ui-badge--pulse::after { background:var(--ui-badge-color); }
@keyframes ui-badge-pulse { 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(2.4); opacity:0; } }

/* ---- Callout / inline banner ---------------------------------------------- */
.ui-callout { display:flex; gap:10px; align-items:flex-start; padding:.7rem .85rem; border-radius:var(--r-md); background:var(--ui-bg,var(--bg2)); border:0.5px solid var(--ui-line,var(--line)); color:var(--ink); }
.ui-callout__icon { flex:none; color:var(--ui-c,var(--info)); font-size:18px; line-height:1.4; }
.ui-callout__content { flex:1; min-width:0; }
.ui-callout__title { font-weight:600; font-size:13.5px; color:var(--ink); }
.ui-callout__body { font-size:12.5px; color:var(--ink2); line-height:1.5; }
.ui-callout__title + .ui-callout__body { margin-top:3px; }
.ui-callout__action { flex:none; align-self:center; }
.ui-callout__close { flex:none; background:transparent; border:0; color:var(--ink3); cursor:pointer; padding:2px; border-radius:6px; font-size:16px; line-height:1; }
.ui-callout__close:hover { color:var(--ink); background:rgba(255,255,255,.06); }
.ui-callout__close:focus-visible { outline:2px solid var(--info); outline-offset:2px; }

/* ---- Ledger (money breakdown rows) ---------------------------------------- */
.ui-ledger { display:flex; flex-direction:column; }
.ui-ledger__row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:6px 0; font-size:13.5px; }
.ui-ledger__label { color:var(--ink2); min-width:0; overflow-wrap:anywhere; }
.ui-ledger__sub { color:var(--ink3); font-size:11.5px; margin-left:6px; }
.ui-ledger__value { font-weight:600; color:var(--ink); white-space:nowrap; }
.ui-ledger__value--mono { font-family:var(--mono); }
.ui-ledger__row.ui-tone-good .ui-ledger__value { color:var(--good); }
.ui-ledger__row.ui-tone-bad  .ui-ledger__value { color:var(--bad); }
.ui-ledger__row.ui-tone-warn .ui-ledger__value { color:var(--warn); }
.ui-ledger__row.ui-tone-info .ui-ledger__value { color:var(--info); }
.ui-ledger__total { margin-top:4px; padding-top:8px; border-top:0.5px solid var(--line); }
.ui-ledger__row.is-strong .ui-ledger__label { color:var(--ink); font-weight:600; }
.ui-ledger__row.is-strong .ui-ledger__value { font-size:16px; }

/* ---- Slider (range) ------------------------------------------------------- */
.ui-slider { width:100%; }
.ui-slider__head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px; }
.ui-slider__label { font-size:13px; color:var(--ink2); font-weight:500; }
.ui-slider__value { font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.ui-slider__track { position:relative; }
.ui-slider__input { display:block; width:100%; margin:0; height:10px; border-radius:99px; -webkit-appearance:none; appearance:none; cursor:pointer; touch-action:none;
  background:linear-gradient(to right, var(--ui-c,var(--info)) 0 var(--ui-slider-pct,0%), var(--line) var(--ui-slider-pct,0%) 100%); }
.ui-slider__input::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--ui-c,var(--info)); border:3px solid var(--bg2); box-shadow:0 2px 6px rgba(0,0,0,.45); cursor:pointer; transition:transform .12s var(--ease); }
.ui-slider__input::-webkit-slider-thumb:active { transform:scale(1.15); }
.ui-slider__input::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--ui-c,var(--info)); border:3px solid var(--bg2); cursor:pointer; }
.ui-slider__input:focus-visible { outline:2px solid var(--info); outline-offset:3px; }
.ui-slider__marker { position:absolute; top:50%; left:var(--ui-slider-marker,50%); width:2px; height:16px; transform:translate(-50%,-50%); background:var(--ink); opacity:.45; border-radius:2px; pointer-events:none; }
.ui-slider__foot { display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:10.5px; color:var(--ink3); }
.ui-slider__mlabel { color:var(--ink2); }
.ui-slider.is-disabled { opacity:.5; pointer-events:none; }

/* ---- Field + Input -------------------------------------------------------- */
.ui-field { display:flex; flex-direction:column; gap:6px; }
.ui-field__label { font-size:12.5px; font-weight:500; color:var(--ink2); }
.ui-field__req { color:var(--bad); }
.ui-field__msg { font-size:11.5px; color:var(--ink3); line-height:1.4; }
.ui-field__msg--error { color:var(--bad); }
.ui-field.is-disabled { opacity:.6; }
.ui-input__wrap { position:relative; display:flex; align-items:center; }
.ui-input__icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink3); font-size:16px; pointer-events:none; }
.ui-input__control { width:100%; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--bg2); border:0.5px solid var(--line2); border-radius:var(--r-sm); padding:10px 12px; transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
/* deterministic icon offset (works without :has); :has kept as progressive enhancement */
.ui-input__wrap--icon .ui-input__control,
.ui-input__wrap:has(.ui-input__icon) .ui-input__control { padding-left:34px; }
.ui-input__control::placeholder { color:var(--ink3); }
.ui-input__control:focus { outline:none; border-color:var(--info); box-shadow:0 0 0 3px var(--info-bg); }
.ui-input__control:disabled { cursor:not-allowed; }
.ui-field.is-invalid .ui-input__control { border-color:var(--bad-line); }
.ui-field.is-invalid .ui-input__control:focus { box-shadow:0 0 0 3px var(--bad-bg); }

/* ---- Select --------------------------------------------------------------- */
.ui-select__wrap { position:relative; display:flex; align-items:center; }
.ui-select__control { width:100%; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--bg2); border:0.5px solid var(--line2); border-radius:var(--r-sm); padding:10px 34px 10px 12px; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.ui-select__control:focus { outline:none; border-color:var(--info); box-shadow:0 0 0 3px var(--info-bg); }
.ui-select__control:disabled { cursor:not-allowed; }
.ui-select__control option { background:var(--panel); color:var(--ink); }
.ui-select__chevron { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--ink3); font-size:16px; pointer-events:none; }
.ui-field.is-invalid .ui-select__control { border-color:var(--bad-line); }
.ui-field.is-invalid .ui-select__control:focus { box-shadow:0 0 0 3px var(--bad-bg); }

/* ---- Toggle (switch) ------------------------------------------------------ */
.ui-toggle { display:inline-flex; align-items:center; gap:10px; background:transparent; border:0; padding:4px; cursor:pointer; font-family:var(--sans); color:var(--ink); text-align:left; }
.ui-toggle__track { position:relative; flex:none; width:40px; height:23px; border-radius:99px; background:var(--line2); transition:background .18s var(--ease); }
.ui-toggle__thumb { position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%; background:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .18s var(--ease); }
.ui-toggle.is-on .ui-toggle__track { background:var(--ui-c,var(--good)); }
.ui-toggle.is-on .ui-toggle__thumb { transform:translateX(17px); background:var(--bg); }
.ui-toggle:focus-visible { outline:none; }
.ui-toggle:focus-visible .ui-toggle__track { outline:2px solid var(--info); outline-offset:2px; }
.ui-toggle.is-disabled { opacity:.5; cursor:not-allowed; }
.ui-toggle__text { display:flex; flex-direction:column; }
.ui-toggle__label { font-size:13.5px; font-weight:500; }
.ui-toggle__desc { font-size:11.5px; color:var(--ink3); margin-top:1px; }

/* ---- Tabs / Segmented ----------------------------------------------------- */
.ui-tabs { display:flex; gap:4px; }
.ui-tabs--full { width:100%; }
.ui-tabs--full .ui-tab { flex:1; }
.ui-tab { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--sans); font-weight:500; color:var(--ink2); background:transparent; border:0.5px solid transparent; border-radius:var(--r-sm); cursor:pointer; white-space:nowrap; transition:color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease); }
.ui-tabs--sm .ui-tab { padding:7px 11px; font-size:12.5px; }
.ui-tabs--md .ui-tab { padding:9px 14px; font-size:13.5px; }
.ui-tab:hover { color:var(--ink); }
.ui-tab:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.ui-tab.is-disabled { opacity:.45; cursor:not-allowed; }
.ui-tab__badge { font-family:var(--mono); font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:99px; background:var(--bg2); color:var(--ink3); }
.ui-tab__dot { width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; }
.ui-tabs--underline { border-bottom:0.5px solid var(--line); gap:2px; }
.ui-tabs--underline .ui-tab { border-radius:var(--r-sm) var(--r-sm) 0 0; margin-bottom:-0.5px; border-bottom:2px solid transparent; }
.ui-tabs--underline .ui-tab.is-selected { color:var(--info); border-bottom-color:var(--info); }
.ui-tabs--segmented { background:var(--bg2); padding:3px; border-radius:var(--r-md); gap:2px; }
.ui-tabs--segmented .ui-tab.is-selected { color:var(--ink); background:var(--panel2); border-color:var(--line2); box-shadow:0 1px 2px rgba(0,0,0,.2); }

/* ---- Accordion ------------------------------------------------------------ */
.ui-accordion { display:flex; flex-direction:column; }
.ui-accordion__item { border-bottom:0.5px solid var(--line); }
.ui-accordion__item:first-child { border-top:0.5px solid var(--line); }
.ui-accordion__heading { margin:0; font:inherit; }
.ui-accordion__trigger { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:0; padding:.85rem .2rem; cursor:pointer; color:var(--ink); font-family:var(--sans); font-size:14px; font-weight:600; }
.ui-accordion__trigger:hover { color:var(--info); }
.ui-accordion__trigger:focus-visible { outline:2px solid var(--info); outline-offset:2px; border-radius:6px; }
.ui-accordion__title { flex:1; min-width:0; }
.ui-accordion__meta { flex:none; color:var(--ink2); font-weight:500; font-size:12.5px; }
.ui-accordion__chevron { flex:none; color:var(--ink3); font-size:18px; transition:transform .2s var(--ease); }
.ui-accordion__item.is-open .ui-accordion__chevron { transform:rotate(180deg); }
.ui-accordion__panel { overflow:hidden; }
.ui-accordion__inner { padding:0 .2rem .9rem; color:var(--ink2); font-size:13px; line-height:1.55; animation:ui-acc-in .22s var(--ease) both; }
@keyframes ui-acc-in { from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ---- Tooltip -------------------------------------------------------------- */
.ui-tt-trigger { display:inline-flex; cursor:help; border-bottom:1px dotted var(--ink3); }
.ui-tt-trigger:focus-visible { outline:2px solid var(--info); outline-offset:2px; border-radius:3px; }
.ui-tooltip { position:absolute; z-index:200; max-width:240px; padding:7px 10px; border-radius:var(--r-sm); background:var(--panel2); color:var(--ink); border:0.5px solid var(--line2); box-shadow:var(--shadow); font-family:var(--sans); font-size:12px; line-height:1.45; pointer-events:none; opacity:0; transform:translateY(2px); transition:opacity .14s var(--ease), transform .14s var(--ease); }
.ui-tooltip.is-visible { opacity:1; transform:none; }

/* ---- Modal / Dialog ------------------------------------------------------- */
.ui-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; }
.ui-modal[hidden] { display:none; }
.ui-modal__scrim { position:absolute; inset:0; background:rgba(6,9,13,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s var(--ease); }
.ui-modal.is-open .ui-modal__scrim { opacity:1; }
.ui-modal__panel { position:relative; width:100%; max-height:calc(100vh - 40px); overflow:auto; background:var(--panel); border:0.5px solid var(--line); border-radius:var(--r-lg); box-shadow:0 18px 60px rgba(0,0,0,.5); padding:1.3rem 1.4rem; opacity:0; transform:translateY(8px) scale(.985); transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.ui-modal.is-open .ui-modal__panel { opacity:1; transform:none; }
.ui-modal--sm .ui-modal__panel { max-width:380px; }
.ui-modal--md .ui-modal__panel { max-width:480px; }
.ui-modal--lg .ui-modal__panel { max-width:640px; }
.ui-modal__panel:focus { outline:none; }
.ui-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:.8rem; }
.ui-modal__eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); font-weight:600; margin-bottom:3px; }
.ui-modal__title { font-family:var(--disp); font-size:20px; font-weight:600; margin:0; letter-spacing:-0.01em; }
.ui-modal__close { flex:none; background:transparent; border:0; color:var(--ink3); cursor:pointer; padding:4px; border-radius:6px; font-size:18px; line-height:1; }
.ui-modal__close:hover { color:var(--ink); background:rgba(255,255,255,.06); }
.ui-modal__close:focus-visible { outline:2px solid var(--info); outline-offset:2px; }
.ui-modal__body { color:var(--ink2); font-size:13.5px; line-height:1.6; }
.ui-modal__foot { margin-top:1.1rem; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.ui-modal--sheet { align-items:flex-end; padding:0; }
.ui-modal--sheet .ui-modal__panel { max-width:560px; border-radius:var(--r-lg) var(--r-lg) 0 0; transform:translateY(100%); }
.ui-modal--sheet.is-open .ui-modal__panel { transform:none; }
html.ui-modal-open { overflow:hidden; }
@media (max-width:520px) {
  .ui-modal--center { align-items:flex-end; padding:0; }
  .ui-modal--center .ui-modal__panel { max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0; }
}

/* ---- Toast ---------------------------------------------------------------- */
.ui-toast-region { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; width:min(92vw,400px); pointer-events:none; }
.ui-toast { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:.7rem .85rem; border-radius:var(--r-md); background:var(--panel2); border:0.5px solid var(--ui-line,var(--line2)); box-shadow:0 8px 28px rgba(0,0,0,.4); color:var(--ink); font-size:13px;
  opacity:0; transform:translateY(10px); transition:opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.ui-toast.is-in { opacity:1; transform:none; }
.ui-toast.is-out { opacity:0; transform:translateY(10px); }
.ui-toast__icon { flex:none; color:var(--ui-c,var(--ink2)); font-size:18px; }
.ui-toast__msg { flex:1; min-width:0; line-height:1.45; }
.ui-toast__action { flex:none; background:transparent; border:0; color:var(--info); font-weight:600; font-size:12.5px; cursor:pointer; padding:4px 6px; border-radius:6px; }
.ui-toast__action:hover { background:var(--info-bg); }
.ui-toast__close { flex:none; background:transparent; border:0; color:var(--ink3); cursor:pointer; padding:2px; font-size:15px; line-height:1; border-radius:6px; }
.ui-toast__close:hover { color:var(--ink); }
.ui-toast__action:focus-visible, .ui-toast__close:focus-visible { outline:2px solid var(--info); outline-offset:2px; }

/* ---- reduced motion: keep meaning, drop movement (new components) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-badge--pulse::after { animation:none; opacity:0; }
  .ui-slider__input::-webkit-slider-thumb { transition:none; }
  .ui-slider__input::-webkit-slider-thumb:active { transform:none; }
  .ui-input__control, .ui-select__control { transition:none; }
  .ui-accordion__chevron { transition:none; }
  .ui-accordion__inner { animation:none; }
  .ui-tooltip { transition:opacity .01s linear; transform:none; }
  .ui-toggle__track, .ui-toggle__thumb { transition:none; }
  .ui-modal__scrim { transition:opacity .12s linear; }
  .ui-modal__panel { transition:opacity .12s linear; transform:none !important; }
  .ui-toast { transition:opacity .12s linear; transform:translateX(0); }
  .ui-toast.is-in, .ui-toast.is-out { transform:translateX(0); }
}