/* Web DS – components. Specs from Figma "DS WEB".
   Colours come from component tokens (--fx-btn-*, --fx-inpt-*) or semantic tokens; nothing hard-coded. */

.fx-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Button ──────────────────────────────────────────────
   Size → btn-sizes tokens (LG/MD/SM), Type → btn-colors tokens.
   States: :hover / :active / :disabled, forced by .is-hover / .is-pressed for the playground. */
.fx-btn {
  --px: var(--fx-btn-md-padding-x); --py: var(--fx-btn-md-padding-y);
  --pi: var(--fx-btn-md-padding-icon-left); --po: var(--fx-btn-md-padding-icon-only);
  --gap: var(--fx-btn-md-gap); --ic: var(--fx-btn-md-icon-size); --r: var(--fx-btn-md-radius); --minw: var(--fx-btn-md-min-width);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  min-width: var(--minw);
  padding: var(--py) var(--px);
  border: 0;
  border-radius: var(--r);
  font: 500 14px/24px 'Noto Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  box-shadow: inset 0 0 0 var(--bw, 0) var(--bc, transparent);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fx-btn .fx-icon { width: var(--ic); height: var(--ic); }
.fx-btn--lg { --px: var(--fx-btn-lg-padding-x); --py: var(--fx-btn-lg-padding-y); --pi: var(--fx-btn-lg-padding-icon-left); --po: var(--fx-btn-lg-padding-icon-only); --gap: var(--fx-btn-lg-gap); --ic: var(--fx-btn-lg-icon-size); --r: var(--fx-btn-lg-radius); --minw: var(--fx-btn-lg-min-width); font-size: 16px; }
.fx-btn--sm { --px: var(--fx-btn-sm-padding-x); --py: var(--fx-btn-sm-padding-y); --pi: var(--fx-btn-sm-padding-icon-left); --po: var(--fx-btn-sm-padding-icon-only); --gap: var(--fx-btn-sm-gap); --ic: var(--fx-btn-sm-icon-size); --r: var(--fx-btn-sm-radius); --minw: var(--fx-btn-sm-min-width); font-size: 12px; line-height: 16px; }
.fx-btn--icon-left { padding-left: var(--pi); }
.fx-btn--icon-right { padding-right: var(--pi); }
.fx-btn--icon-only { min-width: 0; padding: var(--po); }
.fx-btn--circle { border-radius: var(--fx-btn-md-radius-circle); }

.fx-btn--primary   { --bg: var(--fx-btn-primary-bg-default);   --bg-h: var(--fx-btn-primary-bg-hover);   --bg-p: var(--fx-btn-primary-bg-pressed);   --bg-d: var(--fx-btn-primary-bg-disabled);   --fg: var(--fx-btn-primary-content-default);   --fg-d: var(--fx-btn-primary-content-disabled); }
.fx-btn--secondary { --bg: var(--fx-btn-secondary-bg-default); --bg-h: var(--fx-btn-secondary-bg-hover); --bg-p: var(--fx-btn-secondary-bg-pressed); --bg-d: var(--fx-btn-secondary-bg-disabled); --fg: var(--fx-btn-secondary-content-default); --fg-d: var(--fx-btn-secondary-content-disabled); }
.fx-btn--text      { --bg: var(--fx-btn-text-bg-default);      --bg-h: var(--fx-btn-text-bg-hover);      --bg-p: var(--fx-btn-text-bg-pressed);      --bg-d: var(--fx-btn-text-bg-disabled);      --fg: var(--fx-btn-text-content-default);      --fg-d: var(--fx-btn-text-content-disabled); }
/* Outline: the "bg" tokens are the stroke */
.fx-btn--outline   { --bg: transparent; --bg-h: transparent; --bg-p: transparent; --bg-d: transparent; --bw: 1.5px;
                     --bc: var(--fx-btn-outline-bg-default); --fg: var(--fx-btn-outline-content-default); --fg-d: var(--fx-btn-outline-content-disabled); }

.fx-btn:hover, .fx-btn.is-hover { background: var(--bg-h); }
.fx-btn:active, .fx-btn.is-pressed { background: var(--bg-p); }
.fx-btn--outline:hover, .fx-btn--outline.is-hover { --bc: var(--fx-btn-outline-bg-hover); }
.fx-btn--outline:active, .fx-btn--outline.is-pressed { --bc: var(--fx-btn-outline-bg-pressed); }
.fx-btn:disabled { background: var(--bg-d); color: var(--fg-d); cursor: default; }
.fx-btn--outline:disabled { --bc: var(--fx-btn-outline-bg-disabled); }
.fx-btn:focus-visible { outline: 2px solid var(--fx-base-link); outline-offset: 2px; }

.fx-btn.is-loading { pointer-events: none; }
.fx-btn.is-loading > * { visibility: hidden; }
.fx-btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: calc(var(--ic) * 0.75); height: calc(var(--ic) * 0.75);
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: fx-spin 0.8s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(1turn); } }

