/**
 * autowire — component layer
 *
 * Reusable blocks with variants: buttons, cards, forms, badges, messages.
 * A block is a flat noun (.card), a variant is a hyphenated sibling class
 * (.card-dark), state is .is-*.
 *
 * Load order:  tokens.css → tokens-app.css → base.css → components.css → <page>.css
 *
 * SHARED FILE — a byte-identical copy lives in the autowire-account repo.
 * Edit it here and run ./sync-design-system.sh from there; ./scripts-check.sh
 * fails on a hand-edited copy. See css/README.md.
 */


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — all pills. Brand always carries black text (white on brand is
   1.18:1), and brand is never a thin element on white.
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h-md);
  padding: 0 var(--btn-px-md);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--btn-primary-fs);
  font-weight: var(--btn-primary-fw);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--color-brand-dark); }

.btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.btn-dark:hover { background: var(--color-black); }

/* The primary action on a brand band, where a brand pill would vanish. */
.btn-light { background: var(--color-white); color: var(--color-black); }
.btn-light:hover { background: var(--color-gray-200); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.section-dark .btn-secondary {
  color: var(--fg-on-dark);
  box-shadow: inset 0 0 0 1px var(--border-on-dark);
}
.section-dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }

.btn-sm    { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--text-body-m); }
.btn-block { width: 100%; }
.btn-fit   { width: fit-content; }

/* A control that is unavailable is not a control that is busy: `not-allowed`
   for disabled, `progress` only while something is actually in flight. */
.btn[disabled], .btn.is-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading {
  opacity: var(--opacity-disabled);
  cursor: progress;
  pointer-events: none;
}

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* Destructive actions are text links, not buttons — they must be reachable
   but must not compete with the primary action. */
.btn-text {
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  font-family: var(--font-sans);
  font-size: var(--text-body-s);
  color: var(--fg-secondary-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  width: fit-content;
}
.btn-text:hover { color: var(--fg-primary); }
.btn-text-danger { color: var(--fg-danger); }

/* A text link that has to read as an action, used where a pill is too loud. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-m);
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  width: fit-content;
}

/* Paired CTAs: once they stop fitting side by side, stack them at equal width
   rather than leaving two differently sized pills. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
  /* The text link stacks with the rest and centres like the pills above it. */
  .btn-row > .btn-text { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   Density is --card-gap: two tight lines on the marketing pages, whole
   sections on the account page, which turns it up once for the surface.
   ═══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--card-padding-web);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.card-dark {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--fg-on-dark);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.card-title {
  font-size: var(--text-h-card);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: inherit;
}
.card-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary-strong);
}
.card-dark .card-text { color: var(--fg-on-dark-muted); }
.card-note {
  font-size: var(--text-body-s);
  line-height: var(--lh-loose);
  color: var(--fg-secondary-strong);
}
.card-body {
  font-size: var(--text-body-m);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
  max-width: 68ch;
}

/* Card with a 12px brand dot beside the text column — the design system's
   bullet-card pattern. The dot is decorative, so its 1.18:1 against white
   carries no meaning. */
.card-bullet { flex-direction: row; align-items: flex-start; gap: 14px; }
.card-bullet-dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  flex: none;
  margin-top: 6px;
}
.card-bullet-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* A whole card that is a link. */
a.card { text-decoration: none; color: inherit; transition: border-color var(--transition-fast); }
a.card:hover { border-color: var(--border-strong); }
a.card .card-title { text-decoration: underline; text-underline-offset: 4px; }


/* ═══════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

/* tokens.css colours bare <label> at --fg-label (#858585 — 3.75:1). */
.field-label {
  font-size: var(--input-label-fs);
  color: var(--fg-label-strong);
}

.input {
  width: 100%;
  height: var(--input-h-web);
  padding: 0 var(--space-4);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--text-body-m);
  color: var(--fg-primary);
}
.input:focus { border-color: var(--input-border-focus); }
.input:disabled { background: var(--input-bg-disabled); color: var(--fg-disabled); }
.input.is-invalid, .is-invalid { border-color: var(--input-border-invalid); }


/* ── Checkbox ────────────────────────────────────────────────────────────
   A consent checkbox is read before it is ticked, so the label is the hit
   area and the box never shrinks below its 24px target when the text wraps
   to three lines. accent-color styles the native control, which keeps the
   keyboard behaviour and the focus ring the browser already gives us. */

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  cursor: pointer;
}

.check-input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--color-dark);
  cursor: pointer;
  /* Optically align the box with the first line of a 15px/1.5 label. */
  margin-top: 1px;
}

.check-label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-secondary-strong);
}

/* An unticked required consent, once the form has been submitted. */
.check.is-invalid .check-label { color: var(--fg-danger); }
.check.is-invalid .check-input { outline: 2px solid var(--color-danger); outline-offset: 2px; }

/* The "read the document" link that belongs to a consent, indented under it
   so it reads as part of that statement rather than as a new one. */
.check-doc { margin-left: calc(22px + var(--space-3)); }


/* ═══════════════════════════════════════════════════════════════════════
   BADGES / STATUS CHIPS
   Colour never carries meaning alone — a badge always has text too.
   ═══════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  height: var(--badge-h);
  padding: 0 var(--badge-px);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--badge-fs);
  font-weight: var(--badge-fw);
  line-height: 1;
  white-space: nowrap;
  hyphens: none;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-fg);
}
.badge-ok      { background: var(--status-ok-bg);      color: var(--status-ok-fg); }
.badge-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge-off     { background: var(--status-off-bg);     color: var(--status-off-fg); }
.badge-warn    { background: var(--status-warn-bg);    color: var(--status-warn-fg); }

/* An outlined neutral reads as deliberate, not as "no data". */
.badge-neutral.badge-outlined { box-shadow: inset 0 0 0 1px var(--color-gray-500); }


/* ═══════════════════════════════════════════════════════════════════════
   BANNERS / INLINE MESSAGES

   .banner is the static form: the tone is in the markup and the box is
   always visible. A message whose tone is chosen at runtime uses the .is-*
   state form instead — see .form-status in account.css, which shares these
   tokens rather than these class names because its script builds the class
   as `is-${kind}`.
   ═══════════════════════════════════════════════════════════════════════ */

.banner {
  padding: var(--banner-py) var(--banner-px);
  border-radius: var(--banner-radius);
  font-size: 15px;
  line-height: 1.55;
}
.banner-info    { background: var(--bg-info-soft);    color: var(--fg-info); }
.banner-success { background: var(--bg-success-soft); color: var(--fg-success); }
.banner-warning { background: var(--bg-warning-soft); color: var(--fg-warning); }
.banner-danger  { background: var(--bg-danger-soft);  color: var(--fg-danger); }
.banner-neutral { background: var(--bg-neutral-soft); color: var(--fg-neutral); }