/* ==========================================================================
   Forma Consulting - /book/:slug page styles
   Loaded AFTER styles.css; reuses its font/reset tokens EXCEPT the palette
   below, which is scoped to this stylesheet (only book.html/book-manage.html
   load it) so it never touches the warm brand palette used site-wide.
   Rebuilt 2026-09-27 to match the approved mockup exactly
   (~/previews/forma-booking/index.html, screens 3 + 4): a cool light grey
   page (#F7F8FA), a WHITE card, teal fills/accents, Forma navy text -
   the SideKick-like feel Bruno approved. Text-safe teal derivatives:
     --teal       #2F7F74  (fills: selected day/slot, CTA buttons, icons)
     --teal-deep  #24685F  (--teal-text alias below: hover states, kickers,
                            any place teal is a TEXT color - passes 4.5:1)
   WCAG 4.5:1 audited against this palette below (readability floor): navy
   13.7:1, muted grey #4B5563 7.1/7.6:1 (6.7:1 on the #EEF1F4 toggle track; was
   #69707B, 4.7/5.0:1: it passed but read thin and soft on a 1x screen,
   2026-10-02), teal-deep 6.1/6.5:1,
   white-on-teal fill 4.76:1.
   Readability pass 2026-10-02 (Bruno: "a bit blurry, letters hard to read"):
   body copy 15px+, labels/secondary 13-14px+, nothing under 13px except tiny
   uppercase labels, buttons/selects set in Archivo (not the system font), the
   film grain and the antialiased thinning of styles.css switched off for this
   page only, whole-pixel logo, exact-density headshots.
   ========================================================================== */

:root{
  --offwhite:#F7F8FA;
  --border:#E4E7EC;
  --muted:#4B5563;
  --disabled:#8A929D; /* unavailable days: a calm grey that still reads (3.1:1 on white; was #CBD1D8 at 1.5:1) */
  --teal:#2F7F74;
  --teal-deep:#24685F;
  --teal-light:#47A89A;
  --teal-tint:rgba(47,127,116,0.10);
  --teal-text:#24685F;
  --danger:#8A2E2E;
  --danger-bg:#F7EAEA;
  --danger-border:#E3C4C4;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,0.04), 0 4px 12px rgba(16,24,40,0.05);
  --shadow-md:0 12px 28px rgba(16,24,40,0.10);
}

.book-body{ background:var(--offwhite); -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; } /* styles.css sets antialiased, which thins dark-on-light text; not on this light page */
.book-body::after{ display:none; } /* styles.css film grain: a speckle over every letter and photo here */
.book-body :is(button, select, input, textarea){ font-family:inherit; } /* the page's buttons and select otherwise render in the system font */

.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* honeypot: present in the DOM for bots, invisible and unreachable for people */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- brand bar ---------- */
/* Whole-pixel sizes only (34 mark, 99x20 wordmark = its 1374:277 shape), so the vector
   edges land on pixel boundaries and stay crisp on a 1x screen. The mark and the
   wordmark are pure paths (no embedded raster, no blur filter). */
.forma-logo{ display:inline-flex; align-items:center; gap:10px; }
.forma-logo-mark{ display:block; height:34px; width:34px; max-width:none; flex:none; }
.forma-logo-word{ display:block; height:20px; width:99px; max-width:none; flex:none; }
.pub-brandbar{ max-width:1100px; margin:0 auto; padding:26px 48px 0; }
@media (max-width:640px){ .pub-brandbar{ padding:20px 20px 0; } }

/* ---------- hero ---------- */
.pub-hero{ max-width:1100px; margin:0 auto; padding:22px 48px 26px; }
@media (max-width:640px){ .pub-hero{ padding:14px 20px 18px; } }
.pub-kicker{ color:var(--teal-text); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; margin-bottom:12px; }
.pub-h1{ font-family:var(--font-body); font-weight:800; font-size:34px; color:var(--navy); line-height:1.22; max-width:680px; margin:0 0 10px; letter-spacing:-0.01em; text-wrap:balance; }
.pub-h1 em{ color:var(--teal-text); font-style:normal; }
@media (max-width:640px){ .pub-h1{ font-size:32px; margin-bottom:8px; } .pub-kicker{ margin-bottom:10px; } } /* after the base rule on purpose: 32px is what phones always showed (the old 24px rule sat above the base one and never applied) */
.pub-sub{ color:var(--muted); font-size:16px; max-width:560px; line-height:1.6; text-wrap:balance; }