/* ─── Field (input / money / password / select) ─────────── */
.fx-field { display: grid; gap: 8px; max-width: 438px; }
.fx-field-box {
  --stroke: var(--fx-inpt-stroke-default);
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fx-core-background-primary);
  box-shadow: inset 0 0 0 1.5px var(--stroke);
  cursor: text;
  transition: box-shadow 0.15s;
}
.fx-field-box:hover, .fx-field.is-hover .fx-field-box { --stroke: var(--fx-inpt-stroke-hover); }
.fx-field-box:focus-within, .fx-field.is-focus .fx-field-box { --stroke: var(--fx-inpt-stroke-active); box-shadow: inset 0 0 0 2px var(--stroke); } /* Figma: focused stroke is 2px */
.fx-field.is-error .fx-field-box { --stroke: var(--fx-inpt-stroke-error); }
.fx-field.is-success .fx-field-box { --stroke: var(--fx-inpt-stroke-success); }
.fx-field.is-disabled .fx-field-box { --stroke: var(--fx-inpt-stroke-disabled); background: var(--fx-inpt-bg-disabled); cursor: default; }

.fx-field-text { position: relative; flex: 1; min-width: 0; align-self: stretch; }
.fx-field-label {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-size: 16px; line-height: 24px; color: var(--fx-core-content-tertiary);
  pointer-events: none; transition: all 0.15s;
}
.fx-field input {
  width: 100%; height: 100%; padding: 16px 0 0; border: 0; outline: 0; background: none;
  font: 400 16px/24px 'Noto Sans', system-ui, sans-serif; color: var(--fx-core-content-primary);
}
.fx-field input:disabled { color: var(--fx-core-content-disabled); }
/* Floating label: up when focused or filled */
.fx-field-box:focus-within .fx-field-label,
.fx-field.is-focus .fx-field-label,
.fx-field input:not(:placeholder-shown) + .fx-field-label { top: 2px; transform: none; font-size: 12px; line-height: 16px; }
.fx-field input::placeholder { color: transparent; }

.fx-field-box > .fx-field-btn + .fx-field-btn { margin-left: 8px; } /* clear + eye sit 16px apart */
.fx-field-btn { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--fx-core-content-tertiary); cursor: pointer; }
.fx-field-btn[hidden] { display: none; }
.fx-field-lead { color: var(--fx-core-content-tertiary); }
.fx-field-lead--currency .fx-icon { width: 32px; height: 32px; }
/* Currency after a 1px divider (Figma _currency: divider Opacity 10%, Paragraph Md, Content Secondary) */
.fx-field-currency { display: flex; align-items: center; gap: 8px; padding-right: 4px; font-size: 16px; line-height: 24px; color: var(--fx-core-content-secondary); }
.fx-field-currency::before { content: ''; width: 1px; height: 24px; background: var(--fx-extension-opacity-10); }
.fx-field-chevron { color: var(--fx-core-content-primary); transition: transform 0.2s; }

