/* ==========================================================================
   FORMULA SPEED — forms
   Instrument-panel fields: dark plenum ground, hairline rule, cyan focus,
   racing red for errors. Nothing here needs an inline style.
   ========================================================================== */

/* ---------- Structure ---------- */
.form { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

.fset { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.fset > legend { margin-bottom: .2rem; }

/* Step header: the number is data, so it earns the mono */
.fstep {
  display: flex; align-items: baseline; gap: .9rem;
  padding-bottom: .9rem; margin-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.fstep b {
  font-family: var(--ff-mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, var(--p3));
  font-variation-settings: 'wght' 600;
  flex-shrink: 0;
}
.fstep span {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 110, 'wght' 780;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -.03em; line-height: 1.18;
}

/* ---------- Text fields ---------- */
.fgrid { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); }
@media (min-width: 720px) { .fgrid.c2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .45rem; min-width: 0; }
.field > label {
  font-family: var(--ff-mono);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist);
}
.field > label .req { color: var(--p7); margin-left: .25em; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  background: var(--plenum);
  color: var(--chalk);
  border: 1px solid var(--rule-2);
  border-radius: 0;
  padding: .92em 1em;
  font-size: .98rem;
  line-height: 1.4;
  appearance: none;
  transition: border-color var(--t-quick) var(--e-out),
              background var(--t-quick) var(--e-out),
              box-shadow var(--t-quick) var(--e-out);
}
.field textarea { min-height: 8.5rem; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--vapour); opacity: 1; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(150, 180, 214, .46); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 0;
  border-color: var(--p3);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--p3), 0 10px 30px -18px rgba(0, 187, 198, .8);
}

/* Custom select arrow, drawn not glyphed */
.field.sel { position: relative; }
.field.sel select { padding-right: 2.6em; }
.field.sel::after {
  content: '';
  position: absolute; right: 1.05em; bottom: 1.25em;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--mist);
  border-bottom: 1.5px solid var(--mist);
  transform: rotate(45deg);
  pointer-events: none;
}

.hint { font-size: .82rem; color: var(--vapour); }
.hint.err { color: var(--p7); }

.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--p7); }

/* ---------- Option cards: radio and checkbox as selectable plates ------- */
.opts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 720px) {
  .opts.c2 { grid-template-columns: repeat(2, 1fr); }
  .opts.c3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) { .opts.c4 { grid-template-columns: repeat(4, 1fr); } }

.opt {
  position: relative;
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-left: clamp(2.7rem, 4vw, 3.3rem);
  background: var(--tunnel);
  cursor: pointer;
  transition: background var(--t-base) var(--e-out);
}
.opt:hover { background: var(--plenum); }

/* The real control stays in the DOM for keyboard and forms, visually replaced */
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Drawn indicator */
.opt::before {
  content: '';
  position: absolute;
  left: clamp(1.1rem, 1.8vw, 1.4rem);
  top: clamp(1.35rem, 2.6vw, 1.95rem);
  width: 16px; height: 16px;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  transition: border-color var(--t-base) var(--e-out);
}
.opt::after {
  content: '';
  position: absolute;
  left: calc(clamp(1.1rem, 1.8vw, 1.4rem) + 4px);
  top: calc(clamp(1.35rem, 2.6vw, 1.95rem) + 4px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, var(--p7));
  transform: scale(0);
  transition: transform var(--t-base) var(--e-out);
}
.opt.box::before,
.opt.box::after { border-radius: 2px; }

.opt:has(input:checked) { background: var(--panel); }
.opt:has(input:checked)::before { border-color: var(--accent, var(--p7)); }
.opt:has(input:checked)::after { transform: scale(1); }
.opt:has(input:focus-visible)::before { box-shadow: 0 0 0 3px rgba(0, 187, 198, .45); }

/* A hairline in the option's own accent, drawn only once chosen */
.opt > .bar {
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent, var(--p7));
  transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--e-out);
}
.opt:has(input:checked) > .bar { transform: scaleX(1); }

.opt .k {
  font-family: var(--ff-mono);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vapour);
}
/* .t, not <h3>: a heading inside a <label> is invalid HTML, and these option
   titles are control labels, not document structure. */
.opt .t {
  display: block;
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 110, 'wght' 780;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: -.03em;
  line-height: 1.18;
  color: var(--chalk);
}
.opt p { font-size: .88rem; color: var(--mist); }

/* Compact inline variant for short choices (segmento, numero di schermi) */
.opts.inline { display: flex; flex-wrap: wrap; gap: .6rem; background: none; border: 0; }
.opts.inline .opt {
  padding: .78em 1.1em .78em 2.5em;
  border: 1px solid var(--rule-2);
  background: transparent;
  gap: 0;
}
.opts.inline .opt::before { left: .95em; top: 50%; margin-top: -8px; }
.opts.inline .opt::after  { left: calc(.95em + 4px); top: 50%; margin-top: -4px; }
.opts.inline .opt:has(input:checked) { border-color: var(--accent, var(--p7)); background: rgba(225, 6, 0, .07); }
.opts.inline .opt span { font-size: .92rem; }
.opts.inline .opt > .bar { display: none; }

/* ---------- Actions ---------- */
.factions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--rule);
}
.factions .hint { flex: 1 1 18ch; }

/* ---------- Consent row ---------- */
.consent { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.consent input { width: 17px; height: 17px; accent-color: var(--p7); margin-top: .18rem; flex-shrink: 0; }
.consent label { font-size: .85rem; color: var(--mist); }

/* ---------- Direct channels ---------- */
.chans { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 760px) { .chans { grid-template-columns: repeat(3, 1fr); } }
.chan {
  background: var(--tunnel);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  display: grid; gap: .6rem; align-content: start;
}
.chan h3 { font-size: 1.05rem; }
.chan p { font-size: .9rem; color: var(--mist); }
.chan .btn,
.chan .btn-ghost { justify-self: start; margin-top: .3rem; }
.chan [disabled],
.chan .is-off {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .opt::after,
  .opt > .bar { transition: none; }
}

/* Footer address block — was an inline style in the page template */
.foot-addr { margin-top: 1rem; line-height: 1.9; }