/*
 * Wasp shared visual foundation (brand release v1.1.1)
 *
 * The Wasp developer portal owns this canonical asset. It is published
 * immutably at
 *   https://developers.strat-sol.biz/wasp-assets/brand/wasp-theme.css
 * Compatible changes are published as a NEW exact release (v1.1.2, ...);
 * this file is never edited in place after publication. Consumers (the
 * developer portal, the Hosted Payment Page, the Wasp-hosted customer
 * authentication page, the sample-merchant harness) pin an exact release.
 *
 * Changes since v1.1.0 (purely additive; no token renamed, no colour of any
 * kind changed, no primitive altered):
 *   - `color-scheme: light dark` is now declared at :root, and forced to the
 *     single matching value under an explicit data-theme override. Every token
 *     below already had a dark palette, but nothing told the BROWSER that: form
 *     controls, scrollbars, and the canvas behind the page all stayed light
 *     while the page went dark. Declaring it is what makes dark mode whole
 *     rather than approximately right, and it belongs here so no consumer has
 *     to remember it.
 *   - new --wasp-color-scheme token, carrying the RESOLVED palette name
 *     ("light" or "dark") as a value a script can read. It exists so a consumer
 *     that must make a non-CSS decision from the theme -- picking the
 *     Google-supplied wallet button variant that suits the surface is the case
 *     that prompted it -- reads the answer the cascade already computed instead
 *     of re-deriving it from prefers-color-scheme and silently disagreeing with
 *     this stylesheet whenever data-theme is set. One resolver, which is the
 *     whole point.
 *
 * Changes in v1.1.0 (retained for context; see that release for detail):
 *   brand-primary/-secondary refinement, --wasp-header-bg-2 + header gradient,
 *   two-layer --wasp-shadow-card, --wasp-radius-card 14px, deepened
 *   page/muted/border tones, --wasp-font-mono. Semantic colours
 *   (success/failure/processing/info) were unchanged then and are unchanged
 *   now -- they are never altered without an explicit, separate decision.
 *
 * This stylesheet is the EXECUTABLE half of the Wasp visual system: the
 * namespaced --wasp-* design tokens and the reusable .wasp-* primitives.
 *
 * The part of the visual system an external developer builds against -- the
 * light|dark|system theme contract and the responsive guarantees -- is published
 * at docs/design/browser-ui-contract on the developer portal.
 *
 * The full normative usage rules, examples and constraints live in the Wasp Style
 * Guide (docs/design/wasp-style-guide), which is internal: see ARCHITECTURE.md,
 * "The Wasp Style Guide is ADMINISTRATOR". This file is served publicly, so it
 * must not send a reader to a page they cannot open.
 *
 * Scope:
 *   - namespaced --wasp-* design tokens declared at :root
 *   - reusable, explicitly namespaced brand primitives (.wasp-*)
 * Out of scope (deliberately): product/page layout, Hosted Checkout wallet,
 * payment-state, polling, or result-flow presentation. Those belong to the
 * consuming product.
 *
 * Isolation contract: this stylesheet declares NO unscoped rules for generic
 * elements (body, a, button, input, header, footer, ...). Consumers opt in by
 * using the .wasp-* classes and tokens. Native elements are styled only where
 * they are structural children of a .wasp-* primitive (for example the
 * visually-hidden radio inside .wasp-segment).
 *
 * Theming: tokens default to the light palette, switch via
 * prefers-color-scheme, and honour an explicit data-theme="light|dark"
 * attribute on the root element when a consumer offers a manual toggle, or on
 * a container to hold part of a page on one presentation. An explicit choice
 * on the root outranks the media query by specificity, not by source order,
 * so it survives a bundler that reorders rules.
 *
 * Merchant overrides: exactly these variables may be overridden by an
 * approved consumer (for example the Hosted Payment Page merchant branding),
 * and nothing else:
 *   --wasp-brand-primary, --wasp-brand-primary-fg,
 *   --wasp-brand-secondary, --wasp-brand-secondary-fg
 */