.fx-msg { display: flex; align-items: center; gap: 2px; padding-left: 2px; margin: 0; font-size: 14px; line-height: 20px; color: var(--fx-core-content-secondary); }
.fx-msg .fx-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.fx-field.is-error .fx-msg { color: var(--fx-extension-content-negative); }
.fx-field.is-success .fx-msg { color: var(--fx-extension-content-positive); }
.fx-reqs { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fx-reqs .fx-msg.is-ok { color: var(--fx-extension-content-positive); }
.fx-reqs .fx-msg.is-bad { color: var(--fx-extension-content-negative); }
.fx-req-ic { display: grid; place-items: center; height: 20px; }
.fx-reqs .fx-msg:not(.is-ok, .is-bad) .fx-req-ic { color: var(--fx-core-content-tertiary); }

/* ─── Checkbox & radio (native inputs) ──────────────────── */
.fx-check { display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.fx-check input {
  appearance: none; flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin: 2px; border-radius: 4px;
  background: var(--fx-core-background-primary);
  box-shadow: inset 0 0 0 1.5px var(--fx-core-border-secondary);
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
}
.fx-check input[type="radio"] { border-radius: 50%; }
.fx-check input:hover { box-shadow: inset 0 0 0 1.5px var(--fx-base-positive); background: var(--fx-extension-background-positive); }
.fx-check input:focus-visible { outline: 2px solid var(--fx-base-link); outline-offset: 2px; }
.fx-check input:checked, .fx-check input:indeterminate { background: var(--fx-base-positive); box-shadow: none; }
.fx-check input[type="checkbox"]:checked::after { content: ''; width: 10px; height: 5px; margin-top: -3px; border: solid var(--fx-base-white); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.fx-check input:indeterminate::after { content: ''; width: 10px; height: 2px; border-radius: 1px; background: var(--fx-base-white); }
.fx-check input[type="radio"]:checked::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fx-base-white); }
.fx-check input:disabled { background: var(--fx-core-background-disabled); box-shadow: none; cursor: default; }
.fx-check input:disabled:checked::after { border-color: var(--fx-core-content-disabled); background: none; }
.fx-check input[type="radio"]:disabled:checked::after { background: var(--fx-core-content-disabled); }
.fx-check:has(input:disabled) { cursor: default; color: var(--fx-core-content-disabled); }
.fx-check span { display: grid; font-size: 16px; line-height: 24px; }
.fx-check small { font-size: 12px; line-height: 16px; color: var(--fx-core-content-secondary); }

/* ─── Chips ─────────────────────────────────────────────── */
.fx-chip {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 16px; border: 0; border-radius: 8px;
  font: 600 16px/24px 'Noto Sans', system-ui, sans-serif;
  background: var(--fx-core-background-secondary); color: var(--fx-core-content-tertiary); cursor: pointer;
}
.fx-chip sup { font-size: 11px; line-height: 0; font-weight: 500; }
.fx-chip[aria-pressed="true"] { background: var(--fx-core-content-primary); color: var(--fx-core-background-primary); }
.fx-chip--s { padding: 4px 12px; font-size: 14px; line-height: 20px; }

/* ─── Badge ─────────────────────────────────────────────── */
.fx-badge {
  --c: var(--fx-base-negative); --b: var(--fx-extension-background-negative); --s: var(--fx-extension-border-negative);
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 6px;
  background: var(--b); color: var(--fx-core-content-primary); font-size: 12px; line-height: 16px;
}
.fx-badge::before { content: ''; width: 12px; height: 12px; margin: 2px; border-radius: 50%; background: var(--c); }
.fx-badge--stroke { box-shadow: inset 0 0 0 1px var(--s); }
.fx-badge--info { --c: var(--fx-base-link); --b: var(--fx-extension-background-neutral); --s: var(--fx-extension-border-neutral); }
.fx-badge--warning { --c: var(--fx-base-warning); --b: var(--fx-extension-background-warning); --s: var(--fx-extension-border-warning); }
.fx-badge--success { --c: var(--fx-base-positive); --b: var(--fx-extension-background-positive); --s: var(--fx-extension-border-positive); }
.fx-badge--neutral { --c: var(--fx-core-content-tertiary); --b: var(--fx-core-background-secondary); --s: var(--fx-core-border-secondary); }

/* Dark theme rules from the Figma "Dark mode" page: instead of the ramp-90 extension
   backgrounds, status surfaces are the base colour (step 40) at low opacity + a white hairline. */
[data-fx-theme="dark"] .fx-badge--info { --c: var(--fx-lapras-40); }
[data-fx-theme="dark"] .fx-badge:not(.fx-badge--neutral) { --b: color-mix(in srgb, var(--c) 24%, transparent); --s: var(--fx-extension-opacity-10); }
[data-fx-theme="dark"] .fx-badge:is(.fx-badge--success, .fx-badge--warning) { --b: color-mix(in srgb, var(--c) 16%, transparent); }

/* ─── Notification ──────────────────────────────────────────
   Figma "Notification": Type = Info | Alert | Error | Success, Stroke = True | False (.fx-note--flat).
   Icon + title (Headline Md) + text (Paragraph Sm) + link (Button Md), close at top right. */
.fx-note {
  --c: var(--fx-base-neutral); --b: var(--fx-extension-background-neutral);
  position: relative; display: flex; gap: 8px; padding: 16px 48px 16px 16px; border-radius: 12px;
  background: var(--b); box-shadow: inset 0 0 0 1px var(--fx-extension-opacity-5); color: var(--fx-core-content-primary);
}
.fx-note--flat { box-shadow: none; }
.fx-note--alert { --c: var(--fx-base-warning); --b: var(--fx-extension-background-warning); }
.fx-note--error { --c: var(--fx-base-negative); --b: var(--fx-extension-background-negative); }
.fx-note--success { --c: var(--fx-base-positive); --b: var(--fx-extension-background-positive); }
[data-fx-theme="dark"] .fx-note { --b: color-mix(in srgb, var(--c) 10%, transparent); }
[data-fx-theme="dark"] .fx-note:not(.fx-note--alert, .fx-note--error, .fx-note--success) { --b: color-mix(in srgb, var(--fx-lapras-40) 10%, transparent); }
.fx-note > .fx-icon { color: var(--c); }
.fx-note-body { display: grid; gap: 8px; flex: 1; min-width: 0; }
.fx-note-body > div { display: grid; gap: 4px; }
.fx-note-title { margin: 0; font: 600 16px/24px 'Noto Sans', system-ui, sans-serif; }
.fx-note-text { margin: 0; font-size: 14px; line-height: 20px; }
.fx-note-link { justify-self: start; padding: 0; border: 0; background: none; font: 500 14px/24px 'Noto Sans', system-ui, sans-serif; color: var(--fx-base-link) !important; text-decoration: none; cursor: pointer; }
.fx-note-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fx-extension-opacity-50); cursor: pointer; }
.fx-note-close .fx-icon { width: 16px; height: 16px; stroke-width: 2; }

