/* Your Priorities: Stewart, BC
   Editorial ice. Near-white ground, warm-black ink, Helvetica Neue throughout:
   light weight for headlines and questions, roman and medium for everything else. One accent (red),
   used sparingly. Square corners, hairline rules, flat boxed buttons.
   The one bold moment: the Roman wordmark, centred like ogilvy.com's. */

/* Helvetica Neue LT Pro, subset to Latin and compressed (fonts/web/, made from fonts/*.otf). */
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Th.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-ThIt.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-UltLt.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-UltLtIt.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Lt.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-LtIt.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Roman.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-It.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Md.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-MdIt.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Bd.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-BdIt.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Hv.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-HvIt.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-Blk.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Site Helvetica Neue'; src: url('../fonts/web/HelveticaNeueLTPro-BlkIt.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;

  --bg: #fbfcfc;
  --surface: #ffffff;
  --ink: #231f20;
  --muted: #6b7176;
  --line: #e1e4e6;
  --line-strong: #231f20;
  --wash: #f2f5f6;
  --accent: #eb3f43;
  --accent-ink: #c8262c; /* the red for small text, where #eb3f43 is too light to read */
  --alert: #b3261e;
  --alert-soft: #fdf1f0;

  /* One family. Headlines use its light weight where the Ogilvy site uses a serif. */
  --sans: 'Site Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: var(--sans);

  --measure: 58rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --mh: 7rem; /* masthead height, set from JS */

  accent-color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mh) + 1rem);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.skip-link:not(:focus) {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--surface);
}

/* ---------- Masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}
.masthead-inner, .steps {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block-start: 1.75rem;
}
.survey-name { margin: 0; font-size: 0.85rem; color: var(--ink); }
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; text-decoration: none; line-height: 1; }
.brand:hover { color: inherit; }
.brand-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--logo);
  line-height: 0.8; /* LT Pro sets tall line metrics */
  letter-spacing: -0.05em;
  color: var(--accent);
  transition: color 0.25s ease;
}
.brand:hover .brand-title, .brand:focus-visible .brand-title { color: var(--ink); }
.brand-sub { margin-block-start: 0.3rem; font-size: 1rem; font-style: italic; font-weight: 400; color: var(--ink); white-space: nowrap; }
.save-status { margin: 0; font-size: 0.78rem; color: var(--muted); text-align: end; }

.steps { padding-block: 0.45rem 0.7rem; }
.steps-now { display: flex; align-items: baseline; gap: 0.7em; margin: 0 0 0.45rem; font-size: 0.88rem; }
.steps-now b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.15rem; color: var(--accent-ink); }
.steps-count { color: var(--muted); }
.steps-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.steps-bar li { display: grid; }
.steps-bar a, .steps-bar span { display: block; height: 2px; background: var(--line); position: relative; }
.steps-bar a::after { content: ''; position: absolute; inset: -12px 0; }
.steps-bar .done { background: var(--ink); }
.steps-bar [aria-current] {
  background: linear-gradient(to right, var(--accent) var(--fill, 100%), var(--line) var(--fill, 100%));
}
.steps-bar .optional { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 8px); }

@media (max-width: 34rem) {
  .masthead-inner { --logo: 2.2rem; }
  .survey-name { font-size: 0.75rem; }
  .save-status { max-width: 7.5rem; font-size: 0.72rem; }
}

/* ---------- Layout: question column plus the answers sidebar ---------- */

.shell { width: 100%; flex: 1; }
main {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 2.25rem var(--gutter) 4rem;
  view-transition-name: screen;
}
main:focus { outline: none; }
.legend-side { display: none; }

@media (min-width: 64rem) {
  .shell {
    display: grid;
    grid-template-columns: minmax(0, 58rem) 17rem;
    gap: 3.5rem;
    justify-content: center;
    padding-inline: var(--gutter);
  }
  .shell > main { margin: 0; padding-inline: 0; max-width: none; }
  .masthead-inner, .steps { max-width: calc(78.5rem + 2 * var(--gutter)); }
  .legend-side:not([hidden]) {
    display: block;
    position: sticky;
    top: calc(var(--mh) + 2.25rem);
    align-self: start;
    margin-block-start: 2rem;
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--line);
  }
}

/* ---------- Type ---------- */

.screen-head { margin-block-end: 2rem; }
.screen-head h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 7vw + 0.6rem, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.screen-head h1:focus, .q-title:focus { outline: none; }
.lede { margin: 1rem 0 0; font-size: 1.15rem; max-width: 40em; }
.meta { margin: 0.75rem 0 0; font-size: 0.92rem; color: var(--muted); }

.q-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.step > .q-title + .lede { margin: 0.8rem 0 1.6rem; color: var(--muted); font-size: 1.05rem; }
.chapter-lede { margin: 0 0 1.25rem; font-size: 0.95rem; color: var(--muted); }

/* ---------- Welcome back ---------- */

.banner {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 1.25rem auto 0;
  padding-inline: var(--gutter);
}
.banner-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-block-start: 2px solid var(--accent);
  padding: 1.1rem 1.2rem;
}
.banner-box h2 { font-family: var(--serif); font-weight: 300; font-size: 1.8rem; }
#wb-h:focus { outline: none; }
.banner-box p { margin: 0.35rem 0 1rem; }

/* ---------- Buttons: flat boxes ---------- */

.btn-primary, .btn-secondary, .btn-quiet {
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  min-height: 52px;
  padding: 0.7rem 1.5rem;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-primary[disabled] { opacity: 0.6; cursor: progress; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--surface); }
.btn-quiet {
  background: none;
  color: var(--ink);
  padding-inline: 0.2rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.btn-quiet:hover { color: var(--accent); }
.btn-small { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.95rem; }

.form-error { margin: 0; color: var(--alert); font-weight: 500; flex-basis: 100%; }
.form-error:empty { display: none; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- The card ---------- */

.step {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: auto;
  padding-block-start: 2.5rem;
}
.step-nav .btn-primary, .step-nav .btn-skip { flex: 1 1 12rem; }
main[data-screen='priorities'] .step-nav,
main[data-screen='potholes'] .step-nav,
main[data-screen='thanks'] .step-nav { margin-block-start: 2.5rem; }
.btn-skip { color: var(--muted); border-color: var(--line); }
.btn-skip:hover { color: var(--surface); }

/* ---------- Screen 1: the ranking ---------- */

.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line-strong);
}
.rank-btn {
  width: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.2rem;
  font: inherit;
  font-size: 1.05rem;
  text-align: start;
  color: var(--ink);
  background: none;
  border: 0;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
}
.rank-btn:hover { background: var(--wash); }
.rank-slot {
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rank-btn[aria-pressed='true'] .rank-slot { background: var(--ink); color: var(--surface); border-color: var(--ink); }
@media (min-width: 44rem) {
  .rank-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
.rank-summary { margin: 1.25rem 0 0; min-height: 1.5em; color: var(--muted); font-size: 0.95rem; }

/* ---------- Questions ---------- */

.q { margin: 0; padding: 0; border: 0; min-width: 0; }
.q > legend { padding: 0; margin-block-end: 1rem; font-weight: 500; font-size: 1.08rem; }
.q > legend:has(.q-title) { margin-block-end: 1.1rem; }
.step .q + .q { margin-block-start: 2rem; }
.q-hint { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); }

.record { margin: 0 0 1.25rem; font-size: 0.92rem; color: var(--muted); }
.record summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 500;
}
.record summary::-webkit-details-marker { display: none; }
.record summary::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: -45deg;
  transition: rotate 0.15s;
}
.record[open] summary::before { rotate: 45deg; }
.record p { margin: 0.25rem 0 0; padding-inline-start: 0.9rem; border-inline-start: 1px solid var(--accent); font-style: italic; }

/* Answer rows: hairline list, the chosen one gets a black rule and a filled mark */
.opts { border-block-start: 1px solid var(--line); }
.opt {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: start;
  gap: 0.9rem;
  padding: 0.9rem 0.3rem;
  min-height: 54px;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
  line-height: 1.4;
}
.opt:hover { background: var(--wash); }
.opt input { width: 1.2rem; height: 1.2rem; margin: 0.12rem 0 0; cursor: pointer; }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.opt input:focus-visible { outline: none; }
.opt small { display: block; margin-block-start: 0.2rem; color: var(--muted); font-size: 0.88rem; font-weight: 400; }

.limit-note { margin: 0.5rem 0 0; font-size: 0.92rem; color: var(--alert); }
.limit-note:empty { display: none; }

.scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.scale .opt {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.7rem 0.2rem;
  font-size: 0.82rem;
  border-block-end: 0;
  border-inline-end: 1px solid var(--line);
  hyphens: auto;
}
.scale .opt:last-child { border-inline-end: 0; }
.scale .opt:has(input:checked) { background: var(--ink); color: var(--surface); box-shadow: none; }
@media (max-width: 22rem) {
  .scale { grid-template-columns: 1fr; }
  .scale .opt { grid-template-columns: 1.25rem 1fr; justify-items: start; text-align: start; border-inline-end: 0; border-block-end: 1px solid var(--line); }
}

.block-tag { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.25rem; font-size: 0.92rem; font-weight: 500; }
.block-tag .rank-slot { width: 1.8rem; height: 1.8rem; font-size: 0.9rem; background: var(--ink); color: var(--surface); border-color: var(--ink); flex: none; }
.block-tag .of { margin-inline-start: auto; color: var(--muted); font-weight: 400; white-space: nowrap; }

.fu-reason { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--muted); }
.fu-reason::before { content: ''; display: inline-block; width: 1.2rem; height: 1px; margin-inline-end: 0.55rem; background: var(--accent); vertical-align: middle; }
.fu { margin-block-start: 2rem; }

.note { padding: 0.9rem 1rem; background: var(--wash); margin-block-end: 1.5rem; }
.note p { margin: 0; }

.add-note { margin-block-start: 1.25rem; }
.add-note summary {
  display: inline-flex; align-items: center; min-height: 44px;
  cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.add-note summary::-webkit-details-marker { display: none; }
.add-note[open] summary { text-decoration: none; color: var(--muted); }

/* ---------- Fields ---------- */

.field { display: grid; gap: 0.4rem; }
.field + .field, .two-col + .field { margin-block-start: 1.5rem; }
.field label, .label { font-weight: 500; margin: 0; }
.hint { margin: 0; font-size: 0.9rem; color: var(--muted); font-weight: 400; }

input[type='text'], input[type='email'], select, textarea {
  font: inherit;
  font-size: max(1rem, 1em);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid #c9ced2;
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  min-height: 52px;
  width: 100%;
}
:is(input[type='text'], input[type='email'], select, textarea):focus { border-color: var(--ink); }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.2rem;
}
textarea {
  field-sizing: content;
  min-block-size: 5lh;
  max-block-size: 16lh;
  resize: vertical;
  line-height: 1.45;
}
textarea.short { min-block-size: 2.6lh; }

:is(input, textarea):user-invalid { border-color: var(--alert); background: var(--alert-soft); }
.error-msg { display: none; margin: 0; color: var(--alert); font-size: 0.92rem; }
input:user-invalid ~ .error-msg { display: block; }
.counter { margin: 0; font-size: 0.8rem; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }

.two-col { display: grid; gap: 1.5rem 1rem; }
@media (min-width: 34rem) { .two-col { grid-template-columns: 1fr 1fr; } }

.email-known { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line); background: var(--surface); }
.email-known span { overflow-wrap: anywhere; }

.perm-list { border-block-start: 1px solid var(--line); }
.fine { margin: 1.25rem 0 0; font-size: 0.88rem; color: var(--muted); }

.worst-grid { display: grid; gap: 1.25rem; }
.photo-field input[type='file'] { font: inherit; font-size: 0.92rem; max-width: 100%; }
.photo-preview { display: flex; align-items: center; gap: 0.75rem; margin-block-start: 0.5rem; }
.photo-preview img { width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--line); }

/* ---------- Panels (thank-you page) ---------- */

.panel { margin-block-start: 3rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line-strong); }
.panel h2 { font-family: var(--serif); font-weight: 300; font-size: 1.9rem; }

.thanks-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 0 0 2rem;
  border-block: 1px solid var(--line-strong);
}
.thanks-facts div { padding: 1rem 1rem 1rem 0; }
.thanks-facts div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 1rem; }
.thanks-facts dt { font-size: 0.85rem; color: var(--muted); }
.thanks-facts dd { margin: 0.25rem 0 0; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }

.dates { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.dates li { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; align-items: center; }
.date-tile { display: grid; place-items: center; text-align: center; border: 1px solid var(--ink); padding: 0.35rem 0; line-height: 1; }
.date-tile b { font-family: var(--serif); font-weight: 300; font-size: 2.1rem; }
.date-tile small { font-size: 0.72rem; letter-spacing: 0.08em; }

/* ---------- Potholes ---------- */

.street-map { position: relative; height: 15rem; border: 1px solid var(--line); background: var(--wash); overflow: hidden; }
.street-map .map { position: absolute; inset: 0; }
.street-map .tap-start { position: absolute; inset: auto 1rem 1.9rem; z-index: 500; font-size: 1.1rem; }
.below-map { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-block-start: 0.75rem; }

.pothole-lists h2 { font-family: var(--serif); font-weight: 300; font-size: 1.7rem; margin-block: 2rem 0.75rem; }
.pothole-lists .empty { color: var(--muted); margin: 0; }
.pothole-list { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--line-strong); }
.card { padding: 1rem 0; border-block-end: 1px solid var(--line); }
.card-head { display: flex; align-items: center; gap: 0.85rem; }
.card-head .where { flex: 1; min-width: 0; }
.card-head .where strong { display: block; font-weight: 500; }
.card-head .where span { font-size: 0.88rem; color: var(--muted); }
.card-body { margin-block-start: 1rem; display: grid; gap: 1.25rem; }
.card-body .q + .q { margin: 0; }
.sev .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.sev .opt { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.3rem; padding: 0.6rem 0.2rem; font-size: 0.92rem; border-block-end: 0; border-inline-end: 1px solid var(--line); }
.sev .opt:last-child { border-inline-end: 0; }

.pin-num {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--surface);
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  font-weight: 500; font-size: 0.95rem;
}
.pin-num > span { rotate: 45deg; }
.pin-icon { background: none; border: 0; }
.pin-icon .pin-num { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--surface); background: var(--accent); }

