/* Shared look for the public getaway forms (apply / nominate / contact).
   Standalone: designed for a narrow, tall Wix popup iframe (~320-680px),
   phone-first, zero horizontal overflow at 320px.

   Visual language matches reachdbm.com (recon 2026-08-31): deep navy
   #1F3140 (secondary #324158) + warm gold #CB902F accents on WHITE,
   Montserrat headings (loaded from Google Fonts — the nginx CSP for these
   three pages allows fonts.googleapis.com/fonts.gstatic.com; the rest of
   the app does not), pill buttons, generous whitespace. Light and airy on
   purpose: these popups sit on a light website. */
:root {
  --navy: #1F3140;
  --navy-2: #324158;
  --gold: #CB902F;
  --gold-deep: #a8751f;
  --gold-soft: #faf3e6;
  --bg: #ffffff;
  --card: #ffffff;
  --field: #ffffff;      /* inputs and pill-button faces */
  --tray-bg: #fcfcfd;
  --edge: #e4e7ec;
  --how-edge: #ecdcbd;
  --ink: #1F3140;
  --title: #1F3140;      /* headings — navy in light, near-white in dark */
  --label-ink: #324158;  /* field labels and small captions */
  --muted: #5c6b7a;
  --ok: #2e6b12;
  --ok-soft: #eaf4de;
  --bad: #a32d2d;
  --bad-soft: #fdecec;
  --tap: 44px;
  --heading: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* Dark scheme (system preference only — these pages stay light-first, but
   a dark-mode phone shouldn't get blinded). Deep charcoal ground, the same
   navy/gold language with the golds lifted for contrast; every literal
   surface color above is a token so this block is the whole story. */
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #1F3140;
    --navy-2: #3d4f68;
    --gold: #CB902F;
    --gold-deep: #e3ab4d;
    --gold-soft: #332814;
    --bg: #14181e;
    --card: #1b2129;
    --field: #232a34;
    --tray-bg: #191f26;
    --edge: #3a4450;
    --how-edge: #4a3c22;
    --ink: #e6eaee;
    --title: #e3eaf2;
    --label-ink: #c3ceda;
    --muted: #a2aeba;
    --ok: #9ed47c;
    --ok-soft: #1e2b15;
    --bad: #ef8e8e;
    --bad-soft: #391c1c;
  }
}
* { margin: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  padding: 28px 20px 20px; line-height: 1.6;
}
@media (max-width: 380px) { body { padding: 20px 14px 14px; } }
.wrap { max-width: 42rem; margin: 0 auto; }
/* The logo's wordmark is white, so it sits on a small navy chip — the same
   deep navy reachdbm.com uses for its header band. */
