/* HOST — "Host a night." v2 funnel (HOST-BRIEF-v2-funnel). Tokens only, no raw hex; canonical widths only
   {1040,920,880,760,720,640,620,560,440}; breakpoints 560/760/1040 only. The form is the hero, above the
   fold. host.js / host-pdf.js behavior is LOCKED — this file only RESTYLES the emitted form/kit markup and
   supports the reordered static HTML. See design/ACCEPTANCE.md + ADDENDUM-1 (§2.14 chrome + widths). */

/* ---- the shared page frame (1040) + gutters (40 / 24 ≤560); .ho + .host-head route through --maxw-wide
   so the page-width guard (Q205) stays green. -------------------------------------------------------------- */
.ho{max-width:var(--maxw-wide);margin:0 auto;padding:0 40px 84px}
.host-head{max-width:var(--maxw-wide);margin:0 auto;padding:0 40px}
@media(max-width:560px){
  .ho{padding:0 24px 64px}
  .host-head{padding:0 24px}
}

/* ---- canonical page-header block: spark 44 → H1 Bricolage 600 56/1.04 −0.02em (34 ≤560) → lede Inter 400
   17/1.6 --muted max 620. Block padding 76/40 (56/24 ≤560). No eyebrow (§2.13). -------------------------- */
.host-hd{text-align:center;max-width:640px;margin:0 auto;padding:76px 0 40px}
.host-hd__spark{display:block;width:44px;height:44px;margin:0 auto}
body.mktg .host-hd .host-hd__h1{margin:28px 0 0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,5.2vw,56px);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.host-hd__lede{margin:20px auto 0;max-width:620px;font-size:17px;line-height:1.6;color:var(--muted)}
@media(max-width:560px){.host-hd{padding:56px 0 24px}}

/* ---- cue row: three beats, centered, gap 36, wraps. Naked cobalt numeral Bricolage 600 18 tabular +
   Inter 500 14.5 --ink. No circles, no chips, no cards. (Net-new microcopy — voice pass.) ---------------- */
.host-cue{display:flex;flex-wrap:wrap;justify-content:center;gap:36px;
  max-width:760px;margin:36px auto 0;list-style:none;padding:0}
.host-cue li{display:flex;align-items:baseline;gap:9px;margin:0}
.host-cue__n{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--accent);
  font-variant-numeric:tabular-nums}
.host-cue__t{font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.4}
@media(max-width:560px){
  .host-cue{flex-direction:column;align-items:flex-start;gap:12px;max-width:440px;margin-top:28px}
}

/* ---- the kit-builder form card (the hero): 560 .card at --shadow-soft-lg, pad 28. ---------------------- */
.host-formwrap{max-width:560px;margin:36px auto 0}
.host-formwrap .card,.host-form-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-soft-lg);padding:28px}
/* the JS emits its form directly into #host-form-wrap; wrap it in the card frame here so no markup change is
   needed in host.js. */
.host-formwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft-lg);padding:28px}
/* JS-emitted eyebrow ("Make your kit") is retired per §2.13 — hide it, keep the title + sub. */
.host-formwrap .eyebrow{display:none}
/* Q689 — but the screens-48/49 SET IT UP + When SECTION eyebrows (ev-setup-h / ev-grp) DO show; they organize the
   sectioned builder form. Only the top "Make your kit" eyebrow (bare .eyebrow, no section class) stays hidden. */
.host-formwrap .eyebrow.ev-setup-h,.host-formwrap .eyebrow.ev-grp{display:block}
.host-formwrap h2.display{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.host-formwrap .lead{font-size:14px;line-height:1.55;color:var(--muted);max-width:none;margin:8px 0 18px}

/* fields: 52px, --r 12, --line-strong. First + last name in one row (12 gap). Rhythm is tightened (§2 length
   budget: cut spacing, never content order) so the JS-emitted optional fields (date/time/venue/address/approval)
   stay compact under the fold. */
.host-form .field{margin:10px 0 0}
.host-form .field:first-child,.host-form .row2{margin-top:0}
.host-form input[type=text],.host-form input[type=email],.host-form input[type=date],
.host-form input[type=time]{
  min-height:52px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line-strong);font-size:16px}
