/* The Martinez Wire · the tool, design "Circular" (round 6, No. 18), built out 2026-09-24.
   Colors are the brand kit's tokens (brand-kit/tokens/tokens.css) and tints of them, nothing else.
   Phone first (390 px), then 360, tablets, 1200+. Light and dark follow the reader's setting.
   Motion: only the cursor blink and "martinez" typing run on their own; the rest is reader-initiated,
   and prefers-reduced-motion stops all of it. */

:root {
  --paper: #f7f3ec;
  --card: #fffdf9;
  --soft: #f1ebe1;
  --ink: #2c2620;
  --ink-soft: #756b5e;
  --ink-faint: #a89c8c;
  --hair: #e4dbcd;
  --acc: #b4622d;
  --acc-wash: #f9e3c8;
  /* the accent for SMALL text on paper (owner's ruling d, Mon Sep 28, 2026): #a9592a reads 4.58:1 on the paper where
     --acc reads 4.02:1; large text, fills, rules and rings keep --acc; dark mode keeps its own accent */
  --acc-t: #a9592a;
  /* the two corners (BRAND 11.2, audit 05 B7): controls 7 px, panels 10 px */
  --r-ctl: 7px;
  --r-panel: 10px;
  --term: #0d1117;
  --term-ink: #e8e6e1;
  --term-muted: #8f8d88;
  --term-acc: #d97757;
  --logo-ink: #2c2620;
  --logo-acc: #b4622d;
  --btn-bg: #0d1117;
  --btn-ink: #e8e6e1;
  --shadow: 0 1px 0 rgba(44, 38, 32, .04), 0 10px 30px -18px rgba(44, 38, 32, .35);
  --mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, system-ui, Arial, sans-serif;
  --gut: 20px;
  --rule: 2px solid var(--ink);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1712;
    --card: #262019;
    --soft: #302921;
    --ink: #f2ece2;
    --ink-soft: #b9ac9b;
    --ink-faint: #7c7161;
    --hair: #3b322a;
    --acc: #e2934f;
    --acc-t: #e2934f;
    --acc-wash: #36281a;
    --logo-ink: #f2ece2;
    --logo-acc: #d97757;
    --btn-bg: #e2934f;
    --btn-ink: #1c1712;
    --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 12px 30px -16px rgba(0, 0, 0, .7);
  }
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 104px;
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.42 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
html.sheet-open, html.sheet-open body { overflow: hidden; }

p, h1, h2, h3, ol, ul, dl, dd, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--acc-t); }
b, strong { font-weight: 700; }
small { font-size: .6em; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--card); color: var(--ink); padding: 12px 16px; border-radius: var(--r-ctl);
  font: 600 13px var(--mono);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- the mark */
.logo-svg { display: block; height: 19px; width: auto; }
.logo-svg .lg-i { fill: var(--term-ink); }
.logo-svg .lg-a { fill: var(--term-acc); }

@keyframes mw-show { to { opacity: 1; } }
@keyframes mw-blink { 50% { opacity: 0; } }
/* the masthead's gesture on every page, now and then (owner 2026-09-25: "very occasionally yet at random",
   "the top cursor should blink all the time but the typing 'martinez' should be what's limited"): the cursor
   always blinks; the typing runs ONCE every 1.5-5 minutes at random (the first time about 20 s after the
   page opens) — "martinez" erases from its last letter, "the wire" rests, "martinez" types back (4.4 s). Between
   times the logo is the full name. Off under Reduce Motion. */