.logo-band {
  display: inline-block; background: var(--navy);
  border-radius: 10px; padding: 9px 14px; margin: 0 0 1.5rem;
}
.logo { display: block; height: 34px; width: auto; }
h1 {
  font-family: var(--heading);
  font-size: 1.45rem; font-weight: 700; line-height: 1.3;
  color: var(--title); letter-spacing: .01em; margin-bottom: .5rem;
}
.lead { color: var(--muted); font-size: .95rem; margin-bottom: 1.8rem; }
.section {
  background: var(--card); border: 1px solid var(--edge);
  border-radius: 16px; padding: 1.5rem 1.25rem; margin-bottom: 1.25rem;
}
@media (max-width: 380px) { .section { padding: 1.2rem .9rem; } }
.section h2 {
  font-family: var(--heading);
  font-size: .95rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--title);
  padding-bottom: .55rem; margin-bottom: .55rem;
  border-bottom: 2px solid var(--gold);
}
.section .hint { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; }
label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--label-ink); margin: 1rem 0 .35rem;
}
label .opt { font-weight: 400; color: var(--muted); }
.help { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
input, select, textarea {
  width: 100%; min-height: var(--tap);
  padding: .6rem .75rem; font-size: 16px; /* 16px: no iOS zoom-on-focus */
  color: var(--ink); background: var(--field);
  border: 1.5px solid var(--edge); border-radius: 10px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(203, 144, 47, .18);
}
textarea { resize: vertical; min-height: 5.5rem; }
.two { display: flex; gap: .8rem; }
.two > div { flex: 1 1 0; min-width: 0; }
@media (max-width: 380px) { .two { flex-direction: column; gap: 0; } }
/* City / State / ZIP (quick.html "Where do you live?"). */
.note[hidden] { display: none; }
.three { display: flex; gap: .8rem; }
.three > div { flex: 1 1 0; min-width: 0; }
@media (max-width: 420px) { .three { flex-wrap: wrap; } .three > div:first-child { flex-basis: 100%; } }
.linkish { background: none; border: 0; padding: 0 .2rem; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; width: auto; }
.radio, .checkline {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem .65rem; margin-top: .5rem;
  border: 1.5px solid var(--edge); border-radius: 10px;
  font-size: .9rem; font-weight: 400; cursor: pointer;
}
.radio input, .checkline input {
  width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .15rem;
  flex: none; accent-color: var(--gold);
}
.radio:has(input:checked), .checkline:has(input:checked) {
  border-color: var(--gold); background: var(--gold-soft);
}
.how {
  background: var(--gold-soft); border: 1px solid var(--how-edge);
  border-radius: 12px; padding: .9rem 1rem; font-size: .88rem;
  margin-top: .55rem;
}
.how p + p { margin-top: .65rem; }
/* Repeating reference groups on the apply form. */
.ref {
  border: 1.5px solid var(--edge); border-radius: 12px;
  padding: .35rem 1rem 1rem; margin-top: .9rem; position: relative;
}
.ref-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: .8rem;
}
.ref-head b {
  font-family: var(--heading); font-size: .8rem; font-weight: 700;
  letter-spacing: .03em; color: var(--label-ink);
}
.ref-remove {
  min-height: 0; height: 32px; padding: 0 .85rem;
  font-size: .8rem; font-weight: 600; font-family: inherit;
  color: var(--muted); background: var(--field);
  border: 1.5px solid var(--edge); border-radius: 16px; cursor: pointer;
}
.ref-remove:hover { color: var(--bad); border-color: var(--bad); }
.ref label { margin-top: .8rem; }
.add-ref {
  display: block; min-height: var(--tap); margin-top: .9rem;
  padding: .55rem 1.3rem; font-size: .9rem; font-weight: 600;
  font-family: inherit; color: var(--title);
  background: var(--field); border: 1.5px solid var(--label-ink);
  border-radius: 24px; cursor: pointer;
}
.add-ref:hover { border-color: var(--gold); color: var(--gold-deep); }
.add-ref:disabled { opacity: .5; cursor: default; }
button[type=submit] {
  width: 100%; min-height: 52px; margin-top: .6rem;
  padding: .8rem 1.5rem; font-size: 1rem; font-weight: 700;
  font-family: var(--heading); letter-spacing: .02em;
  color: #fff; background: var(--gold); border: none;
  border-radius: 26px; cursor: pointer;
}
button[type=submit]:hover { background: var(--gold-deep); }
button[type=submit]:disabled { opacity: .6; cursor: default; }
.note {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px;
  font-size: .95rem; display: none;
}
.note.ok { display: block; background: var(--ok-soft); color: var(--ok); }
.note.bad { display: block; background: var(--bad-soft); color: var(--bad); }
.footnote {
  color: var(--muted); font-size: .78rem; text-align: center;
  margin: 1.2rem 0 .4rem;
}
/* Honeypot: off-screen, never display:none (some bots skip hidden fields). */
.hp {
  position: absolute; left: -9999px; top: -9999px;
  height: 1px; width: 1px; overflow: hidden;
}

/* ── Section 3 upgrades (Todd, 2026-08-30): destination cards, date-range
   rows, traveling-party rows, and the sleeping-plan matcher. Same navy/gold
   language; tap targets >= 44px; zero horizontal overflow at 320px. */

