/* ==========================================================================
   components.css - the component style rules, extracted from index.html's
   <style> block so BOTH the explorer and Storybook can consume them.
   Depends on design-tokens.css for the --token values. Auto-generated:
   re-run scratchpad/extract-css.mjs if the component CSS in index.html changes.
   ========================================================================== */

/* ==========================================================================
       Explorer chrome - styling for the showcase page itself.
       The components below are built entirely from design-tokens.css variables.
       ========================================================================== */

* {
  box-sizing: border-box;
}

/* Form controls don't inherit font-family by default - force Satoshi
       so every component (buttons, inputs, tabs, etc.) uses the brand font. */
button,
input,
select,
textarea {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text-body-bold);
  line-height: 1.5;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, var(--spacing-4));
  border: var(--size-2) solid transparent;
  /* reset native button border */
  outline: none;
  /* replace UA focus ring with pressed-outline below */
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Primary buttons carry no border (the base .btn reserves a 2px transparent
   border for the outlined/error variants; primary should sit flush). */
.btn.primary {
  border: 0;
}

/* Elevation on all buttons EXCEPT outlined & disabled */
.btn:not(.outlined):not(.disabled) {
  box-shadow: var(--effect-button);
}

/* Hover elevation on the same set (real :hover + playground .pg-hover) */
.btn:not(.outlined):not(.disabled):hover,
.btn:not(.outlined):not(.disabled).pg-hover {
  box-shadow: var(--effect-button-hover);
}

/* One icon size for every button size was too coarse: --btn-icon-size (24px)
   is right from md (48px tall) upward, but on a 32px-tall .btn-sm with 12px
   text it filled three quarters of the button and read as twice the label.
   Each size can now override it the same way it overrides --btn-gap; the
   fallback keeps every size that doesn't exactly where it was. */
.btn svg {
  width: var(--btn-icon, var(--btn-icon-size));
  height: var(--btn-icon, var(--btn-icon-size));
}

/* Sizes */
.btn-xl {
  padding: var(--btn-xl-padding-vertical) var(--btn-xl-padding-horizontal);
  --btn-gap: var(--btn-xl-gap);
  border-radius: var(--btn-xl-corner-radius);
  font: var(--btn-xl-font);
  max-height: var(--btn-xl-max-height);
  /* host for the pointer-tracking dawn glow (see ::after below) */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* XL-only: a single dawn-shade blob that travels vertically across the button.
       An oversized radial gradient rests at the bottom by default; on hover its
       background-position animates straight up to the top, so the colour glides
       bottom-to-top. `screen` blending keeps the label crisp. */
.btn-xl.primary:not(.disabled)::before,
.btn-lg.primary:not(.disabled)::before,
.btn-md.primary:not(.disabled)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center,
      color-mix(in srgb, var(--color-dawn-500) 70%, transparent) 0%,
      transparent 55%);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 50% 100%;   /* default: dawn blob at the bottom */
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position .5s cubic-bezier(.22, .61, .36, 1);
  z-index: 1;
}

/* On hover the blob glides straight up to the top */
.btn-xl.primary:not(.disabled):hover::before,
.btn-xl.primary:not(.disabled).pg-hover::before,
.btn-lg.primary:not(.disabled):hover::before,
.btn-lg.primary:not(.disabled).pg-hover::before,
.btn-md.primary:not(.disabled):hover::before,
.btn-md.primary:not(.disabled).pg-hover::before {
  background-position: 50% 0%;
}

/* XL-only: the elevation drop shadow tracks opposite the dawn highlight,
       as if the pointer were a light source. JS feeds --btn-shadow-x /
       --btn-shadow-y (already negated relative to the pointer); the inset
       bevel highlight/shadow are preserved. Fallback keeps the default
       down-right elevation before the first pointermove. */
.btn-xl.primary:not(.disabled):hover,
.btn-xl.primary:not(.disabled).pg-hover,
.btn-lg.primary:not(.disabled):hover,
.btn-lg.primary:not(.disabled).pg-hover,
.btn-md.primary:not(.disabled):hover,
.btn-md.primary:not(.disabled).pg-hover {
  box-shadow:
    var(--highlight-button),
    var(--shadow-button),
    var(--btn-shadow-x, 4px) var(--btn-shadow-y, 4px) 10px 2px rgba(0, 0, 0, 0.18);
}

/* Pressed state: drop the lift-off elevation and keep only the inset bevel
       (--effect-button-pressed), so primary and error buttons read as seated
       flush to the surface. On a real click :hover is active too, and the hover
       shadow rules are (0,4,0); the extra :not() here lifts this to (0,5,0) so
       the pressed look wins whether pressed by pointer (:active) or forced in
       the playground (.pg-active). */
.btn.primary:not(.outlined):not(.disabled):active,
.btn.primary:not(.outlined):not(.disabled).pg-active,
.btn.error:not(.outlined):not(.disabled):active,
.btn.error:not(.outlined):not(.disabled).pg-active {
  box-shadow: var(--effect-button-pressed);
}

/* On hover, keep the primary button's base background exactly as its default
       state - only the dawn blob moves. Extra .btn raises specificity so this
       wins over the per-variant :hover / .pg-hover background rules regardless
       of order. Primary-only: outlined/error/disabled keep their normal hover. */
.btn.btn-xl.primary:hover,
.btn.btn-xl.primary.pg-hover {
  background: var(--btn-xl-primary-default-bg);
}

.btn.btn-lg.primary:hover,
.btn.btn-lg.primary.pg-hover {
  background: var(--btn-lg-primary-default-bg);
}

.btn.btn-md.primary:hover,
.btn.btn-md.primary.pg-hover {
  background: var(--btn-md-primary-default-bg);
}

.btn.btn-md.error:hover,
.btn.btn-md.error.pg-hover {
  background: var(--btn-md-error-default-bg);
}

.btn.btn-md.outlined:hover,
.btn.btn-md.outlined.pg-hover {
  background: var(--btn-md-outlined-default-bg);
}

