/* =============================================================================
   DELAWARE YOUTH COUNCIL: STYLES
   =============================================================================
   Layout and visual design only. Every word on the site lives in content.toml.

   How this file is organized:
     1. Design tokens (colors, type, spacing) as CSS variables, light then dark
     2. Base elements (body, headings, links, focus)
     3. Page frame (header, nav, footer, skip link)
     4. Home page (hero, county count, explainer)
     5. Take action page (form, steps, letter)
     6. Shared pieces (buttons, county map, placeholder marks, utilities)

   Design intent, so future changes stay consistent:
     - Credible and civic. No cards with drop shadows, no gradients, no icons.
     - One bold element: the three-county map. Everything else stays quiet.
     - Counties are always drawn as equals: same fill, same stroke. Highlighting
       one county means filling it solid, never using a "bigger" color.
     - Sentence case everywhere. No tracked-out capitals.
     - Text width stays under about 70 characters for readability.
     - System fonts only. No font downloads means faster pages and no visitor
       data sent to a font host.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Light palette. Off-white paper, near-black ink, Delaware colonial blue and
     buff (the state flag's two colors) used with restraint. */
  --paper: #f9f8f4;
  --paper-2: #efece4;
  --ink: #1b2233;
  --muted: #4e5566;
  --rule: #d4d1c8;
  --accent: #223a5e;
  --accent-hover: #17294a;
  --accent-ink: #ffffff;
  --buff: #dccfa6;
  --map-stroke: #223a5e;
  --focus: #a35a00;
  --mark-bg: #fce97a;
  --mark-ink: #1b2233;
  --error: #9b1c1c;
  --error-bg: #fbeeee;

  /* Type. A sturdy system serif for headings and big numbers, a plain system
     sans for body text and controls. Each stack ends in a generic fallback. */
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout. */
  --measure: 40rem;      /* max width of a paragraph */
  --page-width: 66rem;   /* max width of the whole page */
  --gutter: 1.25rem;     /* horizontal padding on phones */

  box-sizing: border-box;
  /* Keep content clear of phone system bars when the page runs edge to edge. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark palette. Same relationships, inverted. Buttons flip to light-on-dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #13161d;
    --paper-2: #1c2029;
    --ink: #eceef2;
    --muted: #b4b9c4;
    --rule: #303643;
    --accent: #c5d3e8;
    --accent-hover: #dfe7f4;
    --accent-ink: #13161d;
    --buff: #6f6648;
    --map-stroke: #c5d3e8;
    --focus: #f2a33a;
    --mark-bg: #6b5600;
    --mark-ink: #fff5cc;
    --error: #f2a0a0;
    --error-bg: #3a1d1d;
  }
}
:root[data-theme="dark"] {
  --paper: #13161d;
  --paper-2: #1c2029;
  --ink: #eceef2;
  --muted: #b4b9c4;
  --rule: #303643;
  --accent: #c5d3e8;
  --accent-hover: #dfe7f4;
  --accent-ink: #13161d;
  --buff: #6f6648;
  --map-stroke: #c5d3e8;
  --focus: #f2a33a;
  --mark-bg: #6b5600;
  --mark-ink: #fff5cc;
  --error: #f2a0a0;
  --error-bg: #3a1d1d;
}


/* -----------------------------------------------------------------------------
   2. BASE ELEMENTS
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: inherit; }

/* The hidden attribute always wins, even over display rules on .button and friends. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;   /* 17px: comfortable on phones without zooming */
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  max-width: 28ch;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 3vw, 2.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.95rem); }
h3 { font-size: 1.2rem; margin-bottom: 0.4em; }

p { margin: 0 0 1em; max-width: var(--measure); }
.lede { font-size: 1.15rem; line-height: 1.5; }
.step-label { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.4rem; }

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }

/* Focus is always visible, always the same color, on every interactive thing. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}


/* -----------------------------------------------------------------------------
   3. PAGE FRAME
   ----------------------------------------------------------------------------- */