:root {
  /* ------------------------------------------------------ colour scheme */
  /* Tell the browser this page has both palettes, so UA-rendered chrome the
     tokens below cannot reach -- scrollbars, native form widgets, the canvas
     behind the page -- follows the user's preference with them. */
  color-scheme: light dark;
  /* The RESOLVED palette name, for the rare consumer that must make a
     non-CSS decision from the theme. Read it, never re-derive it:
       getComputedStyle(el).getPropertyValue('--wasp-color-scheme').trim()
     Because it comes through the cascade it already accounts for the media
     query AND for a data-theme override, which an independent
     prefers-color-scheme check would not. */
  --wasp-color-scheme: light;

  /* ------------------------------------------------------- typography */
  --wasp-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --wasp-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas,
    monospace; /* amounts and reference numbers only -- still no external font */
  --wasp-font-size-base: 1rem;      /* 16px — body text and controls */
  --wasp-font-size-sm: 0.875rem;    /* 14px — labels, secondary text */
  --wasp-font-size-xs: 0.8125rem;   /* 13px — help, references, footers */
  --wasp-font-size-lg: 1.0625rem;   /* 17px — section headings */
  --wasp-font-size-xl: 1.375rem;    /* 22px — page headings */
  --wasp-font-size-display: 2.5rem; /* 40px — hero/display headings only */
  --wasp-font-size-amount: 1.75rem; /* 28px — monetary amounts */
  --wasp-weight-regular: 400;
  --wasp-weight-medium: 500;
  --wasp-weight-semibold: 600;
  --wasp-weight-bold: 700;
  --wasp-line-height: 1.5;
  --wasp-line-height-tight: 1.25;
  --wasp-line-height-heading: 1.3;

  /* ------------------------------------------ light palette (agreed) */
  --wasp-header-bg: #073b5c;
  --wasp-header-bg-2: #124a76; /* gradient depth stop; header only, never footer */
  --wasp-header-fg: #f4f8fc;
  --wasp-footer-bg: #052f4a;
  --wasp-footer-fg: #d7e3ee;
  --wasp-page-bg: #eef3f7;
  --wasp-surface-bg: #ffffff;
  --wasp-surface-raised: #ffffff;
  --wasp-surface-muted: #f2f7fa;
  --wasp-text: #17212b;
  --wasp-text-muted: #526575;

  /* ------------------------- brand accents (merchant-overridable set) */
  --wasp-brand-primary: #0f6fc4;
  --wasp-brand-primary-fg: #ffffff;
  --wasp-brand-secondary: #0d9488;
  --wasp-brand-secondary-fg: #ffffff;

  /* ------------------- brand action states (never merchant-overridable) */
  --wasp-brand-primary-hover: #0c5aa0;
  --wasp-brand-primary-active: #094a86;
  --wasp-brand-primary-subtle: #e6f1fb;

  /* -------------- semantic outcome colours (never merchant-overridable) */
  --wasp-success: #1e7b34;
  --wasp-success-fg: #ffffff;
  --wasp-failure: #b42318;
  --wasp-failure-fg: #ffffff;
  --wasp-processing: #8a5a00;
  --wasp-processing-fg: #ffffff;
  --wasp-info: #0b5cab;
  --wasp-info-fg: #ffffff;

  /* --------------------------------------------------- focus treatment */
  --wasp-focus-color: #0f6fc4;
  --wasp-focus-ring: 3px solid var(--wasp-focus-color);
  --wasp-focus-offset: 2px;

  /* ------------------------------------------------------ spacing scale */
  --wasp-space-1: 4px;
  --wasp-space-2: 8px;
  --wasp-space-3: 12px;
  --wasp-space-4: 16px;
  --wasp-space-5: 24px;
  --wasp-space-6: 32px;

  /* -------------------------------------------------- controls & touch */
  --wasp-control-height: 44px;       /* standard control/button height */
  --wasp-control-height-small: 36px; /* compact controls (segments) */
  --wasp-touch-target: 44px;         /* minimum interactive target */
  --wasp-control-padding-x: 12px;
  --wasp-control-padding-y: 8px;

  /* --------------------------------------------- borders, radii, shadow */
  --wasp-border-width: 1px;
  --wasp-border-width-strong: 2px;
  --wasp-border-color: #d3dde6;
  --wasp-border-strong: #b6c5d1;
  --wasp-border: var(--wasp-border-width) solid var(--wasp-border-color);
  --wasp-radius: 6px;            /* controls, buttons */
  --wasp-radius-surface: 8px;    /* surfaces/containers */
  --wasp-radius-card: 14px;      /* grouped-content cards */
  --wasp-radius-none: 0;         /* data tables, flush edges */
  --wasp-shadow-none: none;
  --wasp-shadow-subtle: 0 1px 2px rgba(7, 17, 29, 0.08);
  --wasp-shadow-card: 0 1px 2px rgba(6, 20, 34, 0.06), 0 12px 28px -8px rgba(6, 20, 34, 0.16);

  /* -------------------------------------------------------- layout widths */
  --wasp-content-narrow: 480px;  /* single-purpose flows (payment column) */
  --wasp-content-default: 720px; /* reading/document content */
}

