/* ThinkBallot mock — "civic editorial": modern print voter-guide.
   Paper + ink + California-poppy accent (deliberately neither red nor blue). */

:root {
  --paper: #f7f1e6;
  --paper-deep: #efe6d4;
  --ink: #201c16;
  --ink-soft: #5c5245;
  --poppy: #d96f1e;
  --poppy-deep: #a64d0a; /* 4.5:1 or better as text on paper, paper-deep and the card white */
  --teal: #175e54;
  --line: #d9cdb8;
  --line-strong: #201c16;
  --community-bg: #ece2cf;
  --good: #2e6b34;
  --warn: #a03d12;
  --serif: "Fraunces", "Fraunces Fallback", "Georgia", serif;
  --sans: "Public Sans", "Public Sans Fallback", "Helvetica Neue", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --tap: 44px; /* smallest touch target on phones and touch screens */
}

/* Fallback faces sized to the web fonts' widths, so text wraps the same before and after the web
   fonts arrive (display=swap) and the page doesn't jump. Ratios measured per weight against Georgia
   and Helvetica Neue; IBM Plex Mono already matches SF Mono and Menlo. */
@font-face { font-family: "Fraunces Fallback"; font-weight: 100 450; src: local("Georgia"); size-adjust: 104.9%; }
@font-face { font-family: "Fraunces Fallback"; font-weight: 451 650; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 93%; }
@font-face { font-family: "Fraunces Fallback"; font-weight: 651 900; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 95.9%; }
@font-face { font-family: "Fraunces Fallback"; font-style: italic; font-weight: 451 900; src: local("Georgia Bold Italic"), local("Georgia-BoldItalic"); size-adjust: 84.5%; }
@font-face { font-family: "Public Sans Fallback"; font-weight: 100 550; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"); size-adjust: 103.8%; }
@font-face { font-family: "Public Sans Fallback"; font-weight: 551 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 100.9%; }

* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* Phones and touch screens use "@media (max-width: 640px), (pointer: coarse)" for touch targets and
   "@media (max-width: 640px)" for layout; each rule sits next to the component it changes. */

/* visible focus for keyboard and switch users, on every control */
:focus-visible { outline: 3px solid var(--poppy-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--sans);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(217, 111, 30, 0.07), transparent 60%),
    var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- mock ribbon ---------- */
.mock-ribbon {
  position: sticky;
  top: 0;
  z-index: 50;
  background: repeating-linear-gradient(-45deg, #2b2620 0 14px, #3a332a 14px 28px);
  color: #f4c98a;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* ---------- header ---------- */
/* "Skip to content": off screen until a keyboard user tabs to it */
.skip-link {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 60;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }
main:focus { outline: none; }

.site-header {
  border-bottom: 3px double var(--line-strong);
  background: var(--paper);
}
.site-header .inner {
  max-width: 66rem;
  margin: 0 auto;
  padding: 1rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.brand .mark { color: var(--poppy); }
.brand .instance-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  align-self: center;
}
.site-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--poppy); }
.site-nav a.active { color: var(--ink); border-bottom-color: var(--ink); }

/* Touch screens wider than a phone (tablets): same layout, 44 px tall targets. */
@media (pointer: coarse) and (min-width: 641px) {
  .site-header .inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .brand { min-height: var(--tap); align-items: center; }
  .site-nav { gap: 0.6rem; }
  .site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 0.3rem; }
}

/* Phones: the brand on one line, the nav as one full-width row of 44 px targets under it. The row
   scrolls sideways rather than wrapping if it ever gets longer (sign-in, moderation). */
