/* ─────────────────────────────────────────────────────────────
   Angular Material — outlined appearance form fields.
   Scoped to .mdc-on. Swap the custom inputs for Material outlined
   ones while inheriting the SyRF layout (question rows, gutters,
   progress). Uses SyRF tokens so light/dark themes still apply.

   Design notes:
   - Outlined appearance (matFormField appearance="outline"), the
     variant SyRF currently uses.
   - The question text is already shown above each field by the
     surrounding SyRF row, so we don't repeat it as a floating
     label. A minimal inline hint ("Value", "Select an option…")
     acts as the placeholder and collapses when a value is set.
   ───────────────────────────────────────────────────────────── */

.mdc-on {
  --mdc-primary: var(--accent);
  --mdc-on-surface: var(--ink);
  --mdc-on-surface-variant: var(--ink-3);
  --mdc-outline: color-mix(in oklab, var(--ink-3) 42%, transparent);
  --mdc-outline-hover: var(--ink-2);
  --mdc-field-bg: transparent;
  --mdc-err: var(--err);
}
.dark .mdc-on {
  --mdc-outline: color-mix(in oklab, var(--ink) 30%, transparent);
}

/* ── Outlined field ──────────────────────────────────────── */
.mdc-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 520px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 4px;
  background: var(--mdc-field-bg);
  cursor: text;
  transition: border-color .15s;
  box-sizing: border-box;
  /* The outline is drawn with a pseudo-element so we can swap
     colors on focus without triggering layout shifts. */
  border: 1px solid transparent;
}
.mdc-field::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--mdc-outline);
  border-radius: 4px;
  pointer-events: none;
  transition: border-color .15s, box-shadow .15s;
}
.mdc-field:hover::before { border-color: var(--mdc-outline-hover); }
.mdc-field.focused::before,
.mdc-field:focus-within::before {
  border: 2px solid var(--mdc-primary);
  /* account for the extra 1px so the field doesn't shift */
  inset: -1px;
}

.mdc-field > .mdc-input,
.mdc-field > .mdc-textarea {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  width: 100%;
  padding: 10px 0;
  font: 400 13.5px/1.4 var(--f-sans);
  color: var(--ink);
  caret-color: var(--mdc-primary);
}
.mdc-field > .mdc-textarea {
  resize: vertical;
  min-height: 48px;
  padding: 12px 0;
}
.mdc-field > .mdc-input::placeholder,
.mdc-field > .mdc-textarea::placeholder {
  color: var(--ink-4);
  font-weight: 400;
}

/* Trailing icon (dropdown/autocomplete arrow) */
.mdc-field.has-trailing { padding-right: 36px; }
.mdc-field > .mdc-trailing {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.mdc-field > .mdc-trailing .ms { font-size: 20px; }

/* Native select — hide arrow, use our own */
.mdc-field > select.mdc-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: none;
  cursor: pointer;
}
.mdc-field > select.mdc-input:invalid,
.mdc-field > select.mdc-input option[value=""] {
  color: var(--ink-4);
}
.mdc-field > select.mdc-input option { color: var(--ink); background: var(--surface); }

/* Number field — narrower to match Material guidance */
.mdc-field.is-number { max-width: 180px; }
.mdc-field > input[type="number"] { font-variant-numeric: tabular-nums; }

/* Textarea fields need room to grow vertically, so anchor top */
.mdc-field.is-textarea { align-items: stretch; padding: 0 14px; }
.mdc-field.is-textarea > .mdc-textarea { padding: 10px 0 12px; }

/* Hint / helper text beneath the field */
.mdc-hint {
  font: 400 11.5px/1.4 var(--f-sans);
  color: var(--ink-3);
  padding: 4px 14px 0;
  max-width: 520px;
}

/* ── Radio group — MDC radios in a row with ripple-style halo ── */
.mdc-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 4px 0;
}
.mdc-radio-group.stacked { flex-direction: column; gap: 2px; }
.mdc-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: 4px;
  font: 400 13.5px/1.4 var(--f-sans);
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
}
.mdc-radio input { display: none; }
.mdc-radio-ic {
  position: relative;
  width: 20px; height: 20px;
  border: 2px solid var(--ink-3);
  border-radius: 50%;
  box-sizing: border-box;
  flex: none;
  transition: border-color .12s;
}
.mdc-radio-ic::before {
  /* hover/focus ripple halo */
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: var(--mdc-primary);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.mdc-radio-ic::after {
  /* inner filled dot */
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--mdc-primary);
  transform: scale(0);
  transition: transform .15s cubic-bezier(.4,0,.2,1);
}
.mdc-radio:hover .mdc-radio-ic::before { opacity: .08; }
.mdc-radio.on .mdc-radio-ic { border-color: var(--mdc-primary); }
.mdc-radio.on .mdc-radio-ic::after { transform: scale(1); }
.mdc-radio.on { color: var(--ink); }

/* ── Checkbox / checklist ── */
.mdc-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border-radius: 4px;
  font: 400 13.5px/1.4 var(--f-sans);
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
}
.mdc-check input { display: none; }
.mdc-check-ic {
  position: relative;
  width: 18px; height: 18px;
  border: 2px solid var(--ink-3);
  border-radius: 2px;
  box-sizing: border-box;
  flex: none;
  transition: background .12s, border-color .12s;
}
.mdc-check-ic::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: var(--mdc-primary);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.mdc-check:hover .mdc-check-ic::before { opacity: .08; }
.mdc-check-ic::after {
  /* checkmark via border trick */
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: 50% 50%;
  transition: transform .15s cubic-bezier(.4,0,.2,1);
}
.mdc-check.on .mdc-check-ic {
  background: var(--mdc-primary);
  border-color: var(--mdc-primary);
}
.mdc-check.on .mdc-check-ic::after { transform: rotate(45deg) scale(1); }
.mdc-check.on { color: var(--ink); }

.mdc-checklist {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 2px;
  max-width: 620px;
}

/* Single Yes checkbox — same look, no bordered chip */
.mdc-check.single { padding-left: 6px; }

/* ── Focus states (a11y) ── */
.mdc-radio:focus-within .mdc-radio-ic::before,
.mdc-check:focus-within .mdc-check-ic::before { opacity: .14; }