.btn-lg {
  padding: var(--btn-lg-padding-vertical) var(--btn-lg-padding-horizontal);
  --btn-gap: var(--btn-lg-gap);
  border-radius: var(--btn-lg-corner-radius);
  font: var(--btn-lg-font);
  max-height: var(--btn-lg-max-height);
  /* host for the pointer-tracking dawn glow (see ::before below) */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-md {
  padding: var(--btn-md-padding-vertical) var(--btn-md-padding-horizontal);
  --btn-gap: var(--btn-md-gap);
  border-radius: var(--btn-md-corner-radius);
  font: var(--btn-md-font);
  max-height: var(--btn-md-max-height);
  /* host for the pointer-tracking dawn glow (see ::before below) */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-sm {
  padding: var(--btn-sm-padding-vertical) var(--btn-sm-padding-horizontal);
  --btn-gap: var(--btn-sm-gap);
  /* 16px in a 32px-tall button - the same half-the-control ratio .icon-btn
     already uses for its 32px box, and a readable step above the 12px label. */
  --btn-icon: var(--btn-sm-icon-size);
  border-radius: var(--btn-sm-corner-radius);
  font: var(--btn-sm-font);
  max-height: var(--btn-sm-max-height);
}

/* XL variants */
.btn-xl.primary {
  background: var(--btn-xl-primary-default-bg);
  color: var(--btn-xl-primary-text);
}

.btn-xl.primary:hover {
  background: var(--btn-xl-primary-hover-bg);
}

.btn-xl.outlined {
  background: var(--btn-xl-outlined-default-bg);
  color: var(--btn-xl-outlined-text);
  border-color: var(--btn-xl-outlined-outline);
}

.btn-xl.outlined:hover {
  background: var(--btn-xl-outlined-hover-bg);
  border-color: var(--btn-xl-outlined-hover-outline);
  color: var(--btn-xl-outlined-hover-text);
}

.btn-xl.error {
  background: var(--btn-xl-error-default-bg);
  color: var(--btn-xl-error-text);
}

.btn-xl.error:hover {
  background: var(--btn-xl-error-hover-bg);
}

.btn-xl.disabled {
  background: var(--btn-xl-disabled-default-bg);
  color: var(--btn-xl-disabled-text);
  border-color: var(--btn-xl-disabled-outline);
  cursor: not-allowed;
}

/* LG variants */
.btn-lg.primary {
  background: var(--btn-lg-primary-default-bg);
  color: var(--btn-lg-primary-text);
}

.btn-lg.primary:hover {
  background: var(--btn-lg-primary-hover-bg);
}

.btn-lg.outlined {
  background: var(--btn-lg-outlined-default-bg);
  color: var(--btn-lg-outlined-text);
  border-color: var(--btn-lg-outlined-outline);
}

.btn-lg.outlined:hover {
  background: var(--btn-lg-outlined-hover-bg);
  border-color: var(--btn-lg-outlined-hover-outline);
  color: var(--btn-lg-outlined-hover-text);
}

.btn-lg.error {
  background: var(--btn-lg-error-default-bg);
  color: var(--btn-lg-error-text);
}

.btn-lg.error:hover {
  background: var(--btn-lg-error-hover-bg);
}

.btn-lg.disabled {
  background: var(--btn-lg-disabled-default-bg);
  color: var(--btn-lg-disabled-text);
  border-color: var(--btn-lg-disabled-outline);
  cursor: not-allowed;
}

/* MD variants */
.btn-md.primary {
  background: var(--btn-md-primary-default-bg);
  color: var(--btn-md-primary-text);
}

.btn-md.primary:hover {
  background: var(--btn-md-primary-hover-bg);
}

.btn-md.outlined {
  background: var(--btn-md-outlined-default-bg);
  color: var(--btn-md-outlined-text);
  border-color: var(--btn-md-outlined-outline);
}

.btn-md.outlined:hover {
  background: var(--btn-md-outlined-hover-bg);
  border-color: var(--btn-md-outlined-hover-outline);
  color: var(--btn-md-outlined-hover-text);
}

.btn-md.error {
  background: var(--btn-md-error-default-bg);
  color: var(--btn-md-error-text);
}

.btn-md.error:hover {
  background: var(--btn-md-error-hover-bg);
}

.btn-md.disabled {
  background: var(--btn-md-disabled-default-bg);
  color: var(--btn-md-disabled-text);
  border-color: var(--btn-md-disabled-outline);
  cursor: not-allowed;
}

/* SM variants */
.btn-sm.primary {
  background: var(--btn-sm-primary-default-bg);
  color: var(--btn-sm-primary-text);
}

.btn-sm.primary:hover {
  background: var(--btn-sm-primary-hover-bg);
}

.btn-sm.outlined {
  background: var(--btn-sm-outlined-default-bg);
  color: var(--btn-sm-outlined-text);
  border-color: var(--btn-sm-outlined-outline);
}

.btn-sm.outlined:hover {
  background: var(--btn-sm-outlined-hover-bg);
  border-color: var(--btn-sm-outlined-hover-outline);
  color: var(--btn-sm-outlined-hover-text);
}

.btn-sm.error {
  background: var(--btn-sm-error-default-bg);
  color: var(--btn-sm-error-text);
}

.btn-sm.error:hover {
  background: var(--btn-sm-error-hover-bg);
}

.btn-sm.disabled {
  background: var(--btn-sm-disabled-default-bg);
  color: var(--btn-sm-disabled-text);
  border-color: var(--btn-sm-disabled-outline);
  cursor: not-allowed;
}

/* ---- Playground forced states (mirror :hover / :active on the static preview) ---- */
.btn-xl.primary.pg-hover {
  background: var(--btn-xl-primary-hover-bg);
}

.btn-lg.primary.pg-hover {
  background: var(--btn-lg-primary-hover-bg);
}

.btn-md.primary.pg-hover {
  background: var(--btn-md-primary-hover-bg);
}

.btn-sm.primary.pg-hover {
  background: var(--btn-sm-primary-hover-bg);
}

.btn-xl.outlined.pg-hover {
  background: var(--btn-xl-outlined-hover-bg);
  border-color: var(--btn-xl-outlined-hover-outline);
  color: var(--btn-xl-outlined-hover-text);
}

.btn-lg.outlined.pg-hover {
  background: var(--btn-lg-outlined-hover-bg);
  border-color: var(--btn-lg-outlined-hover-outline);
  color: var(--btn-lg-outlined-hover-text);
}

.btn-md.outlined.pg-hover {
  background: var(--btn-md-outlined-hover-bg);
  border-color: var(--btn-md-outlined-hover-outline);
  color: var(--btn-md-outlined-hover-text);
}

.btn-sm.outlined.pg-hover {
  background: var(--btn-sm-outlined-hover-bg);
  border-color: var(--btn-sm-outlined-hover-outline);
  color: var(--btn-sm-outlined-hover-text);
}

.btn-xl.error.pg-hover {
  background: var(--btn-xl-error-hover-bg);
}

.btn-lg.error.pg-hover {
  background: var(--btn-lg-error-hover-bg);
}

.btn-md.error.pg-hover {
  background: var(--btn-md-error-hover-bg);
}

.btn-sm.error.pg-hover {
  background: var(--btn-sm-error-hover-bg);
}

/* Primary buttons have no visible border in any state */
.btn.primary,
.btn.primary:hover,
.btn.primary:active,
.btn.primary.pg-active {
  border-color: transparent;
}

.text-btn.primary.pg-hover {
  font: var(--text-btn-font-hover);
}

.tab-btn.pg-hover {
  background: var(--tab-btn-hover-bg);
  color: var(--tab-btn-hover-text);
}

.data-table tbody tr.pg-hover {
  background: var(--table-row-hover-bg);
}

/* ---- Text buttons ---- */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--text-btn-gap);
  padding: var(--text-btn-padding-vertical) var(--text-btn-padding-horizontal);
  border-radius: var(--text-btn-corner-radius);
  background: none;
  border: none;
  cursor: pointer;
  font: var(--text-btn-md-font);
}

/* Size variants. Both spellings are honoured - the CSS defined `.text-btn.sm`
   but every call site writes `text-btn-sm`, so the size silently never applied
   and small buttons kept the 16px default padding. Each size now sets padding
   as well as font, so a "small" text button is actually small. */
.text-btn.lg,
.text-btn.text-btn-lg {
  font: var(--text-btn-lg-font);
  padding: var(--text-btn-lg-padding-vertical) var(--text-btn-lg-padding-horizontal);
}

.text-btn.md,
.text-btn.text-btn-md {
  font: var(--text-btn-md-font);
  padding: var(--text-btn-md-padding-vertical) var(--text-btn-md-padding-horizontal);
}

.text-btn.sm,
.text-btn.text-btn-sm {
  font: var(--text-btn-sm-font);
  padding: var(--text-btn-sm-padding-vertical) var(--text-btn-sm-padding-horizontal);
}

.text-btn svg {
  width: 1.25em;
  height: 1.25em;
}

.text-btn.primary {
  color: var(--text-btn-primary-text);
}

.text-btn.error {
  color: var(--text-btn-error-text);
}

.text-btn.disabled {
  color: var(--text-btn-disabled-text);
  cursor: not-allowed;
}

.text-btn.lg:not(.disabled):hover {
  font: var(--text-btn-lg-font-hover);
}

.text-btn.md:not(.disabled):hover,
.text-btn.text-btn-md:not(.disabled):hover,
.text-btn:not(.lg):not(.sm):not(.text-btn-lg):not(.text-btn-sm):not(.disabled):hover {
  font: var(--text-btn-md-font-hover);
}

.text-btn.sm:not(.disabled):hover,
.text-btn.text-btn-sm:not(.disabled):hover {
  font: var(--text-btn-sm-font-hover);
}

/* ---- FAB ---- */
.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-56);
  height: var(--size-56);
  border-radius: var(--fab-corner-radius);
  border: none;
  cursor: pointer;
  box-shadow: var(--fab-elevation);
}

.fab svg {
  width: var(--size-24);
  height: var(--size-24);
}

.fab.primary {
  background: var(--fab-primary-bg);
  color: var(--fab-primary-icon);
  box-shadow: var(--fab-elevation);
}

.fab.primary:hover {
  background: var(--fab-primary-hover-bg);
}

.fab.disabled {
  background: var(--fab-disabled-bg);
  color: var(--fab-disabled-icon);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Icon button ---- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: var(--icon-btn-padding-vertical) var(--icon-btn-padding-horizontal);
  border-radius: var(--icon-btn-corner-radius);
  border: none;
  cursor: pointer;
}

.icon-btn svg {
  width: var(--icon-btn-icon-size);
  height: var(--icon-btn-icon-size);
}

/* Size variants (base .icon-btn is the small 32px box) */
.icon-btn-md {
  width: var(--icon-btn-md-size);
  height: var(--icon-btn-md-size);
}

.icon-btn-md svg {
  width: var(--icon-btn-md-icon-size);
  height: var(--icon-btn-md-icon-size);
}

.icon-btn-lg {
  width: var(--icon-btn-lg-size);
  height: var(--icon-btn-lg-size);
}

.icon-btn-lg svg {
  width: var(--icon-btn-lg-icon-size);
  height: var(--icon-btn-lg-icon-size);
}

.icon-btn.primary {
  background: var(--icon-btn-primary-bg);
  color: var(--icon-btn-primary-icon);
}

