/* Matched to the landing page at tworegisters.pages.dev: warm white, one deep
   green accent, Plus Jakarta Sans throughout. A respondent clicking through
   from the page should not feel they have landed on a different site. */

:root {
  --ink: #0f2a22;
  --ink-soft: #3d5249;
  --ink-faint: #6f8178;
  --rule: #e3e8e4;
  --rule-soft: #eef2ef;
  --paper: #fafaf7;
  --card: #ffffff;

  --accent: #0f6b4f;
  --accent-deep: #0a5440;
  --accent-glow: #19a274;
  --accent-wash: #eef4f0;
  --accent-ring: rgba(15, 107, 79, 0.18);
  --gradient: linear-gradient(135deg, #0f6b4f 0%, #12805d 55%, #19a274 100%);

  --ok: #0d9488;
  --error: #c0362c;
  --error-bg: #fef4f3;
  --warn-bg: #fff9ec;
  --warn-line: #d79b22;
  --warn-ink: #7a5a12;

  /* --serif keeps its name so admin.html and every rule using it still work;
     it now points at the landing page's typeface. */
  --serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 38rem;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(18, 20, 32, 0.05);
  --shadow-md: 0 4px 16px -4px rgba(18, 20, 32, 0.1);
  --shadow-lg: 0 18px 44px -12px rgba(18, 20, 32, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 12% -8%, #e6efe9 0%, rgba(230, 239, 233, 0) 62%),
    radial-gradient(760px 460px at 92% 4%, #f3efe2 0%, rgba(243, 239, 226, 0) 58%),
    var(--paper);
  background-attachment: fixed;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ------------------------------------------------------------- masthead */

.masthead {
  padding: 3rem 0 1.9rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}

.study {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.study::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 3px rgba(25, 162, 116, 0.2);
}

.masthead h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.125rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
}

.subtitle {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* ---------------------------------------------------------------- prose */

main { padding-bottom: 5rem; }

/* The about block used to be a screen of its own in front of the survey. It now
   sits under question one, so it is set as a footnote: the same copy at full
   prose size would still be the first thing on the page worth reading, which is
   the problem it was moved to solve. */
.about {
  margin-top: 2.75rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}

.about .prose p { font-size: 0.875rem; margin-bottom: 0.9rem; }
.about .prose .emphasis { font-size: 0.875rem; margin-top: 1.15rem; }
.about .privacy { margin-top: 1.6rem; padding-top: 0; border-top: 0; }

.prose p {
  margin: 0 0 1.15rem;
  color: var(--ink-soft);
}

/* The researcher names are the only links in the survey, so they are underlined
   rather than coloured — a bare accent-coloured word beside a Continue button
   reads as a second call to action. */
.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

.prose a:hover { color: var(--accent); }

.prose .emphasis {
  display: block;
  margin-top: 1.4rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-image: var(--gradient) 1;
  border-image-slice: 0 0 0 1;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-weight: 600;
}

/* The gold draw: named in the about block, and again where they opt in. */
.prose .gold-note {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.75rem;
  padding: 0.8rem 1.05rem;
  border: 1px solid #efdfb4;
  border-radius: var(--r-md);
  background: #fbf3df;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.prose .gold-note b { color: var(--ink); font-weight: 650; }
.goldbar { flex: none; filter: drop-shadow(0 2px 3px rgba(120, 85, 10, 0.3)); }

/* app.js tags each field wrapper with data-key, so the opt-in can be styled
   from here without touching the form engine. */
[data-key="gold_draw"] .choice {
  align-items: center;
  padding: 1rem 4.4rem 1rem 1rem;
  border-color: #efdfb4;
  background: #fbf3df url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6dc8a'/%3E%3Cstop offset='.55' stop-color='%23d9a92c'/%3E%3Cstop offset='1' stop-color='%23a87a12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 2h18l5 16H1z' fill='url(%23g)' stroke='%238a640c' stroke-width='1'/%3E%3Cpath d='M8.5 5h13' stroke='%23fff3c4' stroke-width='1.2' opacity='.8'/%3E%3C/svg%3E") no-repeat right 1rem center / 40px 27px;
}

[data-key="gold_draw"] .choice:has(input:checked) {
  border-color: #c99a2e;
  background-color: #f8ebc6;
  box-shadow: 0 0 0 1px #c99a2e, var(--shadow-md);
}

[data-key="gold_draw"] .choice input { accent-color: #a87a12; margin-top: 0; }
[data-key="gold_draw"] .choice-text { font-weight: 600; color: var(--ink); }

.privacy {
  margin-top: 2.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- progress */

.progress { margin-bottom: 2.25rem; }

.progress-track {
  height: 7px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gradient);
  background-size: 200% 100%;
  transition: width 0.45s var(--ease);
}

.progress-text {
  margin: 0.65rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ questions */

#screen { animation: rise 0.34s var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.kicker {
  display: inline-block;
  margin: 0 0 0.7rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.question {
  margin: 0 0 1.85rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Pulled up under the question, which carries the gap to the first field. */
.screen-note {
  margin: -1.3rem 0 1.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

.field { margin-bottom: 2.1rem; }
.field:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.9375rem;
  font-weight: 650;
}

.field-label .opt {
  font-weight: 400;
  color: var(--ink-faint);
}

.help {
  margin: -0.4rem 0 0.8rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- inputs */

.input {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.input::placeholder { color: #a3b0a9; }

.input:hover { border-color: #c9d4cd; }

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

textarea.input { resize: vertical; min-height: 3.6rem; }

.other-input { margin-top: 0.55rem; }

/* -------------------------------------------------------------- choices */

.choices { display: flex; flex-direction: column; gap: 0.5rem; }

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s var(--ease), border-color 0.16s,
    box-shadow 0.16s, background 0.16s;
}

.choice:hover {
  border-color: var(--accent-glow);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.choice:active { transform: translateY(0); }

.choice input {
  margin: 0.28rem 0 0;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

.choice:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.choice-text { font-size: 0.9375rem; }

.choices.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choices.inline .choice {
  flex: 0 1 auto;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  align-items: center;
}

.choices.inline .choice input { margin-top: 0; }

/* ---------------------------------------------------------- slot picker */

.slots {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.slot-tz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.slot-tz-label {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* A native select puts its arrow hard against the right edge, so a long zone
   name like "Europe/Tallinn" collides with it. Draw our own chevron, pin it
   to the right, and reserve enough padding that text can never reach it. */
.slot-tz-select {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
  padding: 0.5rem 2.5rem 0.5rem 0.7rem;
  font-size: 0.875rem;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b5b6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}

.slot-days {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin-bottom: 0.9rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.slot-day {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 3.4rem;
  padding: 0.55rem 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-soft);
  line-height: 1.15;
}

.slot-day:hover { border-color: var(--accent-ring); color: var(--ink); }

.slot-day-on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
  box-shadow: 0 0 0 1px var(--accent);
}

.slot-day-wd { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; }
.slot-day-n { font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.slot-day-mo { font-size: 0.625rem; color: var(--ink-faint); }

.slot-day-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.slot-bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.slot-band {
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.slot-band:hover:not(:disabled) { border-color: var(--accent-ring); }

.slot-band-on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--accent);
}

.slot-band:disabled { opacity: 0.4; cursor: not-allowed; }

.slot-chosen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
}

.slot-empty { margin: 0; font-size: 0.8125rem; color: var(--ink-faint); }

.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--accent-ring);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-size: 0.8125rem;
}

.slot-chip:hover { border-color: var(--accent); }
.slot-chip-x { font-size: 1rem; line-height: 1; opacity: 0.7; }

.slot-count {
  flex: 1 1 100%;
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.limit {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- errors */

.errors {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--error-bg);
  border: 1px solid #f3d3cf;
  border-left: 3px solid var(--error);
  border-radius: var(--r-sm);
  color: var(--error);
  font-size: 0.875rem;
  animation: shake 0.3s var(--ease);
}

.errors > div + div { margin-top: 0.3rem; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* -------------------------------------------------------------- actions */

.actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule-soft);
}

/* A screen with six fields pushes Continue below the fold, so the respondent
   has to scroll to the end of every question to find out how to leave it.
   Pin the bar to the bottom of the viewport instead: it is always one tap
   away, and it still settles into the flow at the end of the screen. */
#form .actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 2rem;
  padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  border-top: 1px solid var(--rule);
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.75rem 1.9rem;
  transition: transform 0.16s var(--ease), box-shadow 0.16s, background 0.16s,
    border-color 0.16s, color 0.16s;
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.primary {
  background: var(--gradient);
  background-size: 160% 100%;
  color: #fff;
  border: none;
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px -6px rgba(15, 107, 79, 0.6);
}

.primary:hover:not(:disabled) {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(15, 107, 79, 0.65);
}

.primary:active:not(:disabled) { transform: translateY(0); }

.primary:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

.secondary {
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}

.secondary:hover {
  border-color: var(--accent-glow);
  color: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Shown once, above the question a returning respondent is dropped back onto,
   so arriving in the middle of the survey is explained rather than surprising.
   Replaces the "Resume where you left off" button, which was a click. */
.resumed {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* A button that should read as a link: the weaker of two choices offered side
   by side, where a second bordered button would give them equal weight. Was
   called .resume for the survey's old "Resume where you left off" button, which
   is gone; admin.html's "Show me example data instead" is the only consumer
   now, and the stale name is what made it look like dead CSS. */
.linklike {
  background: none;
  border: none;
  padding: 0.75rem 0.25rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linklike:hover { color: var(--accent-deep); }

/* ----------------------------------------------------------------- done */

.note {
  padding: 0.95rem 1.15rem;
  background: var(--warn-bg);
  border: 1px solid #f2e2bd;
  border-left: 3px solid var(--warn-line);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  color: var(--warn-ink);
}

.download {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--accent);
  font-weight: 600;
}

/* ---------------------------------------------- results dashboard (admin) */

body.admin .wrap { max-width: 58rem; }
body.admin main { padding-bottom: 5rem; }

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.tile {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}

.tile-n {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tile-label {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.viewer-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font-size: 0.85rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.filters, .toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.chip {
  padding: 0.4rem 0.95rem;
  font-size: 0.8125rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}

.chip:hover { border-color: var(--accent-ring); color: var(--ink); }

.chip-on {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-deep);
  font-weight: 600;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  cursor: pointer;
}

button.small { padding: 0.4rem 0.95rem; font-size: 0.8125rem; }

.q-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.q-card .question { font-size: 1.25rem; margin-bottom: 0.35rem; }

.q-reach {
  margin: 0 0 1.4rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.field-block + .field-block {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-soft);
}

.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.field-name { margin: 0; font-weight: 600; font-size: 0.9375rem; }

.field-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.bars { display: flex; flex-direction: column; gap: 0.6rem; }

.bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.bar-label { font-size: 0.875rem; }

.bar-n {
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar {
  height: 7px;
  border-radius: 999px;
  background: var(--rule-soft);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient);
  transition: width 0.4s var(--ease);
}

.bar-zero { opacity: 0.45; }

.sub-label {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.verbatims { display: flex; flex-direction: column; gap: 0.5rem; }

.verbatim {
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--accent-ring);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--paper);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.verbatim-text { display: block; }

.verbatim-who,
.bar-who {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
}

.bar-who { margin-top: 0.35rem; }

.empty { font-size: 0.875rem; color: var(--ink-faint); margin: 0; }

/* Several elements below set an explicit `display`, which beats the user-agent
   rule for [hidden]. Toggling `.hidden` in JS has to keep working. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ gate */

.key-row { display: flex; gap: 0.5rem; align-items: stretch; }
.key-row .input { flex: 1 1 auto; min-width: 0; }

.key-row button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 4.5rem;
}

/* ------------------------------------------------------------ demo banner */

.demo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.demo-banner strong { color: var(--warn-ink); }
.demo-banner button { margin-left: auto; }

/* ------------------------------------------------------------- view tabs */

.views {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}

.views::-webkit-scrollbar { display: none; }

.view-tab {
  flex: 0 0 auto;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.view-tab:hover { color: var(--ink); }

.view-on {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.view-tab:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- stat tiles+ */

.tile-sub {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- panels */

.panel {
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.panel-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.panel-meta {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 1.25rem;
}

.panel-grid .field-block + .field-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* -------------------------------------------------------------- findings */

.finding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.finding {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-md);
  background: var(--paper);
}

.finding-head { margin-bottom: 0.85rem; }

.finding-rate {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 650;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.finding-claim {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}

.finding-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.finding-caution {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.65rem;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.finding-who {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.6875rem;
  line-height: 1.9;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------- person chip */

.person {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--accent-deep);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: var(--accent-ring);
  text-underline-offset: 2px;
  cursor: pointer;
}

.person:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.person:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------ respondent table */

.r-table {
  margin-top: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}

.r-row {
  display: grid;
  grid-template-columns: 3rem minmax(9rem, 1.5fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(8rem, 1.2fr) minmax(6rem, 0.8fr) 5.5rem;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s var(--ease);
}

.r-row:first-child { border-top: 0; }
.r-row:hover { background: var(--accent-wash); }

.r-row:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: -2px;
}

.r-head {
  background: var(--paper);
  cursor: default;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.r-head:hover { background: var(--paper); }

.r-n {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.r-id { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.r-id strong { font-weight: 600; }

.r-sub {
  font-size: 0.6875rem;
  color: var(--ink-faint);
}

.r-cell {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.r-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.r-badge {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.6875rem;
  white-space: nowrap;
}

.r-done {
  border-color: var(--accent-ring);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

.r-open {
  border-color: var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.r-meeting {
  justify-self: start;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.r-yes {
  border-color: var(--accent-ring);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

.r-maybe {
  border-color: var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
}

/* ---------------------------------------------------- respondent detail */

.detail-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.detail-step {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.facts {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.4rem 1rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
}

.facts dt {
  color: var(--ink-faint);
  font-size: 0.75rem;
}

.facts dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.answer + .answer {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
}

.answer:first-of-type { margin-top: 1.2rem; }

.answer-label {
  margin: 0 0 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.answer-value {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.answer-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.answer-other {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------- small screens */

/* The respondent table has six columns of real content. Below roughly a
   tablet it stops being a table and becomes one card per respondent. */
@media (max-width: 46rem) {
  .r-head { display: none; }

  .r-row {
    grid-template-columns: 2.5rem 1fr;
    gap: 0.3rem 0.75rem;
    align-items: start;
    padding: 0.95rem 1rem;
  }

  .r-row > .r-cell,
  .r-row > .r-status,
  .r-row > .r-meeting { grid-column: 2; }

  .facts { grid-template-columns: 1fr; gap: 0.1rem; }
  .facts dd { margin-bottom: 0.6rem; }

  .panel { padding: 1.25rem 1.1rem 1.2rem; }
  .panel-grid { gap: 1.4rem; }
}

@media (max-width: 30rem) {
  .masthead { padding-top: 2.25rem; margin-bottom: 2rem; }
  .masthead h1 { font-size: 1.75rem; }
  .question { font-size: 1.25rem; }
  .actions { flex-direction: row-reverse; justify-content: flex-end; }
  .choices.inline { flex-direction: column; }
  .choices.inline .choice { border-radius: var(--r-md); }
  button { padding: 0.75rem 1.5rem; }
  .view-tab { padding: 0.7rem 0.75rem; }
  .demo-banner button { margin-left: 0; }
}

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