/* ============================================================
   Balance Farm — reusable UI components
   Spec: 16px padding, 52px control height, 4px radius.
   ============================================================ */
:root {
  --brand: var(--accent);            /* alias: the older name for the CTA fill */
}

/* ---- Input field — underlined: gray rule at rest, ink on focus ----
   No fill and no box, so a form reads as a column of lines rather than a
   stack of grey slabs. The label is the placeholder, held in ink so it is
   legible before typing starts. */
.c-field {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  line-height: 20px;
  color: var(--color-ink);
  transition: border-color var(--d-fast) ease;
}
/* the prompt is a label, not a hint, so it sits in ink rather than 30% */
.c-field::placeholder { color: var(--color-ink); font-weight: var(--w-medium); }
/* on focus it recedes: the guest is about to replace it, so it stops
   competing with what they type */
.c-field:focus::placeholder { color: var(--ink-30); }
.c-field:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--color-ink);
}
.c-field.has-error { box-shadow: none; border-bottom-color: var(--status-error); }
textarea.c-field { resize: none; }
/* display:block above beats the browser's [hidden] rule, so restore it */
.c-field[hidden] { display: none; }


/* ---- Chip — padding 16/20, radius 40, 12px Medium -2% ---- */
.c-chip {
  display: inline-flex;
  align-items: center;
  padding: 16px 20px;
  background: var(--fill-2);
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-2xs-track);
  line-height: 100%;
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-fast) ease, color var(--d-fast) ease;
}
@media (hover: hover) {
  .c-chip:hover { background: var(--fill-3); }
}
.c-chip.is-active { background: var(--brand); border-color: transparent; color: var(--paper); }

/* ---- Pill button — secondary CTA (Skip, Change) ---- */
.c-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--secondary);
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
@media (hover: hover) {
  .c-pill:hover { background: var(--secondary-hover); }
}

/* ---- Circular icon button — secondary CTA (back chevron, remove) ---- */
.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  background: var(--secondary);
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
@media (hover: hover) {
  .c-icon-btn:hover { background: var(--secondary-hover); }
}

/* ---- Tertiary CTA — outlined, 1px --line ----
   Carries its own box like the other primitives, so a consumer that
   needs a different size overrides it rather than supplying the only
   padding the control has. */
.c-cta-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  cursor: pointer;
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease;
}
@media (hover: hover) {
  .c-cta-tertiary:hover { border-color: var(--ink-30); }
}


/* ============================================================
   Size modifiers
   Every primitive comes in three sizes. The unmarked class IS
   medium — whatever the base rule already computed — so existing
   markup is untouched; --sm and --lg are additive.

   Controls (chip, pill, tertiary, icon) share one height ladder:
   40 / 56 at the ends. Their MEDIUM heights differ because each
   base rule predates this ladder — chip sits at 44 and tertiary
   at 53 from padding alone. Reconciling those would restyle the
   site, so the medium is left as-is and documented honestly.
   ============================================================ */

/* ---- Chip ---- */
.c-chip--sm {
  height: var(--ctl-h-sm);
  padding: 0 var(--ctl-px-sm);
  font-size: var(--t-2xs);
  letter-spacing: var(--t-2xs-track);
}
.c-chip--lg {
  height: var(--ctl-h-lg);
  padding: 0 var(--ctl-px-lg);
  font-size: var(--t-sm);
  letter-spacing: var(--t-sm-track);
}

/* ---- Pill (secondary CTA) ---- */
.c-pill--sm {
  height: var(--ctl-h-sm);
  padding: 0 var(--ctl-px-sm);
  font-size: var(--t-xs);
  letter-spacing: var(--t-xs-track);
}
.c-pill--lg {
  height: var(--ctl-h-lg);
  padding: 0 var(--ctl-px-lg);
  font-size: var(--t-base);
  letter-spacing: var(--t-base-track);
}

/* ---- Tertiary CTA — explicit heights, so it matches pill and icon ---- */
.c-cta-tertiary--sm {
  height: var(--ctl-h-sm);
  padding: 0 var(--ctl-px-sm);
  font-size: var(--t-xs);
  letter-spacing: var(--t-xs-track);
}
.c-cta-tertiary--lg {
  height: var(--ctl-h-lg);
  padding: 0 var(--ctl-px-lg);
  font-size: var(--t-base);
  letter-spacing: var(--t-base-track);
}

/* ---- Icon button ---- */
.c-icon-btn--sm { width: var(--ctl-h-sm); height: var(--ctl-h-sm); }
.c-icon-btn--lg { width: var(--ctl-h-lg); height: var(--ctl-h-lg); }

/* ---- Field ----
   One step taller than a control at each end, because a field holds
   typed text rather than a label. */
.c-field--sm {
  min-height: var(--field-h-sm);
  padding: var(--field-py-sm) var(--s-4);
  font-size: var(--t-xs);
  letter-spacing: var(--t-xs-track);
}
.c-field--lg {
  min-height: var(--field-h-lg);
  padding: var(--field-py-lg) var(--s-6);
  font-size: var(--t-md);
  letter-spacing: var(--t-md-track);
}