/* ══════════════════════════════════════════════════════════════════════════
   Verify your benefits — presentation.

   daud's own palette: ink, paper, one vermilion accent. The accent is reserved
   for the thing the visitor is meant to act on, so it is never spent on a
   heading or a border.

   The answer is the page. It gets the largest type on screen and the only
   filled mark, because the entire product is one sentence and burying it in a
   card of equals would be hiding it.

   Colour never scores the answer on its own. "Excluded" in red would read as a
   mistake the patient made, so each state carries a mark and its own words,
   and colour only separates them.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:    #0A0A0A;
  --paper:  #F4F3F1;
  --hi:     #F4F3F1;
  --mid:    rgba(244,243,241,0.62);
  --low:    rgba(244,243,241,0.40);
  --line:   rgba(244,243,241,0.13);
  --line-2: rgba(244,243,241,0.22);
  --accent: oklch(0.64 0.21 27);
  --good:   oklch(0.78 0.13 165);
  --warn:   oklch(0.83 0.13 88);
  --ease:   cubic-bezier(.2,.9,.3,1);
  --edge:   max(22px, 5vw, calc((100% - 780px) / 2));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--hi);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(244,243,241,.055), transparent 62%),
    radial-gradient(900px 520px at 100% 108%, oklch(0.64 0.21 27 / .07), transparent 60%);
}

a { color: inherit; }

/* ── header ──────────────────────────────────────────────────────────────*/
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,10,.82);
  backdrop-filter: blur(10px);
}
.top-in {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px var(--edge);
}
/* The real wordmark, not type set to look like it. It is the potrace-vectorised
   Bauhaus cut from dauds.org, inlined as a <symbol> and drawn with
   fill:currentColor so it inherits the header's colour. Setting "daud" in
   Manrope with a coloured full stop after it was an approximation of a mark
   that already exists, and it was not the mark. */
.mark {
  flex: none;
  display: block;
  text-decoration: none;
  color: var(--hi);
}
.wordmark {
  display: block;
  height: 17px;
  width: auto;
  fill: currentColor;
}
.top-mid { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.top-t { display: block; font-size: 14px; font-weight: 500; }
.top-s { display: block; font-size: 12px; color: var(--low); max-width: 62ch; }
@media (max-width: 620px) { .top-s { font-size: 11px; line-height: 1.4; } }
.pill {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--mid);
  cursor: help;
  white-space: nowrap;
}
.pill.live { color: var(--accent); border-color: oklch(0.64 0.21 27 / .5); }

/* ── layout ──────────────────────────────────────────────────────────────
   One column. There is one question and one answer, so there is nothing to
   put in a sidebar. */
.wrap {
  position: relative;
  z-index: 1;
  padding: 44px var(--edge) 72px;
}
@media (max-width: 620px) { .wrap { padding-top: 28px; } }

.step { animation: in .4s var(--ease) both; }
@keyframes in { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
  * { transition-duration: .01ms !important; }
}

h1 {
  font-size: clamp(25px, 4vw, 35px);
  font-weight: 300;
  letter-spacing: -.024em;
  line-height: 1.16;
  margin: 0 0 10px;
}
.sub { color: var(--mid); margin: 0 0 30px; max-width: 62ch; font-size: 14.5px; }
h2 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--low);
  margin: 36px 0 12px;
  font-family: 'JetBrains Mono', monospace;
}
h2 u { text-decoration: none; color: rgba(244,243,241,.28); }