/* Every top-level block shares the same width and horizontal padding. */
.site-header,
.footer-inner,
main > * {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

main > * { padding-top: 2.25rem; padding-bottom: 2.25rem; }
@media (min-width: 50em) {
  main > * { padding-top: 3.25rem; padding-bottom: 3.25rem; }
}

/* Skip link: hidden until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  z-index: 10;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 0.5rem); }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; }
/* The tagline is what keeps the campaign and the proposed body apart for the
   reader, so it travels with the name on every page. */
.brand-tagline { font-size: 0.85rem; color: var(--muted); }
.brand-mark { height: 2.5rem; width: auto; flex: none; }
.brand-mark .county { fill: var(--buff); stroke: var(--map-stroke); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.site-nav a {
  display: inline-block;
  padding: 0.65rem 0.75rem;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--rule); }
@media (max-width: 30em) { .site-nav a { padding-left: 0.5rem; padding-right: 0.5rem; } }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.footer-inner { padding-top: 2rem; padding-bottom: 2.5rem; }
.footer-inner p { margin-bottom: 0.5em; }
.footer-links { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-links a { color: var(--muted); display: inline-block; padding: 0.4rem 0; }


/* -----------------------------------------------------------------------------
   4. HOME PAGE
   ----------------------------------------------------------------------------- */
.hero { display: grid; gap: 2rem; }

/* The headline: two sentences, one per line. The number is the anchor of the
   whole page, set a step larger than the words beside it. It never breaks. */
.hero-headline {
  font-size: clamp(2rem, 1.1rem + 4.2vw, 3.4rem);
  line-height: 1.05;
  max-width: none;
  margin-bottom: 1.1rem;
}
.hero-line { display: block; }
.hero-line-number { white-space: nowrap; }
.hero-number {
  font-size: 1.4em;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}
.hero-deck { font-size: 1.0625rem; line-height: 1.55; max-width: var(--measure); }
.hero-source { color: var(--muted); font-size: 0.875rem; margin: 1rem 0 0; }
.hero-source a { color: var(--muted); }
.hero-map { max-width: 15rem; }
.hero-map .de-map { width: 100%; height: auto; display: block; }

@media (min-width: 50em) {
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: 3rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .hero-map { max-width: none; justify-self: center; }
  .hero-map .de-map { max-height: 24rem; }
}

.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.cta { margin: 1.5rem 0 0.6rem; }
.button-large { font-size: 1.05rem; padding: 0.85rem 1.4rem; min-height: 52px; }
.cta-support { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* County count. Laid out like a small table: a rule on top of each figure,
   the county drawn above its number, no boxes. */
.counts { border-top: 1px solid var(--rule); }
.count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}
.count-tile {
  border-top: 3px solid var(--accent);
  padding-top: 0.75rem;
  min-width: 0;
}
.count-tile-total { grid-column: 1 / -1; border-top-color: var(--rule); }
.count-tile dt { font-size: 0.95rem; color: var(--muted); margin: 0.5rem 0 0.15rem; }
.count-tile dd { margin: 0; }
.count-number {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  min-height: 1.1em; /* holds the space before the number arrives, without a spinner */
}
.count-letters, .count-first { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.35; }
.count-first { font-style: italic; }
.count-outside { margin: 1.25rem 0 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.count-outside-label { color: var(--muted); }
.count-outside-number { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.count-outside .count-letters, .count-outside .count-first { display: inline; margin-left: 0.4rem; }
.count-map { height: 4.25rem; width: auto; display: block; }
.count-map .county { fill: var(--paper-2); stroke: var(--map-stroke); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* The one county this tile is about is filled solid. */
.count-map[data-highlight="New Castle"] .county[data-county="New Castle"],
.count-map[data-highlight="Kent"] .county[data-county="Kent"],
.count-map[data-highlight="Sussex"] .county[data-county="Sussex"] { fill: var(--accent); }
.count-map[data-highlight="all"] .county { fill: var(--accent); }

@media (min-width: 50em) {
  .count-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .count-tile-total { grid-column: auto; }
}
.count-caption { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.25em; }
.count-status { color: var(--muted); font-size: 0.95rem; font-style: italic; min-height: 1.5em; margin: 0; }



/* Campaign tracker.
   Phones: a vertical list, date on the left, title and description always
   visible. Wide screens: a horizontal strip with a minimum gap between points;
   if the screen is narrower than that, the strip scrolls sideways with snap
   points instead of squeezing. Labels alternate above and below the rail.
   Meaning is carried by shape and words, never by color alone:
     solid dot = fixed by law, hollow dot = planned, check mark = done,
     ring + "You are here" = now. */
.tracker { border-top: 1px solid var(--rule); }
.tracker-countdown { font-weight: 600; margin: 0 0 1rem; min-height: 1.5em; }
.tracker-legend { list-style: none; padding: 0; margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; color: var(--muted); font-size: 0.9rem; }
.tracker-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.tracker-hint { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 0; display: none; }
.tracker-footnote { color: var(--muted); font-size: 0.95rem; margin: 1.5rem 0 0; }

/* The dot, shared by the legend and the milestones. */
.ms-dot {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--paper);          /* hollow = planned */
  box-sizing: border-box;
  position: relative;
  flex: none;
}
.ms-dot.is-fixed, [data-kind="fixed"] .ms-dot { background: var(--accent); }   /* solid = fixed by law */
.ms-dot.is-done::after, .is-done .ms-dot::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
[data-kind="fixed"].is-done .ms-dot::after { color: var(--accent-ink); }
.is-now .ms-dot { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus); }

/* ---- Phone layout (default): one row per milestone ---- */
.tracker-scroll { margin-top: 1.25rem; }
.tracker-strip { position: relative; }
.ms {
  display: grid;
  grid-template-columns: 1rem 5.75rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.ms.is-last { border-bottom: 1px solid var(--rule); }
.ms .ms-dot { grid-column: 1; grid-row: 1; margin-top: 0.3rem; }
.ms-when { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
.ms-button {
  grid-column: 3;
  grid-row: 1;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
}
.ms-short { display: none; }
.ms-title { display: block; font-weight: 600; line-height: 1.3; }
.ms-status { display: block; color: var(--focus); font-size: 0.85rem; font-weight: 700; margin-top: 0.15rem; }
.ms-status:empty { display: none; }
.ms.is-upcoming .ms-title { font-weight: 500; }
.ms-tip { grid-column: 3; grid-row: 2; margin-top: 0.3rem; }
.ms-tip p { margin: 0 0 0.35em; max-width: var(--measure); }
.ms-tip-title, .ms-tip-meta { display: none; }   /* redundant with the row on phones */

/* "You are here" on phones: a line between rows. */
.tracker-marker { position: relative; border-top: 2px solid var(--focus); margin: 0.25rem 0; }
.tracker-marker span { position: absolute; left: 0; top: -0.7rem; background: var(--paper); color: var(--focus); font-size: 0.8rem; font-weight: 700; padding-right: 0.4rem; }

/* ---- Wide layout: the strip ---- */
@media (min-width: 50em) {
  .tracker-hint { display: block; }
  .tracker-scroll { position: relative; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.25rem; }
  /* A soft fade at the right edge while there is more strip to scroll to. */
  .tracker-scroll.is-overflowing { mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
  .tracker-strip {
    /* rows: marker label | labels above | rail | labels below | tooltip zone */
    --row-marker: 1.6rem;
    --row-label: 5.5rem;
    --row-rail: 1.5rem;
    --row-tip: 13.5rem;
    --rail-y: calc(var(--row-marker) + var(--row-label) + var(--row-rail) / 2);
    display: flex;
    align-items: start;
    /* As wide as the container, or N times the minimum gap, whichever is larger. */
    --gap-min: 9rem;
    width: max(100%, calc(var(--n) * var(--gap-min)));
    padding-top: var(--row-marker);
    height: calc(var(--row-marker) + var(--row-label) * 2 + var(--row-rail) + var(--row-tip));
  }
  /* The rail, across the whole strip, through the dots. */
  .tracker-strip::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--rail-y) - 1px);
    height: 2px;
    background: var(--rule);
  }
  .ms {
    flex: 1 1 0;                    /* equal columns; the strip's width enforces the minimum gap */
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--row-label) var(--row-rail) var(--row-label);
    justify-items: center;
    column-gap: 0;
    padding: 0 0.3rem;
    border: 0;
    position: relative;
    scroll-snap-align: start;
  }
  .ms.is-last { border: 0; }
  .ms > * { grid-column: 1; }     /* the phone layout spreads parts over three columns; here there is one */
  .ms .ms-dot { grid-row: 2; align-self: center; margin: 0; }
  .ms-when { grid-row: auto; font-size: 0.78rem; text-align: center; line-height: 1.3; max-width: 100%; }
  .ms-button { grid-row: auto; width: auto; text-align: center; cursor: pointer; }
  .ms-short { display: block; font-weight: 600; font-size: 0.88rem; line-height: 1.25; }
  .ms-title { display: none; }
  .ms-status { font-size: 0.78rem; margin-top: 0.1rem; }
  /* The title always sits next to the rail. Above the rail: date, then title.
     Below the rail: title, then date. */
  .ms.is-above .ms-when   { grid-row: 1; align-self: start; padding-top: 0.5rem; }
  .ms.is-above .ms-button { grid-row: 1; align-self: end; padding-bottom: 0.4rem; }
  .ms.is-below .ms-button { grid-row: 3; align-self: start; padding-top: 0.4rem; }
  .ms.is-below .ms-when   { grid-row: 3; align-self: end; padding-bottom: 0.5rem; }
  .ms.is-upcoming .ms-short { color: var(--muted); font-weight: 500; }
  .ms-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

  /* The tooltip: in the zone under the strip, anchored to its dot's column. */
  .ms-tip {
    display: none;
    position: absolute;
    grid-area: auto;   /* the phone layout places it in a grid cell; here it floats free of the grid */
    /* Measured from the milestone's own top, which already sits below the marker row. */
    top: calc(var(--row-label) * 2 + var(--row-rail) + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    width: 17rem;
    background: var(--paper-2);
    border-left: 4px solid var(--accent);
    padding: 0.75rem 0.9rem;
    font-size: 0.92rem;
    line-height: 1.45;
    z-index: 2;
    margin: 0;
  }
  .ms-tip::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--paper-2);
    transform: translateX(-50%) rotate(45deg);
  }
  /* The first and last tooltips hug the strip's edges instead of centering. */
  .ms.is-first .ms-tip { left: 0; transform: none; }
  .ms.is-first .ms-tip::before { left: 4.5rem; }
  .ms.is-last .ms-tip { left: auto; right: 0; transform: none; }
  .ms.is-last .ms-tip::before { left: auto; right: 4rem; transform: rotate(45deg); }
  .ms-tip-title { display: block; font-weight: 600; margin-bottom: 0.15em; }
  .ms-tip-meta { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.4em; }
  /* Shown on hover, on keyboard focus, or when pinned open by a tap or Enter. */
  .ms:hover .ms-tip,
  .ms:focus-within .ms-tip,
  .ms.is-open .ms-tip { display: block; }

  /* "You are here" on the strip: a vertical line at today's position. */
  .tracker-marker {
    position: absolute;
    left: var(--marker-x, 0%);
    top: 0;
    height: var(--rail-y);
    border-top: 0;
    border-left: 2px solid var(--focus);
    margin: 0;
    transform: translateX(-1px);
  }
  .tracker-marker span { left: 0.35rem; top: 0; padding: 0 0.3rem; white-space: nowrap; }
  .tracker-marker.is-late span { left: auto; right: 0.35rem; }
  /* When today falls inside a milestone, the ring on its dot says "now"; the
     line stops short so it does not cut through that milestone's label. */
  .tracker-marker.is-on-milestone { height: calc(var(--row-marker) + 0.6rem); }
}


/* -----------------------------------------------------------------------------
   5. TAKE ACTION PAGE
   ----------------------------------------------------------------------------- */
.page-intro { padding-bottom: 0.5rem; }
/* A page whose intro is only a heading (About, Why) closes the gap under it. */
main > .page-intro:not(:has(.lede)), .page > .page-intro:not(:has(.lede)) { padding-bottom: 0; }
main > .page-intro:not(:has(.lede)) + *, .page > .page-intro:not(:has(.lede)) + * { padding-top: 1rem; }

.sign-form { max-width: var(--measure); padding-top: 1rem; }
.field { margin-bottom: 1.35rem; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.hint { color: var(--muted); font-size: 0.95rem; margin: -0.1rem 0 0.45rem; }
.hint-indent { margin: -0.6rem 0 1rem 2.1rem; }

input[type="text"], input[type="email"], select, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--muted);
  border-radius: 4px;
}
textarea { line-height: 1.5; resize: vertical; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M1 1l7 7 7-7' fill='none' stroke='%234e5566' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 30em) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field-zip { max-width: 10rem; }
}

fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.field-radios .radio, .field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
}
.field-radios .radio label, .field-check label { font-weight: 400; margin: 0; padding: 0.55rem 0; cursor: pointer; }
input[type="radio"], input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.7rem 0 0;
  flex: none;
  accent-color: var(--accent);
}

/* Inline messages under a field. Errors block; warnings do not. */
.field-error { color: var(--error); font-size: 0.95rem; font-weight: 600; margin: 0.35rem 0 0; }
.field-warning { color: var(--muted); font-size: 0.95rem; margin: 0.35rem 0 0; padding-left: 0.75rem; border-left: 3px solid var(--focus); }
.field-error[hidden], .field-warning[hidden] { display: none; }

.form-errors {
  border-left: 4px solid var(--error);
  background: var(--error-bg);
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
.form-errors p { font-weight: 600; margin-bottom: 0.4em; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors a { color: inherit; }

.form-notice, .form-success {
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  max-width: var(--measure);
}
.form-success p { margin: 0; }

.fine-print { color: var(--muted); font-size: 0.95rem; margin-top: 1rem; }

/* Honeypot field: off screen for people, present for bots. */
.honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The letter section is a real sequence, so it is numbered. */
.letter { border-top: 1px solid var(--rule); }
.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; max-width: var(--measure); }
.steps > li { position: relative; padding-left: 3rem; margin-bottom: 2rem; }
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 1rem;
  display: grid;
  place-items: center;
}
.steps .button-row { margin-top: 0.75rem; }