.icon-btn.primary:hover {
  background: var(--icon-btn-primary-hover-bg);
}

.icon-btn.disabled {
  background: var(--icon-btn-disabled-bg);
  color: var(--icon-btn-disabled-icon);
  cursor: not-allowed;
}

/* ---- Tab buttons ---- */
.tabs {
  display: inline-flex;
  gap: var(--tab-bar-gap);
  background: var(--tab-bar-bg);
  border: var(--size-1) solid var(--tab-bar-border);
  padding: var(--tab-bar-padding);
  border-radius: var(--border-radius-rounded);
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tab-btn-gap);
  padding: var(--tab-btn-padding-vertical) var(--tab-btn-padding-horizontal);
  border-radius: var(--tab-btn-corner-radius);
  background: var(--tab-btn-default-bg);
  color: var(--tab-btn-default-text);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font: var(--tab-btn-font);
  text-decoration: none;
}

/* ---- Tabs, sm ---- */
.tabs.tabs-sm {
  gap: var(--tab-bar-sm-gap);
  padding: var(--tab-bar-sm-padding);
}

.tabs-sm .tab-btn {
  gap: var(--tab-btn-sm-gap);
  padding: var(--tab-btn-sm-padding-vertical) var(--tab-btn-sm-padding-horizontal);
  font: var(--tab-btn-sm-font);
}

.tab-btn svg {
  width: 1.15em;
  height: 1.15em;
}

.tab-btn:hover {
  background: var(--tab-btn-hover-bg);
  color: var(--tab-btn-hover-text);
}

.tab-btn.active {
  background: var(--tab-btn-active-bg);
  color: var(--tab-btn-active-text);
  box-shadow: var(--tab-active-elevation);
}

/* ---- Input field ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  max-width: 360px;
}

/* Two (or more) .field side by side - e.g. password + confirm on the sign-up
   forms. It takes the same max-width as a single .field so the pair lines up
   with the full-width fields above and below it; without that the row would
   stretch to the form's full width while its neighbours stayed capped, and
   the right edges would disagree wherever the form is wider than the cap. */
.field-row {
  display: flex;
  gap: var(--spacing-12);
  max-width: 360px;
}

.field-row > .field {
  /* The row owns the cap now, so the children divide it evenly. min-width:0
     for the usual flex content-floor reason - see .field input below. */
  flex: 1;
  min-width: 0;
  max-width: none;
}

.field label {
  font: var(--input-label-font);
  color: var(--input-label-text);
}

.field .input-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  background: var(--input-default-bg);
  border: var(--size-2) solid var(--input-default-border);
  border-radius: var(--border-radius-12);
  padding: var(--spacing-12) var(--spacing-16);
  /* Itself a flex item (of .field's column) as well as a flex container -
     same min-width:auto content-floor issue as .field input above, one
     level up. Needed for two .field side by side to actually shrink to
     fit instead of forcing their shared row wider than its container. */
  min-width: 0;
}

.field .input-wrap svg {
  width: var(--size-20);
  height: var(--size-20);
  color: var(--input-default-icon);
  flex-shrink: 0;
}

.field input {
  border: none;
  outline: none;
  flex: 1;
  /* Flex items default to min-width:auto (their content's min-content size),
     which for a text input is its unstyled intrinsic width - wide enough to
     force a parent .field out of a cramped row (e.g. two fields side by
     side) even though the field itself is free to shrink. Only matters
     there; a standalone full-width .field never hits this floor. */
  min-width: 0;
  font: var(--input-field-font);
  background: transparent;
  color: var(--input-filled-text);
}

/* A checkbox or radio is a fixed-size control, not a text field, so it must
   not take the flex:1 above - that makes it grow into whatever room the row
   has and drift away from its own label. Only shows up once the row is wider
   than the label's text (the sign-up consent rows on a wide form). */
.field input[type="checkbox"],
.field input[type="radio"] {
  flex: none;
}

.field input::placeholder {
  color: var(--input-default-placeholder-text);
}

.field .helper {
  font: var(--input-helper-font);
  color: var(--input-helper-text);
}

.field.error .input-wrap {
  border-color: var(--input-error-border);
}

.field.error .input-wrap svg {
  color: var(--input-error-icon);
}

.field.error .helper {
  color: var(--input-error-helper-text);
}

.field.disabled .input-wrap {
  background: var(--input-disabled-bg);
  border-color: var(--input-disabled-border);
}

.field.disabled .input-wrap svg {
  color: var(--input-disabled-icon);
}

.field.disabled input {
  color: var(--input-disabled-text);
}

.field.disabled input::placeholder {
  color: var(--input-default-placeholder-disabled-text);
}

/* ---- Accordion ---- */
.accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--accordion-gap);
}

.accordion details {
  background: var(--accordion-closed-bg);
  border: var(--size-1) solid var(--accordion-border);
  border-radius: var(--accordion-corner-radius);
  padding: var(--accordion-padding-vertical) var(--accordion-padding-horizontal);
}

.accordion details[open] {
  background: var(--accordion-open-bg);
}

.accordion summary {
  cursor: pointer;
  font: var(--accordion-question-font);
  color: var(--accordion-q-text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  font-size: var(--accordion-marker-size);
  color: var(--accordion-marker-color);
}

.accordion details[open] summary::after {
  content: "\2212";
}

.accordion p {
  margin: var(--spacing-12) 0 0;
  font: var(--accordion-answer-font);
  color: var(--accordion-a-text);
}

/* ---- Table ---- */
.data-table {
  width: 100%;
  /* separate (not collapse) so border-radius + the outer border actually
     render on a rounded, overflow-clipped table; spacing 0 keeps cells flush */
  border-collapse: separate;
  border-spacing: 0;
  font: var(--table-cell-font);
  color: var(--table-cell-text);
  background: var(--table-row-bg);
  border: var(--size-1) solid var(--table-outline);
  border-radius: var(--table-corner-radius);
  overflow: hidden;
}

.data-table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  font: var(--table-header-font);
  text-align: left;
  padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
}

.data-table td {
  padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
  border-top: var(--size-1) solid var(--table-border);
}

/* All rows share the same background (no zebra striping) */
.data-table tbody tr:hover {
  background: var(--table-row-hover-bg);
}

.data-table tbody tr.selected {
  background: var(--table-row-selected-bg);
}

/* First column reads as a row label */
.data-table tbody td:first-child {
  color: var(--table-cell-text-strong);
  font: var(--table-header-font);
}

.data-table tfoot td {
  background: var(--table-footer-bg);
  color: var(--table-footer-text);
  font: var(--table-header-font);
  border-top: var(--size-2) solid var(--table-border);
}

/* ---- Table, compact ----
   Denser rows for long lists (guest manager). Same chrome, less air. */
.data-table.compact thead th,
.data-table.compact td,
.data-table.compact tfoot td {
  padding: var(--table-compact-cell-padding-vertical) var(--table-compact-cell-padding-horizontal);
}

/* ---- Table composer row ----
   The row where a new record is being typed. Tinted so it reads as a form
   rather than data, and never picks up the hover tint. */
.data-table tbody tr.row-new,
.data-table tbody tr.row-new:hover {
  background: var(--table-row-new-bg);
}

.data-table tbody tr.row-new td {
  border-top: var(--size-1) solid var(--table-row-new-border);
  vertical-align: middle;
}

/* The composer row's first cell is a form field, not a row label */
.data-table tbody tr.row-new td:first-child {
  font: var(--table-cell-font);
}

/* Inline editor inside a table cell */
.cell-input {
  width: 100%;
  min-width: 0;
  font: var(--table-cell-input-font);
  color: var(--table-cell-input-text);
  background: var(--table-cell-input-bg);
  border: var(--size-1) solid var(--table-cell-input-border);
  border-radius: var(--table-cell-input-radius);
  padding: var(--table-cell-input-padding-vertical) var(--table-cell-input-padding-horizontal);
  outline: none;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.cell-input::placeholder {
  color: var(--table-cell-input-placeholder);
}

.cell-input:focus {
  border-color: var(--table-cell-input-focus-border);
  box-shadow: 0 0 0 var(--size-2) var(--table-cell-input-focus-ring);
}

/* Status pill used inside table cells */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-2) var(--spacing-10);
  border-radius: var(--border-radius-rounded);
  font: var(--body-b7em);
}

.pill svg {
  width: 1em;
  height: 1em;
}

.pill.success {
  background: var(--color-surface-brand-primary-extralight);
  color: var(--color-text-brand-primary-bold);
}

.pill.warn {
  background: var(--color-surface-brand-secondary-extralight);
  color: var(--color-text-brand-secondary-bold);
}

.pill.error {
  background: var(--color-surface-error-extralight);
  color: var(--color-text-error-bold);
}

