/* Shared components built only from the design tokens in tokens.css (no raw colour, length or typeface values). */

/* QA-01: hidden means hidden.
   The browser's own rule for [hidden] is display: none, and any component that sets its own display beats it — so a
   button a script hid stayed on the screen, and could still be pressed. Said once here rather than patched per
   element, which is how it was being dealt with. */
[hidden] {
  display: none !important;
}

.form {
  display: grid;
  gap: var(--space-4);
}

.form__errors:empty,
.form__errors.validation-summary-valid {
  display: none;
}

.form__errors {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

/* minmax(0, 1fr): a grid column is otherwise never narrower than its widest child, and Safari sizes a select by its
   longest option - one long option made a whole form wider than the phone. */
.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  min-inline-size: 0;
}

.field__label {
  color: var(--input-label-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.field__input {
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: var(--input-h);
  padding-inline: var(--input-px);
  border: var(--border-width-hairline) solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-fg);
  font: inherit;
}

.field__input:hover {
  border-color: var(--input-border-hover);
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--shadow-focus);
}

.field__input.input-validation-error {
  border-color: var(--input-border-error);
}

.field__error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

.field__error:empty {
  display: none;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-fg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-inline: var(--button-primary-px);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  border: none;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard);
}

.button--primary {
  block-size: var(--button-primary-h);
  border-radius: var(--button-primary-radius);
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  box-shadow: var(--button-primary-shadow);
}

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

.button--primary:active {
  background: var(--button-primary-bg-active);
}

.button--secondary {
  block-size: var(--button-secondary-h);
  border-radius: var(--button-secondary-radius);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--button-secondary-border);
}

.button--secondary:hover {
  background: var(--button-secondary-bg-hover);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

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

.auth-card {
  max-inline-size: var(--layout-container-prose);
  margin-inline: auto;
  margin-block: var(--space-12);
  padding: var(--card-p);
  background: var(--card-bg);
  border: var(--border-width-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.auth-card__title {
  margin-block-start: 0;
  margin-block-end: var(--space-6);
  font-family: var(--typography-heading-family);
  font-weight: var(--typography-heading-weight);
  font-size: var(--font-size-2xl);
}

/* ---- Cards, pills and price (style guide: Cards & hero, Buttons, numeric) ---- */

.card {
  background: var(--card-bg);
  border: var(--border-width-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-p);
}

.card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.card-grid--people {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  block-size: var(--density-control-h-sm);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  font: inherit;
  font-family: var(--typography-ui-family);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
}

.pill:hover {
  background: var(--color-bg-subtle);
}

.pill--active {
  background: var(--color-selected-soft);
  border-color: var(--color-selected);
  color: var(--color-selected);
}

.pill__count {
  color: var(--color-fg-muted);
}

.button--ghost {
  block-size: var(--button-ghost-h);
  border-radius: var(--button-ghost-radius);
  background: var(--button-ghost-bg);
  color: var(--button-ghost-fg);
  box-shadow: none;
}

.button--ghost:hover {
  background: var(--button-ghost-bg-hover);
}

.button--danger {
  border-radius: var(--button-danger-radius);
  background: var(--button-danger-bg);
  color: var(--button-danger-fg);
}

.price {
  font-family: var(--typography-numeric-family);
  font-weight: var(--typography-numeric-weight);
  font-variant-numeric: tabular-nums;
}

.price--sale {
  color: var(--color-brand);
}

.price--was {
  color: var(--color-fg-muted);
  margin-inline-start: var(--space-2);
}

.auth-card__lead {
  margin-block: 0 var(--space-4);
  color: var(--color-fg-muted);
}

.auth-card__alt {
  margin-block: var(--space-4) 0;
  font-size: var(--font-size-sm);
}

.field__input--code {
  letter-spacing: var(--space-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.field__hint {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}

/* ---- Status chip (StatusChip view component): colour always paired with its label ---- */

.chip {
  display: inline-flex;
  align-items: center;
  block-size: var(--badge-h);
  padding-inline: var(--badge-px);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-weight);
  background: var(--color-bg-muted);
  color: var(--color-fg);
  white-space: nowrap;
}

/* The tone a chip has when nobody names one: said out loud so the class the component writes exists. */
.chip--neutral {
  background: var(--color-bg-muted);
  color: var(--color-fg);
}

.chip--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.chip--warning {
  background: var(--color-warning-soft);
  color: var(--color-fg);
}

.chip--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.visually-hidden {
  position: absolute;
  inline-size: var(--border-width-hairline);
  block-size: var(--border-width-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}