/* Destination cards */
.dest-cards { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: .5rem; }
@media (min-width: 480px) { .dest-cards { grid-template-columns: 1fr 1fr; } }
.dest-card {
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--field); border: 1.5px solid var(--edge); border-radius: 14px;
  padding: .75rem .9rem; min-height: var(--tap); position: relative;
  transition: border-color .12s, background .12s;
}
.dest-card:hover { border-color: var(--gold); }
.dest-card.on { border-color: var(--gold); background: var(--gold-soft); }
.dest-card.on::after {
  content: "✓"; position: absolute; top: .55rem; right: .7rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--gold); color: #fff; font-size: .8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dest-card b {
  display: block; font-family: var(--heading); font-size: .9rem;
  color: var(--title); padding-right: 1.6rem;
}
.dest-card .dc-place { display: block; font-size: .78rem; color: var(--gold-deep); font-weight: 600; }
.dest-card .dc-blurb { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.dest-card .dc-sleeps { display: block; font-size: .75rem; color: var(--label-ink); margin-top: .2rem; font-weight: 600; }
.dest-card.surprise b { padding-right: 1.6rem; }

/* Field-level validation: kind inline messages under the field (created by
   the form scripts on blur/submit), never a browser-default popup alone. */
.field-err, .row-err {
  font-size: .8rem; color: var(--bad); margin-top: .25rem;
}
.row-err { flex-basis: 100%; }
.input-bad { border-color: var(--bad) !important; }

/* Travel-window rows */
.win-row {
  display: flex; align-items: center; gap: .45rem; margin-top: .6rem;
  flex-wrap: wrap;   /* lets a .row-err message sit on its own line */
}
.win-row input[type=date] { flex: 1 1 0; min-width: 0; }
.win-row .win-dash { color: var(--muted); flex: none; }
.win-row .row-remove, .party-row .row-remove {
  flex: none; width: 40px; height: 40px; min-height: 0;
  border: 1.5px solid var(--edge); border-radius: 50%; background: var(--field);
  color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.win-row .row-remove:hover, .party-row .row-remove:hover {
  color: var(--bad); border-color: var(--bad);
}
.win-bad { border-color: var(--bad) !important; }
.row-err { font-size: .8rem; color: var(--bad); margin-top: .25rem; }

/* Traveling-party rows */
.party-row {
  display: flex; align-items: center; gap: .45rem; margin-top: .6rem;
  flex-wrap: wrap;
}
.party-row .p-name { flex: 1 1 9rem; min-width: 0; }
.party-kind {
  flex: none; display: flex; border: 1.5px solid var(--edge);
  border-radius: 22px; overflow: hidden;
}
.party-kind button {
  min-height: 40px; padding: 0 .8rem; border: none; background: var(--field);
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.party-kind button.on { background: var(--navy); color: #fff; }
.party-row .p-age { flex: none; width: 4.6rem; }

/* Sleeping-plan matcher */
.tray-label {
  font-family: var(--heading); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--label-ink);
  margin-top: .7rem;
}
.tray {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem;
  min-height: 2.6rem; padding: .5rem; border: 1.5px dashed var(--edge);
  border-radius: 12px; background: var(--tray-bg);
}
.tray:empty::after {
  content: "Everyone has a pillow 🎉";
  color: var(--ok); font-size: .85rem; padding: .2rem .3rem;
}
.person-chip {
  min-height: 40px; padding: .35rem .95rem; border-radius: 22px;
  border: 1.5px solid var(--gold); background: var(--gold-soft);
  color: var(--title); font-family: inherit; font-size: .88rem;
  font-weight: 600; cursor: pointer;
}
.person-chip.picked {
  background: var(--gold); color: #fff; border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(203, 144, 47, .25);
}
.beds { margin-top: .7rem; display: grid; gap: .6rem; }
.bed-card {
  border: 1.5px solid var(--edge); border-radius: 14px;
  padding: .7rem .8rem;
}
.bed-card.droppable { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(203,144,47,.15); }
.bed-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bed-head b {
  font-family: var(--heading); font-size: .8rem; font-weight: 700;
  letter-spacing: .03em; color: var(--label-ink);
}
.bed-sizes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bed-sizes button {
  min-height: 36px; padding: 0 .75rem; border-radius: 18px;
  border: 1.5px solid var(--edge); background: var(--field); font-family: inherit;
  font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.bed-sizes button.on {
  border-color: var(--navy-2); background: var(--navy); color: #fff;
}
.bed-people { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; min-height: 1.6rem; }
.bed-people:empty::after {
  content: "Tap a name above, then tap here.";
  color: var(--muted); font-size: .78rem;
}
.bed-remove {
  min-height: 0; height: 30px; padding: 0 .75rem; font-size: .78rem;
  font-weight: 600; font-family: inherit; color: var(--muted);
  background: var(--field); border: 1.5px solid var(--edge); border-radius: 15px;
  cursor: pointer;
}
.bed-remove:hover { color: var(--bad); border-color: var(--bad); }
.plan-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.plan-row .add-ref { margin-top: .8rem; }
.skip-link {
  margin-top: .8rem; min-height: var(--tap); border: none; background: none;
  font-family: inherit; font-size: .85rem; font-weight: 600;
  color: var(--muted); text-decoration: underline; cursor: pointer;
  padding: 0 .2rem;
}
.skip-link:hover { color: var(--title); }
.plan-skipped {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .6rem; font-size: .9rem; color: var(--muted);
}
.plan-skipped .skip-link { margin-top: 0; }
#aBedNote { min-height: 1.1rem; }
#aBedNote.cheer { color: var(--ok); }
#aBedNote.nudge { color: var(--gold-deep); }

/* ── Contact page (2026-09-15): topic chips + reach-me segments. ───────────
   Tappable, multi-select chips for "what is this about?", and pill-shaped
   segmented choices for "how should we reach you" / "best time". Same
   navy/gold language; 44px targets; wrap freely at 320px. */
.topic-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.topic-chip {
  min-height: var(--tap); padding: .45rem 1rem; border-radius: 22px;
  border: 1.5px solid var(--edge); background: var(--field);
  color: var(--label-ink); font-family: inherit; font-size: .9rem;
  font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s, color .12s;
}
.topic-chip:hover { border-color: var(--gold); color: var(--title); }
.topic-chip.on {
  border-color: var(--gold-deep); background: var(--gold); color: #fff;
  box-shadow: 0 0 0 3px rgba(203, 144, 47, .22);
}
.topic-chip.on::before { content: "✓ "; font-weight: 700; }
.topic-chip:focus-visible, .seg-btn:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}
.seg { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.seg-btn {
  min-height: var(--tap); padding: .45rem 1.05rem; border-radius: 22px;
  border: 1.5px solid var(--edge); background: var(--field);
  color: var(--label-ink); font-family: inherit; font-size: .9rem;
  font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.seg-btn:hover { border-color: var(--navy-2); color: var(--title); }
.seg-btn.on { border-color: var(--navy-2); background: var(--navy); color: #fff; }
#cBestWrap { margin-top: .9rem; }
#cBestWrap .tray-label { margin-top: 0; }
.field-err[hidden] { display: none; }
/* Contact page (2026-10-01): the "What is this about?" dropdown and, under
   it, the chosen topic's own questions — one soft-gold block so it reads as
   "these questions belong to what you picked". */
.topic-box {
  margin: 1.2rem 0 .4rem; padding: .2rem 1rem 1rem;
  background: var(--gold-soft); border: 1px solid var(--how-edge);
  border-radius: 12px;
}
.topic-box select { cursor: pointer; }
.topic-box select.input-bad { border-color: var(--bad); }
.topic-fixed { margin: 1rem 0 0; font-weight: 600; color: var(--label-ink); }
.topic-fixed[hidden], .topic-box [hidden] { display: none; }
#cTopicFields:empty { display: none; }


/* ---------- Tooltips (forms-tips.js) ----------
   Navy card with white words in light mode; a pale card with navy words in
   dark mode, so it always stands apart from the page. Never covers its
   trigger (placement is in forms-tips.js), never catches the mouse. */
.form-tip {
  position: fixed; z-index: 1000;
  background: var(--tip-bg, #1F3140); color: var(--tip-ink, #ffffff);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .82rem; line-height: 1.45; font-weight: 400;
  padding: 8px 12px; border-radius: 8px;
  border-left: 3px solid var(--gold);
  width: max-content; max-width: min(300px, calc(100vw - 16px));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  pointer-events: none; white-space: normal;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.form-tip.show { opacity: 1; visibility: visible; transition: opacity .15s ease; }
@media (prefers-color-scheme: dark) {
  .form-tip { --tip-bg: #e6eaee; --tip-ink: #1F3140; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
}