:root { --bg:#0f172a; --panel:#1e293b; --panel2:#243349; --fg:#e2e8f0; --muted:#94a3b8;
          --accent:#38bdf8; --line:#334155; --good:#4ade80; --bad:#f87171; }
  * { box-sizing: border-box; }
  body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--fg);
         margin:0; background:var(--bg); line-height:1.55; }
  header { background:var(--panel); border-bottom:1px solid var(--line); padding:.75rem 1.4rem;
           position:sticky; top:0; z-index:5; }
  header a.brand { font-weight:700; color:var(--accent); text-decoration:none; font-size:1.15rem; letter-spacing:.2px; }
  header .tagline { color:var(--muted); font-size:.72rem; letter-spacing:.3px; display:block; margin-top:-2px; }
  header nav { display:inline; }
  header nav a { margin-left:1.1rem; color:var(--muted); text-decoration:none; font-size:.92rem; }
  header nav a:hover, header nav a.active { color:var(--fg); }
  main { max-width: 1060px; margin: 1.4rem auto; padding: 0 1.4rem; }
  h1 { font-size:1.6rem; margin:.2rem 0 .6rem; } h2 { font-size:1.14rem; margin:1.5rem 0 .5rem; }
  h3 { font-size:1rem; margin:1rem 0 .4rem; }
  a { color: var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
  p.muted, .muted { color: var(--muted); } .small { font-size:.85rem; } .tiny{font-size:.75rem;}
  .card { background:var(--panel); border:1px solid var(--line); border-radius:12px;
          padding:1rem 1.15rem; margin:.85rem 0; }
  table { border-collapse: collapse; width:100%; table-layout:fixed; }
  th, td { text-align:left; padding:.5rem .65rem; border-bottom:1px solid var(--line);
           overflow:hidden; text-overflow:ellipsis; }
  th { color:var(--muted); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; }
  td.num, th.num { text-align:right; font-variant-numeric: tabular-nums; }
  .table-wrap { overflow-x:auto; }
  table.cmp { table-layout:auto; min-width:340px; }
  table.cmp td.num, table.cmp th.num { white-space:nowrap; overflow:visible; text-overflow:clip; }
  .tag { display:inline-block; font-size:.72rem; background:rgba(56,189,248,.14); color:var(--accent);
         border:1px solid rgba(56,189,248,.25); border-radius:6px; padding:.05rem .4rem; margin-left:.4rem;
         white-space:nowrap; vertical-align:middle; }
  details.item { border:1px solid var(--line); border-radius:10px; margin:.5rem 0; background:var(--panel); }
  details.item > summary { cursor:pointer; padding:.7rem .9rem; list-style:none;
         white-space:normal; overflow-wrap:anywhere; }
  details.item > summary::-webkit-details-marker { display:none; }
  details.item > summary::before { content:"▸"; color:var(--muted); margin-right:.5rem; }
  details.item[open] > summary::before { content:"▾"; }
  details.item[open] > summary { border-bottom:1px solid var(--line); font-weight:600; background:var(--panel2);
         border-radius:10px 10px 0 0; }
  .panel { padding:.85rem 1rem; overflow-wrap:anywhere; }
  form.filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; }
  form.filters label { font-size:.78rem; color:var(--muted); display:flex; flex-direction:column; gap:.2rem; }
  form.filters input, form.filters select { padding:.4rem .5rem; border:1px solid var(--line);
         border-radius:7px; background:var(--bg); color:var(--fg); }
  form.filters button { padding:.45rem .9rem; border:1px solid var(--accent); background:var(--accent);
         color:#06121f; font-weight:600; border-radius:7px; cursor:pointer; }
  form.filters a.clear { align-self:center; font-size:.82rem; }
  .badge { font-size:.7rem; border-radius:6px; padding:.08rem .45rem; font-weight:700; }
  .PASS{background:rgba(34,197,94,.16);color:#4ade80;} .FAIL{background:rgba(239,68,68,.18);color:#f87171;}
  .STALE{background:rgba(245,158,11,.16);color:#fbbf24;} .UNREACHABLE{background:rgba(148,163,184,.16);color:#cbd5e1;}
  .fact { border-left:3px solid var(--line); padding:.35rem .75rem; margin:.45rem 0; }
  .evidence { font-size:.82rem; color:var(--muted); font-style:italic; }
  .grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media (max-width:760px){ .grid{grid-template-columns:1fr;} }
  .chip { display:inline-block; font-size:.68rem; background:rgba(148,163,184,.14); color:var(--muted);
          border:1px solid var(--line); border-radius:6px; padding:.02rem .35rem; margin:0 .15rem .15rem 0; }
  /* ---- answer-first cards & entry doors ---- */
  .answer { font-size:1.05rem; font-weight:600; color:var(--fg); margin:.1rem 0 .25rem; line-height:1.35; }
  .cards3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
  .doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; margin:.6rem 0; }
  .door { display:block; background:var(--panel2); border:1px solid var(--line); border-radius:12px;
          padding:.9rem 1rem; color:var(--fg); }
  .door:hover { border-color:var(--accent); text-decoration:none; }
  .door .k { font-weight:700; color:var(--accent); } .door .d { color:var(--muted); font-size:.85rem; }
  .kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
  .deep { font-size:.85rem; } .stat { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
  /* ---- city hero ---- */
  .hero { display:grid; grid-template-columns:300px 1fr; gap:1.2rem; align-items:stretch; }
  @media (max-width:680px){ .hero{grid-template-columns:1fr;} }
  .hero-img { border-radius:12px; min-height:170px; background-size:cover; background-position:center;
              display:flex; align-items:flex-end; padding:.5rem .7rem; color:#f8fafc;
              text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .hero-ph { background:linear-gradient(135deg,#1e3a5f,#0ea5b7 130%); }
  /* city logos (Cities directory tiles): contain so varied aspect ratios are never stretched */
  .hero-img.logo { background-size:contain; background-repeat:no-repeat; background-position:center;
                   background-color:#f8fafc; }
  .facts { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:.5rem 0 0; padding:0; list-style:none; }
  .facts li { font-size:.85rem; } .facts b { color:var(--muted); font-weight:600; }
  /* ---- attention-share & dollar bars (CSS, no chart lib) ---- */
  .sbar { display:flex; height:20px; border-radius:6px; overflow:hidden; background:var(--panel2);
          border:1px solid var(--line); }
  .sbar > span { display:block; height:100%; }
  .legend { display:flex; flex-wrap:wrap; gap:.3rem .8rem; margin:.5rem 0; font-size:.74rem; color:var(--muted); }
  .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:.3rem; vertical-align:middle; }
  .dbar { height:9px; border-radius:5px; background:var(--accent); }
  .row-bar { display:grid; grid-template-columns:130px 1fr auto; gap:.6rem; align-items:center; margin:.3rem 0; font-size:.86rem; }
  .row-bar .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tc-housing{background:#38bdf8;} .tc-homelessness{background:#34d399;}
  .tc-public_safety{background:#f87171;} .tc-streets_infrastructure{background:#fbbf24;}
  .tc-permitting_land_use{background:#a78bfa;} .tc-climate_environment{background:#a3e635;}
  .tc-economic_development{background:#22d3ee;} .tc-budget_finance{background:#f472b6;}
  .tc-governance_admin{background:#fb923c;} .tc-other{background:#94a3b8;}
  .up { color:var(--good); } .down { color:var(--bad); }
  .pill { display:inline-block; font-size:.72rem; border:1px solid var(--line); border-radius:999px;
          padding:.12rem .6rem; color:var(--muted); }
  .pill.on { border-color:var(--accent); color:var(--accent); background:rgba(56,189,248,.12); }
  /* prominent collapsible (e.g. the City-Brief "Browse all meetings" entry) */
  details.cta { border-color:rgba(56,189,248,.5); }
  details.cta > summary { background:rgba(56,189,248,.10); color:var(--fg); font-weight:700; font-size:1.02rem; }
  details.cta > summary:hover { background:rgba(56,189,248,.16); }
  .btn { display:inline-block; text-align:center; padding:.55rem .9rem; border-radius:8px; cursor:pointer;
         border:1px solid var(--accent); background:var(--accent); color:#06121f; font-weight:600; }
  .btn.ghost { background:transparent; color:var(--fg); border-color:var(--line); }
  /* pin popover + shared inputs (pin bar, account page, item/meeting pin controls, fragments) */
  .pinpop > summary { list-style:none; cursor:pointer; }
  .pinpop > summary::-webkit-details-marker { display:none; }
  .acct-in { padding:.4rem .5rem; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--fg); }
  /* audit/needs-review indicators are hidden until the user opts in via the utility bar */
  body:not(.audit-on) .audit-only { display:none !important; }
  /* gutter side-bars: a thin fixed tab that opens an overlay drawer */
  .sidetab { position:fixed; top:42%; z-index:40; background:var(--panel2); border:1px solid var(--line);
             color:var(--fg); cursor:pointer; padding:.6rem .35rem; writing-mode:vertical-rl;
             font-size:.78rem; letter-spacing:.4px; border-radius:0 8px 8px 0; }
  .sidetab:hover { color:var(--accent); border-color:var(--accent); }
  .sidetab.right { right:0; border-radius:8px 0 0 8px; }
  .sidetab.left { left:0; }
  .drawer { position:fixed; top:0; height:100vh; width:290px; max-width:86vw; background:var(--panel);
            z-index:41; padding:1rem 1.1rem; overflow-y:auto; transition:transform .18s ease;
            box-shadow:0 0 40px rgba(0,0,0,.45); }
  .drawer.left { left:0; border-right:1px solid var(--line); transform:translateX(-110%); }
  .drawer.right { right:0; border-left:1px solid var(--line); transform:translateX(110%); }
  .drawer.open { transform:translateX(0); }
  .drawer .x { float:right; cursor:pointer; border:none; background:none; color:var(--muted); font-size:1.2rem; }
  .pin-row { padding:.45rem 0; border-bottom:1px solid var(--line); }
  /* large homepage brand title (sits above the hero; distinct from the sticky header brand) */
  .home-title { text-align:center; font-size:2.7rem; font-weight:800; color:var(--accent);
                letter-spacing:.5px; line-height:1.1; margin:.4rem 0 1.1rem; }
  .home-title span { display:block; font-size:.9rem; font-weight:600; color:var(--muted);
                     letter-spacing:.4px; margin-top:.25rem; }
  @media (max-width:600px){ .home-title { font-size:2rem; } }
  /* ---- county map (/cities): muted = coming soon, accent = Council Brief available ---- */
  .cmap svg { display:block; width:100%; height:auto; max-height:700px; } /* near-square county: cap so the page top stays scannable */
  .cmap path.cm { fill:var(--panel2); stroke:var(--bg); stroke-width:1; } /* gaps read as unincorporated bg */
  .cmap path.cm:hover { fill:#2e405c; }
  .cmap path.cm.on { fill:rgba(56,189,248,.45); cursor:pointer; }
  .cmap a:hover path.cm.on, .cmap a:focus path.cm.on { fill:var(--accent); }
  .cmap a:focus-visible path.cm.on { stroke:#fff; stroke-width:2; } /* visible keyboard focus */
  .cmap circle.cm-dot { fill:var(--accent); pointer-events:none; }  /* shape cue + tiny-city tap target */
  .cmap .cm-inset { fill:none; stroke:var(--line); stroke-dasharray:4 3; }
  .cmap text.cm-label { fill:var(--muted); font-size:20px; } /* svg user units: ~10px at the rendered cap */
  .cmap-tip { position:fixed; z-index:30; background:var(--panel); border:1px solid var(--line);
              border-radius:8px; padding:.45rem .65rem; font-size:.8rem; max-width:240px;
              pointer-events:none; box-shadow:0 4px 18px rgba(0,0,0,.45); }
  .cmap-tip.tappable { pointer-events:auto; } /* mobile info card: its link must be tappable */
  .cmap-tip .nm { font-weight:700; }

/* ---- transcript-view styles (graduated from transcripts/_style.html, audit #20) ----
   Violet = "from the video", distinct from sky-blue agenda tags + green/red audit badges.
   All selectors are transcript-page-specific (.tag.video, .sbar.timeline, #itemList, ...),
   so loading them globally is inert on non-transcript pages. */
.tag.video { background:rgba(167,139,250,.14); color:#a78bfa; border-color:rgba(167,139,250,.3); }
  a.pill.ts { border-color:rgba(167,139,250,.45); color:#a78bfa; white-space:nowrap; }
  a.pill.ts:hover { background:rgba(167,139,250,.12); text-decoration:none; }
  .card.video-banner { border-color:rgba(167,139,250,.5); background:rgba(167,139,250,.07); }
  .fact.video { border-left-color:#a78bfa; }
  /* meeting-as-a-strip timeline: items in topic colors, everything else labeled grays */
  .sbar.timeline { height:26px; }
  .sbar.timeline a { display:block; height:100%; }
  .sbar.timeline a > span { display:block; height:100%; }
  .sbar.timeline a:hover > span { filter:brightness(1.45); }
  .sbar.timeline .tlseg { display:block; height:100%; }
  .tl-consent { background:rgba(167,139,250,.75); }
  .tl-pc { background:#64748b; }
  .tl-procedure { background:#3b4a61; }
  .tl-gap { background:transparent; }
  /* agenda-order vs meeting-order toggle: one flat list (items + the public-comment card +
     the heading are all flex children), CSS `order` flips the sort */
  #itemList { display:flex; flex-direction:column; }
  #itemList.byagenda > * { order: var(--ao); }
  #itemList.bymeeting > * { order: var(--mo); }