.host-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
.host-form .row2 .field{margin:0}
.host-form .flabel{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-2);margin-bottom:6px}

/* "Your address or SMD" + "Find my SMD" outline pill 52px beside it (10 gap). */
.host-form .smd-find{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:14px 0 0}
.host-form .smd-find .field{flex:1 1 200px;min-width:0;margin:0}
.host-form .smd-find .btn-outline{min-height:52px;flex:0 0 auto;white-space:nowrap}
.host-form .smd-out{margin:10px 0 0}

/* the checkbox row (approve RSVPs) reads as a plain inline control, not a field box. */
.host-form label.field[style*="row"]{margin-top:14px}

/* Submit: full-width primary pill. */
.host-form .actions{margin-top:18px}
.host-form .actions .btn{width:100%}

/* caption inside the card, centered, 12.5 --muted. */
.host-form-caption{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---- secondary links: one centered line, NOT pills; 500 14.5 --accent-strong, plain · separator. ------- */
.host-secondary{margin:18px auto 0;text-align:center;font-size:14.5px;font-weight:500;max-width:560px}
.host-secondary a{color:var(--accent-strong);font-weight:500;text-decoration:none}
.host-secondary a:hover{text-decoration:underline}
.host-secondary .sep{color:var(--muted);margin:0 8px}

/* ---- "What lands in your kit": net-new head + 7 items as a naked 2-col grid (max 640). --------------- */
.host-lands{max-width:640px;margin:48px auto 0}
.host-lands__h{text-align:center;font-family:var(--font-display);font-weight:600;font-size:18px;
  color:var(--ink);margin:0 0 20px}
.host-lands__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:10px}
.host-lands__list li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--ink-2)}
/* 15px cobalt check drawn as a token-driven CSS glyph (no asset dependency, no raw hex). */
.host-lands__list li::before{content:"";position:absolute;left:2px;top:3px;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
@media(max-width:560px){.host-lands__list{grid-template-columns:1fr}}

/* ---- "Is this for me?": section head 600 26 + the 6a disclosure card (720). reassure.js emits
   .disclosure-card + details.disclosure (canonical). ---------------------------------------------------- */
.host-reassure{max-width:720px;margin:56px auto 0}
/* reassure.js emits its own "Is this for me?" head as a .eyebrow inside #reassure — restyle THAT one instance
   into the specced §1.6 head (600 26), so there is no small-caps kicker and no duplicate heading. */
.host-reassure #reassure .eyebrow{display:block;text-align:center;text-transform:none;letter-spacing:-.01em;
  font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.12;color:var(--ink);margin:0 0 18px}

/* ---- the generated kit (JS renders into #host-kit; hidden until submit). One 720 card at
   --shadow-soft-lg, pad 28. ----------------------------------------------------------------------------- */
.host-kit{max-width:720px;margin:0 auto}
.host-kit__head{margin:0 0 4px}
.host-kit .eyebrow{display:none}
.host-kit__head h2.display{font-family:var(--font-display);font-weight:600;font-size:20px;
  letter-spacing:-.01em;color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.host-district{font-weight:var(--fw-semibold);color:var(--accent);margin:6px 0 0}

/* one card frame for every kit block: --r-xl + --shadow-soft-lg. */
.host-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft-lg);padding:28px;margin:16px 0 0}
.host-card h3{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);margin:0 0 8px}
.host-card--name{border:1px solid var(--line)}

/* the attributed-link pill: ellipsized URL + inset primary Copy. */
.host-reflink{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0}
.host-reflink .field{flex:1 1 240px;min-width:0;min-height:52px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--line-strong);font-size:13.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-reflink .btn-outline.sm{min-height:44px}

/* QR: 140px hairline tile, --r 12, 10px pad, ink-on-white. */
.host-qr{display:flex;justify-content:center;margin:14px 0}
.host-qr canvas{width:140px;height:140px;image-rendering:pixelated;
  border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--surface)}