/* -----------------------------------------------------------------------------
   5b. APPLY PAGE AND PROSE PAGES
   ----------------------------------------------------------------------------- */
.page-meta { color: var(--muted); font-size: 0.95rem; margin: -0.25rem 0 1rem; }

/* Prose pages: policy pages and any other text-only page. */
.prose { max-width: var(--measure); }
.prose section { margin-bottom: 2rem; }
.prose h2 { font-size: 1.35rem; margin-bottom: 0.5em; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.4em; }

/* A sentence that must be read, in a box, at full size. */
.callout {
  border-left: 4px solid var(--accent);
  background: var(--paper-2);
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  max-width: var(--measure);
}

/* Apply page: two tracks, then the interest field. */
main > .apply-tracks, .page > .apply-tracks { padding-top: 0; }
.apply-track { border-top: 1px solid var(--rule); padding: 2rem 0 1rem; }
.apply-track h2 { margin-bottom: 0.75em; }
.track-audience { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.25rem; }
.track-dates { font-weight: 600; margin-top: 0.5rem; }
.track-action { margin: 1rem 0 0.5rem; }
.track-status { color: var(--muted); border-left: 3px solid var(--rule); padding-left: 0.75rem; }
.track-status[hidden] { display: none; }
.interest { border-top: 1px solid var(--rule); }
.interest-form { max-width: var(--measure); }
.apply-closing { color: var(--muted); font-size: 0.95rem; padding-top: 0 !important; }
.tracker-footnote { color: var(--muted); font-size: 0.95rem; margin: 1.5rem 0 0; }

