:root {
  --paper: #eef3f9;
  --surface: #ffffff;
  --ink: #1c2b47;
  --muted: #56637c;
  --faint: #8a95ab;
  --line: #e0e7f1;
  --navy: #021c49;
  --accent: #0094d5;
  --accent-dark: #007ab8;
  --accent-tint: #e8f4fd;
  --err: #b4342a;
  --ok: #1f7a54;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(2, 28, 73, .05), 0 10px 30px rgba(2, 28, 73, .06);
  --header-h: 64px;
  --bar-h: 104px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: "Bree Serif", Georgia, "Times New Roman", serif; }

/* Sticky OMTV logo header — always visible */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  height: var(--header-h); padding: 0 20px;
}
.site-header img { height: 24px; width: auto; display: block; }
.site-header .hdr-title {
  font-family: "Bree Serif", Georgia, serif; color: var(--navy);
  font-size: 15px; letter-spacing: .01em;
}

.page { max-width: 720px; margin: 0 auto; padding: 28px 20px calc(var(--bar-h) + 32px); }

/* Access gate */
.gate { max-width: 460px; margin: 6vh auto 0; text-align: center; }
.gate .lock { font-size: 30px; margin-bottom: 6px; }
.gate h1 { font-family: "Bree Serif", Georgia, serif; font-size: 26px; color: var(--navy); margin: 0 0 8px; }
.gate p { color: var(--muted); margin: 0 0 20px; }
.gate .gate-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.gate input {
  width: 100%; font: inherit; text-align: center; letter-spacing: .18em;
  border: 1px solid var(--line); border-radius: 10px; padding: 13px; margin-bottom: 12px;
  text-transform: lowercase;
}
.gate input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* Header / masthead */
.masthead { margin: 4px 0 24px; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 10px; }
.masthead h1 {
  font-family: "Bree Serif", Georgia, serif; font-weight: 400;
  font-size: clamp(24px, 5vw, 34px); line-height: 1.16; color: var(--navy);
  margin: 0 0 14px;
}
.masthead h1 .h1-lead { display: block; font-size: .74em; color: var(--muted); font-weight: 400; margin-bottom: 2px; }
.masthead .lede { color: var(--muted); font-size: 17px; margin: 0; max-width: 58ch; }
.masthead .lede strong { color: var(--ink); font-weight: 600; }

/* Section cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 8px; margin: 18px 0; }
.section-title { display: flex; align-items: baseline; gap: 10px; font-family: "Bree Serif", Georgia, serif; font-weight: 400; font-size: 21px; color: var(--navy); margin: 2px 0 4px; }
.section-title .num { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.section-note { color: var(--faint); font-size: 14px; margin: 0 0 14px; }

/* Question blocks */
.q { padding: 14px 0; border-top: 1px solid var(--line); }
.q:first-of-type { border-top: 0; }
.q-label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 3px; }
.q-label .opt-tag { color: var(--faint); font-weight: 400; font-size: 13px; }
.q-help { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }

/* A clarifying box (ADO #311) — optional, and deliberately quieter than the
   questions above it: it qualifies answers already given rather than asking for
   something new, so it must not read as one more thing to fill in. */
.q.q-quiet { padding-top: 10px; }
.q.q-quiet .q-label { font-weight: 500; font-size: 14.5px; color: var(--muted); }
.q.q-quiet .q-help { font-size: 13.5px; color: var(--faint); margin-bottom: 8px; }
.q.q-quiet textarea { min-height: 56px; font-size: 14.5px; background: #fbfdff; }

input[type=text], input[type=email], input[type=url], input[type=tel], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
input::placeholder, textarea::placeholder { color: #aab3c4; }

/* Pill options */
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14.5px; background: #fff; user-select: none; transition: border-color .15s, background .15s; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt:hover { border-color: #c3cfe0; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; }
.opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-tint); }

/* Inline single checkbox (e.g. logo help) */
.checkline { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; cursor: pointer; }
.checkline input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.checkline span { font-size: 14.5px; color: var(--ink); }