/* run of show: time Bricolage 600 14 --accent tabular in a 52px column + text 14.5/1.55 --muted. */
.host-ros p{display:flex;gap:8px;margin:6px 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.host-ros b{flex:0 0 52px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--accent);
  font-variant-numeric:tabular-nums}

/* the seat sheet: SMD as a 30px pink-OUTLINE chip (1.5px --secondary border, ink 600 13 tabular, NEVER pink
   text/fill) + description --muted. */
.host-seats{list-style:none;padding:0;margin:8px 0 0}
.host-seat{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.host-seat:first-child{border-top:0}
.host-seat > b{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 10px;
  border:1.5px solid var(--secondary);border-radius:var(--r-pill);
  color:var(--ink);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.host-seat__st{color:var(--muted);font-weight:500}
.host-seat__sig{color:var(--muted)}

/* the read-aloud script + prompts. */
.host-prompt{margin:12px 0;padding:14px 16px;border-left:3px solid var(--accent);
  background:var(--accent-wash);border-radius:0 var(--r) var(--r) 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.host-say__h{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);margin:16px 0 6px}
.host-script{padding-left:20px;margin:6px 0 0;line-height:1.6;color:var(--ink-2)}
.host-script li{margin:0 0 6px}
.host-follow{padding-left:20px;line-height:1.6;color:var(--ink-2)}

/* the ANC map (all SMDs with borders + labels), print-friendly, token-fill. */
.host-map-wrap{display:flex;justify-content:center;margin:12px 0}
.host-map{width:100%;max-width:340px;height:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2)}
.host-district{letter-spacing:.01em}

/* count / recap / seed rows. */
.host-count{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:12px 0 0}
.host-recap{margin:12px 0 0}
.host-seed{margin:12px 0 0}

/* the RSVP-list rows inside the manage disclosure. */
.host-follow,.host-script{font-size:14.5px}

/* Q292 — the seat context line when a seat page sent the visitor here (?smd=). */
.host-seatctx{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--accent);
  background:var(--accent-wash);border-radius:0 var(--r) var(--r) 0;font-weight:var(--fw-semibold);font-size:14.5px}
/* Q689 — screens 48/49: the seat context is an eyebrow CHIP top-right of the builder ("hosting for {name} · ANC {SMD}"),
   not a left-border block. Compact pill on the accent wash; floats right, wraps under on narrow. */
.host-formwrap .host-seatchip{float:right;margin:0 0 8px 12px;padding:5px 12px;border-left:0;border-radius:999px;
  background:var(--accent-wash);color:var(--accent-strong);font-size:12.5px;font-weight:var(--fw-semibold);
  text-transform:none;letter-spacing:0}
@media(max-width:560px){.host-formwrap .host-seatchip{float:none;display:inline-block}}

/* the in-place swap: once the kit is visible (loses [hidden]), hide every pre-submit surface so the form and
   the kit never render together (§1.7). host.js does not hide the form itself, so CSS drives the swap. */
.ho:has(#host-kit:not([hidden])) .host-presubmit{display:none}

/* the bottom lines (FAQ · manage · disclaimer). */
.host-foot-line{max-width:620px;margin:22px auto 0;text-align:center;font-size:14.5px;color:var(--muted)}
.host-foot-line a{color:var(--accent-strong)}
.host-disclaimer{max-width:620px;margin:26px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--muted)}

/* the two-col name row stacks ≤760 (canonical tier). */
@media(max-width:760px){.host-form .row2{grid-template-columns:1fr}}

/* print: hide chrome + the form; the kit cards print flat. (Behavior kept from the live CSS.) */
@media print{
  .host-head,.masthead,.site-header,.lfoot,.host-cue,.host-formwrap,#host-form-wrap,
  .host-secondary,.host-lands,.host-reassure,.host-print,.host-count button{display:none}
  .host-card{break-inside:avoid;box-shadow:none;border:1px solid var(--line)}
}