/* ------------------------------------------------------------------
   Code Explorer - one stylesheet for the resident page and the staff app.

   Identity: the municipal code itself. Section numbers are the structural
   device (they are the citation, which is the point of the product), set in
   a mono face like a codification index. Ink on cool paper, one civic
   verdigris accent, nothing rounded that does not need to be.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;
  --paper: #f5f6f3;
  --surface: #ffffff;
  --surface-2: #eef0ec;
  --ink: #17202b;
  --ink-2: #3a4451;
  --muted: #5f6873;
  --faint: #8b939c;
  --rule: #d9dcd6;
  --rule-strong: #b9bfb7;
  --accent: #1e6e5b;
  --accent-ink: #0f4a3c;
  --accent-soft: #e2efe9;
  --accent-line: #9fc9ba;
  --good: #2e7d4f;
  --good-soft: #e3f1e8;
  --warn: #8f5400;
  --warn-soft: #fbf0dc;
  --bad: #b3261e;
  --bad-soft: #fbe8e6;
  --focus: #1e6e5b;
  --shadow: 0 1px 2px rgba(23, 32, 43, 0.06), 0 8px 24px -12px rgba(23, 32, 43, 0.18);
  --font-display: "Bricolage Grotesque", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #10161d;
    --surface: #171f28;
    --surface-2: #1f2933;
    --ink: #e6e9e4;
    --ink-2: #c2c8c4;
    --muted: #98a2ac;
    --faint: #6f7a85;
    --rule: #273240;
    --rule-strong: #384552;
    --accent: #5dbfa3;
    --accent-ink: #8ad8c1;
    --accent-soft: #16302a;
    --accent-line: #2f6b5b;
    --good: #6cc38f;
    --good-soft: #17301f;
    --warn: #e0a542;
    --warn-soft: #2e2410;
    --bad: #f08a80;
    --bad-soft: #33191a;
    --focus: #5dbfa3;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #10161d;
  --surface: #171f28;
  --surface-2: #1f2933;
  --ink: #e6e9e4;
  --ink-2: #c2c8c4;
  --muted: #98a2ac;
  --faint: #6f7a85;
  --rule: #273240;
  --rule-strong: #384552;
  --accent: #5dbfa3;
  --accent-ink: #8ad8c1;
  --accent-soft: #16302a;
  --accent-line: #2f6b5b;
  --good: #6cc38f;
  --good-soft: #17301f;
  --warn: #e0a542;
  --warn-soft: #2e2410;
  --bad: #f08a80;
  --bad-soft: #33191a;
  --focus: #5dbfa3;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  font-feature-settings: "kern", "liga";
}
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); font-weight: 600; line-height: 1.05; }
h2 { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.eyebrow {
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.stack > * + * { margin-top: var(--gap, 1rem); }
.hidden, [hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem; border-radius: 4px; cursor: pointer;
  font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--accent-ink); background: var(--accent); color: #fff;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:hover { background: var(--accent-ink); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.btn.secondary:hover { border-color: var(--ink-2); background: var(--surface); color: var(--ink); }
.btn.danger { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn.small { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
.btn.quiet { background: none; border-color: transparent; color: var(--accent-ink); padding-inline: 0.4rem; }
.btn.quiet:hover { background: var(--accent-soft); color: var(--accent-ink); }

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

.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 0.8rem; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; padding: 0.62rem 0.8rem; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--rule-strong); color: var(--ink);
}
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.textarea { min-height: 6rem; resize: vertical; }
.select { appearance: auto; }
.form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; }
.form-row .field { flex: 1 1 14rem; }
.form-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------- notices */