@media (prefers-color-scheme: dark) {
  :root {
    --wasp-color-scheme: dark;

    --wasp-header-bg: #04101c;
    --wasp-header-bg-2: #0a2c47;
    --wasp-header-fg: #f4f8fc;
    --wasp-footer-bg: #030c15;
    --wasp-footer-fg: #b9c8d6;
    --wasp-page-bg: #050d16;
    --wasp-surface-bg: #0c1a29;
    --wasp-surface-raised: #101f30;
    --wasp-surface-muted: #142838;
    --wasp-text: #f4f8fc;
    --wasp-text-muted: #a7bed2;

    --wasp-brand-primary: #5aabf0;
    --wasp-brand-primary-fg: #04101c;
    --wasp-brand-secondary: #2fc7b3;
    --wasp-brand-secondary-fg: #04101c;

    --wasp-brand-primary-hover: #7cbdf4;
    --wasp-brand-primary-active: #94c9f6;
    --wasp-brand-primary-subtle: #10304a;

    --wasp-success: #5bd98a;
    --wasp-success-fg: #07111d;
    --wasp-failure: #f97066;
    --wasp-failure-fg: #07111d;
    --wasp-processing: #f7c868;
    --wasp-processing-fg: #07111d;
    --wasp-info: #67b7f7;
    --wasp-info-fg: #07111d;

    --wasp-focus-color: #5aabf0;
    --wasp-border-color: #1c3245;
    --wasp-border-strong: #35516b;
    --wasp-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
    --wasp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 32px -10px rgba(0, 0, 0, 0.55);
  }
}