/* File field */
.filefield { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed #b9cbe0; background: #f7fbff; border-radius: 10px; padding: 12px 14px; }
.filefield label.btn-file { display: inline-block; font-size: 14px; font-weight: 600; color: var(--accent-dark); background: var(--accent-tint); border: 1px solid #cfe6f6; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.filefield input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filefield .hint { color: var(--faint); font-size: 13px; }
.filefield .filelist { font-size: 13px; color: var(--muted); flex-basis: 100%; margin-top: 4px; }

/* A note per uploaded file — "how should we use this?" (ADO #112). The row
   stacks so the label reads as a question about the file named above it rather
   than as another field in the form; on a phone that is the only readable
   arrangement anyway. Classes are only ever created by assets/intake.js, never
   by a generated form, so gen_form.py's ALLOWED_CLASSES does not list them. */
.filefield .filenote { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.filefield .filenote + .filenote { margin-top: 10px; }
.filefield .filenote-name { font-size: 13px; color: var(--muted); }
.filefield .filenote-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--faint); }
.filefield .filenote-input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.filefield .filenote-head { display: flex; align-items: baseline; gap: 10px; }
.filefield .filenote-rm { font: inherit; font-size: 12px; color: var(--faint); background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; }
.filefield .filenote-rm:hover { color: var(--err); }
.filefield.dragover { border-style: solid; border-color: var(--accent-dark); background: var(--accent-tint); }
.filefield .filestatus { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.filefield .filestatus:empty { display: none; }
.filefield .filestatus.err { color: var(--err); }
/* Only where a mouse can drag: on a phone the hint would promise something impossible. */
.filefield .filedrop-hint { display: none; color: var(--faint); font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .filefield .filedrop-hint { display: inline; } }

/* Collaborators (repeatable rows) */
.collab-row { display: flex; gap: 8px; margin-bottom: 8px; }
.collab-row input { flex: 1; }
.collab-row .collab-rm { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--faint); border-radius: 10px; width: 42px; cursor: pointer; font-size: 18px; }
.collab-row .collab-rm:hover { color: var(--err); border-color: #e6c3c0; }
.collab-add { margin-top: 4px; background: none; border: 1px dashed #b9cbe0; color: var(--accent-dark); border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.collab-add:hover { background: #f7fbff; }

.q.req .q-label::after { content: " *"; color: var(--accent); }

/* Sticky Save / Submit bar — always visible */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(2,28,73,.06); }
.action-bar .inner { max-width: 720px; margin: 0 auto; padding: 10px 20px 12px; }
.action-bar .bar-consent { margin: 0 0 8px; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--faint); }
.action-bar .bar-consent a { color: var(--accent-dark); }
.action-bar .bar-row { display: flex; align-items: center; gap: 12px; }
.action-bar .save-state { flex: 1; font-size: 13.5px; color: var(--faint); min-height: 18px; }
.action-bar .save-state.ok { color: var(--ok); }
.action-bar .save-state.err { color: var(--err); }
.action-bar .save-state.warn { color: #b45309; }
/* Armed "submit is final" confirm state for the primary button. */
.btn-primary.confirming { background: #b45309; border-color: #b45309; }

.btn { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; border-radius: 11px; padding: 12px 20px; transition: background .15s, transform .05s, opacity .15s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { color: #fff; background: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { color: var(--accent-dark); background: var(--accent-tint); }
.btn-ghost:hover { background: #d8ecfa; }
.btn-block { width: 100%; }

.turnstile-wrap, #turnstile-box { margin: 8px 0 4px; }
.status { margin: 12px 2px 0; font-size: 14.5px; min-height: 20px; }
.status.err { color: var(--err); }
.status.ok { color: var(--ok); }

/* Success */
.success { text-align: center; padding: 44px 10px; }
.success .check { width: 56px; height: 56px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 18px; }
.success h2 { font-family: "Bree Serif", Georgia, serif; font-weight: 400; font-size: 28px; color: var(--navy); margin: 0 0 12px; }
.success p { color: var(--muted); font-size: 17px; max-width: 44ch; margin: 0 auto; }
.success p + p { margin-top: 14px; }
/* What api/intake.ts had to say about the people they listed. Darker and
   heavier than the thanks around it because it is the one line on this page
   they may need to act on. */
.success .note { color: var(--ink); font-weight: 600; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.foot { text-align: center; color: var(--faint); font-size: 13px; margin-top: 32px; }
.foot p { margin: 5px 0; }
.foot a { color: var(--muted); text-decoration: underline; }
.foot a:hover { color: var(--accent-dark); }
.foot .foot-note { font-size: 12px; color: var(--faint); }

[hidden] { display: none !important; }

@media (min-width: 640px) {
  .page { padding-top: 44px; }
  .card { padding: 26px 28px 12px; }
}