@media (max-width: 640px) {
  .site-header .inner { padding-top: 0.5rem; padding-bottom: 0; gap: 0; }
  .brand { min-height: var(--tap); align-items: center; }
  .site-nav {
    margin-left: calc(-0.4rem); width: calc(100% + 0.8rem); gap: 0;
    flex-wrap: nowrap; justify-content: space-between;
    overflow-x: auto; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    min-height: var(--tap); min-width: var(--tap); padding: 0 0.4rem;
    font-size: 0.9rem; letter-spacing: 0; white-space: nowrap;
    border-bottom-width: 3px;
  }
  .site-nav .auth-chip, .site-nav .signout { flex: 0 0 auto; }
}

.auth-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.auth-chip:hover { background: var(--ink); color: var(--paper); }
.auth-chip.signed-in { border-color: var(--teal); color: var(--teal); }
.auth-chip.signed-in:hover { background: var(--teal); color: var(--paper); }
@media (max-width: 640px), (pointer: coarse) {
  .auth-chip { min-height: var(--tap); display: inline-flex; align-items: center; }
}

/* ---------- layout ---------- */
main { flex: 1; width: 100%; max-width: 66rem; margin: 0 auto; padding: 2rem var(--pad) 4rem; }
@media (max-width: 640px) { main { padding-top: 1.25rem; padding-bottom: 2.5rem; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--poppy-deep);
  margin-bottom: 0.6rem;
}
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 0.8rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 2.2rem 0 0.8rem;
}
.lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 46rem; }

/* ---------- landing hero ---------- */
.hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.hero h1 { max-width: 44rem; }
.hero h1 em { font-style: italic; color: var(--poppy-deep); }

.zip-form {
  margin-top: 2rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  max-width: 40rem;
}
.zip-form input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--mono);
  font-size: 1rem; /* 16 px or more: iOS zooms the page when a smaller input gets focus */
  padding: 0.85rem 1rem;
  border: 2px solid var(--ink);
  background: #fffdf8;
  color: var(--ink);
  border-radius: 3px;
}
.zip-form input:focus { outline: 3px solid rgba(217, 111, 30, 0.35); }
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--poppy-deep); border-color: var(--poppy-deep); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.small { padding: 0.45rem 0.9rem; font-size: 0.78rem; }
.hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.6rem; }
.hint a { color: var(--poppy-deep); }
@media (max-width: 640px), (pointer: coarse) {
  .btn { min-height: var(--tap); }
  .btn.small { min-height: var(--tap); padding: 0.6rem 1rem; font-size: 0.875rem; display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  .hero { padding: 1.5rem 0 2rem; }
  .zip-form { margin-top: 1.4rem; }
  .zip-form input { flex-basis: 100%; }
  .zip-form .btn { width: 100%; font-size: 1rem; }
}

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; }
.pillar { background: var(--paper); padding: 1.4rem; }
.pillar h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 0.4rem; }
.pillar p { font-size: 0.86rem; color: var(--ink-soft); }
.pillar .num { font-family: var(--mono); color: var(--poppy-deep); font-size: 0.75rem; display: block; margin-bottom: 0.5rem; }
@media (max-width: 640px) {
  .pillar { padding: 1.1rem 1.2rem; }
  .pillar h2 { font-size: 1.15rem; }
  .pillar p { font-size: 1rem; }
}

/* ---------- ballot ---------- */
.ballot-meta {
  border: 2px solid var(--ink);
  background: #fffdf8;
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: baseline;
}
.ballot-meta .addr { font-family: var(--mono); font-size: 0.85rem; }
.chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  padding: 0.12rem 0.5rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip.accent { border-color: var(--poppy-deep); color: var(--poppy-deep); }
@media (max-width: 640px) {
  .ballot-meta { padding: 0.9rem 1rem; gap: 0.5rem; margin: 1.2rem 0 1.4rem; }
  .ballot-meta .addr { flex-basis: 100%; font-size: 0.9rem; }
  .chip { font-size: 0.75rem; letter-spacing: 0.02em; white-space: normal; } /* long labels wrap instead of pushing the page sideways */
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 3px double var(--line-strong);
  padding-bottom: 0.4rem;
  margin: 2.6rem 0 1.2rem;
}
.section-head .sec-num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--poppy-deep); }
.section-head h2 { margin: 0; }