/* Explicit consumer toggle wins over the OS preference in both directions --
   including for the browser's own chrome, which is why each block pins
   color-scheme to the single matching value rather than leaving it to the
   preference the consumer has just overridden.

   Each block names the root TWICE, and that is load-bearing:

   - `[data-theme]` alone is what themes a CONTAINER. The checkout SDK stamps it
     on its mount, and a merchant holds part of a page on one presentation by
     putting it on a wrapper, so it must keep matching any element.
   - `:root[data-theme]` is what makes the root's choice win. Bare, the
     attribute ties the media block's `:root` on specificity (0,1,0), and a tie
     is decided by source order -- an order a bundler does not keep. The
     portal's own build hoists every media query to the end of the stylesheet,
     so a reader who chose light on a dark device got the dark palette under
     light Docusaurus chrome: near-white inline code on a near-white chip.
     Specificity (0,2,0) wins wherever the rules end up. */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --wasp-color-scheme: dark;
  --wasp-header-bg: #04101c;
  --wasp-header-bg-2: #0a2c47;
  --wasp-header-fg: #f4f8fc;
  --wasp-footer-bg: #030c15;
  --wasp-footer-fg: #b9c8d6;
  --wasp-page-bg: #050d16;
  --wasp-surface-bg: #0c1a29;
  --wasp-surface-raised: #101f30;
  --wasp-surface-muted: #142838;
  --wasp-text: #f4f8fc;
  --wasp-text-muted: #a7bed2;
  --wasp-brand-primary: #5aabf0;
  --wasp-brand-primary-fg: #04101c;
  --wasp-brand-secondary: #2fc7b3;
  --wasp-brand-secondary-fg: #04101c;
  --wasp-brand-primary-hover: #7cbdf4;
  --wasp-brand-primary-active: #94c9f6;
  --wasp-brand-primary-subtle: #10304a;
  --wasp-success: #5bd98a;
  --wasp-success-fg: #07111d;
  --wasp-failure: #f97066;
  --wasp-failure-fg: #07111d;
  --wasp-processing: #f7c868;
  --wasp-processing-fg: #07111d;
  --wasp-info: #67b7f7;
  --wasp-info-fg: #07111d;
  --wasp-focus-color: #5aabf0;
  --wasp-border-color: #1c3245;
  --wasp-border-strong: #35516b;
  --wasp-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
  --wasp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 32px -10px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --wasp-color-scheme: light;
  --wasp-header-bg: #073b5c;
  --wasp-header-bg-2: #124a76;
  --wasp-header-fg: #f4f8fc;
  --wasp-footer-bg: #052f4a;
  --wasp-footer-fg: #d7e3ee;
  --wasp-page-bg: #eef3f7;
  --wasp-surface-bg: #ffffff;
  --wasp-surface-raised: #ffffff;
  --wasp-surface-muted: #f2f7fa;
  --wasp-text: #17212b;
  --wasp-text-muted: #526575;
  --wasp-brand-primary: #0f6fc4;
  --wasp-brand-primary-fg: #ffffff;
  --wasp-brand-secondary: #0d9488;
  --wasp-brand-secondary-fg: #ffffff;
  --wasp-brand-primary-hover: #0c5aa0;
  --wasp-brand-primary-active: #094a86;
  --wasp-brand-primary-subtle: #e6f1fb;
  --wasp-success: #1e7b34;
  --wasp-success-fg: #ffffff;
  --wasp-failure: #b42318;
  --wasp-failure-fg: #ffffff;
  --wasp-processing: #8a5a00;
  --wasp-processing-fg: #ffffff;
  --wasp-info: #0b5cab;
  --wasp-info-fg: #ffffff;
  --wasp-focus-color: #0f6fc4;
  --wasp-border-color: #d3dde6;
  --wasp-border-strong: #b6c5d1;
  --wasp-shadow-subtle: 0 1px 2px rgba(7, 17, 29, 0.08);
  --wasp-shadow-card: 0 1px 2px rgba(6, 20, 34, 0.06), 0 12px 28px -8px rgba(6, 20, 34, 0.16);
}

/* Interaction shades follow the primary colour.
   The fixed hover/active/subtle values above are Wasp's own, and stay as the
   fallback. Where the browser supports it, they are derived from whatever
   --wasp-brand-primary is, so a consumer that re-colours the primary (for
   example the Hosted Payment Page with a merchant's validated brand colour)
   gets matching hover and pressed states instead of Wasp blue.
   Hover and active mix the primary AWAY from its own text colour (towards the
   inverse of --wasp-brand-primary-fg), so text on them only ever gains
   contrast. Subtle is a light tint over the page surface. The selectors repeat
   the theme blocks' own so this wins wherever those apply. */