/* ─── Tooltip ───────────────────────────────────────────── */
.fx-tooltip {
  position: relative; max-width: 316px; padding: 16px; border-radius: 12px; margin-top: 12px;
  background: var(--fx-base-white); color: var(--fx-base-black);
  box-shadow: 0 8px 24px var(--fx-extension-opacity-10);
}
.fx-tooltip::before { content: ''; position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.fx-tooltip p { margin: 0; }
.fx-tooltip-title { font-size: 14px; line-height: 20px; font-weight: 600; margin-bottom: 8px !important; }
.fx-tooltip-text { font-size: 12px; line-height: 16px; color: var(--fx-snorlax-50); }

/* ─── Accordion (native <details>) ──────────────────────── */
.fx-accordion { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--fx-core-border-tertiary); }
.fx-accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 24px;
  font-size: 18px; line-height: 28px; font-weight: 600; list-style: none; cursor: pointer;
}
.fx-accordion summary::-webkit-details-marker { display: none; }
.fx-accordion summary .fx-icon { transition: transform 0.2s; }
.fx-accordion[open] summary .fx-icon { transform: rotate(180deg); }
.fx-accordion p { margin: -8px 24px 24px; font-size: 16px; line-height: 24px; color: var(--fx-core-content-secondary); }

@media (prefers-reduced-motion: reduce) {
  .fx-btn, .fx-field-box, .fx-field-label, .fx-check input, .fx-accordion summary .fx-icon { transition: none; }
  .fx-btn.is-loading::after { animation-duration: 2s; }
}

/* Required-field asterisk in floating labels */
.fx-req { color: var(--fx-base-negative); font-weight: inherit; }

/* Badge with an icon instead of the dot (Figma: Badge message · Show Icon) */
.fx-badge:has(> .fx-icon)::before { display: none; }
.fx-badge > .fx-icon { width: 16px; height: 16px; color: var(--fx-core-content-tertiary); }
.fx-badge--neutral { padding: 4px 8px 4px 6px; gap: 2px; }

/* Clear (×) only while the field is focused – filled fields show just the value (Figma: Input-text State=Filled) */
.fx-field-btn[data-act="clear"] { display: none; }
.fx-field-box:focus-within .fx-field-btn[data-act="clear"]:not([hidden]),
.fx-field.is-focus .fx-field-btn[data-act="clear"]:not([hidden]) { display: grid; }

/* The field box already shows focus with its stroke – no second ring on the inner input */
.fx-field input:focus-visible { outline: none; }