.card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--ink);
  background: #fffdf8;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
  animation: rise 0.45s both;
}
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }
.card:nth-child(5) { animation-delay: 0.2s; }
.card:nth-child(6) { animation-delay: 0.25s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card.measure { border-left-color: var(--poppy); }
.card.race { border-left-color: var(--teal); }
.card .top { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.14rem 0.5rem;
  border-radius: 2px;
  color: var(--paper);
  background: var(--ink);
}
.card.measure .tag { background: var(--poppy-deep); }
.card.race .tag { background: var(--teal); }
.card h3 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--poppy-deep); }
.card .summary { font-size: 0.92rem; color: var(--ink-soft); margin: 0.5rem 0 0.9rem; }
.card .foot { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
/* Phones: tag and star share the first line, the measure type gets its own line under them. */
@media (max-width: 640px) {
  .card { padding: 1rem 1rem 1.1rem; }
  .card .top { gap: 0 0.5rem; }
  .card .top .star { order: 2; }
  .card .top::after { content: ""; order: 3; flex-basis: 100%; } /* line break after the star */
  .card .top .chip { order: 4; margin-top: 0.35rem; }
  .tag { font-size: 0.75rem; }
  .card h3 { font-size: 1.25rem; }
  .card .summary { font-size: 1rem; }
}
@media (max-width: 640px), (pointer: coarse) {
  .card h3 a { display: block; padding: 0.7rem 0; margin: -0.7rem 0; } /* taller touch target, same layout */
}

.notice {
  border: 1px dashed var(--warn);
  background: rgba(160, 61, 18, 0.06);
  color: var(--warn);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  margin: 1.4rem 0;
}
.notice.calm { border-color: var(--teal); background: rgba(23, 94, 84, 0.06); color: var(--teal); }

/* how to vote: official links only */
.howto { border: 1px solid var(--teal); background: rgba(23, 94, 84, 0.05); padding: 1.1rem 1.3rem; margin: 2rem 0; }
.howto h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 0.6rem; }
.howto ul { list-style: none; }
.howto li { font-size: 0.9rem; margin: 0.55rem 0; max-width: 52rem; }
.howto .hint { margin-top: 0.8rem; }
@media (max-width: 640px) {
  .notice { font-size: 0.95rem; }
  .howto { padding: 1rem; }
  .howto li { font-size: 1rem; line-height: 1.7; margin: 0.8rem 0; } /* links in running text: more room between lines */
}

/* ---------- item detail ---------- */
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); border: 2px solid var(--line-strong); margin: 1.4rem 0; }
.yesno > div { background: #fffdf8; padding: 1.1rem 1.2rem; }
.yesno h2 { font-family: var(--mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.5rem; }
.yesno p { font-size: 0.92rem; }

.args { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.2rem 0; }
.args .col h2 {
  font-family: var(--mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 2px solid var(--ink); padding-bottom: 0.35rem; margin: 0 0 0.7rem;
}
.args li { font-size: 0.9rem; margin: 0 0 0.7rem 1.1rem; }

/* Phones stack YES over NO and FOR over AGAINST: same size, same order, same style as side by side.
   The jump row (shown only when stacked) tells readers both arguments are there before the first
   one starts, so the second is never hidden below the fold without a cue. */
.side-jump { display: none; }
@media (max-width: 640px) {
  .yesno > div { padding: 1rem; }
  .yesno h2, .args .col h2 { font-size: 0.78rem; }
  .yesno p, .args .col p, .args li { font-size: 1rem; }
  .args { gap: 1.6rem; }
  .side-jump {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin: 1.4rem 0 0.4rem; font-size: 0.9rem; color: var(--ink-soft);
  }
  .side-jump a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: var(--tap);
    border: 1.5px solid var(--ink); border-radius: 3px; background: #fffdf8;
    padding: 0.4rem 0.6rem; text-align: center; color: var(--ink); font-weight: 700; font-size: 0.95rem; text-decoration: none;
  }
  .side-jump .lead { flex-basis: 100%; }
  .args .col { scroll-margin-top: 0.8rem; }
}

.src {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 2px;
  padding: 0 0.35rem;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.src:hover { background: var(--teal); color: var(--paper); }
/* Source chips sit inside running text; an invisible margin around each makes a 44 px touch target
   without pushing the lines apart. */
@media (max-width: 640px), (pointer: coarse) {
  .src { position: relative; font-size: 0.75rem; padding: 0.05rem 0.45rem; display: inline-block; min-width: 2.4rem; text-align: center; }
  .src::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--tap)); height: var(--tap); transform: translate(-50%, -50%); }
}