@supports (color: color-mix(in srgb, red 50%, rgb(from red r g b))) {
  :root,
  :root[data-theme="dark"],
  [data-theme="dark"],
  :root[data-theme="light"],
  [data-theme="light"] {
    --wasp-brand-primary-away: rgb(from var(--wasp-brand-primary-fg) calc(255 - r) calc(255 - g) calc(255 - b));
    --wasp-brand-primary-hover: color-mix(in srgb, var(--wasp-brand-primary) 82%, var(--wasp-brand-primary-away));
    --wasp-brand-primary-active: color-mix(in srgb, var(--wasp-brand-primary) 68%, var(--wasp-brand-primary-away));
    --wasp-brand-primary-subtle: color-mix(in srgb, var(--wasp-brand-primary) 12%, var(--wasp-surface-bg));
  }
}

/* ------------------------------------------------------------------ */
/* Brand primitives — explicitly namespaced; consumers opt in.        */
/* Usage rules live in the Wasp Style Guide.                          */
/* ------------------------------------------------------------------ */

/* Compact branded header band. Restrained navy-to-blue depth gradient
   (the style guide's own existing hero-band allowance) rather than a flat
   fill. A consumer that tints the band with its own colour (for example the
   Hosted Payment Page's validated merchant branding) supplies a flat colour
   at its own more specific selector and never inherits this gradient --
   deriving a matching gradient from an arbitrary merchant hex is out of
   scope here and is that consumer's own decision, not this primitive's. */
.wasp-header {
  display: flex;
  align-items: center;
  gap: var(--wasp-space-3);
  padding: var(--wasp-space-3) var(--wasp-space-4);
  background: linear-gradient(155deg, var(--wasp-header-bg) 0%, var(--wasp-header-bg-2) 100%);
  color: var(--wasp-header-fg);
  font-family: var(--wasp-font-system);
}

/* Compact branded footer band. Deliberately flat -- the gradient depth
   treatment is a header-only accent, never applied to the footer. */
.wasp-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wasp-space-2);
  padding: var(--wasp-space-3) var(--wasp-space-4);
  background: var(--wasp-footer-bg);
  color: var(--wasp-footer-fg);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-xs);
}

/* Surface container: one level of elevation, no nested cards. */
.wasp-surface {
  padding: var(--wasp-space-4);
  background: var(--wasp-surface-bg);
  border: var(--wasp-border);
  border-radius: var(--wasp-radius-surface);
  box-shadow: var(--wasp-shadow-none);
}

/* Grouped-content card: the one restrained elevation above the page.
   Not every section is a card — .wasp-surface stays the structural,
   shadow-free surface. */
.wasp-card {
  padding: var(--wasp-space-5);
  background: var(--wasp-surface-raised);
  border: var(--wasp-border);
  border-radius: var(--wasp-radius-card);
  box-shadow: var(--wasp-shadow-card);
}

/* Subordinate supporting panel (developer options, secondary metadata):
   muted, compact, never elevated. */
.wasp-panel-subtle {
  padding: var(--wasp-space-4);
  background: var(--wasp-surface-muted);
  border: var(--wasp-border);
  border-radius: var(--wasp-radius-card);
  box-shadow: var(--wasp-shadow-none);
}

/* Accessible action foundation (primary by default). */
.wasp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wasp-space-2);
  min-height: var(--wasp-control-height);
  padding: var(--wasp-control-padding-y) var(--wasp-space-4);
  border: var(--wasp-border-width) solid var(--wasp-brand-primary);
  border-radius: var(--wasp-radius);
  background: var(--wasp-brand-primary);
  color: var(--wasp-brand-primary-fg);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-base);
  font-weight: var(--wasp-weight-semibold);
  line-height: var(--wasp-line-height-tight);
  cursor: pointer;
  text-decoration: none;
}

.wasp-button:hover:not(:disabled) {
  background: var(--wasp-brand-primary-hover);
  border-color: var(--wasp-brand-primary-hover);
}

.wasp-button:active:not(:disabled) {
  background: var(--wasp-brand-primary-active);
  border-color: var(--wasp-brand-primary-active);
}