/* About page. */
.contact-list { margin: 0 0 1em; }
.contact-list div { margin-bottom: 0.6rem; }
.contact-list dt { font-weight: 600; display: inline; }
.contact-list dd { display: inline; margin: 0 0 0 0.35rem; color: var(--muted); }
.founder { display: grid; gap: 1.25rem; align-items: start; }
/* Narrow screens: the photo sits above the bio at 200px. Wide: beside it at 240px.
   Without a photo (or if it fails to load) the grid is one column and nothing is left behind. */
.founder-photo { width: 200px; height: auto; border-radius: 4px; display: block; }
@media (min-width: 40em) {
  .founder.has-photo { grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem; }
  .founder-photo { width: 240px; }
}
.contact-address { font-weight: 600; margin-bottom: 0.25em; }
.founder-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.5em; }
.founder-role { color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: 0.95rem; margin-left: 0.6rem; }
.founder-text h3 { margin-top: 1.25rem; }
.founder-reach { color: var(--muted); }
.about-figure { margin: 1.5rem 0 0; max-width: var(--measure); }
.about-figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
.about-figure figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.about-closing, .apply-closing { color: var(--muted); font-size: 0.95rem; }
main > .about-closing, .page > .about-closing { padding-top: 0; }

/* Why page. */
.why ul { padding-left: 1.1rem; }
.why li { margin-bottom: 0.7em; }
.why-ask .button-row { margin-top: 0.5rem; }
.sources { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.sources ol { padding-left: 1.25rem; font-size: 0.9rem; color: var(--muted); }
.sources li { margin-bottom: 0.5em; }
.sources a { word-break: break-all; }


/* -----------------------------------------------------------------------------
   6. SHARED PIECES
   ----------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.button-secondary { background: transparent; color: var(--accent); }
.button-secondary:hover { background: var(--paper-2); color: var(--accent-hover); }
.button[aria-disabled="true"], .button:disabled { opacity: 0.55; cursor: not-allowed; }

/* The county map. Counties share one fill and one stroke: they are equals. */
.de-map .county { fill: var(--buff); stroke: var(--map-stroke); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.de-map .county-labels text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink);
}

/* Text we do not have yet. Loud on purpose so it never ships unnoticed. */
mark.placeholder {
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

/* Links to pages that are planned but not built yet (preview builds only). */
a.unbuilt::after { content: " (page not built yet)"; color: var(--muted); font-size: 0.85em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}