/* ==========================================================================
   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);
}

/* 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);
}

.btn svg {
  width: var(--btn-icon-size);
  height: 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);
  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;
}

.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);
}

.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;
  font: var(--input-field-font);
  background: transparent;
  color: var(--input-filled-text);
}

.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;
}