/* ============================ ALERT ============================ */
.alert {
  display: flex;
  gap: var(--alert-gap);
  align-items: flex-start;
  max-width: 480px;
  padding: var(--alert-padding-vertical) var(--alert-padding-horizontal);
  border: var(--alert-border-width) solid transparent;
  border-radius: var(--alert-corner-radius);
}

.alert .alert-lead {
  flex-shrink: 0;
  display: inline-flex;
}

.alert .alert-lead svg {
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
}

.alert .alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--alert-action-gap);
}

.alert .alert-text {
  display: flex;
  flex-direction: column;
  gap: var(--alert-content-gap);
}

.alert .alert-title {
  font: var(--alert-title-font);
}

.alert .alert-subtitle {
  font: var(--alert-subtitle-font);
  color: var(--alert-subtitle);
}

.alert .alert-action {
  width: fit-content;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: var(--alert-action-font);
}

.alert .alert-action:hover {
  font: var(--alert-action-font-hover);
}

.alert .alert-close {
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  color: var(--alert-close-icon);
}

.alert .alert-close svg {
  width: var(--size-20);
  height: var(--size-20);
}

.alert.default {
  background: var(--alert-default-bg);
  border-color: var(--alert-default-border);
}

.alert.default .alert-lead {
  color: var(--alert-default-icon);
}

.alert.default .alert-title {
  color: var(--alert-default-title);
}

.alert.default .alert-action {
  color: var(--alert-default-action);
}

.alert.success {
  background: var(--alert-success-bg);
  border-color: var(--alert-success-border);
}

.alert.success .alert-lead {
  color: var(--alert-success-icon);
}

.alert.success .alert-title {
  color: var(--alert-success-title);
}

.alert.success .alert-action {
  color: var(--alert-success-action);
}

.alert.warning {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
}

.alert.warning .alert-lead {
  color: var(--alert-warning-icon);
}

.alert.warning .alert-title {
  color: var(--alert-warning-title);
}

.alert.warning .alert-action {
  color: var(--alert-warning-action);
}

.alert.danger {
  background: var(--alert-danger-bg);
  border-color: var(--alert-danger-border);
}

.alert.danger .alert-lead {
  color: var(--alert-danger-icon);
}

.alert.danger .alert-title {
  color: var(--alert-danger-title);
}

.alert.danger .alert-action {
  color: var(--alert-danger-action);
}

/* ============================ CHECKBOX ============================ */
.cbx {
  display: inline-flex;
  gap: var(--checkbox-gap);
  align-items: center;
  cursor: pointer;
}

.cbx .box {
  width: var(--checkbox-size-md);
  height: var(--checkbox-size-md);
  flex-shrink: 0;
  border: var(--checkbox-border-width) solid var(--checkbox-unchecked-border);
  border-radius: var(--checkbox-corner-radius);
  background: var(--checkbox-unchecked-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--checkbox-checked-icon);
}

.cbx.sm .box {
  width: var(--checkbox-size-sm);
  height: var(--checkbox-size-sm);
}

.cbx .box svg {
  width: var(--checkbox-icon-size-md);
  height: var(--checkbox-icon-size-md);
}

.cbx.sm .box svg {
  width: var(--checkbox-icon-size-sm);
  height: var(--checkbox-icon-size-sm);
}

.cbx.checked .box,
.cbx.indeterminate .box {
  background: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-border);
  box-shadow: var(--checkbox-checked-effect);
}

.cbx.disabled {
  cursor: not-allowed;
}

.cbx.disabled .box {
  background: var(--checkbox-disabled-bg);
  border-color: var(--checkbox-disabled-border);
  color: var(--checkbox-disabled-icon);
}

.cbx .cbx-text {
  display: flex;
  flex-direction: column;
  gap: var(--checkbox-helper-gap);
}

.cbx .cbx-label {
  font: var(--checkbox-label-font);
  color: var(--checkbox-label-text);
}

.cbx.sm .cbx-label {
  font: var(--checkbox-label-font-sm);
}

.cbx .cbx-helper {
  font: var(--checkbox-helper-font);
  color: var(--checkbox-helper-text);
}

.cbx.disabled .cbx-label,
.cbx.disabled .cbx-helper {
  color: var(--checkbox-disabled-text);
}

/* ============================ RADIO ============================ */
.rdo {
  display: inline-flex;
  gap: var(--radio-gap);
  align-items: center;
  cursor: pointer;
}

.rdo .dot-wrap {
  width: var(--radio-size-md);
  height: var(--radio-size-md);
  flex-shrink: 0;
  /* border drawn on the inner side (inset), like a Figma inside-stroke */
  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-unselected-border);
  border-radius: var(--border-radius-rounded);
  background: var(--radio-unselected-bg);
  padding: var(--radio-dot-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rdo.sm .dot-wrap {
  width: var(--radio-size-sm);
  height: var(--radio-size-sm);
}

.rdo .dot {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-rounded);
  background: transparent;
}

.rdo.selected .dot-wrap {
  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-selected-border);
  background: var(--radio-selected-bg);
}

.rdo.selected .dot {
  background: var(--radio-selected-dot);
  box-shadow: var(--radio-selected-effect);
}

.rdo.disabled {
  cursor: not-allowed;
}

.rdo.disabled .dot-wrap {
  background: var(--radio-disabled-bg);
  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-disabled-border);
}

.rdo.disabled.selected .dot {
  background: var(--radio-disabled-dot);
}

.rdo .rdo-text {
  display: flex;
  flex-direction: column;
  gap: var(--radio-helper-gap);
}

.rdo .rdo-label {
  font: var(--radio-label-font);
  color: var(--radio-label-text);
}

.rdo.sm .rdo-label {
  font: var(--radio-label-font-sm);
}

.rdo .rdo-helper {
  font: var(--radio-helper-font);
  color: var(--radio-helper-text);
}

.rdo.disabled .rdo-label,
.rdo.disabled .rdo-helper {
  color: var(--radio-disabled-text);
}

/* ============================ TOGGLE ============================ */
.tgl {
  display: inline-flex;
  gap: var(--toggle-gap);
  align-items: center;
  cursor: pointer;
}

.tgl .track {
  width: var(--toggle-width);
  height: var(--toggle-height);
  flex-shrink: 0;
  padding: var(--toggle-padding);
  border: var(--toggle-border-width) solid var(--toggle-off-border);
  border-radius: var(--toggle-track-radius);
  background: var(--toggle-off-track);
  display: flex;
  align-items: center;
  transition:
    background var(--motion-duration-medium) var(--motion-ease-standard),
    border-color var(--motion-duration-medium) var(--motion-ease-standard);
}

.tgl .thumb {
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  border-radius: var(--toggle-thumb-radius);
  background: var(--toggle-off-thumb);
  /* spring easing gives the thumb a lively, slightly-overshooting slide */
  transition:
    transform var(--motion-duration-medium) var(--motion-ease-spring),
    background var(--motion-duration-fast) var(--motion-ease-standard);
}

.tgl.on .track {
  background: var(--toggle-on-track);
  border-color: var(--toggle-on-border);
}

.tgl.on .thumb {
  background: var(--toggle-on-thumb);
  transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - var(--toggle-padding) * 2 - var(--toggle-border-width) * 2));
}

.tgl.disabled {
  cursor: not-allowed;
}

.tgl.disabled .track {
  background: var(--toggle-disabled-track);
  border-color: var(--toggle-disabled-border);
}

.tgl.disabled .thumb {
  background: var(--toggle-disabled-thumb);
}

.tgl .tgl-label {
  font: var(--toggle-label-font);
  color: var(--toggle-label-text);
}

.tgl.disabled .tgl-label {
  color: var(--toggle-disabled-text);
}

/* ============================ BADGE & TAG ============================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--tag-gap);
  max-width: var(--tag-max-width);
  padding: var(--tag-padding-vertical) var(--tag-padding-horizontal);
  border: var(--size-1) solid transparent;
  border-radius: var(--tag-corner-radius);
  font: var(--tag-font);
  box-shadow: var(--tag-effect);
}

.tag .tag-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag .tag-dot {
  width: var(--tag-dot-size);
  height: var(--tag-dot-size);
  border-radius: var(--border-radius-rounded);
  flex-shrink: 0;
}

.tag .tag-close {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  flex-shrink: 0;
}

.tag svg {
  width: var(--tag-icon-size);
  height: var(--tag-icon-size);
}

.tag.default {
  background: var(--tag-default-bg);
  color: var(--tag-default-text);
  border-color: var(--tag-default-border);
}

.tag.default .tag-dot {
  background: var(--tag-default-dot);
}

.tag.success {
  background: var(--tag-success-bg);
  color: var(--tag-success-text);
  border-color: var(--tag-success-border);
}

.tag.success .tag-dot {
  background: var(--tag-success-dot);
}

.tag.warning {
  background: var(--tag-warning-bg);
  color: var(--tag-warning-text);
  border-color: var(--tag-warning-border);
}

.tag.warning .tag-dot {
  background: var(--tag-warning-dot);
}

.tag.danger {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-text);
  border-color: var(--tag-danger-border);
}

.tag.danger .tag-dot {
  background: var(--tag-danger-dot);
}

/* ============================ TOOLTIP ============================ */
.tooltip {
  position: relative;
  display: inline-block;
}

.tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-surface-body-extralight);
  border-radius: var(--border-radius-8);
  font: var(--body-b7em);
  color: var(--color-text-body-bold);
}

.tooltip .tip {
  position: absolute;
  width: max-content;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: var(--tooltip-corner-radius);
  box-shadow: var(--tooltip-elevation);
  font: var(--tooltip-font);
  z-index: 2;
}

.tooltip.top .tip {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.bottom .tip {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip.left .tip {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip.right .tip {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.tooltip .tip::after {
  content: '';
  position: absolute;
  width: var(--tooltip-arrow-size);
  height: var(--tooltip-arrow-size);
  background: var(--tooltip-bg);
  transform: rotate(45deg);
}

.tooltip.top .tip::after {
  bottom: calc(var(--tooltip-arrow-size) * -0.5);
  left: 50%;
  margin-left: calc(var(--tooltip-arrow-size) * -0.5);
}

.tooltip.bottom .tip::after {
  top: calc(var(--tooltip-arrow-size) * -0.5);
  left: 50%;
  margin-left: calc(var(--tooltip-arrow-size) * -0.5);
}

.tooltip.left .tip::after {
  right: calc(var(--tooltip-arrow-size) * -0.5);
  top: 50%;
  margin-top: calc(var(--tooltip-arrow-size) * -0.5);
}

.tooltip.right .tip::after {
  left: calc(var(--tooltip-arrow-size) * -0.5);
  top: 50%;
  margin-top: calc(var(--tooltip-arrow-size) * -0.5);
}

.tooltip.no-arrow .tip::after {
  display: none;
}

/* ============================ PAGINATION ============================ */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--pagination-gap);
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-size);
  height: var(--pagination-item-size);
  padding: 0 var(--spacing-8);
  border: none;
  border-radius: var(--pagination-corner-radius);
  background: var(--pagination-item-bg);
  color: var(--pagination-item-text);
  font: var(--pagination-font);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.pagination-item svg {
  width: var(--pagination-icon-size);
  height: var(--pagination-icon-size);
}

.pagination-item:hover,
.pagination-item.pg-hover {
  background: var(--pagination-item-hover-bg);
  color: var(--pagination-item-hover-text);
}

.pagination-item.active,
.pagination-item.active:hover {
  background: var(--pagination-active-bg);
  color: var(--pagination-active-text);
  box-shadow: var(--pagination-active-effect);
}

.pagination-item.disabled,
.pagination-item.disabled:hover {
  background: transparent;
  color: var(--pagination-disabled-text);
  cursor: not-allowed;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-size);
  height: var(--pagination-item-size);
  color: var(--pagination-item-text);
  font: var(--pagination-font);
}

/* ============================ CARD ============================ */
/* Invitation-template card: fixed-height media with a floating outline
       "Preview" button, and a padded text block below. Width is fluid -
       the height of the media stays constant. */
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--card-corner-radius);
  box-shadow: var(--card-elevation);
  /* clip the media's top corners to the card radius */
  overflow: hidden;
}

.card-media {
  position: relative;
  height: var(--card-image-height);
  flex-shrink: 0;
}

.card-media img {
  display: block;
  width: var(--card-image-width);
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-preview {
  position: absolute;
  top: var(--card-preview-offset);
  right: var(--card-preview-offset);
}

.card-body {
  display: flex;
  align-items: center;
  gap: var(--card-chevron-gap);
  padding: var(--card-content-padding-vertical) var(--card-content-padding-horizontal);
}

.card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--card-content-gap);
}

.card-chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--card-chevron-color);
}

.card-chevron svg {
  width: var(--card-chevron-size);
  height: var(--card-chevron-size);
}

.card-title {
  margin: 0;
  font: var(--card-title-font);
  color: var(--card-title-text);
}

.card-subtitle {
  margin: 0;
  font: var(--card-subtitle-font);
  color: var(--card-subtitle-text);
}

/* Mobile view - no separate variant; the card adapts at narrow widths.
       Title drops to b1em, supporting text stays b4, and the preview button
       steps down from lg to md by rebinding the md layout tokens. */
@media (max-width: 640px) {
  .card .card-title {
    font: var(--card-mobile-title-font);
  }

  .card .card-subtitle {
    font: var(--card-mobile-subtitle-font);
  }

  .card .card-preview {
    padding: var(--btn-md-padding-vertical) var(--btn-md-padding-horizontal);
    --btn-gap: var(--btn-md-gap);
    border-radius: var(--btn-md-corner-radius);
    font: var(--btn-md-font);
    max-height: var(--btn-md-max-height);
  }
}

/* ============================ INFO CARD ============================ */
/* Illustration (optional grey box) + headline/supporting text + actions.
       When the outline button is omitted, the primary button spans full width. */
.info-card {
  /* Padding/gap scale fluidly via clamp() (--info-card-*). */
  display: flex;
  flex-direction: column;
  gap: var(--info-card-gap);
  padding: var(--info-card-padding);
  background: var(--info-card-bg);
  border-radius: var(--info-card-corner-radius);
  box-shadow: var(--info-card-elevation);
  text-align: center;
}

.info-card-illustration {
  width: var(--info-card-illustration-size);
  height: var(--info-card-illustration-size);
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--info-card-illustration-radius);
  background: var(--info-card-illustration-bg);
  color: var(--info-card-illustration-icon);
  overflow: hidden;
}

.info-card-illustration img,
.info-card-illustration svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--info-card-content-gap);
}

.info-card-title {
  margin: 0;
  font: var(--info-card-title-font);
  color: var(--info-card-title-text);
}

.info-card-subtitle {
  margin: 0;
  font: var(--info-card-subtitle-font);
  color: var(--info-card-subtitle-text);
}

.info-card-actions {
  display: flex;
  gap: var(--info-card-actions-gap);
}

/* Both buttons share the row equally; a lone primary spans full width. */
.info-card-actions .btn {
  flex: 1;
}

/* Mobile: shrink the Info Card's lg buttons to the `md` size. We remap the
   applied metrics to the existing --btn-md-* tokens (no new values), so they
   match a real btn-md. Scoped to the Info Card - the atom itself stays unchanged
   (see docs/RESPONSIVE.md rule 1); the organism chooses a smaller size here. */
@media (max-width: 768px) {
  /* Stack the actions vertically; each button spans the full width (default
     align-items: stretch), so flex:1 no longer splits the row. */
  .info-card-actions {
    flex-direction: column;
  }

  .info-card-actions .btn-lg {
    padding: var(--btn-md-padding-vertical) var(--btn-md-padding-horizontal);
    --btn-gap: var(--btn-md-gap);
    border-radius: var(--btn-md-corner-radius);
    font: var(--btn-md-font);
    max-height: var(--btn-md-max-height);
  }
}

/* ==========================================================================
   Motion & micro-interactions
   Consistent transitions/animations built from the --motion-* tokens
   (t2_semantic.css). Grouped here so the system's motion is auditable in
   one place. Honors prefers-reduced-motion at the bottom.
   ========================================================================== */

/* ---- Interactive state transitions ---------------------------------------- */
.icon-btn,
.text-btn,
.fab,
.tag,
.pagination-item {
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Form controls: animate border, fill, focus ring and the check/dot marks */
.field .input-wrap,
.cbx .box,
.rdo .dot-wrap {
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Table rows tint smoothly on hover/select */
.data-table tbody tr {
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Accordion: summary colour + marker glyph */
.accordion summary,
.accordion summary::after {
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-medium) var(--motion-ease-spring);
}

/* ---- Selection "pop" (spring) --------------------------------------------- */
/* Checkbox marks (check + indeterminate dash) are both present; each scales in
   with a gentle overshoot when its state is active, and out otherwise. They're
   absolutely centred so the two overlap in the same spot. */
.cbx .box {
  position: relative;
}

.cbx .box .mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--motion-duration-medium) var(--motion-ease-spring);
}

.cbx.checked .box .mark-check,
.cbx.indeterminate .box .mark-indet {
  transform: translate(-50%, -50%) scale(1);
}