@keyframes mw-wire {
  0% { transform: translateX(0px); }
  35% { transform: translateX(-1233px); }
  37.2% { transform: translateX(-2466px); }
  39.4% { transform: translateX(-3699px); }
  41.6% { transform: translateX(-4932px); }
  43.8% { transform: translateX(-6165px); }
  46% { transform: translateX(-7398px); }
  48.2% { transform: translateX(-8631px); }
  50.4% { transform: translateX(-11097px); }
  60% { transform: translateX(-8631px); }
  62.8% { transform: translateX(-7398px); }
  65.6% { transform: translateX(-6165px); }
  68.4% { transform: translateX(-4932px); }
  71.2% { transform: translateX(-3699px); }
  74% { transform: translateX(-2466px); }
  76.8% { transform: translateX(-1233px); }
  79.6% { transform: translateX(0px); }
  100% { transform: translateX(0px); }
}
@keyframes mw-mz1 { 0% { opacity: 1; } 50.4% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz2 { 0% { opacity: 1; } 48.2% { opacity: 0; } 62.8% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz3 { 0% { opacity: 1; } 46% { opacity: 0; } 65.6% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz4 { 0% { opacity: 1; } 43.8% { opacity: 0; } 68.4% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz5 { 0% { opacity: 1; } 41.6% { opacity: 0; } 71.2% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz6 { 0% { opacity: 1; } 39.4% { opacity: 0; } 74% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz7 { 0% { opacity: 1; } 37.2% { opacity: 0; } 76.8% { opacity: 1; } 100% { opacity: 1; } }
@keyframes mw-mz8 { 0% { opacity: 1; } 35% { opacity: 0; } 79.6% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* the cursor always blinks; the typing runs only when tool.js adds .is-typing, now and then */
  .mast .lg-cur { animation: mw-blink 1.1s step-end infinite; }
  .typing.is-typing .lg-w { animation: mw-wire 4.4s step-end 1; }
  .typing.is-typing .mz1 { animation: mw-mz1 4.4s step-end 1; }
  .typing.is-typing .mz2 { animation: mw-mz2 4.4s step-end 1; }
  .typing.is-typing .mz3 { animation: mw-mz3 4.4s step-end 1; }
  .typing.is-typing .mz4 { animation: mw-mz4 4.4s step-end 1; }
  .typing.is-typing .mz5 { animation: mw-mz5 4.4s step-end 1; }
  .typing.is-typing .mz6 { animation: mw-mz6 4.4s step-end 1; }
  .typing.is-typing .mz7 { animation: mw-mz7 4.4s step-end 1; }
  .typing.is-typing .mz8 { animation: mw-mz8 4.4s step-end 1; }
}

/* ---------------------------------------------------------------- chrome */
/* one bar (owner 2026-09-25, menu option 1 with smaller items): the logo and four compact tabs,
   sticky, 52 px on a phone (it was two bars, 108 px); the short name on the narrowest phones */
.mast { position: sticky; top: 0; z-index: 30; background: var(--term); color: var(--term-ink); view-transition-name: mast; }
.mast-in {
  max-width: 1280px; margin: 0 auto; height: 52px; padding: 0 8px 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.logo { display: flex; align-items: center; min-height: 44px; flex: none; }   /* never squeezed: its cursor stays whole (audit 01 A12) */
.mast .logo-svg { height: 16.5px; }
.mast-meta, .mast-join { display: none; }
.mast-meta {
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--term-muted); white-space: nowrap;
}
.mast-join {
  align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-ctl);
  border: 1px solid #30363d; color: var(--term-ink); text-decoration: none; white-space: nowrap;
  font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.mast-join .btn-caret { color: var(--term-acc); margin-right: 5px; }
.mast-join:hover { border-color: var(--term-acc); }
.tabs { flex: none; }
.tabs ul { display: flex; margin: 0; padding: 0; }
.tabs a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 46px; min-height: 52px;
  font: 600 9px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--term-muted); text-decoration: none;
}
.tab-ico { width: 17px; height: 17px; stroke-width: 1.5; }
.tabs a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--term-acc); transform: scaleX(0); transition: transform .22s var(--ease);
}
.tabs a[aria-current="page"] { color: var(--term-ink); }
.tabs a[aria-current="page"] .tab-ico { color: var(--term-acc); }
.tabs a[aria-current="page"]::after { transform: scaleX(1); }
.tabs a:hover { color: var(--term-ink); }
/* the terminal bar's and the footer's focus rings in the terminal accent; a tab's ring sits inside the tab, so the bar never
   cuts it (audit 01 B8) */
.mast :focus-visible, .foot :focus-visible { outline-color: var(--term-acc); }
.tabs a:focus-visible { outline-offset: -2px; }
/* 375-389 px (iPhone mini, SE): the full name and its cursor, with room before the first tab (audit 01 A12, B7) */
@media (min-width: 375px) and (max-width: 389px) { .tabs a { width: 43px; letter-spacing: 0; } }

/* ---------------------------------------------------------------- type */
.kick, .mono-k { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.mono-k { color: var(--ink-soft); }
.ext {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 11px/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc-t); text-decoration: none;
}
.ext:hover { text-decoration: underline; text-underline-offset: 3px; }
.ext-plain { color: var(--ink-soft); min-height: 0; }
.arr { white-space: pre; }
.amt { font-family: var(--mono); font-weight: 700; font-size: .93em; letter-spacing: -.01em; white-space: nowrap; }
.tag {
  display: inline-block; padding: 3px 6px 2px; border: 1px solid var(--hair); border-radius: 3px;
  font: 600 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  vertical-align: middle; white-space: nowrap;
}

.lede { color: var(--ink-soft); margin: 14px 0 4px; max-width: 62ch; }
.quiet { color: var(--ink-soft); font-size: 14px; margin: 12px 0 0; }
.quiet a { color: var(--acc-t); }
.fine { color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; margin: 12px 0 0; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------- the round stamp */
.stamp {
  flex: none; width: 88px; height: 88px; border-radius: 50%;
  border: 1.5px solid var(--acc); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 3.8px var(--acc);
  display: grid; grid-template-rows: 1fr 23px 1fr; overflow: hidden; text-align: center;
}
.st-t { align-self: end; padding-bottom: 4px; font: 700 8.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc-t); }
.st-d {
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--acc); border-bottom: 1px solid var(--acc);
  font: 700 10px/1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.st-h { align-self: start; padding-top: 5px; font: 700 10px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.stamp-mini { width: 78px; height: 78px; grid-template-rows: 1fr 21px 1fr; }
.stamp-mini .st-t { font-size: 8px; }
.stamp-mini .st-d, .stamp-mini .st-h { font-size: 9.5px; }

/* ---------------------------------------------------------------- the door (landing) */
.hero { position: relative; background: var(--paper); }
/* the landing (owner, Mon Sep 28, 2026, option E): the sign-up first, the promise, then the day's facts designed into the
   page under it; the join stays on a phone's first screen, and a desktop shows it all at once */
.p-home .hero-in { padding-bottom: 28px; }
.p-home .foot { margin-top: 0; }
.hero-in { max-width: 1280px; margin: 0 auto; padding: 18px var(--gut) 34px; }
.hero-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 10px 0 12px; }
.hero h1 { font: 800 35px/1.02 var(--sans); letter-spacing: -.028em; margin: 0; max-width: 9.5em; }
.stamp-door { width: 82px; height: 82px; margin-top: 2px; transform: rotate(-9deg); grid-template-rows: 1fr 22px 1fr; }
.stamp-door .st-t { font-size: 9px; }
.stamp-door .st-d { font-size: 9.5px; letter-spacing: .06em; }
.stamp-door .st-h { font-size: 10px; }
.hero .deck { color: var(--ink-soft); margin: 0 0 16px; max-width: 34em; font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }

/* the promise under the join (owner's words, 2026-09-25) */
.proof { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.proof-h { margin: 0; font: 800 16.5px/1.3 var(--sans); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.proof-acc { color: var(--acc-t); }
.proof-p { margin: 6px 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.proof-no { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 14px; }
.proof-no li { display: inline-flex; align-items: center; gap: 5px; font: 700 12.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.proof-no .ico { width: 15px; height: 15px; stroke-width: 2.4; color: var(--acc); }

.join-label { display: block; margin: 0 0 6px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.join-row { display: flex; gap: 8px; }
.join-row input {
  flex: 1; min-width: 0; height: 52px; padding: 0 14px;
  font: 16px var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--ink-soft); border-radius: var(--r-ctl);
  -webkit-appearance: none; appearance: none;
  box-shadow: var(--shadow);
}
.join-row input::placeholder { color: var(--ink-soft); opacity: .75; }
.join-row input:focus { outline: 2px solid var(--acc); outline-offset: 0; border-color: var(--acc); }
.join-row input.bad { border: 2px solid var(--acc); background: var(--acc-wash); }
.btn {
  flex: none; height: 52px; min-width: 98px; padding: 0 18px;
  border: 0; border-radius: var(--r-ctl); cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink);
  font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: transform .12s var(--ease), filter .12s;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn-caret { color: var(--term-acc); margin-right: 2px; }
@media (prefers-color-scheme: dark) { .btn .btn-caret { color: var(--btn-ink); } }
.btn:hover { filter: brightness(1.12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.join-err {
  margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--acc); background: var(--acc-wash);
  font-size: 14px; line-height: 1.4; color: var(--ink); border-radius: 0 5px 5px 0;
}
.err-k { display: block; font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); margin-bottom: 2px; }

.terms {
  display: grid; grid-template-columns: .8fr 1.3fr 1.1fr; margin: 16px 0 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
}
.terms div { padding: 8px 10px 9px 0; }
.terms div + div { padding-left: 10px; border-left: 1px solid var(--hair); }
.terms dt, .facts dt, .joined-dl dt { font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.terms dd { margin: 3px 0 0; font: 700 14px/1.25 var(--sans); }

/* joined: the receipt */
.joined {
  position: relative; padding: 16px 16px 12px; background: var(--card); border: 1px solid var(--hair);
  border-top: 3px solid var(--acc); border-radius: 0 0 8px 8px; box-shadow: var(--shadow);
}
.joined:focus { outline: none; }
.stamp-got { position: absolute; right: 12px; top: 12px; width: 84px; height: 84px; transform: rotate(8deg); }
.stamp-got .st-d { font-size: 9.5px; }
.joined-k { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); padding-right: 96px; }
.joined-h { font: 800 21px/1.18 var(--sans); margin: 10px 0 6px; padding-right: 92px; letter-spacing: -.01em; }
.joined-p { color: var(--ink-soft); font-size: 14.5px; }
.joined-dl { margin: 12px 0 4px; border-top: 1px solid var(--hair); }
.joined-dl div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.joined-dl dd { font-size: 14px; font-family: var(--mono); overflow-wrap: anywhere; }
.joined-dl .dd-plain { font-family: var(--sans); }
.btn-ghost {
  margin-top: 4px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t);
}
@keyframes mw-stamp {
  0% { opacity: 0; transform: rotate(8deg) scale(1.7); }
  60% { opacity: 1; transform: rotate(8deg) scale(.94); }
  100% { opacity: 1; transform: rotate(8deg) scale(1); }
}
@keyframes mw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* the joined moment, the same on every page (owner 2026-09-25; one join, audit 01 C2): the Join button gives its place to a
   RECEIVED stamp pressed where it stood; the field becomes a terminal line on paper ("keep it classy") and types the
   one line (tool.js); the label row offers the way back. --btn-w is the button's slot. */
body { --btn-w: 98px; }
.join-top { display: flex; align-items: center; gap: 0; min-height: 18px; margin: 0 0 6px; }
.join-top .join-label { margin: 0; }
.join-back { min-height: 36px; margin: -9px 0; padding: 0; white-space: nowrap; font-size: 10px; }
.join-back::before { content: "·"; margin: 0 .7em; color: var(--ink-faint); }
.join-row { position: relative; }
.join-row .btn { width: var(--btn-w); min-width: 0; }
.join-row input { transition: border-color .4s var(--ease), color .2s; }
.join-row .btn { transition: opacity .25s var(--ease), transform .25s var(--ease), filter .12s; }
.jt { position: absolute; left: 0; top: 0; bottom: 0; right: calc(var(--btn-w) + 8px); display: flex; align-items: center; padding: 0 14px;
  font: 600 13px/1.32 var(--mono); letter-spacing: .01em; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease) .3s; }
.jt-in { display: block; }
.jt-c { color: var(--acc-t); }
.jt-cur { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--acc); }
/* the landing's receipt is spoken, not shown: the stamp and the typed line are what a reader sees */
.joined.joined-term { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none; }
.join.is-err .join-label { color: var(--acc-t); }
.join [data-join-err] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.join.is-term .join-row input { border-color: var(--acc); color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; transition: none; }
.join.is-term .join-row input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 60px var(--card); box-shadow: inset 0 0 0 60px var(--card); }
.join.is-term .join-row input::placeholder { color: transparent; }
.join.is-term .join-row .btn { opacity: 0; transform: scale(.92); pointer-events: none; }
.join.is-term .jt { opacity: 1; transition: none; right: calc(var(--btn-w) + 24px); }
/* brought back for the visit (audit 01 C1): simply there, nothing moves */
.join.is-kept .join-row input, .join.is-kept .join-row .btn { transition: none; }
/* the joined moment (owner, Mon Sep 28, 2026: at once, and a new animated confirmation): the address leaves the field in the
   same frame, the line types, and a postmark lands where Join stood (tool.js draws it) */
.join-row .pm { position: absolute; top: 50%; right: 0; width: calc(var(--btn-w) + 34px); height: auto; aspect-ratio: 170 / 80;
  transform: translateY(-50%); pointer-events: none; opacity: 0; overflow: visible; }
.join.is-term .pm { opacity: 1; }
.pm-w { fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.pm-o, .pm-i { fill: none; stroke: var(--acc); }
.pm-o { stroke-width: 2.6; }
.pm-i { stroke-width: 1.2; }
.pm-t { font: 800 9px var(--mono); letter-spacing: .08em; fill: var(--acc); }
.pm-d, .pm-h { font: 700 8.5px var(--mono); letter-spacing: .03em; fill: var(--ink); }

/* ---------------------------------------------------------------- today in martinez, designed into the page
   (owner, Mon Sep 28, 2026, option E: "designed into the page rather than bolted on… rotating with new facts"). No
   box: the kicker's label, hairlines, plain sentences with the figure in bold and the source in small mono. Every fact
   is a link. With JavaScript three show at a time and the next three rise in every 6 s (tool.js); without it all
   twelve read as one list. The list holds the height of its tallest set, so nothing under it moves. */
.td { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); }
.td-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.td-k { flex: 1; min-width: 0; margin: 0; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.td-when { color: var(--ink-soft); }
.td-when::before { content: "· "; }
.td-ctl { display: none; align-items: center; margin: -8px -10px -8px 0; }
.js .td-ctl.js-only { display: flex; }
.td-pp { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
.td-pp svg { width: 12px; height: 12px; fill: currentColor; }
.td-pp:focus-visible { outline: 2px solid var(--acc); outline-offset: -6px; border-radius: 7px; }

/* the four cards (owner, Mon Sep 28, 2026: option A, "4 cards… one always flipping so that it looks like a constant feed of
   data… without cramping the mobile experience"; "only… Martinez… Things happening in Martinez"; "you can make desktop more
   elaborate within that design"). Paper tiles at 7 px, two by two on a phone, four across the page on a desktop. Each slot
   holds up to three facts and shows one; every 1.8 s the next slot round the four turns (tool.js): the figure's characters
   flip in as flaps (a split through each) and an accent edge draws across the card that turned. Each slot keeps its tallest
   fact's height, so nothing moves. Without JavaScript every fact is a card of its own. */
.tc-g { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tc-slot { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.js .tc-slot { display: grid; }
.js .tc-slot > .tc-t.tc-off { display: none; }
.tc-t { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 11px 11px 12px; background: var(--card);
  border: 1px solid var(--hair); border-radius: 7px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: border-color .16s, transform .16s var(--ease); }
@media (hover: hover) { .tc-t:hover { border-color: var(--ink-faint); } }
.tc-t:active { transform: scale(.98); }
.tc-t:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* the card that just turned: an accent edge draws across its top, then fades */
.tc-t::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--acc); border-radius: 7px 7px 0 0;
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: transform .45s var(--ease), opacity .6s ease 1.1s; pointer-events: none; }
.tc-t.is-turn::before { transform: scaleX(1); opacity: 1; transition: transform .45s var(--ease), opacity .2s; }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tc-k { display: block; min-width: 0; font: 700 9.5px/1.25 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tc-v { display: block; font: 700 21px/1 var(--mono); letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.tc-s { display: block; font: 400 12.5px/1.35 var(--sans); color: var(--ink); text-wrap: pretty; }
/* one small line of plain context under the line (the listing's own sentence, what passed, what the arrests were for) */
.tc-m { display: block; margin-top: -3px; font: 400 11px/1.4 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
.tc-src { display: block; margin-top: auto; font: 600 8.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
/* the flaps (tool.js): one squared cell a character with a split through it; a space is a gap */
.tc-f { display: inline-flex; gap: 2px; }
.tc-c { position: relative; display: grid; place-items: center; min-width: .74em; height: 1.34em; padding: 0 .05em; background: var(--soft); border-radius: 3px;
  font-variant-numeric: tabular-nums; }
.tc-c::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--paper); opacity: .9; }
.tc-c.tc-sp { min-width: .32em; background: none; }
.tc-c.tc-sp::after { content: none; }
/* each card's place in its slot (a square per fact, the one showing filled) */
.tc-pos { display: none; }
.js .tc-pos { display: inline-flex; gap: 3px; flex: none; }
.tc-pos i { width: 5px; height: 5px; border: 1.2px solid var(--ink-faint); border-radius: 1.5px; }
.tc-pos i.is-on { background: var(--acc); border-color: var(--acc); }
/* a short list (what passed): a phone shows three and "and N more", a desktop every item */
.tc-ml .tc-i:nth-of-type(n+4) { display: none; }
@media (min-width: 1100px) { .tc-ml .tc-i:nth-of-type(n+4) { display: inline; } .tc-mo { display: none; } }
@media (min-width: 720px) {
  .td { margin-top: 26px; padding-top: 18px; }
  .td-k { font-size: 12px; }
  .tc-v { font-size: 24px; }
  .tc-s { font-size: 13.5px; }
}
@keyframes mw-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .join.is-term:not(.is-kept) .join-back { animation: mw-fade .4s var(--ease) 2s both; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-joined .stamp-got { animation: mw-stamp .5s var(--ease) .12s both; }
  .is-joined .joined { animation: mw-rise .32s var(--ease) both; }
  .jt-cur { animation: mw-blink 1.1s step-end infinite; }
  .join-err:not([hidden]) { animation: mw-rise .2s var(--ease) both; }
}


/* ---------------------------------------------------------------- sheets (Circular) */
.sheet { padding: 38px var(--gut) 10px; min-width: 0; max-width: 1280px; margin: 0 auto; }
.sh { border-top: var(--rule); }
.sh-k { display: flex; align-items: flex-start; gap: 12px; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sh-no {
  display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 7px;
  background: var(--ink); color: var(--paper); border-radius: 0 0 3px 3px;
  font: 700 12px/1 var(--mono); letter-spacing: .06em;
}
.sh-name { padding-top: 10px; color: var(--ink); }
.sh-ico { margin: 8px 0 0 auto; color: var(--ink); }
.sh h2 { font: 800 23px/1.18 var(--sans); letter-spacing: -.01em; margin: 14px 0 14px; }

.slip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.slip-src { min-width: 0; }
.slip-k { font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.slip-n .ext { font-size: 11.5px; }
.slip-plain { display: inline-flex; align-items: center; min-height: 36px; font: 700 11.5px/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.slip-w { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); max-width: 36ch; }

.blk-k { font: 600 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.blk-k2 { margin: 22px 0 4px; }
.when { font: 700 18px/1.3 var(--sans); margin-top: 4px; }
.sub { color: var(--ink-soft); font-size: 14px; }

.facts { margin-top: 10px; border-top: 1px solid var(--hair); }
.facts div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.facts dd { font-size: 14px; }

.ag-sec { margin-top: 12px; }

/* city hall in plain words (owner 2026-09-25): the plain line leads; the city's wording is one tap away */

.rel li { font-size: 13px; line-height: 1.42; color: var(--ink-soft); padding: 4px 0; border-top: 1px dashed var(--hair); }
.rel li:first-child { border-top: 0; }

/* a check's reason, visible: the record's kind and date, the plain line, the city's words folded */

.speak { margin-top: 14px; border: 1px solid var(--hair); border-radius: var(--r-ctl); background: var(--card); }
.speak summary {
  list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font: 600 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.speak summary::-webkit-details-marker { display: none; }
.speak summary::after { content: "+"; font-size: 17px; color: var(--acc-t); }
.speak[open] summary::after { content: "–"; }
.speak p { padding: 0 14px 14px; font-size: 14px; color: var(--ink-soft); }

.said { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }

/* the outcome the clerk announced (owner 2026-09-25: never the clerk's count, a headline instead) */

.addcal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; }
.addcal-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px;
  background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.addcal-b .ico { width: 17px; height: 17px; color: var(--term-acc); }
@media (prefers-color-scheme: dark) { .addcal-b .ico { color: var(--btn-ink); } }

.wait { margin-top: 8px; border-top: 1px solid var(--hair); }
.wait li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }

.more { margin: 18px 0 0; }
.more-a {
  display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 14px;
  border: 1px solid var(--ink); border-radius: var(--r-ctl); text-decoration: none; color: var(--ink);
  font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.more-a span { color: var(--acc-t); font-size: 15px; transition: transform .18s var(--ease); }
.more-a:hover { background: var(--card); }
.more-a:hover span { transform: translateX(3px); }
.more-acc { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.more-acc span { color: var(--term-acc); }
@media (prefers-color-scheme: dark) { .more-acc span { color: var(--btn-ink); } }
.more-acc:hover { background: var(--btn-bg); filter: brightness(1.12); }

/* the checks, paired with the agenda */
.reg { margin-top: 18px; }

.chk { padding: 14px 0 12px; border-bottom: 1px solid var(--hair); }

.payee { font: 700 13px/1.35 var(--mono); letter-spacing: .02em; min-width: 0; }

.amount { font: 700 17px/1.2 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
/* each check's reason, folded (owner 2026-09-25) */
.why { margin-top: 8px; border-left: 3px solid var(--acc); background: var(--soft); border-radius: 0 8px 8px 0; }
.why > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px 0 12px; cursor: pointer; }
.why > summary::-webkit-details-marker { display: none; }

.unread li { display: flex; flex-direction: column; padding: 10px 0 0; border-bottom: 1px solid var(--hair); }

/* events */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.evs { margin-top: 8px; border-top: 1px solid var(--ink); }
.ev { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 11px 0 4px; border-bottom: 1px solid var(--hair); }

.ev-f { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.etags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.etag { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 3px 5px; background: var(--soft); border-radius: 3px; }
.ev-f .ext { font-size: 10.5px; }
@media (prefers-reduced-motion: no-preference) { .is-filtering .ev:not([hidden]) { animation: mw-rise .22s var(--ease) both; } }

/* generic rows */
.rows { border-top: 1px solid var(--hair); margin-top: 14px; }
.sh + .rows { border-top: 0; margin-top: 0; }
.rows > li { padding: 12px 0 2px; border-bottom: 1px solid var(--hair); }

/* police: the week's counts (the Week tab, the letter's counts without the scan) */
.counts { width: 100%; border-collapse: collapse; margin-top: 14px; }
.counts th, .counts td { padding: 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: bottom; }
.counts thead th { font: 600 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--ink); }
.counts thead th span { display: block; letter-spacing: .02em; text-transform: none; font-weight: 400; margin-top: 2px; }
.counts thead th + th, .counts td { text-align: right; padding-left: 12px; }
.counts tbody th { font-size: 14.5px; font-weight: 600; }
.counts td { font: 700 17px/1.2 var(--mono); }
.counts td + td { color: var(--ink-soft); font-weight: 400; }
.counts-cat { margin-top: 22px; }
.counts-cat tbody th { font-size: 14px; }
.counts-cat tbody th .cl-dot { margin-right: 5px; vertical-align: 0; }

/* police: the map (owner 2026-09-25). Three pin colours, validated for colour-blind readers in both modes (the map's limit
   is three; POLICE, AN APP sets them); a ring marks an arrest. The base map is one cached SVG whose layers inherit these
   fills and strokes through <use>. --k is map units per screen pixel, set by tool.js as the reader zooms, so labels keep
   their size. */
.dot-crime { background: var(--g-crime); } .dot-traffic { background: var(--g-traffic); } .dot-other { background: var(--g-other); }
.cl-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.ring-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }
.pmap-svg { display: block; width: 100%; height: 100%; --k: 2; cursor: grab; }
.pm-ground { fill: var(--map-land); }
.pm-water { fill: var(--map-water); stroke: none; }
.pm-streets { fill: none; stroke: var(--map-st); stroke-width: .8px; stroke-linejoin: round; stroke-linecap: round; }
.pm-major { fill: none; stroke: var(--map-major); stroke-width: 1.7px; stroke-linejoin: round; stroke-linecap: round; }
.pm-freeway { fill: none; stroke: var(--map-fwy); stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; }
.pm-rail { fill: none; stroke: var(--ink-faint); stroke-width: .8px; stroke-dasharray: 2 3; }
.pm-veil { fill: var(--map-veil); fill-opacity: .78; stroke: none; }
.pm-limits { fill: none; stroke: var(--acc); stroke-width: 1px; stroke-dasharray: 5 4; stroke-opacity: .7; }
.pm-labels { fill: var(--ink-soft); font-family: var(--mono); font-weight: 600; font-size: calc(var(--k) * 8.5px); letter-spacing: .12em;
  stroke: var(--map-land); stroke-width: calc(var(--k) * 3px); stroke-linejoin: round; paint-order: stroke; pointer-events: none; }
.pin { stroke: var(--map-land); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.pin-crime { fill: var(--g-crime); } .pin-traffic { fill: var(--g-traffic); } .pin-other { fill: var(--g-other); }
.ring { fill: none; stroke: var(--ink); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.pm-pins, .pm-rings { pointer-events: none; }
.pm-sel circle { fill: none; stroke: var(--acc); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
/* the reader desk's pop-up title (tool.js) still takes its colour and no-wrap from this rule */
.pop-t { font: 600 11px/1.3 var(--mono); color: var(--ink-soft); white-space: nowrap; }
/* a charge from the arrest log: our words, its weight, the department's code and words */
.chg { margin-top: 6px; padding: 0; list-style: none; }
.chg li { padding: 6px 0 0; }
.chg-p { font-size: 14px; line-height: 1.35; }
.chg-s { display: inline-block; margin-left: 8px; font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--hair); border-radius: 3px; padding: 3px 5px; vertical-align: 2px; }
.chg-c { display: block; font: 500 10.5px/1.35 var(--mono); color: var(--ink-soft); margin-top: 2px; }

/* gas */

.g { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 44px; gap: 12px; align-items: center; padding: 11px 0 !important; }
.js [data-gas][data-show="home"] > [data-scope="near"] { display: none; }
/* the renderer prints the Martinez-only default, so with scripts on the other cities' rows (and their logos) never load
   before tool.js filters; without scripts every row shows (audit 05 A3) */
@media (scripting: enabled) { [data-gas][data-show="home"] > [data-scope="near"] { display: none; } }

.g-dir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 44px; height: 44px;
  border: 1px solid var(--hair); border-radius: var(--r-ctl); background: var(--card); color: var(--acc-t); text-decoration: none;
  font: 700 8.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.g-dir .ico { width: 17px; height: 17px; }
.g-dir:hover { border-color: var(--acc); }
.g-logo { width: 36px; height: 36px; border-radius: var(--r-ctl); object-fit: contain; background: #fff; border: 1px solid var(--hair); }
/* a logo's plate in dark mode: a warm paper, never a pure white glare (audit 05 B14) */
@media (prefers-color-scheme: dark) { .g-logo:not(.g-logo-none) { background: #f2ece2; border-color: #f2ece2; } }
.g-logo-none { display: grid; place-items: center; background: var(--soft); color: var(--ink-soft); }
.g-logo-none .ico { width: 18px; height: 18px; }
.g-b { min-width: 0; }
.g-n { font: 700 15px/1.3 var(--sans); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.g-a { font-size: 13px; color: var(--ink-soft); margin-top: 1px; }
.g-t { font: 500 10px/1.3 var(--mono); letter-spacing: .06em; color: var(--ink-soft); margin-top: 2px; text-transform: uppercase; }
.g-town { color: var(--ink); font-weight: 600; }
.g-p { font: 700 21px/1 var(--mono); letter-spacing: -.03em; text-align: right; }

/* issues */
.iss-no { display: flex; justify-content: space-between; gap: 10px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.iss-no span:first-child { color: var(--acc-t); }
.iss-h { font: 700 16.5px/1.3 var(--sans); margin-top: 4px; }
.iss-d { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.iss-w { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

/* sources */
.srcrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0 !important; }
.src-b { min-width: 0; }
.src-n .ext, .src-n .slip-plain { font-size: 11.5px; }
.src-n .slip-plain { min-height: 44px; }
.src-w { font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.src-s { margin-top: 6px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.src-s .tag { margin-left: 4px; }

/* ---------------------------------------------------------------- page heads */
.phead { max-width: 1280px; margin: 0 auto; padding: 22px var(--gut) 4px; }
.phead h1 { font: 800 28px/1.1 var(--sans); letter-spacing: -.022em; margin: 8px 0 8px; }
.phead .deck { color: var(--ink-soft); margin-bottom: 16px; max-width: 62ch; }
.phead .slip { max-width: 640px; }

/* ---------------------------------------------------------------- calendar: the day strip */
/* the calendar (owner 2026-09-25: "one really well built and pretty calendar"): the introduction, the week card
   with the weather folded in, the day; on a desktop the week card stands beside the introduction and the day */
/* ONE calendar card (owner 2026-09-25): the week, its weather and the picker, then the day's listings, then where
   they come from — stacked together on every screen ("not side by side… together as one card") */
.calcard { margin: 0 10px; background: var(--card); border: 1px solid var(--hair); border-radius: 10px; box-shadow: var(--shadow); }
.cc-day { padding: 0 12px; border-top: 1px solid var(--hair); }
.cc-filt + .cc-day { border-top: 0; }
/* the tags: one row the reader swipes, its end fading while there is more (tool.js) */
/* the filter (owner 2026-09-26, "rethink it"): one slim bar — a button that reads what is showing and the day's
   count — that sticks under the menu bar; the choices live in a sheet (a sheet from the bottom on a phone, a small
   dialog on a desktop): Where, with Nearby's cities as underlined names, and What. */
.cc-filt { position: sticky; top: 52px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--card); border-top: 1px solid var(--hair); transition: box-shadow .15s; }
.js .cc-filt.js-only { display: flex; }   /* the js-only rule sets block; this bar is a row */
.cc-filt.is-stuck { box-shadow: 0 1px 0 var(--hair), 0 10px 14px -12px rgba(44, 38, 32, .45); }
.fsum { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 12px 0 10px; border: 1px solid var(--hair);
  border-radius: var(--r-ctl); background: var(--soft); color: var(--ink); cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fsum-t { white-space: normal; text-align: left; text-wrap: balance; line-height: 1.35; padding: 6px 0; }
.fsum-ico { width: 16px; height: 16px; color: var(--acc); }
.fsum-dn { width: 14px; height: 14px; color: var(--ink-soft); }
.fsum.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fsum.is-on .fsum-ico, .fsum.is-on .fsum-dn { color: var(--paper); }
.fcount { flex: none; margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.fsheet { width: 100%; max-width: 100%; max-height: 86vh; margin: auto 0 0; padding: 0; border-radius: 10px 10px 0 0; }
.fsheet[open] { display: flex; flex-direction: column; }
.fsheet::backdrop { background: rgba(13, 17, 23, .5); }
.fs-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--hair); }
.fs-t { font: 800 18px/1.2 var(--sans); letter-spacing: -.01em; }
.fs-reset { min-height: 40px; padding: 0 8px; border: 0; background: none; cursor: pointer; color: var(--acc-t); font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
/* every filter sheet has a Close beside Reset, and on a phone a grab handle to drag it down (audit 02 A18) */
.fs-top > .fs-t { margin-right: auto; }
.fs-x { color: var(--ink); }
.fs-grab + .fs-top { padding-top: 6px; }
.fsheet[data-fs-drag] { transition: transform .18s var(--ease); }
@media (min-width: 720px) { .fs-grab { display: none; } }
@media (prefers-reduced-motion: reduce) { .fsheet[data-fs-drag] { transition: none; } }
.fs-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 8px; }
/* the sheet's rows (owner 2026-09-26: "several choices at once… a cleaner menu"): squared checkboxes, the name, and how
   many listings the row would show */
.fs-g { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.fs-gh { width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--hair); }
.fs-k { padding: 0; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.fs-q { min-height: 36px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--acc-t); font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.fs-hint { font-size: 12px; color: var(--ink-soft); text-align: right; }
.fs-o { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 2px; border-bottom: 1px solid var(--hair); cursor: pointer; color: var(--ink); }
.fs-cb { position: absolute; left: 2px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.fs-box { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ink-soft); border-radius: 4px; background: var(--card); transition: background .12s, border-color .12s; }
.fs-cb:checked + .fs-box { background: var(--ink); border-color: var(--ink); }
.fs-cb:checked + .fs-box::after { content: ""; display: block; width: 5px; height: 10px; margin: 2px 0 0 6px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fs-cb:focus-visible + .fs-box { outline: 2px solid var(--acc); outline-offset: 2px; }
.fs-l { flex: 1; min-width: 0; font: 16px/1.25 var(--sans); }
.fs-cb:checked ~ .fs-l { font-weight: 700; }
.fs-n { flex: none; font: 600 11px/1 var(--mono); color: var(--ink-soft); }
.fs-n:empty { display: none; }
.fs-foot { flex: none; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
.fs-done { width: 100%; }
.fs-done:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .fs-o:hover .fs-box { border-color: var(--ink); } }
@media (min-width: 720px) { .fsheet { width: 440px; margin: auto; border-radius: 10px; max-height: calc(100vh - 80px); } }
/* today's page: what has ended steps back, and a thin line marks now (tool.js initNow; the source's own times only) */
/* an ended listing steps back in colour, never by fading, so every word keeps AA contrast in light and dark (audit 02 A16),
   and it offers no calendar file (B3) */
.tl-r.is-past .tl-b { border-left-color: var(--hair); }
.tl-r.is-past .tl-b::before { background: var(--ink-faint); }
.tl-r.is-past :is(.tl-k, .tl-city, .tl-t, .tl-h, .tl-c, .tl-p, .ext) { color: var(--ink-soft); }
.tl-r.is-past .tl-h { font-weight: 600; }
.tl-r.is-past .ev-cal { display: none; }
.tl-ended { margin-left: 8px; padding: 1px 5px; border: 1px solid var(--hair); border-radius: 4px; color: var(--ink-soft); font-size: 9px; letter-spacing: .1em; }
.tl-now { position: relative; display: flex; align-items: center; gap: 10px; margin: 2px 0; padding: 6px 0; color: var(--acc-t);
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.tl-now::after { content: ""; flex: 1; height: 1px; background: var(--acc); }
/* a listing's own calendar file ("+ Calendar"), beside its source */
.ev-cal { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-soft); text-decoration: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ev-cal:hover { color: var(--acc-t); }
.ev-f .ev-cal { margin-left: 2px; }
.ev-cal > span[aria-hidden] { margin-right: 4px; }
/* an empty day: the nearest days that have something, one tap away */
.cc-gos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 6px; }
.cc-go { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 7px;
  background: var(--card); color: var(--ink); text-decoration: none; }
.cc-go:hover { border-color: var(--ink-soft); }
.cc-go .ico { flex: none; width: 16px; height: 16px; color: var(--acc); }
.cc-go > span { display: grid; gap: 3px; min-width: 0; }
.cc-go-next { justify-content: flex-end; text-align: right; grid-column: 2; }
.cc-go-d { font: 700 14px/1.25 var(--sans); }
.cc-go-n { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
/* nothing matches the filter: say so, and offer the two ways back */
.cc-nomatch { padding: 18px 0 6px; }
.js .cc-gos.js-only { display: grid; }
.cc-nomatch .cc-gos { margin-top: 12px; }
/* a thin Martinez day ends with what else the day holds nearby (audit 02 C1) */
.js .cc-more.js-only { display: flex; }
.cc-more { flex-wrap: wrap; align-items: center; gap: 0 6px; padding: 10px 0 2px; font: 600 10px/1.4 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.cc-more-s { color: var(--ink-faint); }
.cc-more-b { min-height: 40px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--acc-t); font: inherit; letter-spacing: inherit;
  text-transform: inherit; }
@media (hover: hover) { .cc-more-b:hover { text-decoration: underline; text-underline-offset: 3px; } }
.cc-asof { padding: 12px 0 0; }
.cc-nm-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.js .cc-nm-go.js-only { display: flex; }   /* the js-only rule sets block; this is a row of two buttons */
.cc-nm-go button { min-height: 40px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 7px; background: var(--card); color: var(--ink); cursor: pointer;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cc-nm-go button:hover { border-color: var(--ink-soft); }
/* the calendar as an app (tool.js adds .cal-app on a phone, and on a wider screen at least 560 px tall): the page
   never scrolls, only the day does. A phone's card runs edge to edge; a desktop's keeps its frame, centered. */
html.cal-app, html.cal-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.cal-app body { display: flex; flex-direction: column; height: 100dvh; }
html.cal-app .mast, html.cal-app .alerts { flex: none; }
html.cal-app main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.cal-app .cal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.cal-app .calcard { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.cal-app .cc-week, html.cal-app .cc-filt { flex: none; }
html.cal-app .cc-filt { position: relative; top: auto; box-shadow: 0 1px 0 var(--hair); }
html.cal-app .cc-day { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 0; }
/* a short day keeps the footer at the card's foot, not floating halfway up */
html.cal-app .cc-day { display: flex; flex-direction: column; }
html.cal-app .cc-day > * { flex: none; }
html.cal-app .cc-day > .cc-src { margin-bottom: 18px; }
html.cal-app .cc-day > .foot { margin-top: auto; }
/* the calendar's first frame (early.js, audit 02 A5): until tool.js has applied the filter, Martinez alone shows (every
   visit's start); another saved choice keeps the day's listings out of sight; a phone's footer waits for its place */
html.cal-pre .tl-r:not([data-city="martinez"]) { display: none; }
html.cal-hold .tl { visibility: hidden; }
html.cal-pre .cc-src { visibility: hidden; }   /* the day's foot appears once the lines above it are placed: no shift */
@media (max-width: 719px) { html.cal-pre body > .foot { display: none; } }
@media (max-width: 719px) {
  html.cal-app .calcard { margin: 0; border-width: 0; border-radius: 0; box-shadow: none; }
  html.cal-app .cc-day > .foot { margin-left: -12px; margin-right: -12px; }
}
@media (min-width: 720px) {
  /* a desktop keeps the footer as the page's own bar across the bottom (tool.js leaves it out of the day) */
  html.cal-app body > .foot { flex: none; margin-top: 0; }
  html.cal-app .cal { width: 100%; padding-bottom: 12px; }
  html.cal-app .calcard { width: 100%; margin-top: 12px; overflow: hidden; }
  html.cal-app .cc-day > .cc-src { margin-bottom: 6px; }
  /* slightly more compact on a desktop (owner 2026-09-26): shorter day tiles, weather line, filter bar and entries */
  .p-calendar .dc { min-height: 54px; padding: 5px 0; gap: 2px; }
  .p-calendar .strip { padding-bottom: 4px; }
  .p-calendar .sw-l { padding: 5px 0; }
  .p-calendar .strip-wx a { min-height: 32px; }
  .p-calendar .tl { margin-top: 6px; }
  .p-calendar .tl-r { padding: 7px 0 2px; }
  .p-calendar .tl-b .ext, .p-calendar .tl-b .cc-a { min-height: 32px; }
}
/* the day as an agenda on a desktop (owner 2026-09-26: "make the calendar card more optimized for desktop"): the city
   and time in a column of their own, the listing beside them, and on a wide screen its tags and source at the right,
   so an entry takes about a third less height; nothing is hidden or cut */
@media (min-width: 900px) {
  .p-calendar .tl-b { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 22px; row-gap: 0; align-items: start; }
  .p-calendar .tl-b > * { grid-column: 2; }
  .p-calendar .tl-k { grid-column: 1; grid-row: 1 / span 8; font-size: 0; padding-top: 3px; }
  .p-calendar .tl-k > span { display: block; font-size: 10.5px; line-height: 1.55; }
  .p-calendar .tl-k > .tl-ended { display: inline-block; margin: 4px 0 0; font-size: 9px; line-height: 1.4; }
  .p-calendar .tl-h { margin-top: 0; }
}
@media (min-width: 1100px) {
  /* the right column is uniform on every listing (owner 2026-09-26: "aligned… not spilling over into other lines.
     Must be uniformed"): three right-aligned lines, always in this order and never wrapped — the kinds, the source,
     + Calendar — in a column wide enough for the longest source name */
  .p-calendar .tl-b { grid-template-columns: 160px minmax(0, 1fr) 310px; }
  .p-calendar .tl-b > .ev-f { grid-column: 3; grid-row: 1 / span 8; display: flex; flex-direction: column; align-items: flex-end;
    gap: 7px; padding-top: 1px; text-align: right; }
  .p-calendar .tl-b > .ev-f .etags { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; margin: 0; }
  .p-calendar .tl-b > .ev-f .ext, .p-calendar .tl-b > .ev-f .ev-cal { min-height: 0; white-space: nowrap; font-size: 10px; letter-spacing: .06em; line-height: 1.3; }
  .p-calendar .tl-b > .ev-f .ev-cal { margin: 0; }
}
.cc-none { padding: 16px 0 4px; }
.cc-src { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 600 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.cc-a { display: inline-flex; align-items: center; min-height: 40px; color: var(--acc-t); text-decoration: none; }
/* "Something missing? Tell the Wire" under the day's foot (owner's ruling (g)): the Tip line, quiet */
.cc-tell { display: flex; flex-wrap: wrap; align-items: center; column-gap: .7em; font-size: 13.5px; color: var(--ink-soft); }
html.cal-app .cc-day > .cc-src { margin-bottom: 0; }
html.cal-app .cc-day > .cc-tell { margin-bottom: 14px; }
html.cal-pre .cc-tell { visibility: hidden; }
@media (min-width: 720px) { html.cal-app .cc-day > .cc-tell { margin-bottom: 6px; } }
/* the Wire's day and a council meeting on one tile: both marks, side by side */
.dc-mks { display: flex; gap: 2px; }
/* under the month grids: this weekend, and the Martinez calendar feed */
.mg-jump { margin-top: 8px; }
.mg-feed { margin-top: 2px; font-size: 12.5px; }
.mg-feed a { color: var(--acc-t); }
/* the card's top row: Earlier, the month (it opens the picker), Today and Later */
.cc-week { position: relative; }
.cc-nav, .cc-r { position: absolute; z-index: 1; top: 0; height: 44px; padding: 0 4px; display: flex; align-items: center; gap: 2px; }
.cc-nav { left: 0; }
.cc-r { right: 0; }
.cc-week .pick { border-top: 0; }
.cc-week .pick summary { min-height: 44px; color: var(--ink-soft); font-weight: 700; }
/* the month picker (audit 02 B1) opens OVER the week and the day, so nothing under it moves; one month at a time on a
   phone, two side by side from 720 px in a panel no wider than it needs */
.cc-week .pick-in { position: absolute; z-index: 8; top: 44px; left: 0; right: 0; max-height: min(78vh, 560px); overflow-y: auto;
  overscroll-behavior: contain; background: var(--card); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  box-shadow: 0 18px 28px -18px rgba(44, 38, 32, .55); }
@media (prefers-color-scheme: dark) { .cc-week .pick-in { box-shadow: 0 18px 28px -16px rgba(0, 0, 0, .8); } }
@media (min-width: 720px) {
  .cc-week .pick-in { left: 50%; right: auto; width: min(640px, calc(100% - 24px)); transform: translateX(-50%);
    border: 1px solid var(--hair); border-radius: 10px; }
}
@keyframes pk-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .cc-week .pick[open] .pick-in { animation: pk-in .16s var(--ease) both; } }
.st-nav, .st-today {
  display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 7px; border-radius: var(--r-ctl);
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); text-decoration: none;
}
.st-nav .ico { width: 18px; height: 18px; }
.st-nav.is-off { color: var(--ink-faint); }
.st-today { color: var(--acc-t); }   /* text like Earlier and Later (audit 02 B16) */
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 6px 6px; }
.dc {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 64px; padding: 7px 0 7px;
  border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .15s;
}
a.dc:hover { background: var(--soft); }
.dc-w { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.dc-n { font: 800 19px/1 var(--sans); letter-spacing: -.02em; }
.dc-m { min-height: 15px; display: flex; align-items: center; justify-content: center; gap: 2px; font: 500 10.5px/1 var(--mono); color: var(--ink-soft); }
/* the day's sky and high; a council meeting or the Wire takes the sky's place */
.dc-sky, .dc-mk .ico { width: 14px; height: 14px; flex: none; color: var(--acc); }
.dc-mk { display: grid; }
.dc.is-sel .dc-mk .ico, .dc.is-sel .dc-sky { color: var(--term-acc); }
/* TODAY, CLEARLY (owner, Mon Sep 28, 2026: "Have the calendar show the current day more clearly. Its tough to tell with that
   little dot"): today's tile reads TODAY in the accent where its weekday sits, its date in the accent, inside a 2 px accent
   line; the selected tile keeps its terminal fill with the same words and line in the terminal accent. The word "Today"
   stays in the tile for screen readers only. tool.js moves `is-today` to the reader's own day after midnight. */
.dc-today { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dc.is-today { box-shadow: inset 0 0 0 2px var(--acc); }
.dc.is-today .dc-w { font-size: 0; }
.dc.is-today .dc-w::after { content: "Today"; font-size: 10px; color: var(--acc-t); }
.dc.is-today .dc-n { color: var(--acc); }
.dc.is-sel { background: var(--term); color: var(--term-ink); }
.dc.is-sel .dc-w, .dc.is-sel .dc-m { color: var(--term-muted); }
.dc.is-sel.is-today { box-shadow: inset 0 0 0 2px var(--term-acc); }
.dc.is-sel.is-today .dc-w::after, .dc.is-sel.is-today .dc-n { color: var(--term-acc); }
.dc.is-off { opacity: .38; }

/* the chosen day's weather, one line; rain only when there is some */
.strip-wx { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; border-top: 1px solid var(--hair);
  font: 600 10.5px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sw-ico { width: 18px; height: 18px; flex: none; color: var(--acc); }
/* A FIXED WEEK (owner, Mon Sep 28, 2026): on the Calendar the weather line sits at the top of the day, so a rainy day's
   second line, or a day past the forecast, changes only the day's own pane, never the week above it; the copy in #week
   serves the landing's pull-up sheet */
.p-calendar .cc-week .strip-wx { display: none; }
.cc-day > .cc-wx { margin: 0 -12px; padding-left: 14px; border-top: 0; }
.tl:empty { display: none; }
.sw-l { flex: 1; min-width: 0; padding: 8px 0; }
.sw-l > span { white-space: nowrap; }
.sw-t, .sw-n { color: var(--ink); }
.sw-sep { color: var(--ink-faint); }
.sw-src { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; color: var(--acc-t); text-decoration: none; }
.pick { border-top: 1px solid var(--hair); }
.pick summary {
  list-style: none; cursor: pointer; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.pick summary::-webkit-details-marker { display: none; }
.pick-ico { width: 16px; height: 16px; color: var(--acc); transition: transform .2s var(--ease); }
.pick[open] .pick-ico { transform: rotate(180deg); }
.pick-in { padding: 4px 12px 14px; }

.mgs { display: grid; gap: 14px; }
.mg-t { font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.js .mgs { position: relative; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; }
.js .mgs::-webkit-scrollbar { display: none; }
.js .mg { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; padding: 0 2px; }
.js .mg-t { display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 0 0 2px; }
.mg-arw { position: absolute; z-index: 1; top: 4px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 7px; background: none; color: var(--acc-t); cursor: pointer; }
.js .mg-arw.js-only { display: grid; }
.mg-arw { left: 8px; }
.mg-arw-n { left: auto; right: 8px; }
.mg-arw .ico { width: 18px; height: 18px; }
.mg-arw:disabled { color: var(--ink-faint); cursor: default; }
@media (hover: hover) { .mg-arw:not(:disabled):hover { background: var(--soft); } }
@media (min-width: 720px) { .js .mg { flex-basis: 50%; padding: 0 10px; } }
.mg-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mg-h { text-align: center; font: 600 9.5px/2 var(--mono); color: var(--ink-soft); }
.mg-c {
  position: relative; display: grid; place-items: center; height: 40px; border-radius: 7px;
  font: 600 13px/1 var(--mono); color: var(--ink); text-decoration: none;
}
a.mg-c { background: var(--soft); }
a.mg-c:hover { outline: 1px solid var(--ink-faint); }
.mg-c.is-off { color: var(--ink-faint); }
.mg-c.is-today { box-shadow: inset 0 0 0 2px var(--acc); color: var(--acc-t); font-weight: 800; }
.mg-c.is-sel { background: var(--term); color: var(--term-ink); }
.mg-dot { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; }
.mg-c .mg-dot + .mg-dot { margin-left: 8px; }
.mg-c .mg-mail { margin-left: -8px; }
.mg-city { background: var(--acc); }
.mg-mail { background: var(--ink); }
.mg-c.is-sel .mg-mail { background: var(--term-ink); }
.mg-key { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.mg-key span { display: inline-flex; align-items: center; gap: 6px; }
.mg-key .mg-dot { position: static; }

/* ---------------------------------------------------------------- city hall */

.mtgs { margin-top: 12px; border-top: 1px solid var(--ink); }

/* tools (search, sort) */
.tools { margin: 16px 0 6px; padding: 14px; background: var(--card); border: 1px solid var(--hair); border-radius: 10px; box-shadow: var(--shadow); }
.tool-l { display: block; font: 600 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.tool-i, .tool-s {
  width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--ink-soft); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--ink); font: 16px var(--sans);
}
.tool-s { font-size: 15px; }
.tool-i::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tool-i:focus, .tool-s:focus { outline: 2px solid var(--acc); outline-offset: 0; border-color: var(--acc); }
.tool-f + .tool-f { margin-top: 12px; }

.tool-n { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.js-only { display: none; }
.js .js-only { display: block; }
.js .chips.js-only { display: flex; }


/* ---------------------------------------------------------------- the pull-up sheet (JS only) */
.bs { position: fixed; inset: 0; z-index: 80; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; overflow: hidden; overflow: clip; }
/* clip, not only hidden: focusing the sheet's body scrolled the full-screen layer and lifted the panel off the bottom */
.bs::backdrop { background: rgba(13, 17, 23, 0); transition: background .25s; }
.bs.is-in::backdrop { background: rgba(13, 17, 23, .5); }
.bs-panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64vh; height: 64dvh; max-height: calc(100dvh - 12px);
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .5);
  transform: translateY(100%); transition: transform .3s var(--ease), height .26s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.bs.is-in .bs-panel { transform: translateY(0); }
.bs.is-drag .bs-panel { transition: none; }
.bs-grab { flex: none; display: flex; justify-content: center; align-items: center; height: 26px; cursor: grab; touch-action: none; }
.bs-grab span { width: 42px; height: 5px; border-radius: 3px; background: var(--ink-faint); }
.bs-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 8px var(--gut); border-bottom: 1px solid var(--hair); touch-action: none; }
/* one sheet header on the whole site (audit 05 B5): the title as every sheet's (.fs-t), then quiet mono words, never a box or a
   round ×: "Full page →" in the accent like Reset, "Close" in ink like every sheet's Close */
.bs-t { flex: 1; min-width: 0; font: 800 18px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); overflow-wrap: break-word; }   /* never cut: a long title wraps */
.bs-full, .bs-x { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-ctl); background: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.bs-full { color: var(--acc-t); }
.bs-x { color: var(--ink); }
.bs-full > span { margin-left: .45em; }
.bs-x:hover, .bs-full:hover { background: var(--soft); }
.bs-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 28px; }
.bs-body:focus { outline: none; }
.bs-body .sheet { padding-top: 16px; }
.bs-load { padding: 40px var(--gut); color: var(--ink-soft); font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
/* offline, after the quiet retries: one plain button that loads the card's page again (audit 05 A10.1) */
.bs-again { display: inline-flex; align-items: center; min-height: 44px; margin: 32px var(--gut) 0; padding: 0 16px; border: 1px solid var(--ink-soft);
  border-radius: 7px; background: none; color: var(--ink); cursor: pointer; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.bs-again:hover { background: var(--soft); }
.bs-again:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bs-panel, .bs::backdrop { transition: none; } }

/* ---------------------------------------------------------------- footer */
/* ONE line on every width (owner, Tue Sep 29, 2026: "footer on mobile, find a way to make it one line. get rid of the sign up
   button"; then the full coffee words on a phone, option 3, "cup is approved"): on a phone Past issues, Tip line, Ask the
   Wire and a small cup with "Buy the Wire a coffee ↗", in the sans, sentence case, 11-13 px with the width, spread evenly,
   44 px tall, a 12 px gutter under 390 px, the name left to the menu bar; from 900 px the logo, the links in small mono
   capitals and the cup with the coffee's words at the right. No Join, no fact (the local facts turn up as easter eggs while
   browsing, .egg below). */
.foot { margin-top: 28px; background: var(--term); color: var(--term-muted); }
/* on a short page the footer sits on the window's bottom edge, never above a band of paper (owner, Mon Sep 28, 2026: "the
   footer is floating off the bottom"); the four app pages lock their own height and keep their own rules */
html:not(.cal-app):not(.ch-app):not(.gs-app):not(.pl-app) body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
html:not(.cal-app):not(.ch-app):not(.gs-app):not(.pl-app):not(.nw-app) body > main { flex: 1 0 auto; }
/* the links stand at least 12 px apart, spread evenly; a row that could not fit would wrap whole, never cut (a guard: it fits
   from 360 px) */
.foot-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut) env(safe-area-inset-bottom); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 0 12px; }
.foot-top, .foot-nav { display: contents; }
.foot-logo { display: none; min-height: 44px; align-items: center; }
.foot-logo .logo-svg { height: 15px; }
@media (max-width: 389px) { .foot-in { padding-left: 12px; padding-right: 12px; } }
.foot-nav > a { order: 1; display: flex; align-items: center; min-height: 44px; color: var(--term-muted); text-decoration: none;
  font: 500 clamp(11px, 2.95vw, 13px)/1 var(--sans); letter-spacing: 0; white-space: nowrap; }
.foot-nav .fn-b { order: 1; min-height: 44px; font: 500 clamp(11px, 2.95vw, 13px)/1 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.foot-nav > a:hover { color: var(--term-ink); }
.foot .ext-foot { order: 2; display: flex; align-items: center; min-height: 44px; color: var(--term-acc); text-decoration: none;
  font: 500 clamp(11px, 2.95vw, 13px)/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; }
.foot .xf-i { flex: none; width: 14px; height: 14px; margin-right: 4px; stroke-width: 1.6; }   /* the cup */
.foot .xf-l { margin-right: .3em; }   /* a flex item drops its trailing space */
.foot .ext-foot:hover { text-decoration: underline; }
.foot .ext-foot span[aria-hidden] { margin-left: .25em; }   /* a flex item drops its leading space: the ↗ keeps its gap */
.foot .foot-mock { order: 4; flex-basis: 100%; color: var(--term-ink); }   /* previews only: under the footer's own line */
.foot .foot-mock a { border-color: #30363d; color: var(--term-ink); }
.foot .mock-on { background: var(--term-ink); color: var(--term); }
@media (min-width: 900px) {
  /* the footer on a desktop: one slim bar across the bottom; the menu bar carries the pages, so the footer does not repeat them */
  .foot-in { justify-content: flex-start; gap: 0 28px; padding-top: 2px; padding-bottom: 2px; }
  .foot-logo { display: inline-flex; order: 0; min-height: 40px; margin-right: 8px; }
  .foot-logo .logo-svg { height: 14px; }
  .foot .ext-foot { margin-left: auto; min-height: 32px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
  .foot .xf-i { width: 13px; height: 13px; margin-right: 6px; }
  .foot .xf-l { margin-right: .35em; }
  .foot .ext-foot span[aria-hidden] { margin-left: .35em; }
  .foot-nav > a, .foot-nav .fn-b { min-height: 32px; font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
}
/* the preview's data-set switcher (previews only), one quiet row under the footer's own */
.foot-mock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0 4px; border-top: 1px solid #21262d; }
.foot-mock p + p { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-mock a, .mock-on { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 7px; font: 600 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
@media (min-width: 900px) { .foot-mock a, .mock-on { min-height: 28px; font-size: 9.5px; } }
.mock-on { background: var(--ink); color: var(--paper); }
.foot-mock a { border: 1px solid var(--ink-soft); color: var(--ink); }

/* ---------------------------------------------------------------- the local fact, an easter egg (owner, Mon Sep 28, 2026)
   A quiet spot at a list's end on the app pages, Past issues and Sources: empty and hidden in the page; tool.js fills ONE on
   about one page view in three from facts.json, only where it moves nothing the reader is reading, and fades it in when it
   comes into view (no fade under Reduce Motion). The not-here page prints the day's fact in the same card. */
.egg { max-width: 600px; margin: 18px 0 20px; padding: 12px 14px 2px; border-radius: 7px; background: var(--soft); }
.egg[hidden] { display: none; }
.egg-k { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.egg-k::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--acc); }   /* the brand's square */
.egg-t { margin: 6px 0 0; font: 400 15px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }
.egg-s { margin: 0; }
.egg-s .ext { min-height: 40px; font-size: 10.5px; }
.egg.is-wait { opacity: 0; }
/* on a plain page (Past issues, Sources, not here) the card lines up with the sheets' text */
.page-col > .egg { margin: 26px var(--gut) 0; }
@media (min-width: 720px) { .page-col > .egg { margin-left: max(var(--gut), calc((100% - 820px) / 2 + var(--gut))); } }
@media (min-width: 1100px) { .page-col > .egg { margin-left: max(var(--gut), calc((100% - 1280px) / 2 + var(--gut))); } }
.gs-pane > .egg { margin-top: 16px; }

/* ---------------------------------------------------------------- narrow phones (360) */
@media (max-width: 374px) {
  :root { --gut: 16px; }
  .hero h1 { font-size: 31px; }
  .hero-h { margin: 6px 0 10px; }
  .proof { margin-top: 14px; padding-top: 12px; }
  body { --btn-w: 88px; }
  .jt { font-size: 12px; padding: 0 11px; }
  .join-back { font-size: 9.5px; }
  .stamp-door { width: 74px; height: 74px; grid-template-rows: 1fr 20px 1fr; }
  .terms dd { font-size: 13px; }
  .mast .logo-svg { width: 92px; }
  .mast .lg-m { display: none; }
  .mast .lg-w, .mast .typing .lg-w { transform: translateX(-11097px); animation: none; }
  .btn { min-width: 88px; padding: 0 14px; }
  .dc-n { font-size: 17px; }
}

/* ---------------------------------------------------------------- tall phones: the sign-up fills the stage
   (owner 2026-09-25: "the home page sign-up focused and beautifully displayed"); one uniform step up in scale
   where there is room, so the door never floats small in the middle of a tall screen */
@media (min-width: 385px) and (max-width: 719px) and (min-height: 790px) {
  /* the headline grows with the width, never past two lines beside the stamp */
  .hero h1 { font-size: min(9.2vw, 40px); }
  .stamp-door { width: 84px; height: 84px; grid-template-rows: 1fr 22px 1fr; }
  .stamp-door .st-t { font-size: 9.5px; } .stamp-door .st-d { font-size: 10.5px; } .stamp-door .st-h { font-size: 11px; }
  .hero-h { margin: 14px 0 20px; }
  .hero .deck { font-size: 17px; line-height: 1.48; margin-bottom: 24px; }
  .p-home .join-label { font-size: 11px; margin-bottom: 8px; }
  .p-home .join-row input { height: 58px; font-size: 17px; }
  .p-home .join-row .btn { height: 58px; }
  .proof { margin-top: 26px; padding-top: 20px; }
  .proof-h { font-size: 18.5px; }
  .proof-p { font-size: 15px; margin: 8px 0 14px; }
  .proof-no li { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- tablets */
@media (min-width: 720px) {
  :root { --gut: 32px; }
  .hero h1 { font-size: 46px; }
  .stamp-door { width: 96px; height: 96px; grid-template-rows: 1fr 25px 1fr; }
  .stamp-door .st-t { font-size: 10px; } .stamp-door .st-d { font-size: 11px; } .stamp-door .st-h { font-size: 11.5px; }
  .mast-in { padding-right: var(--gut); }
  .tabs ul { gap: 4px; }
  .tabs a { width: auto; flex-direction: row; gap: 7px; padding: 0 12px; font-size: 9.5px; letter-spacing: .12em; }
  .tabs a::after { left: 12px; right: 12px; }
  .tab-ico { width: 16px; height: 16px; }

  .page-col .sheet { max-width: 820px; }
  .phead { max-width: 1280px; }
  .calcard { max-width: 820px; margin: 16px auto 0; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1100px) {
  :root { --gut: 40px; }
  body { font-size: 15.5px; }
  .mast-in { height: 56px; }
  .mast .logo-svg { height: 19px; }
  .mast-meta { display: block; } .mast-join { display: inline-flex; }
  .tabs { margin-left: auto; margin-right: 12px; }
  .logo-svg { height: 22px; }
  .foot-logo .logo-svg { height: 14px; }   /* the footer stays small (owner 2026-09-26) */

  html { scroll-padding-top: 112px; }
  .phead { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: end; padding-top: 44px; }
  .phead h1 { font-size: 40px; max-width: 22ch; }
  .phead .slip { margin-bottom: 16px; }
  .sheet .slip { max-width: 680px; }
  .cal { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
      .calcard { max-width: 1060px; margin: 28px auto 0; }
  .cc-filt { top: 56px; padding: 6px 28px; }
  .cc-day { padding: 0 28px; }
  .cc-day > .cc-wx { margin: 0 -28px; padding-left: 30px; }

  .page-col .sheet { max-width: 1280px; }

  .js .tools.js-only { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0 20px; align-items: end; max-width: 880px; padding: 18px 20px; }
  .js .tools.js-only .tool-f + .tool-f { margin-top: 0; }
  .js .tools.js-only .tool-n{ grid-column: 1 / -1; }
  .chk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 0 28px; padding: 16px 0; }

  .why{ grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: start; }

  .mtgs { max-width: 880px; }
  /* the pull-up sheet becomes a side panel */
  .bs-panel { left: auto; top: 0; width: min(560px, 100%); height: 100% !important; max-height: none; border-radius: 18px 0 0 18px; transform: translateX(100%); }
  .bs.is-in .bs-panel { transform: translateX(0); }
  .bs-grab { display: none; }
  .bs-head { padding-top: 12px; }
}

/* ---------------------------------------------------------------- the landing from 720 px (audit 01 A3 and A17, 05 C)
   The desktop composition brought down to the tablet and the small laptop, so a 768 or 1024 px screen reads as a composed
   page, never a stretched phone: the name very large over a heavy rule with the stamp at the rule's end, the deck and the
   join on the left, the promise on the right, Today in Martinez's four cards under both. The name is sized by the width
   AND the height (--hs), and the stamp by the name, so the two always sit together. The join's field is capped (at most
   about 520 px) and squared at 7 px like every control. */
@media (min-width: 720px) {
  .p-home .hero-main { width: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr auto;
    column-gap: 48px; align-content: start; }
  .p-home .hero-main > .kick { grid-column: 1 / -1; }
  .p-home .hero-h { grid-column: 1 / -1; position: relative; display: block; margin: 4px 0 16px; padding-bottom: 12px; border-bottom: var(--rule); }
  .p-home .hero h1 { font-size: var(--hs); line-height: .9; letter-spacing: -.05em; max-width: 7.9em; }
  .p-home .stamp-door { --sw: clamp(96px, calc(var(--hs) * 1.64), 150px); position: absolute; right: 6px; top: calc(50% - var(--sw) / 2); width: var(--sw); height: var(--sw); margin: 0;
    grid-template-rows: 1fr calc(var(--sw) * .255) 1fr; transform: rotate(-9deg); }
  .p-home .stamp-door .st-t { font-size: max(9px, calc(var(--sw) * .083)); padding-bottom: calc(var(--sw) * .04); }
  .p-home .stamp-door .st-d { font-size: max(9.5px, calc(var(--sw) * .1)); letter-spacing: .08em; }
  .p-home .stamp-door .st-h { font-size: max(9.5px, calc(var(--sw) * .1)); padding-top: calc(var(--sw) * .06); }
  .p-home .hero .deck { grid-column: 1; grid-row: 3; line-height: 1.45; max-width: 30em; }
  .p-home .join-box { grid-column: 1; grid-row: 4; align-self: start; max-width: 620px; }
  .p-home .join-row input, .p-home .join-row .btn { border-radius: 7px; }
  .p-home .proof { grid-column: 2; grid-row: 3 / span 2; align-self: start; margin: 0; padding: 4px 0 4px 32px; border-top: 0; border-left: 1px solid var(--hair); }
  .p-home .proof-h { line-height: 1.16; letter-spacing: -.02em; }
  .p-home .proof-no { flex-direction: column; gap: 7px; }
  .p-home .proof-no li { gap: 8px; }
  .p-home .td { grid-column: 1 / -1; grid-row: 5; }
}
/* the tablet and the small laptop (720 to 1099 px): the same page a size down; the four cards two by two, then four across
   from 900 px */
@media (min-width: 720px) and (max-width: 1099px) {
  .p-home .hero-in { padding-top: 14px; padding-bottom: 24px; }
  .p-home .hero-h { --hs: clamp(44px, min(7.2vw, 9vh), 76px); }
  .p-home .hero-main > .kick { font-size: 12px; }
  .p-home .hero .deck { font-size: 17px; margin: 0 0 14px; }
  .p-home .join-label { font-size: 11px; margin-bottom: 8px; }
  .p-home { --btn-w: 112px; }
  .p-home .proof-h { font-size: 21px; }
  .p-home .proof-p { font-size: 15px; line-height: 1.5; margin: 8px 0 12px; }
  .p-home .proof-no li { font-size: 14px; }
  .p-home .proof-no .ico { width: 17px; height: 17px; }
  .p-home .td { margin-top: 18px; padding-top: 12px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .p-home .hero-main { column-gap: 64px; }
  .tc-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .tc-t { gap: 6px; padding: 11px 12px 10px; }
  .tc-v { font-size: 22px; }
  .tc-s { font-size: 13px; }
  .tc-m { font-size: 11.5px; }
}
/* a short tablet or small laptop window (900 x 700, 1024 x 768): a little tighter, so the cards share the first screen */
@media (min-width: 720px) and (max-width: 1099px) and (max-height: 820px) {
  .p-home .hero-h { --hs: clamp(44px, min(7.2vw, 8.4vh), 76px); margin-bottom: 14px; padding-bottom: 10px; }
  .p-home .hero .deck { font-size: 16px; margin-bottom: 12px; }
  .p-home .td { margin-top: 14px; padding-top: 10px; }
}
/* a phone on its side (844 x 390, 932 x 430): the same page, short, so the join sits whole on the first screen */
@media (min-width: 720px) and (max-width: 1099px) and (max-height: 500px) {
  .p-home .hero-in { padding-top: 8px; }
  .p-home .hero-h { --hs: clamp(30px, 10vh, 44px); margin: 2px 0 10px; padding-bottom: 8px; }
  .p-home .stamp-door { --sw: 82px; }
  .p-home .hero .deck { font-size: 14.5px; line-height: 1.4; margin-bottom: 10px; }
  .p-home .join-label { font-size: 10.5px; margin-bottom: 6px; }
  .p-home .proof-h { font-size: 17px; }
  .p-home .proof-p { font-size: 13.5px; line-height: 1.45; margin: 6px 0 8px; }
  .p-home .proof-no { gap: 5px; }
  .p-home .proof-no li { font-size: 12.5px; }
}

/* the landing on a desktop, the cards whole on the first screen (owner, Mon Sep 28, 2026: "I want them to all fit on the
   screen"): the name 64 to 92 px on two lines, the promise smaller, the cards four across and slimmer (their place squares
   stay); a window under 820 px tall tightens it again, one under 680 px once more */
@media (min-width: 1100px) {
  .p-home .hero-in { padding-top: 12px; padding-bottom: 20px; }
  .p-home .hero-main { column-gap: 88px; }
  .p-home .hero-main > .kick { font-size: 12.5px; }
  .p-home .hero-h { --hs: clamp(64px, min(5.6vw, 10vh), 92px); margin: 4px 0 18px; padding-bottom: 14px; }
  .p-home .hero .deck { font-size: 19px; margin: 0 0 14px; }
  .p-home .join-label { font-size: 11.5px; margin-bottom: 9px; }
  .p-home .join-row { gap: 10px; }
  .p-home .join-row input { height: 62px; padding: 0 18px; font-size: 18px; }
  .p-home .join-row .btn { height: 62px; min-width: 136px; font-size: 14.5px; }
  .p-home .proof { padding: 6px 0 6px 44px; }
  .p-home .proof-h { font-size: 26px; letter-spacing: -.025em; }
  .p-home .proof-p { font-size: 16px; line-height: 1.5; margin: 10px 0 14px; }
  .p-home .proof-no li { font-size: 15px; gap: 10px; }
  .p-home .proof-no .ico { width: 20px; height: 20px; }
  .p-home .td { margin-top: 16px; padding-top: 12px; }
  .tc-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
  .tc-t { gap: 6px; padding: 11px 13px 10px; }
  .tc-k { font-size: 10px; }
  .tc-v { font-size: 24px; }
  .tc-s { font-size: 14.5px; }
  .tc-src { font-size: 9px; }
  .tc-m { font-size: 12px; }
  .js .tc-pos { gap: 4px; }
  .tc-pos i { width: 6px; height: 6px; }
  .p-home { --btn-w: 136px; }
  .p-home .join-row .jt { right: calc(var(--btn-w) + 10px); font-size: 17px; padding: 0 20px; }
  .p-home .join-back { font-size: 11.5px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .p-home .hero-in { padding-top: 8px; padding-bottom: 16px; }
  .p-home .hero-h { --hs: clamp(56px, min(5vw, 9.5vh), 80px); margin: 2px 0 12px; padding-bottom: 10px; }
  .p-home .hero .deck { font-size: 17px; margin-bottom: 10px; }
  .p-home .proof-h { font-size: 23px; }
  .p-home .proof-p { font-size: 15px; margin: 8px 0 10px; }
  .p-home .proof-no { gap: 5px; }
  .p-home .proof-no li { font-size: 14px; }
  .p-home .td { margin-top: 12px; padding-top: 10px; }
  .tc-t { gap: 5px; padding: 9px 12px; }
  .tc-v { font-size: 22px; }
  .tc-m { font-size: 11.5px; }
}
@media (min-width: 1100px) and (max-height: 720px) {
  .p-home .hero-h { --hs: clamp(48px, 7.4vh, 64px); }
  .p-home .hero .deck { font-size: 16px; line-height: 1.4; margin-bottom: 8px; }
  .p-home .join-row input, .p-home .join-row .btn { height: 52px; }
  .p-home .proof-h { font-size: 21px; }
  .p-home .proof-p { font-size: 14px; margin: 6px 0 8px; }
  .p-home .td { margin-top: 8px; padding-top: 8px; }
  .tc-t { gap: 4px; padding: 8px 11px; }
  .tc-s { font-size: 13px; }
  .tc-v { font-size: 20px; }
  .tc-m { font-size: 11px; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- the calendar's day, one timeline (item G, 2026-09-25)
   Everything dated on a day in one list in time order, all-day first; the forecast a single line under the date. */
.tl { margin-top: 10px; border-top: 1px solid var(--ink); }
.tl-r { padding: 9px 0 4px; border-bottom: 1px solid var(--hair); }
.tl-b .ev-f { margin-top: 2px; }
.tl-k .tl-t { color: var(--ink); letter-spacing: .06em; }
.tl-b { min-width: 0; position: relative; padding-left: 14px; border-left: 2px solid var(--hair); }
.tl-b::before { content: ""; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.tl-k { font: 600 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); }
/* the city an entry is in, first and clearly (owner 2026-09-25); the kind of thing after it in the accent */
.tl-city { font-weight: 700; font-size: 10.5px; color: var(--ink); letter-spacing: .1em; }

.tl-h { font: 700 15px/1.32 var(--sans); margin-top: 2px; }
.tl-p { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.tl-c { font-size: 14px; line-height: 1.42; color: var(--ink); margin-top: 3px; }
.tl-b .ext { font-size: 10.5px; }
/* the council's and the Wire's rows: quiet text links in the accent's mono, never a filled dark button (owner, Sun Sep 27,
   City hall: "it draws too much attention"; audit 02 A12) */
.tl-more { margin-top: 2px; }
.tl-go { display: inline-flex; align-items: center; gap: .6em; min-height: 40px; color: var(--acc-t); text-decoration: none;
  font: 600 10.5px/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) { .tl-go:hover { text-decoration: underline; text-underline-offset: 3px; } }
.tl-b .addcal { margin-top: 4px; gap: 0 18px; }
.tl-b .addcal-b { min-height: 40px; padding: 0; gap: 6px; border-radius: 0; background: none; color: var(--acc-t);
  font: 600 10.5px/1.25 var(--mono); letter-spacing: .1em; }
.tl-b .addcal-b .ico { width: 14px; height: 14px; color: var(--acc); }
@media (prefers-color-scheme: dark) { .tl-b .addcal-b .ico { color: var(--acc); } }
@media (hover: hover) { .tl-b .addcal-b:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------------------------------------------------------------- local alerts (owner 2026-09-25)
   The terminal's own ground under the masthead, one mono line per alert, `//` between its parts, never a
   marquee. It arrives once: the band opens and each line types itself out left to right, the cursor blinks
   three times and settles; an alert that is new or changed carries its flag and one sweep of light. Nothing
   moves after that; Reduce Motion shows it still. No alert, no band (the renderer prints nothing). */
.alerts { background: var(--term); color: var(--term-ink); border-top: 1px solid #21262d; box-shadow: inset 0 -1px 0 #21262d; }
.alerts-o { display: grid; grid-template-rows: 1fr; overflow: hidden; }
.alerts-in { position: relative; min-height: 0; min-width: 0; max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 var(--gut); }
.al-sum { list-style: none; display: flex; align-items: center; min-height: 40px; cursor: pointer; white-space: nowrap; overflow: hidden;
  font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--term-ink); }
.al-sum::-webkit-details-marker { display: none; }
.al-line { flex: 0 1 auto; min-width: 0; overflow: hidden; letter-spacing: .06em; }
.al-sum.al-wrap { white-space: normal; padding: 6px 0; }
.al-sum.al-wrap .al-line { max-width: none; animation: none; line-height: 1.35; }
.al-c { flex: none; margin-right: .6em; color: var(--term-acc); }
.al-n { flex: none; margin-left: 8px; padding: 0 5px; border: 1px solid var(--term-acc); border-radius: 3px; font-size: 9.5px; line-height: 15px; color: var(--term-acc); }
.al-cur { flex: none; display: inline-block; width: .62em; height: 1.25em; margin-left: 6px; background: var(--term-acc); }
.al-ico { flex: none; width: 16px; height: 16px; margin-left: auto; padding-left: 4px; box-sizing: content-box; color: var(--term-muted); transition: transform .2s var(--ease); }
.alerts-in[open] .al-ico { transform: rotate(180deg); }
.al-all { display: grid; gap: 8px; padding: 10px 0 12px; border-top: 1px solid #21262d; }
.alerts-in[open] .al-all { max-height: min(32dvh, 320px); overflow-y: auto; overscroll-behavior: contain; }   /* audit 02 A3: the day keeps its room */
.al { font: 600 10.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--term-ink); }
.al-k { color: var(--term-acc); font-weight: 700; }
.al-sep { color: var(--term-muted); }
.al-src { color: var(--term-ink); text-decoration: underline; text-decoration-color: #484f58; text-underline-offset: 3px; }
.al-src:hover { text-decoration-color: var(--term-acc); }
.al-flag { display: inline-block; margin-left: 8px; padding: 0 5px; border: 1px solid var(--term-acc); border-radius: 3px; font-size: 9.5px;
  line-height: 15px; letter-spacing: .12em; color: var(--term-acc); vertical-align: 1px; }
.al-chg { background: linear-gradient(90deg, transparent, rgba(217, 119, 87, .26), transparent) no-repeat -100% 0 / 40% 100%; }
@keyframes al-open { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
@keyframes al-type { from { max-width: 0; } to { max-width: calc(64 * (1ch + .06em)); } }
@keyframes al-sweep { from { background-position: -100% 0; } to { background-position: 250% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .alerts-o { animation: al-open .38s var(--ease) .12s both; }
  .al-line { animation: al-type 1.6s steps(64, end) .42s both; }   /* 25 ms a character, whole characters only (audit 02 B14) */
  .al-sum.al-chg { animation: al-sweep 1.3s var(--ease) 1.3s both; }
  .al-cur { animation: mw-blink 1.1s steps(1) 1.2s 3; }
  .alerts.is-leaving .alerts-o { animation: al-open .3s var(--ease) reverse both; }
  .alerts.is-swap .alerts-o, .alerts.is-swap .al-line { animation: none; }
  .alerts.is-swap .al-sum.al-chg { animation-delay: .05s; }
}

/* ---------------------------------------------------------------- the reader desk (owner 2026-09-26)
   Two small footer buttons. "Ask the Wire" opens a chat out of itself (a sheet from the bottom on a phone, a window in
   the corner on a desktop) and, minimized, folds back down into it; a dot on the button while a chat is open. "Tip
   line" opens a dialog that seals the tip on the page. Both share one chrome: the terminal bar on top, paper below,
   hairlines between parts, never a box in a box. Only a waiting or typing answer's cursor blinks. */
.fn-b { display: none; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--term-muted); }
/* the Tip line and Ask the Wire need JavaScript: without it they are not there at all (audit 01 A4); they read at the same
   weight as the footer's other links (audit 01 A18) */
.js .fn-b { display: flex; }
.js .fn-b[hidden] { display: none; }
.fn-b:hover { color: var(--term-ink); }
.fn-b.is-live::after { content: ""; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--term-acc); }
.pop { background: var(--card); color: var(--ink); border: 1px solid var(--hair);
  box-shadow: 0 30px 70px -24px rgba(13, 17, 23, .55), 0 2px 8px rgba(13, 17, 23, .08); }
.pop-bar { flex: none; display: flex; align-items: center; gap: 2px; min-height: 54px; padding: 0 6px 0 16px; background: var(--term); color: var(--term-ink); }
.pop-tt { flex: 1; min-width: 0; }
.pop-t { font: 500 14px/1.2 var(--mono); }
.pop-bar .pop-t { color: var(--term-ink); }
.pop-c { color: var(--term-acc); }
.pop-sub { margin-top: 3px; font: 600 9px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--term-muted); }
.pop-ib { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--term-muted); cursor: pointer; }
.pop-ib .ico { width: 18px; height: 18px; }
.pop-ib:hover { color: var(--term-ink); background: #161b22; }
.pop-ib:focus-visible { outline: 2px solid var(--term-acc); outline-offset: -2px; }
.pop-cur { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: var(--acc); }
@media (prefers-reduced-motion: no-preference) { .pop-cur.is-on, .is-typing .pop-cur { animation: mw-blink 1.1s steps(1) infinite; } }

.desk { position: fixed; z-index: 60; inset: auto 0 0 0; width: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  height: min(82vh, 640px); height: min(82dvh, 640px); flex-direction: column; overflow: hidden;
  border-radius: 10px 10px 0 0; border-bottom: 0; transform-origin: center; }
.desk[open] { display: flex; }
/* a phone's sheet is modal (audit 01 A7): the page behind dims and rests; a tap on it folds the chat away */
.desk::backdrop { background: rgba(13, 17, 23, 0); transition: background .25s; }
.desk.is-in::backdrop { background: rgba(13, 17, 23, .45); }
@media (prefers-reduced-motion: reduce) { .desk::backdrop { transition: none; } }
.desk-log:focus { outline: none; }
/* the grab handle (audit 01 B4): drag it, or the bar, down to fold the chat away */
.desk-grab { position: absolute; z-index: 1; top: 0; left: 50%; width: 88px; height: 16px; transform: translateX(-50%);
  display: flex; justify-content: center; align-items: center; cursor: grab; touch-action: none; }
.desk-grab span { width: 36px; height: 4px; border-radius: 2px; background: #484f58; }
.desk .pop-bar { touch-action: none; }
.desk-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 16px; }
.desk-lede { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.desk-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.desk-q { min-height: 40px; padding: 9px 12px; border: 1px solid var(--hair); border-radius: 7px; background: var(--card); color: var(--ink);
  font: 14px/1.3 var(--sans); text-align: left; cursor: pointer; transition: border-color .15s, color .15s; }
.desk-q:hover { border-color: var(--acc); color: var(--acc-t); }
.dm { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.dm-me { align-self: flex-end; max-width: 84%; padding: 9px 12px; border-radius: 10px 10px 3px 10px; background: var(--soft); white-space: pre-wrap; }
.dm-desk { align-self: stretch; }
.dm-k { display: block; margin-bottom: 5px; font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.dm-k::before { content: "> "; }
.dm-b { white-space: pre-wrap; }
.dm-a { color: var(--acc-t); text-decoration: underline; text-underline-offset: 3px; }
/* a failed answer: the same question again, one tap */
.dm-retry { align-self: flex-start; min-height: 40px; margin-top: -6px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 7px; background: var(--card);
  color: var(--acc-t); cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* ending a chat asks first */
.desk-end-q { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--hair); }
.desk-end-q[hidden] { display: none; }
.desk-end-t { flex: 1 1 100%; font-size: 14px; line-height: 1.4; }
.desk-end-y, .desk-end-n { min-height: 40px; padding: 0 14px; border-radius: 7px; cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.desk-end-y { border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-ink); }
.desk-end-n { border: 1px solid var(--hair); background: var(--card); color: var(--ink); }
.desk-f { flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--card); }
.desk-box { display: flex; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 14px; border: 1px solid var(--hair); border-radius: var(--r-ctl); background: var(--paper);
  transition: border-color .15s, box-shadow .15s; }
.desk-box:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-wash); }
.desk-in { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; padding: 10px 0; border: 0; background: none; resize: none; outline: none;
  color: var(--ink); font: 16px/1.25 var(--sans); }
.desk-in::placeholder { color: var(--ink-soft); }
.desk-send { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 7px; background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; }
.desk-send .ico { width: 18px; height: 18px; }
.desk-send:disabled { opacity: .3; cursor: default; }
.desk-fine { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); text-align: center; }

.tipd { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; padding: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.tipd[open] { display: flex; flex-direction: column; }
.tipd::backdrop { background: rgba(13, 17, 23, .6); }
.tipd:focus { outline: none; }
/* the body scrolls; the send button stays in reach at the foot (owner 2026-09-26: "QoL") */
.tipd-f { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tipd-f[hidden] { display: none; }
.tipd-in { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 6px; }
.tip-act { flex: none; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--card); }
.tip-act .tip-err { margin: 0 0 8px; }
.tip-cnt { margin-top: 6px; text-align: right; font: 600 10px/1 var(--mono); letter-spacing: .08em; color: var(--ink-soft); }
.tip-more { margin-top: 8px; }
/* photos (owner 2026-09-26: photos only, locked down): squared previews, one remove control each, then the add button */
.tip-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tip-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-thumbs:empty { display: none; }
.tip-thumb { position: relative; width: 76px; height: 76px; border: 1px solid var(--hair); border-radius: 7px; overflow: hidden; background: var(--soft); }
.tip-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tip-thumb-x { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px;
  background: rgba(13, 17, 23, .78); color: #e8e6e1; cursor: pointer; }
.tip-thumb-x .ico { width: 14px; height: 14px; }
.tip-add { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border: 1px dashed var(--ink-soft); border-radius: 7px;
  color: var(--ink); cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tip-add[hidden] { display: none; }
.tip-add:hover { border-color: var(--acc); color: var(--acc-t); }
.tip-file:focus-visible ~ .tip-add { outline: 2px solid var(--acc); outline-offset: 2px; }
.tip-phmsg { margin-top: 8px; font-size: 13px; color: var(--acc-t); }
.tip-phnote { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.tip-more-s { display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--acc-t); font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.tip-tech { margin-top: 4px; color: var(--ink-soft); }
.tip-done-row { display: flex; gap: 22px; margin-top: 8px; }
.tipd-done { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.tip-lede { font-size: 15.5px; line-height: 1.45; margin-bottom: 16px; }
.tip-fl { margin-bottom: 14px; }
.tip-l { display: block; margin-bottom: 6px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tipd .tool-i { width: 100%; font-size: 16px; }
.tip-m { resize: vertical; min-height: 120px; }
.tip-how { margin: 2px 0 12px; padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.tip-k { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.tip-lock { width: 14px; height: 14px; }
.tip-t { font-size: 13.5px; line-height: 1.5; }
.tip-fp { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; font: 600 10px/1.4 var(--mono); letter-spacing: .06em; }
.tip-fpk { text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.tip-fine { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-bottom: 12px; }
.tip-send { width: 100%; }
.tip-err { margin-top: 10px; font-size: 13.5px; color: var(--acc-t); }
.tipd-done { position: relative; min-height: 190px; }
.tip-stamp { position: absolute; right: 18px; top: 18px; width: 84px; height: 84px; transform: rotate(8deg); }
.tip-stamp .st-d { font-size: 9.5px; }
.tipd-done .tip-lede, .tipd-done .tip-fine { max-width: calc(100% - 100px); }
.tipd-done .tip-lede { padding-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .tipd-done:not([hidden]) .tip-stamp { animation: mw-stamp .5s var(--ease) .1s both; } }
@media (min-width: 720px) {
  .desk { left: auto; right: 24px; bottom: 24px; width: 392px; height: min(640px, calc(100vh - 120px)); border-radius: 10px; border-bottom: 1px solid var(--hair); }
  .desk-grab { display: none; }
  .desk .pop-bar { touch-action: auto; }
  .tipd { width: 540px; margin: auto; border-radius: 10px; max-height: calc(100vh - 64px); }
  .tip-send { width: auto; }
}

/* ===================================================================================================== CITY HALL, AN APP
   (owner, Sat Sep 26, 2026): Meetings, Payments and Council as index tabs over one card; the last four meetings as boxes,
   every older one a one-line row folded by year; one filter; every record in one sheet (a phone) or beside its list (a
   screen 1,024 px and wider); "a locked screen like the calendar, no scrolling". tool.js adds html.ch-app on a phone,
   and on a wider screen at least 560 px tall: the page never scrolls, only the card's pane. */
.ch { width: 100%; max-width: 1060px; margin: 0 auto; }
.ch-tabs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 12px 10px -1px; }
.ch-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 1px solid var(--hair);
  border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--soft); color: var(--ink-soft); text-decoration: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ch-tab:hover { color: var(--ink); }
.ch-tab.is-sel { background: var(--card); color: var(--ink); }
.ch-ti { width: 17px; height: 17px; }
.ch-tab.is-sel .ch-ti { color: var(--acc-t); }
.ch-card { margin: 0 10px 12px; background: var(--card); border: 1px solid var(--hair); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); }
.ch-pane { position: relative; padding: 0 12px; }
.ch-view + .ch-view { border-top: 2px solid var(--ink); }
.js .ch-view[hidden] { display: none; }
html.ch-app, html.ch-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.ch-app body { display: flex; flex-direction: column; height: 100dvh; }
html.ch-app .mast { flex: none; }
html.ch-app main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.ch-app .ch { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.ch-app .ch-tabs { flex: none; }
html.ch-app .ch-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html.ch-app .ch-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
html.ch-app .ch-pane > * { flex: none; }
html.ch-app .ch-pane > .foot { margin-top: auto; }
html.ch-app .ch-view + .ch-view { border-top: 0; }

.ch-sec { padding: 14px 0 12px; border-bottom: 1px solid var(--hair); }
.ch-past { border-bottom: 0; }
.ch-k { font: 600 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); margin-bottom: 8px; }
.ch-k2 { margin-top: 18px; }
.ch-sm { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 4px; }
.ch-note { margin: -2px 0 8px; font-size: 13px; color: var(--ink-soft); }
.ch-x { margin-top: 3px; font-size: 13px; color: var(--ink-soft); }
.ch-mh { font: 800 20px/1.2 var(--sans); letter-spacing: -.01em; }
.ch-sub { margin-top: 3px; font-size: 14px; color: var(--ink-soft); }
.ch-lks { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; }
.ch-lk { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--acc-t);
  text-decoration: none; font: 600 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ch-lk:hover { text-decoration: underline; }
.ch-src { margin: 14px 0 18px; }

/* small tiles (who can approve a payment, dates ahead): a bold first line and a soft second; a rule tile opens its full line */
.ch-ws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ch-ws3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-wb { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--acc); border-radius: 7px;
  background: var(--acc-wash); color: var(--ink); cursor: pointer; text-align: left; font: 600 13px/1.25 var(--sans); }
.ch-w.is-rule .ch-wb { border-color: var(--hair); background: var(--card); font-weight: 400; }
.ch-ws0 { cursor: default; }
.ch-w2 { display: grid; gap: 1px; font-size: 12.5px; line-height: 1.25; }
.ch-w2 b { font-size: 13px; }
.ch-w2 span { color: var(--ink-soft); }
.ch-wb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }


.ch-prb:focus-visible, .ch-cb:focus-visible, .ch-pb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ch-st { font: 600 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.ch-full { margin-top: 6px; font-size: 15px; line-height: 1.45; }

/* the next meeting: a round date, the facts, the calendar buttons, what an earlier meeting set for it */
.ch-mt { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; }
.ch-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border: 1.5px solid var(--acc); border-radius: 50%;
  font: 600 9px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); }
.ch-date b { font: 800 20px/1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.ch-mk { font: 600 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-mm .ch-mh { margin-top: 3px; }
.ch-f { margin-top: 6px; }
.ch-f div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 3px 0; font-size: 14px; }
.ch-f dt { font: 600 9.5px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-cal { grid-column: 1 / -1; }
.ch-cal .addcal { margin-top: 8px; flex-wrap: nowrap; gap: 14px; }
/* Add to calendar reads as plain text like the Google Calendar link beside it (owner, Sun Sep 27, 2026: "it draws too much
   attention there"): the accent's mono, its small calendar icon, no fill */
.ch-cal .addcal-b { min-height: 36px; padding: 0; gap: 6px; border-radius: 0; background: none; color: var(--acc-t);
  font: 600 11px/1.25 var(--mono); letter-spacing: .1em; }
.ch-cal .addcal-b .ico { width: 14px; height: 14px; color: var(--acc); }
@media (prefers-color-scheme: dark) { .ch-cal .addcal-b .ico { color: var(--acc); } }
@media (hover: hover) { .ch-cal .addcal-b:hover { text-decoration: underline; text-underline-offset: 3px; } }

.ch-ci { width: 14px; height: 14px; margin-left: auto; color: var(--acc); transition: transform .18s var(--ease); }

/* past meetings: the last four as boxes, every older one folded by year */
.ch-filt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.ch-grp { border-top: 1px solid var(--ink); }
.ch-grp[hidden], .ch-pm[hidden], .ch-pr[hidden], .ch-yr[hidden], .ch-c[hidden] { display: none; }
.ch-yh { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; list-style: none; }
.ch-yh::-webkit-details-marker { display: none; }

.ch-yy { font: 800 15px/1 var(--sans); }
.ch-yn { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-yi { width: 14px; height: 14px; margin-left: auto; color: var(--acc); transition: transform .18s var(--ease); }
.ch-yr { border-top: 1px solid var(--hair); }
.ch-yr[open] .ch-yi { transform: rotate(180deg); }
.ch-pm { display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; padding: 10px 0 8px; border-top: 1px solid var(--hair); }

.ch-prs { padding-bottom: 6px; }
.ch-pr { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--hair); }
.ch-prb { flex: 1; min-width: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border: 0; background: none; color: var(--ink);
  cursor: pointer; text-align: left; font: inherit; }
.ch-prs2 { cursor: default; }
.ch-prd { font: 600 10px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ch-prt { font-size: 14px; line-height: 1.35; }
.ch-prl { flex: none; display: flex; gap: 0 12px; padding-top: 2px; }

/* payments: compact rows, a receipt in a sheet */
.ch-cs { border-top: 1px solid var(--ink); }
.ch-cb { display: grid; grid-template-columns: 46px minmax(0, max-content) minmax(14px, 1fr) auto; align-items: baseline; column-gap: 6px; width: 100%;
  min-height: 40px; padding: 9px 0 8px; border: 0; border-bottom: 1px dashed var(--hair); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ch-cb:hover { background: var(--soft); }
.ch-cd { font: 600 9.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ch-cp { font: 700 12.5px/1.4 var(--mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.ch-cl { align-self: end; margin-bottom: 5px; border-bottom: 1.5px dotted var(--ink-faint); }
.ch-ca { font: 700 13.5px/1.4 var(--mono); white-space: nowrap; text-align: right; }
.ch-rf div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--hair); }
.ch-rf dt { font: 600 9.5px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-rf dd { font: 600 13px/1.4 var(--mono); overflow-wrap: anywhere; }
.ch-rt { margin-top: 3px; font-size: 14.5px; line-height: 1.5; }

/* council: a photo, the name, the office and term; a sheet with the city's own words */
.ch-gv { font-size: 14.5px; line-height: 1.45; }
/* the grade's key over the members it grades (owner, Mon Sep 28, 2026: "on-brand and native… Compact!"): the list's own seal
   reading A–F, one short line beside it */
.ch-gkey { display: flex; align-items: center; gap: 12px; margin: 2px 0 4px; padding: 10px 0 12px; }
.ch .ch-gkey > p { margin: 0; font: 400 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.ch .ch-gkey > p b { font-weight: 700; color: var(--ink); }
.ch .ch-gks { flex: none; width: 46px; height: 46px; }
.ch .ch-gks b { font: 800 10.5px/1 var(--mono); letter-spacing: -.06em; }
.ch-ps { border-top: 1px solid var(--ink); }
.ch-pb { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ch-pb:hover { background: var(--soft); }
.ch-pi { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; object-position: 50% 15%; background: var(--soft); }
.ch-pi-t { display: grid; place-items: center; background: var(--term); color: var(--term-ink); font: 600 13px/1 var(--mono); letter-spacing: .06em; }
.ch-pi-c { background: var(--acc); color: var(--paper); }
/* a profile's photo that does not load: the same initials tile, at the photo's size (tool.js, audit 05 A10.3) */
.ch-psm.ch-pi-t { font-size: 16px; }
.ch-pbig.ch-pi-t { height: 157px; font-size: 24px; }
.ch-pt { display: grid; gap: 2px; min-width: 0; }
.ch-pn { font: 700 15px/1.25 var(--sans); }
.ch-pr2 { font-size: 13px; color: var(--ink-soft); }
.ch-pe { font: 600 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.ch-ph2 { display: flex; gap: 14px; align-items: flex-start; margin: 12px 0 6px; }
.ch-pbig { flex: none; width: 112px; height: auto; border-radius: 7px; }
.ch-up2 { margin-top: 8px; font: 600 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); }
.ch-bio { margin-top: 6px; font-size: 14px; line-height: 1.5; }

/* the one sheet every tap opens */
.ch-sb { padding-top: 6px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }   /* clear of an iPhone's home bar (audit 03 A12) */

.ch-vts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.ch-vts b { display: block; font: 700 14px/1.3 var(--sans); }
.ch-rd:checked + .fs-box { background: var(--ink); border-color: var(--ink); }
.ch-rd:checked + .fs-box::after { content: ""; display: block; width: 8px; height: 8px; margin: 4px; background: var(--paper); border: 0; transform: none; }
.ch-sf { display: grid; gap: 8px; }
.ch-sf .fs-k { padding-top: 4px; }
.ch-sf .tool-i { width: 100%; }
.ch-none { padding: 16px 0 6px; }
.js .ch-none .cc-nm-go { display: flex; }

@media (max-width: 719px) {
  html.ch-app .ch-tabs { margin: 8px 8px -1px; }
  html.ch-app .ch-card { margin: 0; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  html.ch-app .ch-pane > .foot { margin-left: -12px; margin-right: -12px; }
}
@media (min-width: 720px) {
  html.ch-app body > .foot { flex: none; margin-top: 0; }
  .ch-tabs { margin: 12px 0 -1px; width: 440px; }
  .ch-card { margin: 0 0 12px; border-top-left-radius: 0; }
  .ch-pane { padding: 0 20px; }
}
@media (min-width: 900px) {
  .ch-top { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 32px; border-bottom: 1px solid var(--hair); }
  .ch-top > .ch-sec { border-bottom: 0; grid-row: 1; grid-column: 1; }
  .ch-top > .ch-wait { grid-column: 2; }
  .ch-cal { grid-column: 2; }

  .ch-prb { grid-template-columns: 110px minmax(0, 1fr); }
  .ch-cb { padding: 8px 4px; }
  .ch-ps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* section headings and their counts. A notice ("Agenda not posted yet", "Minutes not posted") is its quiet grey words
   alone: the small accent square it carried read as the list's old "passed" mark (owner, Mon Sep 28, 2026) */

.ch-pend { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); }
.ch-pend-l { margin-top: 2px; }
.ch-sh { margin: 18px 0 2px; font: 700 16px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); }
.ch-sh:first-child { margin-top: 8px; }

.ch-shn { margin-left: 6px; font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.ch-pe { line-height: 1.5; }

.ag-sec .ch-sh { font-size: 15px; margin-top: 14px; }

/* The Meetings tab (owner, Sat Sep 26, 2026): what passed first, who voted from the official minutes, every line one
   uniform line, the whole meeting box tappable, one address per meeting (#meeting-<date>), the no-agenda notice on one
   line. A card's date line is the button; its ::after covers the box, and the box's own links sit above it. */
.ch-pms { border-top: 1px solid var(--ink); }
.ch-pm { display: block; position: relative; padding: 12px 0 8px; border-top: 1px solid var(--hair); }
.ch-pms > .ch-pm:first-child { border-top: 0; }
.ch-pm:hover { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
.ch-pmh { margin: 0; }
.ch-pmb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink);
  cursor: pointer; text-align: left; font: inherit; }
.ch-pmb::after { content: ""; position: absolute; inset: 0; }
.ch-pmb:focus-visible { outline: none; }
.ch-pmb:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 7px; }
.ch-pmd { font: 800 16px/1.25 var(--sans); letter-spacing: -.01em; }
.ch-pmt { font: 600 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-pmk { margin-top: 8px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.ch-pmr { margin-top: 8px; }
.ch-pmk + .ch-pmr { margin-top: 4px; }
.ch-pmr li { display: flex; align-items: center; gap: 9px; min-height: 27px; font: 500 14.5px/1.3 var(--sans); }
.ch-pmm { display: flex; align-items: center; gap: 9px; min-height: 22px; font-size: 13px; line-height: 22px; color: var(--ink-soft); }
.ch-pml { position: relative; z-index: 1; display: flex; align-items: center; gap: 0 18px; margin-top: 4px; pointer-events: none; }
.ch-pml > * { pointer-events: auto; }
/* A TOPIC'S RESULT TAG in the lists (owner, Mon Sep 28, 2026: "If something passed, it gets the black box 'passed'"): the
   meeting sheet's own .ch-dm tag, one width down a list (the list's widest tag, .ch-twN = its letters) so the topics line up,
   never wrapping, never a pill */
.ch-tg { box-sizing: border-box; display: inline-block; min-width: calc(var(--ch-tw, 6) * (1ch + .12em) + 10px); text-align: center; white-space: nowrap; }
.ch-tg.is-blank { visibility: hidden; padding: 0; border: 0; }
.ch-tw0 { --ch-tw: 0; } .ch-tw0 .ch-tg.is-blank, .ch-tw0 > .ch-tg.is-blank { display: none; } .ch-tw6 { --ch-tw: 6; } .ch-tw7 { --ch-tw: 7; } .ch-tw12 { --ch-tw: 12; } .ch-tw13 { --ch-tw: 13; } .ch-tw14 { --ch-tw: 14; }

/* older meetings: one line each, the whole line tappable */
.ch-yr1 { display: block; }
.ch-yb { display: grid; grid-template-columns: 50px auto minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 6px 0;
  border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.ch-yb:hover { background: var(--soft); }
.ch-yb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ch-yb .ch-prd { line-height: 1.3; }
/* a narrow phone: the date column and the gaps give the topic the width its tag took, so it stays on one line */
@media (max-width: 400px) {
  .ch-yb { grid-template-columns: 42px auto minmax(0, 1fr) auto; gap: 7px; }
  .ch-yb .ch-prt { font-size: 13.5px; }
  .ch-yb .ch-prn { min-width: 16px; }
}
@media (max-width: 380px) {
  .ch-yb { grid-template-columns: 40px auto minmax(0, 1fr) auto; gap: 6px; }
  .ch-yb .ch-prt { font-size: 13px; letter-spacing: -.012em; }
  .ch-yb .ch-tg { padding: 4px 3px 3px; font-size: 8.5px; letter-spacing: .08em; min-width: calc(var(--ch-tw, 6) * (1ch + .08em) + 6px); }
  .ch-yb .ch-tg.is-none { padding: 3px 2px 2px; }
}
.ch-yb .ch-prt { font-size: 14px; line-height: 1.3; }
.ch-prn { min-width: 22px; font: 600 10px/1 var(--mono); letter-spacing: .04em; color: var(--ink-soft); text-align: right; }

/* a meeting, whole: each decision, who voted, the documents */
.ch-sheet .fs-body { padding-top: 0; }
.ch-sheet .fs-t:focus { outline: none; }   /* the title takes the focus when the sheet opens (audit 03 A15) */
.ch-d { padding: 12px 0; border-top: 1px solid var(--hair); }
.ch-sh + .ch-d, .ch-sh + .ch-sm + .ch-d, .ch-gv2 + .ch-d { border-top: 0; padding-top: 8px; }
.ch-dh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; }
.ch-dm { flex: none; padding: 4px 5px 3px; border-radius: 2px; font: 700 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ch-dm.is-pass { background: var(--ink); color: var(--paper); }
.ch-dm.is-fail { background: var(--acc); color: var(--paper); }
.ch-dm.is-none { border: 1px solid var(--hair); color: var(--ink-soft); padding: 3px 4px 2px; }
.ch-dt { font: 700 15.5px/1.3 var(--sans); }
.ch-dl { margin-top: 5px; font-size: 14.5px; line-height: 1.45; }
.ch-dg { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ch-v { margin-top: 6px; }
.ch-v div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 1px 0; }
.ch-v dt { font: 600 9px/2.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ch-v dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; font-size: 13.5px; line-height: 1.6; }
.ch-v .ch-lk, .ch-v .ch-pend { min-height: 28px; }
.ch-gv2 { margin: 6px 0 2px; padding: 4px 10px; border-radius: 7px; background: var(--soft); }
/* several motions on one decision (audit 03 A3): rows between hairlines in the decision's own column, never a box inside
   the decision (BRAND 11.1); each motion's label and result on one line, then the same vote rows as a single decision */
.ch-mo { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--hair); }
.ch-moh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin: 2px 0 0; }
.ch-mok { font: 600 9px/2.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ch-mol { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; }
.ch-mo > .ch-v { margin-top: 2px; }

.ch-stat { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ch-stat::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--acc); transform: translateY(-1px); }
.ch-snav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--hair); }
.ch-snav > :last-child { justify-self: end; }
.ch-sh .ch-shn { margin-left: 8px; }

/* the next meeting: one line when the agenda is not out; its agenda as the same rows */
.ch-alert1 { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 10px/1.3 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); }
.ch-nx { grid-column: 1 / -1; margin-top: 6px; }
.ch-set { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
.ch-setk { font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.ch-seta { color: var(--ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }

@media (min-width: 720px) {
  .ch-sheet { width: 640px; }
}
@media (min-width: 900px) {
  .ch-pms { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ch-pms > .ch-pm:nth-child(2) { border-top: 0; }
  .ch-pm:hover { background: none; }
  .ch-pm:hover .ch-pmd { text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 4px; }
  .ch-yr[open] .ch-prs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ch-yb { grid-template-columns: 56px auto minmax(0, 1fr) auto; }
}
@media (max-width: 379px) {
  .ch-v div { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  .ch-v dd { font-size: 13px; }
}
.ch-sk { margin: 12px 0 0; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ch-sk + .ch-sh, .ch-sk + .ch-stat { margin-top: 10px; }

/* The Meetings tab, pass two (owner, Sat Sep 26, 2026): clear section names; every decision has the same Context fold
   (why, what was proposed, what the agenda leaves unsaid, the motion, the documents); an official name carries a tiny
   context; a meeting's documents are one row of equal buttons at its top. */
.ch-hint { margin-left: 8px; font: 400 13px/1.3 var(--sans); color: var(--ink-soft); }
.ch-ctx2 { margin-top: 6px; border-top: 1px dashed var(--hair); }
.ch-ctx2 > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer;
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); }
.ch-ctx2 > summary::-webkit-details-marker { display: none; }
.ch-ctx2 > summary .ch-ci { margin-left: 0; }
.ch-ctx2[open] > summary .ch-ci { transform: rotate(180deg); }
.ch-ctx2[open] { padding-bottom: 4px; }
.ch-cx { margin: 2px 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.ch-cx b { display: inline-block; min-width: 62px; margin-right: 6px; font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-cg { font-style: italic; }
.ch-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; margin: 10px 0 4px; }
.ch-act { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 7px;
  background: var(--card); color: var(--acc-t); text-decoration: none; text-align: center; cursor: pointer;
  font: 600 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ch-act:hover { border-color: var(--acc); }
.ch-act.is-off { color: var(--ink-soft); cursor: default; border-style: dashed; }
.ch-act:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* PHONE POLISH: a sheet you can drag down and swipe between meetings (a grab handle; earlier/later arrows in its
   header), the filter bar and an open year's heading stay in view while the list scrolls, a press shows. */
.ch-sheet { transition: transform .18s var(--ease); }
.ch-grab { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--hair); }
.ch-sheet .fs-top { gap: 6px; }
.ch-sheet .fs-t { flex: 1; min-width: 0; }
.ch-arw { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hair); border-radius: 7px;
  background: var(--card); color: var(--acc-t); cursor: pointer; }
.ch-arw .ico { width: 18px; height: 18px; }
.ch-arw[hidden] { display: none; }
html.ch-app .ch-past > .ch-filt { position: sticky; top: 0; z-index: 2; margin: 0 -12px 6px; padding: 6px 12px; background: var(--card);
  border-bottom: 1px solid var(--hair); }
html.ch-app .ch-yr[open] > .ch-yh { position: sticky; top: 55px; z-index: 1; background: var(--card); }
.ch-pm:active { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
.ch-yb:active { background: var(--soft); }
.ch-pm.is-sel .ch-pmd { color: var(--acc-t); }
.ch-yr1.is-sel .ch-yb { background: var(--acc-wash); }
.ch-sb .ch-snav { padding-bottom: 6px; }
@media (max-width: 719px) {
  .ch-sheet { max-height: 92vh; }
  .ch-sheet .fs-t { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .ch-sheet { transition: none; } }

/* PHONE POLISH, THE LIST (owner, Mon Sep 28, 2026: "I love how easy the Meetings tab is to browse on web, but it is a tougher
   experience on mobile"): under 1,024 px the tab reads like the desktop's list. The next meeting is one tight block (a
   smaller round date beside its date line, the one-line notice and the calendar links in its column, "Set earlier" as one
   short line); the latest meetings are compact rows (the date tile, the kind, ONE lead topic with its tag and "+N"; their
   topics and documents live in the meeting's sheet); every year is open, and a row of year jumps under the bar marks the
   year in view (tool.js). A desktop (1,024 px and wider) keeps its boxes, its folds and its lines exactly. */
.ch-pmx, .ch-setd, .js .ch-yj.js-only { display: none; }
@media (max-width: 1023px) {
  .ch-up .ch-mt { grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .ch-up .ch-date { align-self: start; width: 46px; height: 46px; font-size: 7.5px; letter-spacing: .08em; }
  .ch-up .ch-date b { font-size: 17px; }
  .ch-up .ch-mk { font-size: 9px; }
  .ch-up .ch-mm .ch-mh { margin-top: 2px; font-size: 17px; }
  .ch-up .ch-f { margin-top: 4px; }
  .ch-up .ch-f div { grid-template-columns: 52px minmax(0, 1fr); padding: 0; font-size: 13.5px; }
  .ch-up .ch-mt > :is(.ch-alert1, .ch-nx, .ch-cal) { grid-column: 2; }
  .ch-up .ch-mt > .ch-alert1 { margin-top: 6px; }
  .ch-up .ch-mt > .ch-nx, .ch-up .ch-nx > .ch-lks { margin-top: 0; }
  .ch-up .ch-cal .addcal { margin-top: 0; gap: 18px; }
  .ch-up .ch-cal :is(.addcal-b, .ext) { min-height: 40px; font-size: 10.5px; }
  .ch-up .ch-set { margin-top: 4px; padding-top: 0; column-gap: 10px; }
  .ch-up .ch-seta { font-size: 13.5px; }
  .ch-up .ch-setw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ch-up .ch-setd { display: inline; }

  .ch-past .ch-pm { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px 0; }
  .ch-past .ch-pmdt { width: 40px; height: 44px; font-size: 7.5px; letter-spacing: .08em; }
  .ch-past .ch-pmdt b { font-size: 17px; }
  .ch-past .ch-pmb { gap: 0 8px; }
  .ch-past .ch-pmd { font-size: 14.5px; }
  .ch-past .ch-pmt { font-size: 9px; }
  .ch-past .ch-pmx { display: flex; align-items: center; gap: 9px; margin: 3px 0 0; font: 400 14px/1.3 var(--sans); color: var(--ink); }
  .ch-past .ch-pxt { flex: 1; min-width: 0; }
  .ch-past .ch-pmx .ch-prn { flex: none; }
  .ch-past :is(.ch-pmk, .ch-pmr, .ch-pmm, .ch-pml, .ch-pmhit) { display: none; }
  @media (max-width: 380px) { .ch-past .ch-pmx { gap: 7px; font-size: 13.5px; } }

  /* every year open, its heading in the list's flow (the year jumps say which year is in view) */
  html.ch-app .ch-past .ch-yr[open] > .ch-yh { position: static; }
  .js .ch-yj.js-only { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 80px); justify-content: start; gap: 6px; padding: 6px 12px;
    background: var(--card); border-bottom: 1px solid var(--hair); }
  .ch-yjb { min-height: 40px; padding: 0 4px; border: 1px solid var(--hair); border-radius: 7px; background: var(--card); color: var(--ink-soft);
    cursor: pointer; font: 600 11px/1 var(--mono); letter-spacing: .08em; }
  .ch-yjb[hidden] { display: none; }
  .ch-yjb.is-on { border-color: var(--acc); background: var(--acc-wash); color: var(--acc-t); }
  .ch-yjb:active { background: var(--soft); }
  .ch-yjb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  .js .ch-past > .ch-bfw { margin-bottom: 0; }
  .js .ch-past > .ch-bfw + .ch-latest, .js .ch-past .ch-pms { border-top: 0; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .js .ch-yj.js-only { padding: 6px 20px; }
}

/* DESKTOP POLISH (1,024 px and wider, the locked app): the meetings list on the left, the chosen meeting read beside it
   (no pop-up), each column scrolling on its own; ↑ ↓ walk the list, ← → the earlier and later meeting. */
.ch-mdetail[hidden] { display: none; }
@media (min-width: 1024px) {
  .ch { max-width: 1240px; }
  html.ch-app .ch-pane.is-split { overflow: hidden; padding-right: 0; }
  html.ch-app .ch-pane.is-split > .ch-view:not([hidden]) { flex: 1; min-height: 0; }
  .ch-view.is-split > .ch-mlist .ch-top { display: block; }
  .ch-view.is-split .ch-ps { display: block; }
  .ch-c.is-sel .ch-cb, .ch-p.is-sel .ch-pb { background: var(--acc-wash); box-shadow: inset 3px 0 0 var(--acc); }
  .ch-c.is-sel .ch-cb { padding-left: 10px; padding-right: 8px; }
  .ch-mdetail .ch-rc, .ch-mdetail .ch-ph2 { max-width: 640px; }
  .ch-view.is-split { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); column-gap: 0; height: 100%; }
  .ch-view.is-split > .ch-mlist { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 20px; border-right: 1px solid var(--hair); }
  .ch-view.is-split > .ch-mdetail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 28px 28px; }
  .ch-view.is-split .ch-pms { display: block; }
  .ch-view.is-split .ch-pms > .ch-pm:nth-child(2) { border-top: 1px solid var(--hair); }
  .ch-view.is-split .ch-yr[open] .ch-prs { display: block; }
  .ch-view.is-split .ch-pm { padding-left: 12px; padding-right: 12px; border-left: 3px solid transparent; margin-left: -12px; }
  .ch-view.is-split .ch-pm.is-sel { border-left-color: var(--acc); background: var(--soft); }
  .ch-view.is-split .ch-pm:hover { background: var(--soft); }
  .ch-view.is-split .ch-up .ch-mt { grid-template-columns: 52px minmax(0, 1fr); }
  .ch-view.is-split .ch-date { width: 52px; height: 52px; }
  .ch-view.is-split .ch-mh { font-size: 17px; }
  .ch-view.is-split .ch-cal { grid-column: 1 / -1; }
  .ch-mdh { font: 800 26px/1.2 var(--sans); letter-spacing: -.015em; }
  .ch-mdetail .ch-sk { margin-top: 4px; }
  .ch-mdetail .ch-acts { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); }
  .ch-mdetail .ch-d { max-width: 760px; }
  .ch-mdetail .ch-snav { max-width: 760px; }
  html.ch-app .ch-past > .ch-filt { margin: 0 -20px 6px 0; padding-left: 0; }
}
.ch-rh { color: var(--ink-soft); font-weight: 400; }
.ch-qs, .js .ch-qs.js-only { display: none; }
.ch-kbd { display: none; }
@media (min-width: 1024px) {
  html.ch-app .ch-view.is-split .ch-qs.js-only { display: block; width: 100%; margin: 0 0 8px; }
  .ch-view.is-split .ch-kbd { display: block; margin-top: 16px; font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
}

/* ===================================================================================================== GAS, AN APP
   (owner, Sat Sep 26, 2026: the app style of the Calendar and City hall, polished for phone and desktop). ONE card:
   a top line, one filter button and sheet, the list (the only thing that scrolls when html.gs-app is set), uniform
   rows (logo, station, address · city · when posted, price, Go) that read as table columns from 900 px. */
.gs { width: 100%; max-width: 1060px; margin: 0 auto; }
.gs-card { margin: 12px 10px; background: var(--card); border: 1px solid var(--hair); border-radius: 10px; box-shadow: var(--shadow); }
.gs-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; padding: 14px 14px 4px; }
.gs-k { font: 800 20px/1.2 var(--sans); letter-spacing: -.01em; }
.gs-chk { font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gs-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid var(--ink); }
.gs-pane { padding: 0 14px 14px; }
.gs-rows { margin: 0; }
.gs-rows .g { grid-template-columns: 36px minmax(0, 1fr) auto 44px; gap: 10px; padding: 10px 0 !important; border-bottom: 1px solid var(--hair); }
.gs-rows .g[hidden] { display: none; }
.gs-rows .g-n { gap: 2px 8px; font-size: 15px; }
.gs-rows .g-a { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; font-size: 13px; line-height: 1.4; }
.gs-rows .g-town { color: var(--ink); font-weight: 600; }
.gs-rows .g-town::before, .gs-rows .g-t::before { content: "·"; margin-right: 6px; color: var(--ink-faint); font-weight: 400; }
.gs-rows[data-show="home"] .g-town { display: none; }
.gs-rows .g-t { font: 500 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-soft); margin: 0; }
.gs-rows .g-p { font-size: 20px; }
.gs-head { display: none; }
.gs-none { padding: 16px 0 4px; }
.js .gs-none .cc-nm-go { display: flex; }
.gs-fine { margin-top: 12px; }
html.gs-app, html.gs-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.gs-app body { display: flex; flex-direction: column; height: 100dvh; }
html.gs-app .mast { flex: none; }
html.gs-app main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.gs-app .gs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.gs-app .gs-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html.gs-app .gs-top, html.gs-app .gs-bar { flex: none; }
html.gs-app .gs-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
html.gs-app .gs-pane > * { flex: none; }
html.gs-app .gs-pane > .foot { margin-top: auto; }
@media (max-width: 719px) {
  html.gs-app .gs-card { margin: 0; border-width: 0; border-radius: 0; box-shadow: none; }
  html.gs-app .gs-pane > .foot { margin: 18px -14px -14px; }   /* the footer ends the pane, flush with its foot */
}
@media (min-width: 720px) {
  html.gs-app body > .foot { flex: none; margin-top: 0; }
  .gs-card { margin: 16px 0; }
  .gs-top, .gs-bar { padding-left: 22px; padding-right: 22px; }
  .gs-pane { padding: 0 22px 18px; }
}
@media (min-width: 900px) {
  /* a table: the row's parts become columns; the headings sort */
  .gs-head { display: grid; position: sticky; top: 0; z-index: 1; background: var(--card); border-bottom: 1px solid var(--hair); }
  .gs-head, .gs-rows .g { grid-template-columns: 36px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .9fr) 92px 44px; column-gap: 16px; }
  .gs-head { min-height: 38px; align-items: center; }
  .gs-hc, .gs-hb { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-align: left; }
  .gs-hb { padding: 0; border: 0; background: none; cursor: pointer; }
  .gs-hb:hover, .gs-hb.is-on { color: var(--acc-t); }
  .gs-hb.is-on::after { content: " ↓"; }
  .gs-hp { text-align: right; }
  .gs-rows .g { padding: 8px 0 !important; }
  .gs-rows .g-b, .gs-rows .g-a { display: contents; }
  .gs-rows .g-a > span { font-size: 14px; }
  .gs-rows .g-town::before, .gs-rows .g-t::before { content: none; }
  .gs-rows[data-show="home"] .g-town { display: block; }
  .gs-rows .g:hover { background: var(--soft); }
}

/* Gas (owner, Mon Sep 28, 2026, evening: "I really dont like the way this doesnt look uniformed with the prices. This should
   default to: Martinez stations, Regular grade, sorted by cheapest first, not showing card priced"). ONE price a row, always:
   the price a reader pays the usual way (the cash price where the station posts one, else its card price) with a quiet CASH
   or CARD label beside the figure; "Card only" shows the card price in the same place. A row carries every grade and both
   views and shows the one the filter picked (Regular, the usual price, without JavaScript). Phone: the figure large at the
   right, the posted line under the address. Desktop: the table's Posted and Price columns. The head is a warm-ink bar like
   City hall's and Activity's; the owner's filter button under it. Without JavaScript the button stays hidden (every row
   shows) and the bar keeps the count. */
.gs-top { min-height: 40px; padding: 0 14px; gap: 4px 12px; align-items: center; background: #2c2620; color: #f7f3ec; }
.gs-top .gs-k { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 0; font: 600 12px/1.4 var(--mono); letter-spacing: .02em;
  text-transform: lowercase; color: inherit; }
.gs-kp, .gs-kc { color: #e2934f; }
.gs-kc { margin-left: -3px; }
.gs-top .gs-chk { margin-left: auto; font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9ac9b; }
@media (prefers-color-scheme: dark) {
  .gs-top { background: #4a3e33; color: #fbf6ee; box-shadow: inset 0 -2px 0 rgba(226, 147, 79, .55); }
  .gs-top .gs-chk { color: #d8cbb9; }
}
@media (min-width: 720px) { .gs-card > .gs-top { border-radius: 9px 9px 0 0; padding-left: 22px; padding-right: 22px; } }
.js .gs-bar .fsum.js-only { display: inline-flex; }
.gs-bar { padding-top: 10px; border-bottom: 1px solid var(--hair); }
.gs-rows { border-top: 0; }
.gs-rows .g { grid-template-columns: 36px minmax(0, 1fr) auto 40px; column-gap: 12px; align-items: center; padding: 12px 0 !important; }
.gs-rows .g-logo { width: 36px; height: 36px; border-radius: 7px; }
.gs-rows .g-dir { width: 40px; min-width: 40px; height: 44px; padding: 0; border-radius: 7px; }
.gs-rows .g-t::before { content: none; }
.gs-rows .g-pp, .gs-rows .g-tp { display: none; }
.gs-rows[data-grade="regular"][data-pay="all"] .g-pp[data-g="regular"][data-v~="all"],
.gs-rows[data-grade="regular"][data-pay="card"] .g-pp[data-g="regular"][data-v~="card"],
.gs-rows[data-grade="midgrade"][data-pay="all"] .g-pp[data-g="midgrade"][data-v~="all"],
.gs-rows[data-grade="midgrade"][data-pay="card"] .g-pp[data-g="midgrade"][data-v~="card"],
.gs-rows[data-grade="premium"][data-pay="all"] .g-pp[data-g="premium"][data-v~="all"],
.gs-rows[data-grade="premium"][data-pay="card"] .g-pp[data-g="premium"][data-v~="card"],
.gs-rows[data-grade="diesel"][data-pay="all"] .g-pp[data-g="diesel"][data-v~="all"],
.gs-rows[data-grade="diesel"][data-pay="card"] .g-pp[data-g="diesel"][data-v~="card"] { display: flex; }
.gs-rows[data-grade="regular"][data-pay="all"] .g-tp[data-g="regular"][data-v~="all"],
.gs-rows[data-grade="regular"][data-pay="card"] .g-tp[data-g="regular"][data-v~="card"],
.gs-rows[data-grade="midgrade"][data-pay="all"] .g-tp[data-g="midgrade"][data-v~="all"],
.gs-rows[data-grade="midgrade"][data-pay="card"] .g-tp[data-g="midgrade"][data-v~="card"],
.gs-rows[data-grade="premium"][data-pay="all"] .g-tp[data-g="premium"][data-v~="all"],
.gs-rows[data-grade="premium"][data-pay="card"] .g-tp[data-g="premium"][data-v~="card"],
.gs-rows[data-grade="diesel"][data-pay="all"] .g-tp[data-g="diesel"][data-v~="all"],
.gs-rows[data-grade="diesel"][data-pay="card"] .g-tp[data-g="diesel"][data-v~="card"] { display: block; }
.gs-rows .g-pp { align-items: baseline; justify-content: flex-end; }
.gs-rows .g-pr { display: flex; align-items: baseline; gap: 7px; margin: 0; white-space: nowrap; }
.gs-rows .g-pay { font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.gs-rows .g-pr .g-p { font: 700 20px/1 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.gs-rows .g-t { display: none; }
.gs-rows .g-tp { margin: 3px 0 0; font: 500 10.5px/1.35 var(--mono); letter-spacing: .02em; color: var(--ink-soft); }
@media (max-width: 379px) {
  .gs-rows .g { column-gap: 10px; }
  .gs-rows .g-pr { gap: 5px; }
  .gs-rows .g-pr .g-p { font-size: 18px; }
}
@media (max-width: 899px) {
  .gs-rows .g-a { display: block; }
  .gs-rows .g-ad, .gs-rows .g-town { display: block; }
  .gs-rows .g-town::before { content: none; }
  .gs-rows .g-town { font-size: 12.5px; }
  .gs-rows[data-show="home"] .g-town { display: none; }
}
@media (min-width: 900px) {
  .gs-head, .gs-rows .g { grid-template-columns: 36px minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, .8fr) 120px 112px 40px; column-gap: 16px; }
  .gs-head .gs-hp { text-align: right; }
  .gs-rows[data-grade="regular"][data-pay="all"] .g-pp[data-g="regular"][data-v~="all"],
  .gs-rows[data-grade="regular"][data-pay="card"] .g-pp[data-g="regular"][data-v~="card"],
  .gs-rows[data-grade="midgrade"][data-pay="all"] .g-pp[data-g="midgrade"][data-v~="all"],
  .gs-rows[data-grade="midgrade"][data-pay="card"] .g-pp[data-g="midgrade"][data-v~="card"],
  .gs-rows[data-grade="premium"][data-pay="all"] .g-pp[data-g="premium"][data-v~="all"],
  .gs-rows[data-grade="premium"][data-pay="card"] .g-pp[data-g="premium"][data-v~="card"],
  .gs-rows[data-grade="diesel"][data-pay="all"] .g-pp[data-g="diesel"][data-v~="all"],
  .gs-rows[data-grade="diesel"][data-pay="card"] .g-pp[data-g="diesel"][data-v~="card"] { display: contents; }
  .gs-rows .g-tp, .gs-rows[data-grade="regular"][data-pay="all"] .g-tp[data-g="regular"][data-v~="all"],
  .gs-rows[data-grade="regular"][data-pay="card"] .g-tp[data-g="regular"][data-v~="card"],
  .gs-rows[data-grade="midgrade"][data-pay="all"] .g-tp[data-g="midgrade"][data-v~="all"],
  .gs-rows[data-grade="midgrade"][data-pay="card"] .g-tp[data-g="midgrade"][data-v~="card"],
  .gs-rows[data-grade="premium"][data-pay="all"] .g-tp[data-g="premium"][data-v~="all"],
  .gs-rows[data-grade="premium"][data-pay="card"] .g-tp[data-g="premium"][data-v~="card"],
  .gs-rows[data-grade="diesel"][data-pay="all"] .g-tp[data-g="diesel"][data-v~="all"],
  .gs-rows[data-grade="diesel"][data-pay="card"] .g-tp[data-g="diesel"][data-v~="card"] { display: none; }
  .gs-rows .g-pr { grid-column: 6; grid-row: 1; justify-self: end; }
  .gs-rows .g-pr .g-p { font-size: 17px; letter-spacing: -.02em; }
  .gs-rows .g-t { display: block; grid-column: 5; grid-row: 1; justify-self: start; font: 400 14px/1.3 var(--sans); font-variant-numeric: tabular-nums;
    color: var(--ink-soft); }
  .gs-rows .g-n { flex-wrap: nowrap; }
  .gs-rows .g-nm { min-width: 0; }
}
/* Gas, "Cash and card" (owner, Mon Sep 28, 2026, about 7 PM: "when someone selects cash or card, that's when it SHOULD show
   both prices"): both prices on every row, the same size, right-aligned; one a station does not post reads a quiet "not
   posted" in its place, never a dash. Phone: CASH over CARD in one block at the right, the posted line under the address.
   Desktop: the Cash and Card columns under their own sortable headings, each price with its time under it. */
.gs-rows[data-grade="regular"][data-pay="both"] .g-pp[data-g="regular"][data-v~="both"],
.gs-rows[data-grade="midgrade"][data-pay="both"] .g-pp[data-g="midgrade"][data-v~="both"],
.gs-rows[data-grade="premium"][data-pay="both"] .g-pp[data-g="premium"][data-v~="both"],
.gs-rows[data-grade="diesel"][data-pay="both"] .g-pp[data-g="diesel"][data-v~="both"] { display: grid; }
.gs-rows[data-grade="regular"][data-pay="both"] .g-tp[data-g="regular"][data-v~="both"],
.gs-rows[data-grade="midgrade"][data-pay="both"] .g-tp[data-g="midgrade"][data-v~="both"],
.gs-rows[data-grade="premium"][data-pay="both"] .g-tp[data-g="premium"][data-v~="both"],
.gs-rows[data-grade="diesel"][data-pay="both"] .g-tp[data-g="diesel"][data-v~="both"] { display: block; }
.gs-rows .g-pp2 { grid-template-columns: auto auto; column-gap: 7px; row-gap: 4px; align-items: baseline; justify-content: end; }
.gs-rows .g-pp2 .g-q { display: contents; }
.gs-rows .g-pp2 .g-pay { justify-self: end; }
.gs-rows .g-pp2 .g-p { justify-self: end; font: 700 17px/1.1 var(--mono); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.gs-rows .g-pp2 .g-np { font: 500 9.5px/1.8 var(--mono); letter-spacing: 0; color: var(--ink-soft); }
@media (max-width: 899px) {
  /* four lines on every row: CASH and its figure, its time, CARD and its figure, its time (an empty line for "not posted") */
  .gs-rows .g-pp2 { width: 94px; row-gap: 1px; grid-template-columns: auto 1fr; }
  .gs-rows .g-pp2 .g-pay { grid-column: 1; justify-self: start; }
  .gs-rows .g-pp2 .g-p { grid-column: 2; }
  .gs-rows .g-pp2 .g-t { display: block; grid-column: 1 / -1; justify-self: end; height: 12px; margin: 0 0 2px; font: 500 9.5px/12px var(--mono);
    letter-spacing: -.02em; color: var(--ink-soft); white-space: nowrap; }
  .gs-rows .g-pp2 .g-p, .gs-rows .g-pp2 .g-np { line-height: 19px; }
}
@media (max-width: 379px) { .gs-rows .g-pp2 { width: 88px; column-gap: 5px; } .gs-rows .g-pp2 .g-p:not(.g-np) { font-size: 16px; } }
.gs-head .gs-h2 { display: none; }
@media (min-width: 900px) {
  .gs-card[data-pay="both"] .gs-head .gs-h1 { display: none; }
  .gs-card[data-pay="both"] .gs-head .gs-h2 { display: block; }
  .gs-rows[data-grade="regular"][data-pay="both"] .g-pp[data-g="regular"][data-v~="both"],
  .gs-rows[data-grade="midgrade"][data-pay="both"] .g-pp[data-g="midgrade"][data-v~="both"],
  .gs-rows[data-grade="premium"][data-pay="both"] .g-pp[data-g="premium"][data-v~="both"],
  .gs-rows[data-grade="diesel"][data-pay="both"] .g-pp[data-g="diesel"][data-v~="both"] { display: contents; }
  .gs-rows[data-grade="regular"][data-pay="both"] .g-tp[data-g="regular"][data-v~="both"],
  .gs-rows[data-grade="midgrade"][data-pay="both"] .g-tp[data-g="midgrade"][data-v~="both"],
  .gs-rows[data-grade="premium"][data-pay="both"] .g-tp[data-g="premium"][data-v~="both"],
  .gs-rows[data-grade="diesel"][data-pay="both"] .g-tp[data-g="diesel"][data-v~="both"] { display: none; }
  .gs-rows .g-pp2 .g-q { display: flex; flex-direction: column; align-items: flex-end; grid-row: 1; margin: 0; }
  .gs-rows .g-pp2 .g-q-cash { grid-column: 5; }
  .gs-rows .g-pp2 .g-q-card { grid-column: 6; }
  .gs-rows .g-pp2 .g-pay { display: none; }
  .gs-rows .g-pp2 .g-t { display: block; margin-top: 3px; font: 400 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
  .gs-rows .g-pp2 .g-np { font: 400 12.5px/1.5 var(--sans); letter-spacing: 0; color: var(--ink-soft); }
}
/* Context: the same label column as the vote rows */
.ch-cx { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ch-cx b { min-width: 0; margin: 0; }
.ch-cg { display: block; padding-left: 72px; }
.ch-act { white-space: nowrap; }
@media (max-width: 379px) { .ch-cx { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; } .ch-cg { padding-left: 60px; } }

/* ===================================================================================================== CITY HALL, PASS THREE
   (owner, Sat Sep 26, 2026): every section opens on the letter's terminal bar, so the next meeting and the past ones never
   run together; a notice is one slim line; a past meeting's box stands on a squared date tile (the next meeting's is round);
   the marks are the brand's squares (filled: passed; outlined: on the agenda; a cross: did not pass); the Payments and
   Council headers are small, with who can approve a payment and the dates ahead inside them; the receipt is a paper slip. */
.ch-bar { display: flex; align-items: center; gap: 7px; min-height: 34px; margin: -14px -12px 12px; padding: 0 12px; background: var(--term);
  color: var(--term-ink); font: 600 12px/1 var(--mono); letter-spacing: .02em; }
.ch-bar-p, .ch-bar-c { color: var(--term-acc); }
.ch-bar-c { margin-left: -3px; }
.ch-bar-r { margin-left: auto; color: var(--term-muted); font-size: 10.5px; letter-spacing: .06em; }
html.ch-app .ch-past > .ch-filt { top: 0; }

.ch-pm { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; padding: 14px 0 10px; }
.ch-pmdt { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 58px; border: 1px solid var(--hair);
  border-radius: 7px; background: var(--soft); font: 600 8.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-pmdt b { font: 800 20px/1.05 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ch-pmc { min-width: 0; }
.ch-grp, .ch-cs, .ch-ps { border-top: 1px solid var(--hair); }
.ch-pmd { font: 700 15.5px/1.25 var(--sans); letter-spacing: -.005em; }
.ch-pmt { font: 600 9.5px/1.3 var(--mono); letter-spacing: .1em; }

.ch-pm.is-sel .ch-pmdt, .ch-pm:hover .ch-pmdt { border-color: var(--acc); }
.ch-pm.is-sel .ch-pmd { color: var(--ink); }
.ch-pm.is-sel .ch-pmdt { background: var(--acc-wash); }

.ch-shm { margin-left: 8px; vertical-align: 2px; }

.ch-hd { padding: 14px 0 12px; }
.ch-hdt { font: 700 15px/1.3 var(--sans); }
.ch-hds { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ch-hd .ch-lks { margin-top: 2px; }
.ch-hdk { margin-top: 6px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.ch-hd .ch-ws { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 6px; border: 1px solid var(--hair); border-radius: 7px; overflow: hidden; }
.ch-hd .ch-w + .ch-w .ch-wb { border-left: 1px solid var(--hair); }
.ch-hd .ch-wb { display: grid; align-content: center; gap: 1px; min-height: 44px; padding: 6px 9px; border: 0; border-radius: 0; background: var(--card);
  color: var(--ink-soft); font: 400 12px/1.3 var(--sans); }
.ch-hd .ch-wb b { font: 700 12.5px/1.25 var(--sans); color: var(--ink); }
.ch-hd .ch-wb:hover { background: var(--soft); }
.ch-hd .ch-wb:focus-visible { outline-offset: -2px; }
.ch-hdd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; margin-top: 8px; padding: 5px 0; border-top: 1px dashed var(--hair);
  border-bottom: 1px dashed var(--hair); }
.ch-hdd div { display: contents; }
.ch-hdd dt { font: 600 10px/2.1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); white-space: nowrap; }
.ch-hdd dd { font-size: 13.5px; line-height: 1.55; align-self: center; }
/* the county elections office's links under the dates, in election season */
/* one tidy column, one link a line (never two and a stray one) */
.ch-hd .ch-elk { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 2px; }
.ch-hd .ch-eaf { margin-top: 8px; }
@media (pointer: fine) and (min-width: 1024px) { .ch-hd .ch-elk .ch-lk { min-height: 28px; } }
/* the next meeting: its place and that anyone can speak, each fact beside its label's first line */
.ch-up .ch-f div { align-items: baseline; }
.ch-spk dd .ch-lk { display: flex; width: max-content; min-height: 36px; }
/* "Not every member agreed": each such decision and the names as the minutes print them, shown while the filter is on */
.ch-splt { display: grid; gap: 3px; margin: 2px 0 8px; font: 400 13px/1.4 var(--sans); color: var(--ink-soft); }
.ch-splt[hidden] { display: none; }
.ch-spl b { font-weight: 600; color: var(--ink); }
.ch-yr1 > .ch-splt { margin-top: -2px; padding-bottom: 8px; border-bottom: 1px dashed var(--hair); }
/* an earlier list read check by check: the same tape, each check opening its slip in place */
.ch-cse { margin-top: 10px; }
.ch-ce > summary { list-style: none; }
.ch-ce > summary::-webkit-details-marker { display: none; }
.ch-ce[open] > summary { background: var(--soft); }
.ch-ce > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ch-ce > .ch-rc { padding-top: 10px; }

.ch-rc { padding: 16px 0 4px; }
.ch-slip { position: relative; max-width: 460px; margin: 6px auto 14px; padding: 16px 16px 14px; background: var(--paper); color: var(--ink); }
.ch-slip::before, .ch-slip::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; }
.ch-slip::before { top: -6px; background: conic-gradient(from 135deg at 50% 0, var(--paper) 90deg, transparent 0) 0 0 / 12px 6px repeat-x; }
.ch-slip::after { bottom: -6px; background: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0) 0 0 / 12px 6px repeat-x; }
.ch-rch { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--ink-soft);
  font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-slip .ch-rf div { grid-template-columns: 92px minmax(0, 1fr); padding: 7px 0; }
.ch-rtot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding: 8px 0;
  border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
.ch-rtot span { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ch-rtot b { font: 800 21px/1.1 var(--mono); letter-spacing: -.01em; }
.ch-rs { margin-top: 14px; }
.ch-rk { font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.ch-rl { margin-top: 12px; padding-top: 4px; border-top: 1px dashed var(--ink-soft); }
.ch-rfine { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
@media (min-width: 720px) {
  .ch-bar { margin-left: -20px; margin-right: -20px; padding: 0 20px; }
}
@media (min-width: 1024px) {
  html.ch-app .ch-pane.is-split { padding-left: 0; }
  .ch-view.is-split > .ch-mlist { padding-left: 20px; }
  .ch-mdetail .ch-slip { margin-left: 0; }
}

/* CITY HALL, POLISH (owner, Sat Sep 26, 2026: "two separate full UX design and functionality polishes") */
/* the tabs, easy to find (owner, Sat Sep 26, 2026: "they get lost"): taller, larger labels, the chosen one open to the
   card with an accent bar across its top, the others set back on a darker ground */
.ch-tabs { gap: 5px; }
.ch-tab { min-height: 52px; gap: 9px; border-color: var(--hair); background: var(--soft); color: var(--ink-soft); font: 700 12px/1 var(--mono); letter-spacing: .12em; }
.ch-tab .ch-ti { width: 20px; height: 20px; }
.ch-tab:hover { background: var(--acc-wash); color: var(--ink); }
.ch-tab.is-sel { position: relative; background: var(--card); color: var(--ink); border-color: var(--hair); box-shadow: inset 0 3px 0 var(--acc); }
.ch-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
@media (max-width: 379px) { .ch-tab { gap: 6px; font-size: 11px; letter-spacing: .08em; } .ch-tab .ch-ti { width: 17px; height: 17px; } }
@media (min-width: 720px) { .ch-tabs { width: 540px; } .ch-tab { min-height: 50px; } }
.ch-sh { margin: 22px 0 4px; padding-top: 10px; border-top: 2px solid var(--ink); font: 700 11px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ch-sh:first-child, .ch-acts + .ch-sh, .ch-stat + .ch-sh { margin-top: 14px; }
.ch-sh + .ch-sm { margin-top: 2px; }
.ch-dt { font-size: 16.5px; }
.ch-ph2 ~ .ch-rf dd { font: 400 14px/1.45 var(--sans); }
.ch-ph2 ~ .ch-k, .ch-rf + .ch-k { margin-top: 18px; }
.ch-view.is-split :is(.ch-pm, .ch-yr1, .ch-c, .ch-p), html.ch-app .ch-past :is(.ch-pm, .ch-yr1, .ch-c) { scroll-margin-top: 64px; }
@media (min-width: 720px) {
  .ch { width: calc(100% - 2 * var(--gut)); }
}
@media (pointer: fine) { .ch-grab { display: none; } }
@media (min-width: 1024px) {
  html.ch-app .ch-pane.is-split { overflow: clip; }
  .ch-view.is-split .ch-pm.is-sel { background: var(--acc-wash); border-left-color: var(--acc); }
  .ch-view.is-split .ch-pm:hover:not(.is-sel) { background: var(--soft); }
  .ch-mdetail > .ch-mdh { position: sticky; top: -18px; z-index: 2; margin: -18px -28px 0; padding: 16px 28px 10px; background: var(--card); border-bottom: 1px solid var(--hair); }
  .ch-mdetail :is(.ch-d, .ch-bio, .ch-stat, .ch-sm, .ch-full, .ch-hds) { max-width: 70ch; }
  .ch-mdetail .ch-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; }
}
/* phone polish: every tap target at least 40 px; a link row never splits a link; the sheet keeps one height so a swipe
   between meetings does not jump; a year's own count steps aside while a filter is on */
.ch-lk, .ch-v .ch-lk, .ch-v .ch-pend { min-height: 40px; }
.ch-ctx2 > summary { min-height: 42px; }
.ch-seta { display: inline-block; padding: 9px 0; }
.ch-pml { flex-wrap: wrap; column-gap: 16px; }
.ch-lk, .ch-pend { white-space: nowrap; }
.ch-grab { flex: none; border-radius: 0; background: var(--ink-faint); }
.is-filtered .ch-yn { display: none; }
.ch-prl2 { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; color: var(--ink);
  text-decoration: none; }
.ch-prl2:hover { background: var(--soft); }
.ch-prl2 .ch-prt { font-size: 14px; }
.ch-prl2 .ch-prx { color: var(--acc-t); font: 600 11px/1 var(--mono); }
.ch-vback { margin: 10px 0 2px; }
@media (max-width: 719px) {
  .ch-sheet[open] { height: 92dvh; max-height: 92dvh; }
}
/* the section bars in the brand's warm dark ink (owner, Sat Sep 26, 2026: the terminal black was too harsh) */
.ch-bar { background: #2c2620; color: #f7f3ec; }
.ch-bar-p, .ch-bar-c { color: #e2934f; }
.ch-bar-r { color: #b9ac9b; }
@media (prefers-color-scheme: dark) { .ch-bar { background: #3b322a; color: #f2ece2; } }

/* ===================================================================================================== THE DISTRICT MAP
   (owner, Sat Sep 26, 2026: a pop-up in the police map's style, the districts laid over it precisely, pinch to zoom,
   the major streets, highways and landmarks named, "the most 3D looking excellent map possible"). The police map's
   streets, water and rail under the land's relief (one grey image, blended so it deepens hills on either ground), the
   districts as tinted plates whose edges cast a soft shadow, a light from the upper left; labels keep their size. */
.dz {
  --map-land: #fffdf9; --map-veil: #ece5d9; --map-water: #d8e2e2; --map-st: #e3d9c9; --map-major: #cdbfab; --map-fwy: #b8a893;
  --dz1: #b4622d; --dz2: #2f6fbf; --dz3: #1f9a7a; --dz4: #a67c14;
}
@media (prefers-color-scheme: dark) {
  .dz {
    --map-land: #282119; --map-veil: #16120e; --map-water: #151b1e; --map-st: #3a3129; --map-major: #54483b; --map-fwy: #6a5b4a;
    --dz1: #e2934f; --dz2: #5a8fd8; --dz3: #2c9f7b; --dz4: #d2a93c;
  }
}
.ch-dzr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.ch-act.ch-dzb { display: inline-flex; gap: 9px; min-height: 44px; padding: 0 16px; border-color: var(--acc); background: var(--acc-wash); color: var(--ink);
  font-size: 10.5px; letter-spacing: .1em; }
.ch-dzb .ico { width: 18px; height: 18px; color: var(--acc); }
.ch-dzb:hover { background: var(--card); }
.dz { padding: 10px 0 4px; }
.dz-frame { position: relative; height: min(56dvh, 600px); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--map-land);
  touch-action: none; box-shadow: 0 1px 0 rgba(28, 22, 16, .05), 0 14px 30px -20px rgba(28, 22, 16, .6); }
.dz-svg { display: block; width: 100%; height: 100%; --k: 1.4; cursor: grab; -webkit-user-select: none; user-select: none; }
.dz-frame.is-drag .dz-svg { cursor: grabbing; }
.dz .pm-ground { fill: var(--map-land); }
.dz .pm-water { fill: var(--map-water); }
.dz .pm-streets { fill: none; stroke: var(--map-st); stroke-width: .8px; stroke-linejoin: round; stroke-linecap: round; }
.dz .pm-major { fill: none; stroke: var(--map-major); stroke-width: 1.8px; stroke-linejoin: round; stroke-linecap: round; }
.dz .pm-freeway { fill: none; stroke: var(--map-fwy); stroke-width: 3.2px; stroke-linejoin: round; stroke-linecap: round; }
.dz .pm-rail { fill: none; stroke: var(--ink-faint); stroke-width: .8px; stroke-dasharray: 2 3; }
.dz-relief { mix-blend-mode: overlay; opacity: .95; pointer-events: none; }
.dz-veil { fill: var(--map-veil); fill-opacity: .62; pointer-events: none; }
.dz-d { fill-opacity: .16; stroke: none; transition: fill-opacity .2s var(--ease); }
.dz-d1 { fill: var(--dz1); } .dz-d2 { fill: var(--dz2); } .dz-d3 { fill: var(--dz3); } .dz-d4 { fill: var(--dz4); }
.dz-e { fill: none; stroke-width: 2.2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.dz-e1 { stroke: var(--dz1); } .dz-e2 { stroke: var(--dz2); } .dz-e3 { stroke: var(--dz3); } .dz-e4 { stroke: var(--dz4); }
.dz.has-on .dz-d { fill-opacity: .05; }
.dz.has-on .dz-d.is-on { fill-opacity: .3; }
.dz.has-on .dz-e { stroke-opacity: .45; }
.dz.has-on .dz-e.is-on { stroke-opacity: 1; stroke-width: 3.6px; }
.dz-sun { mix-blend-mode: soft-light; pointer-events: none; }
.dz-l, .dz-m text, .dz-n { paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.dz-l { fill: var(--ink-soft); stroke: var(--map-land); stroke-width: calc(var(--k) * 3px); font-size: calc(var(--k) * 8.5px); }
.dz-l-road { font-family: var(--mono); font-weight: 700; letter-spacing: .12em; }
.dz-l-place { fill: var(--ink); font: italic 700 calc(var(--k) * 10.5px) var(--sans); letter-spacing: .01em; }
.dz-l-water { font: italic 600 calc(var(--k) * 10.5px) var(--sans); letter-spacing: .08em; stroke: var(--map-water); }
.dz-t2, .dz-ms { opacity: 0; transition: opacity .25s var(--ease); }
.dz-frame.is-z2 .dz-t2, .dz-frame.is-z2 .dz-ms { opacity: 1; }
.dz-m circle { fill: var(--ink); stroke: var(--map-land); stroke-width: 1.2px; vector-effect: non-scaling-stroke; r: calc(var(--k) * 2.6px); }
.dz-m text { fill: var(--ink); stroke: var(--map-land); stroke-width: calc(var(--k) * 2.6px); font: 600 calc(var(--k) * 8.5px) var(--sans); }
.dz-n { font: 800 calc(var(--k) * 30px) var(--sans); stroke: var(--card); stroke-width: calc(var(--k) * 6px); }
.dz-n1 { fill: var(--dz1); } .dz-n2 { fill: var(--dz2); } .dz-n3 { fill: var(--dz3); } .dz-n4 { fill: var(--dz4); }
.dz-frame.is-z2 .dz-n { opacity: .55; }
.dz-fit { position: absolute; top: 10px; right: 10px; min-width: 48px; height: 40px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 7px; background: var(--card);
  color: var(--ink); cursor: pointer; font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow); }
.js .dz-fit.js-only { display: block; }
.dz-hint { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 7px 10px; border-radius: 7px; background: rgba(44, 38, 32, .82); color: #f7f3ec;
  font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; transition: opacity .4s var(--ease); }
.dz.was-used .dz-hint { opacity: 0; }
.dz-pop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--hair);
  border-left: 4px solid var(--acc); border-radius: 7px; background: var(--card); }
.dz-pop[hidden] { display: none; }
.dz-pop1 { border-left-color: var(--dz1); } .dz-pop2 { border-left-color: var(--dz2); } .dz-pop3 { border-left-color: var(--dz3); } .dz-pop4 { border-left-color: var(--dz4); }
.dz-pt { display: grid; gap: 2px; margin: 0; }
.dz-pk { font: 700 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.dz-pn { font: 700 15px/1.3 var(--sans); }
.dz-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.dz-lb, .dz-lm { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 7px;
  background: var(--card); color: var(--ink); text-align: left; font: inherit; }
.dz-lb { cursor: pointer; }
.dz-lb:hover { background: var(--soft); }
.dz-lb.is-on { background: var(--acc-wash); border-color: var(--acc); }
.dz-lm { border-style: dashed; }
.dz-sw { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #fffdf9; font: 800 14px/1 var(--sans);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.dz-sw1 { background: var(--dz1); } .dz-sw2 { background: var(--dz2); } .dz-sw3 { background: var(--dz3); } .dz-sw4 { background: var(--dz4); }
.dz-swm { background: conic-gradient(var(--dz1) 0 25%, var(--dz2) 0 50%, var(--dz3) 0 75%, var(--dz4) 0); }
.dz-lt { display: grid; gap: 1px; min-width: 0; }
.dz-lk { font: 700 9px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dz-lw { font: 700 13.5px/1.3 var(--sans); }
.dz-lr { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
.dz-src { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
.dz-src .ch-lk { display: inline; min-height: 0; white-space: normal; font-size: 9px; }
@media (min-width: 720px) {
  .ch-sheet.is-map { width: min(1060px, 94vw); }
  .dz-frame { height: min(62vh, 700px); }
  .dz-leg { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .dz-d, .dz-t2, .dz-ms, .dz-hint { transition: none; } }
/* the map fills the whole pop-up (owner, Sat Sep 26, 2026: "for max usability"): the legend floats over its foot, the
   Fit button and Sources over its top corner; a label level shows as the reader zooms in */
.ch-sheet.is-map .fs-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ch-sheet.is-map .fs-body > .dz { flex: 1; min-height: 0; }
.ch-sheet.is-map[open] { display: flex; flex-direction: column; }
.dz { display: flex; flex-direction: column; padding: 0; }
.dz-frame { flex: 1; min-height: 360px; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.dz-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100% - 20px); }
.dz-fit { position: static; }
.dz-srcd { max-width: 320px; }
.dz-srcd > summary { list-style: none; display: grid; place-items: center; min-width: 48px; height: 40px; padding: 0 10px; border: 1px solid var(--hair);
  border-radius: 7px; background: var(--card); color: var(--ink); cursor: pointer; font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--shadow); margin-left: auto; width: max-content; }
.dz-srcd > summary::-webkit-details-marker { display: none; }
.dz-srcd[open] .dz-src { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.dz-hint { top: 10px; bottom: auto; }
.dz-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: linear-gradient(to top, var(--card) 35%, transparent); }
.dz-foot .dz-pop { margin: 0 0 6px; box-shadow: var(--shadow); }
.dz-leg { display: flex; gap: 6px; margin: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dz-leg::-webkit-scrollbar { display: none; }
.dz-leg > li { flex: 0 0 auto; }
.dz-lb, .dz-lm { width: auto; min-height: 50px; padding: 6px 12px 6px 8px; box-shadow: 0 6px 16px -12px rgba(28, 22, 16, .6); background: var(--card); }
.dz-lm { border-style: dashed; }
.dz-t3, .dz-icg.dz-t2, .dz-icg.dz-t3 { opacity: 0; transition: opacity .25s var(--ease); }
.dz-frame.is-z3 .dz-t3 { opacity: 1; }
.dz-frame.is-z2 .dz-icg.dz-t2 { opacity: 1; }
.dz-ic rect { fill: #2c2620; stroke: #fffdf9; stroke-width: 1.5px; filter: drop-shadow(0 2px 2px rgba(28, 22, 16, .45)); }
.dz-ic path { fill: none; stroke: #f7f3ec; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.dz-ict, .dz-ict2 { paint-order: stroke; stroke: var(--map-land); stroke-linejoin: round; pointer-events: none; }
.dz-ict { fill: var(--ink); font: 800 calc(var(--k) * 10px) var(--sans); stroke-width: calc(var(--k) * 3px); }
.dz-ict2 { fill: var(--acc); font: 700 calc(var(--k) * 7.5px) var(--mono); letter-spacing: .1em; text-transform: uppercase; stroke-width: calc(var(--k) * 2.6px); }
@media (min-width: 720px) {
  .ch-sheet.is-map[open] { height: min(88vh, 900px); }
  .dz-frame { height: auto; }
}
@media (max-width: 719px) {
  .ch-sheet.is-map[open] { height: 94dvh; max-height: 94dvh; }
}
/* the relief on the paper: a brightened copy multiplied in (flat land stays white, the hills' shaded sides darken);
   on the dark ground an overlay (both sides show) */
.dz-relief { mix-blend-mode: multiply; filter: url(#dz-lite); opacity: .85; }
@media (prefers-color-scheme: dark) {
  .dz-relief { mix-blend-mode: overlay; filter: none; opacity: .95; }
  .dz-d { fill-opacity: .1; }
  .dz.has-on .dz-d { fill-opacity: .04; }
  .dz.has-on .dz-d.is-on { fill-opacity: .15; }
}
/* the district map, on brand (owner, Sat Sep 26, 2026): only the site's own colours (the accent, the police map's blue
   and green, the ink's soft brown); neighbourhoods in the site's small mono capitals, streets as on the police map, water
   in italic; the hint a terminal line; the district strip compact and squared */
.dz { --dz4: #756b5e; }
@media (prefers-color-scheme: dark) { .dz { --dz4: #b9ac9b; } }
.dz-l-place { fill: var(--ink); font: 700 calc(var(--k) * 9px) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.dz-l-road { font-weight: 600; fill: var(--ink-soft); }
.dz-relief { opacity: .7; }
@media (prefers-color-scheme: dark) { .dz-relief { opacity: .95; } }
.dz-hint { padding: 8px 11px; border-radius: 7px; background: #2c2620; color: #f7f3ec; font: 600 11px/1 var(--mono); letter-spacing: .02em; text-transform: none; }
.dz-hp { color: #e2934f; }
.dz-foot { padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); }
.dz-leg { gap: 5px; }
.dz-lb, .dz-lm { min-height: 40px; gap: 7px; padding: 0 11px 0 5px; border-radius: 7px; box-shadow: 0 6px 14px -12px rgba(28, 22, 16, .7); }
.dz-lm { padding-left: 11px; border-style: dashed; }
.dz-sw { width: 30px; height: 30px; border-radius: 5px; font: 800 14px/1 var(--mono); box-shadow: none; }
.dz-lw { font: 700 13px/1 var(--sans); white-space: nowrap; }
.dz-lk { font: 700 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.dz-lb.is-on { background: var(--acc-wash); border-color: var(--acc); }
@media (min-width: 720px) { .dz-leg { justify-content: center; } }
/* neighbourhood names blend into the map (owner, Sat Sep 26, 2026): muted, lighter, widely spaced, a faint halo */
.dz-l-place { fill: var(--ink-soft); fill-opacity: .78; font-weight: 600; letter-spacing: .24em; stroke-opacity: .55; stroke-width: calc(var(--k) * 2.2px); }
/* the district strip never runs off the phone: districts 1-3, then 4 and the mayor */
@media (max-width: 719px) {
  .dz-leg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .dz-leg > li.dz-lm { grid-column: span 2; }
  .dz-lb, .dz-lm { width: 100%; }
}
/* the council list, compact (owner, Sat Sep 26, 2026): smaller photos, one line for the term */
.ch-pb { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; min-height: 52px; padding: 7px 0; }
.ch-pi { width: 38px; height: 38px; border-radius: 7px; }
.ch-pn { font: 700 14.5px/1.25 var(--sans); }
.ch-pr2 { font-size: 12.5px; line-height: 1.3; }
.ch-pe { font: 600 9px/1.3 var(--mono); letter-spacing: .1em; }
/* the district strip: one row, every name in view (owner: "last name only is fine"): a numbered badge over the surname */
.dz-leg, .dz-leg:is(*) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; overflow: visible; }
.dz-leg > li.dz-lm { grid-column: auto; }
.dz-lb, .dz-lm { flex-direction: column; justify-content: center; gap: 4px; width: 100%; min-height: 58px; padding: 6px 2px; text-align: center; }
.dz-lm { border-style: dashed; }
.dz-sw { width: 24px; height: 24px; font-size: 12.5px; }
.dz-swm { color: #fffdf9; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.dz-lw { font: 700 12px/1.1 var(--sans); white-space: nowrap; }
@media (min-width: 720px) { .dz-leg { max-width: 560px; margin: 0 auto; } .dz-lw { font-size: 13px; } }
/* the names sit on the map as frosted glass (owner, Sat Sep 26, 2026: "some transparency so you can see the map") */
.dz-foot { background: none; }
.dz-lb, .dz-lm, .dz-foot .dz-pop { background: rgba(255, 253, 249, .66); -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
  border-color: rgba(117, 107, 94, .28); }
.dz-lb.is-on { background: rgba(249, 227, 200, .82); }
@media (prefers-color-scheme: dark) {
  .dz-lb, .dz-lm, .dz-foot .dz-pop { background: rgba(38, 32, 25, .62); border-color: rgba(185, 172, 155, .22); }
  .dz-lb.is-on { background: rgba(54, 40, 26, .85); }
}
/* the name boxes in the brand's idiom (owner, Sat Sep 26, 2026): the index number ("01") in the district's colour, the
   surname in small mono capitals, a district rule across the top; squared, frosted */
.dz-lb, .dz-lm { gap: 5px; min-height: 52px; padding: 7px 2px 6px; border-radius: 7px; border-top-width: 3px; }
.dz-lb1 { border-top-color: var(--dz1); } .dz-lb2 { border-top-color: var(--dz2); } .dz-lb3 { border-top-color: var(--dz3); } .dz-lb4 { border-top-color: var(--dz4); }
.dz-lm { border-top-style: solid; border-top-color: var(--ink-soft); }
.dz-sw, .dz-sw1, .dz-sw2, .dz-sw3, .dz-sw4, .dz-swm { width: auto; height: auto; background: none; box-shadow: none; text-shadow: none; border-radius: 0;
  font: 800 13px/1 var(--mono); letter-spacing: .04em; }
.dz-sw1 { color: var(--dz1); } .dz-sw2 { color: var(--dz2); } .dz-sw3 { color: var(--dz3); } .dz-sw4 { color: var(--dz4); }
.dz-swm { color: var(--ink-soft); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 13px; }
.dz-lw { font: 700 9.5px/1.1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.dz-lb.is-on { border-color: var(--acc); }
.dz-lb1.is-on { border-top-color: var(--dz1); } .dz-lb2.is-on { border-top-color: var(--dz2); } .dz-lb3.is-on { border-top-color: var(--dz3); } .dz-lb4.is-on { border-top-color: var(--dz4); }
@media (min-width: 720px) { .dz-lw { font-size: 10px; } }
.dz-foot .dz-pop { border-left-width: 4px; }
.dz-foot .dz-pop1 { border-left-color: var(--dz1); } .dz-foot .dz-pop2 { border-left-color: var(--dz2); }
.dz-foot .dz-pop3 { border-left-color: var(--dz3); } .dz-foot .dz-pop4 { border-left-color: var(--dz4); }
/* the map pop-up: edge to edge under one slim terminal bar (owner, Sat Sep 26, 2026: "a beautiful, edge to edge view…
   a small on-brand top bar to close out") */
.ch-sheet.is-map { overflow: hidden; border: 0; background: #2c2620; }
.ch-sheet.is-map .ch-grab, .ch-sheet.is-map .ch-arw { display: none; }
.ch-sheet.is-map .fs-top { min-height: 44px; padding: 0 6px 0 14px; border: 0; background: #2c2620; }
.ch-sheet.is-map .fs-t { color: #f7f3ec; font: 600 13px/1 var(--mono); letter-spacing: .02em; text-transform: lowercase; }
.ch-sheet.is-map .fs-t::before { content: "> "; color: #e2934f; }
.ch-sheet.is-map .fs-t::after { content: " \258C"; color: #e2934f; }
.ch-sheet.is-map .fs-reset { color: #e2934f; }
.ch-sheet.is-map .fs-reset:focus-visible { outline: 2px solid #e2934f; outline-offset: -4px; }
@media (prefers-color-scheme: dark) { .ch-sheet.is-map, .ch-sheet.is-map .fs-top { background: #3b322a; } }
@media (min-width: 720px) { .ch-sheet.is-map { border-radius: 10px; } }
/* a desktop's map pop-up takes the map's own portrait shape, so the whole city fills it edge to edge */
@media (min-width: 720px) {
  .ch-sheet.is-map { width: min(94vw, calc((min(88vh, 900px) - 44px) * .78)); }
}
/* a phone held sideways (844 x 390, 932 x 430): the portrait shape left a 234 px strip with the names below its edge; the
   pop-up takes the screen instead (audit 03 A9) */
@media (min-width: 720px) and (max-height: 500px) {
  .ch-sheet.is-map { width: 94vw; }
  .ch-sheet.is-map[open] { height: 94dvh; max-height: 94dvh; }
  .ch-sheet.is-map .dz-frame { min-height: 0; }
}
/* the map's top bar is a City section bar (owner: "look more like the section headings in the city page") */
.ch-sheet.is-map .fs-top { min-height: 40px; padding: 0 4px 0 12px; }
.ch-sheet.is-map .fs-t { display: flex; align-items: center; gap: 7px; font: 600 12px/1 var(--mono); letter-spacing: .02em; }
.ch-sheet.is-map .fs-t::before { content: ">"; }
.ch-sheet.is-map .fs-t::after { content: "\258C"; margin-left: -3px; }
.ch-sheet.is-map .fs-reset { font-size: 10px; }
@media (min-width: 720px) { .ch-sheet.is-map .fs-top { padding-left: 20px; } }
/* the Fit control: a squared frosted button with corner brackets, the name boxes' glass */
.dz-fit, .js .dz-fit.js-only { display: grid; place-items: center; width: 40px; min-width: 0; height: 40px; padding: 0; border: 1px solid rgba(117, 107, 94, .28);
  border-radius: 7px; background: rgba(255, 253, 249, .7); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: var(--acc-t);
  box-shadow: 0 6px 14px -10px rgba(28, 22, 16, .7); }
.dz-fit .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.dz-fit:hover { background: rgba(249, 227, 200, .85); }
.dz-fit:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .dz-fit, .js .dz-fit.js-only { background: rgba(38, 32, 25, .66); border-color: rgba(185, 172, 155, .22); } }
/* ===================================================================================================== THE COUNCIL TAB
   (owner, Sat Sep 26, 2026): each member's page carries their contacts, the biography under a fold, and their record:
   every decision the official minutes record them voting on, and the motions they made, one line each, folded by year,
   one filter, each row opening its meeting. Never a count, share or ranking. */
.ch-ct { color: var(--acc-t); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-family: var(--sans); font-weight: 600; }
.ch-pctx { margin-top: 10px; }
.ch-rec { padding-top: 6px; border-bottom: 0; }
.ch-rec .ch-sh { margin-top: 18px; }
.ch-rec .ch-filt { margin: 8px 0 4px; }
.ch-rrs { margin: 0; padding: 0 0 6px; list-style: none; }
.ch-rr[hidden] { display: none; }
.ch-rrb { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; width: 100%; min-height: 44px; padding: 9px 0 8px;
  border: 0; border-top: 1px solid var(--hair); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ch-rrb:hover { background: var(--soft); }
.ch-rrb:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ch-rrd { font: 600 9.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ch-rrt { font: 500 14.5px/1.35 var(--sans); }
.ch-rrf { display: inline-flex; flex-wrap: wrap; gap: 0 8px; margin-left: 8px; vertical-align: 1px; }
.ch-rrf > span { font: 700 8.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); white-space: nowrap; }
.ch-rrf > .ch-rf-group { color: var(--ink-soft); }
.ch-rrh { font: 700 9.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-align: right; }
.ch-rrh.is-yes { color: var(--ink); }
.ch-rrh.is-no { color: var(--acc-t); }
.ch-rrh.is-abstain, .ch-rrh.is-recused, .ch-rrh.is-absent { color: var(--ink-soft); }
.ch-rec .ch-yr { border-top: 0; }
.ch-rec .ch-yh { border-top: 2px solid var(--ink); }
.ch-sback { margin: 10px 0 0; }
.ch-fsh { margin-top: 22px; }
.ch-recx { min-height: 60px; }
@media (max-width: 379px) { .ch-rrb { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; } }
/* WHAT THEY CAMPAIGNED ON, AND WHAT THE COUNCIL DECIDED SINCE (owner, Sat Sep 26, 2026: the focus of a member's page;
   factual counts; never "wins" or "losses"). A compact header, a strip of counts, one row per priority with its
   timeline: a filled accent square passed with their yes, an outlined one passed with their no, a cross was voted
   down, a ring they did not vote. */
.ch-ph3 { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; }
.ch-psm { flex: none; width: 56px; height: 56px; border-radius: 7px; object-fit: cover; object-position: 50% 15%; }
.ch-ph3t { min-width: 0; }
.ch-pmeta { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.ch-pcon { display: flex; flex-wrap: wrap; gap: 0 16px; }
.ch-pcon .ch-lk { min-height: 32px; }
.ch-camp { padding-top: 4px; border-bottom: 0; }
.ch-camp > .ch-sh { margin-top: 12px; }
.ch-cmx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 10px 0 6px; border: 1px solid var(--hair); border-radius: 7px; overflow: hidden; }
.ch-cmc { display: grid; align-content: start; gap: 3px; padding: 9px 8px; background: var(--card); }
.ch-cmc + .ch-cmc { border-left: 1px solid var(--hair); }
.ch-cmc b { font: 800 22px/1 var(--mono); letter-spacing: -.02em; }
.ch-cmc span { font: 600 8.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ch-cmc-pass_yes b { color: var(--acc-t); }
.ch-cmc-fail b { color: var(--ink); }
.ch-cmc-none b { color: var(--ink-soft); }
.ch-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 8px; font: 600 8.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ch-leg span { display: inline-flex; align-items: center; gap: 5px; }
.ch-leg i { display: inline-grid; place-items: center; width: 9px; height: 9px; font-style: normal; }
.ch-lg-y { background: var(--acc); }
.ch-lg-n { border: 1.5px solid var(--acc); box-sizing: border-box; }
.ch-lg-f { width: auto !important; height: auto !important; font: 700 11px/1 var(--mono); color: var(--ink); }
.ch-lg-a { border: 1.5px solid var(--ink-soft); border-radius: 50%; box-sizing: border-box; }
.ch-cps2 { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.ch-cpi { border-bottom: 1px solid var(--hair); }
.ch-cpd > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; padding: 10px 0 4px; cursor: pointer; list-style: none; }
.ch-cpd > summary::-webkit-details-marker { display: none; }
.ch-cpt { font: 700 15px/1.3 var(--sans); }
.ch-cpn { font: 700 9.5px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); white-space: nowrap; }
.ch-cps { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.ch-tl { grid-column: 1 / -1; display: block; width: 100%; height: auto; margin-top: 2px; overflow: visible; }
.ch-ax { stroke: var(--hair); stroke-width: 2; }
.ch-tk { stroke: var(--ink-faint); stroke-width: 2; }
.ch-mk-y { fill: var(--acc); }
.ch-mk-n { fill: var(--card); stroke: var(--acc); stroke-width: 2; }
.ch-mk-f { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.ch-mk-a { fill: none; stroke: var(--ink-soft); stroke-width: 1.8; }
.ch-cpd[open] > summary { border-bottom: 1px dashed var(--hair); padding-bottom: 8px; }
.ch-cpd .ch-rrs { padding-bottom: 8px; }
.ch-cpd .ch-rrb { grid-template-columns: 78px minmax(0, 1fr) auto; }
.ch-cpd:hover > summary .ch-cpt { text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
@media (max-width: 379px) { .ch-cmc b { font-size: 19px; } .ch-cmc span { font-size: 8px; } }
.ch-tl { max-width: 560px; }
.ch-ty { fill: var(--ink-soft); font: 600 8px var(--mono); letter-spacing: .06em; }
.ch-camp .ch-sm .ch-ct { font-weight: 600; }
.ch-nr { fill: var(--soft); stroke: var(--hair); stroke-dasharray: 3 3; }
.ch-nrt { fill: var(--ink-faint); font: 600 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* the chart, read at a glance (owner, Sat Sep 26, 2026: "pretty hard to easily tell"): a headline, then per priority a
   plain status, its count and one bar split by outcome, on one scale (the busiest priority fills it); the timeline and
   the decisions open beneath */
.ch-chead { margin: 10px 0 2px; font: 400 15px/1.4 var(--sans); }
.ch-chead b { font: 800 17px/1 var(--mono); color: var(--acc-t); }
.ch-cst { grid-column: 1 / -1; font: 700 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ch-cpi.is-yes .ch-cst { color: var(--acc-t); }
.ch-cpi.is-mix .ch-cst { color: var(--ink); }
.ch-cpi.is-no .ch-cst, .ch-cpi.is-none .ch-cst { color: var(--ink-soft); }
.ch-cbar { grid-column: 1 / -1; display: block; width: 100%; height: 12px; margin: 4px 0 2px; border-radius: 2px; overflow: hidden; }
.ch-bar-bg { fill: var(--soft); }
.ch-cpi.is-none .ch-bar-bg { fill: none; stroke: var(--ink-faint); stroke-dasharray: 2 2; stroke-width: .6; vector-effect: non-scaling-stroke; }
.ch-bar-pass_yes { fill: var(--acc); }
.ch-bar-pass_no { fill: var(--acc-wash); stroke: var(--acc); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-bar-fail { fill: var(--ink); }
.ch-bar-none { fill: var(--ink-faint); }
.ch-cpn b { font: 800 18px/1 var(--mono); color: var(--ink); }
.ch-cpn { display: inline-flex; align-items: center; gap: 6px; }
.ch-cpi-c { width: 14px; height: 14px; color: var(--acc); transition: transform .18s var(--ease); }
.ch-cpd[open] .ch-cpi-c { transform: rotate(180deg); }
.ch-cpd > summary:hover { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
.ch-cpb { padding: 6px 0 4px; }
.ch-cpb .ch-tl { margin-bottom: 4px; }
.ch-lg-f { background: var(--ink); }
.ch-lg-a { background: var(--ink-faint); border: 0 !important; border-radius: 0 !important; }
.ch-lg-n { background: var(--acc-wash); }
.ch-stat.ch-stat-q::before { display: none; }
.ch-stat.ch-stat-q { color: var(--ink-soft); }
.ch-nrt { fill: var(--ink-soft); font-size: 9px; }
.ch-ty { font-size: 10px; }
/* audit fixes: the record's year headings inside a sheet, tap targets, flags on their own line */
.ch-rec .ch-yh { position: static; }
.ch-pcon .ch-lk { min-height: 40px; display: inline-flex; align-items: center; }
.ch-rf a.ch-ct { display: inline-block; padding: 10px 0; margin: -10px 0; }
.ch-rrt { display: flex; flex-direction: column; }
.ch-rrf { margin-left: 0; margin-top: 2px; gap: 0 10px; }
.ch-rf-on { color: var(--ink-soft) !important; text-transform: none !important; letter-spacing: .02em !important; }
.ch-retry { margin-top: 8px; width: auto; padding: 0 16px; min-height: 40px; }
.ch-rec .ch-yn { margin-left: 2px; }
.cc-src { margin-top: 12px; }
@media (max-width: 379px) {
  .ch-cmx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-cmc:nth-child(3) { border-left: 0; }
  .ch-cmc:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
.ch-cmc span, .ch-leg { font-size: 9px; }
/* the T (owner, Sat Sep 26, 2026: "a simple T-graph with campaign promises on one side and action/inaction on the other"):
   a heavy rule under the two headings, a thin rule down the middle, one row per priority */
.ch-t { margin-top: 10px; }
.ch-thd { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: 2px solid var(--ink); }
.ch-thd span { padding: 0 10px 6px 0; font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ch-thd span + span { padding-left: 12px; border-left: 1px solid var(--ink); }
.ch-t .ch-cps2 { border-top: 0; }
.ch-trow.ch-trow { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 0; padding: 0; }
.ch-tlft { display: grid; align-content: start; gap: 3px; padding: 10px 10px 10px 0; }
.ch-trgt { display: grid; align-content: start; gap: 4px; padding: 10px 0 10px 12px; border-left: 1px solid var(--ink); }
.ch-trgt .ch-cst, .ch-trgt .ch-cbar { grid-column: auto; margin: 0; }
.ch-tlft .ch-cps { grid-column: auto; font-size: 12.5px; }
.ch-tn { display: grid; gap: 0; font: 500 12.5px/1.35 var(--sans); color: var(--ink); }
.ch-tnd { font: 600 8.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-tmore { display: inline-flex; align-items: center; gap: 5px; font: 700 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); }
.ch-cpi.is-none .ch-trgt .ch-cst { color: var(--ink-soft); }
.ch-cpd[open] > summary.ch-trow { border-bottom: 1px dashed var(--hair); padding-bottom: 0; }
@media (min-width: 720px) {
  .ch-thd { grid-template-columns: 1fr 1.1fr; }
  .ch-trow.ch-trow { grid-template-columns: 1fr 1.1fr; }
  .ch-tlft { padding-right: 16px; }
  .ch-trgt { padding-left: 16px; }
}
/* the T, made to be read in a glance (owner: "something visually stunning"): a ring with one arc per priority, the T under
   a warm terminal bar with an accent spine, a round stamp holding each count (the brand's one ornament) */
.ch-hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; margin: 12px 0 8px; }
.ch-ring { width: 96px; height: 96px; }
.ch-rg { fill: none; stroke-width: 9; stroke-linecap: butt; }
.ch-rg.is-yes { stroke: var(--acc); }
.ch-rg.is-some { stroke: var(--ink-faint); }
.ch-rg.is-none { stroke: var(--hair); stroke-dasharray: 2 3; stroke-width: 7; }
.ch-rg-n { fill: var(--ink); font: 800 30px var(--mono); letter-spacing: -.04em; }
.ch-rg-d { fill: var(--ink-soft); font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ch-hero .ch-chead { margin: 0; font-size: 15.5px; line-height: 1.35; }
.ch-hero .ch-chead b { display: block; margin-bottom: 2px; font: 800 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); }
.ch-numbers { margin-bottom: 4px; }
.ch-numbers .ch-cmx { margin-top: 4px; }
.ch-thd { border: 0; background: #2c2620; border-radius: 7px 7px 0 0; }
.ch-thd span { padding: 10px 12px 9px; color: #f7f3ec; font: 600 12px/1 var(--mono); letter-spacing: .02em; text-transform: lowercase; }
.ch-thd span + span { border-left: 2px solid var(--acc); }
.ch-thd i { font-style: normal; color: #e2934f; }
.ch-thd span:first-child i { margin-right: 4px; }
.ch-thd span:last-child i { margin-left: 1px; }
@media (prefers-color-scheme: dark) { .ch-thd { background: #3b322a; } }
.ch-trgt { position: relative; border-left: 2px solid var(--acc); }
.ch-trgt::before { content: ""; position: absolute; left: -7px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--card);
  border: 2px solid var(--acc); box-sizing: border-box; }
.ch-cpi.is-yes .ch-trgt::before { background: var(--acc); }
.ch-cpi.is-none .ch-trgt::before { border-color: var(--ink-faint); border-style: dashed; }
.ch-tst { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; }
.ch-stamp { width: 44px; height: 44px; transform: rotate(-8deg); }
.ch-st-o { fill: none; stroke: var(--acc); stroke-width: 1.6; }
.ch-st-i { fill: none; stroke: var(--acc); stroke-width: .9; }
.ch-stamp text { fill: var(--acc); font: 800 17px var(--mono); letter-spacing: -.03em; }
.ch-stamp.is-yes .ch-st-i { fill: var(--acc-wash); }
.ch-stamp.is-none .ch-st-o, .ch-stamp.is-none .ch-st-i { stroke: var(--ink-faint); stroke-dasharray: 2 2.5; }
.ch-stamp.is-none text { fill: var(--ink-faint); }
.ch-stamp.is-mix .ch-st-o, .ch-stamp.is-no .ch-st-o { stroke: var(--ink); }
.ch-stamp.is-mix text, .ch-stamp.is-no text { fill: var(--ink); }
.ch-trgt .ch-cst { line-height: 1.35; }
.ch-cpb .ch-cbar { margin: 2px 0 8px; }
.ch-cpi { border-bottom: 1px solid var(--hair); }
.ch-t .ch-cpi:last-child { border-bottom: 2px solid var(--ink); }
/* the deep read, made simple: plain sentences beside the ring and on each priority's "done since" side */
.ch-hero { align-items: start; }
.ch-hero .ch-chead p { margin: 0 0 6px; font: 600 15.5px/1.35 var(--sans); color: var(--ink); }
.ch-sum { margin: 0 0 3px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ch-tpl { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.ch-numbers { margin-top: 10px; }
@media (max-width: 379px) { .ch-hero { grid-template-columns: 80px minmax(0, 1fr); } .ch-ring { width: 80px; height: 80px; } }
.ch-hero .ch-chead p.ch-sum { margin: 0 0 3px; font: 400 13px/1.45 var(--sans); color: var(--ink-soft); }
/* each priority's one sentence, its decisions linked to their meetings */
.ch-sent { margin: 0; padding: 8px 0 12px; border-top: 1px dashed var(--hair); font: 400 14px/1.5 var(--sans); color: var(--ink); }
.ch-sent.is-none { color: var(--ink-soft); }
.ch-sl { display: inline; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--acc-t); font: 600 14px/1.5 var(--sans);
  text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ch-sl:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* THE GRADE (owner, Sat Sep 26, 2026: "grade the candidates A-F… standardized… the math behind it… showed to the user
   (concisely)"): the letter and score open the section, one sentence says why, the member's own sum under it. */
.ch-grade b { font-size: 13px; }
.ch-ring .ch-rg-n { font-size: 34px; }
.ch-nograde { display: block; margin: 12px 0 10px; }
.ch-nograde .ch-chead b { color: var(--ink-soft); }
/* each decision under a priority, with our reading of it */
.ch-gk { margin: 12px 0 2px; font: 700 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.ch-cpb .ch-gk:first-of-type { margin-top: 6px; }
.ch-why { margin: -2px 0 8px; padding-left: 88px; font: 400 12.5px/1.45 var(--sans); color: var(--ink-soft); }
.ch-why-k { margin-right: 6px; font: 700 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ch-rel { margin: 10px 0 4px; }
.ch-rel > summary { display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  font: 700 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-rel > summary::-webkit-details-marker { display: none; }
.ch-rel[open] > summary .ch-ci { transform: rotate(180deg); }
/* the grade in the council list: a small round stamp, like the brand's */
.ch-pb.has-g { grid-template-columns: 38px minmax(0, 1fr) auto auto; }
.ch-pgs { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--acc); border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--card), inset 0 0 0 3.5px var(--acc); background: var(--acc-wash); transform: rotate(-8deg); }
.ch-pgs b { font: 800 15px/1 var(--mono); color: var(--acc-t); }
@media (max-width: 379px) { .ch-pgs { width: 30px; height: 30px; } .ch-pgs b { font-size: 13px; } .ch-why { padding-left: 0; } }

/* THE PROMISES (owner, Sat Sep 26, 2026: "the grade should just start it", "the timeline… a connecting line and much more
   compact… pop ups whenever needed", "high definition and quality"): one compact row per promise, a track of connected
   steps, a pop-up for everything else. */
.ch-camp .ch-sh + .ch-hero { margin-top: 10px; }
.ch-grade b { letter-spacing: .12em; }
.ch-hero .ch-chead.ch-grade > p:not([class]) { margin: 3px 0 6px; font: 650 15px/1.38 var(--sans); color: var(--ink); text-wrap: pretty; }
.ch-hero .ch-chead p.ch-geq { margin: 0 0 2px; font: 600 12px/1.45 var(--mono); letter-spacing: -.01em; color: var(--ink-soft); overflow-wrap: anywhere; }
.ch-camp .ch-gact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 4px 0 0; padding: 2px 0; border-top: 1px dashed var(--hair); border-bottom: 1px dashed var(--hair); }
.ch-camp .ch-gact .ch-lk { min-height: 40px; font-size: 10px; line-height: 1.2; }
/* the rows: campaigned on | done since, one line of meta, the track and the priority's score */
.ch-t2 { margin-top: 12px; }
.ch-pqs2 { margin: 0; padding: 0; list-style: none; }
.ch-pq { border-bottom: 1px solid var(--hair); }
.ch-pqb { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; min-height: 56px; padding: 0; border: 0;
  background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ch-pqb:hover { background: var(--soft); }
.ch-pqb:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ch-pql { display: grid; gap: 3px; min-width: 0; padding: 9px 10px 9px 0; }
.ch-pqt { font: 700 14.5px/1.25 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.ch-pqm { font: 600 8.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-pq.is-yes .ch-pqm { color: var(--acc-t); }
.ch-pqr { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 8px; align-self: stretch; padding: 0 0 0 10px;
  border-left: 2px solid var(--acc); }
.ch-trk { display: block; width: 100%; height: auto; overflow: visible; }
.ch-trk .tk-ax { stroke: var(--hair); stroke-width: 1.4; }
.ch-trk .tk-nr { stroke: var(--ink-faint); stroke-width: 1.4; stroke-dasharray: 2 2.5; }
.ch-trk .tk-yr { stroke: var(--ink-faint); stroke-width: .9; }
.ch-trk .tk-now { stroke: var(--ink); stroke-width: 1.4; }
.ch-trk .tk-ln { stroke: var(--acc); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.ch-trk .tk-b { fill: var(--acc); stroke: var(--card); stroke-width: 1.2; }
.ch-trk .tk-e { fill: var(--card); stroke: var(--acc); stroke-width: 1.8; }
.ch-trk .tk-o { fill: var(--card); stroke: var(--ink-soft); stroke-width: 1.2; }
.ch-trk .tk-x { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
/* HOW TO READ THE T-GRAPH (owner, Mon Sep 28, 2026): one short line in the Wire's voice, the key under it, the time line once
   under the header (each new year, today at the end), a promise with no step saying so where its steps would be */
.ch-tdesc { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.ch-tdesc + .ch-tkey { margin: 6px 0 0; }
.ch-tkey + .ch-t2 { margin-top: 10px; }
.ch-pqax { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hair); }
.ch-pqax .ch-pqr { padding-top: 4px; padding-bottom: 3px; }
.ch-axs .ax-y { fill: var(--ink-soft); font: 600 9px var(--mono); letter-spacing: .02em; }
.ch-axs .ax-now { fill: var(--ink); }
.ch-nost { font: 600 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-pqs { display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--acc); border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--card), inset 0 0 0 3.5px var(--acc); background: var(--acc-wash); }
.ch-pqs b { font: 800 12.5px/1 var(--mono); letter-spacing: -.04em; color: var(--acc-t); }
.ch-pq.is-mix .ch-pqs { border-color: var(--ink-soft); box-shadow: inset 0 0 0 2.5px var(--card), inset 0 0 0 3.5px var(--ink-soft); background: var(--soft); }
.ch-pq.is-mix .ch-pqs b { color: var(--ink); }
.ch-pq.is-none .ch-pqs { border: 1.5px dashed var(--ink-faint); box-shadow: none; background: none; }
.ch-pq.is-none .ch-pqs b { color: var(--ink-faint); }
.ch-pq.is-none .ch-pqr { border-left-color: var(--hair); }
.ch-t2 .ch-pq:last-child { border-bottom: 2px solid var(--ink); }
.ch-tkey { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 2px; font: 600 8.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ch-tkey span { display: inline-flex; align-items: center; gap: 5px; }
.ch-tkey i { display: inline-block; width: 9px; height: 9px; }
.ch-tkey .k-b { background: var(--acc); border-radius: 2px; }
.ch-tkey .k-e { border: 2px solid var(--acc); border-radius: 50%; }
.ch-tkey .k-o { width: 7px; height: 7px; border: 1.4px solid var(--ink-soft); border-radius: 50%; }
.ch-tkey .k-x { background: linear-gradient(45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--ink) 43% 57%, transparent 57%); }
.ch-tkey .k-n { width: 14px; height: 0; border-top: 1.4px dashed var(--ink-faint); }
/* the pop-ups */
@media (min-width: 720px) { .fsheet.ch-pp { width: 560px; } }
.ch-ppb { padding-top: 12px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.ch-ppb .ch-mthk { margin: 14px 0 4px; font: 700 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ch-ppb .ch-mthk:first-child { margin-top: 0; }
.ch-pps { margin: 0; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.ch-ppl { margin: 0; }
.ch-ppl .ch-lk { min-height: 36px; font-size: 10px; }
.ch-peq { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ch-peq span { padding: 6px 8px; border: 1px solid var(--hair); border-radius: 7px; background: var(--soft); font: 600 12px/1 var(--mono); color: var(--ink); }
.ch-peq .ch-peq-s { border-color: var(--acc); background: var(--acc); color: var(--card); font-weight: 800; }
.ch-ppb .ch-sent { margin: 0 0 8px; font-size: 14.5px; }
.ch-ppb .ch-tl { margin: 4px 0 2px; }
.ch-ppb .ch-rrs { margin: 0; padding: 0; list-style: none; }
.ch-ppb .ch-rrb { grid-template-columns: 78px minmax(0, 1fr) auto; }
.ch-ppb .ch-why { padding-left: 88px; }
@media (max-width: 379px) {
  .ch-pqb { grid-template-columns: 1fr 1fr; }
  .ch-pqr { grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; }
  .ch-pqs { width: 32px; height: 32px; }
  .ch-ppb .ch-why { padding-left: 0; }
  .ch-ppb .ch-rrb { grid-template-columns: 64px minmax(0, 1fr) auto; }
}
@media (min-width: 720px) { .ch-pqb, .ch-pqax { grid-template-columns: 1fr 1.1fr; } .ch-pql { padding-right: 16px; } .ch-pqr { padding-left: 16px; } }
@media (min-width: 720px) { .ch-pqr { grid-template-columns: minmax(0, 260px) 36px; justify-content: end; gap: 14px; } }

/* THE GRADE AS A SEAL (owner, Sat Sep 26, 2026: "keep the branding logo for the grade but make it look more official"): the
   Wire's name and the scorecard's date around a double ring, one arc per priority filled to its score, the letter at the
   centre. Crisp at any size: every part is vector, strokes never scale. */
.ch-hero.ch-hero2 { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; }
.ch-seal { display: block; width: 116px; height: 116px; }
.ch-seal .sl-o { fill: var(--card); stroke: var(--acc); stroke-width: 1.8; }
.ch-seal .sl-o2 { fill: none; stroke: var(--acc); stroke-width: .6; }
.ch-seal .sl-i { fill: none; stroke: var(--acc); stroke-width: .6; stroke-dasharray: .9 1.3; }
.ch-seal .sl-t { fill: var(--acc); font: 700 7.1px var(--mono); letter-spacing: .2em; }
.ch-seal .sl-t2 { font-size: 6.2px; letter-spacing: .16em; fill: var(--ink-soft); }
.ch-seal .sl-d { fill: var(--acc); }
.ch-seal .sl-bg { fill: none; stroke: var(--hair); stroke-width: 4.6; }
.ch-seal .sl-f { fill: none; stroke: var(--acc); stroke-width: 4.6; }
.ch-seal .sl-c { fill: var(--acc-wash); stroke: var(--acc); stroke-width: .8; }
.ch-seal .sl-g { fill: var(--ink); font: 800 30px var(--mono); letter-spacing: -.04em; }
.ch-seal .sl-s { fill: var(--ink-soft); font: 700 6.4px var(--mono); letter-spacing: .12em; }
@media (min-width: 720px) { .ch-hero.ch-hero2 { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; } .ch-seal { width: 132px; height: 132px; } }
@media (max-width: 379px) { .ch-hero.ch-hero2 { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; } .ch-seal { width: 100px; height: 100px; } }
/* the council list's small seal: the same double ring and a fine inner ring */
.ch-pgs { position: relative; transform: none; box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 2.8px var(--acc), inset 0 0 0 5px var(--card), inset 0 0 0 5.6px var(--acc); }
.ch-seal .sl-cur { fill: var(--acc); letter-spacing: 0; }
/* where they said it (the ballot, a forum at its moment, their campaign's video or site) */
.ch-where { margin: 2px 0 0; padding: 0; list-style: none; }
.ch-where li { display: grid; gap: 1px; padding: 6px 0; border-bottom: 1px dashed var(--hair); }
.ch-where li:last-child { border-bottom: 0; }
.ch-where .ch-ct { font: 600 13px/1.35 var(--sans); }
.ch-wh { font: 600 9px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ch-peq .ch-peq-w { border-style: dashed; background: none; color: var(--ink-soft); }
.ch-terms2 div { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--hair); }
.ch-terms2 div:last-child { border-bottom: 0; }
.ch-terms2 dt { font: 800 14px/1.3 var(--mono); letter-spacing: 0; text-transform: none; color: var(--acc-t); }
.ch-terms2 dd { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--ink); }

/* HOW THE GRADING WORKS (owner, Sun Sep 27, 2026: "needs to feel native and cohesive… very, very compact and small"): the
   sheet's own parts, never a panel of another kind: the kickers (.ch-mthk), the score chips' paper for the formula, hairline
   rows for the terms, a paper table, square bullets, and every source in one line at the foot (its kind and date in the
   tiny mono column, the record itself as the link, the meeting's minutes beside a decision). */
.ch-gm-lay { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }
.ch-gm-f { margin: 0; padding: 2px 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--soft); }
.ch-gm-f p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; margin: 0; padding: 6px 0; }
.ch-gm-f p + p { border-top: 1px dashed var(--hair); }
.ch-gm-fx { font: 700 14px/1.35 var(--mono); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.ch-gm-fn { font: 600 8.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-gm-v { margin: 4px 0 0; }
.ch-gm-v div { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--hair); }
.ch-gm-v div:last-child { border-bottom: 0; }
.ch-gm-v dt { font: 800 12.5px/1.35 var(--mono); color: var(--acc-t); }
.ch-gm-v dd { margin: 0; font: 400 12.5px/1.4 var(--sans); color: var(--ink-soft); }
.ch-gm-v dd b { font-weight: 600; color: var(--ink); }
.ch-gm-t { width: 100%; border-collapse: collapse; font: 600 11px/1.25 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-gm-t th, .ch-gm-t td { padding: 4px 3px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hair); }
.ch-gm-t thead th { padding-top: 0; font: 700 8.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--ink); }
.ch-gm-t thead th:nth-child(n+2) { text-transform: none; letter-spacing: 0; font-size: 10px; }
.ch-gm-t th:first-child { padding-left: 0; text-align: left; white-space: normal; font: 500 12px/1.3 var(--sans); }
.ch-gm-t thead th:first-child { font: 700 8.5px/1.2 var(--mono); }
.ch-gm-t td:last-child { padding-right: 0; }
.ch-gm-t td:last-child, .ch-gm-t td:last-child b { color: var(--acc-t); font-weight: 800; }
.ch-gm-t tfoot th, .ch-gm-t tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); padding-top: 6px; font: 700 10.5px/1.3 var(--mono); color: var(--ink-soft); }
.ch-gm-t tfoot td:last-child { font-size: 15px; color: var(--acc-t); }
.ch-gm-st { margin: 6px 0 0; font: 600 8.5px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ch-gm-st b { font-weight: 800; color: var(--ink); }
.ch-gm-ck { margin: 0; padding: 0; list-style: none; }
.ch-gm-ck li { position: relative; padding: 2px 0 2px 14px; font: 400 12.5px/1.45 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
.ch-gm-ck li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; border-radius: 1px; background: var(--acc); }
.ch-gm-note { margin: 6px 0 0; font: 400 12px/1.45 var(--sans); color: var(--ink-soft); }
.ch-gm-src { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ch-gm-src li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--hair); }
.ch-gm-src li:last-child { border-bottom: 0; }
.ch-gm-k { font: 700 7.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--acc-t); }
.ch-gm-d { display: block; font: 600 7.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ch-gm-b { min-width: 0; font: 500 11.5px/1.35 var(--sans); color: var(--ink); }
.ch-gm-a { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ch-gm-a:hover { text-decoration-color: var(--acc); }
.ch-gm-a span { color: var(--acc-t); }
.ch-gm-m { font: 700 7.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acc-t); text-decoration: none; white-space: nowrap; }
.ch-gm-m:hover { text-decoration: underline; }
/* the method's folds (owner, Sun Sep 27, 2026: "collapse the sections… make it clear that they can be expanded"): each a
   full-width row between hairlines, its name in the kicker's mono, what is inside in soft mono, and a squared chevron box that
   turns when open; the whole row is the tap target */
.ch-gm-x { border-top: 1px solid var(--hair); }
.ch-gm-x:last-child { border-bottom: 1px solid var(--hair); }
.ch-ppb .ch-gm-lay + .ch-gm-x { margin-top: 14px; }
.ch-gm-x > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) 28px; align-items: center; gap: 10px;
  min-height: 46px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ch-gm-x > summary::-webkit-details-marker { display: none; }
.ch-gm-xt { font: 700 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.ch-gm-xm { min-width: 0; font: 600 9px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.ch-gm-xb { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--acc); border-radius: 7px; color: var(--acc); }
.ch-gm-xb .ico { width: 16px; height: 16px; transition: transform .18s ease; }
.ch-gm-x[open] > summary .ch-gm-xb { background: var(--acc); color: var(--card); }
.ch-gm-x[open] > summary .ch-gm-xb .ico { transform: rotate(180deg); }
@media (hover: hover) { .ch-gm-x > summary:hover .ch-gm-xt { color: var(--acc-t); } }
.ch-gm-x > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 7px; }
.ch-gm-xi { padding: 0 0 14px; }
.ch-gm-xi > .ch-gm-src { border-top: 0; }
@media (prefers-reduced-motion: reduce) { .ch-gm-xb .ico { transition: none; } }
/* what a fold holds, stacked (owner, Sun Sep 27, 2026: "include the other formula under the first one… promises and decisions
   stacked nicely too to save space on mobile"; the formulas "lined up and greyed out like the others"): every stack flush right
   in the same grey mono; promises over decisions on a phone, one line from 720 px */
.ch-gm-xm { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ch-gm-xm.is-fx { text-transform: none; letter-spacing: .02em; }   /* the formulas: the others' grey mono, flush right; never capitalised (w is not W) */
@media (min-width: 720px) {
  .ch-gm-xm.is-st { flex-direction: row; justify-content: flex-end; gap: 0; }
  .ch-gm-xm.is-st > span + span::before { content: " · "; white-space: pre; }
}

/* THE TRACK'S POINTS, TAPPABLE (owner, Sun Sep 27, 2026: "all the data points on the line plot must be interactive. Tap for a
   small pop up window that's easy to exit… our sources and work… very concise… native feeling"): one clear layer over each
   track (the row's own grid, so it sits exactly on the line) takes the tap and picks the nearest point; the card is the
   district map's pop-up paper, anchored to the point, its notch pointing at it; another point swaps it, the same point, a tap
   elsewhere, Close or Escape shuts it */
.ch-pq { position: relative; }
.ch-tko { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.ch-pq .ch-tko .ch-tkr { border-left-color: transparent; }
.ch-tkz { align-self: center; width: 100%; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.ch-tkz:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (min-width: 720px) { .ch-tko { grid-template-columns: 1fr 1.1fr; } }
.ch-trk [data-i] { transition: stroke-width .12s ease; }
.ch-trk .tk-b.is-hov, .ch-trk .tk-b.is-sel { stroke: var(--ink); stroke-width: 2.2; }
.ch-trk .tk-e.is-hov, .ch-trk .tk-e.is-sel { stroke: var(--ink); stroke-width: 3; }
.ch-trk .tk-o.is-hov, .ch-trk .tk-o.is-sel { stroke: var(--ink); stroke-width: 2.2; }
.ch-trk .tk-x.is-hov, .ch-trk .tk-x.is-sel { stroke: var(--acc); stroke-width: 2.6; }
.ch-tp { position: absolute; z-index: 6; width: min(300px, calc(100% - 8px));
  padding: 8px 12px 10px; border: 1px solid var(--hair); border-left: 3px solid var(--acc); border-radius: 10px; background: var(--card);
  box-shadow: var(--shadow); color: var(--ink); text-align: left; }
.ch-tp[hidden] { display: none; }
.ch-tpx { position: sticky; top: 0; float: right; display: grid; place-items: center; width: 28px; height: 28px; margin: -2px 0 0 8px; padding: 0;
  border: 1px solid var(--hair); border-radius: 7px; background: var(--card); color: var(--ink-soft); cursor: pointer; font: 400 17px/1 var(--sans); }
.ch-tpx:hover { color: var(--acc-t); border-color: var(--acc); }
.ch-tpc + .ch-tpc { clear: both; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--hair); }
.ch-tph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 3px 0 3px; }
.ch-tpk { font: 700 8.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); }
.ch-tpc.is-early .ch-tpk, .ch-tpc.is-nc .ch-tpk { color: var(--ink-soft); }
.ch-tpc.is-ag .ch-tpk { color: var(--ink); }
.ch-tpd { font: 600 8.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ch-tpt { margin: 0; font: 700 13.5px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.ch-tpv { margin: 2px 0 0; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }
.ch-tpw { margin: 5px 0 0; font: 400 12.5px/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.ch-tpw b { display: block; margin-bottom: 1px; font: 700 8px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-tpl { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 4px 0 0; }
.ch-tpa { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); text-decoration: none; }
.ch-tpa:hover { text-decoration: underline; text-underline-offset: 3px; }
.ch-tp::before { content: ""; position: absolute; left: var(--ax, 50%); top: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); background: var(--card); }
.ch-tp.is-up::before { top: auto; bottom: -6px; border: 0; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ch-tpb { max-height: min(56vh, 360px); overflow: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .ch-trk [data-i] { transition: none; } }
/* a promise's arithmetic, a tiny grey footnote at its pop-up's foot (owner, Sun Sep 27, 2026: "score chips can go very tiny and
   greyed out") */
.ch-peq2 { margin: 14px 0 0; padding-top: 7px; border-top: 1px dashed var(--hair); font: 600 8.5px/1.6 var(--mono); letter-spacing: .04em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ===================================================================================================== CITY POLISH, DESKTOP
   (Sun Sep 27, 2026; 720 px and wider, a mouse and keys): the list beside the record reads as one calm app; every tab answers
   the same keys; the pop-ups sized for a large screen. A phone never sees any of it. */
/* the district map's hint speaks to a mouse where there is one (a phone and a tablet keep "pinch to zoom · tap a district") */
.dz-hm { display: none; }
@media (hover: hover) and (pointer: fine) { .dz-ht { display: none; } .dz-hm { display: inline; } }
/* the filters on a desktop: a wider dialog in two columns, so every choice of a long filter (Meetings: years, departments,
   kinds; a member's record) shows without scrolling; the search stays across the top */
@media (min-width: 900px) {
  .ch-filt .fsheet { width: 640px; }
  .ch-filt .fsheet .fs-body { column-count: 2; column-gap: 28px; }
  .ch-filt .fsheet .fs-body > .ch-sf { column-span: all; }
  /* each group an inline block, so a column's first group keeps its top margin (a block's is dropped at a column break) */
  .ch-filt .fsheet .fs-body > .fs-g:not(.ch-sf) { display: inline-block; width: 100%; vertical-align: top; break-inside: avoid; }
}
@media (min-width: 1024px) {
  /* the list's bar: the filter (and its count) on one line, the search box under it, both in view while the list scrolls;
     the year headers stick just under the bar (its height, --ch-bar-h, from tool.js) */
  html.ch-app .ch-view.is-split .ch-past > .ch-filt { flex-wrap: wrap; row-gap: 8px; }
  html.ch-app .ch-view.is-split .ch-filt > .ch-qs.js-only { flex: 1 0 100%; order: 3; height: 40px; margin: 0; font-size: 15px; }
  html.ch-app .ch-view.is-split .ch-past .ch-yr[open] > .ch-yh { top: var(--ch-bar-h, 55px); }
  /* a row the keys or a link bring into view clears the sticky bar, and a folded year's row its sticky year header too */
  .ch-view.is-split > .ch-mlist :is(.ch-pm, .ch-yr1, .ch-c, .ch-p) { scroll-margin-top: calc(var(--ch-bar-h, 0px) + 10px); }
  .ch-view.is-split > .ch-mlist .ch-yr[open] :is(.ch-yr1, .ch-c) { scroll-margin-top: calc(var(--ch-bar-h, 0px) + 52px); }
  /* the same for whatever the Tab key lands on in a list */
  .ch-view.is-split > .ch-mlist :is(a, button, summary) { scroll-margin-top: calc(var(--ch-bar-h, 0px) + 52px); scroll-margin-bottom: 12px; }
  /* a member's record: its search box beside its filter */
  .ch-mdetail .ch-rec .ch-filt { justify-content: flex-start; }
  html.ch-app .ch-view.is-split .ch-rec .ch-filt > .ch-qs.js-only { flex: 1 1 auto; order: 0; max-width: 340px; height: 40px; margin: 0; font-size: 15px; }
  .ch-mdetail :is(.ch-sec, .ch-sh, .ch-filt, .ch-d) { scroll-margin-top: 96px; }

  /* the chosen row, the same on every list: the accent-wash ground and the accent bar just left of the row, the row's text
     never moving (a check's row used to step 6 px right, a member's photo sat on the bar) */
  .ch-view.is-split .ch-c.is-sel .ch-cb { padding-left: 4px; padding-right: 4px; box-shadow: -10px 0 0 var(--acc-wash), -13px 0 0 var(--acc); }
  .ch-view.is-split .ch-p.is-sel .ch-pb { box-shadow: -10px 0 0 var(--acc-wash), -13px 0 0 var(--acc); }
  .ch-view.is-split .ch-yr1.is-sel .ch-yb { box-shadow: -10px 0 0 var(--acc-wash), -13px 0 0 var(--acc); }
  .ch-view.is-split .ch-c:not(.is-sel) .ch-cb:hover, .ch-view.is-split .ch-p:not(.is-sel) .ch-pb:hover { background: var(--soft); box-shadow: -10px 0 0 var(--soft); }

  /* the council list beside a profile: the name and the term's end on the first line, the office on the whole second line,
     the grade stamp at the right, so no row wraps ("Mayor · Elected by the whole city") */
  .ch-view.is-split .ch-pb { grid-template-columns: 38px minmax(0, 1fr) auto; grid-auto-rows: auto; column-gap: 11px; row-gap: 1px; }
  .ch-view.is-split .ch-pb.has-g { grid-template-columns: 38px minmax(0, 1fr) auto 34px; }
  .ch-view.is-split .ch-pb > .ch-pi { grid-column: 1; grid-row: 1 / span 2; }
  .ch-view.is-split .ch-pb > .ch-pt { display: contents; }
  .ch-view.is-split .ch-pb .ch-pn { grid-column: 2; grid-row: 1; align-self: end; }
  .ch-view.is-split .ch-pb .ch-pr2 { grid-column: 2 / -1; grid-row: 2; align-self: start; }
  .ch-view.is-split .ch-pb.has-g .ch-pr2 { grid-column: 2 / 4; }
  .ch-view.is-split .ch-pb .ch-pr2 { text-wrap: balance; }
  .ch-view.is-split .ch-pb > .ch-pe { grid-column: 3; grid-row: 1; align-self: end; line-height: 1.9; }
  .ch-view.is-split .ch-pb > .ch-pgs { grid-column: 4; grid-row: 1 / span 2; }

  /* a record's header, in view while it scrolls: its title, a meeting's kind under it, a meeting's earlier / later arrows */
  .ch-mdhd { position: sticky; top: -18px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 8px;
    margin: -18px -28px 0; padding: 16px 28px 11px; background: var(--card); border-bottom: 1px solid var(--hair); }
  .ch-mdhd.has-arw { grid-template-columns: minmax(0, 1fr) auto auto; }
  /* the record's Close (back to the tab's calm panel), the sheet's own mono word */
  .ch-mdhd.has-x { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-mdhd.has-arw.has-x { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .ch-mdhd > .ch-mdx { grid-row: 1 / span 2; grid-column: -2; margin-left: 4px; }     /* always the last column, never above the title */
  .ch-mdhd > .ch-mdh { grid-column: 1; grid-row: 1; margin: 0; }     /* placed first, so the arrows sit beside it (audit 03 A10) */
  .ch-mdhd > .ch-sk { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
  .ch-mdhd > .ch-mdarw { grid-row: 1 / span 2; }
  .ch-mdhd + * { margin-top: 14px; }
  .ch-mdhd + .ch-acts { margin-top: 16px; }
  /* the way back after a jump from another tab's record */
  .ch-mdetail > .ch-dback { margin: -8px 0 4px; }
  .ch-dback + .ch-mdhd { margin-top: 0; padding-top: 2px; }
  /* a meeting reads on one measure: its documents, every rule, every decision, the foot */
  #meetings > .ch-mdetail > :not(.ch-mdhd):not(.ch-dback) { max-width: 680px; }
  #meetings > .ch-mdetail :is(.ch-d, .ch-stat, .ch-sm) { max-width: none; }
  #meetings > .ch-mdetail .ch-acts { max-width: 680px; }
  .ch-mdetail .ch-kbd { padding-top: 12px; border-top: 1px solid var(--hair); }
  /* quiet scrollbars in the two panes (a desktop's classic bars were grey slabs beside the paper) */
  .ch-view.is-split > :is(.ch-mlist, .ch-mdetail) { scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
}
@media (min-width: 1280px) {
  /* a wider list from 1,280 px: every councilmember, officer and former member reads on one line */
  .ch-view.is-split { grid-template-columns: 460px minmax(0, 1fr); }
}
/* the district map with a mouse: the district under the pointer lifts a little */
@media (hover: hover) and (pointer: fine) {
  .dz-d.is-hov { fill-opacity: .26; }
  .dz.has-on .dz-d.is-hov:not(.is-on) { fill-opacity: .12; }
}
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  .dz-d.is-hov { fill-opacity: .15; }
  .dz.has-on .dz-d.is-hov:not(.is-on) { fill-opacity: .09; }
}

/* CITY POLISH, MOBILE (Sun Sep 27, 2026: the owner's "deep UX polish… the whole city page should feel cohesive"; phones
   360-430 px, touch, and the shared base under the desktop's own section) */
/* the council list: every row one name and one short line, never wrapped; on a phone the term stacks "Until" over the
   date, a small mono tile at the right like the meeting dates */
@media (max-width: 719px) {
  .ch-pe { display: grid; justify-items: end; gap: 1px; min-width: 52px; line-height: 1.25; }
  .ch-pb, .ch-pb.has-g { column-gap: 10px; }
  .ch-pr2 { font-size: 12px; }
}
/* a member's voting record in the sheet: its filter bar stays in view like the lists' own, and an open year's heading
   sticks right under it (it stuck 55 px down with rows scrolling above it) */
.ch-sb .ch-rec > .ch-filt { position: sticky; top: 0; z-index: 2; margin: 8px -18px 0; padding: 6px 18px; background: var(--card);
  border-bottom: 1px solid var(--hair); }
.ch-sb .ch-rec .ch-yr[open] > .ch-yh { top: 53px; }
/* a member's record opened on its own (city/records/<surname>.html, never indexed): the profile's paper, a way back */
.ch-recpage { max-width: 760px; margin: 12px auto 16px; padding: 4px 16px 20px; background: var(--card); border: 1px solid var(--hair);
  border-radius: 10px; box-shadow: var(--shadow); }
@media (max-width: 719px) { .ch-recpage { margin: 10px 10px 12px; padding: 2px 14px 16px; } }
.ch-recback { margin: 6px 0 0; }
/* City hall without JavaScript (audit 03 A5, A6): a list row carries a plain link to its record's own page (a meeting, a check,
   a person), over the whole row, shown only when the row's button cannot open anything; the record's page reads on paper */
.ch-nj { display: none; }
html:not(.js) .ch-nj { display: block; position: absolute; inset: 0; z-index: 1; border-radius: 7px; }
html:not(.js) :is(.ch-pm, .ch-yr1, .ch-c, .ch-w, .ch-p) { position: relative; }
html:not(.js) .ch-pml { position: relative; z-index: 2; }
.ch-stat-page .ch-stc, .ch-stat-page .ch-stv { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair); }
.ch-stat-page .ch-stc:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.ch-stat-page .ch-d { scroll-margin-top: 72px; }
.ch-recname { margin: 2px 0 4px; font: 700 22px/1.2 var(--sans); color: var(--ink); }
/* a link's arrow keeps its space ("Agenda PDF ↗", "← Earlier meeting"): a flex item's own leading space collapses */
.ch-lk, .ch-act { column-gap: .3em; }
/* the check tape: one line a check on every phone (a long payee and a large amount wrapped at 360 px): the type scales a
   touch with the width, the date column narrows */
@media (max-width: 719px) {
  .ch-cb { grid-template-columns: 40px minmax(0, max-content) minmax(10px, 1fr) auto; column-gap: 5px; }
  .ch-cp { font-size: clamp(11px, 3.1vw, 12.5px); letter-spacing: 0; }
  .ch-ca { font-size: clamp(12px, 3.4vw, 13.5px); }
}
/* a meeting opened at one decision (#meeting-…~N: a voting-record row, a promise's sentence, a step card, a source,
   "Also on"): the decision is marked, full width, with the accent rule */
.ch-d.is-at { padding-left: 12px; padding-right: 8px; border-left: 3px solid var(--acc); background: var(--acc-wash); }
.ch-sb .ch-d.is-at { margin: 0 -18px; padding-left: 15px; padding-right: 18px; }
/* Video by part: each part a whole row to tap, its result tag beside its name, "Watch ↗" at the right */
.ch-vts li { display: block; padding: 0; }
.ch-vta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; color: var(--ink);
  text-decoration: none; }
.ch-vtl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ch-vtl b { display: inline; }
.ch-vtw { flex: none; font: 700 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); }
.ch-vta:active { background: var(--soft); }
@media (hover: hover) { .ch-vta:hover .ch-vtw { text-decoration: underline; text-underline-offset: 3px; } }
.ch-vta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* the district map's name card opens the profile wherever it is tapped */
.dz-pop[data-ch-open] { cursor: pointer; }
.dz-pop[data-ch-open]:active { filter: brightness(.97); }
/* a search names what it found in a meeting box: "Found" and the decision, under its topics */
.ch-pmhit { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; padding-left: 21px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.ch-pmhk { flex: none; font: 700 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); }
/* the next meeting: "How to speak at the meeting" folds like every Context, across the card; a fact's link sits on its
   label's line */
.ch-mt > .ch-speak { grid-column: 1 / -1; margin-top: 10px; }
.ch-speak .ch-full { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ch-f div { align-items: center; }
.ch-f dd .ch-lk { min-height: 32px; }
/* a track point's card on a phone: a thumb-sized Close and links (it stays concise; only the targets grow) */
@media (max-width: 719px) {
  .ch-tpx { width: 36px; height: 36px; margin: -4px 0 0 8px; font-size: 19px; }
  .ch-tpl { gap: 0 16px; margin-top: 2px; }
  .ch-tpa { min-height: 40px; }
}
/* a list's filter is a script's control: without JavaScript (every row shows) it is not drawn; with it, it keeps its row */
.ch-filt.js-only { display: none; }
.js .ch-filt.js-only { display: flex; }
/* a meeting box's one line of documents (Agenda PDF, Minutes, Video) stays one line on the narrowest phones */
@media (max-width: 400px) { .ch-pml { column-gap: 12px; } }
/* a member's record beside the list (a desktop): its filter bar sticks under the column's sticky header and an open year's
   heading under the bar, the phone's sheet fix mirrored (heights from tool.js: --ch-hd-h, --ch-rf-h) */
@media (min-width: 1024px) {
  .ch-mdetail .ch-rec > .ch-filt { position: sticky; top: calc(var(--ch-hd-h, 60px) - 18px); z-index: 2; margin: 8px -28px 0; padding: 6px 28px;
    background: var(--card); border-bottom: 1px solid var(--hair); }
  html.ch-app .ch-mdetail .ch-rec .ch-yr[open] > .ch-yh { top: calc(var(--ch-hd-h, 60px) - 18px + var(--ch-rf-h, 53px)); }
}
/* a seat on this year's ballot, a soft alert (owner, Sun Sep 27, 2026: "more native and more as a soft alert"): the brand's
   square on the accent's wash, one calm sentence, never capitals shouting beside the links */
.ch-up2 { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; padding: 7px 10px; border: 0; border-left: 3px solid var(--acc);
  border-radius: 0 7px 7px 0; background: var(--acc-wash); font: 400 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ch-up2 b { font-weight: 600; }
.ch-upm { flex: none; width: 7px; height: 7px; border-radius: 1.5px; background: var(--acc); transform: translateY(-1px); }

/* the next meeting on a desktop: "Agenda not posted yet" sits under the meeting's date line, in its column (owner, Sun Sep 27) */
@media (min-width: 900px) {
  .ch-mt > .ch-alert1 { grid-column: 2; margin-top: 2px; }
}
/* dark mode's section bars stand clear of the page (owner, Sun Sep 27, 2026: "make the header sections in dark mode more
   clear so they stand out"): a lighter warm ink than the card, a hairline of the accent under it, brighter words */
@media (prefers-color-scheme: dark) {
  .ch-bar { background: #4a3e33; color: #fbf6ee; box-shadow: inset 0 -2px 0 rgba(226, 147, 79, .55); }
  .ch-bar-r { color: #d8cbb9; }
  .ch-thd { background: #4a3e33; }
  .ch-thd span { color: #fbf6ee; }
}

/* ===================================================================================================== ACTIVITY, AN APP
   (was Police; owner, Sun Sep 27, 2026: "Activity instead of police so that I can fold fire and other major activity in"):
   Week, Map and Calls as City hall's index tabs over one card, opening on the Week; the warm-ink section bars; ONE filter
   button and sheet for the Week, the list and the pins; the Week as a ledger whose rows drill down; compact uniform rows, each
   opening its record in one sheet (a phone) or beside the list or the map (1,024 px and wider); the map as the district map
   does it, with a small pop-up at the tapped pin. tool.js adds html.pl-app on a phone, and on a wider screen at least 560 px
   tall: the page never scrolls, only the card's pane. Without JavaScript the tabs read as one page and a row opens its record
   on the city's records page. The pins' colours are the police map's own (validated for colour-blind readers). */
.pl, .pl-view, .ac-recs {
  --g-crime: #c0562a; --g-traffic: #2f6fbf; --g-other: #1f9a7a;
  --map-land: #fffdf9; --map-veil: #ece5d9; --map-water: #dde4e3; --map-st: #e3d9c9; --map-major: #cdbfab; --map-fwy: #b8a893;
}
@media (prefers-color-scheme: dark) {
  .pl, .pl-view, .ac-recs {
    --g-crime: #d2703f; --g-traffic: #5a8fd8; --g-other: #2c9f7b;
    --map-land: #282119; --map-veil: #16120e; --map-water: #151b1e; --map-st: #3a3129; --map-major: #54483b; --map-fwy: #6a5b4a;
  }
}
.pl { width: 100%; max-width: 1060px; margin: 0 auto; }
.pl-card { margin: 0 10px 12px; background: var(--card); border: 1px solid var(--hair); border-radius: 0 0 10px 10px; box-shadow: var(--shadow); }
.pl-one .pl-card { margin-top: 12px; border-radius: 10px; }
.pl-pane { position: relative; padding: 0 12px; }
.pl-view + .pl-view { border-top: 2px solid var(--ink); }
.js .pl-view[hidden], .pl-detail[hidden] { display: none; }
html.pl-app, html.pl-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.pl-app body { display: flex; flex-direction: column; height: 100dvh; }
html.pl-app .mast { flex: none; }
html.pl-app main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.pl-app .pl { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.pl-app .pl-tabs { flex: none; }
html.pl-app .pl-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html.pl-app .pl-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
html.pl-app .pl-pane > * { flex: none; }
html.pl-app .pl-pane > .foot { margin-top: auto; }
html.pl-app .pl-view + .pl-view { border-top: 0; }
.pl-sec { border-bottom: 0; }
.pl-fine { margin-top: 14px; }
.pl-src { margin: 12px 0 18px; }
.pl-lede { font-size: 15px; line-height: 1.45; }

/* the filter: one button that reads what is showing, the count, and on a desktop the search box under them; it stays in
   view while the list scrolls, and an open day's heading sticks just under it */
.pl-filt { margin: 0 0 6px; }
.pl-qs, .js .pl-qs { display: none; }
html.pl-app .pl-wsec { position: sticky; top: 0; z-index: 2; background: var(--card); padding-bottom: 0; }
html.pl-app .pl-day[open] > .ch-yh { position: sticky; top: var(--pl-bar-h, 53px); z-index: 1; background: var(--card); box-shadow: 0 1px 0 var(--hair); }
.pl-fsheet .fs-l { display: flex; align-items: center; gap: 9px; }
.pl-fsheet .fs-l .ring-dot { width: 10px; height: 10px; border-width: 1.5px; }

/* every call: a day to a fold (the newest open), one uniform row a call */
.pl-days { border-top: 1px solid var(--ink); }
.pl-day[hidden], .pl-r[hidden] { display: none; }
.pl-rs { padding-bottom: 4px; }
.pl-r { border-top: 1px solid var(--hair); }
/* compact rows (owner: "compact the calls page for easier scroll ability"): about 44 px, two short lines */
.pl-rb { display: grid; grid-template-columns: 54px 9px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; min-height: 44px; padding: 4px 0;
  cursor: pointer; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pl-rt { font: 600 10px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink-soft); white-space: nowrap; }
.pl-rx { display: grid; gap: 0; min-width: 0; }
.pl-rh { font: 700 14px/1.25 var(--sans); letter-spacing: -.005em; overflow-wrap: anywhere; }
.pl-rp { font-size: 12.5px; line-height: 1.25; color: var(--ink-soft); overflow-wrap: anywhere; }
.pl-tag { flex: none; padding: 3px 5px; border: 1px solid var(--acc); border-radius: 3px; color: var(--acc-t); font: 700 9px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; }
.pl-tag-on { border-color: var(--ink); color: var(--ink); }
.pl-rc { display: none; font-weight: 600; color: var(--ink); }
.pl-card.is-multi .pl-rc, .ac-recs .pl-rc, .pl-rp-c .pl-rc { display: inline; }
.pl-day > .ch-yh { min-height: 40px; }
.pl-rb:active { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
@media (hover: hover) { .pl-rb:hover { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; } }
.pl-rb:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.pl-r.is-sel > .pl-rb { background: linear-gradient(var(--acc-wash), var(--acc-wash)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
.pl-day .cl-dot, .pl-popl .cl-dot, .ac-onl .cl-dot { box-shadow: none; }
.pl-card.is-loading .pl-days { opacity: .72; transition: opacity .2s var(--ease); }

/* a call's record: when and where, the block on our map, what it is, how it ended, who was arrested, the two maps */
.pl-rk { font: 600 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pl-rpl { margin-top: 4px; font: 700 17px/1.3 var(--sans); letter-spacing: -.01em; }
.pl-mini { position: relative; height: 132px; margin-top: 10px; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--map-land);
  cursor: pointer; }
.pl-mini[hidden] { display: none; }
.pl-mini svg { display: block; width: 100%; height: 100%; }
.pl-mini:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.pl-mini .pm-sel circle { stroke-width: 2px; }
.pl-rw { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.pl-rf { margin-top: 12px; border-top: 1px solid var(--hair); }
.pl-rf div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--hair); }
.pl-rf dt { font: 600 9.5px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pl-rf dd { font-size: 14px; line-height: 1.45; }
.pl-rf dd .cl-dot { width: 9px; height: 9px; box-shadow: none; vertical-align: 0; }
.pl-mono { font: 600 12px/1.5 var(--mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.pl-ar { margin-top: 16px; padding: 2px 0 2px 12px; border-left: 3px solid var(--acc); }
.pl-ark { font: 600 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-t); }
.pl-arn { margin-top: 3px; font: 800 16px/1.25 var(--sans); letter-spacing: -.005em; }
.pl-ara { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.pl-ara b { font-weight: 600; color: var(--ink); }
.pl-rv { font-weight: 400; color: var(--ink-soft); }
.pl-rl { margin-top: 12px; column-gap: 18px; }
/* the department's own words (the daily bulletin's write-up, word for word), and an approved crime report's offences */
.pl-wu { margin-top: 16px; }
.pl-wut { margin: 6px 0 0; padding: 8px 0 8px 12px; border-left: 3px solid var(--hair); font: 400 13.5px/1.5 var(--sans); color: var(--ink);
  overflow-wrap: anywhere; }
.pl-wuk { margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }
.pl-wukk { margin-right: 4px; font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pl-wuk .pl-mono { font-size: 11px; color: var(--ink); }
.pl-wus { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.pl-cs { margin-top: 16px; padding: 2px 0 2px 12px; border-left: 3px solid var(--ink); }
.pl-csd { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
/* a record still on its way: a quiet cursor, never an error; at worst one plain button */
.pl-wait { padding: 18px 0; font: 600 14px/1 var(--mono); color: var(--acc-t); }
.pl-wait-c::before { content: "\258C"; animation: mw-blink 1.1s steps(1) infinite; }
.pl-again { margin: 14px 0; }
@media (prefers-reduced-motion: reduce) { .pl-wait-c::before { animation: none; } }
.pl-show { display: none; }
.js .pl-show { display: inline-flex; }
.pl-snav { margin-top: 14px; }
.pl-sheet .pl-sb { padding-top: 14px; }
.pl-sheet .ch-arw:disabled, .pl-darw:disabled { opacity: .32; cursor: default; }
/* a sheet's or the filter's title takes the focus when it opens (never a ring: it is not a control) */
.pl-sheet .fs-t:focus, .pl-fsheet .fs-t:focus { outline: none; }
/* a record's facts: a link lines up with its label */
.pl-rf dd .ext { display: inline; line-height: 1.6; }
.pl-kbd { display: none; }

/* the map, as the district map does it: it fills its tab, pinch and drag (a mouse: scroll and drag), a squared Fit, the hint,
   the key and a tapped block's calls over its foot */
.pl-map { position: relative; }
.pl-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--hair); border-radius: 10px; background: var(--map-land);
  -webkit-user-select: none; user-select: none; }
.js .pl-frame { touch-action: none; }
html:not(.js) .pl-map .dz-tools { display: none; }
.pl-frame .pmap-svg { cursor: grab; }
.pl-frame.is-drag .pmap-svg { cursor: grabbing; }
.pl-map.was-used .pl-hint { opacity: 0; }
.pl-mfoot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 8px; pointer-events: none; }
.pl-mfoot > * { pointer-events: auto; }
.pl-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; justify-self: center; margin: 0; padding: 7px 12px; list-style: none;
  border: 1px solid rgba(117, 107, 94, .28); border-radius: 7px; background: rgba(255, 253, 249, .72); -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1); box-shadow: 0 6px 14px -12px rgba(28, 22, 16, .7); }
.pl-kb { display: inline-flex; align-items: center; gap: 6px; font: 700 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; }
.pl-kb .cl-dot { width: 9px; height: 9px; box-shadow: none; }
.pl-kb .ring-dot { width: 10px; height: 10px; border-width: 1.5px; }
.pl-mnote { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
/* the map's small pop-up (owner: "a small pop up that opens/closes easily and fast if users want to tap around on the map"): at
   the tapped pin, its notch pointing at it, above it (below when there is no room), inside the frame, following the pin as the
   map moves; no animation; another pin swaps it; a tap on the empty map, the close or Escape shuts it; its rows open the record */
.pl-pop { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; width: min(284px, calc(100% - 16px)); max-height: 214px;
  border: 1px solid rgba(117, 107, 94, .3); border-radius: 7px; background: rgba(255, 253, 249, .96); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 10px 24px -14px rgba(28, 22, 16, .75); }
.pl-pop[hidden] { display: none; }
.pl-pop.is-off { visibility: hidden; }
.pl-pop::after { content: ""; position: absolute; left: var(--nx, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit;
  border: solid rgba(117, 107, 94, .3); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.pl-pop.is-below::after { top: -6px; bottom: auto; border-width: 1px 0 0 1px; }
.pl-poph { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 11px; border-bottom: 1px solid var(--hair); }
.pl-popk { flex: 1; min-width: 0; font: 700 9.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pl-popn { flex: none; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pl-popx { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; }
.pl-popx .ico { width: 15px; height: 15px; }
.pl-popl { position: relative; z-index: 1; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 7px 7px; }
.pl-popl button { display: grid; grid-template-columns: auto 9px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; width: 100%; min-height: 40px;
  padding: 5px 11px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.pl-popl li:last-child button { border-bottom: 0; }
.pl-popl button:active { background: var(--soft); }
@media (hover: hover) { .pl-popl button:hover { background: var(--soft); } }
.pl-popl button.is-sel { background: var(--acc-wash); }
.pl-popl .cl-dot { width: 9px; height: 9px; }
.pl-popt { font: 600 9.5px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink-soft); white-space: nowrap; }
.pl-popb { font: 700 13.5px/1.25 var(--sans); overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
  .pl-key { background: rgba(38, 32, 25, .66); border-color: rgba(185, 172, 155, .22); }
  .pl-pop { background: rgba(38, 32, 25, .96); border-color: rgba(185, 172, 155, .24); }
  .pl-pop::after { border-color: rgba(185, 172, 155, .24); }
}
/* the map's tab: the bar and the filter at its top, then the map filling the rest of the pane, edge to edge (tool.js measures
   it, --pl-map-h); the note and the source under it, then the footer */
.pl-frame .pmap-svg { position: absolute; inset: 0; }
/* without scripts the base is the <noscript> copy's, drawn under the pins (tool.js gives the map's own layers their address) */
@media (scripting: none) { .pl-frame { isolation: isolate; } .pl-frame > noscript > .pmap-svg { z-index: -1; } .pl-frame > .pmap-svg > .pm-ground { display: none; } }
.pl-msec { padding-bottom: 0; }
html.pl-app .pl-mapv:not(.is-split) .pl-map { margin: 0 -12px; }
html.pl-app .pl-mapv:not(.is-split) .pl-frame { aspect-ratio: auto; height: var(--pl-map-h, 62vh); min-height: 260px; border-width: 0 0 1px; border-radius: 0; }
html.pl-app .pl-mapv:not(.is-split) .pl-mnote { margin: 8px 12px 0; }

/* the week as a ledger (owner, Sun Sep 27, 2026: "more compact and feel more native… a sort of glance card… everything should be
   tappable"; Mon Sep 28: "Having two numbers that close is confusing… I like the week/week data… it just needs better design" and
   "I dont like any of the tiling options… is there a more native on-brand approach"): Payments' tape rather than tiles, one
   measure a full-width row between hairlines, the whole row its drill-down; the label in mono capitals, the week's figure large
   in mono, the week before's in a column of its own, headed once, smaller and quieter; under the label the two weeks' bars (the
   week in ink over the week before in a faint tone, each drawn to its own figure). Never a difference. One column on a phone,
   two from 720 px, three from 1,100 px (counts, kinds, blocks); one in the pull-up sheet. */
.ac-city[hidden] { display: none; }
.ac-cityk { display: none; margin: 18px 0 2px; font: 700 13px/1.3 var(--mono); letter-spacing: .01em; color: var(--ink); }
.ac-cityp { color: var(--acc-t); }
.pl-card.is-multi .ac-cityk { display: block; }
.pl-card.is-multi .ac-city:first-child > .ac-cityk { margin-top: 10px; }
.ac-away { margin: 10px 0 4px; font-size: 13px; }
.ac-sec { padding-top: 12px; }
.ac-wk { --ac-cv: 54px; --ac-cp: 74px; }
.ac-lh { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 8px; align-items: end; margin: 18px 0 0; padding: 0 0 6px;
  border-bottom: 1px solid var(--ink); font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ac-wc:first-child > .ac-lh:first-child { margin-top: 12px; }
.ac-lh.ac-l3, .ac-lr.ac-l3 { grid-template-columns: minmax(0, 1fr) var(--ac-cv) var(--ac-cp); }
.ac-lhc { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 8px; letter-spacing: .04em; white-space: nowrap; }
.ac-lhv { color: var(--ink); }
.ac-key { flex: none; width: 10px; height: 3px; }
.ac-key1 { background: var(--ink); }
.ac-key0 { background: var(--ink-faint); opacity: .6; }
.ac-wc3 > .pl-bks { border-top: 0; }
.ac-led { list-style: none; margin: 0; padding: 0; }
.ac-ledx { margin-top: 14px; border-top: 1px solid var(--ink); }
.ac-lr { display: grid; grid-template-columns: minmax(0, 1fr) var(--ac-cv); column-gap: 8px; align-items: baseline; min-height: 44px;
  padding: 9px 0 8px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ac-lr:active { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
@media (hover: hover) { .ac-lr:hover { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; } }
.ac-lr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ac-lk { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 7px; min-width: 0; font: 700 10px/1.35 var(--mono); letter-spacing: .04em;
  text-transform: uppercase; overflow-wrap: anywhere; }
.ac-lk .cl-dot { flex: none; width: 9px; height: 9px; box-shadow: none; transform: translateY(1px); }
.ac-lv { grid-column: 2; grid-row: 1; font: 700 20px/1 var(--mono); letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.ac-lp { grid-column: 3; grid-row: 1; font: 500 13px/1 var(--mono); letter-spacing: -.01em; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.ac-lnp { font: 500 10px/1 var(--mono); letter-spacing: .02em; }
.ac-lb { grid-column: 1; grid-row: 2; display: block; width: 100%; height: 8px; margin-top: 6px; overflow: visible; }
.ac-kinds .ac-lb { width: calc(100% - 16px); margin-left: 16px; }
.ac-lb1 { fill: var(--ink); }
.ac-lb0 { fill: var(--ink-faint); opacity: .6; }
.ac-ls { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; font: 400 12.5px/1.35 var(--sans); color: var(--ink-soft); }
.ac-ledag { margin-top: 2px; }
.ac-sec > .pl-bks { border-top: 1px solid var(--ink); }
.ac-fine { margin-top: 12px; }
.ac-note { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding: 7px 10px; border-left: 3px solid var(--acc); border-radius: 0 7px 7px 0;
  background: var(--acc-wash); font: 400 12.5px/1.45 var(--sans); color: var(--ink); }
.ac-sq { flex: none; width: 7px; height: 7px; border-radius: 1.5px; background: var(--acc); transform: translateY(-1px); }
.ac-onl { border-top: 1px solid var(--ink); }
.ac-sub + .ac-onl { border-top: 0; }
.ac-none { padding: 18px 0; color: var(--ink-soft); }
.js .ac-log { display: none; }
.pl-sb .ac-log.is-in { display: block; padding-top: 0; }
.pl-sb .ac-log.is-in > .ac-sub { display: none; }
.js .js-hide { display: none; }
.ac-nojs { margin: 12px 0; column-gap: 16px; }
/* the records page (without JavaScript a row lands here at its record) and the old address's forward */
.ac-recs { max-width: 720px; margin: 0 auto; padding: 16px 20px 28px; }
.ac-rh { font: 800 22px/1.2 var(--sans); letter-spacing: -.01em; }
.ac-rsec { padding: 18px 0; border-top: 1px solid var(--hair); }
.ac-rsec:target { background: var(--acc-wash); }
.fwd { max-width: 720px; margin: 0 auto; padding: 28px 20px; }
/* the Wire's "not here" page (audit 04 D4, 07 A1): a terminal line, two small ways on (owner, Mon Sep 28, 2026), the day's fact, the join */
.nf-t { margin: 0 0 10px; font: 500 14px/1.3 var(--mono); letter-spacing: .02em; color: var(--ink-soft); }
.nf-p, .nf-c { color: var(--acc-t); }
.nf-c { margin-left: 1px; }
.nf-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.nf-a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 7px;
  color: var(--ink); text-decoration: none; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nf-a span { color: var(--acc-t); font-size: 13px; transition: transform .18s var(--ease); }
.nf-a:hover { background: var(--card); }
.nf-a:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .nf-a span { transition: none; } }
.page-col > .egg-nf { margin-top: 8px; }
.pl-counts { margin-top: 2px; }
.pl-bks, .pl-als { border-top: 1px solid var(--ink); }
.pl-bk + .pl-bk, .pl-al + .pl-al { border-top: 1px solid var(--hair); }
.pl-bka { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.pl-bka:active { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; }
@media (hover: hover) { .pl-bka:hover { background: linear-gradient(var(--soft), var(--soft)) no-repeat -12px 0 / calc(100% + 24px) 100%; } }
.pl-bkn { font: 700 15px/1.3 var(--sans); }
.pl-bkv { font-weight: 400; color: var(--ink-soft); }
.pl-bkc { grid-column: 2; grid-row: 1; font: 700 11.5px/1.7 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.pl-bkt { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.pl-al { padding: 12px 0 8px; }
.pl-alw { font: 600 10px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); }
.pl-aln { margin-top: 3px; font: 800 16px/1.25 var(--sans); letter-spacing: -.005em; }
.pl-ala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-top: 4px;
  font: 600 9.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pl-arc { min-height: 40px; }
/* lifted by the landing's pull-up (activity/#week, city/#money, city/#next): the pane's own padding, so the bars run edge to
   edge and the text keeps off the screen's edge */
.bs-body > .pl-view, .bs-body > .city-sheet { padding: 0 12px; }
.bs-body > .pl-view .pl-arc { pointer-events: none; }
.bs-body > .pl-view .pl-wsec .ch-filt { display: none; }

@media (max-width: 719px) {
  html.pl-app .pl-tabs { margin: 8px 8px -1px; }
  html.pl-app .pl-card { margin: 0; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  html.pl-app .pl-pane > .foot { margin-left: -12px; margin-right: -12px; }
}
@media (min-width: 720px) {
  html.pl-app body > .foot { flex: none; margin-top: 0; }
  .pl-tabs { margin: 12px 0 -1px; }
  .pl-card { margin: 0 0 12px; border-top-left-radius: 0; }
  .pl-pane { padding: 0 20px; }
  html.pl-app .pl-mapv:not(.is-split) .pl-map { margin: 0 -20px; }
  html.pl-app .pl-mapv:not(.is-split) .pl-mnote { margin: 8px 20px 0; }
  .bs-body > .pl-view, .bs-body > .city-sheet { padding: 0 20px; }
  /* two columns: the counts over the busiest blocks at the left, the kinds at the right (a department without kinds: its
     counts and its blocks side by side) */
  .ac-wk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr;
    column-gap: 36px; align-items: start; }
  .ac-wc1 { grid-column: 1; grid-row: 1; }
  .ac-wc2 { grid-column: 2; grid-row: 1 / span 2; }
  .ac-wc3 { grid-column: 1; grid-row: 2; }
  .ac-wc1 + .ac-wc3 { grid-column: 2; grid-row: 1; }
  .ac-wc:only-child { grid-column: 1 / -1; }
  .ac-wc > .ac-lh:first-child { margin-top: 12px; }
  .ac-wc1 + .ac-wc2 + .ac-wc3 > .ac-lh:first-child { margin-top: 18px; }
  .ac-ledag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
}
@media (min-width: 900px) {
  .pl-wk .pl-bka:hover { background: var(--soft); }
  /* the ledger's figures a size up once each column has the room */
  .ac-wk { --ac-cv: 64px; --ac-cp: 92px; }
  .ac-lk { font-size: 11px; }
  .ac-lv { font-size: 24px; }
  .ac-lp { font-size: 14.5px; }
}
/* a desktop: the record beside the list, or beside the map; each column scrolls on its own */
@media (min-width: 1024px) {
  .pl { max-width: 1240px; }
  html.pl-app .pl-pane.is-split { overflow: hidden; padding: 0; }
  html.pl-app .pl-pane.is-split > .pl-view:not([hidden]) { flex: 1; min-height: 0; }
  .pl-view.is-split { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); height: 100%; }
  .pl-view.is-split > .pl-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px; border-right: 1px solid var(--hair);
    scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
  .pl-view.is-split > .pl-detail { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 28px 28px;
    scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; }
  .pl-view.is-split > .pl-detail > .pl-rec, .pl-view.is-split > .pl-detail > .pl-snav { max-width: 640px; }
  html.pl-app .pl-view.is-split .pl-qs { display: block; flex: 1 0 100%; order: 3; height: 40px; margin: 0; font-size: 15px; }
  .pl-view.is-split .pl-r.is-sel > .pl-rb { background: var(--acc-wash); box-shadow: -10px 0 0 var(--acc-wash), -13px 0 0 var(--acc); }
  .pl-view.is-split .pl-r:not(.is-sel) > .pl-rb:hover { background: var(--soft); box-shadow: -10px 0 0 var(--soft); }
  .pl-view.is-split > .pl-list .pl-r { scroll-margin-top: calc(var(--pl-bar-h, 0px) + 52px); scroll-margin-bottom: 12px; }
  /* the map beside a record: the map takes the room, the record its own column at the right */
  .pl-mapv.is-split { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); }
  .pl-mapv.is-split > .pl-mapcol { min-height: 0; display: flex; flex-direction: column; padding: 0 20px; border-right: 1px solid var(--hair); overflow: hidden; }
  .pl-mapv.is-split > .pl-detail { grid-column: 2; }
  .pl-mapv.is-split .pl-msec { flex: none; }
  .pl-mapv.is-split .pl-map { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 -20px; }
  .pl-mapv.is-split .pl-frame { flex: 1; min-height: 0; aspect-ratio: auto; border-width: 0 0 1px; border-radius: 0; }
  .pl-mapv.is-split .pl-mnote { flex: none; margin: 6px 20px 0; }
  .pl-mapv.is-split .pl-mnote { margin-bottom: 10px; }
  /* a record's header, in view while it scrolls: its title and the earlier / later arrows */
  .pl-dhd { position: sticky; top: -18px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px;
    margin: -18px -28px 14px; padding: 16px 28px 11px; background: var(--card); border-bottom: 1px solid var(--hair); }
  .pl-dh { margin: 0; font: 800 26px/1.2 var(--sans); letter-spacing: -.015em; }
  .pl-dhd:has(> .pl-dx) { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .pl-dhd > .pl-dx { margin-left: 4px; }
  /* A DESKTOP'S RECORD COLUMN BEFORE THE READER CHOOSES (owner, Mon Sep 28, 2026): calm paper, the brand's square, a small
     mono kicker, one sentence and the keys; never a record nobody chose. City hall's and Activity's alike. */
  .ch-rest { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 32px 24px 12vh;
    text-align: center; }
  #meetings > .ch-mdetail > div.ch-rest.ch-rest { max-width: none; }
  .ch-rest-m { width: 12px; height: 12px; margin-bottom: 14px; background: var(--acc); }
  .ch-rest-k { margin: 0; font: 600 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
  .ch-rest-t { max-width: 30ch; margin: 8px 0 0; font: 600 21px/1.35 var(--sans); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
  .ch-rest-h { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font: 600 10px/1.4 var(--mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft); }
  .pl-kbd { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); font: 600 10px/1.4 var(--mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft); }
  .pl-mini { height: 170px; }
}
@media (min-width: 1280px) {
  .pl-view.is-split { grid-template-columns: 460px minmax(0, 1fr); }
  .pl-mapv.is-split { grid-template-columns: minmax(0, 1fr) 460px; }
}
@media (prefers-reduced-motion: reduce) { .pl-hint { transition: none; } }

/* ===================================================================================================== A BAR WITH ITS FILTER
   (owner, Sun Sep 27, 2026: "fold the filter… into the section header bar… It must be clear what city the filter is filtered
   to", then "design it so it looks native to the header bar… lose the button shape… make sure the other header bars on the
   pages match the size. Uniformity is key"): every warm-ink bar is one height, 40 px (the T-graph's head too); a bar with a
   filter carries it as the bar's own words at the right — the filter mark in the accent, what is chosen in the bar's quiet
   mono, a small chevron — with no box around it, turning the accent when a filter is on. On Activity the bar's title is the
   city or cities showing. A long choice wraps inside the bar, never cut; the bar stays in view while its list scrolls; a
   desktop's search box sits under it only beside a record. */
.ch-bar { min-height: 40px; }
.ch-thd span { padding-top: 14px; padding-bottom: 14px; }
.ch-bfw { margin: -14px -12px 12px; }
.ch-bfw > .ch-bar { margin: 0; }
.ch-bf { flex-wrap: wrap; row-gap: 0; column-gap: 10px; }
.ch-bft { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.ch-bft .ch-bar-t { padding: 6px 0; line-height: 1.4; overflow-wrap: anywhere; }
.ch-bf > .ch-filt { flex: 0 1 auto; min-width: 0; margin: 0 -4px 0 auto; padding: 0; }
.ch-bf .fsum { max-width: 100%; min-height: 40px; gap: 6px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: #b9ac9b;
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: lowercase; transition: color .12s var(--ease); }
.ch-bf .fsum-t { padding: 4px 0; text-align: right; text-wrap: pretty; }
.ch-bf .fsum-ico { flex: none; width: 14px; height: 14px; color: #e2934f; }
.ch-bf .fsum-dn { flex: none; width: 12px; height: 12px; color: currentColor; }
.ch-bf .fcount { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: lowercase; white-space: nowrap; }
.ch-bf .fcount:empty { display: none; }
.ch-bf .fcount::before { content: "· "; }
@media (hover: hover) { .ch-bf .fsum:hover { color: #f7f3ec; } }
.ch-bf .fsum:active { transform: none; color: #f7f3ec; }
.ch-bf .fsum:focus-visible { outline: 2px solid #e2934f; outline-offset: -2px; border-radius: 3px; }
.ch-bf .fsum.is-on, .ch-bf .fsum.is-on .fsum-ico, .ch-bf .fsum.is-on .fsum-dn { background: none; color: #e2934f; }
@media (prefers-color-scheme: dark) {
  .ch-bf .fsum { color: #d8cbb9; }
  @media (hover: hover) { .ch-bf .fsum:hover { color: #fbf6ee; } }
}
/* it stays in view while its list scrolls, and the day's or year's heading sticks just under it */
html.pl-app .pl-calls > .ch-bfw, html.ch-app .ch-past > .ch-bfw { position: sticky; top: 0; z-index: 2; }
html.pl-app .pl-day[open] > .ch-yh { top: var(--pl-bar-h, 40px); }
html.ch-app .ch-past .ch-yr[open] > .ch-yh { top: var(--ch-bar-h, 40px); }
/* a desktop's search box, under the bar, only beside a record */
.js .ch-qrow.js-only { display: none; }
@media (min-width: 720px) {
  .ch-bfw { margin-left: -20px; margin-right: -20px; }
}
@media (min-width: 1024px) {
  html.ch-app .ch-view.is-split .ch-qrow.js-only, html.pl-app .pl-view.is-split .ch-qrow.js-only { display: block; padding: 8px 20px;
    background: var(--card); border-bottom: 1px solid var(--hair); }
  html.ch-app .ch-view.is-split .ch-qrow > .ch-qs.js-only, html.pl-app .pl-view.is-split .ch-qrow > .pl-qs { display: block; width: 100%; height: 40px;
    margin: 0; font-size: 15px; }
}
/* a department's monthly counts (owner, Tue Sep 29, 2026: "counts reported to the FBI is weird in activity"), in a fold that
   starts closed: the Week's own ledger with the two months as its two columns (the newer large, the earlier quieter, the two
   bars), the FBI's groups as quiet headings carrying their own figures, the source as the ledger's one-line row. One column
   at a reading width on every screen and in the pull-up sheet. */
.ac-mof { --ac-cv: 54px; --ac-cp: 74px; margin-top: 14px; border-top: 1px solid var(--ink); }
.ac-mob { max-width: 560px; padding: 0 0 4px; }
.ac-mol { margin: 2px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ink-soft); }
.ac-mof .ac-mok { margin-top: 12px; }
.ac-mgh { margin-top: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--hair); color: var(--ink-soft); }
.ac-mok + .ac-mgh { margin-top: 10px; }
.ac-mgh .ac-lhc { font: 700 12px/1 var(--mono); letter-spacing: -.01em; }
.ac-mgv { color: var(--ink); }
.ac-mgp { font-weight: 500; }
.ac-mof .ac-ledx { margin-top: 10px; }
.ac-lr0, .ac-lr0:active { background: none; cursor: default; }
@media (hover: hover) { .ac-lr0:hover { background: none; } }
.ac-mosrc { margin-top: 2px; }
@media (min-width: 900px) { .ac-mof { --ac-cv: 64px; --ac-cp: 92px; } }
/* one bar a tab (owner, Sun Sep 27, 2026: "the two headers… should only be one header"): inside the Week each department and
   each kind of report opens on a quiet heading — small mono capitals over the brand's heavy rule, the dates at the right */
.ac-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 4px 0 10px;
  padding: 0 0 6px; border-bottom: 2px solid var(--ink); font: 700 10.5px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); }
.ac-subr { font-weight: 600; letter-spacing: .08em; color: var(--ink-soft); }
.ac-sec { padding-top: 14px; }
.pl-wsec + .ac-cities > .ac-city:first-child > .ac-sec:first-of-type { padding-top: 6px; }

/* ===================================================================================================== ACTIVITY, DESKTOP POLISH
   (the site handoff §8.3): the card keeps City hall's gutter; on a wide screen the Week reads across (its ledgers in two or
   three columns; the monthly table at a reading width); the list's bar stays in view
   whatever the filter leaves; the record's header and hint line up with it; the map fills its frame with the five cities'
   base and says so plainly when nothing matches; a short window's map fits it; no smooth scroll on the records pages. */
.pl-msec .ch-bfw { margin-bottom: 0; }
.js .pl-view + .pl-view { border-top: 0; }
html:not(.pl-app) .pl-frame { max-height: calc(100vh - 140px); }
.pl-frame:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.pl-mempty { position: absolute; left: 50%; top: 42%; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px;
  padding: 16px 20px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.pl-mempty p { font-size: 14px; color: var(--ink-soft); }
.ac-city + .ac-city > .ac-cityk { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--hair); }
html:has(.ac-recs) { scroll-behavior: auto; }
@media (min-width: 720px) {
  .pl { width: calc(100% - 2 * var(--gut)); }
}
@media (min-width: 1024px) {
  .pl-view.is-split .pl-calls { min-height: 100%; }
  .pl-view.is-split > .pl-detail > .pl-kbd { max-width: 640px; }
  .pl-dhd { max-width: calc(640px + 56px); }
}
@media (min-width: 1100px) {
  /* three columns (counts, kinds, blocks) when the counts fill one; a department with one or two counts keeps the two */
  .ac-wk:not(.ac-wk-s) { grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 40px; }
  .ac-wk:not(.ac-wk-s) > .ac-wc { grid-column: auto; grid-row: auto; }
  .ac-wk:not(.ac-wk-s) > .ac-wc > .ac-lh:first-child { margin-top: 12px; }
  .ac-ledag { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .pl-bka { max-width: 760px; }
}
/* the Week lifted into the pull-up sheet (a 560 px panel on a desktop): one column of rows, whatever the window's width */
@media (min-width: 720px) {
  .bs-body .pl-wk .ac-wk, .bs-body .ac-wk { display: block; }
  .bs-body .pl-wk .ac-ledag, .bs-body .ac-ledag { display: block; }
  .bs-body .ac-wc + .ac-wc > .ac-lh:first-child { margin-top: 18px; }
}

/* ===================================================================================================== ACTIVITY, THE LEFT-OVERS
   (audit 12, Sun Sep 27, 2026, and audit 05 B13): a charge's tag never starts an indented line; the keyboard reaches the
   record's links and the map's pins; a short desktop window gives the list the height; a record prints as plain paper. */
/* a charge's tag sits after its words, and when it has no room it starts the next line flush with them (never indented) */
.chg-s { margin-left: 0; }
.chg-p::after { content: " "; word-spacing: 4px; }
/* the map's pins by keyboard: one at a time is a stop for the Tab key; its ring is the accent, 2 px */
.pl-frame .pin:focus { outline: none; }
.pm-foc circle { fill: none; stroke: var(--acc); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pm-foc { pointer-events: none; }
@media (min-width: 1024px) {
  /* the record's way back to the list, shown only when it has the focus (like the page's skip link) */
  .pl-dback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0;
    background: none; color: var(--acc-t); font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  .pl-dback::before { content: "\2190  "; }
  .pl-dback:focus { position: static; grid-column: 1 / -1; justify-self: start; width: auto; height: auto; min-height: 32px; margin: -6px 0 4px;
    padding: 0 6px; overflow: visible; clip: auto; border-radius: 3px; }
  .pl-dh:focus { outline: none; }
  .pl-dh:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 2px; }
}
/* a short desktop window (audit 12 L6: the footer took about 16% of 1280 x 632): the locked app's footer is one slim bar, the
   links on the logo's line and the fact under it, so the list and the map get the height; City hall's footer is untouched */
@media (min-width: 1024px) and (max-height: 800px) {
  html.pl-app body > .foot .foot-in { column-gap: 28px; padding-top: 2px; padding-bottom: 2px; }
  html.pl-app body > .foot .foot-nav { grid-column: 2; grid-row: 1; gap: 28px; min-width: 0; }
  html.pl-app body > .foot .foot-tag { padding-bottom: 5px; }
}
/* a record prints as plain paper (audit 12 L5): beside the list on a desktop, or in the sheet; no bar, no tabs, no list, no
   footer, no buttons; the record's facts, the department's words, and each link's address written after it */
/* ---------------------------------------------------------------- how it works, sharing (group 8)
   The small → text links; How the Wire works and the corrections log; the share button (the phone's own share sheet, else
   Copy link) on a meeting, a receipt and the joined moment. The line on what the Wire is with its join left every page but
   the landing (owner, Tue Sep 29, 2026: "all the email sign up pages are clutter"). */
.wl-row { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 2px 0 6px; }
.wl { display: inline-flex; align-items: center; min-height: 40px; color: var(--acc-t); text-decoration: none;
  font: 700 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wl span { margin-left: 5px; transition: transform .18s var(--ease); }
.wl:hover { text-decoration: underline; }
.wl:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .wl span { transition: none; } }
/* the landing: "Read this week's issue" under the join (once one is sent), "How the Wire works" after the promise; from
   720 px both sit in the join's column, in the room the taller promise leaves, so the cards never move down */
.home-iss { margin: 4px 0 -6px; }
.home-how { margin: 2px 0 -6px; }
@media (min-width: 720px) {
  .p-home .hero-main { grid-template-rows: auto auto auto auto auto 1fr auto; }
  .p-home .proof { grid-row: 3 / span 4; }
  .p-home .home-iss { grid-column: 1; grid-row: 5; margin: 6px 0 0; }
  .p-home .home-how { grid-column: 1; grid-row: 6; align-self: start; margin: 0; }
  .p-home .home-iss .wl, .p-home .home-how .wl { min-height: 30px; font-size: 10.5px; }
  .p-home .home-iss ~ .home-how { grid-row: 5; margin: 6px 0 0 210px; }   /* both: one line, the issue first */
  .p-home .td { grid-row: 7; }
}
.how-s .sh + .how-p { margin-top: 12px; }
.how-p { margin: 0 0 12px; max-width: 62ch; font-size: 15.5px; line-height: 1.5; }
.cor { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.cor-d { margin: 0 0 4px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cor-w { margin: 0; font-size: 15px; line-height: 1.45; }
.cor-p { margin: 0; }
.cor-none { margin-top: 16px; }
/* the share button: its words say what it will do (Share where the device has a share sheet, else Copy link) */
.shr { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--acc-t); border-radius: var(--r-ctl); }
.js .shr.js-only { display: inline-flex; }
.shr:not(.ch-lk) { font: 700 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (hover: hover) { .shr:hover { text-decoration: underline; } }
.shr-i { width: 15px; height: 15px; stroke-width: 1.8; }
.shr-s, .shr-d { display: none; }
html.can-share .shr-s { display: inline; }
html.can-share .shr-c { display: none; }
.shr.is-done .shr-s, .shr.is-done .shr-c { display: none; }
.shr.is-done .shr-d { display: inline; }
.ch-rshr { display: flex; justify-content: center; margin: 10px 0 0; }
.jshare { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 8px 0 0; font: 13.5px/1.3 var(--sans); color: var(--ink-soft); }
.jshare[hidden] { display: none; }

@media print {
  html:is(:has(.pl-sheet[open]), :has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden]))) {
    --paper: #fff; --card: #fff; --soft: #fff; --ink: #000; --ink-soft: #333; --ink-faint: #666; --hair: #bbb; --acc: #000; --acc-wash: #fff;
    height: auto; overflow: visible; background: #fff; color: #000;
  }
  html:is(:has(.pl-sheet[open]), :has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden]))) :is(body, main, .pl) { display: block; height: auto; overflow: visible; background: #fff; }
  html:is(:has(.pl-sheet[open]), :has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden]))) :is(body > :not(main), main > :not(.pl), .pl-tabs, .pl-fsheet, .foot, .ch-grab, .pl-sheet .fs-top button, .pl-sb button, .pl-detail button,
    .pl-mini, .pl-kbd, .pl-wait) {
    display: none !important; }
  /* the sheet: the record alone on the page */
  html:has(.pl-sheet[open]) .pl-card { display: none !important; }
  html:has(.pl-sheet[open]) .pl-sheet[open] { position: static; display: block; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0;
    overflow: visible; transform: none !important; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: #000; }
  html:has(.pl-sheet[open]) .pl-sheet::backdrop { background: none; }
  html:has(.pl-sheet[open]) .pl-sheet .fs-top { display: block; padding: 0 0 8px; border-bottom: 2px solid #000; }
  html:has(.pl-sheet[open]) .pl-sheet .fs-t { font-size: 22px; }
  html:has(.pl-sheet[open]) .pl-sheet .fs-body { overflow: visible; max-height: none; padding: 12px 0 0; }
  /* beside the list or the map: the record's column alone */
  html:not(:has(.pl-sheet[open])):has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden])) :is(.pl-card, .pl-pane, .pl-view.is-split) { display: block; height: auto; overflow: visible; margin: 0; padding: 0; border: 0;
    border-radius: 0; box-shadow: none; background: #fff; }
  html:not(:has(.pl-sheet[open])):has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden])) :is(.pl-view:not(.is-split), .pl-view.is-split > :not(.pl-detail)) { display: none !important; }
  html:not(:has(.pl-sheet[open])):has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden])) .pl-view.is-split > .pl-detail { overflow: visible; padding: 0; }
  html:not(:has(.pl-sheet[open])):has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden])) .pl-dhd { position: static; display: block; max-width: none; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 2px solid #000; }
  html:not(:has(.pl-sheet[open])):has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden])) .pl-dh { font-size: 22px; }
  html:is(:has(.pl-sheet[open]), :has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden]))) .pl-rec a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 9px/1.4 var(--sans); letter-spacing: 0; text-transform: none;
    overflow-wrap: anywhere; }
  html:is(:has(.pl-sheet[open]), :has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden]))) .pl-rec :is(.ext, .ch-lk) { color: #000; }
  html:is(:has(.pl-sheet[open]), :has(.pl-view.is-split:not([hidden]) > .pl-detail[data-pl-at]:not([hidden]))) .pl-wut { border-left-color: #999; }
}

/* ===================================================================================================== COHESION (group 7)
   (audit 05 B, Mon Sep 28, 2026) One rule a pattern across the four apps and the two plain pages: one card width and gutter,
   one filter sheet, one stamp, one Join, the corners as tokens, hover on every filled control, tap sizes by pointer. */

/* one card width and gutter (audit 05 B1, C4, 03 C8): edge to edge under 720 px; from 720 px the card sits inside the gutter,
   at most 820 px wide; from 1,100 px at most 1,060 px; City hall and Activity at most 1,240 px from 1,024 px, where a record
   sits beside the list */
@media (min-width: 720px) {
  .cal, html.cal-app .cal, .gs, .wb, .ch, .pl { width: calc(100% - 2 * var(--gut)); max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
  .calcard { max-width: none; }
}
@media (min-width: 1024px) { .ch, .pl { max-width: 1240px; } }
@media (min-width: 1100px) { .cal, html.cal-app .cal, .gs, .wb { max-width: 1060px; } }

/* one filter sheet (audit 05 B4, 02 B6): the title says what it shows, `> SHOW N …` at its foot, 440 px on a tablet and
   640 px in two columns from 900 px on every page, and one calm line with Reset when nothing matches */
@media (min-width: 900px) {
  :is(.cc-filt, .gs-bar) .fsheet, .pl-fsheet { width: 640px; }
  /* the Calendar's and Gas's few long groups side by side; Activity's many as City hall's, in balanced columns */
  :is(.cc-filt, .gs-bar) .fsheet .fs-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-content: start; }
  .pl-fsheet .fs-body { column-count: 2; column-gap: 28px; }
  .pl-fsheet .fs-body > .ch-sf { column-span: all; }
  .pl-fsheet .fs-body > .fs-g:not(.ch-sf) { display: inline-block; width: 100%; vertical-align: top; break-inside: avoid; }
}
.cc-nomatch, .cc-none, .gs-none, .ch-none { padding: 16px 0 6px; }

/* hover on every filled control, Earlier and Later, the month and the fold rows (audit 05 B9) */
@media (hover: hover) {
  :is(.cc-filt, .gs-bar, .ch-filt:not(.ch-filt-bar)) > .fsum:hover { border-color: var(--ink-soft); }
  :is(.cc-filt, .gs-bar, .ch-filt:not(.ch-filt-bar)) > .fsum.is-on:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
  .st-nav:not(.is-off):hover, .st-today:hover, .cc-week .pick summary:hover { background: var(--soft); }
  .ch-yr > .ch-yh:hover, html :is(.ch-yr, .pl-day)[open] > .ch-yh:hover { background: var(--soft); }
}

/* one Join (audit 05 B6): the menu bar's squared terminal button (the footer's left, Tue Sep 29, 2026) */
.mast-join { border: 1px solid #30363d; border-radius: var(--r-ctl); }
.mast-join { min-height: 40px; padding: 0 12px; font: 700 10px/1 var(--mono); letter-spacing: .12em; }
.p-home .join-row input, .p-home .join-row .btn { border-radius: var(--r-ctl); }
/* "Use another address" on the label's line, its target 40 px (audit 01 A13) */
.join-top { align-items: baseline; }
.join-back { min-height: 40px; margin: -11px 0; }

/* tap targets by pointer, never by width (audit 05 B11): a touch screen of any width keeps 40 px */
@media (pointer: coarse) {
  .foot-nav a, .foot-nav .fn-b, .foot-mock a, .mock-on,
  .p-home .home-iss .wl, .p-home .home-how .wl,
  .p-calendar .strip-wx a, .p-calendar .tl-b .ext, .p-calendar .tl-b .cc-a,
  .p-calendar .tl-b > .ev-f .ext, .p-calendar .tl-b > .ev-f .ev-cal { min-height: 40px; }
}
/* the phone's one-line footer keeps 44 px (owner, Tue Sep 29, 2026) */
@media (pointer: coarse) and (max-width: 899px) { .foot-nav a, .foot-nav .fn-b { min-height: 44px; } }

/* the promise's accent half is large text on a tablet and a desktop: there it keeps the brand accent (ruling d) */
@media (min-width: 720px) and (min-height: 501px), (min-width: 1100px) { .p-home .proof-acc { color: var(--acc); } }

/* the chat's and the Tip line's bar: its cursor, still, like every section bar's (audit 01 A19) */
.pop-bc { margin-left: 1px; }

/* Gas (audit 04 B1-B7): the sorted heading's arrow, ↓ the usual way and ↑ reversed; a City column only when several cities show */
.gs-hb { position: relative; }
.gs-hb:disabled { cursor: default; }
@media (min-width: 900px) {
  .gs-hb.is-on.is-rev::after { content: " ↑"; }
  .gs-hb.is-on { color: var(--acc-t); }
  .gs-hb:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  .js .gs-pane:has(> .gs-rows[data-show="home"]) :is(.gs-head, .gs-rows .g) {
    grid-template-columns: 36px minmax(0, 1.6fr) minmax(0, 2.1fr) 0 120px 112px 40px; }
  .js .gs-pane:has(> .gs-rows[data-show="home"]) .gs-hcity, .js .gs-rows[data-show="home"] .g-town { visibility: hidden; overflow: hidden; white-space: nowrap; }
}

/* ===================================================================================================== PAST ISSUES AND SOURCES
   (owner, Mon Sep 28, 2026: "One warm bar each"): one card as wide as the apps', opening on the apps' 40 px warm-ink bar
   (`> past issues ▌`, `> sources ▌`, the page's h1), its search right under it, then the rows. */
.wb-card { margin: 0; padding: 0; max-width: none; background: var(--card); border-bottom: 1px solid var(--hair); }
.wb-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 40px; padding: 0 14px; background: #2c2620; color: #f7f3ec; }
.wb-k { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 0; font: 600 12px/1.4 var(--mono); letter-spacing: .02em; text-transform: lowercase; color: inherit; }
.wb-kp, .wb-kc { color: #e2934f; }
.wb-kc { margin-left: -3px; }
.wb-meta { margin-left: auto; font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9ac9b; }
@media (prefers-color-scheme: dark) {
  .wb-top { background: #4a3e33; color: #fbf6ee; box-shadow: inset 0 -2px 0 rgba(226, 147, 79, .55); }
  .wb-meta { color: #d8cbb9; }
}
.js .wb-q.js-only { display: block; }
.wb-q { padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.wb-i { height: 44px; }
.wb-pane { padding: 0 14px 12px; }
.wb-deck { margin: 14px 0 6px; max-width: 62ch; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.wb-a { display: inline-flex; align-items: center; min-height: 32px; color: var(--acc-t); text-decoration: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.wb-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wb-none { padding: 16px 0 6px; }
/* a past issue: the whole row opens it ("Read No. 12 →" is the link; its ::after covers the row) */
.wb-rows { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.iss { position: relative; margin: 0 -14px; padding: 14px 14px 4px; border-bottom: 1px solid var(--hair); }
.iss-go { margin: 2px 0 0; }
.iss-a { display: inline-flex; align-items: center; min-height: 40px; color: var(--acc-t); text-decoration: none;
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.iss-a::after { content: ""; position: absolute; inset: 0; }
.iss-a > span, .wb-a > span { margin-left: .45em; transition: transform .18s var(--ease); }
.iss-a:focus-visible { outline: 0; }
.iss:has(.iss-a:focus-visible) { outline: 2px solid var(--acc); outline-offset: -2px; }
@media (hover: hover) { .iss:hover { background: var(--soft); } .iss:hover .iss-a > span { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .iss-a > span { transition: none; } }
.iss-no span:first-child { color: var(--acc-t); }
/* Sources, grouped by the page each source feeds: a quiet heading over a 2 px ink rule, never a second bar */
.src-g + .src-g { margin-top: 26px; }
.src-g:first-child { margin-top: 18px; }
.src-gh { margin: 0; padding: 0 0 7px; border-bottom: 2px solid var(--ink); font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.src-sh { margin: 18px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--ink); font: 600 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.src-g .src-rows { margin-top: 0; border-top: 0; }
.src-sub.ag-sec { margin-top: 0; }
/* a page's local fact and its join line up with the card */
:is(.p-issues, .p-sources, .p-how, .p-corrections) .page-col > .egg { margin-left: auto; margin-right: auto; max-width: calc(100% - 2 * var(--gut)); }
@media (min-width: 720px) {
  .wb-card { margin: 16px 0 0; border: 1px solid var(--hair); border-radius: var(--r-panel); box-shadow: var(--shadow); }
  .wb-card > .wb-top { border-radius: 9px 9px 0 0; }
  .wb-top, .wb-q { padding-left: 22px; padding-right: 22px; }
  .wb-pane { padding: 0 22px 18px; }
  .iss { margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
  .wb-i { max-width: 440px; }
  :is(.p-issues, .p-sources, .p-how, .p-corrections) .page-col { width: calc(100% - 2 * var(--gut)); max-width: 820px; margin: 0 auto; }
  :is(.p-issues, .p-sources, .p-how, .p-corrections) .page-col > .egg { max-width: none; margin-left: 0; margin-right: 0; }
  :is(.p-issues, .p-sources, .p-how, .p-corrections) .page-col > .sheet { max-width: none; padding-left: 0; padding-right: 0; }
}
@media (min-width: 900px) {
  .iss { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; column-gap: 24px; padding-top: 16px; padding-bottom: 14px; }
  .iss-no { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; justify-content: flex-start; gap: 4px; }
  .iss-h, .iss-d, .iss-w { grid-column: 2; }
  .iss-h { margin-top: 0; }
  .iss-go { grid-column: 3; grid-row: 1 / span 4; align-self: center; margin: 0; }
  .src-g .src-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
}
@media (min-width: 1100px) { :is(.p-issues, .p-sources, .p-how, .p-corrections) .page-col { max-width: 1060px; } }
/* How the Wire works and Corrections: the same one card; a part of How the Wire works is a quiet heading over its title */
.how-s .how-h { margin: 10px 0 8px; font: 800 19px/1.25 var(--sans); letter-spacing: -.01em; }
.how-s .how-p:last-child { margin-bottom: 0; }
.wb-card .cor-rows { margin-top: 8px; }
.wb-card .cor { padding: 12px 0 4px; }
.wb-deck + .src-g, .wl-row + .src-g { margin-top: 18px; }

/* ===================================================================================================== THE WIRE, THE NEWS PAGE
   (owner, Mon Sep 28, 2026, design report §14): the fifth tab "News", first in the bar; the page named The Wire, an app like
   Activity (locked, only the list scrolls) under its own warm-ink bar `> the wire ▌` with "Martinez news, checked" and the
   filter in the bar; the M2 coverage cards (CITY and topics, the headline, one line of context, the coverage bar with its key,
   the date and the record check in one mono line, at most one blindspot line, votes and comments; the seal's small stamp at the
   top right; the whole card one tap); a page a story, and from 1,100 px the story beside the list with a calm panel until one
   is chosen. Classes nw-. */

/* the bar with five tabs: every phone shows the logo as `> the wire ▌` (the under-375 crop), the tabs about 50 px each */
@media (max-width: 719px) {
  .mast-in:has(.tabs5) .logo-svg { width: 92px; }
  .mast-in:has(.tabs5) .lg-m { display: none; }
  .mast-in:has(.tabs5) .lg-w, .mast-in:has(.tabs5) .typing .lg-w { transform: translateX(-11097px); animation: none; }
  .tabs5 a { width: 50px; letter-spacing: 0; }
}
@media (max-width: 389px) { .tabs5 a { width: 47px; } }
@media (min-width: 720px) and (max-width: 819px) { .tabs5 ul { gap: 0; } .tabs5 a { padding: 0 9px; } }

.nw { width: 100%; max-width: 1060px; margin: 0 auto; }
.nw-card { margin: 12px 10px; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-panel); box-shadow: var(--shadow); overflow: hidden; }
.nw-lcol { min-width: 0; }
.nw-detail { display: none; }

/* the list's bar: the page's name and its line, the filter as the bar's own words at the right */
.nw-lbar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; min-height: 40px; padding: 0 12px 0 16px; background: #2c2620; color: #f7f3ec;
  font: 600 13px/1 var(--mono); letter-spacing: .02em; }
.nw-lt { display: block; min-width: 0; margin: 0; padding: 6px 0; font: inherit; line-height: 1.2; color: inherit; }
.nw-bp { margin-right: 7px; }
.nw-bp, .nw-bc { color: #e2934f; }
.nw-bc { margin-left: 1px; }
.nw-tag { display: block; margin-top: 3px; font: 600 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #b9ac9b; }
.nw-filt { flex: 0 1 auto; min-width: 0; margin: 0 -4px 0 auto; }
.nw-lbar .fsum { max-width: 100%; min-height: 40px; gap: 6px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: #b9ac9b;
  font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: lowercase; transition: color .12s var(--ease); }
.nw-lbar .fsum-t { padding: 4px 0; text-align: right; text-wrap: pretty; }
.nw-lbar .fsum-ico { flex: none; width: 14px; height: 14px; color: #e2934f; }
.nw-lbar .fsum-dn { flex: none; width: 12px; height: 12px; color: currentColor; }
@media (hover: hover) { .nw-lbar .fsum:hover { color: #f7f3ec; } }
.nw-lbar .fsum:active { transform: none; color: #f7f3ec; }
.nw-lbar .fsum:focus-visible { outline: 2px solid #e2934f; outline-offset: -2px; border-radius: 3px; }
.nw-lbar .fsum.is-on, .nw-lbar .fsum.is-on .fsum-ico, .nw-lbar .fsum.is-on .fsum-dn { color: #e2934f; }
@media (min-width: 720px) { .nw-tag { display: inline; margin: 0 0 0 12px; } .nw-lbar { padding-left: 22px; padding-right: 18px; } }

.nw-pane { padding: 10px 10px 16px; }
.nw-lh { margin: 2px 4px 8px; font: 600 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-who-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: -2px 4px 8px; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.nw-who-line[hidden] { display: none; }
.nw-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nw-c[hidden] { display: none; }
.nw-ca { display: block; padding: 13px 14px 4px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-panel); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; transition: border-color .12s var(--ease); }
@media (hover: hover) { .nw-ca:hover { border-color: var(--acc); } }
.nw-ca:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.nw-c.is-sel .nw-ca { border-color: var(--acc); box-shadow: inset 3px 0 0 var(--acc), var(--shadow); }
.nw-cst { float: right; margin: 0 0 4px 12px; }
.nw-k { margin: 0; font: 600 9.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-k b { color: var(--ink); font-weight: 800; }
.nw-ca > .nw-k { display: block; padding-top: 2px; }
.nw-h { display: block; margin: 3px 0 0; font: 700 16px/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.nw-as { display: block; margin: 3px 0 0; font: 600 8.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-s { display: block; margin: 5px 0 0; font: 400 13.5px/1.42 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
.nw-c.is-ng .nw-h { font-weight: 600; }
.nw-m { display: block; margin-top: 8px; font: 600 9px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-rc { color: var(--acc-t); font-weight: 700; }

/* the small stamp (the council list's seal, small), OFFICIAL filled, NOT GRADED outlined; 2 px tags, never a pill */
.nw-st { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1.5px solid var(--acc); border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 2.8px var(--acc), inset 0 0 0 5px var(--card), inset 0 0 0 5.6px var(--acc); background: var(--acc-wash); }
.nw-st b { font: 800 15px/1 var(--mono); color: var(--acc-t); }
.nw-st-s { width: 30px; height: 30px; box-shadow: inset 0 0 0 1.6px var(--card), inset 0 0 0 2.3px var(--acc); }
.nw-st-s b { font-size: 12.5px; }
.nw-sc { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.nw-sc i { font: 700 7.5px/1 var(--mono); letter-spacing: .08em; color: var(--ink-soft); font-style: normal; }
.nw-tg { display: inline-block; flex: none; padding: 3px 5px 2px; border: 1px solid var(--ink); border-radius: 2px; font: 700 8.5px/1.1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.nw-tg-off { background: var(--ink); color: var(--card); }
.nw-tg-ng { border-color: var(--ink-soft); color: var(--ink-soft); }
.nw-tg-big { padding: 6px 8px 5px; font-size: 10.5px; }

/* the coverage bar by kind of source: ink official, accent newsroom (a blog too), faint repost, hatched social; the key printed */
.nw-cov { display: flex; clear: both; gap: 2px; height: 7px; margin-top: 10px; border-radius: 2px; overflow: hidden; }
.nw-cov i { flex: 1; height: 100%; }
.nw-cv-official { background: var(--ink); }
.nw-cv-newsroom, .nw-cv-blog { background: var(--acc); }
.nw-cv-repost { background: var(--ink-faint); }
.nw-cv-social { background: repeating-linear-gradient(135deg, var(--ink-soft) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--ink-soft); }
.nw-covk { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 6px; font: 600 8.5px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.nw-covk .nw-kk { background: none; box-shadow: none; }
.nw-kk::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; border-radius: 1px; }
.nw-kk.nw-cv-official::before { background: var(--ink); }
.nw-kk.nw-cv-newsroom::before, .nw-kk.nw-cv-blog::before { background: var(--acc); }
.nw-kk.nw-cv-repost::before { background: var(--ink-faint); }
.nw-kk.nw-cv-social::before { background: repeating-linear-gradient(135deg, var(--ink-soft) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--ink-soft); }

/* the blindspot: the brand's square on the wash, one calm line; a quiet one on paper */
.nw-fl { display: flex; align-items: flex-start; gap: 7px; margin: 9px 0 0; padding: 6px 9px; border-left: 3px solid var(--acc); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  background: var(--acc-wash); font: 700 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.nw-fl::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 2px; border-radius: 1px; background: var(--acc); }
.nw-fl-q { background: transparent; border-left-color: var(--hair); color: var(--ink-soft); }
.nw-fl-q::before { background: var(--ink-faint); }

/* the card's foot: the readers' counts (the votes and comments live on the story) */
.nw-f { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin-top: 10px; padding: 7px 0 9px;
  border-top: 1px dashed var(--hair); font: 600 9.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-f b { color: var(--ink); font-weight: 800; }
.nw-fv span[aria-hidden] { color: var(--ink-faint); }
.nw-fc { display: inline-flex; align-items: center; gap: 5px; color: var(--acc-t); }
.nw-fc b { color: var(--acc-t); }
.nw-fc .ico { width: 13px; height: 13px; stroke-width: 1.6; }
.nw-fine { margin: 16px 4px 0; }
.nw-howl { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--acc-t); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.nw-pane > .egg { margin: 16px 4px 0; }
.nw-none-f { padding: 14px 4px; }
.js .nw-none-f .cc-nm-go { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-none-f[hidden] { display: none; }

/* THE APP: on a phone, and on a wider screen at least 560 px tall, the page never scrolls, only the list */
html.nw-app, html.nw-app body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.nw-app body { display: flex; flex-direction: column; height: 100dvh; }
html.nw-app .mast { flex: none; }
html.nw-app main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.nw-app .nw { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.nw-app .nw-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.nw-app .nw-lcol { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.nw-app .nw-lbar { flex: none; }
html.nw-app .nw-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
html.nw-app .nw-pane > * { flex: none; }
html.nw-app .nw-pane > .foot { margin-top: auto; }
@media (max-width: 719px) {
  html.nw-app .nw-card { margin: 0; border-width: 0; border-radius: 0; box-shadow: none; }
  html.nw-app .nw-pane > .foot { margin: 18px -10px -16px; }
}
@media (min-width: 720px) {
  html.nw-app body > .foot { flex: none; margin-top: 0; }
  .nw-card { margin: 16px 0; }
  .nw-pane { padding: 14px 18px 18px; }
}
/* from 1,100 px the story beside the list (City hall's desktop split): a calm panel until a story is chosen */
@media (min-width: 1100px) {
  .nw:has(.nw-card.is-split) { max-width: 1240px; }
  html.nw-app .nw-card.is-split { display: grid; grid-template-columns: 470px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: var(--card); }
  html.nw-app .nw-card.is-split .nw-lcol { border-right: 1px solid var(--hair); background: var(--paper); min-height: 0; }
  .nw-card.is-split .nw-pane { padding: 12px; }
  html.nw-app .nw-card.is-split .nw-detail { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html.nw-app .nw-card.is-split .nw-detail[hidden] { display: none; }
  .nw-card.is-split .nw-sv { max-width: 780px; }
  .nw-card.is-split .nw-sv .nw-back { padding-top: 8px; }
}

/* ------------------------------------------------ a story (its own page, and beside the list) */
.nw-scard { max-width: 760px; margin: 0 auto; background: var(--card); border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
@media (min-width: 720px) { .nw-scard { margin: 16px auto 24px; border: 1px solid var(--hair); border-radius: var(--r-panel); box-shadow: var(--shadow); overflow: hidden; } }
.nw-sv { padding-bottom: 22px; background: var(--card); }
.nw-sv > :not(.nw-sec):not(dialog), .nw-sec > :not(.nw-bar) { margin-left: var(--gut); margin-right: var(--gut); }
.nw-hd { padding-top: 8px; }
.nw-back { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.nw-back .nw-share { min-height: 40px; }
.nw-hd > .nw-k { margin-top: 6px; }
.nw-sh { margin: 6px 0 0; font: 800 23px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.nw-grade { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; padding: 14px 0; border-top: 2px solid var(--ink); }
.nw-grade .ch-seal { width: 116px; height: 116px; }
.nw-grade-off, .nw-grade-ng { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.nw-gl { margin: 0; font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-t); }
.nw-gw { margin: 5px 0 0; font: 600 14.5px/1.38 var(--sans); color: var(--ink); text-wrap: pretty; }
.nw-grade-ng .nw-gw { margin-top: 2px; font-weight: 500; color: var(--ink-soft); }
.nw-gc { margin: 7px 0 0; font: 600 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-howp { margin-top: 0; margin-bottom: 0; padding: 2px 0; border-top: 1px dashed var(--hair); border-bottom: 1px dashed var(--hair); }
.nw-say { margin-top: 14px; }
.nw-lab { margin: 0; font: 700 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.nw-say p + p { margin: 6px 0 0; font: 400 15.5px/1.48 var(--sans); color: var(--ink); text-wrap: pretty; }
.nw-sec { margin-top: 20px; }
.nw-bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 7px; min-height: 40px; margin: 0; padding: 0 var(--gut); background: #2c2620; color: #f7f3ec;
  font: 600 13px/1 var(--mono); letter-spacing: .02em; }
.nw-br { margin-left: auto; font: 600 9.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9ac9b; }
@media (prefers-color-scheme: dark) {
  .nw-lbar, .nw-bar { background: #4a3e33; color: #fbf6ee; box-shadow: inset 0 -2px 0 rgba(226, 147, 79, .55); }
  .nw-tag, .nw-br, .nw-lbar .fsum { color: #d8cbb9; }
  @media (hover: hover) { .nw-lbar .fsum:hover { color: #fbf6ee; } }
}
/* the record check: a ring and a tick for a match, the accent's square where the record says otherwise, a dashed ring when not checked */
.nw-rows { margin-top: 4px; margin-bottom: 0; padding: 0; list-style: none; }
.nw-rr { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.nw-rr p { margin: 0; font: 400 14px/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.nw-rr p + p { margin-top: 4px; }
.nw-mk { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--acc); border-radius: 50%; color: var(--acc-t); font: 800 10px/1 var(--mono); }
.is-no .nw-mk { border-radius: 2px; width: 12px; height: 12px; margin: 5px 0 0 3px; border: 0; background: var(--acc); }
.is-nc .nw-mk { border-style: dashed; border-color: var(--ink-faint); }
.nw-rr .nw-rs { font-size: 13px; color: var(--ink-soft); }
.nw-rr .nw-rk { font: 700 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-t); }
.nw-rl { display: flex; flex-wrap: wrap; gap: 0 16px; }
.nw-rr.is-nc p { color: var(--ink-soft); }
/* the coverage: the bar and its lines, then each outlet's article */
.nw-covw { padding-top: 12px; }
.nw-covw > .nw-fl:first-of-type { margin-top: 10px; }
.nw-covw > .nw-fl + .nw-fl { margin-top: 4px; }
.nw-art { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.nw-at { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nw-on { margin: 0; font: 800 13.5px/1.25 var(--mono); letter-spacing: .01em; color: var(--ink); }
.nw-ki { margin: 3px 0 0; font: 600 8.5px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-ah { margin: 8px 0 0; font: 700 15px/1.3 var(--sans); color: var(--ink); text-wrap: pretty; }
.nw-q { margin: 9px 0 0; padding: 1px 0 1px 12px; border-left: 2px solid var(--acc); }
.nw-q p { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }
.nw-q cite { display: block; margin-top: 6px; font: 600 8.5px/1.4 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-cites { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 9px 0 0; font: 600 8.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-cites b { color: var(--ink); }
.nw-hosts { flex-basis: 100%; text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }
.nw-ded { color: var(--acc-t); }
.nw-art .nw-fl { margin-top: 8px; }
.nw-go { margin: 4px 0 0; }
.nw-go .ext { display: inline; min-height: 0; line-height: 1.9; white-space: normal; }
.nw-art .ch-gm-x { margin-top: 4px; }
.nw-ft p { margin: 0 0 10px; font: 400 14.5px/1.55 var(--sans); color: var(--ink); }
.nw-ft .nw-cr-by { margin: 4px 0 2px; font: 700 13px/1.3 var(--sans); }
.nw-ft .nw-cr-o { font: 600 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.nw-ft .nw-cr-t { font-size: 13px; color: var(--ink-soft); }
/* readers: the votes, the comment field, the comments */
.nw-talk { padding-top: 12px; }
.nw-vrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.nw-vt { display: flex; align-items: center; gap: 8px; margin: 0; }
.nw-vb { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hair); border-radius: var(--r-ctl);
  background: var(--card); color: var(--ink-soft); cursor: pointer; }
.js .nw-vb.js-only { display: grid; }
.nw-vb .ico { width: 16px; height: 16px; stroke-width: 2; }
.nw-vb[aria-pressed="true"] { border-color: var(--acc); background: var(--acc-wash); color: var(--acc-t); }
.nw-vb:active { transform: scale(.97); }
.nw-vn { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.nw-vn b { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: 0; }
.nw-vw { max-width: 230px; margin: 0; font: 400 12.5px/1.4 var(--sans); color: var(--ink-soft); }
.nw-line { margin: 6px 0 0; font: 500 13.5px/1.45 var(--sans); color: var(--ink); }
.nw-line:empty { display: none; }
.nw-vline { flex-basis: 100%; margin: 0; }
.nw-cf { margin-top: 14px; }
.nw-ta { height: auto; min-height: 84px; padding: 11px 12px; resize: vertical; line-height: 1.4; }
.nw-cfr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.nw-nm { height: 46px; }
.nw-post { min-width: 96px; }
.nw-rto { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; font: 500 13px/1.3 var(--sans); color: var(--ink-soft); }
.nw-rto[hidden] { display: none; }
.nw-rules { margin-top: 8px; font-size: 12px; }
.nw-closed { margin-top: 12px; }
.nw-cms { margin: 10px 0 0; padding: 0; list-style: none; }
.nw-cm { padding: 11px 0 4px; border-bottom: 1px solid var(--hair); }
.nw-cm-r { margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--hair); }
.nw-cm.is-new { background: linear-gradient(var(--acc-wash), var(--acc-wash)) no-repeat 0 0 / 3px 100%; padding-left: 10px; }
.nw-who { margin: 0; font: 700 9px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-who b { color: var(--ink); }
.nw-cx { margin: 4px 0 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.nw-cact { display: none; flex-wrap: wrap; gap: 0 16px; margin: 0; }
.js .nw-cact.js-only { display: flex; }
.nw-cb { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--acc-t);
  font: 600 9.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nw-cb[disabled] { color: var(--ink-soft); cursor: default; }
.nw-none { margin-top: 10px; }
@media (min-width: 720px) {
  .nw-sh { font-size: 30px; }
  .nw-grade { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; }
  .nw-grade .ch-seal { width: 132px; height: 132px; }
  .nw-grade-off, .nw-grade-ng { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 374px) { .nw-grade { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; } .nw-grade .ch-seal { width: 100px; height: 100px; } }

/* a council member's "In the news" on City hall (design §6): the story, the outlet's own sentence naming them, quoted */
.nw-inh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.nw-inh span { font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); font-size: 9px; }
.nw-ins { margin: 4px 0 0; padding: 0; list-style: none; }
.nw-in { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 10px; align-items: start; padding: 11px 0 2px; border-bottom: 1px solid var(--hair); }
.nw-in .nw-h { font-size: 15px; }
.nw-is { margin: 5px 0 0; font: 400 14px/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.nw-isn { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 2px 0 0; font: 600 8.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nw-inall { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .nw-ca, .nw-lbar .fsum { transition: none; } .nw-vb:active { transform: none; } }
.nw-hd > .nw-as { margin-top: 7px; }

/* ===================================================================================================== DESIGN VARIANTS (previews)
   Shown to the owner before he chooses; OFF on the live site (the renderer's `--variant NAME` adds `v-NAME` to each body,
   previews only). Tue Sep 29, 2026, the owner: "Can you put back the martinez wire top left animation cleanly? Its kinda our
   brand." Each brings the full logo `> the martinez wire ▌` and its typing back on phones beside the five tabs, each tab at
   least 44 px to tap:
   v-mast-a  the logo on its own slim line (40 px), the five tabs a second slim row under it (44 px): the bar 84 px, not 52;
   v-mast-b  ONE 52 px bar: the full logo sized to what the five 44 px tabs leave, the label 8 px under each icon;
   v-mast-c  the logo alone in a slim top bar (44 px) and the five tabs in an app-style tab bar at the phone's foot (52 px). */
@media (max-width: 719px) {
  body:is(.v-mast-a, .v-mast-b, .v-mast-c) .mast .logo-svg { width: auto; }
  body:is(.v-mast-a, .v-mast-b, .v-mast-c) .mast .lg-m { display: inline; }
  body:is(.v-mast-a, .v-mast-b, .v-mast-c) .mast .mast-in .typing .lg-w { transform: none; }
  body:is(.v-mast-a, .v-mast-b, .v-mast-c) .mast .logo:focus-visible { outline-offset: -2px; }
}
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  body:is(.v-mast-a, .v-mast-b, .v-mast-c) .mast .mast-in .typing.is-typing .lg-w { animation: mw-wire 4.4s step-end 1; }
}
@media (max-width: 719px) {
  /* A: two slim rows */
  body.v-mast-a .mast-in { height: auto; flex-wrap: wrap; padding: 0; gap: 0; }
  body.v-mast-a .mast .logo { flex: 1 0 100%; min-height: 40px; padding: 0 var(--gut); }
  body.v-mast-a .mast .logo-svg { height: 16.5px; }
  body.v-mast-a .tabs { flex: 1 0 100%; border-top: 1px solid #21262d; }
  body.v-mast-a .tabs li { flex: 1 1 0; list-style: none; }
  body.v-mast-a .tabs a { width: auto; min-height: 44px; gap: 3px; font-size: 9px; letter-spacing: .04em; }
  body.v-mast-a .tabs a::after { left: 22%; right: 22%; }
  /* B: one 52 px bar, the logo as large as the five 44 px tabs allow */
  body.v-mast-b .mast-in { padding: 0 2px 0 10px; gap: 4px; }
  body.v-mast-b .mast .logo-svg { height: clamp(11.5px, calc((100vw - 240px) * .102), 16.5px); }
  body.v-mast-b .tabs a { width: 44px; min-height: 52px; gap: 4px; font-size: 8px; letter-spacing: 0; }
  body.v-mast-b .tabs a::after { left: 8px; right: 8px; }
  /* C: the logo on top, the tabs at the foot like an app's */
  body.v-mast-c .mast-in { height: 44px; }
  body.v-mast-c .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--term);
    border-top: 1px solid #21262d; padding-bottom: env(safe-area-inset-bottom); }
  body.v-mast-c .tabs li { flex: 1 1 0; list-style: none; }
  body.v-mast-c .tabs a { width: auto; min-height: 52px; gap: 4px; font-size: 9px; letter-spacing: .04em; }
  body.v-mast-c .tabs a::after { top: 0; bottom: auto; left: 26%; right: 26%; border-radius: 0 0 2px 2px; }
  body.v-mast-c { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}