/* The public site (spec §6): system fonts (but the wordmark's), a readable measure, dark unless the reader picks light.
The episode page is the product. */
:root {
  --bg: #141312; --fg: #ece7df; --muted: #a29b90; --line: #2f2c28; --panel: #1f1d1a;
  --accent: #f08da0; --accent-fg: #141312; --mark: #4a3b14; --map: #26231f; --map-edge: #4d473f;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a29b90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
  --measure: 40rem;
  color-scheme: dark;
}
/* Light, picked with the network bar's button (theme.js) */
:root[data-theme="light"] { color-scheme: light;
  --bg: #fcfbf8; --fg: #1c1b19; --muted: #6a655d; --line: #e6e1d7; --panel: #f3efe6;
  --accent: #9b2c3f; --accent-fg: #fff; --mark: #fbecc4; --map: #ebe4d6; --map-edge: #c4b9a6;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236a655d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 18px/1.6 var(--serif); }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, h5, p, li { text-wrap: pretty; }
h1, h2, h3, h4, h5, .masthead, .when, .subscribe, .sources, .at, .ref, civicfm-player, .colophon, .chapters, .who, small {
  font-family: var(--sans); }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0.25rem 0 0.75rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.25rem; }
h4 { font-size: 1rem; margin: 1.5rem 0 0.25rem; }
small, .quiet { color: var(--muted); }

/* The network: its bar across the top of every page, and its wordmark (§6). Its 44 px tile outranks the show's 40 px
   cover in the masthead under it, and its letters stay smaller than the page's headline. */
.network-bar { background: var(--panel); border-bottom: 1px solid var(--line); font: 500 1rem var(--sans); }
.network-bar div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 1rem;
                   min-height: 4.5rem; max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0.5rem 1.25rem; }
.network-bar a { color: var(--muted); text-decoration: none; }
.network-bar a:hover { color: var(--fg); }
.network-bar a.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--fg); font-size: 2.05rem; }
.network-bar .wordmark img { width: 44px; height: 44px; }
.network-bar nav { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
/* Light or dark: a sun in dark, to pick light, and a moon in light. Its padding is a bigger target, taken back by its margin. */
.network-bar .theme { display: inline-flex; padding: 0.4rem; margin: -0.4rem; border: 0; background: none;
                      color: var(--muted); cursor: pointer; }
.network-bar .theme:hover { color: var(--fg); }
.network-bar .theme[hidden], .theme[aria-pressed="true"] .moon, .theme[aria-pressed="false"] .sun { display: none; }
.network-bar .theme svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 30rem) {             /* a phone: a smaller wordmark, and the links under it unless they fit beside it */
  .network-bar div { min-height: 3.75rem; column-gap: 0.75rem; }
  .network-bar a.wordmark { font-size: 1.55rem; gap: 0.5rem; }
  .network-bar .wordmark img { width: 34px; height: 34px; }
  .network-bar nav { gap: 0.65rem; font-size: 0.95rem; }
}
/* The wordmark's letters are the covers' Inter Display Black, cut down to these six (assets/FONT.md) */
@font-face { font-family: "CivicFM Wordmark"; font-weight: 800; font-display: block;
             src: url(wordmark.woff2) format("woff2"); }
.wordmark { font-family: "CivicFM Wordmark", var(--sans); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark img { display: block; flex: none; }
.wordmark b { color: var(--accent); font-weight: inherit; }
.listen { font: 600 0.95rem var(--sans); margin-top: 0.4rem !important; }
.listen a { text-decoration: none; }

.masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
            max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 1rem 1.25rem; font-size: 0.95rem; }
.masthead .show { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; color: var(--fg); text-decoration: none; }
.masthead img { border-radius: 0.4rem; }
.masthead nav { display: flex; gap: 1.25rem; margin-left: auto; }
.masthead nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.masthead nav a:hover, .masthead .show:hover { color: var(--accent); }
main { max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0 1.25rem 4rem; }
.colophon { color: var(--muted); font-size: 0.85rem;
            max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0 1.25rem 3rem; }
