/* ==========================================================================
   COMPONENT: Forms — inputs, labels, validation, fieldsets
   Errors are announced, associated by aria-describedby, and never signalled
   by colour alone (icon + text always accompany the red).
   ========================================================================== */

.c-form { display: grid; gap: var(--sp-5); }

.c-form__row {
  display: grid;
  /* Row and column gaps differ on purpose. Columns need enough space to read as
     two separate inputs rather than one split box; rows need less, because the
     label above each field already separates them. A single 16px value for both
     made the Zakat calculator's twelve fields read as one grey mass. */
  gap: var(--sp-5) var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .c-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* `align-content: start` is the fix for a real defect, not a preference.
   .c-field is a grid item, so it stretches to its row's height; inside it, the
   spare height was landing on the input, which has a min-height but no max. The
   result was that identical number inputs rendered at 52px, 65px and 75px in the
   same form — taller wherever the neighbouring field had help text and this one
   did not. Pinning the content to the top keeps every input the same height and
   puts the slack underneath, where it belongs. */
.c-field {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  align-content: start;
}

.c-field__label {
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--c-ink);
}

.c-field__req {
  color: var(--c-danger);
  margin-inline-start: 2px;
}

.c-field__hint {
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--c-text-muted);
}

.c-input,
.c-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background-color: var(--surface-raised);
  /* --c-line-strong at rest, not --c-line. A --c-line hairline around a
     --surface-raised field sitting on a --surface-page background is about a 3%
     tonal step — on the Zakat calculator the twelve inputs read as flat grey
     slabs rather than as things you type in. Hover and focus still escalate from
     here, so the interaction ladder is intact; it just starts somewhere visible.
     (Token names, not hex: tools/check-hex.js scans comments too.) */
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.c-textarea { min-height: 8rem; padding-block: var(--sp-3); line-height: 1.5; }

.c-input::placeholder,
.c-textarea::placeholder { color: var(--c-text-muted); opacity: 1; }

/* The ladder now starts at --c-line-strong, so hover has to go further than it
   used to or it would be a no-op. */
.c-input:hover,
.c-textarea:hover {
  border-color: var(--c-verdigris);
  background-color: var(--surface-page);
}

.c-input:focus,
.c-textarea:focus { border-color: var(--c-ink); }

/* Uppercase-forcing inputs — PAN, IFSC. The transform is visual; forms.js
   normalises the value so validation never sees lowercase. */
.c-input--upper {
  text-transform: uppercase;
  font-family: var(--ff-utility);
  letter-spacing: 0.08em;
}

.c-input--tel { font-variant-numeric: tabular-nums; }

/* Phone with a fixed +91 prefix. */
.c-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--surface-raised);
  overflow: hidden;
}

.c-input-group:focus-within { border-color: var(--c-ink); }

.c-input-group__prefix {
  display: grid;
  place-items: center;
  padding-inline: var(--sp-4);
  font-family: var(--ff-utility);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  background-color: var(--surface-sunken);
  border-inline-end: 1px solid var(--c-line);
  flex: none;
}

.c-input-group .c-input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.c-input-group .c-input:focus { outline: none; }
.c-input-group:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   VALIDATION
   -------------------------------------------------------------------------- */

.c-input[aria-invalid="true"],
.c-textarea[aria-invalid="true"] {
  border-color: var(--c-danger);
  background-color: var(--c-danger-bg);
}

.c-field__error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  color: var(--c-danger);
}

.c-field__error svg { width: 14px; height: 14px; flex: none; }

.c-field.is-invalid .c-field__error { display: flex; }

.c-field.is-valid .c-input { border-color: var(--c-verdigris); }

/* --------------------------------------------------------------------------
   CHECKBOX / RADIO — custom control, real input beneath
   -------------------------------------------------------------------------- */

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

.c-check__input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  margin-block-start: 1px;
  flex: none;
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}

.c-check__input[type="radio"] { border-radius: var(--r-full); }

.c-check__input::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform var(--d-fast) var(--e-spring);
  background-color: var(--c-white);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 84% 6%, 38% 68%);
}

.c-check__input[type="radio"]::before {
  clip-path: none;
  border-radius: var(--r-full);
  width: 9px;
  height: 9px;
}

.c-check__input:checked {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
}

.c-check__input:checked::before { transform: scale(1); }

.c-check__text {
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.c-check__note {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  margin-block-start: 2px;
}

/* --------------------------------------------------------------------------
   FIELDSET
   -------------------------------------------------------------------------- */

.c-fieldset { border: 0; padding: 0; display: grid; gap: var(--sp-4); }

.c-fieldset__legend {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 0;
}

/* --------------------------------------------------------------------------
   NOTICE PANELS — 80G information, FCRA notice, grievance block
   -------------------------------------------------------------------------- */

.c-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background-color: var(--c-verdigris-05);
  color: var(--c-verdigris-ink);
  border: 1px solid rgb(15 118 110 / 0.2);
}

.c-notice svg { width: 18px; height: 18px; margin-block-start: 2px; flex: none; }

.c-notice--warning {
  background-color: var(--c-warning-bg);
  color: var(--c-warning);
  border-color: rgb(138 90 0 / 0.2);
}

.c-notice--danger {
  background-color: var(--c-danger-bg);
  color: var(--c-danger);
  border-color: rgb(163 32 32 / 0.2);
}

.c-notice__title {
  display: block;
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-1);
}

/* Live region for form-level messages. */
.c-form__status { min-height: 1.4em; font-size: var(--fs-sm); }
.c-form__status[data-state="error"]   { color: var(--c-danger); }
.c-form__status[data-state="success"] { color: var(--c-verdigris-ink); }