/* ── Palette — clean, light, neutral ── */
:root {
  --bg: #F4F6F8;
  --card: #FFFFFF;
  --ink: #1A1A2E;
  --mut: #6B7280;
  --line: #E2E6EA;
  --acc: #2563EB;
  --acc-lite: #EFF6FF;
  --warn: #DC2626;
  --warn-bg: #FEF2F2;
  --ok: #16A34A;
  --ok-bg: #F0FDF4;
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #111827;
    --card: #1F2937;
    --ink: #F3F4F6;
    --mut: #9CA3AF;
    --line: #374151;
    --acc: #60A5FA;
    --acc-lite: #1E3A5F;
    --warn: #F87171;
    --warn-bg: #2D1515;
    --ok: #4ADE80;
    --ok-bg: #0F2D1A;
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}

:root[data-theme=dark] {
  --bg: #111827;
  --card: #1F2937;
  --ink: #F3F4F6;
  --mut: #9CA3AF;
  --line: #374151;
  --acc: #60A5FA;
  --acc-lite: #1E3A5F;
  --warn: #F87171;
  --warn-bg: #2D1515;
  --ok: #4ADE80;
  --ok-bg: #0F2D1A;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font: 16px/1.6 "Times New Roman", Times, serif;
  background: var(--bg);
  color: var(--ink);
}

/* ── Header ── */
header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

header b {
  font-size: 16px;
  color: var(--ink);
  letter-spacing: .01em;
}

.grow { flex: 1; }

#bld {
  font-size: 10px;
  color: var(--mut);
  letter-spacing: .04em;
  margin-left: 4px;
  opacity: .7;
}

/* ── Badges (hidden) ── */
#pend, #sync { display: none; }

/* ── Header buttons ── */
#lang, #menu {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

/* ── Buttons ── */
button {
  font: inherit;
  padding: 11px 18px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 10px;
  cursor: pointer;
}

button.p {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
  font-weight: 600;
}

button:disabled { opacity: .4; cursor: not-allowed; }
button:active:not(:disabled) { opacity: .85; }

/* ── Layout ── */
main { max-width: 680px; margin: 0 auto; padding: 20px 16px 104px; }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 14px;
  box-shadow: var(--shadow);
}

.card.off { display: none; }
.card.bad { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }

/* ── Question anatomy ── */
.qn {
  font-size: 11px;
  color: var(--mut);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.qt { margin: 4px 0 14px; font-size: 17px; line-height: 1.45; }
.err { color: var(--warn); font-size: 13.5px; margin-top: 8px; }
.opt { font-size: 12px; color: var(--mut); margin-top: 6px; }

/* ── Text inputs ── */
input[type=text], input[type=number] {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

input[type=text]:focus, input[type=number]:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ── Choice labels ── */
label.ch {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  margin: 0 0 8px;
  background: var(--card);
  cursor: pointer;
}

label.ch:last-of-type { margin-bottom: 0; }
label.ch.on { border-color: var(--acc); background: var(--acc-lite); }
label.ch input { margin: 3px 0 0; accent-color: var(--acc); }

/* ── Module section headers ── */
h2 {
  font-size: 12px;
  margin: 26px 0 12px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.mc { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mut); font-size: 11px; }

/* ── Hint block (enumerator only) ── */
.hint {
  background: #FFFBEB;
  border-left: 4px solid #D97706;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 13.5px;
  color: #92400E;
}

.hint b {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  color: #B45309;
}

/* ── Read-aloud intro ── */
.intro {
  background: #EFF6FF;
  border-left: 4px solid #3B82F6;
  border-radius: 0 8px 8px 0;
  padding: 13px 16px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
}

.intro .lead {
  display: block;
  font-size: 10.5px;
  color: #2563EB;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: 6px;
}

/* ── Consent script (read verbatim) ── */
.consent {
  background: var(--ok-bg);
  border-left: 4px solid var(--ok);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.6;
}

.consent p { margin: 0 0 10px; }
.consent p:last-child { margin: 0; }

.consent .lead {
  display: block;
  font-size: 10.5px;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: 7px;
}

/* ── Footer nav ── */
footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(0,0,0,.07);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
}

#mprog { flex: 1; text-align: center; font-size: 12px; color: var(--mut); }
footer button { flex: 1; }

/* ── Done / info screens ── */
.mid { text-align: center; padding: 48px 20px; color: var(--mut); }
.big { font-size: 22px; color: var(--ink); margin-bottom: 10px; font-weight: 700; }
#upd { display: none; background: #FEF9C3; border-bottom: 1px solid #FDE047; color: #854D0E; padding: 10px 16px; font-size: 14px; text-align: center; }

/* ── Stats table (legacy, kept for safety) ── */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
td { padding: 10px 4px; border-bottom: 1px solid var(--line); }
td:last-child { text-align: right; font-weight: 600; }

/* ── Menu stat rows ── */
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  gap: 8px;
}
.menu-row:last-child { border-bottom: none; }
.menu-label { color: var(--mut); flex: 1; }
.menu-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.menu-count { font-weight: 700; font-size: 15px; min-width: 20px; text-align: right; }
.menu-btn {
  font: 12px/1 "Times New Roman", Times, serif;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  white-space: nowrap;
}
.menu-btn.p {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
  font-weight: 600;
}