.notice {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.8rem 1rem; border-radius: 4px; border: 1px solid var(--rule);
  background: var(--surface-2); font-size: 0.95rem;
}
.notice strong { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
/* A city's notice can run to a paragraph and a button. On a phone the
   label-beside-text layout left the text half a screen wide and spilling
   past the box; it stacks instead, and the button gets its own line. */
.notice .notice-action { display: block; margin-top: 0.6rem; }
@media (max-width: 600px) {
  .notice.tenant-notice { display: block; }
  .notice.tenant-notice strong { display: block; white-space: normal; margin-bottom: 0.4rem; }
}
.notice.stop { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.notice.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.good { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.notice.info { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }

/* ================================================================
   RESIDENT PAGE
   ================================================================ */

.public {
  --gutter: clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh;
}
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem var(--gutter); border-bottom: 1px solid var(--rule);
}
.masthead .city { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.masthead .city .name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.masthead .city .sep { color: var(--rule-strong); }
.masthead a.staff { font-size: 0.85rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.masthead a.staff:hover { color: var(--accent-ink); text-decoration: underline; }

.ask-main { padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) 4rem; width: min(100%, 52rem); margin: 0 auto; }
.ask-hero { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.ask-hero .lede { color: var(--muted); font-size: 1.08rem; max-width: var(--measure); text-wrap: pretty; }

.askbar {
  display: flex; gap: 0; align-items: stretch;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px;
  box-shadow: var(--shadow);
}
.askbar:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: -1px; }
.askbar input {
  flex: 1 1 auto; min-width: 0; padding: 1rem 1.1rem; border: 0; background: transparent; font-size: 1.08rem;
}
.askbar input:focus { outline: none; }
.askbar input::placeholder { color: var(--faint); }
.askbar button { margin: 0.4rem; border-radius: 4px; }
/* Narrow: the Turnstile box otherwise shares the row and leaves the input
   about 200px - "Can I keep chickens in my". It drops below instead. */
@media (max-width: 600px) {
  .askbar { flex-wrap: wrap; }
  .askbar .cf-turnstile { flex: 1 1 100%; margin: 0 0.4rem 0.4rem; }
}

.examples { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.9rem; }
.examples .label { font-size: 0.8rem; color: var(--muted); margin-right: 0.2rem; }
.chip {
  font-size: 0.86rem; padding: 0.35rem 0.7rem; cursor: pointer;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px;
  transition: border-color 120ms ease, color 120ms ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------- transcript

   Once a conversation starts the page turns from a hero with a search box
   into a transcript with a composer beneath it: turns stack downwards, newest
   last, the way anyone who has used a chat window expects.

   Each turn stays an annotated page rather than becoming a bubble. The rail of
   cited sections is the whole promise of this product - "every answer names
   the sections it rests on" - and it survives stacking perfectly well. */
.composer { display: grid; gap: 0.5rem; }
.composer-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; padding: 0 0.15rem; }
.composer-bar .hint { font-size: 0.82rem; color: var(--muted); }

.ask-main.chatting .ask-hero,
.ask-main.chatting .examples { display: none; }
.ask-main.chatting #out { margin-top: 0; }

/* Sticky, not fixed: the composer holds its place in the flow, so it can never
   cover the last answer, and it stops travelling at the end of the transcript
   instead of floating over the footer. */
.ask-main.chatting .composer {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 2rem;
  /* A solid backdrop across the WHOLE composer, the new-chat row included.
     A gradient alone left the answer legible straight through the bar. */
  padding: 0.85rem 0 max(0.85rem, env(safe-area-inset-bottom, 0px));
  background: var(--paper);
}
/* Text fades out as it passes under the composer rather than being cut off. */
.ask-main.chatting .composer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1.75rem; height: 1.75rem;
  background: linear-gradient(to top, var(--paper), transparent); pointer-events: none;
}

/* The question is on the page before the answer is. */
.answer-doc.pending .thinking { padding-bottom: 0.4rem; }
.ask-main.chatting .answer-doc + .answer-doc { margin-top: 2.5rem; }

.thread-end {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: 0.86rem; color: var(--muted);
}

/* The answer: set like an annotated page. Body on the left, the cited
   sections in a rail on the right, like margin notes in a code book. */
#out { margin-top: 2.25rem; }
.thinking { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); padding: 1.2rem 0; }
.thinking .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

.answer-doc {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem;
  border-top: 2px solid var(--ink); padding-top: 1.4rem;
  animation: rise 240ms ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 860px) {
  .answer-doc.has-rail { grid-template-columns: minmax(0, 1fr) 15rem; }
}
.answer-doc .question { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink-2); margin-bottom: 1rem; text-wrap: pretty; }
.answer-body { max-width: var(--measure); font-size: 1.04rem; line-height: 1.62; }
.answer-body p { margin: 0 0 0.95rem; }
.answer-body ul, .answer-body ol { margin: 0 0 0.95rem; padding-left: 1.3rem; }
.answer-body li { margin-bottom: 0.35rem; }
.answer-body li::marker { color: var(--accent); }
.answer-body strong { font-weight: 650; }
.answer-body em { font-style: italic; }
.answer-body code { font-size: 0.9em; background: var(--surface-2); padding: 0.05em 0.35em; border-radius: 3px; }
.answer-body blockquote { margin: 0 0 0.95rem; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--accent-line); color: var(--ink-2); }
.answer-body .sec {
  font-family: var(--font-mono); font-size: 0.86em; color: var(--accent-ink);
  background: var(--accent-soft); padding: 0.05em 0.4em; border-radius: 3px; white-space: nowrap;
  text-decoration: none;
}
.answer-body .sec:hover { text-decoration: underline; }
.caution {
  margin-top: 1.1rem; padding: 0.7rem 0.9rem; font-size: 0.92rem;
  background: var(--warn-soft); color: var(--warn); border-left: 3px solid var(--warn); border-radius: 0 4px 4px 0;
}

