/* Deliberately plain. Legibility over personality — this is civic
   information, and it has to read as trustworthy on a phone in a parking
   lot. No framework, no build step. */

:root {
  /* Tells the browser we handle both, so it renders form controls and
     scrollbars to match instead of forcing its own dark treatment over
     our light palette. */
  color-scheme: light dark;

  --ink: #14181d;
  --ink-soft: #4a5560;
  --line: #d8dee5;
  --bg: #ffffff;
  --bg-soft: #f5f7f9;
  --accent: #1a5f7a;
  --warn: #8a5a00;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0f4f8;
    --ink-soft: #b9c6d2;   /* raised for contrast on the dark surface */
    --line: #333c46;
    --bg: #12161a;
    --bg-soft: #1a2027;
    --accent: #8ecae6;     /* brighter: the old accent failed on dark */
    --warn: #e8b866;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 1.25rem; }

/* Home link, top and bottom. Top: to the right of the H1, on the same
   row. Bottom: repeated above the footer so it's reachable without
   scrolling back up — same treatment as .option-note earlier in this
   file's history, nothing here depends on help mode either. */
.site-nav {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
}
.site-nav h1 { margin-top: 0; }
.home-link {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; color: var(--ink-soft); text-decoration: none;
  font-size: .85rem; font-weight: 600;
}
.home-link:hover { color: var(--accent); }
.home-link img { border-radius: 6px; display: block; }
/* margin-top only — a shorthand here would reset .wrap's margin:0 auto
   left/right to 0, pinning this to the browser's left edge instead of
   staying centered with the rest of the page. Exactly what happened the
   first time this was written. */
.home-link-bottom { margin-top: 2rem; }

h1 { font-size: 1.9rem; margin: 1.5rem 0 .25rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; }

.lede { color: var(--ink-soft); margin: 0 0 1rem; font-size: 1.05rem; }
.note { color: var(--ink-soft); font-size: .92rem; margin: 1em 0; }
.note .unsourced { display: block; margin-top: .6rem; }
.meta { color: var(--ink-soft); font-size: .85rem; margin: .5rem 0 1rem; }

select {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cards { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
}
.card p { margin: 0 0 .5rem; }
.card button { margin-top: auto; }
button[data-action] { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }

button {
  font: inherit;
  padding: .6rem 1rem;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
/* Disabled buttons drop the accent entirely rather than fading it — a
   washed-out blue still reads as "clickable, just dim".

   Match on :disabled, not [disabled]. The buttons are toggled in JS with
   `b.disabled = ...`, which sets the DOM property; the attribute selector
   depends on that being reflected back into markup, and Firefox rendered
   one of a pair with the enabled style because of it. :disabled matches
   the state itself. The .card prefix raises specificity above
   `.card button` so the accent can't win on source order. */
.card button:disabled,
button:disabled,
button[disabled] {
  opacity: 1;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: not-allowed;
  filter: none;
}
.card button:disabled:hover,
button:disabled:hover,
button:disabled:focus {
  filter: none;
  background: var(--bg);
  color: var(--ink-soft);
}

button:not(:disabled):hover { filter: brightness(1.1); }

/* Used wherever a fact is missing rather than guessed. */
.unsourced {
  border-left: 3px solid var(--warn);
  padding: .6rem .8rem;
  background: var(--bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* A verified option worth surfacing in the letter output — same box
   language as .info-panel, but deliberately NOT that class. .info-panel
   is help-mode-only content (hidden by the rule below, and hard-hidden
   again on every help-mode-off toggle so manually-opened disclosures
   don't silently reappear pre-opened). This is a fact about the request,
   not an optional explainer, so it has to survive both mechanisms. */
.option-note {
  margin: 0 0 1rem; padding: .9rem 1rem;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  font-size: .95rem; max-width: 44rem;
}

/* Same "must survive help mode" requirement as .option-note above, for
   the same reason — this is state about the current visit, not optional
   explanatory content, so it can't be tied to the help-mode mechanism at
   all. JS toggles the hidden attribute directly; the #test-mode-banner[hidden]
   rule below is required despite that — an ID selector's own `display`
   otherwise outranks the UA stylesheet's [hidden] { display: none }, so
   without it the banner stayed visually shown even with hidden="" set. */
#test-mode-banner[hidden] { display: none; }
#test-mode-banner {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .6rem 1rem;
  background: var(--warn); color: var(--bg);
  font-size: .9rem; font-weight: 600;
}
#test-mode-banner button {
  font: inherit; font-weight: 700; padding: .2rem .6rem;
  color: var(--warn); background: var(--bg);
  border: 0; border-radius: var(--radius); cursor: pointer;
}

footer { border-top: 1px solid var(--line); margin-top: 3rem; color: var(--ink-soft); font-size: .9rem; }
footer a { color: var(--accent); }

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

.contact { display: grid; grid-template-columns: max-content 1fr; gap: .45rem .9rem; margin: 1rem 0; }
/* Labels stay quieter than values, but must still clear contrast on the
   dark surface — the old --ink-soft was too dim here. */
.contact dt { color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
.contact dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.contact a { color: var(--accent); }
#output { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }

form p { margin: 0 0 1.2rem; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
/* Every text-entry control, not just type="text" — the email field was
   falling through to browser defaults, which is why its placeholder sat
   outside the box. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input:not([type]),
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

::placeholder { color: var(--ink-soft); opacity: 1; }
textarea { resize: vertical; line-height: 1.5; }
.hint { display: block; margin-top: .4rem; color: var(--ink-soft); font-size: .88rem; }
#draft { margin-top: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; }
#records-form { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }

.btn-secondary {
  display: inline-block; font: inherit; padding: .6rem 1rem;
  color: var(--accent); background: transparent;
  border: 1px solid var(--accent); border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { background: var(--bg-soft); }
#sharpen-block { margin: 1.5rem 0; padding: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
#sharpen-block p:last-child { margin-bottom: 0; }

/* Circled "i" disclosure on the card headings. */
.info-toggle {
  width: 1.4em; height: 1.4em; padding: 0; margin-left: .4em;
  font-size: .8em; font-weight: 700; line-height: 1;
  font-family: Georgia, serif; font-style: italic;
  color: var(--accent); background: transparent;
  border: 1.5px solid var(--accent); border-radius: 50%;
  cursor: pointer; vertical-align: middle;
}
.info-toggle:hover, .info-toggle:focus-visible { color: var(--bg); background: var(--accent); }
.info-toggle[aria-expanded="true"] { color: var(--bg); background: var(--accent); }

.info-panel {
  margin: 0 0 1rem; padding: .9rem 1rem;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  font-size: .95rem;
}
.info-panel p { margin: 0 0 .7rem; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.info-panel li { margin-bottom: .35rem; }
.info-caveat { color: var(--ink-soft); font-size: .9rem; }

/* Info panels sit below the card grid, full width. Keeping them out of
   the grid is what stops an open panel from stretching its row and
   dragging the neighbouring card's button down with it. */
.info-panel { max-width: 44rem; margin: 0 auto 1rem; }
.info-title { margin: 0 0 .7rem; font-size: 1rem; }

.apply { margin: 1rem 0 .25rem; }
.apply .btn-secondary { font-weight: 600; }

/* Filter box above the county select. The native <select> stays — on a
   phone it opens the OS picker, which beats any custom listbox. */
#county-filter { margin-bottom: .5rem; }
input[type="search"] {
  display: block; width: 100%; padding: .7rem .8rem; font: inherit;
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
}
#filter-status { min-height: 1.2em; margin-top: .35rem; }

/* Masthead mission panel and inline field help reuse .info-panel. */
h1 .info-toggle { font-size: .5em; vertical-align: middle; }
label .info-toggle { font-size: .85em; font-weight: 700; }
h2 .info-toggle { font-size: .7em; }
/* vertical-align: middle centers against the x-height, which sits below
   numerals like "119" — nudge up so it reads centered on digits too. */
p > .info-toggle { position: relative; top: -.15em; }

.info-inline {
  margin: .5rem 0 .75rem;
  background: var(--bg-soft);
  font-size: .92rem;
}
.info-inline ul { margin: .4rem 0 .6rem; padding-left: 1.15rem; }
.info-inline li { margin-bottom: .25rem; }
.eg { border-left: 2px solid var(--line); padding-left: .7rem; margin: .4rem 0; }

/* "Help build this" — contribution routes, no account required. */
#help-build { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.help-grid { display: grid; gap: 1rem; margin: 1rem 0; }
@media (min-width: 40rem) { .help-grid { grid-template-columns: 1fr 1fr; } }
.help-item {
  padding: .9rem 1rem; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.help-item h3 { font-size: .98rem; margin: 0 0 .4rem; }
.help-item p { margin: 0; font-size: .93rem; }
.help-item a { color: var(--accent); }

/* Topic starter picker inside the records form. */
#topic-picker { margin: 0 0 1.5rem; }
#topic-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.topic-btn { font-size: .92rem; padding: .5rem .85rem; }
.topic-btn[aria-pressed="true"] { background: var(--accent); color: var(--bg); }
#topic-result { margin-top: .75rem; }

/* "Help build this" collapses behind its own heading. */
#help-build-h { margin: 0; }
#help-build-toggle {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: 0; margin: 2rem 0 .5rem;
  font: inherit; font-weight: 700; font-size: 1.15rem;
  color: var(--ink); background: transparent; border: 0;
  cursor: pointer; text-align: left;
}
#help-build-toggle:hover { color: var(--accent); }
.chevron {
  width: .6em; height: .6em; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
button[aria-expanded="true"] .chevron { transform: rotate(-135deg); }
#help-build-body { margin-top: 1rem; }

/* Help mode: one attribute on <html>, everything else obeys it.
   Off hides every current AND future .info-toggle / .info-panel — no
   per-element wiring needed as help content grows. */
[data-help-mode="off"] .info-toggle,
[data-help-mode="off"] .info-panel,
[data-help-mode="off"] .help-only {
  display: none;
}

.mode-switch {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem .75rem; margin: 1rem 0 0;
}
.mode-switch label {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; font-weight: 600; cursor: pointer;
}
.mode-switch input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.switch-track {
  width: 2.5rem; height: 1.4rem; flex: none; position: relative;
  background: var(--line); border-radius: 1rem;
  transition: background .15s ease;
}
.switch-thumb {
  position: absolute; top: .15rem; left: .15rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .15s ease;
}
.mode-switch input:checked + .switch-track { background: var(--accent); }
.mode-switch input:checked + .switch-track .switch-thumb { transform: translateX(1.1rem); }
.mode-switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-switch .hint { margin: 0; }

/* The header→main seam stacks header's bottom padding + main's top
   padding + h2's own top margin, so it reads bigger than the gaps
   between other sections. Zero just this heading's own margin to bring
   it back in line — .wrap's padding alone is enough here. */
#county-h { margin-top: 0; }

/* ---- Florida mark in the header ---------------------------------------
   The state outline, drawn in currentColor so it themes with the page
   rather than shipping a light and a dark image. Decorative: the header
   already says Florida in words. */
.state-mark {
  color: var(--accent);
  margin: .25rem 0 1rem;
}
.state-mark svg {
  width: 96px;
  height: auto;
  display: block;
}

/* ---- Other organisations ---------------------------------------------- */
.res-h {
  font-size: .95rem;
  margin: 1.4rem 0 .5rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li {
  padding: .7rem 0;
  border-top: 1px solid var(--line);
}
.res-list li:last-child { border-bottom: 1px solid var(--line); }
.res-list a { color: var(--accent); font-weight: 600; }
.res-list span {
  display: block;
  color: var(--ink-soft);
  font-size: .92rem;
  margin-top: .2rem;
}