.wasp-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wasp-button:focus-visible {
  outline: var(--wasp-focus-ring);
  outline-offset: var(--wasp-focus-offset);
}

/* Secondary action: outlined, keeps the primary action unambiguous. */
.wasp-button--secondary {
  background: var(--wasp-surface-bg);
  border-color: var(--wasp-brand-primary);
  color: var(--wasp-brand-primary);
}

.wasp-button--secondary:hover:not(:disabled) {
  background: var(--wasp-brand-primary-subtle);
  border-color: var(--wasp-brand-primary);
  color: var(--wasp-brand-primary);
}

.wasp-button--secondary:active:not(:disabled) {
  background: var(--wasp-brand-primary-subtle);
  border-color: var(--wasp-brand-primary-active);
  color: var(--wasp-brand-primary-active);
}

/* Restrained/quiet action (for example "Cancel and return"). */
.wasp-button--quiet {
  background: transparent;
  border-color: var(--wasp-border-color);
  color: var(--wasp-text);
}

.wasp-button--quiet:hover:not(:disabled) {
  background: var(--wasp-surface-muted);
  border-color: var(--wasp-border-strong);
  color: var(--wasp-text);
}

.wasp-button--quiet:active:not(:disabled) {
  background: var(--wasp-surface-muted);
  border-color: var(--wasp-border-strong);
  color: var(--wasp-text);
}

/* Destructive/cancel-emphasis action. Use sparingly. The semantic failure
   family has no separate hover token; a slight darkening filter stands in. */
.wasp-button--destructive {
  background: var(--wasp-failure);
  border-color: var(--wasp-failure);
  color: var(--wasp-failure-fg);
}

.wasp-button--destructive:hover:not(:disabled) {
  background: var(--wasp-failure);
  border-color: var(--wasp-failure);
  filter: brightness(0.94);
}

.wasp-button--destructive:active:not(:disabled) {
  background: var(--wasp-failure);
  border-color: var(--wasp-failure);
  filter: brightness(0.88);
}

/* Loading: pair with aria-busy="true" and disabled. Never colour-only. */
.wasp-button--loading {
  opacity: 0.7;
  cursor: progress;
}

/* Accessible link foundation. */
.wasp-link {
  color: var(--wasp-brand-primary);
  font-family: var(--wasp-font-system);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wasp-link:hover {
  color: var(--wasp-brand-primary-hover);
}

.wasp-link:focus-visible {
  outline: var(--wasp-focus-ring);
  outline-offset: var(--wasp-focus-offset);
}

/* Accessible form-control foundation (the single shared input primitive). */
.wasp-control {
  min-height: var(--wasp-control-height);
  padding: var(--wasp-control-padding-y) var(--wasp-control-padding-x);
  border: var(--wasp-border);
  border-radius: var(--wasp-radius);
  background: var(--wasp-surface-bg);
  color: var(--wasp-text);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-base);
  line-height: var(--wasp-line-height-tight);
}

.wasp-control:hover:not(:disabled):not(:read-only) {
  border-color: var(--wasp-border-strong);
}

.wasp-control::placeholder {
  color: var(--wasp-text-muted);
  opacity: 1;
}

.wasp-control:read-only {
  background: var(--wasp-page-bg);
}

.wasp-control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.wasp-control:focus-visible {
  outline: var(--wasp-focus-ring);
  outline-offset: var(--wasp-focus-offset);
}

/* Validation-error state: border + text, never colour alone. */
.wasp-control--error {
  border-color: var(--wasp-failure);
  border-width: var(--wasp-border-width-strong);
}

/* Field label. */
.wasp-label {
  display: block;
  margin-bottom: var(--wasp-space-1);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-sm);
  font-weight: var(--wasp-weight-semibold);
  color: var(--wasp-text);
}

/* Help text under a field. */
.wasp-help {
  margin-top: var(--wasp-space-1);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-xs);
  color: var(--wasp-text-muted);
}