.sources-block { border-top: 3px double var(--line-strong); margin-top: 2rem; padding-top: 1rem; }
.sources-block li { font-size: 0.85rem; margin: 0.4rem 0 0.4rem 1.2rem; }
.sources-block .mono { font-family: var(--mono); font-size: 0.72rem; color: var(--teal); }
@media (max-width: 640px) {
  .sources-block li { font-size: 0.95rem; margin: 0.7rem 0 0.7rem 1.2rem; line-height: 1.6; }
}

.candidate { border: 1px solid var(--line); background: #fffdf8; padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; }
.candidate .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.candidate h3 { font-family: var(--serif); font-size: 1.15rem; }
.candidate .party { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.candidate p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.45rem; }
.equal-note { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin-bottom: 1rem; }

/* ---------- community zone ---------- */
.community {
  margin-top: 3rem;
  background: var(--community-bg);
  border-top: 4px dashed var(--ink-soft);
  padding: 1.6rem;
}
.community .zone-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.comment { background: #fffdf8; border: 1px solid var(--line); padding: 0.8rem 1rem; margin-bottom: 0.7rem; }
.comment .who { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); margin-bottom: 0.25rem; }
.comment p { font-size: 0.88rem; }
.composer textarea {
  width: 100%; min-height: 4.5rem; font-family: var(--sans); font-size: 1rem;
  padding: 0.7rem; border: 1.5px solid var(--ink-soft); background: #fffdf8; border-radius: 3px; margin-bottom: 0.5rem;
}
.locked { border: 1.5px dashed var(--ink-soft); padding: 1rem; text-align: center; font-size: 0.88rem; color: var(--ink-soft); background: rgba(255, 253, 248, 0.6); }
.locked a { color: var(--poppy-deep); font-weight: 700; }

.fact { background: #fffdf8; border: 1px solid var(--line); border-left: 4px solid var(--teal); padding: 0.9rem 1rem; margin-bottom: 0.7rem; }
.fact .status { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 2px; }
.status.vetted { background: var(--good); color: var(--paper); }
.status.pending { background: #b98a12; color: var(--paper); }
.status.rejected { background: var(--warn); color: var(--paper); }
.fact p { font-size: 0.88rem; margin-top: 0.4rem; }
.fact .meta { font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.35rem; font-family: var(--mono); }

/* ---------- search ---------- */
.search-bar { display: flex; gap: 0.6rem; margin: 1.4rem 0 1rem; flex-wrap: wrap; }
.search-bar input {
  flex: 1 1 18rem; min-width: 0; font-family: var(--mono); font-size: 1rem; padding: 0.8rem 1rem;
  border: 2px solid var(--ink); background: #fffdf8; border-radius: 3px;
}
.filters { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.filter-chip {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  border: 1.5px solid var(--ink-soft); border-radius: 999px; background: transparent;
  color: var(--ink-soft); padding: 0.3rem 0.8rem; cursor: pointer;
}
.filter-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 640px), (pointer: coarse) {
  .filters { gap: 0.5rem; }
  .filter-chip { min-height: var(--tap); display: inline-flex; align-items: center; font-size: 0.8rem; }
}
/* Phones: topics as one sideways-scrolling strip, so results start on the first screen. The chip cut
   off at the right edge shows there is more. */
@media (max-width: 640px) {
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); margin-bottom: 1.2rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex: 0 0 auto; white-space: nowrap; }
}
.result-count { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; color: var(--ink-soft); margin: 0 0 1rem; }

/* ---------- Q&A ---------- */
.chat { border: 2px solid var(--ink); background: #fffdf8; display: flex; flex-direction: column; min-height: 24rem; }
.chat-log { flex: 1; padding: 1.2rem; overflow-y: auto; }
.msg { max-width: 85%; margin-bottom: 1rem; padding: 0.75rem 1rem; font-size: 0.9rem; border-radius: 3px; }
.msg.user { margin-left: auto; background: var(--ink); color: var(--paper); }
.msg.bot { background: var(--paper-deep); border: 1px solid var(--line); }
.msg.bot.refusal { border-left: 4px solid var(--warn); }
.chat-input { display: flex; gap: 0.5rem; border-top: 2px solid var(--ink); padding: 0.8rem; }
.chat-input input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 1rem; padding: 0.6rem 0.9rem; border: 1.5px solid var(--ink-soft); background: var(--paper); border-radius: 3px; }
.canned { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }

/* ---------- tables / code ---------- */
.doc-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.85rem; }
.doc-table th { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; border-bottom: 2px solid var(--ink); padding: 0.5rem 0.7rem; }
.doc-table td { border-bottom: 1px solid var(--line); padding: 0.6rem 0.7rem; vertical-align: top; }
.doc-table code, .inline-code { font-family: var(--mono); font-size: 0.78rem; background: var(--paper-deep); padding: 0.1rem 0.35rem; border-radius: 2px; }
pre.code {
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.5; background: #26211a; color: #e8dcc3;
  padding: 1.1rem 1.3rem; overflow-x: auto; border-radius: 4px; margin: 1rem 0;
}
pre.code .k { color: #f0a35e; }

.pipeline { display: flex; gap: 0; flex-wrap: wrap; margin: 1.5rem 0; }
.pipeline .step { flex: 1 1 9rem; border: 1.5px solid var(--ink); padding: 0.8rem; background: #fffdf8; position: relative; margin-right: 1.4rem; margin-bottom: 0.8rem; }
.pipeline .step::after { content: "→"; position: absolute; right: -1.15rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--poppy-deep); }
.pipeline .step:last-child::after { content: ""; }
.pipeline .step h3 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; color: var(--poppy-deep); }
.pipeline .step p { font-size: 0.78rem; color: var(--ink-soft); }
/* Phones: the steps stack, so the arrows point down between them. */
@media (max-width: 640px) {
  .pipeline { flex-direction: column; }
  .pipeline .step { flex-basis: auto; margin: 0 0 1.7rem; }
  .pipeline .step:last-child { margin-bottom: 0; }
  .pipeline .step::after { content: "↓"; right: auto; top: auto; left: 50%; bottom: -1.55rem; transform: translateX(-50%); }
  .pipeline .step p { font-size: 0.95rem; }
  .pipeline .step h3 { font-size: 0.75rem; }
  .doc-table { font-size: 0.95rem; }
  .doc-table th, .doc-table td { padding-left: 0.4rem; padding-right: 0.4rem; }
}