/* Radio dot scales in the same way */
.rdo .dot {
  transform: scale(0);
  transition: transform var(--motion-duration-medium) var(--motion-ease-spring);
}

.rdo.selected .dot {
  transform: scale(1);
}

/* ---- Tactile press feedback ----------------------------------------------- */
.btn:not(.disabled):active {
  transform: translateY(1px);
}

.icon-btn:not(.disabled):active,
.fab:not(.disabled):active,
.pagination-item:not(.disabled):active {
  transform: scale(0.92);
}

/* ---- Hover lifts ---------------------------------------------------------- */

.fab.primary:hover {
  transform: translateY(-2px);
}

.tag .tag-close:hover {
  transform: scale(1.15);
}

/* ---- Entrance animations -------------------------------------------------- */
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Alerts announce themselves as they mount */
.alert {
  animation: fade-slide-up var(--motion-duration-medium) var(--motion-ease-out) both;
}

/* Accordion answer eases in when the panel opens */
.accordion details[open] > p {
  animation: fade-slide-up var(--motion-duration-medium) var(--motion-ease-out) both;
}

/* Tooltip fades in (opacity only - the tip relies on transform for centring) */
.tooltip .tip {
  animation: fade-in var(--motion-duration-fast) var(--motion-ease-out) both;
}

/* ---- Accessibility: respect reduced-motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* keep selection marks visible when their scale-in is disabled */
  .cbx.checked .box .mark-check,
  .cbx.indeterminate .box .mark-indet {
    transform: translate(-50%, -50%);
  }

  .rdo.selected .dot {
    transform: none;
  }
}
/* ==========================================================================
   Phase 1 components - Badge, Textarea, Select, Spinner, Progress, Modal, Toast
   ========================================================================== */

/* ---- Badge (status pill) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--badge-gap);
  padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
  border-radius: var(--badge-corner-radius);
  font: var(--badge-font);
  white-space: nowrap;
  box-shadow: var(--badge-effect);
}

.badge .badge-dot {
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  border-radius: var(--border-radius-rounded);
  background: currentColor;
  flex-shrink: 0;
}

.badge svg {
  width: var(--badge-icon-size);
  height: var(--badge-icon-size);
}

.badge.neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
.badge.brand   { background: var(--badge-brand-bg);   color: var(--badge-brand-text); }
.badge.success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.badge.warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.badge.danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-text); }

/* ---- Textarea (extends .field) ---- */
.field .input-wrap:has(textarea) {
  align-items: flex-start;
}

.field textarea {
  border: none;
  outline: none;
  flex: 1;
  width: 100%;
  min-height: var(--textarea-min-height);
  resize: vertical;
  font: var(--input-field-font);
  background: transparent;
  color: var(--input-filled-text);
}

.field textarea::placeholder {
  color: var(--input-default-placeholder-text);
}

/* ---- Select (extends .field) ---- */
.field select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  flex: 1;
  width: 100%;
  font: var(--input-field-font);
  background: transparent;
  color: var(--input-filled-text);
  cursor: pointer;
}

/* the empty/placeholder option shows in placeholder colour */
.field select:has(option[value=""]:checked) {
  color: var(--input-default-placeholder-text);
}

.field.disabled select {
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

/* ---- Spinner ---- */
.spinner {
  display: inline-block;
  width: var(--spinner-size-md);
  height: var(--spinner-size-md);
  border: var(--spinner-thickness) solid var(--spinner-track);
  border-top-color: var(--spinner-indicator);
  border-radius: var(--border-radius-rounded);
  animation: spinner-rotate 0.7s linear infinite;
}

.spinner.sm { width: var(--spinner-size-sm); height: var(--spinner-size-sm); }

.spinner.lg {
  width: var(--spinner-size-lg);
  height: var(--spinner-size-lg);
  border-width: var(--spinner-thickness-lg);
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ---- Progress bar ---- */
.progress {
  width: 100%;
  height: var(--progress-height);
  background: var(--progress-track-bg);
  border-radius: var(--progress-corner-radius);
  overflow: hidden;
}

.progress .progress-fill {
  height: 100%;
  background: var(--progress-fill-bg);
  border-radius: inherit;
  transition: width var(--motion-duration-medium) var(--motion-ease-standard);
}

.progress.indeterminate .progress-fill {
  width: 40%;
  animation: progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ---- Modal / Dialog ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16);
  background: var(--modal-backdrop);
  z-index: 100;
  animation: fade-in var(--motion-duration-fast) var(--motion-ease-out) both;
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--modal-width);
  max-height: calc(100vh - var(--spacing-32));
  background: var(--modal-bg);
  border-radius: var(--modal-corner-radius);
  box-shadow: var(--modal-elevation);
  overflow: hidden;
  animation: fade-slide-up var(--motion-duration-medium) var(--motion-ease-out) both;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--modal-padding) var(--modal-padding) 0;
}

.modal-title {
  margin: 0;
  font: var(--modal-title-font);
  color: var(--modal-title-text);
}

.modal-close,
.toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-icon-body-default);
  border-radius: var(--border-radius-rounded);
  padding: var(--spacing-4);
  flex-shrink: 0;
}

.modal-close svg,
.toast-close svg {
  width: var(--size-20);
  height: var(--size-20);
}

.modal-body {
  padding: var(--modal-gap) var(--modal-padding);
  font: var(--modal-body-font);
  color: var(--modal-body-text);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-12);
  padding: 0 var(--modal-padding) var(--modal-padding);
}

/* Mobile-first: dialog becomes a bottom sheet */
@media (max-width: 640px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--modal-corner-radius) var(--modal-corner-radius) 0 0;
  }
}

/* ---- Toast / Snackbar ---- */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--toast-gap);
  width: 100%;
  max-width: var(--toast-width);
  padding: var(--toast-padding-vertical) var(--toast-padding-horizontal);
  border: var(--toast-border-width) solid transparent;
  border-radius: var(--toast-corner-radius);
  box-shadow: var(--toast-elevation);
  animation: fade-slide-up var(--motion-duration-medium) var(--motion-ease-out) both;
}

.toast .toast-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.toast .toast-icon svg {
  width: var(--toast-icon-size);
  height: var(--toast-icon-size);
}

.toast .toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--toast-content-gap);
}

.toast .toast-title {
  font: var(--toast-title-font);
}

.toast .toast-text {
  font: var(--toast-text-font);
  color: var(--toast-text);
}

.toast .toast-close {
  color: var(--toast-close-icon);
}

/* Per-type colours - same roles as the Alert component */
.toast.info    { background: var(--toast-info-bg);    border-color: var(--toast-info-border); }
.toast.success { background: var(--toast-success-bg); border-color: var(--toast-success-border); }
.toast.warning { background: var(--toast-warning-bg); border-color: var(--toast-warning-border); }
.toast.danger  { background: var(--toast-danger-bg);  border-color: var(--toast-danger-border); }

.toast.info    .toast-icon { color: var(--toast-info-icon); }
.toast.success .toast-icon { color: var(--toast-success-icon); }
.toast.warning .toast-icon { color: var(--toast-warning-icon); }
.toast.danger  .toast-icon { color: var(--toast-danger-icon); }

.toast.info    .toast-title { color: var(--toast-info-title); }
.toast.success .toast-title { color: var(--toast-success-title); }
.toast.warning .toast-title { color: var(--toast-warning-title); }
.toast.danger  .toast-title { color: var(--toast-danger-title); }

/* ==========================================================================
   Phase 1 batch 2 - Stepper, Dropzone, Calendar (Date), Time list
   ========================================================================== */

/* ---- Stepper / Wizard ---- */
.stepper {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: var(--spacing-8);
  text-align: center;
  position: relative;
}

/* connector line to the previous step (skipped on the first) */
.stepper .step::before {
  content: "";
  position: absolute;
  top: calc(var(--stepper-marker-size) / 2);
  right: 50%;
  width: 100%;
  height: var(--stepper-connector-thickness);
  background: var(--stepper-connector-todo);
  transform: translateY(-50%);
}

.stepper .step:first-child::before {
  display: none;
}

/* a completed or active step's incoming connector is "done" */
.stepper .step.complete::before,
.stepper .step.active::before {
  background: var(--stepper-connector-done);
}

.stepper .step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--stepper-marker-size);
  height: var(--stepper-marker-size);
  border-radius: var(--border-radius-rounded);
  font: var(--stepper-marker-font);
  background: var(--stepper-upcoming-bg);
  color: var(--stepper-upcoming-text);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.stepper .step-marker svg {
  width: var(--size-16);
  height: var(--size-16);
}

.stepper .step.complete .step-marker {
  background: var(--stepper-complete-bg);
  color: var(--stepper-complete-text);
  box-shadow: var(--stepper-complete-effect);
}

