/* forms.css — fields, the OTP boxes, radio/checkbox rows, wizard steppers.
 *
 * §7 of the concept doc is emphatic: "Marketing tidak boleh merasa sedang
 * mengisi formulir sensus." So the survey is answered with big tappable
 * option rows, not with typing — .optrow is the workhorse of this file and
 * free text appears twice in the whole app.
 *
 * NO HEX. Every colour is var(--sn-*) from tokens.gen.css. */

.field { display: block; }
.field + .field { margin-top: 12px; }

.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sn-on-surface-variant);
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--sn-outline);
  border-radius: var(--sn-shape-corner-medium);
  background: var(--sn-surface);
  color: var(--sn-on-surface);
  font: inherit;
  /* 16px stops iOS Safari zooming the viewport on focus. Below that it will,
     and the page never zooms back out. */
  font-size: 16px;
}
.textarea { min-height: 84px; resize: vertical; }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--sn-primary);
  outline-offset: 1px;
  border-color: var(--sn-primary);
}

.field-hint { margin-top: 5px; font-size: 12px; color: var(--sn-on-surface-variant); }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span {
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--sn-outline);
  border-right: 0;
  border-radius: var(--sn-shape-corner-medium) 0 0 var(--sn-shape-corner-medium);
  background: var(--sn-surface-container);
  color: var(--sn-on-surface-variant);
  font-size: 15px;
}
.input-prefix > .input { border-radius: 0 var(--sn-shape-corner-medium) var(--sn-shape-corner-medium) 0; }

/* ── OTP ─────────────────────────────────────────────────────────────────── */

.otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.otp input {
  width: 100%;
  height: 54px;
  padding: 0;
  border: 1px solid var(--sn-outline);
  border-radius: var(--sn-shape-corner-medium);
  background: var(--sn-surface);
  color: var(--sn-on-surface);
  font-family: var(--sn-font-family-mono);
  font-size: 22px;
  text-align: center;
}
.otp input:focus-visible {
  outline: 2px solid var(--sn-primary);
  border-color: var(--sn-primary);
}

/* ── Option rows (radio / checkbox) ──────────────────────────────────────── */

.optrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--sn-outline-variant);
  border-radius: var(--sn-shape-corner-medium);
  background: var(--sn-surface);
  cursor: pointer;
}
.optrow + .optrow { margin-top: 6px; }
.optrow input { width: 20px; height: 20px; accent-color: var(--sn-primary); flex: none; }
.optrow:has(input:checked) {
  border-color: var(--sn-primary);
  background: var(--sn-primary-container);
  color: var(--sn-on-primary-container);
  font-weight: 600;
}

/* Horizontal variant for 2-4 short answers (Ya/Tidak, 1 / 2-3 / 4+). */
.optgrid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.optgrid .optrow { margin-top: 0; justify-content: center; padding: 8px 4px; font-size: 14px; }

/* The radio is hidden VISUALLY, never with display:none.
 *
 * display:none takes an input out of the focus order and out of the
 * accessibility tree — which, since every survey question is an .optgrid, would
 * make the whole survey unreachable by keyboard and silent to a screen reader.
 * The whole label is the hit target either way; this keeps the control real. */
.optgrid .optrow input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* With the input invisible, its focus ring would be too. Move it to the label,
 * which is the thing the user actually sees being focused. */
.optgrid .optrow:has(input:focus-visible) {
  outline: 2px solid var(--sn-primary);
  outline-offset: 1px;
}

/* ── Wizard stepper ──────────────────────────────────────────────────────── */

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper-dot {
  flex: 1;
  height: 4px;
  border-radius: var(--sn-shape-corner-full);
  background: var(--sn-outline-variant);
}
.stepper-dot[data-on] { background: var(--sn-primary); }
.stepper-label {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sn-on-surface-variant);
}

/* ── Inline alert ────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--sn-shape-corner-medium);
  border: 1px solid var(--sn-outline-variant);
  background: var(--sn-surface-container);
  font-size: 13px;
}
.alert-warn {
  border-color: var(--sn-warning);
  background: var(--sn-warning-container);
  color: var(--sn-on-warning-container);
}
.alert-success {
  border-color: var(--sn-success);
  background: var(--sn-success-container);
  color: var(--sn-on-success-container);
}
.alert-info {
  border-color: var(--sn-info);
  background: var(--sn-info-container);
  color: var(--sn-on-info-container);
}