.status-pill { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.14rem 0.5rem; border-radius: 999px; color: var(--paper); }
.status-pill.published { background: var(--good); }
.status-pill.review { background: #b98a12; }
.status-pill.staged { background: var(--teal); }
.status-pill.received { background: var(--ink-soft); }

/* ---------- forms ---------- */
.panel { border: 2px solid var(--ink); background: #fffdf8; padding: 1.6rem; max-width: 30rem; margin: 1.5rem 0; }
.panel label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0.9rem 0 0.3rem; }
.panel input[type="text"], .panel input[type="email"] {
  width: 100%; font-family: var(--sans); font-size: 1rem; padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--ink-soft); background: var(--paper); border-radius: 3px;
}
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--line); gap: 1rem; }
.toggle-row .t-label { font-size: 0.9rem; }
.toggle-row .t-sub { font-size: 0.75rem; color: var(--ink-soft); }
.toggle-row input { width: 1.2rem; height: 1.2rem; accent-color: var(--poppy-deep); }

/* ---------- footer ---------- */
.site-footer { border-top: 3px double var(--line-strong); margin-top: 3rem; background: var(--paper-deep); }
.site-footer .inner {
  max-width: 66rem; margin: 0 auto; padding: 1.6rem var(--pad);
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: baseline;
  font-size: 0.78rem; color: var(--ink-soft);
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--poppy-deep); }
.site-footer .spacer { flex: 1; }
@media (max-width: 640px), (pointer: coarse) {
  .site-footer .inner { align-items: center; }
  .site-footer a { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  .site-footer .inner { gap: 0 1.4rem; font-size: 0.85rem; }
  .site-footer .inner > span:first-child { flex-basis: 100%; margin-bottom: 0.2rem; }
  .site-footer .spacer { display: none; }
}

/* ---------- instance theme (Santa Clara demo) ---------- */
body.instance-county {
  --poppy: #2c6e49;
  --poppy-deep: #1f5136;
  background: radial-gradient(1200px 500px at 80% -10%, rgba(44, 110, 73, 0.08), transparent 60%), var(--paper);
}

/* default link color inside content (class-based components override this) */
main a { color: var(--poppy-deep); }

@media (max-width: 640px) {
  .yesno, .args { grid-template-columns: 1fr; }
}

/* results */
/* Official results. YES and NO share every rule below: same size, order, colour and bar. */
.results { border: 1.5px solid var(--ink); background: #fffdf8; padding: 1rem 1.1rem; margin: 1.2rem 0; }
.results-title { margin-bottom: 0.6rem; }
.results-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.results-side { min-width: 0; }
.results-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.45rem; }
.results-label { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; }
.results-num { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.results-pct { font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.results-bar {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 0.55rem;
  margin-top: 0.35rem; border: 1px solid var(--ink-soft); border-radius: 0; background: var(--paper-deep); color: var(--ink-soft);
}
.results-bar::-webkit-progress-bar { background: var(--paper-deep); }
.results-bar::-webkit-progress-value { background: var(--ink-soft); }
.results-bar::-moz-progress-bar { background: var(--ink-soft); }
.results-status { margin-top: 0.7rem; font-size: 0.78rem; color: var(--ink-soft); }
.results-status a { color: var(--ink-soft); text-decoration: underline; }
.results-compact { padding: 0.6rem 0.75rem; margin: 0.7rem 0 0.4rem; border-width: 1px; }
.results-compact .results-pair { gap: 0.75rem; }
.results-compact .results-num { font-size: 1rem; }
.results-compact .results-pct { font-size: 0.8rem; }
.results-compact .results-bar { height: 0.4rem; }
.results-compact .results-status { margin-top: 0.45rem; font-size: 0.7rem; }
@media (max-width: 640px) {
  .results { padding: 0.8rem; }
  .results-pair { gap: 0.6rem; }
  .results-num { font-size: 1.1rem; }
  .results-compact .results-num { font-size: 0.95rem; }
  .results-label { font-size: 0.8rem; }
  .results-status, .results-compact .results-status { font-size: 0.82rem; }
}

/* Test copies (demo/staging, laptops) say so on every page; production never shows this. */
.test-site {
  background: var(--ink, #1f1b16);
  color: var(--paper, #f7f1e6);
  text-align: center;
  font-size: 0.9rem;
  padding: 0.45rem 16px;
}
.test-site a { color: inherit; font-weight: 700; }