/* ── fields ──────────────────────────────────────────────────────────────*/
.fields { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.f { display: block; }
.f.wide { grid-column: 1 / -1; }
.f > span {
  display: block;
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 6px;
}
.f > span u { text-decoration: none; color: var(--low); font-size: 11px; }
input, select {
  width: 100%;
  background: rgba(244,243,241,.04);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--hi);
  font: inherit;
  font-size: 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(244,243,241,.065);
}
input::placeholder { color: rgba(244,243,241,.26); }
select { appearance: none; cursor: pointer; }
select option { background: #151515; color: var(--hi); }
.f.mono input { font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; font-size: 14px; }

/* ── card capture ────────────────────────────────────────────────────────*/
.cards { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.cap {
  border: 1px dashed var(--line-2);
  border-radius: 13px;
  padding: 17px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.cap:hover { border-color: var(--hi); background: rgba(244,243,241,.03); }
.cap.has { border-style: solid; padding: 0; display: block; }
.cap.drag { border-color: var(--accent); background: oklch(0.64 0.21 27 / .07); }
.cap input[type=file] { display: none; }
.cap-ico { font-size: 21px; opacity: .55; line-height: 1; }
.cap-t { font-size: 14px; font-weight: 500; }
.cap-s { font-size: 11.5px; color: var(--low); line-height: 1.45; }
.cap img { width: 100%; display: block; aspect-ratio: 1.586; object-fit: cover; }
.cap-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 11.5px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.cap-bar b { font-weight: 500; }
.cap-bar .x {
  margin-left: auto;
  border: 0; background: none;
  color: var(--low);
  cursor: pointer;
  font: inherit; font-size: 15px;
  padding: 0 2px; line-height: 1;
}
.cap-bar .x:hover { color: var(--hi); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--good); }
.dot.no { background: var(--accent); }
.cap-issues {
  margin: 9px 0 0; padding: 0; list-style: none;
  font-size: 12px; color: var(--warn);
  text-align: left; line-height: 1.5;
}
.cap-issues li { padding: 3px 12px 3px 26px; position: relative; }
.cap-issues li::before { content: '\203A'; position: absolute; left: 14px; }
.metrics {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--low);
  letter-spacing: .04em;
  padding: 0 12px 9px;
  text-align: left;
}

/* ── buttons ─────────────────────────────────────────────────────────────*/
.acts { display: flex; gap: 11px; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 28px;
  font: inherit;
  font-weight: 500;
  font-size: 14.5px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .3; cursor: not-allowed; }
.btn.ghost {
  background: none;
  color: var(--mid);
  border: 1px solid var(--line-2);
  padding: 12px 22px;
}
.btn.ghost:hover { color: var(--hi); border-color: var(--hi); opacity: 1; }

/* ── samples ─────────────────────────────────────────────────────────────
   Set apart from the form and plainly labelled. A demo that hides its sample
   data behind a realistic-looking member ID is worthless to the first person
   who checks it against a real one. */
.samples {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.samples-t { font-size: 12.5px; color: var(--low); margin: 0 0 11px; max-width: 68ch; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .03em;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--mid);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { color: var(--hi); border-color: var(--hi); }

/* ── running ─────────────────────────────────────────────────────────────*/
.run { padding: 30px 0; max-width: 520px; }
.run-l {
  display: flex; gap: 13px; align-items: center;
  padding: 11px 0;
  font-size: 14px;
  color: var(--low);
  opacity: .35;
  transition: opacity .35s var(--ease), color .35s var(--ease);
}
.run-l.on { opacity: 1; color: var(--hi); }
.run-l.was { opacity: 1; color: var(--mid); }
.run-m {
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: 10px;
}
.run-l.on .run-m { border-color: var(--accent); }
.run-l.was .run-m { background: var(--hi); border-color: var(--hi); color: var(--ink); }
.spin {
  width: 9px; height: 9px;
  border: 1.5px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
.run-l code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--low);
  margin-left: auto;
  padding-left: 12px;
}

/* ── the answer ──────────────────────────────────────────────────────────*/
.sampleflag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid oklch(0.83 0.13 88 / .4);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 20px;
}

.answer {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(244,243,241,.028);
}
@media (max-width: 560px) {
  .answer { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 22px; }
}
.answer-m {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-size: 17px;
  margin-top: 4px;
}
.answer.yes      { border-color: oklch(0.78 0.13 165 / .42); }
.answer.yes .answer-m { color: var(--good); background: oklch(0.78 0.13 165 / .13); }
.answer.no       { border-color: oklch(0.64 0.21 27 / .45); background: oklch(0.64 0.21 27 / .055); }
.answer.no .answer-m  { color: var(--accent); background: oklch(0.64 0.21 27 / .12); }
.answer.inactive .answer-m { color: var(--warn); }
.answer.unknown .answer-m  { color: var(--low); }
.answer-t {
  font-size: clamp(21px, 3.2vw, 27px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0 0 9px;
}
.answer-d { font-size: 14.5px; color: var(--mid); margin: 0; line-height: 1.6; max-width: 58ch; }

.note {
  border-left: 2px solid var(--line-2);
  padding: 2px 0 2px 15px;
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--low);
  line-height: 1.6;
  max-width: 64ch;
}

/* ── the few facts worth reading back ────────────────────────────────────*/
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.fact { background: #0C0C0C; padding: 13px 16px; }
.fact span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--low);
  margin-bottom: 4px;
}
.fact b { font-weight: 400; font-size: 14px; }

.msg {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--low);
  line-height: 1.55;
  max-width: 68ch;
}

.err {
  border: 1px solid oklch(0.64 0.21 27 / .45);
  background: oklch(0.64 0.21 27 / .07);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  margin-top: 16px;
}

/* ── payload viewer ──────────────────────────────────────────────────────*/
.peek { margin-top: 28px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.peek summary {
  cursor: pointer;
  padding: 13px 17px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
  list-style: none;
  user-select: none;
}
.peek summary::-webkit-details-marker { display: none; }
.peek summary::before { content: '+ '; color: var(--accent); }
.peek[open] summary::before { content: '\2212 '; }
.peek summary:hover { color: var(--hi); }
.peek-b { border-top: 1px solid var(--line); padding: 15px 17px; }
.peek-b h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--low);
  margin: 0 0 8px;
  font-weight: 400;
}
.peek-b h3 + pre { margin-bottom: 20px; }
pre {
  margin: 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.65;
  color: var(--mid);
  background: #060606;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
}
pre .k { color: oklch(0.80 0.10 210); }
pre .s { color: oklch(0.82 0.11 145); }
pre .n { color: oklch(0.84 0.13 80); }

/* ── footer ──────────────────────────────────────────────────────────────*/
.foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: 24px var(--edge) 40px;
  font-size: 12px;
  color: var(--low);
  line-height: 1.6;
}
.foot p { margin: 0 0 7px; max-width: 78ch; }
.foot-b a { color: var(--mid); }