.stepper .step.active .step-marker {
  background: var(--stepper-active-bg);
  color: var(--stepper-active-text);
  box-shadow: inset 0 0 0 var(--size-2) var(--stepper-active-border);
}

.stepper .step-label {
  font: var(--stepper-label-font);
  color: var(--stepper-label-muted);
}

.stepper .step.complete .step-label,
.stepper .step.active .step-label {
  color: var(--stepper-label-text);
}

/* ---- Dropzone / File upload ---- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dropzone-gap);
  padding: var(--dropzone-padding);
  background: var(--dropzone-bg);
  border: var(--size-2) dashed var(--dropzone-border);
  border-radius: var(--dropzone-corner-radius);
  text-align: center;
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.dropzone:hover,
.dropzone.dragover {
  background: var(--dropzone-hover-bg);
  border-color: var(--dropzone-hover-border);
}

.dropzone .dropzone-icon {
  color: var(--dropzone-icon);
  display: inline-flex;
}

.dropzone .dropzone-icon svg {
  width: var(--size-32);
  height: var(--size-32);
}

.dropzone .dropzone-title {
  font: var(--dropzone-title-font);
  color: var(--dropzone-title-text);
}

.dropzone .dropzone-hint {
  font: var(--dropzone-hint-font);
  color: var(--dropzone-hint-text);
}

.dropzone.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-item {
  display: flex;
  align-items: center;
  gap: var(--file-item-gap);
  padding: var(--file-item-padding-vertical) var(--file-item-padding-horizontal);
  background: var(--file-item-bg);
  border-radius: var(--file-item-corner-radius);
}

.file-item .file-icon {
  color: var(--file-icon);
  display: inline-flex;
  flex-shrink: 0;
}

.file-item .file-icon svg {
  width: var(--size-20);
  height: var(--size-20);
}

.file-item .file-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  min-width: 0;
}

.file-item .file-name {
  font: var(--file-name-font);
  color: var(--file-name-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item .file-size {
  font: var(--file-meta-font);
  color: var(--file-meta-text);
}

/* ---- Calendar / Date picker ---- */
.calendar {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--calendar-padding);
  background: var(--calendar-bg);
  border-radius: var(--calendar-corner-radius);
  box-shadow: var(--calendar-elevation);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-title {
  font: var(--calendar-header-font);
  color: var(--calendar-header-text);
}

.calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--calendar-nav-icon);
  padding: var(--spacing-4);
  border-radius: var(--border-radius-rounded);
}

.calendar-nav svg {
  width: var(--size-20);
  height: var(--size-20);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--calendar-cell-size));
  gap: var(--spacing-2);
}

.calendar-weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--calendar-cell-size);
  font: var(--calendar-weekday-font);
  color: var(--calendar-weekday-text);
}

.calendar-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--calendar-cell-size);
  height: var(--calendar-cell-size);
  border: none;
  background: transparent;
  border-radius: var(--border-radius-rounded);
  font: var(--calendar-day-font);
  color: var(--calendar-day-text);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}

.calendar-day:hover {
  background: var(--calendar-hover-bg);
}

.calendar-day.muted {
  color: var(--calendar-muted-text);
}

.calendar-day.today {
  box-shadow: inset 0 0 0 var(--size-1) var(--calendar-today-border);
}

.calendar-day.selected {
  background: var(--calendar-selected-bg);
  color: var(--calendar-selected-text);
  box-shadow: var(--calendar-selected-effect);
}

.calendar-day:disabled {
  color: var(--calendar-muted-text);
  cursor: not-allowed;
}

.calendar-day:disabled:hover {
  background: transparent;
}

/* ---- Time list (Time picker panel) ---- */
.time-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  padding: var(--spacing-4);
  background: var(--timelist-bg);
  border-radius: var(--timelist-corner-radius);
  box-shadow: var(--timelist-elevation);
  width: max-content;
  min-width: 120px;
}

.time-option {
  border: none;
  background: transparent;
  text-align: left;
  padding: var(--timelist-item-padding-vertical) var(--timelist-item-padding-horizontal);
  border-radius: var(--border-radius-8);
  font: var(--timelist-item-font);
  color: var(--timelist-item-text);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}

.time-option:hover {
  background: var(--timelist-item-hover-bg);
}

.time-option.selected {
  background: var(--timelist-item-selected-bg);
  color: var(--timelist-item-selected-text);
  box-shadow: var(--timelist-item-selected-effect);
}

/* ==========================================================================
   Phase 2 components - Avatar, Stat, Countdown, Timeline, Menu, Share, Map
   ========================================================================== */

/* ---- Avatar ---- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  border-radius: var(--border-radius-rounded);
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font: var(--avatar-font);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  user-select: none;
}

.avatar.xs { width: var(--avatar-size-xs); height: var(--avatar-size-xs); }
.avatar.sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); }
.avatar.lg { width: var(--avatar-size-lg); height: var(--avatar-size-lg); }
.avatar.xl { width: var(--avatar-size-xl); height: var(--avatar-size-xl); }

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar .avatar-status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 28%;
  border-radius: var(--border-radius-rounded);
  border: var(--size-2) solid var(--avatar-ring);
  background: var(--avatar-status-offline);
}

.avatar .avatar-status.online { background: var(--avatar-status-online); }

.avatar-group {
  display: inline-flex;
  align-items: center;
}

.avatar-group .avatar {
  box-shadow: 0 0 0 var(--size-2) var(--avatar-ring);
  margin-left: calc(var(--avatar-size-md) / -3);
}

.avatar-group .avatar:first-child { margin-left: 0; }

.avatar-group .avatar-more {
  background: var(--color-surface-body-light);
  color: var(--color-text-body-bold);
}

/* ---- Stat tile / KPI ---- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--stat-gap);
  padding: var(--stat-padding);
  background: var(--stat-bg);
  border: var(--size-1) solid var(--stat-border);
  border-radius: var(--stat-corner-radius);
}

.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}

.stat-label {
  font: var(--stat-label-font);
  color: var(--stat-label-text);
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-32);
  height: var(--size-32);
  border-radius: var(--border-radius-rounded);
  background: var(--stat-icon-bg);
  color: var(--stat-icon-color);
  flex-shrink: 0;
}

.stat-icon svg { width: var(--size-16); height: var(--size-16); }

.stat-value {
  font: var(--stat-value-font);
  color: var(--stat-value-text);
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font: var(--body-b7em);
}

.stat-delta svg { width: var(--size-14); height: var(--size-14); }
.stat-delta.up { color: var(--stat-up-text); }
.stat-delta.down { color: var(--stat-down-text); }

/* ---- Timeline (event schedule) ---- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-16);
  padding-bottom: var(--timeline-gap);
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-marker-size) / 2);
  top: var(--timeline-marker-size);
  bottom: 0;
  width: var(--timeline-line-width);
  background: var(--timeline-line);
  transform: translateX(-50%);
}

.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::before { display: none; }

.timeline-marker {
  width: var(--timeline-marker-size);
  height: var(--timeline-marker-size);
  border-radius: var(--border-radius-rounded);
  background: var(--timeline-marker-bg);
  box-shadow: 0 0 0 var(--size-2) var(--timeline-marker-ring);
  margin-top: var(--size-2);
  z-index: 1;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.timeline-time { font: var(--timeline-time-font); color: var(--timeline-time-text); }
.timeline-title { font: var(--timeline-title-font); color: var(--timeline-title-text); }
.timeline-desc { font: var(--timeline-desc-font); color: var(--timeline-desc-text); }

/* ---- Share sheet ---- */
.share-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--share-gap);
}

.share-targets {
  display: flex;
  gap: var(--share-target-gap);
  flex-wrap: wrap;
}

.share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  border: none;
  background: transparent;
  cursor: pointer;
  font: var(--share-target-label-font);
  color: var(--share-target-label-text);
}

.share-target .share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--share-target-size);
  height: var(--share-target-size);
  border-radius: var(--share-target-corner-radius);
  background: var(--share-target-bg);
  color: var(--share-target-icon);
}

.share-target .share-icon svg { width: var(--size-24); height: var(--size-24); }

.share-target.whatsapp .share-icon {
  background: var(--share-whatsapp-bg);
  color: #ffffff;
}