.colophon p { border-top: 1px solid var(--line); margin: 0; padding-top: 1rem; }
.colophon a { color: inherit; }

/* Home */
.intro { padding: 2rem 0 1rem; }
.intro .title { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.intro .title img { flex: none; border-radius: 0.6rem; box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.intro .title h1 { margin-top: 0; }
.tagline { font-family: var(--sans); font-weight: 600; color: var(--accent); margin: 0; }
.lede { font-size: 1.15rem; }
.subscribe { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscribe a { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 2rem; border: 1px solid var(--accent);
               text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background 0.15s, color 0.15s; }
.subscribe a:hover { background: var(--accent); color: var(--accent-fg); }
.subscribe small { margin-left: 0.25rem; }
.card { border-top: 1px solid var(--line); padding: 1rem 0; }
.card :is(h3, h4, h5) { margin: 0.1rem 0 0.4rem; font-size: 1.25rem; }
.card :is(h3, h4, h5) a { color: var(--fg); text-decoration: none; }
.card :is(h3, h4, h5) a:hover { color: var(--accent); }
.card p { margin: 0; }
.more { border-top: 1px solid var(--line); padding-top: 1rem; font-weight: 600; }
.when { color: var(--muted); font-size: 0.85rem; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
/* The network's index, by region and metro area (§6). The top division takes the heavy rule the topics page's areas
   do: each state when there are several, and each area otherwise. Each heading outranks what's under it: Shows, then
   the top division, then an area in a state, then a digest's title. Each shrinks with a phone, never past the page's
   headline. */
.shows-heading { font-size: clamp(1.6rem, 3.8vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; }
.region { font-size: clamp(1.45rem, 3.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em;
          margin: 2.5rem 0 0.25rem; padding-top: 0.75rem; border-top: 2px solid var(--fg); }
.metro { font-size: clamp(1.45rem, 3.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em;
         margin: 2.25rem 0 0; padding-top: 0.75rem; border-top: 2px solid var(--fg); }
.region ~ .metro { font-size: clamp(1.35rem, 2.8vw, 1.65rem); margin-top: 1.75rem; padding-top: 0; border-top: 0; }
.network-shows > :first-child { margin-top: 0.75rem; }
.region + .metro { margin-top: 0.75rem; }
/* A state's map leads it, beside its roundup; an area with a locator keeps its rule under the state (app/maps.py) */
.state-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.state-row .feature { flex: 1 1 18rem; }
.state-map { flex: none; max-width: 100%; height: auto; margin: 0.25rem 0 0.75rem; }
:is(.state-map, .locator) .land { fill: var(--map); stroke: var(--map-edge); stroke-linejoin: round; }
.state-map .land { stroke-width: 1.2; }
.state-map .pin { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.state-map .count { fill: var(--accent-fg); font: 700 11px var(--sans); text-anchor: middle; dominant-baseline: central; }
.state-map .label { fill: var(--fg); font: 600 13px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 4px;
                    stroke-linejoin: round; }
.state-map a:hover .label { fill: var(--accent); }
.state-map a:hover .pin { filter: brightness(1.15); }
.state-map a:focus-visible { outline: none; }
.state-map a:focus-visible .pin { stroke: var(--fg); }
.locator { display: inline-block; height: 1.7rem; width: auto; vertical-align: -0.45rem; margin-right: 0.55rem; }
.locator .land { stroke-width: 0.6; }
.locator .dot { fill: var(--accent); }
.region ~ .metro.located { margin-top: 2.25rem; padding-top: 0.75rem; border-top: 2px solid var(--fg); }
.metro[id] { scroll-margin-top: 1rem; }
/* A digest leads its area at its home page's size, and the shows it rounds up follow (§2.8) */
.feature { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 0 1.25rem; }
.feature > div { min-width: 0; }
.feature :is(h3, h4, h5) { font-size: clamp(1.2rem, 2.2vw, 1.3rem); line-height: 1.2; margin: 0 0 0.2rem; }
.feature p { margin: 0; }
.feature :is(h3, h4, h5) + p { font-size: 1.05rem; }
.made-from { font: 600 0.75rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
             margin: 0 0 0.1rem; }
/* Every other show: one compact row, two to a line */
.show-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             column-gap: 1.5rem; }
.show-list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.show-list li > div { min-width: 0; }
.show-list :is(h3, h4, h5) { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.show-list p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
:is(.region, .metro) + .show-list > li:nth-child(-n+2) { border-top: 0; }
:is(.feature, .show-list) :is(h3, h4, h5) a { color: var(--fg); text-decoration: none; }
:is(.feature, .show-list) :is(h3, h4, h5) a:hover { color: var(--accent); }
:is(.feature, .show-list) :is(img, .no-cover) { display: block; flex: none; border-radius: 0.4rem;
                                                box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.feature :is(img, .no-cover) { width: 112px; height: 112px; border-radius: 0.7rem; }
.show-list :is(img, .no-cover) { width: 48px; height: 48px; }
:is(.feature, .show-list) .no-cover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 34rem) {
  .show-list { grid-template-columns: minmax(0, 1fr); }
  :is(.region, .metro) + .show-list > li:nth-child(2) { border-top: 1px solid var(--line); }
  .feature { align-items: flex-start; }
  .feature :is(img, .no-cover) { width: 88px; height: 88px; }
  .state-row .feature { flex-basis: 100%; padding-bottom: 0.5rem; }
  .state-map { width: 170px; margin-top: 0; }
}

/* An episode */
.episode-head { padding-top: 1.5rem; }
.episode [id] { scroll-margin-top: 8rem; }
.summary { font-size: 1.2rem; line-height: 1.5; }
.disclosure { color: var(--muted); font-size: 0.95rem; font-style: italic; }
.download { font: 0.9rem var(--sans); color: var(--muted); margin: 0.5rem 0; }
.corrections { background: var(--mark); border-radius: 0.5rem; padding: 0.75rem 1rem; margin: 1rem 0; }
.corrections h2 { margin: 0 0 0.25rem; font-size: 1rem; }
.corrections p { margin: 0.25rem 0; }
/* Folds: the transcript by chapter, and what happened by meeting and item, each closed until opened (§6) */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0.5rem; }
.section-head h2 { margin: 0; }
.unfold { font: 600 0.85rem var(--sans); color: var(--muted); background: none; border: 0; padding: 0.25rem 0;
          cursor: pointer; }
.unfold:hover { color: var(--accent); }
.fold { border-top: 1px solid var(--line); }
.fold > summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0; cursor: pointer; list-style: none;
                  font-family: var(--sans); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin: 0 0.15rem 0 0.1rem;
                          border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-0.2em) rotate(-45deg);
                          transition: transform 0.15s; }
.fold[open] > summary::before { transform: translateY(-0.35em) rotate(45deg); }
.fold > summary:hover::before { border-color: var(--accent); }
.fold > summary :is(h3, h4) { flex: 1; min-width: 0; margin: 0; }
.fold > summary:hover :is(h3, h4) { color: var(--accent); }
.fold > summary .at, .fold > summary .count { flex: none; }
.fold > :not(summary) { margin-left: 1.4rem; }
.fold[open] > :last-child { margin-bottom: 1.25rem; }
.fold.meeting { border-top: 2px solid var(--fg); }
.fold.meeting > summary { padding: 0.85rem 0; }
.fold.meeting + .fold.meeting { margin-top: 0.5rem; }
.fold .date, .fold .count, .item .ref { color: var(--muted); font-weight: 400; }
.fold .count, .item .ref { font-size: 0.85rem; }
.item .ref { margin-left: 0.25rem; white-space: nowrap; }
.item.fold:first-of-type { border-top: 0; }
.sources { font-size: 0.9rem; margin: 0 0 0.75rem; }
.item p { margin-block: 0.25rem; }
.see { font: 0.9rem/1.6 var(--sans); color: var(--muted); margin-top: 0.75rem; }
.outcomes, .points { padding-left: 1.2rem; margin: 0.4rem 0; }
.outcomes li { font-weight: 600; }
.outcomes li.unclear { font-weight: 400; color: var(--muted); }
.points li { margin: 0.2rem 0; }
.at { font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
      padding: 0 0.3rem; border-radius: 0.25rem; background: var(--panel); }
.at:hover { background: var(--mark); }
.transcript { font-size: 1rem; }
.transcript .fold > summary h3 { font-size: 1rem; }
.transcript .fold > .cue { margin-left: 1rem; }               /* its words under the chapter's title */
.transcript .cue { margin: 0 0 0.6rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; cursor: pointer;
                   scroll-margin: 40vh; transition: background 0.2s; }
.transcript .cue:hover { background: var(--panel); }
.transcript .cue.now { background: var(--mark); }
.transcript .who { font-weight: 650; font-size: 0.85rem; margin-right: 0.3rem; }
.transcript .cue.from-meeting { border-left: 3px solid var(--mark); }   /* the meeting's own audio, played in the episode */
.episode-foot { border-top: 1px solid var(--line); margin-top: 2.5rem; color: var(--muted); font-size: 0.95rem; }
.prose ul { padding-left: 1.2rem; }
.retracted { padding: 3rem 0; }

/* Highlights (step 8.15): the meetings' own voices, in a row under the player, in an item's fold, and on a page each */
.clips h2 { margin: 1.5rem 0 0.5rem; }
.clip-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
            gap: 0.6rem; }
.clip { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; align-items: start; padding: 0.7rem 0.8rem;
        background: var(--panel); border: 1px solid var(--line); border-radius: 0.6rem; }
.clip-play { font: 600 0.9rem var(--sans); text-decoration: none; color: var(--accent-fg); background: var(--accent);
             border-radius: 999px; min-width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center;
             justify-content: center; padding: 0 0.6rem; white-space: nowrap; }
.clip-play:hover { filter: brightness(1.1); }
.clip-play.hear { height: auto; min-width: 0; padding: 0.15rem 0.7rem; font-size: 0.85rem; }
.clip-title { display: block; font: 600 1rem/1.35 var(--sans); color: var(--fg); text-decoration: none; }
.clip-title:hover { color: var(--accent); }
.clip-who { font: 0.85rem/1.4 var(--sans); color: var(--muted); margin: 0.2rem 0 0; }
.clip-share { grid-column: 2; justify-self: start; font: 600 0.8rem var(--sans); border: 1px solid var(--line);
              background: var(--bg); color: var(--fg); border-radius: 0.4rem; padding: 0.2rem 0.6rem; cursor: pointer;
              max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hear-it { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hear-it .clip-who { margin: 0; }
.clip-player { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0; }
.clip-player audio { width: 100%; }
.clip-download { font: 600 0.8rem var(--sans); border: 1px solid var(--line); background: var(--bg); color: var(--fg);
                 border-radius: 0.4rem; padding: 0.2rem 0.6rem; text-decoration: none; }
.clip-download:hover { color: var(--accent); }
video.short { display: block; width: min(100%, 22rem); aspect-ratio: 9 / 16; height: auto; margin: 0 0 1.5rem;
              background: #000; border-radius: 0.75rem; }
.captions .cue { margin: 0 0 0.5rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; }
.captions .cue.now { background: var(--mark); }
.captions .who { font-weight: 650; font-size: 0.85rem; margin-right: 0.3rem; }
.highlight .from ul { padding-left: 1.2rem; }

/* The player: a web component over an <audio>, with chapters, ±15 s, speed, Share, and the transcript following along */
civicfm-player { display: block; position: sticky; top: 0; z-index: 2; background: var(--bg);
                 padding: 0.75rem 0; margin: 1rem 0; border-bottom: 1px solid var(--line); }
civicfm-player audio { width: 100%; }
civicfm-player .controls { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 0.5rem; }
civicfm-player button { font: 600 0.9rem var(--sans); border: 1px solid var(--line); background: var(--panel); color: var(--fg);
                        border-radius: 2rem; padding: 0.35rem 0.7rem; cursor: pointer; min-width: 2.75rem; }
civicfm-player button:hover { border-color: var(--muted); }
civicfm-player button.play { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); min-width: 4.5rem; }
civicfm-player button.play:hover { filter: brightness(1.1); }
civicfm-player .time { font: 0.85rem var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
civicfm-player input[type=range] { width: 100%; accent-color: var(--accent); }
civicfm-player .bar { display: flex; align-items: center; gap: 0.5rem; }
civicfm-player .now-chapter { display: flex; align-items: center; gap: 0.6rem; font: 600 0.85rem var(--sans);
                              margin: 0.5rem 0 0; min-height: 1.2em; }
civicfm-player .toggle::after { content: " ▾"; color: var(--muted); }
civicfm-player.open .toggle::after { content: " ▴"; }
civicfm-player .now-chapter .title { color: var(--muted); flex: 1; min-width: 0; }
civicfm-player .share { margin-left: auto; }
civicfm-player .copy { margin: 0.5rem 0 0; }
civicfm-player .copy input { width: 100%; box-sizing: border-box; font: 0.85rem var(--sans); color: var(--fg); background: var(--panel);
                             border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.35rem 0.5rem; }
.chapters { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.9rem; columns: 2 16rem; }
.chapters a { display: block; text-decoration: none; color: var(--fg); padding: 0.1rem 0.3rem; border-radius: 0.25rem; break-inside: avoid; }
.chapters a:hover { background: var(--panel); }
.chapters a.now { background: var(--mark); }
.chapters .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 0.3rem; }
civicfm-player:defined .chapters { max-height: 0; overflow: hidden; margin: 0; }
civicfm-player.open .chapters { max-height: 40vh; overflow: auto; margin-top: 0.5rem; }
@media (max-width: 30rem) {
  body { font-size: 17px; }
  .intro .title img { width: 88px; height: 88px; }
  civicfm-player .controls { grid-template-columns: repeat(4, auto) 1fr; }
  civicfm-player .bar { grid-column: 1 / -1; order: 9; }
  .fold .fold > :not(summary) { margin-left: 0; }
  .fold.meeting .date { display: block; font-size: 0.9rem; }
}

/* Topics, search, and the API, across every show (§6) */
.topics { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0 !important; font: 0.8rem var(--sans); }
.topics a { padding: 0.1rem 0.6rem; border-radius: 2rem; background: var(--panel); border: 1px solid var(--line);
            color: var(--muted); text-decoration: none; }
.topics a:hover { color: var(--accent); border-color: var(--accent); }
.topics small { margin-left: 0.2rem; }
.facets { margin: 0 0 1rem !important; }
.fold > summary:has(.topics) { flex-wrap: wrap; row-gap: 0.3rem; }      /* an item's topics, under its title, folded or not */
.fold > summary .topics { flex-basis: 100%; margin: 0 0 0 1.4rem !important; }
.find { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.5rem; font-family: var(--sans); }
.find input[type=search] { flex: 1 1 14rem; min-width: 0; font: 1rem var(--sans); padding: 0.5rem 0.75rem;
                           border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); }
.find select, .find button { font: 600 0.95rem var(--sans); padding: 0.5rem 0.9rem; border-radius: 0.4rem;
                             border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
.find select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;     /* the site's arrow */
               background: var(--panel) var(--chevron) no-repeat right 0.75rem center / 0.65rem auto; }
.find button { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); cursor: pointer; }
.find button:hover { filter: brightness(1.1); }
.hit h3 { font-size: 1.15rem; }
.hit h3 .ref { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.hit .sources { margin-top: 0.4rem; }
.hit .topics { margin: 0 0 0.4rem !important; }
.hit .outcomes li.more { font-weight: 400; color: var(--muted); list-style: none; margin-left: -1.2rem; }
.filter { font-family: var(--sans); }

/* Following a search by email (§6, step 8.5): the form, and the follower's page */
.follow { margin: 1rem 0 1.5rem; padding: 0.9rem 1rem 0.6rem; background: var(--panel); border: 1px solid var(--line);
          border-radius: 0.5rem; }
.follow-title { font: 600 0.95rem var(--sans); }
.follow .find { margin: 0.5rem 0; }
.follow input[type=email] { flex: 1 1 14rem; min-width: 0; font: 1rem var(--sans); padding: 0.5rem 0.75rem;
                            border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); }
.follow .quiet { font: 0.85rem/1.5 var(--sans); margin: 0; }
.follow .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.follows { margin: 1.5rem 0; font-family: var(--sans); }
.follows h2 { font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.follows ul { list-style: none; padding: 0; }
.follows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0;
              border-bottom: 1px solid var(--line); }
.follows button { font: 600 0.95rem var(--sans); padding: 0.45rem 0.9rem; border-radius: 0.4rem; cursor: pointer;
                  border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
.follows button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.follows button:hover { filter: brightness(1.1); }
.banner { font-family: var(--sans); padding: 0.6rem 0.9rem; border-radius: 0.4rem; background: var(--mark); }

/* Want CivicFM in your town? (§6, step 8.13): the index's last section, in the follow box's panel, and its answer */
.your-town { margin: 3rem 0 0; padding: 1.1rem 1.25rem 0.9rem; background: var(--panel); border: 1px solid var(--line);
             border-radius: 0.5rem; font-family: var(--sans); }
.your-town h2 { margin: 0 0 0.35rem; }
.your-town > p { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.5; }
.your-town .find { margin: 0.75rem 0 0.6rem; }
.your-town .find input:is([type=text], [type=email]) { flex: 1 1 12rem; min-width: 0; font: 1rem var(--sans);
  padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); }
/* Picking the place (step 8.14): one field, its suggestions as it's typed in (static/want.js), the place picked, and on
   the answer, the places a ZIP code or a name could mean */
.find.want, .find.want-pick { display: grid; gap: 0.5rem; }
.find.want input:is([type=text], [type=email]), .find.want-pick input[type=email] { width: 100%; }
.find:is(.want, .want-pick) > button { justify-self: start; }
.place-field { position: relative; }
.suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.3rem 0;
               list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 0.45rem;
               box-shadow: 0 10px 28px rgb(0 0 0 / 0.16); max-height: 22rem; overflow-y: auto; font: 1rem/1.35 var(--sans); }
.suggestions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: center;
                  padding: 0.4rem 0.7rem; cursor: pointer; }
.suggestions li[aria-selected=true], .suggestions li[role=option]:hover { background: var(--panel); }
.suggestions .line { grid-column: 1; font-size: 0.8rem; color: var(--muted); }
.suggestions .pill, .choice .pill { grid-row: 1 / span 2; grid-column: 2; font: 600 0.7rem var(--sans); white-space: nowrap;
                                    background: var(--mark); color: var(--fg); border-radius: 1rem; padding: 0.1rem 0.5rem; }
.suggestions .head { display: block; cursor: default; padding: 0.3rem 0.7rem 0.15rem; color: var(--muted);
                     font: 600 0.72rem var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.suggestions .note { display: block; cursor: default; font-size: 0.82rem; line-height: 1.4; color: var(--muted);
                     border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.45rem; }
.suggestions .note.alone { border: 0; margin: 0; padding-top: 0.4rem; }
.want .picked { font: 0.85rem/1.45 var(--sans); color: var(--muted); margin: -0.1rem 0 0; }
.choices { display: grid; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem;
          padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); }
label.choice { cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { margin: 0; accent-color: var(--accent); }
.choice .mark { width: 13px; }
.choice .nm { line-height: 1.35; }
.choice small { display: block; font-size: 0.8rem; }
.choice a { font: 600 0.9rem var(--sans); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.your-town p.quiet { font-size: 0.85rem; margin: 0; }
.your-town .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.town-link { margin: -0.4rem 0 0.25rem; font: 0.95rem/1.5 var(--sans); color: var(--muted); }
/* On a wide screen, a column to the right of the index, kept in view as it scrolls; the index, and its bar, widen to
   hold it, while the shows keep the measure. On a phone it ends the index, and the line under Shows leads to it.
   An episode's highlights take the same column, and its masthead and footer widen with the bar. */
@media (min-width: 64rem) {
  body.beside .network-bar div, body.beside .masthead, body.beside .colophon, main.beside {
    max-width: calc(var(--measure) + 20rem + 2.5rem); }
  main.beside { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 3rem; align-items: start; }
  main.beside > aside { position: sticky; top: 1.5rem; }
  main.beside > aside .your-town { margin-top: 2.25rem; }
  main.beside > aside .your-town h2 { font-size: 1.2rem; line-height: 1.25; }
  main.beside > aside .your-town > p { font-size: 0.95rem; }
  main.beside > aside .find.want > button { justify-self: stretch; }
  main.beside .town-link { display: none; }
  /* An episode's highlights (step 8.15) stand under its player in the page, where a phone shows them. Here they're
     set over the grid's empty column, the episode's full height, so their panel stays in view as it scrolls. As a
     grid item of their own they'd have to leave the episode, and so end the page on a phone. */
  main.beside > .episode { position: relative; }
  .episode > .clips { position: absolute; top: 0; bottom: 0; left: calc(100% + 3rem); width: 17rem; }
  .clips-panel { position: sticky; top: 1.5rem; margin-top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto;
                 padding: 1rem 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line);
                 border-radius: 0.5rem; font-family: var(--sans); }
  .clips-panel h2 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 0.75rem; }
  .clips-panel .clip-row { grid-template-columns: 1fr; }
  /* In the column, a card's title and who speaks take its full width, and ▶ and Share share its last line */
  .clips-panel .clip { background: var(--bg); grid-template-columns: auto 1fr; gap: 0.3rem 0.5rem;
                       grid-template-areas: "title title" "who who" "play share"; padding: 0.65rem 0.75rem; }
  .clips-panel .clip-text { display: contents; }
  .clips-panel .clip-title { grid-area: title; }
  .clips-panel .clip-who { grid-area: who; margin: 0; }
  .clips-panel .clip-play { grid-area: play; min-width: 2rem; height: 2rem; font-size: 0.8rem; margin-top: 0.25rem; }
  .clips-panel .clip-share { grid-area: share; align-self: center; margin-top: 0.25rem; }
}
main.beside > .main-column { min-width: 0; }
.answer .your-town { margin-top: 1rem; }
.answer .feature { padding-top: 0.5rem; }
.answer .feature h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.2rem; }
.answer .feature h2 a { color: var(--fg); text-decoration: none; }
.answer .banner { margin: 1rem 0; }
.answer .next { font: 600 0.95rem var(--sans); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line);
         padding-top: 1rem; font: 600 0.95rem var(--sans); }
.area h2 { border-top: 2px solid var(--fg); padding-top: 0.75rem; }
.topic-list { list-style: none; padding: 0; margin: 0; }
.topic-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.topic-list a { font-weight: 600; font-family: var(--sans); }
.topic-list .about { display: block; color: var(--muted); font-size: 0.9rem; }
pre { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.75rem 1rem;
      font-size: 0.8rem; line-height: 1.45; }
code { font-size: 0.9em; }
.endpoints dt { margin-top: 1rem; font-weight: 600; }
.endpoints dd { margin: 0.25rem 0 0 1rem; }
.fields { border-collapse: collapse; width: 100%; }
.fields td { padding: 0.4rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.fields td:first-child { padding-right: 1rem; white-space: nowrap; }
.fields small { display: block; font-size: 0.8rem; }
.fields small a { color: inherit; }
.endpoints .fields { margin: 0.5rem 0 0.75rem; }
.endpoints dd p { margin: 0.75rem 0 0; }
@media (max-width: 34rem) {            /* a narrow screen: each field's line under its name */
  .fields td { display: block; }
  .fields td:first-child { white-space: normal; overflow-wrap: anywhere; padding-bottom: 0; }
  .fields td + td { border-top: 0; padding-top: 0.15rem; }
}