/* ---------- shell + card ---------- */
.book-shell{ max-width:1100px; margin:0 auto; padding:0 48px 64px; }
@media (max-width:640px){ .book-shell{ padding:0 0 40px; } }
.book-card{ background:var(--white); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-md); display:grid; grid-template-columns:320px 1fr; overflow:hidden; }
@media (max-width:760px){ .book-card{ grid-template-columns:1fr; border-radius:0; border-left:none; border-right:none; } }

.book-left{ padding:32px 28px; border-right:1px solid var(--border); background:var(--offwhite); display:flex; flex-direction:column; }
@media (max-width:760px){ .book-left{ border-right:none; border-bottom:1px solid var(--border); padding:22px 20px 20px; } }

/* ---------- meeting-type switch ---------- */
.mt-toggle{ display:flex; flex-wrap:wrap; width:100%; gap:3px; background:#EEF1F4; padding:3px; border-radius:11px; margin-bottom:22px; }
.mt-toggle[hidden]{ display:none; }
.mt-toggle-btn{ flex:1 1 88px; min-width:88px; background:transparent; border:none; padding:9px 8px; border-radius:8px; font-size:14px; font-weight:600; color:var(--muted); line-height:1.3; white-space:normal; cursor:pointer; font-family:inherit; transition:background .15s ease, color .15s ease; } /* flex-wrap + a min basis: the switch is built from the real list of active links, so a 3rd/4th tab wraps onto its own row instead of crushing the neighbor. Text is --muted (#4B5563, 6.7:1 on this track's #EEF1F4). */
.mt-toggle-btn:not(.active):hover{ color:var(--navy); }
.mt-toggle-btn.active{ background:var(--white); color:var(--navy); font-weight:600; box-shadow:0 1px 3px rgba(16,24,40,.12); cursor:default; }
@media (max-width:760px){ .mt-toggle{ margin-bottom:16px; } .mt-toggle-btn{ padding:10px 10px; } }

.book-hosts{ margin-bottom:18px; }
.avatar-stack{ display:flex; margin-bottom:10px; }
/* 52px, no border: the photo fills the whole circle, so the exact-density file (52/104/160) is shown 1:1 */
.avatar-circle{ width:52px; height:52px; border-radius:50%; background:var(--navy); color:var(--offwhite); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.avatar-circle img, .host-mini .avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-circle picture{ display:block; width:100%; height:100%; }
.avatar-stack .avatar-circle + .avatar-circle{ margin-left:8px; }
.host-names{ font-weight:600; font-size:15px; line-height:1.35; color:var(--navy); margin-bottom:2px; }
.host-caption{ font-size:14px; color:var(--muted); line-height:1.45; }

.book-meeting-name{ font-family:var(--font-body); font-weight:800; font-size:22px; color:var(--navy); margin:0 0 10px; letter-spacing:-0.01em; }
.book-meta{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.book-meta-item{ display:flex; align-items:center; gap:9px; font-size:15px; line-height:1.5; color:var(--navy); font-weight:500; }
.book-meta-item svg{ flex:none; color:var(--teal-text); }
.book-meeting{ display:block; }

/* Pages for a link other than the intro call hide the founders' card until their
   own hosts arrive (the card is in the HTML for the intro call). It keeps its
   space, so nothing jumps when it appears. */
html[data-hosts="pending"] .book-hosts, html[data-hosts="pending"] .pub-sub{ visibility:hidden; }

/* ---------- quiet placeholders (shown only while the real content loads) ---------- */
@keyframes skel-breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.skel-bar{ display:inline-block; height:14px; border-radius:6px; background:#E6EAEF; vertical-align:middle; animation:skel-breathe 1.8s ease-in-out infinite; }
.book-meeting-name .skel-bar{ height:22px; }
.book-meeting.is-loading .book-meta-item{ min-height:22.5px; }
.cal-grid.is-loading{ animation:skel-breathe 1.8s ease-in-out infinite; }
.cal-grid.is-loading .cal-cell{ pointer-events:none; }
/* six bars are taller than the list's 280px cap on a phone, so the placeholder fills it exactly */
.time-list:has(> .time-skel){ overflow:hidden; }
.time-skel{ flex:none; height:39px; border-radius:9px; background:#EEF1F4; animation:skel-breathe 1.8s ease-in-out infinite; }
.time-skel:nth-child(3){ animation-delay:.15s; }
.time-skel:nth-child(4){ animation-delay:.3s; }
.time-skel:nth-child(5){ animation-delay:.45s; }
.time-skel:nth-child(6){ animation-delay:.6s; }

/* ---------- left column: what the call is, and who has done it ---------- */
.book-side-h{ margin:0 0 14px; font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.book-agenda{ margin-top:6px; padding-top:22px; border-top:1px solid var(--border); }
.book-agenda-list{ list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.book-agenda-list li{ counter-increment:step; position:relative; padding-left:34px; font-size:15px; line-height:1.5; color:var(--navy); }
.book-agenda-list li::before{ content:counter(step); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--teal-tint); color:var(--teal-text); font-size:13px; font-weight:700; line-height:22px; text-align:center; }
.book-agenda-phone{ display:none; }

/* One-column card (tablet and phone): the calendar leads, so the long left-column
   blocks drop out and the short "what happens" list sits under the calendar. */
@media (max-width:760px){
  .book-agenda-desktop{ display:none; }
  .book-agenda-phone{ display:block; margin-top:22px; padding-top:20px; }
}

/* Phone: the whole host card is ONE compact block - the photos beside the two
   names, then a single "Intro call · 30 min · Google Meet · Free" line across the
   full width - so the calendar starts in the first screen instead of after a
   screenful of host details. The two photos overlap a little (a ring keeps them
   apart) so the names get room at a readable size without cutting off. */
@media (max-width:640px){
  .book-left{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-items:center; padding:14px 20px; }
  .mt-toggle{ grid-column:1 / -1; }
  .book-hosts{ display:contents; }
  .avatar-stack{ grid-column:1; grid-row:span 2; margin:0; }
  .avatar-circle{ width:48px; height:48px; box-shadow:0 0 0 2px var(--offwhite); }
  .avatar-stack .avatar-circle + .avatar-circle{ margin-left:-10px; }
  .host-names{ grid-column:2; margin:0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .host-caption{ grid-column:2; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .book-meeting{ grid-column:1 / -1; display:flex; align-items:center; white-space:nowrap; overflow:hidden; min-width:0; margin-top:10px; }
  .book-meeting-name{ font-size:15px; font-weight:700; margin:0; flex:none; line-height:1.5; }
  .book-meeting-name::after{ content:"\00b7"; margin:0 8px; font-weight:500; color:var(--muted); }
  .book-meeting-name .skel-bar{ height:15px; }
  .book-meta{ flex-direction:row; gap:0; margin:0; min-width:0; }
  .book-meta-item{ font-size:15px; color:var(--muted); white-space:nowrap; gap:0; }
  .book-meta-item svg{ display:none; }
  .book-meta-item + .book-meta-item::before{ content:"\00b7"; margin:0 8px; }
}

.book-right{ padding:32px 34px; min-width:0; }
@media (max-width:760px){ .book-right{ padding:22px 20px 26px; } }
.book-phase[hidden]{ display:none; }

/* ---------- timezone row ---------- */
.tz-row{ font-size:14px; color:var(--muted); margin-bottom:18px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
/* min-width = the width the filled-in time zone list gives the select, so it takes the same
   room before the list is filled and the row does not re-wrap (and jump) when the script runs */
.tz-row select{ border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:var(--offwhite); color:var(--navy); font-size:14px; min-width:283px; max-width:100%; }

/* ---------- calendar + time list ---------- */
.booking-grid{ display:grid; grid-template-columns:1fr 220px; gap:28px; }
@media (max-width:700px){ .booking-grid{ grid-template-columns:1fr; gap:22px; } }
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-nav-btn{ background:var(--white); border:1px solid var(--border); border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy); }
.cal-nav-btn:hover:not(:disabled){ background:var(--offwhite); border-color:#C9D0D8; }
.cal-nav-btn:disabled{ opacity:.35; cursor:default; }
.cal-month-label{ font-weight:700; font-size:16px; color:var(--navy); }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.cal-dow span{ text-align:center; font-size:13px; color:var(--muted); font-weight:600; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; transition:opacity .2s ease; }
.cal-cell{ aspect-ratio:1; border:none; background:transparent; border-radius:9px; font-size:16px; font-weight:500; color:var(--navy); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; }
.cal-cell:not(.pad):not(.disabled):hover{ background:var(--teal-tint); }
.cal-cell.disabled{ color:var(--disabled); font-weight:400; cursor:default; }
.cal-cell.today::after{ content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--teal); }
.cal-cell.today.selected::after{ background:#fff; }
.cal-cell.selected{ background:var(--teal); color:#fff; font-weight:700; }
.cal-cell.selected:active{ transform:scale(.94); }

.time-col-label{ min-height:1.7em; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.04em; }
.time-list{ display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; padding-right:2px; }
/* desktop: the left column is taller now (what happens + proof), so let the open
 * times use that height instead of stopping at 280px above an empty block.
 * contain:size keeps the long list from stretching the card; it just scrolls. */
@media (min-width:761px){
  .book-right{ display:flex; flex-direction:column; }
  #phase-picker:not([hidden]){ flex:1 1 auto; display:flex; flex-direction:column; }
  #phase-picker .booking-grid{ flex:1 1 auto; }
  #phase-picker .time-col{ display:flex; flex-direction:column; min-height:0; }
  #phase-picker .time-list{ flex:1 1 0; min-height:200px; max-height:none; contain:size; }
}
.time-row{ display:flex; align-items:center; gap:8px; }
.time-slot{ flex:1; background:var(--white); border:1px solid var(--border); border-radius:9px; padding:10px 14px; font-size:16px; font-weight:500; color:var(--navy); text-align:center; cursor:pointer; }
.time-slot:hover:not(.selected){ border-color:var(--teal); color:var(--teal-text); }
.time-slot.selected{ background:var(--teal); color:#fff; border-color:var(--teal); font-weight:600; }
.time-next-btn{ flex:none; background:var(--navy); color:#fff; border:none; border-radius:9px; padding:10px 16px; font-size:15px; font-weight:600; cursor:pointer; }
.time-next-btn:hover{ background:#163554; }
.time-empty{ font-size:15px; color:var(--muted); line-height:1.55; padding:10px 2px; }
.time-empty a, .time-empty button.link-btn{ color:var(--teal-text); font-weight:600; text-decoration:underline; text-underline-offset:2px; background:none; border:none; padding:0; cursor:pointer; font-size:inherit; }

.back-link{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; color:var(--muted); font-size:14px; font-weight:600; margin-bottom:18px; cursor:pointer; }
.back-link:hover{ color:var(--navy); }
.back-link svg{ flex:none; }

.chosen-summary{ background:var(--teal-tint); color:var(--teal-text); border-radius:10px; padding:12px 14px; font-size:15px; font-weight:500; line-height:1.5; margin-bottom:20px; }

/* ---------- details form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:14px; font-weight:600; color:var(--navy); }
.form-field label .opt{ font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0; }
.form-field input, .form-field textarea, .form-field select{ border:1px solid var(--border); border-radius:9px; padding:11px 12px; background:var(--offwhite); color:var(--navy); font-size:16px; font-family:inherit; width:100%; }
.form-field textarea{ resize:vertical; min-height:64px; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select{ border-color:var(--danger); }
.field-error{ color:var(--danger); font-size:14px; margin-top:2px; }
.form-note{ color:var(--muted); font-size:14px; font-weight:500; margin:10px 0 16px; line-height:1.5; }

.form-banner{ display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:12px 14px; font-size:15px; line-height:1.5; margin-bottom:16px; }
.form-banner.error{ background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger); }
.form-banner svg{ flex:none; margin-top:1px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-sm); padding:12px 22px; font-size:15px; font-weight:600; border:none; white-space:nowrap; cursor:pointer; font-family:var(--font-body); }
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.btn-gold{ background:var(--teal); color:#fff; }
.btn-gold:hover{ background:var(--teal-deep); }
.btn-gold:disabled{ opacity:.55; cursor:default; }
.btn-outline{ background:var(--white); border:1.5px solid var(--border); color:var(--navy); }
.btn-outline:hover{ border-color:var(--navy); }
.btn-ghost{ background:var(--offwhite); border:1px solid var(--border); color:var(--navy); font-weight:500; }
.btn-ghost:hover{ background:#EEE8DC; }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-link{ background:none; border:none; padding:0; color:var(--teal-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; font-size:15px; cursor:pointer; }
.btn[hidden]{ display:none; }

/* ---------- confirmation ---------- */
.flow-wrap{ max-width:640px; margin:6px auto 0; padding:0 48px 60px; }
@media (max-width:640px){ .flow-wrap{ padding:0 20px 40px; } }
.flow-card{ background:var(--white); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-md); padding:30px; margin-bottom:20px; }
@media (max-width:640px){ .flow-card{ padding:20px; } }

.check-badge{ width:64px; height:64px; border-radius:50%; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.check-badge svg{ color:var(--teal); }
.conf-h1{ font-family:var(--font-body); font-weight:800; font-size:29px; text-align:center; margin:0 0 8px; color:var(--navy); letter-spacing:-0.01em; }
.conf-sub{ text-align:center; color:var(--muted); font-size:16px; max-width:560px; margin:0 auto 26px; line-height:1.5; }
.conf-details-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); font-size:15px; color:var(--navy); }
.conf-details-row:last-of-type{ border-bottom:none; }
.conf-details-row svg{ flex:none; color:var(--teal); }
.conf-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.conf-links{ display:flex; gap:18px; margin-top:14px; font-size:14px; }
.conf-links a, .conf-links button{ text-decoration:underline; text-underline-offset:2px; color:var(--muted); font-weight:600; cursor:pointer; background:none; border:none; padding:0; font-size:inherit; font-family:inherit; }
.conf-links a:hover, .conf-links button:hover{ color:var(--navy); }
.host-mini{ display:flex; align-items:center; gap:12px; }
.host-mini .avatar{ width:52px; height:52px; border-radius:50%; background:var(--navy); color:var(--offwhite); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.host-mini-name{ font-weight:600; font-size:16px; color:var(--navy); }
.host-mini-role{ font-size:14px; color:var(--muted); }
.email-note{ font-size:14px; color:var(--muted); margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }

/* ---------- state screens: loading / not found / unavailable ---------- */
.state-screen{ max-width:640px; margin:0 auto; padding:80px 48px 64px; text-align:center; }
@media (max-width:640px){ .state-screen{ padding:56px 20px 40px; } }
.state-icon{ width:56px; height:56px; border-radius:50%; background:var(--teal-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--teal); }
.state-icon.is-error{ background:var(--danger-bg); color:var(--danger); }
.state-title{ font-family:var(--font-body); font-weight:800; font-size:26px; color:var(--navy); margin:0 0 10px; }
.state-body{ color:var(--muted); font-size:16px; line-height:1.6; max-width:440px; margin:0 auto 22px; }
.state-spinner{ width:32px; height:32px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--teal); margin:0 auto 20px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ==========================================================================
   Smarter details form (2026-09-30, preview): website-first confirm card,
   tap chips instead of dropdowns, optional "what is a win" line, and the
   preview-only banner and "not sent" screen. Matches the approved mock
   (~/previews/forma-booking-form/index.html). Type floor: 13px (14px for labels).
   ========================================================================== */
[hidden]{ display:none !important; }

.form-grid > .site-field,
.form-grid > .biz-fields,
.form-grid > .chip-field,
.form-grid > .win-field,
.form-grid > .extra-fields{ grid-column:1 / -1; }
.extra-fields{ display:flex; flex-direction:column; gap:14px; }
.extra-fields:empty{ display:none; }

.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible{ outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.form-field input[aria-invalid="true"]{ border-color:var(--danger); }

.q-label{ font-size:14px; font-weight:600; color:var(--navy); line-height:1.4; }
.q-label .opt{ font-weight:500; color:var(--muted); margin-left:4px; }

/* website field + hint */
.site-field #f-site{ border:1.5px solid var(--teal); background:var(--white); }
.field-hint{ font-size:13px; color:var(--muted); line-height:1.45; }
.none-link{ align-self:flex-start; margin-top:2px; font-size:14px; font-weight:600; text-align:left; }

/* confirm card */
.site-card{ display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:#FBFCFC; }
.site-card[data-state="confirmed"]{ border-color:var(--teal); background:var(--teal-tint); }
.site-card[data-state="loading"], .site-card[data-state="unreadable"], .site-card[data-state="rejected"]{ color:var(--muted); font-size:14px; line-height:1.5; }
.site-msg{ min-width:0; }
.site-spin{ flex:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--teal); animation:spin .8s linear infinite; }
.site-fav{ flex:none; width:38px; height:38px; border-radius:9px; background:var(--white); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.site-fav img{ width:100%; height:100%; object-fit:contain; display:block; }
.site-fav.is-letter{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:800; font-size:16px; }
.site-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.site-name{ font-size:15px; font-weight:700; color:var(--navy); overflow-wrap:anywhere; }
.site-desc{ font-size:14px; color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.site-q{ font-size:13px; color:var(--muted); margin-top:3px; }
.site-actions{ flex:none; display:flex; gap:6px; }
.site-btn{ font-family:inherit; font-size:14px; font-weight:600; color:var(--navy); background:var(--white); border:1.5px solid var(--border); border-radius:999px; padding:7px 13px; cursor:pointer; white-space:nowrap; }
.site-btn:hover{ border-color:var(--navy); }
.site-btn.on{ background:var(--teal); border-color:var(--teal); color:#fff; }
.site-btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
@media (max-width:560px){
  .site-card[data-state="found"], .site-card[data-state="confirmed"]{ flex-wrap:wrap; }
  .site-body{ flex-basis:calc(100% - 52px); }
  .site-actions{ flex-basis:100%; }
  .site-btn{ flex:1 1 0; padding:9px 12px; }
}

/* business name + type, tagged when the site filled them */
.biz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .biz-grid{ grid-template-columns:1fr; } }
.biz-field{ display:flex; flex-direction:column; gap:6px; }
.biz-field label{ font-size:14px; font-weight:600; color:var(--navy); }
.biz-field label .opt{ font-weight:500; color:var(--muted); }
.biz-field input{ border:1px solid var(--border); border-radius:9px; padding:11px 12px; background:var(--offwhite); color:var(--navy); font-size:16px; font-family:inherit; width:100%; }
.biz-field input:focus-visible{ outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.tag{ display:inline-block; font-size:13px; font-weight:600; color:var(--teal-text); background:var(--teal-tint); border-radius:999px; padding:1px 8px; margin-left:4px; vertical-align:1px; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-family:inherit; font-size:15px; font-weight:500; line-height:1.3; color:var(--navy); background:var(--white); border:1px solid var(--border); border-radius:20px; padding:8px 12px; cursor:pointer; text-align:left; }
.chip:hover{ border-color:var(--teal); }
.chip.on{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-text); font-weight:700; }
.chip:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.chips[aria-invalid="true"]{ outline:1.5px dashed var(--danger); outline-offset:4px; border-radius:12px; }

/* "Something else" box under the chips. The label is for screen readers only;
   the placeholder is what a visitor sees. */
.other-wrap{ margin-top:2px; }
.form-field .other-wrap label{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.other-wrap input{ max-width:100%; }

/* preview-only: banner on the form, and the "not sent" screen */
.preview-banner{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; background:#FFF6E0; border:1px solid #EBD9A4; color:#5E4400; border-radius:10px; padding:10px 14px; font-size:14px; line-height:1.5; margin-bottom:16px; }
.preview-banner b{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:13px; }
.preview-note{ font-style:normal; font-weight:600; color:#5E4400; margin:0 0 12px; }
.check-badge.is-preview{ background:#FFF1CC; }
.check-badge.is-preview svg{ color:#7A5A00; }
.prev-list{ display:grid; grid-template-columns:minmax(110px,150px) 1fr; gap:8px 14px; margin:14px 0 4px; font-size:15px; }
.prev-list dt{ color:var(--muted); font-size:14px; font-weight:600; padding-top:1px; }
.prev-list dd{ margin:0; color:var(--navy); overflow-wrap:anywhere; }
@media (max-width:560px){ .prev-list{ grid-template-columns:1fr; gap:2px 0; } .prev-list dd{ margin-bottom:8px; } }
.prev-json{ margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.prev-json summary{ cursor:pointer; font-size:14px; font-weight:600; color:var(--teal-text); }
.prev-json pre{ margin:10px 0 0; background:var(--offwhite); border:1px solid var(--border); border-radius:10px; padding:12px; font-size:13px; line-height:1.5; overflow:auto; max-height:320px; color:var(--navy); white-space:pre-wrap; overflow-wrap:anywhere; }