/* ── Dark-mode overrides for static colours ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .hint { background: #2A1C06; color: #FDE68A; }
  :root:not([data-theme=light]) .hint b { color: #F59E0B; }
  :root:not([data-theme=light]) .intro { background: #1A2840; color: #BFDBFE; }
  :root:not([data-theme=light]) .intro .lead { color: #60A5FA; }
  :root:not([data-theme=light]) input[type=text],
  :root:not([data-theme=light]) input[type=number] { background: var(--card); }
}

:root[data-theme=dark] .hint { background: #2A1C06; color: #FDE68A; }
:root[data-theme=dark] .hint b { color: #F59E0B; }
:root[data-theme=dark] .intro { background: #1A2840; color: #BFDBFE; }
:root[data-theme=dark] .intro .lead { color: #60A5FA; }
:root[data-theme=dark] input[type=text],
:root[data-theme=dark] input[type=number] { background: var(--card); }

/* ── Landing consent label ── */
.consent-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--ok);
  margin-bottom: 10px;
}

/* ── Contact block on landing page ── */
.contact-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--mut);
  line-height: 1.7;
}
.contact-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--mut);
  margin-bottom: 4px;
}
.contact-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.contact-person {
  flex: 1;
  line-height: 1.65;
}
.contact-person-r { text-align: right; }
.contact-name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.contact-role { color: var(--mut); font-size: 12px; margin-bottom: 2px; }
.contact-block a { color: var(--acc); text-decoration: none; font-size: 13px; }
.contact-block a:hover { text-decoration: underline; }

/* ── Danger button ── */
button.danger {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--card);
}
button.danger:hover { background: var(--warn-bg); }

/* ── Resume modal overlay ── */
#resume-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#resume-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

/* ── Carried forward from the previous template.css, 2026-10-05 ──────────────────────────────
   The design above was uploaded to main as a built style.css on an earlier build of the form and
   predates two rules the current template.html depends on. A straight swap dropped both, and
   `select.dd` is not cosmetic: it is EVERY dropdown on the form -- each categorical question, the
   enumerator selector, the route selector and obs_environment -- and it carries the 48px minimum
   touch target. Losing it on a tablet held at arm's length in a queue is a field problem, not a
   styling one. Appended rather than merged into the blocks above so the uploaded design stays
   readable as the single thing it is, and so the next design pass can see exactly what was added. */

/* choice blocks: spacing between the options of one question */
.pick { margin: 0 0 16px; }
.pick:last-child { margin-bottom: 6px; }
.pick .qn { margin-bottom: 6px; }

/* dropdowns: every select on the form */
select.dd {
  width: 100%;
  padding: 13px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  min-height: 48px;
}
select.dd:focus { outline: 2px solid var(--acc); border-color: var(--acc); }