/* site/form.css
   The shared signup component. /join is this component standalone; /listen
   screen 2 is this component with the results hook and the compare exit.
   One source. Loads after tokens.css and base.css. Cut from
   MOCKUP_listen_funnel_v31_2026-09-23. */
/* ---------- the /join form component, on the base (B3) ---------- */
.form-head{display:flex;align-items:center;gap:11px;margin:var(--sp-4) 0 6px}
.form-head .ic{width:36px;height:36px;border-radius:var(--r-tile);background:var(--tint);color:var(--cornflower-press);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800}
.form-head b{font-size:18px;color:var(--navy);font-weight:800;display:block}
.form-head span{display:block;font-size:12.5px;color:var(--muted)}
.flabel{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin:12px 0 4px}
.flabel .opt,.flabel .req{font-weight:600;font-size:11.5px}
/* v17: "required" was green-press, inherited from /join. Green is the CTA only, so required takes the secondary. */
.flabel .opt{color:var(--muted)} .flabel .req{color:var(--cornflower-press)}
.ffield{width:100%;height:48px;border:1px solid var(--field-border);border-radius:var(--r-field);padding:0 14px;font-size:16px;color:var(--navy);background:#fff;-webkit-appearance:none}
.ffield::placeholder{color:#64748B}
.ffield:focus{outline:none;border-color:var(--cornflower);box-shadow:0 0 0 3px rgba(65,124,223,.16)}
.addr-note{font-size:11.5px;color:var(--ink);margin-top:5px}
/* F4 (kg 2026-09-27): one line under every submit, the link inline. Ink, not --muted (a sentence); 12px, one step under
   the 12.5px hint, so the promise above it still leads. The link takes the press token, 5.76:1 on white. */
.legal{font-size:12px;line-height:1.45;color:var(--ink);margin:8px 0 0;text-align:center}
.legal a{color:var(--cornflower-press);text-decoration:underline;text-underline-offset:2px}
.legal+.hint{margin-top:6px}
/* F28 (kg 2026-09-27): the no-JavaScript panel. The failbox, shown, since a <noscript> child is only in the DOM when scripts are off. */
.nojs{margin:0 0 12px}
.actions{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.actions h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.act{display:flex;gap:11px;align-items:flex-start;padding:11px;border:1.5px solid var(--field-border);border-radius:var(--r-field);margin-bottom:9px;cursor:pointer;font-weight:400}
.act input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--cornflower-press)} /* v30 (round 3, 6B): same blue as the chip ticks */
.act .t b{display:block;font-size:14.5px;color:var(--navy);font-weight:800}
/* P5: the description is regular weight; the live site inherits 700 from label. */
.act .t span{display:block;font-size:12.5px;color:var(--ink);margin-top:1px;line-height:1.4;font-weight:400}
.act--compact{padding:9px 11px;margin-bottom:7px}
.act--hook{background:var(--tint);border-color:var(--cornflower);margin:4px 0 14px}
.act--compact .t b{font-size:14px}
.act--compact .t span{font-size:12px}
.turnstile{margin:14px 0 4px;height:65px;width:300px;max-width:100%;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--panel);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:13px;color:var(--muted)}
.turnstile .box{width:22px;height:22px;border:2px solid var(--field-border);border-radius:5px;background:#fff}
.district{margin-top:16px;border-radius:var(--r-field);padding:12px 14px;font-size:14.5px;font-weight:800;line-height:1.35}
.district.inn{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-border)}
.district small{display:block;font-weight:500;font-size:12.5px;margin-top:3px}


.district.out{background:var(--warn-bg);color:var(--warn-ink-strong);border:1px solid var(--warn-border)}

/* ---------- the issue tiles: 3 picks, chips plus write-ins (lifted from listen/styles.css 2026-09-25) ----------
   One component for /listen and the /rsvp/<date> pages. Markup contract: #chips, #writeins, #wi-add,
   .lwi-rm, .lwi-full; see listen/index.html. */
/* v3, kg 2026-09-25: "Tell me your top 3 issues." Up to 3 picks (chips plus write-ins), up to 3
   write-in boxes. Design PM mock, scoped lwi- (listen write-in). */
#issues-label .opt:empty{display:none}
.writein{position:relative}
/* Focus lands on the row, the way .ffield:focus looks, not as a second box inside it. */
.writein .wi-input:focus-visible{outline:none}
.writein:focus-within{border-style:solid;border-color:var(--cornflower);box-shadow:0 0 0 3px rgba(65,124,223,.16)}
/* An added box carries a remove control at its right edge: 44px target, navy glyph. */
.lwi-rm{flex:none;width:44px;height:44px;margin-right:-8px;border:0;background:none;border-radius:10px;color:var(--navy);font:inherit;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lwi-rm:hover{background:var(--tint)}
/* The progressive link: site link color (5.32:1 on the panel), 48px tall target, under the last box. */
.lwi-add{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;margin:-4px 0 -8px;padding:0 4px;border:0;background:none;font:inherit;font-size:14.5px;font-weight:700;color:var(--cornflower-press);cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.lwi-add:hover{color:var(--navy-press)}
.lwi-add[hidden]{display:none}
/* Full at 3 picks: unselected chips and any empty box go quiet but stay readable. Not the base
   disabled tokens (--disabled-fg is light gray, which our rules ban). Label takes --muted
   (6.98:1 on --paper); the edge goes dashed so the change does not rest on color alone. */
.chip.lwi-full,.writein.lwi-full{background:var(--paper);border-style:dashed;border-color:var(--muted);color:var(--muted);cursor:not-allowed;box-shadow:none}
.chip.lwi-full .ico,.writein.lwi-full .ico{opacity:.45}
.chip.lwi-full .cbox,.writein.lwi-full .cbox{background:var(--paper)}
.writein.lwi-full .wi-input{background:transparent;cursor:not-allowed}
.writein.lwi-full .wi-input::placeholder{color:var(--muted)}
/* kg 2026-09-25: an even, blocky grid. Every chip is the same height. The line break in each two-word
   label is written into the markup (pre-line), so it never moves when a chip is picked and turns bold,
   and never depends on screen width. A max-width here did both, and kg saw the label jump. */
#chips .chip{min-height:64px}
#chips .chip .lbl{white-space:pre-line}
.card[lang="en"] #chips .chip .lbl{white-space:pre}   /* EN breaks only where the markup says; ES text wraps as before */
.card[lang="es"] #chips .chip[aria-pressed="true"]{font-weight:inherit}   /* ES wraps by width, so a picked chip keeps its weight and its lines; the check, border and fill mark it */