.share-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.share-link .link-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-surface-body-extralight);
  border-radius: var(--border-radius-12);
  font: var(--input-field-font);
  color: var(--color-text-body-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Phase 2 (cont.) - Menu, Segmented control, RSVP widget
   ========================================================================== */

/* ---- Menu (reusable dropdown) ---- */
.menu {
  display: flex;
  flex-direction: column;
  min-width: var(--menu-min-width);
  padding: var(--menu-padding);
  background: var(--menu-bg);
  border-radius: var(--menu-corner-radius);
  box-shadow: var(--menu-elevation);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
  padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
  border: none;
  background: transparent;
  border-radius: var(--menu-item-corner-radius);
  font: var(--menu-item-font);
  color: var(--menu-item-text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}

.menu-item:hover { background: var(--menu-item-hover-bg); }

.menu-item svg {
  width: var(--size-20);
  height: var(--size-20);
  color: var(--menu-item-icon);
  flex-shrink: 0;
}

.menu-item.danger,
.menu-item.danger svg { color: var(--menu-item-danger-text); }

.menu-divider {
  height: var(--size-1);
  background: var(--menu-divider);
  margin: var(--menu-padding) 0;
}

/* ---- Dropdown (select-style trigger + listbox popup) ----
   Chrome matches the .field select so a Dropdown drops in beside real inputs;
   the popup is portalled (fixed) so it escapes overflow/clip ancestors. */
.dropdown {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-6);
  max-width: 360px;
}

.dropdown.block {
  display: flex;
  max-width: none;
  width: 100%;
}

.dropdown-label {
  font: var(--input-label-font);
  color: var(--input-label-text);
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--dropdown-trigger-gap);
  width: 100%;
  background: var(--dropdown-trigger-bg);
  border: var(--size-2) solid var(--dropdown-trigger-border);
  border-radius: var(--dropdown-trigger-radius);
  padding: var(--dropdown-trigger-padding-vertical) var(--dropdown-trigger-padding-horizontal);
  font: var(--dropdown-trigger-font);
  color: var(--dropdown-trigger-text);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.dropdown-sm .dropdown-trigger {
  gap: var(--dropdown-trigger-sm-gap);
  padding: var(--dropdown-trigger-sm-padding-vertical) var(--dropdown-trigger-sm-padding-horizontal);
  font: var(--dropdown-trigger-sm-font);
}

.dropdown-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--size-4) var(--dropdown-focus-ring);
}

.dropdown[data-open="true"] .dropdown-trigger {
  border-color: var(--dropdown-trigger-open-border);
}

.dropdown-leading {
  display: inline-flex;
  flex-shrink: 0;
}

.dropdown-leading svg {
  width: var(--size-20);
  height: var(--size-20);
  color: var(--dropdown-trigger-icon);
}

.dropdown-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-value.placeholder {
  color: var(--dropdown-trigger-placeholder-text);
}

.dropdown-caret {
  width: var(--dropdown-trigger-caret-size);
  height: var(--dropdown-trigger-caret-size);
  color: var(--dropdown-trigger-icon);
  flex-shrink: 0;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.dropdown-sm .dropdown-caret {
  width: var(--dropdown-trigger-sm-caret-size);
  height: var(--dropdown-trigger-sm-caret-size);
}

.dropdown[data-open="true"] .dropdown-caret {
  transform: rotate(180deg);
}

.dropdown.error .dropdown-trigger {
  border-color: var(--dropdown-error-border);
}

.dropdown.disabled .dropdown-trigger {
  background: var(--dropdown-disabled-bg);
  border-color: var(--dropdown-disabled-border);
  color: var(--dropdown-disabled-text);
  cursor: not-allowed;
}

.dropdown.disabled .dropdown-caret {
  color: var(--dropdown-disabled-text);
}

.dropdown .helper {
  font: var(--input-helper-font);
  color: var(--input-helper-text);
}

.dropdown.error .helper {
  color: var(--input-error-helper-text);
}

/* Popup - reuses the .menu surface; portalled with fixed positioning. */
.dropdown-popup {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: var(--menu-padding);
  background: var(--menu-bg);
  border-radius: var(--menu-corner-radius);
  box-shadow: var(--menu-elevation);
  max-height: var(--dropdown-popup-max-height);
  overflow-y: auto;
  animation: fade-slide-up var(--motion-duration-fast) var(--motion-ease-out) both;
}

.dropdown-option {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
  width: 100%;
  padding: var(--menu-item-padding-vertical) var(--menu-item-padding-horizontal);
  border: none;
  background: transparent;
  border-radius: var(--menu-item-corner-radius);
  font: var(--menu-item-font);
  color: var(--menu-item-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}

.dropdown-popup-sm .dropdown-option {
  padding: var(--dropdown-sm-option-padding-vertical) var(--dropdown-sm-option-padding-horizontal);
  font: var(--dropdown-sm-option-font);
}

.dropdown-popup-sm .dropdown-option-check {
  width: var(--dropdown-sm-option-check-size);
  height: var(--dropdown-sm-option-check-size);
}

.dropdown-option[data-active="true"] {
  background: var(--dropdown-option-active-bg);
}

.dropdown-option[aria-selected="true"] {
  background: var(--dropdown-option-selected-bg);
  color: var(--dropdown-option-selected-text);
}

.dropdown-option[aria-disabled="true"] {
  color: var(--dropdown-option-disabled-text);
  cursor: not-allowed;
}

.dropdown-option > svg,
.dropdown-option-check {
  width: var(--size-20);
  height: var(--size-20);
  flex-shrink: 0;
}

.dropdown-option-check {
  color: var(--dropdown-option-check-icon);
  margin-left: auto;
}

.dropdown-option-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.dropdown-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-option-description {
  font: var(--dropdown-option-description-font);
  color: var(--dropdown-option-description-text);
}

/* ---- Segmented control ---- */
.segmented {
  display: inline-flex;
  gap: var(--segmented-gap);
  padding: var(--segmented-padding);
  background: var(--segmented-bg);
  border-radius: var(--segmented-corner-radius);
}

.segment {
  border: none;
  background: transparent;
  padding: var(--segmented-segment-padding-vertical) var(--segmented-segment-padding-horizontal);
  border-radius: var(--segmented-segment-corner-radius);
  font: var(--segmented-segment-font);
  color: var(--segmented-inactive-text);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}

.segment.active {
  background: var(--segmented-active-bg);
  color: var(--segmented-active-text);
  box-shadow: var(--segmented-active-effect);
}

/* ---- RSVP widget ---- */
.rsvp {
  display: flex;
  flex-direction: column;
  gap: var(--rsvp-gap);
  padding: var(--rsvp-padding);
  max-width: 420px;
  background: var(--rsvp-bg);
  border: var(--size-1) solid var(--rsvp-border);
  border-radius: var(--rsvp-corner-radius);
}

.rsvp-title {
  margin: 0;
  font: var(--rsvp-title-font);
  color: var(--rsvp-title-text);
}

/* segments and fields span the full width inside the RSVP card */
.rsvp .segmented { display: flex; width: 100%; }
.rsvp .segmented .segment { flex: 1; }
.rsvp .field { max-width: none; }

/* ==========================================================================
   Charts - chrome (SVG marks are styled inline in the stories)
   ========================================================================== */
.chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  max-width: 380px;
}

.chart-title {
  font: var(--chart-title-font);
  color: var(--chart-title-text);
}

.chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis-label { fill: var(--chart-axis-text); font: var(--chart-axis-font); }
.chart .value-label { fill: var(--chart-value-text); font: var(--chart-legend-font); }

/* recessive: marks respond to hover, not the whole chart */
.chart .bar,
.chart .dot,
.chart .arc { transition: opacity var(--motion-duration-fast) var(--motion-ease-standard); }
.chart:hover .bar:not(:hover),
.chart:hover .arc:not(:hover) { opacity: 0.55; }

.chart-legend {
  display: flex;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  font: var(--chart-legend-font);
  color: var(--chart-legend-text);
}

.chart-swatch {
  width: var(--size-12);
  height: var(--size-12);
  border-radius: var(--border-radius-4);
  flex-shrink: 0;
}

/* ---- "Continue with Google" (see resources/views/components/google-button) ----
   One definition for all four auth forms: the standalone login/register pages
   and the landing page's login/register modal. White button with Google's own
   mark, per their branding guidance - the logo is never recoloured, and the
   button never takes the brand gradient the primary CTA uses, so the two read
   as different kinds of action. */
.google-auth {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-10);
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--size-2) solid var(--color-grey-200);
  border-radius: var(--border-radius-rounded);
  background: var(--color-white);
  color: var(--color-grey-800);
  font: var(--body-b5em);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.google-btn:hover {
  background: var(--color-grey-50);
  border-color: var(--color-grey-300);
}

.google-btn svg {
  flex-shrink: 0;
}

/* "or" rule between the Google button and the email form under it. The lines
   are drawn with a pseudo-element each so the label stays centred whatever
   the container width. */
.google-auth__or {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  color: var(--color-grey-400);
  font-size: var(--body-b7-size);
}

.google-auth__or::before,
.google-auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-grey-200);
}