/* Error text under a field: pairs with .wasp-control--error. */
.wasp-error-text {
  margin-top: var(--wasp-space-1);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-xs);
  font-weight: var(--wasp-weight-semibold);
  color: var(--wasp-failure);
}

/* Monetary amount presentation: tabular numerals, no wrapping surprises.
   Now set in the monospace utility face -- money reads as data, not prose. */
.wasp-amount {
  font-family: var(--wasp-font-mono);
  font-size: var(--wasp-font-size-amount);
  font-weight: var(--wasp-weight-semibold);
  line-height: var(--wasp-line-height-tight);
  font-variant-numeric: tabular-nums;
}

/* Status/feedback line: semantic edge + text, never colour alone. */
.wasp-status {
  display: block;
  padding: var(--wasp-space-3);
  border: var(--wasp-border);
  border-left-width: 4px;
  border-radius: var(--wasp-radius);
  background: var(--wasp-surface-bg);
  color: var(--wasp-text);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-sm);
}

.wasp-status--success {
  border-left-color: var(--wasp-success);
}

.wasp-status--failure {
  border-left-color: var(--wasp-failure);
}

.wasp-status--processing {
  border-left-color: var(--wasp-processing);
}

.wasp-status--info {
  border-left-color: var(--wasp-info);
}

/* ------------------------------------------------------------------ */
/* Segmented control — one shared primitive for mutually exclusive    */
/* choices (for example a rendering-mode or asset-source selector).   */
/*                                                                    */
/* Required markup (native radios are the state source of truth):     */
/*   <fieldset>                                                       */
/*     <legend>…</legend>                                             */
/*     <div class="wasp-segmented" role="radiogroup" aria-label="…">  */
/*       <label class="wasp-segment">                                 */
/*         <input type="radio" name="…" value="…" checked>            */
/*         <span>Option</span>                                        */
/*       </label>                                                     */
/*       …                                                            */
/*     </div>                                                         */
/*   </fieldset>                                                      */
/* ------------------------------------------------------------------ */

.wasp-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--wasp-space-1);
  padding: var(--wasp-space-1);
  background: var(--wasp-surface-muted);
  border: var(--wasp-border);
  border-radius: var(--wasp-radius);
}

.wasp-segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wasp-control-height-small);
  min-width: var(--wasp-touch-target);
  padding: 0 var(--wasp-space-4);
  border-radius: calc(var(--wasp-radius) - 2px);
  color: var(--wasp-text-muted);
  font-family: var(--wasp-font-system);
  font-size: var(--wasp-font-size-sm);
  font-weight: var(--wasp-weight-semibold);
  line-height: var(--wasp-line-height-tight);
  cursor: pointer;
  user-select: none;
}

/* The native radio stays in the accessibility tree and keeps keyboard
   behaviour; only its rendering is suppressed. */
.wasp-segment > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wasp-segment:hover {
  color: var(--wasp-text);
}

/* Selected state comes from the NATIVE checked state — never a manually
   synchronised class. Quiet treatment: raised surface + brand text. */
.wasp-segment:has(> input:checked) {
  background: var(--wasp-surface-bg);
  color: var(--wasp-brand-primary);
  box-shadow: var(--wasp-shadow-subtle);
}

.wasp-segment:has(> input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Visible keyboard focus on the visible label. :focus-within is the broadly
   supported indicator; where :has() is supported the ring narrows to
   keyboard-driven focus only. Never colour-alone, never removed. */
.wasp-segment:focus-within {
  outline: var(--wasp-focus-ring);
  outline-offset: var(--wasp-focus-offset);
}

@supports selector(:has(*)) {
  .wasp-segment:focus-within {
    outline: none;
  }

  .wasp-segment:has(> input:focus-visible) {
    outline: var(--wasp-focus-ring);
    outline-offset: var(--wasp-focus-offset);
  }
}