.rail { font-size: 0.9rem; }
.rail h2 { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rail li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.rail .n { font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-ink); padding-top: 0.1rem; }
.rail .n.orphan { color: var(--bad); }
.rail a { color: var(--ink-2); text-decoration: none; }
.rail a:hover { color: var(--accent-ink); text-decoration: underline; }
.rail .also { margin-top: 1rem; }
.rail .also summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; }
.rail .also ol { margin-top: 0.5rem; }
.rail .also .n { color: var(--faint); }

.answer-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem 1.5rem;
  margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 0.86rem; color: var(--muted);
}
.feedback { display: flex; align-items: center; gap: 0.5rem; }
.feedback .btn.small { border-radius: 999px; }
.feedback .thanks { color: var(--good); }
/* A follow-up was rewritten to stand on its own before it was answered. Shown
   because a resident who asked "what about ducks?" should be able to see what
   the page understood, and correct it if that is not what they meant. */
.read-as { margin: -0.6rem 0 1rem; font-size: 0.84rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.read-as .label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; color: var(--faint); }

.linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 0.82rem; color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.linkish:hover { color: var(--accent); }

/* The thread table on a staff question page marks the row you are reading. */
.table tr.here > td { background: var(--tint, rgba(0,0,0,.03)); }

.followups { grid-column: 1 / -1; }
.followups h2 { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.followups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.followups button { background: none; border: 0; padding: 0.15rem 0; color: var(--accent-ink); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.followups button:hover { color: var(--accent); }

.form-note { margin-top: 0.85rem; font-size: 0.84rem; }

.public-foot {
  padding: 1.25rem var(--gutter) 2rem; border-top: 1px solid var(--rule);
  font-size: 0.84rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
}

/* Compact variant for the embeddable widget */
.widget .masthead { padding: 0.75rem 1rem; }
.widget .ask-main { padding: 1.25rem 1rem 2rem; }
.widget h1 { font-size: 1.5rem; }
.widget .ask-hero { margin-bottom: 1rem; }
.widget .answer-doc.has-rail { grid-template-columns: minmax(0, 1fr); }
.widget .askbar input { padding: 0.8rem 0.9rem; font-size: 1rem; }

/* ================================================================
   CITY INDEX (platform landing)
   ================================================================ */

.index-main { padding: clamp(2rem, 6vw, 4rem) var(--gutter); width: min(100%, 60rem); margin: 0 auto; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.city-card {
  display: grid; gap: 0.5rem; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; transition: border-color 120ms ease;
}
.city-card:hover { border-color: var(--accent); color: inherit; }
.city-card .name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.city-card .meta { font-size: 0.85rem; color: var(--muted); }

/* ================================================================
   AUTH
   ================================================================ */

.auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(100%, 24rem); display: grid; gap: 1.25rem; padding: 2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.6rem; }

/* ================================================================
   STAFF APP
   ================================================================ */

.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 800px) { .app { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static !important; height: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--rule); } }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem;
  padding: 1.25rem 1rem; border-right: 1px solid var(--rule); background: var(--surface);
}
.sidebar-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.sidebar .brand { display: grid; gap: 0.2rem; text-decoration: none; color: inherit; }
.menu-toggle { display: none; padding: 0.45rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 0.9rem; cursor: pointer; }
@media (max-width: 800px) {
  .menu-toggle { display: inline-block; }
  html.js .sidebar:not(.open) .nav, html.js .sidebar:not(.open) .who { display: none; }
  .sidebar { gap: 0.75rem; padding: 0.9rem 1rem; }
}
.sidebar .brand .city { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.sidebar .brand .platform { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.nav { display: grid; gap: 0.15rem; align-content: start; }
.nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: 4px; text-decoration: none; color: var(--ink-2); font-size: 0.95rem;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav .group { margin-top: 0.75rem; padding: 0 0.7rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sidebar .who { display: grid; gap: 0.4rem; font-size: 0.84rem; color: var(--muted); padding-top: 1rem; border-top: 1px solid var(--rule); }
.sidebar .who .email { color: var(--ink-2); overflow-wrap: anywhere; }
.sidebar .who form { display: inline; }
.sidebar .who button { background: none; border: 0; padding: 0; color: var(--accent-ink); cursor: pointer; text-decoration: underline; }
.sidebar .who .help .addr { overflow-wrap: anywhere; }

.content { padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 4rem; width: min(100%, 74rem); }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.75rem; }
.page-head .sub { color: var(--muted); margin-top: 0.3rem; }
.section { margin-top: 2.25rem; }
.section > h2 { margin-bottom: 0.9rem; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.flash { margin-bottom: 1.25rem; }

/* Stat tiles: summary before detail. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.tile { display: grid; gap: 0.3rem; padding: 0.95rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; position: relative; }
.tile .k { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tile .v { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .d { font-size: 0.82rem; color: var(--muted); }
.tile .spark { margin-top: 0.4rem; }
.tile.canary::before { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 3px; border-radius: 0 2px 2px 0; background: var(--good); }
.tile.canary.warn::before { background: var(--warn); }
.tile.canary.bad::before { background: var(--bad); }
.tile.canary.warn .v { color: var(--warn); }
.tile.canary.bad .v { color: var(--bad); }

/* Pills encode state in form, not only in words. */
.pill { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.pill.good { color: var(--good); background: var(--good-soft); border-color: transparent; }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.pill.bad { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.pill.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.8rem; border-top: 1px solid var(--rule); vertical-align: top; }
.table thead th { border-top: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.table td.r, .table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.table td.mono { font-family: var(--font-mono); font-size: 0.84rem; }
.table tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.table .q { max-width: 34rem; }
.table .q a { color: inherit; text-decoration: none; }
.table .q a:hover { color: var(--accent-ink); text-decoration: underline; }
.table .empty td { text-align: center; color: var(--muted); padding: 2rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filters a { font-size: 0.86rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; background: var(--surface); }
.filters a:hover { border-color: var(--accent); }
.filters a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager { display: flex; gap: 0.6rem; margin-top: 1rem; }

/* Definition lists for status pages */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.5rem; font-size: 0.94rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.card { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.card + .card { margin-top: 1rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }

/* Question detail */
.qa { display: grid; gap: 1.25rem; max-width: 50rem; }
.qa .question { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; text-wrap: pretty; }
.qa .answer-body { font-size: 1rem; }
.qa .facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.86rem; color: var(--muted); }

/* Charts */
.chart { display: grid; gap: 0.4rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .legend { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted); }
.chart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.spark { display: block; width: 100%; height: 34px; }

/* Code blocks (embed snippet) */
pre.snippet {
  margin: 0; padding: 1rem 1.1rem; overflow-x: auto; background: var(--ink); color: var(--paper);
  border-radius: 6px; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.55;
}
:root[data-theme="dark"] pre.snippet, :root:not([data-theme="light"]) pre.snippet { background: var(--surface-2); color: var(--ink); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) pre.snippet { background: var(--ink); color: var(--paper); } }

/* Job log */
pre.log { margin: 0; padding: 0.9rem 1rem; max-height: 22rem; overflow: auto; background: var(--surface-2); border-radius: 6px; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; }
.origin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.origin-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; background: var(--surface-2); border-radius: 4px; }

/* ================================================================
   LANDING (/)  -  the page a city manager lands on from an email.
   Same tokens, same type, same ask box as the resident page: a
   prospect who clicks through to /t/{slug} should feel no seam.
   ================================================================ */

.landing .masthead .brand-link { color: inherit; text-decoration: none; }
.landing .masthead .brand-link:hover { color: var(--accent-ink); }
.landing-nav { display: flex; gap: 1.25rem; align-items: center; }
.landing-nav a { font-size: 0.88rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.landing-nav a:hover { color: var(--accent-ink); text-decoration: underline; }

.landing-main { width: min(100%, 52rem); margin: 0 auto; padding: 0 var(--gutter) 4rem; }
.landing-hero { padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: 1rem; }
.landing-hero .ask-hero { margin-bottom: 1.5rem; }
.landing-hero h1 { max-width: 20ch; }
.demo-note { font-size: 0.84rem; margin-top: 0.6rem; }

.landing-section { padding-top: clamp(2.5rem, 6vw, 4rem); }
.landing-section > h2 { font-size: clamp(1.45rem, 1rem + 1.6vw, 1.9rem); margin-bottom: 1.1rem; max-width: 26ch; }
.landing-section .eyebrow { display: block; margin-bottom: 0.5rem; }
.landing-section p { text-wrap: pretty; }
.landing-fine { font-size: 0.9rem; margin-top: 1rem; }
.landing-notice { margin-top: 1.5rem; }

/* The problem, in three beats set side by side like index cards. */
.beats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.beat { padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; border-top: 2px solid var(--ink); }
.beat p { font-size: 1rem; color: var(--ink-2); }

/* How it works: numbered like the code it reads. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.steps .step-n { font-size: 0.88rem; color: var(--accent-ink); background: var(--accent-soft); padding: 0.2rem 0.5rem; border-radius: 3px; text-align: center; margin-top: 0.15rem; }
.steps h3 { margin-bottom: 0.25rem; }
.steps p { color: var(--ink-2); max-width: var(--measure); }

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; max-width: var(--measure); }
.features li { padding-left: 1.1rem; position: relative; color: var(--ink-2); }
.features li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 0.45rem; border-radius: 1px; background: var(--accent); }
.features strong { color: var(--ink); font-weight: 650; }

.offer { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); }
.offer h2 { margin-bottom: 1.25rem; }
.offer .features { margin-bottom: 1.5rem; }

.faq { display: grid; gap: 0.5rem; max-width: var(--measure); }
.faq details { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); padding: 0.85rem 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); font-size: 1.02rem; }
.faq summary::marker { color: var(--accent); }
.faq details[open] summary { margin-bottom: 0.5rem; }
.faq p { color: var(--ink-2); }

.pilot-form { display: grid; gap: 1rem; max-width: 40rem; margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.pilot-form .form-actions { margin-top: 0.25rem; gap: 1rem; }
.pilot-form .form-actions .muted { font-size: 0.9rem; }
/* Honeypot: off-screen for people, present for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Landing, second pass: a label on the box, a quiet path to the pilot from
   the fold, and a masthead that does not fight the nav on a phone. */
.demo-label { font-size: 0.84rem; color: var(--muted); margin: -0.5rem 0 0.6rem; }
.fold-cta { margin-top: 1.1rem; font-size: 0.95rem; }
.fold-cta a { font-weight: 600; text-decoration: none; }
.fold-cta a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .landing .masthead .tagline { display: none; }
}

/* Long-form text pages: the privacy page. */
.prose { width: min(100%, 44rem); }
.prose h1 { margin-top: .35rem; }
.prose h2 { margin: 2rem 0 .6rem; font-size: 1.2rem; }
.prose p { margin: 0 0 .9rem; line-height: 1.6; max-width: var(--measure); }