.picker { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.picker[open] { display: grid; grid-template-rows: auto 1fr auto; }
.picker::backdrop { background: rgb(0 0 0 / 0.4); }
.picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem var(--gutter); border-block-end: 1px solid var(--line); }
.picker-bar h2 { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; }
.picker-map-wrap { position: relative; min-height: 0; }
.picker-map { position: absolute; inset: 0; }
.picker-target {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; translate: -50% -50%;
  z-index: 500; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
}
.picker-target::before, .picker-target::after { content: ''; position: absolute; background: var(--accent); left: 50%; top: 50%; translate: -50% -50%; }
.picker-target::before { width: 2px; height: 80px; }
.picker-target::after { width: 80px; height: 2px; }
.picker-foot {
  display: grid; gap: 0.6rem; width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto;
  padding: 0.75rem var(--gutter) max(0.75rem, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
}
.picker-where { margin: 0; font-weight: 500; min-height: 1.5em; }
.leaflet-container { font: inherit; background: var(--wash); }

/* ---------- Answers legend ---------- */

.legend-title { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; }
.legend-sub { margin: 0.2rem 0 1.25rem; color: var(--muted); font-size: 0.85rem; }
.legend-group + .legend-group { margin-block-start: 1.4rem; }
.legend-group h3 { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 500; color: var(--accent-ink); }
.legend-group ul { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.chip {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0;
  border-block-end: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.chip:hover { color: var(--ink); background: var(--wash); }
.chip.is-current { box-shadow: inset 2px 0 0 var(--accent); padding-inline-start: 0.6rem; }
.chip-q, .chip-a { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.chip-q { font-size: 0.78rem; color: var(--muted); -webkit-line-clamp: 1; }
.chip-a { font-size: 0.92rem; font-weight: 500; line-height: 1.3; -webkit-line-clamp: 2; }

.legend-bar {
  position: fixed;
  z-index: 30;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.6rem var(--gutter) max(0.6rem, env(safe-area-inset-bottom));
  font: inherit;
  color: var(--ink);
  background: rgb(255 255 255 / 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-block-start: 1px solid var(--line-strong);
  cursor: pointer;
}
.legend-bar[hidden] { display: none; }
.legend-count { font-weight: 500; }
.legend-open { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--accent-ink); }
.legend-open::after {
  content: ''; display: inline-block; width: 0.4em; height: 0.4em; margin-inline-start: 0.5em;
  border-inline-start: 1.5px solid currentColor; border-block-start: 1.5px solid currentColor;
  rotate: 45deg; translate: 0 0.05em;
}
body.has-legend-bar { padding-block-end: 4rem; }
@media (min-width: 64rem) {
  .legend-bar { display: none !important; }
  body.has-legend-bar { padding-block-end: 0; }
}

.legend-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 82dvh;
  margin: 0;
  padding: 0 var(--gutter) max(1.25rem, env(safe-area-inset-bottom));
  border: 0;
  border-block-start: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.legend-sheet::backdrop { background: rgb(29 32 35 / 0.25); }
.legend-sheet-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding-block: 0.75rem 0.25rem; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .legend-sheet[open] { animation: sheet-up 0.24s cubic-bezier(.2,.8,.2,1); }
  @keyframes sheet-up { from { translate: 0 30%; opacity: 0; } }
}

/* ---------- Footer ---------- */

.site-footer {
  border-block-start: 1px solid var(--line);
  padding: 1.5rem var(--gutter) 2rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
.site-footer p { margin: 0.3rem 0; }
.site-footer a { margin-inline: 0.5rem; color: var(--muted); }

/* ---------- Transitions between cards ---------- */

@keyframes out-left { to { translate: -20px 0; opacity: 0; } }
@keyframes in-right { from { translate: 20px 0; opacity: 0; } }
@keyframes out-right { to { translate: 20px 0; opacity: 0; } }
@keyframes in-left { from { translate: -20px 0; opacity: 0; } }
::view-transition-group(screen) { animation-duration: 0.26s; }
::view-transition-old(screen), ::view-transition-new(screen) { animation-duration: 0.2s; animation-timing-function: ease-out; }
html:active-view-transition-type(forward)::view-transition-old(screen) { animation-name: out-left; }
html:active-view-transition-type(forward)::view-transition-new(screen) { animation-name: in-right; }
html:active-view-transition-type(backward)::view-transition-old(screen) { animation-name: out-right; }
html:active-view-transition-type(backward)::view-transition-new(screen) { animation-name: in-left; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Sources and privacy pages ---------- */

.doc h2 { font-family: var(--serif); font-weight: 300; font-size: 1.8rem; margin: 2.25rem 0 0.6rem; }
.doc ul { padding-inline-start: 1.2rem; }
.doc li + li { margin-block-start: 0.4rem; }


/* =====================================================================
   Selection: custom round and square markers that fill in red with a small
   pop, a faint tint on the chosen row and a thin red edge. Text never changes size.
   ===================================================================== */

.opt input[type='radio'], .opt input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.08rem 0 0;
  border: 1.5px solid #9aa1a6;
  background: var(--surface);
  transition: border-color 0.15s, background-color 0.15s;
}
.opt input[type='radio'] { border-radius: 50%; }
.opt input[type='checkbox'] { border-radius: 4px; }
.opt input[type='radio']::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--surface);
  scale: 0;
  transition: scale 0.18s cubic-bezier(.3,1.6,.5,1);
}
.opt input[type='checkbox']::before {
  content: '';
  width: 0.72rem;
  height: 0.72rem;
  background: var(--surface);
  clip-path: polygon(14% 44%, 0 59%, 38% 96%, 100% 22%, 86% 8%, 37% 67%);
  scale: 0;
  transition: scale 0.18s cubic-bezier(.3,1.6,.5,1);
}
.opt:hover input:not(:checked) { border-color: var(--ink); }
.opt input:checked { border-color: var(--accent); background: var(--accent); }
.opt input:checked::before { scale: 1; }

.opt { position: relative; transition: background-color 0.15s; }
.opt::after {
  content: '';
  position: absolute;
  inset-block: -1px;
  inset-inline-start: 0;
  width: 2px;
  background: var(--accent);
  scale: 1 0;
  transition: scale 0.2s ease;
}
.opt:has(input:checked) { background: #f4f6f7; }
.opt:has(input:checked)::after { scale: 1 1; }

/* Agree/disagree scale and severity: marker centred, same tint */
.scale .opt:has(input:checked), .sev .opt:has(input:checked) { background: #f4f6f7; color: var(--ink); }
.scale .opt::after, .sev .opt::after { inset-inline: 0; inset-block: auto -1px; width: auto; height: 2px; scale: 0 1; }
.scale .opt:has(input:checked)::after, .sev .opt:has(input:checked)::after { scale: 1 1; }

/* Priorities: the slot fills, the row tints, the text stays put */
.rank-btn { position: relative; transition: background-color 0.15s; }
.rank-btn::after {
  content: '';
  position: absolute;
  inset-block: -1px;
  inset-inline-start: 0;
  width: 2px;
  background: var(--accent);
  scale: 1 0;
  transition: scale 0.2s ease;
}
.rank-btn[aria-pressed='true'] { background: #f4f6f7; }
.rank-btn[aria-pressed='true']::after { scale: 1 1; }
.rank-slot { transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.rank-btn[aria-pressed='true'] .rank-slot { background: var(--accent); border-color: var(--accent); color: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  .rank-btn[aria-pressed='true'] .rank-slot { animation: slot-pop 0.22s cubic-bezier(.3,1.6,.5,1); }
  @keyframes slot-pop { from { scale: 0.7; } }
}
.block-tag .rank-slot { background: var(--accent); border-color: var(--accent); }

/* =====================================================================
   Wide cards: question left, answers right, so a question fits one screen.
   The card responds to its own width, not the window's.
   ===================================================================== */

.step { container-type: inline-size; }
.q-right { margin: 0; }
.q-left .add-note { margin-block-start: 1.5rem; }

@container (min-width: 46rem) {
  .qgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 3.5rem;
    align-items: start;
  }
  .qgrid .q-title { font-size: clamp(1.6rem, 2.6cqi + 0.35rem, 2.3rem); }
  .qgrid .q-hint { margin-block-start: 0.35rem; }
  .about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; }
  .about-grid .q + .q, .about-grid > div > .q { margin: 0; }
  .perm-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .step > .q-title + .lede { margin-block-end: 2rem; }
}

/* Phones: tighter rows and headings so a question and its answers fit */
@media (max-width: 34rem) {
  main { padding-block-start: 1.5rem; }
  .q-title { font-size: clamp(1.4rem, 5.2vw + 0.3rem, 1.75rem); line-height: 1.15; }
  .opt { padding: 0.7rem 0.3rem; min-height: 48px; font-size: 1rem; line-height: 1.35; }
  .q-hint { margin-block-end: 0.4rem; }
  .record { margin-block-end: 0.6rem; }
  .step-nav { padding-block-start: 1.5rem; }
  .chapter-lede { margin-block-end: 0.8rem; font-size: 0.9rem; }
  .masthead-inner { padding-block-start: 0.9rem; }
}

/* Short laptop screens: pull everything up a little */
@media (min-width: 64rem) and (max-height: 820px) {
  .masthead-inner { padding-block-start: 0.8rem; }
  .masthead-inner { --logo: 3rem; }
  main { padding-block-start: 1.5rem; }
  .step-nav { padding-block-start: 1.75rem; }
  .opt { padding-block: 0.75rem; min-height: 50px; }
}

/* =====================================================================
   Answers legend: one collapsible group per chapter.
   ===================================================================== */

.legend-group + .legend-group { margin-block-start: 0; }
.legend-group { border-block-start: 1px solid var(--line); }
.legend-group:last-of-type { border-block-end: 1px solid var(--line); }
.legend-group > summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 48px;
  padding-block: 0.8rem;
  cursor: pointer;
  list-style: none;
}
.legend-group > summary::-webkit-details-marker { display: none; }
.legend-group > summary::after {
  content: '';
  flex: none;
  width: 0.45em;
  height: 0.45em;
  margin-inline-start: 0.25rem;
  border-inline-end: 1.5px solid var(--muted);
  border-block-end: 1.5px solid var(--muted);
  rotate: 45deg;
  translate: 0 -0.15em;
  transition: rotate 0.15s;
}
.legend-group[open] > summary::after { rotate: -135deg; translate: 0 0.1em; }
.lg-title { font-weight: 500; font-size: 0.92rem; color: var(--ink); }
.lg-sum { margin-inline-start: auto; font-size: 0.8rem; color: var(--muted); text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.legend-group > ul { border-block-start: 0; padding-block-end: 0.6rem; }
.legend-group .chip:last-child { border-block-end: 0; }
.legend-group[open] > summary .lg-sum { visibility: hidden; }

.legend-ranks { list-style: none; margin: 0; padding: 0 0 0.75rem; display: grid; gap: 0.3rem; }
.legend-ranks a { display: flex; align-items: baseline; gap: 0.6rem; color: var(--ink); text-decoration: none; font-size: 0.9rem; line-height: 1.3; }
.legend-ranks a:hover { color: var(--accent-ink); }
.legend-ranks .n { flex: none; width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center; font-size: 0.72rem; font-weight: 500; background: var(--accent); color: var(--surface); translate: 0 0.1em; }


/* =====================================================================
   Fit every question on one screen.
   ===================================================================== */

/* Priorities: intro and Continue on the left, the fourteen on the right */
.pri { display: grid; grid-template-areas: 'intro' 'list' 'foot'; }
.pri-intro { grid-area: intro; }
.pri .rank-list { grid-area: list; }
.pri-foot { grid-area: foot; }
@media (min-width: 64rem) {
  .pri {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    grid-template-areas: 'intro list' 'foot list';
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    align-items: start;
  }
  .pri-intro { margin: 0; }
  .pri-intro h1 { font-size: clamp(2.2rem, 2.4vw + 1rem, 3.2rem); }
  .pri-intro .lede { font-size: 1.05rem; }
  .pri .rank-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .pri .rank-btn { min-height: 54px; padding-block: 0.45rem; font-size: 0.98rem; line-height: 1.3; }
  .pri-foot .step-nav { margin-block-start: 1.25rem; padding-block-start: 0; }
  .pri-foot .step-nav .btn-primary { flex: 1 1 100%; }
}

/* Statements two by two */
@container (min-width: 46rem) {
  .statements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; }
  .statements-grid .q + .q { margin: 0; }
}

/* Phones */
@media (max-width: 34rem) {
  .survey-name { display: none; }
  .masthead-inner { grid-template-columns: 1fr auto 1fr; }
  .brand { grid-column: 2; }
  .save-status { grid-column: 3; }
  .steps-now { margin-block-end: 0.3rem; }
  .steps { padding-block: 0.35rem 0.55rem; }

  .pri-intro { margin-block-end: 1rem; }
  .pri-intro h1 { font-size: 2.1rem; }
  .pri-intro .lede { font-size: 1rem; margin-block-start: 0.6rem; }
  .pri-intro .meta { font-size: 0.82rem; margin-block-start: 0.4rem; }
  .pri .rank-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.75rem; }
  .pri .rank-btn { grid-template-columns: 1.7rem 1fr; gap: 0.55rem; min-height: 50px; padding: 0.4rem 0.1rem; font-size: 0.86rem; line-height: 1.25; }
  .pri .rank-slot { width: 1.7rem; height: 1.7rem; font-size: 0.85rem; }
  .pri-foot .rank-summary { margin-block-start: 0.75rem; font-size: 0.85rem; }
  .pri-foot .step-nav { margin-block-start: 0.75rem; padding-block-start: 0; }

  .about-grid .opts { display: grid; grid-template-columns: 1fr 1fr; }
  .about-grid .opt { font-size: 0.92rem; }
  .about-grid .q + .q, .about-grid > div > .q, .about-grid > .q + div, .about-grid > div + .q { margin-block-start: 1.1rem; }
  .perm-list .opt small { font-size: 0.8rem; }
  .statements-grid .q + .q { margin-block-start: 1.1rem; }
  .statements-grid legend { font-size: 0.98rem; margin-block-end: 0.5rem; }
  .scale .opt { padding-block: 0.5rem; font-size: 0.74rem; }
  .step > .q-title + .lede { margin: 0.5rem 0 1rem; font-size: 0.95rem; }
}

/* Answers sidebar: never scroll sideways; only the open group scrolls if it is long */
.legend-side, .legend-sheet { overflow-x: hidden; }
.legend-group, .chip, .legend-ranks a { min-width: 0; }
.chip-q, .chip-a { overflow-wrap: anywhere; }
.chip.is-current { padding-inline-start: 0.6rem; margin-inline-start: 0; }
.legend-group > ul, .legend-group > .legend-ranks {
  max-height: min(46vh, 24rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
@media (min-width: 64rem) {

}


/* Phones: the Your answers button lives in the header's left column
   (where "Your Priorities" sits on wider screens), so no bar covers the bottom. */
.legend-bar {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-height: 44px;
  padding: 0.3rem 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  text-align: start;
}
.legend-bar .legend-open { font-size: 0.95rem; line-height: 1.1; }
.legend-bar .legend-count { font-size: 0.72rem; font-weight: 400; color: var(--muted); }
body.has-legend-bar { padding-block-end: 0; }
@media (min-width: 34.01rem) { .legend-bar { display: none !important; } }
@media (max-width: 34rem) {
  .q-title { font-size: clamp(1.3rem, 4.6vw + 0.3rem, 1.6rem); }
  .opt { padding-block: 0.6rem; min-height: 44px; font-size: 0.95rem; gap: 0.75rem; }
  .step-nav { padding-block-start: 1.1rem; }
  .step-nav .btn-primary, .step-nav .btn-secondary { min-height: 48px; }
}


/* =====================================================================
   One screen: header, card and footer share the viewport height, so a card
   that fits never leaves a sliver of page scroll.
   ===================================================================== */
.shell { display: flex; flex-direction: column; flex: 1; }
main { display: flex; flex-direction: column; flex: 1; padding-block-end: 1.25rem; }
@media (min-width: 64rem) {
  .shell { display: grid; }
}
.site-footer { padding: 0.6rem var(--gutter) 0.8rem; font-size: 0.72rem; line-height: 1.4; }
.site-footer p { display: inline; margin: 0 0.4rem; }
.site-footer a { margin-inline: 0.35rem; }

/* Priorities: Continue sits under the list, in the right-hand column */
@media (min-width: 64rem) {
  .pri { grid-template-areas: 'intro list' '. foot'; grid-template-rows: auto auto; }
  .pri-foot .rank-summary { margin-block-start: 0.9rem; }
}

/* Phones: a little tighter still */
@media (max-width: 34rem) {
  main { padding-block: 1rem 0.75rem; }
  .opt { padding-block: 0.5rem; min-height: 42px; font-size: 0.92rem; line-height: 1.28; }
  .q-hint { font-size: 0.8rem; margin-block-end: 0.3rem; }
  .q-left .record { margin-block: 0 0.4rem; }
  .record summary { min-height: 36px; }
  .block-tag, .fu-reason { margin-block-end: 0.6rem; }
  .qgrid .q-title, .q-title { margin-block-end: 0.3rem; }
  .step-nav { padding-block-start: 0.9rem; gap: 0.6rem; }
  .pri .rank-btn { min-height: 46px; }
}


/* Phones: "Pick one" is obvious from round markers; screen readers still hear it */
@media (max-width: 34rem) {
  .q-hint-one { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  .pri-intro h1 { font-size: 1.95rem; }
}

/* Short screens (small phones, landscape laptops): one more notch tighter */
@media (max-height: 780px) {
  .masthead-inner { --logo: 2.6rem; }
  .masthead-inner { padding-block-start: 0.9rem; }
  .opt { padding-block: 0.6rem; min-height: 44px; }
  .step-nav { padding-block-start: 1rem; }
}
@media (max-width: 34rem) and (max-height: 780px) {
  .masthead-inner { --logo: 1.85rem; }
  .masthead-inner { padding-block-start: 0.6rem; }
  .steps-now { font-size: 0.8rem; }
  .steps-now b { font-size: 0.98rem; }
  main { padding-block: 0.75rem 0.5rem; }
  .q-title { font-size: 1.18rem; line-height: 1.18; }
  .opt { padding-block: 0.42rem; min-height: 40px; font-size: 0.86rem; line-height: 1.25; }
  .opt input[type='radio'], .opt input[type='checkbox'] { width: 1.1rem; height: 1.1rem; }
  .chapter-lede { display: none; }
  .step-nav .btn-primary, .step-nav .btn-secondary { min-height: 44px; padding-block: 0.4rem; }
  .step-nav { padding-block-start: 0.7rem; }
  .step > .q-title + .lede { font-size: 0.85rem; margin-block: 0.3rem 0.7rem; }
  .statements-grid legend { font-size: 0.88rem; margin-block-end: 0.35rem; }
  .statements-grid .q + .q { margin-block-start: 0.7rem; }
  .scale .opt { padding-block: 0.35rem; font-size: 0.68rem; gap: 0.25rem; }
  .about-grid .opt { font-size: 0.84rem; }
  .about-grid .q > legend { font-size: 0.9rem; margin-block-end: 0.4rem; }
  .about-grid .q + .q, .about-grid > div > .q, .about-grid > .q + div, .about-grid > div + .q { margin-block-start: 0.7rem; }
  .field + .field, .two-col + .field { margin-block-start: 0.8rem; }
  .two-col { gap: 0.8rem; }
  .step .lede { font-size: 0.85rem; }
  input[type='text'], input[type='email'], select { min-height: 44px; padding-block: 0.5rem; }
  .perm-list .opt small { display: none; }
  .fine { font-size: 0.75rem; margin-block-start: 0.6rem; }
  .pri-intro h1 { font-size: 1.7rem; }
  .pri-intro .lede { font-size: 0.9rem; }
  .pri .rank-btn { min-height: 40px; font-size: 0.8rem; padding-block: 0.3rem; }
  .pri .rank-slot { width: 1.5rem; height: 1.5rem; }
  .site-footer { font-size: 0.66rem; padding-block: 0.4rem 0.5rem; }
}

@media (max-width: 34rem) {
  .opts-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.75rem; }
  .opts-2 .opt { font-size: 0.86rem; }
  .opts-many .opt { padding-block: 0.38rem; min-height: 38px; }
  .pri-intro { margin-block-end: 0.6rem; }
  .pri-foot .rank-summary { margin-block-start: 0.5rem; }
  .pri-foot .step-nav { margin-block-start: 0.5rem; }
}
@media (max-width: 34rem) and (max-height: 780px) {
  .pri-intro .meta { display: none; }
}


/* Next sits right under the answers, not pushed to the bottom of the window */
.step { flex: none; }
.step-nav, .step > .step-nav { margin-block-start: 0; padding-block-start: 2rem; }
main { flex: none; }
.shell { flex: 1 0 auto; }
@media (max-width: 34rem) { .step-nav { padding-block-start: 1.25rem; } }

/* The answers sidebar never makes the page taller than the window:
   it is capped to the space under the header, and the open group scrolls inside. */
@media (min-width: 64rem) {

}


/* =====================================================================
   Your answers as a question map. Fixed size, so it never scrolls.
   ===================================================================== */
.legend-side, .legend-sheet { overflow: visible; }
.legend-sheet { overflow-y: hidden; }
.legend-title { font-size: 1.35rem; }
.legend-sub { margin: 0.15rem 0 0.9rem; font-size: 0.78rem; }

.map-ranks { display: block; margin-block-end: 0.9rem; color: var(--ink); text-decoration: none; }
.map-ranks ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.map-ranks li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.map-ranks .n { flex: none; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; font-size: 0.66rem; font-weight: 500; background: var(--accent); color: var(--surface); }
.map-ranks .t { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-ranks .more { display: block; margin: 0.2rem 0 0 1.65rem; font-size: 0.75rem; color: var(--muted); }
.map-ranks:hover .t { color: var(--accent-ink); }

.map-row + .map-row { margin-block-start: 0.7rem; }
.map-title { margin: 0 0 0.3rem; font-size: 0.75rem; color: var(--muted); }
.map-cells { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.cell {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cell:hover { border-color: var(--ink); color: var(--ink); }
.cell.is-done { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.cell.is-here { outline: 2px solid var(--accent); outline-offset: 1px; }
.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.map-preview { margin-block-start: 0.9rem; padding-block-start: 0.6rem; border-block-start: 1px solid var(--line); height: 3.6rem; overflow: hidden; }
.map-preview p { margin: 0; }
.pv-q { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-a { font-size: 0.84rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 64rem) and (max-height: 820px) {
  .legend-side:not([hidden]) { margin-block-start: 1.25rem; }
  .legend-sub { display: none; }
  .legend-title { margin-block-end: 0.6rem; }
  .map-row + .map-row { margin-block-start: 0.5rem; }
  .map-preview { margin-block-start: 0.6rem; }
}

/* Six or more short answers sit two across on short laptop screens too */
@media (min-width: 64rem) and (max-height: 820px) {
  .opts-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}
@media (max-width: 34rem) {
  .statements-grid .q + .q { margin-block-start: 0.85rem; }
  .scale .opt { padding-block: 0.42rem; }
}
@media (max-width: 34rem) and (max-height: 780px) {
  .opts-many .opt { padding-block: 0.3rem; min-height: 36px; }
}


/* Logo: "Roman" sits dead centre; "for Mayor of Stewart" hangs off its right on the
   same baseline. The empty first column is as wide as the tagline, which keeps the
   name on the centre line. Phones stack the tagline underneath. */
.masthead-inner { --logo: 3.5rem; }
.brand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: last baseline;
  column-gap: 0.55rem;
  text-align: start;
}
.brand-title { grid-column: 2; font-size: var(--logo); }
.brand-sub {
  grid-column: 3;
  margin: 0;
  font-size: calc(var(--logo) * 0.385);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 34rem) {
  .brand { grid-template-columns: auto; justify-items: center; row-gap: 0.2rem; }
  .brand-title, .brand-sub { grid-column: 1; }
  .brand-sub { font-size: calc(var(--logo) * 0.4); }
}
/* Logo sizes per screen (after the base rule so they win) */
@media (min-width: 64rem) and (max-height: 820px) { .masthead-inner { --logo: 3rem; } }
@media (max-height: 780px) { .masthead-inner { --logo: 2.6rem; } }
@media (max-width: 34rem) { .masthead-inner { --logo: 2.2rem; } }
@media (max-width: 34rem) and (max-height: 780px) { .masthead-inner { --logo: 1.85rem; } }

/* Tagline as a right-aligned two-line block; its last line sits on Roman's baseline */
.brand-sub { text-align: end; line-height: 1.02; font-size: calc(var(--logo) * 0.4); }
.brand-sub > span { display: block; }
@media (max-width: 34rem) {
  .brand-sub { text-align: center; }
  .brand-sub > span { display: inline; }
}


/* =====================================================================
   Buttons: pills with an arrow disc (Next, Continue, Send), a round
   arrow for Back, plain text for Skip. Every other button is a pill too.
   ===================================================================== */
.btn-primary, .btn-secondary { border-radius: 999px; padding-inline: 1.5rem; }
.btn-small { padding-inline: 1.1rem; }

.btn-go {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 0.4rem 0.4rem 0.4rem 1.6rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-go .disc { width: 44px; height: 44px; background: #fff; color: var(--ink); }
.btn-go:hover { background: var(--accent); }
.btn-go:hover .disc { translate: 4px 0; color: var(--accent); }
.btn-go[disabled] { opacity: 0.6; cursor: progress; }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.2rem 0.4rem 0.2rem 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.btn-back .disc { width: 44px; height: 44px; border: 1px solid var(--line); }
.btn-back:hover .disc { border-color: var(--ink); translate: -3px 0; }

.disc {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: translate 0.25s cubic-bezier(.3,1.4,.5,1), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.disc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.btn-skip {
  min-height: 48px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.btn-skip:hover { color: var(--ink); background: var(--wash); }

.step-nav { align-items: center; }
.step-nav .nav-spacer { flex: 1; }
.step-nav .btn-primary, .step-nav .btn-skip, .step-nav .btn-go { flex: none; }
.pri-foot .step-nav .btn-go { flex: none; }
.pri-foot .step-nav { justify-content: flex-end; }
.btn-go:focus-visible, .btn-back:focus-visible, .btn-skip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 34rem) {
  .btn-go { min-height: 50px; font-size: 1rem; padding-inline-start: 1.3rem; }
  .btn-go .disc { width: 40px; height: 40px; }
  .btn-back .disc { width: 40px; height: 40px; }
}
@media (max-width: 34rem) and (max-height: 780px) {
  .btn-go { min-height: 44px; }
  .btn-go .disc, .btn-back .disc { width: 36px; height: 36px; }
}

/* Centre the letters, not the line box: LT Pro's deep descender space otherwise
   makes labels sit high in the pill. */
.btn-label { line-height: 1; text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .btn-label { translate: 0 0.12em; }
}
@media (max-width: 34rem) {
  .field + .field, .two-col + .field { margin-block-start: 1rem; }
  .two-col { gap: 1rem; }
}

/* =====================================================================
   Answers as tiles: rounded white cards with a tick circle; the chosen tile
   turns black with a red tick. Applies to every answer list.
   ===================================================================== */
:root {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5 8.5 14.5 15.5 6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.opts, .perm-list { border: 0; display: grid; gap: 0.5rem; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.8rem 0.9rem 0.8rem 1.1rem;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 0.03);
  line-height: 1.35;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, translate 0.2s;
}
.opt:hover { background: #fff; box-shadow: 0 0 0 1px #c9ced2, 0 6px 16px -10px rgb(0 0 0 / 0.25); translate: 0 -1px; }
/* the native control stays for keyboards and screen readers, drawn by the tile instead */
.opt input[type='radio'], .opt input[type='checkbox'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opt::after {
  content: '';
  position: static;
  inset: auto;
  flex: none;
  width: 26px;
  height: 26px;
  scale: none;
  border-radius: 50%;
  background: transparent var(--tick) center / 15px no-repeat;
  background-size: 0;
  box-shadow: inset 0 0 0 1.5px #c9ced2;
  transition: background-color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(.3,1.6,.5,1);
}
.opt:has(input[type='checkbox'])::after { border-radius: 8px; }
.opt:has(input:checked) {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 1px var(--ink), 0 10px 24px -14px rgb(0 0 0 / 0.6);
}
.opt:has(input:checked)::after { scale: none; background-color: var(--accent); background-size: 15px; box-shadow: none; }
.opt:has(input:checked) small { color: rgb(255 255 255 / 0.7); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.opt > span { min-width: 0; }

/* Agree/disagree and severity: small tiles, tick on top */
.scale, .sev .opts { border: 0; gap: 0.4rem; }
.scale .opt, .sev .opt {
  flex-direction: column-reverse;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 0.25rem;
  border-inline-end: 0;
  border-radius: 12px;
  text-align: center;
}
.scale .opt::after, .sev .opt::after { width: 20px; height: 20px; }
.scale .opt:has(input:checked), .sev .opt:has(input:checked) { background: var(--ink); color: #fff; }
.scale .opt:has(input:checked)::after, .sev .opt:has(input:checked)::after { background-size: 12px; }

/* Priorities: the same tiles; the red number shows the order */
.rank-list { border: 0; display: grid; gap: 0.5rem; }
@media (min-width: 44rem) { .rank-list { column-gap: 0.6rem; } }
.rank-btn {
  min-height: 54px;
  padding: 0.55rem 0.9rem 0.55rem 0.6rem;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / 0.03);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, translate 0.2s;
}
.rank-btn::after { display: none; }
.rank-btn:hover { background: #fff; box-shadow: 0 0 0 1px #c9ced2, 0 6px 16px -10px rgb(0 0 0 / 0.25); translate: 0 -1px; }
.rank-slot { border-radius: 9px; }
.rank-btn[aria-pressed='true'] { background: var(--ink); color: #fff; box-shadow: 0 0 0 1px var(--ink), 0 10px 24px -14px rgb(0 0 0 / 0.6); }
.rank-btn[aria-pressed='true'] .rank-slot { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Tiles on phones and short screens */
@media (max-width: 34rem) {
  .opts, .perm-list { gap: 0.4rem; }
  .opt { padding: 0.6rem 0.7rem 0.6rem 0.9rem; min-height: 44px; gap: 0.6rem; border-radius: 12px; }
  .opt::after { width: 22px; height: 22px; }
  .opts-2 { column-gap: 0.4rem; }
  .rank-list { gap: 0.35rem; }
  .pri .rank-btn { border-radius: 12px; padding-inline: 0.45rem 0.5rem; }
}
@media (max-width: 34rem) and (max-height: 780px) {
  .opt { padding-block: 0.42rem; min-height: 40px; }
  .opts-many .opt { padding-block: 0.3rem; min-height: 36px; }
  .opts, .perm-list { gap: 0.3rem; }
}
@media (min-width: 64rem) and (max-height: 820px) {
  .opt { padding-block: 0.65rem; min-height: 48px; }
  .opts { gap: 0.4rem; }
}

/* =====================================================================
   Selected colour, rounded shapes, and the valley drawing behind everything.
   ===================================================================== */
:root {
  /* Deep spruce teal: the complement of the red (hue ~358 vs ~180), softer than black,
     and a nod to Stewart's forests and glacial water. Swap here to change every selection. */
  --selected: #164e50;
  --selected-edge: #164e50;
}

/* Selected tiles, priorities and scale use the teal instead of black */
.opt:has(input:checked),
.scale .opt:has(input:checked), .sev .opt:has(input:checked),
.rank-btn[aria-pressed='true'] {
  background: var(--selected);
  color: #fff;
  box-shadow: 0 0 0 1px var(--selected-edge), 0 10px 24px -14px rgb(22 78 80 / 0.7);
}
.cell.is-done { background: var(--selected); border-color: var(--selected); }

/* Rounded like the Continue pill */
.opt, .rank-btn { border-radius: 28px; }
.opt { padding-inline-start: 1.35rem; }
.scale .opt, .sev .opt { border-radius: 22px; }
.opt:has(input[type='checkbox'])::after { border-radius: 50%; }
@media (max-width: 34rem) {
  .opt, .rank-btn, .pri .rank-btn { border-radius: 24px; }
  .opt { padding-inline-start: 1rem; }
  .scale .opt, .sev .opt { border-radius: 18px; }
}

/* Circles for every number, centred on the digits themselves */
.rank-slot, .block-tag .rank-slot, .map-ranks .n, .cell { border-radius: 50%; }
.rank-slot, .map-ranks .n, .cell { line-height: 1; text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .rank-slot, .map-ranks .n, .cell { padding-top: 0.12em; }
}

/* The valley drawing: lines carry a teal-to-red gradient, anchored to the bottom
   of the window, fading out upward, faint enough to sit behind the questions. */
body::before {
  content: '';
  position: fixed;
  inset: auto 0 0 0;
  height: min(78vh, 62vw);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, #2f7f80 0%, #7fa9b8 38%, #c9a7b4 68%, #eb3f43 100%);
  -webkit-mask-image: url('../img/stewart-lines.webp'), linear-gradient(to top, #000 35%, transparent 100%);
  -webkit-mask-size: cover, 100% 100%;
  -webkit-mask-position: center bottom, 0 0;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: url('../img/stewart-lines.webp'), linear-gradient(to top, #000 35%, transparent 100%);
  mask-size: cover, 100% 100%;
  mask-position: center bottom, 0 0;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  opacity: 0.42;
}
body { isolation: isolate; }
.masthead, .legend-sheet, .picker { background-color: var(--bg); }

/* =====================================================================
   Backdrop: the Stewart valley photo, pre-processed pale and cool
   (img/stewart-backdrop), under a veil that is strongest where the text is.
   ===================================================================== */
body::before {
  inset: 0;
  height: auto;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  background:
    linear-gradient(to bottom, rgb(251 252 252 / 0.9) 0%, rgb(251 252 252 / 0.72) 45%, rgb(251 252 252 / 0.35) 100%),
    url('../img/stewart-backdrop.webp') center 70% / cover no-repeat,
    var(--bg);
}
@supports not (background-image: url('x.webp')) {
  body::before { background-image: linear-gradient(to bottom, rgb(251 252 252 / 0.9), rgb(251 252 252 / 0.35)), url('../img/stewart-backdrop.jpg'); }
}
body { background: var(--bg); }

/* =====================================================================
   Selection: tiles stay white. Unselected are slightly see-through;
   the chosen one turns solid white with a red ring, a filled red tick and a lift.
   ===================================================================== */
.opt, .rank-btn {
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
}
.opt:hover, .rank-btn:hover { background: rgb(255 255 255 / 0.92); }
.opt:has(input:checked),
.scale .opt:has(input:checked), .sev .opt:has(input:checked),
.rank-btn[aria-pressed='true'] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--accent), 0 12px 28px -16px rgb(235 63 67 / 0.55);
  translate: 0 -1px;
}
.opt:has(input:checked) small { color: var(--muted); }
.cell.is-done { background: var(--ink); border-color: var(--ink); }

/* Fit: tiles take a little more room than hairline rows, so tighten where it counts */
@media (min-width: 64rem) and (max-height: 820px) {
  .pri .rank-btn { min-height: 48px; padding-block: 0.35rem; }
  .pri .rank-list { gap: 0.4rem; }
}
@media (max-width: 34rem) {
  .opt { padding-block: 0.52rem; min-height: 42px; }
  .opts, .perm-list { gap: 0.35rem; }
  .opts-many .opt { padding-block: 0.34rem; min-height: 38px; }
  .scale .opt, .sev .opt { padding-block: 0.4rem; gap: 0.3rem; }
  .scale .opt::after { width: 18px; height: 18px; }
  .statements-grid .q + .q { margin-block-start: 0.75rem; }
  .perm-list .opt small { font-size: 0.76rem; line-height: 1.3; }
  .pri .rank-btn { min-height: 44px; padding-block: 0.3rem; }
  .step > .q-title + .lede { margin-block-end: 0.8rem; }
}

/* Selected: "Paper". The chosen tile goes solid white with a soft shadow and a
   graphite tick; no ring, no lift. Priorities keep their red number (it shows order). */
:root { --tick-on: #5b6166; }
.opt:has(input:checked),
.scale .opt:has(input:checked), .sev .opt:has(input:checked),
.rank-btn[aria-pressed='true'] {
  background: #fff;
  color: var(--ink);
  translate: none;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 22px -12px rgb(0 0 0 / 0.28);
}
.opt:has(input:checked)::after { background-color: var(--tick-on); }

/* =====================================================================
   Optical centring. Helvetica Neue LT Pro keeps extra space above and below
   its letters, so text sits off-centre in its box. Trimming each label to its
   letter shapes (cap height to baseline) centres what you actually see.
   ===================================================================== */
.num, .rank-btn > span:last-child, .opt > span, .pri-intro h1 {
  text-box: trim-both cap alphabetic;
}
.num { display: block; line-height: 1; }
.rank-slot, .map-ranks .n, .cell { text-box: normal; padding-top: 0; }
@supports not (text-box: trim-both cap alphabetic) {
  .num { translate: 0 0.08em; }
}
/* Priorities intro: the heading's capitals now start level with the first tile */
.pri-intro h1 { line-height: 1.02; }

/* Header: see-through, so the valley backdrop runs up behind it */
.masthead {
  background: rgb(251 252 252 / 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pri-intro h1 + .lede { margin-block-start: 1.4rem; }
@media (max-width: 34rem) { .pri-intro h1 + .lede { margin-block-start: 0.9rem; } }
@media (max-width: 34rem) {
  .opts-many { gap: 0.28rem; }
  .opts-many .opt { padding-block: 0.3rem; min-height: 36px; font-size: 0.88rem; line-height: 1.25; }
  .opts-many .opt::after { width: 20px; height: 20px; }
}

/* Priority numbers use the same graphite as the answer ticks, not red */
.rank-btn[aria-pressed='true'] .rank-slot,
.block-tag .rank-slot,
.map-ranks .n { background: var(--tick-on); border-color: var(--tick-on); color: #fff; }

/* A little more room above the header */
.masthead-inner { padding-block-start: 2.15rem; }
@media (min-width: 64rem) and (max-height: 820px) { .masthead-inner { padding-block-start: 1.2rem; } }
@media (max-width: 34rem) { .masthead-inner { padding-block-start: 1.15rem; } }
@media (max-width: 34rem) and (max-height: 780px) { .masthead-inner { padding-block-start: 0.85rem; } }

/* Backdrop: the ridges sit behind the header; the veil is light at the very top
   and strongest where the questions are. */
body::before {
  background:
    linear-gradient(to bottom, rgb(251 252 252 / 0.35) 0%, rgb(251 252 252 / 0.55) 14%, rgb(251 252 252 / 0.8) 26%, rgb(251 252 252 / 0.72) 62%, rgb(251 252 252 / 0.4) 100%),
    url('../img/stewart-backdrop.webp') center 22% / cover no-repeat,
    var(--bg);
}
.masthead { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body::before {
  background:
    linear-gradient(to bottom, rgb(251 252 252 / 0.05) 0%, rgb(251 252 252 / 0.3) 13%, rgb(251 252 252 / 0.78) 25%, rgb(251 252 252 / 0.72) 62%, rgb(251 252 252 / 0.4) 100%),
    url('../img/stewart-backdrop.webp') center 42% / cover no-repeat,
    var(--bg);
}
/* Photo anchored near its top so the peaks run behind the header; the veil
   clears at the top and thickens over the questions. */
body::before {
  background:
    linear-gradient(to bottom, rgb(251 252 252 / 0) 0%, rgb(251 252 252 / 0.2) 12%, rgb(251 252 252 / 0.8) 26%, rgb(251 252 252 / 0.8) 60%, rgb(251 252 252 / 0.5) 100%),
    url('../img/stewart-backdrop.webp') center 8% / cover no-repeat,
    var(--bg);
}
body::before { background-position: 0 0, center top, 0 0; }

/* Priorities (wide screens): the question and intro sit centred against the whole list */
@media (min-width: 64rem) {
  .pri-intro { align-self: center; padding-top: 0 !important; }
}

/* Backdrop colour: the sky is softened behind the header, and a very faint
   warm-to-cool tint (a whisper of the logo red, balanced by glacier ice)
   keeps the page from reading as flat grey. */
body::before {
  background:
    radial-gradient(70rem 45rem at 100% 100%, rgb(235 63 67 / 0.07), transparent 70%),
    radial-gradient(60rem 40rem at 0% 0%, rgb(160 205 215 / 0.12), transparent 70%),
    linear-gradient(to bottom, rgb(251 252 252 / 0.42) 0%, rgb(251 252 252 / 0.45) 12%, rgb(251 252 252 / 0.8) 26%, rgb(251 252 252 / 0.8) 60%, rgb(251 252 252 / 0.5) 100%),
    url('../img/stewart-backdrop.webp') center top / cover no-repeat,
    var(--bg);
  filter: saturate(0.8);
}

/* Small text reads clearly over the photo: a darker grey everywhere, and the
   record citation and priority summary nearly full ink. */
:root { --muted: #474e54; }
.rank-summary, .meta, .record, .record p, .q-hint, .chapter-lede, .fine, .legend-sub, .map-title, .pv-q, .save-status, .steps-count { color: var(--muted); }
.record p { color: #33393e; }
.rank-summary { color: #33393e; }

/* Colour: no extra desaturation; a clear glacier-blue wash rises from the bottom
   (cyan-leaning, so it sits well with the red) and the veil thins there so the town reads in colour. */
body::before {
  filter: none;
  background:
    linear-gradient(to top, rgb(40 150 220 / 0.32) 0%, rgb(40 150 220 / 0.12) 28%, transparent 55%),
    radial-gradient(70rem 45rem at 100% 100%, rgb(235 63 67 / 0.06), transparent 70%),
    radial-gradient(60rem 40rem at 0% 0%, rgb(160 205 215 / 0.06), transparent 70%),
    linear-gradient(to bottom, rgb(251 252 252 / 0.56) 0%, rgb(251 252 252 / 0.56) 12%, rgb(251 252 252 / 0.8) 26%, rgb(251 252 252 / 0.78) 58%, rgb(251 252 252 / 0.3) 100%),
    url('../img/stewart-backdrop.webp') center top / cover no-repeat,
    var(--bg);
}


/* Header: "Roman" centred; "for Mayor of Stewart" on one line in the right column,
   on Roman's baseline. On phones there is no room beside it, so it stacks under the name. */
.masthead-inner { align-items: last baseline; }
.brand { grid-template-columns: auto; justify-items: center; }
.brand-title { grid-column: 1; }
.brand .brand-sub-stacked { display: none; }
.brand-tag {
  grid-column: 3;
  justify-self: end;
  margin: 0;
  font-size: calc(var(--logo) * 0.4);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.survey-name { align-self: last baseline; }
@media (max-width: 34rem) {
  .brand-tag { display: none; }
  .brand .brand-sub-stacked { display: block; grid-column: 1; margin: 0; font-size: calc(var(--logo) * 0.4); font-weight: 300; font-style: italic; text-align: center; }
  .brand { row-gap: 0.2rem; }
}

/* Save status: right end of the progress row */
.steps-now { flex-wrap: wrap; }
.steps-now .save-status { margin-inline-start: auto; font-size: 0.78rem; text-align: end; max-width: none; }
@media (max-width: 34rem) { .steps-now .save-status { font-size: 0.7rem; } }

/* Footer: a faint dark hairline reads on the blue; a light line turned into a white stripe */
.site-footer { border-block-start: 1px solid rgb(35 31 32 / 0.1); }
@media (max-width: 34rem) {
  .steps-now { flex-wrap: nowrap; }
  .steps-now .save-long { display: none; }
  .steps-now .save-status { white-space: nowrap; }
}

/* Tagline: bolder, and centred on the height of "Roman" rather than sitting on its baseline */
.masthead-inner { align-items: center; }
.brand-tag {
  align-self: center;
  font-weight: 500;
  text-box: trim-both cap alphabetic;
}
.survey-name { align-self: center; }
@media (max-width: 34rem) {
  .brand .brand-sub-stacked { font-weight: 500; }
}
.brand-title { text-box: trim-both cap alphabetic; }

/* Answers: a very light frosted glass. Unselected tiles let the valley through
   faintly; a thin bright top edge catches the light. The chosen one stays solid white. */
.opt:not(:has(input:checked)), .rank-btn:not([aria-pressed='true']) {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.52));
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 0 0 1px rgb(255 255 255 / 0.55),
    0 0 0 1px rgb(35 31 32 / 0.06),
    0 1px 2px rgb(20 40 60 / 0.04);
}
.opt:not(:has(input:checked)):hover, .rank-btn:not([aria-pressed='true']):hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.7));
}

/* Tagline: larger and in the logo red */
.brand-tag { font-size: calc(var(--logo) * 0.52); color: var(--accent); }
@media (max-width: 34rem) {
  .brand .brand-sub-stacked { font-size: calc(var(--logo) * 0.46); color: var(--accent); }
}

/* More room above the header */
.masthead-inner { padding-block-start: 2.9rem; }
@media (min-width: 64rem) and (max-height: 820px) { .masthead-inner { padding-block-start: 1.8rem; } }
@media (max-width: 34rem) { .masthead-inner { padding-block-start: 1.7rem; } }
@media (max-width: 34rem) and (max-height: 780px) { .masthead-inner { padding-block-start: 1.1rem; } }
/* Phones: breathing room between the name and the stacked tagline */
@media (max-width: 34rem) { .brand { row-gap: 0.45rem; } }
/* Tagline larger still */
.brand-tag { font-size: calc(var(--logo) * 0.66); letter-spacing: -0.015em; }
@media (max-width: 34rem) { .brand .brand-sub-stacked { font-size: calc(var(--logo) * 0.54); } }

/* Tagline a step smaller */
.brand-tag { font-size: calc(var(--logo) * 0.56); }
@media (max-width: 34rem) { .brand .brand-sub-stacked { font-size: calc(var(--logo) * 0.48); } }

/* Chapter line: the chapter name echoes the tagline (red, medium italic); the counter
   sits in a small frosted pill like the answer tiles, numbers slightly bolder. */
.steps-now { align-items: center; gap: 0.75rem; }
.steps-now > b {
  font-family: var(--sans);
  font-weight: 500;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-box: trim-both cap alphabetic;
}
.steps-count {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.5));
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 0 0 1px rgb(35 31 32 / 0.06);
  line-height: 1;
}
.steps-count .n { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 34rem) {
  .steps-now > b { font-size: 1.02rem; }
  .steps-count { font-size: 0.72rem; padding: 0.35rem 0.6rem; }
}

/* Header left and right balance each other around the centred name */
.brand-tag { font-size: calc(var(--logo) * 0.46); }
.survey-name {
  align-self: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--logo) * 0.36);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-box: trim-both cap alphabetic;
}
@media (max-width: 34rem) { .brand .brand-sub-stacked { font-size: calc(var(--logo) * 0.44); } }

/* Counter: plain "2 / 7", no pill; current number in ink, total muted */
.steps-count {
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  gap: 0.25em;
  font-size: 0.95rem;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic;
}
.steps-count .n { font-weight: 500; color: var(--ink); }
.steps-count .sep { color: rgb(35 31 32 / 0.3); }

/* Progress bar: a little thicker, rounded, graphite instead of black */
.steps-bar { gap: 5px; }
.steps-bar a, .steps-bar span { height: 3px; border-radius: 3px; background: rgb(35 31 32 / 0.1); }
.steps-bar .done { background: var(--tick-on); }
.steps-bar [aria-current] { background: linear-gradient(to right, var(--accent) var(--fill, 100%), rgb(35 31 32 / 0.1) var(--fill, 100%)); }
@media (max-width: 34rem) { .steps-count { font-size: 0.85rem; } }

/* Chapter name and counter share a baseline */
.steps-now { align-items: baseline; }
.steps-now > b, .steps-count { text-box: normal; }

/* =====================================================================
   Text fields match the answer tiles: frosted glass, pill-round single-line
   fields, softly rounded text boxes, and a quiet graphite ring on focus.
   ===================================================================== */
input[type='text'], input[type='email'], select, textarea {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.3rem;
  min-height: 54px;
  color: var(--ink);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.56));
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 0 0 1px rgb(255 255 255 / 0.55),
    0 0 0 1px rgb(35 31 32 / 0.08),
    0 1px 2px rgb(20 40 60 / 0.04);
  transition: box-shadow 0.2s, background-color 0.2s;
}
textarea { border-radius: 22px; padding: 1rem 1.3rem; }
select { padding-inline-end: 2.8rem; background-position: right 1.5rem center, right 1.15rem center, 0 0; }
select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.56));
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem, 100% 100%;
  background-repeat: no-repeat;
}
:is(input[type='text'], input[type='email'], select, textarea):hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(35 31 32 / 0.16), 0 6px 16px -10px rgb(0 0 0 / 0.2);
}
:is(input[type='text'], input[type='email'], select, textarea):focus {
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 1.5px var(--tick-on), 0 8px 22px -12px rgb(0 0 0 / 0.28);
}
select:focus { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%), linear-gradient(#fff, #fff); }
:is(input, textarea):user-invalid { background: rgb(253 241 240 / 0.9); box-shadow: 0 0 0 1.5px var(--alert); }
.field label, .label { padding-inline-start: 0.35rem; }
.counter { padding-inline-end: 0.6rem; }
.error-msg { padding-inline-start: 0.35rem; }
.email-known {
  border: 0; border-radius: 999px; padding: 0.6rem 0.6rem 0.6rem 1.3rem;
  background: rgb(255 255 255 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), 0 0 0 1px rgb(35 31 32 / 0.08);
}
.photo-field input[type='file']::file-selector-button {
  font: inherit; font-size: 0.9rem; margin-inline-end: 0.8rem; padding: 0.5rem 1rem;
  border: 0; border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 0 0 1px rgb(35 31 32 / 0.12);
}
.photo-preview img { border-radius: 12px; border: 0; }
@media (max-width: 34rem) {
  input[type='text'], input[type='email'], select { min-height: 48px; padding-block: 0.6rem; }
  textarea { border-radius: 18px; }
}

/* Side-by-side fields line up (no stacked-field gap on the second one) */
.two-col > .field + .field { margin-block-start: 0; }
/* Text boxes keep their writing room */
textarea { min-height: 0; min-block-size: 6lh; }
textarea.short { min-block-size: 3lh; }
@media (max-width: 34rem) { textarea { min-block-size: 4.5lh; } }
/* Answered squares in the sidebar: graphite, like the ticks */
.cell.is-done { background: var(--tick-on); border-color: var(--tick-on); }

/* Entry fields: a firmer edge so they hold up against the photo */
input[type='text'], input[type='email'], select, textarea {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 0 0 1px rgb(35 31 32 / 0.18),
    0 2px 6px -2px rgb(20 40 60 / 0.08);
}
:is(input[type='text'], input[type='email'], select, textarea):hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(35 31 32 / 0.3), 0 6px 16px -10px rgb(0 0 0 / 0.2);
}

/* Answer tiles: a hint more edge, same as the entry fields */
.opt:not(:has(input:checked)), .rank-btn:not([aria-pressed='true']) {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    0 0 0 1px rgb(35 31 32 / 0.14),
    0 2px 6px -2px rgb(20 40 60 / 0.07);
}
.opt:not(:has(input:checked)):hover, .rank-btn:not([aria-pressed='true']):hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(35 31 32 / 0.26), 0 6px 16px -10px rgb(0 0 0 / 0.2);
}
.opt:has(input:checked), .rank-btn[aria-pressed='true'] {
  box-shadow: 0 0 0 1px rgb(35 31 32 / 0.16), 0 8px 22px -12px rgb(0 0 0 / 0.28);
}
.opt::after { box-shadow: inset 0 0 0 1.5px #b4bac0; }

/* Expired-link banner: email field and button on one row */
.relink { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.relink input { flex: 1 1 14rem; min-height: 48px; }
.link-line .btn-quiet { min-height: 0; padding: 0; }

/* Fallback text holds the same size while the web font loads, so nothing jumps */
body { font-size-adjust: from-font; }

/* Question cards (two columns): the question and its record sit centred against the answers */
@container (min-width: 46rem) {
  .qgrid { align-items: center; }
  .q-left { padding-block: 0.5rem; }
}

/* Question cards (two columns): both columns start at the top; js (alignQuestion)
   then slides whichever side is shorter so the question and the answer tiles share
   a centre line, without ever making the card taller. */
@container (min-width: 46rem) {
  .qgrid { align-items: start; }
  .qgrid .q-post > :first-child { margin-top: 0.9rem; }
  .qgrid .q-post .add-note { margin-top: 0.75rem; }
}