/* ══════════════════════════════════════════════════════════════════════════════════════
   citylink.css — the CityLink public surface. 26-0902 (99, CityLink P0).

   CityLink is where a city's people meet what is proposed for their city: published
   review theatres per municipality, and public showcases like Lower Johnson. Like
   SalesLink, this is a surface a stranger opens on a phone at a fence — one hand,
   bright daylight, no login.

   THE SHARED TOKENS ARE saleslink.css's SHARED TOKENS (Deal.html's, name for name and
   value for value — "do not fork these"). Everything CityLink adds is namespaced --cl-*.
   CityLink's accent is NAVY (the civic blue of the old CITYLink portal and the
   26-0805 design-refresh note), never SalesLink's green: --accent stays the platform
   token; CityLink surfaces use --cl-accent for identity, CTAs and the wordmark.

   Light and dark both land: every colour defined on bare :root, redefined under
   prefers-color-scheme AND under [data-theme]. No colour lives only in a media query.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── shared with Deal.html / saleslink.css — do not fork these ─────────────────── */
  --page:#EDEFF1; --card:#FFFFFF; --sunk:#F7F8F9;
  --ink:#354456; --muted:#6C757D; --rule:#E4E8EC; --line:#DDE3E9;
  --accent:#21A545; --accent-ink:#FFFFFF; --accent-soft:#E0F6E6;
  --amber:#FFB454; --amber-bg:#FFEFD9; --amber-ink:#8A5A12;
  --green-bg:#E0F6E6; --green-ink:#17703A;
  --red:#B3261E; --red-bg:#FDE7E7;
  --chip-bg:#E7EAED; --chip-ink:#5A6672;
  --shadow:0 1px 2px rgba(20,30,45,.06), 0 8px 24px rgba(20,30,45,.06);
  --radius:12px;
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* ── CityLink only ─────────────────────────────────────────────────────────────── */
  --cl-accent:#2B5FAB;          /* civic navy — identity, CTAs, the wordmark <i> */
  --cl-accent-ink:#FFFFFF;
  --cl-accent-soft:#E4EDF9;
  --cl-hero:#22334D;            /* hero ground when no rendering resolves */
  --cl-hero-ink:#FFFFFF;
  --cl-hero-veil:rgba(16,26,44,.58);
  --cl-nav:rgba(255,255,255,.92);
  --cl-tile:#E7EAED;
  --cl-faint:#9BA3A9;
  --cl-hover:0 10px 24px rgba(20,30,45,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#090D13; --card:#0F141B; --sunk:#0C1118;
    --ink:#E8EDF3; --muted:#93A1B3; --rule:#1E2733; --line:#2A3442;
    --accent:#2FBE58; --accent-ink:#06170D; --accent-soft:#10301D;
    --amber:#FFB454; --amber-bg:#37280F; --amber-ink:#FFC677;
    --green-bg:#10301D; --green-ink:#6FD48F;
    --red:#FF8A93; --red-bg:#37171A;
    --chip-bg:#1E2836; --chip-ink:#A7B4C4;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --cl-accent:#6FA0E8; --cl-accent-ink:#071527; --cl-accent-soft:#152A40;
    --cl-hero:#0C1118; --cl-hero-ink:#E8EDF3; --cl-hero-veil:rgba(6,10,15,.64);
    --cl-nav:rgba(15,20,27,.92); --cl-tile:#1A2230; --cl-faint:#8A97AA;
    --cl-hover:0 10px 24px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --page:#090D13; --card:#0F141B; --sunk:#0C1118;
  --ink:#E8EDF3; --muted:#93A1B3; --rule:#1E2733; --line:#2A3442;
  --accent:#2FBE58; --accent-ink:#06170D; --accent-soft:#10301D;
  --amber:#FFB454; --amber-bg:#37280F; --amber-ink:#FFC677;
  --green-bg:#10301D; --green-ink:#6FD48F;
  --red:#FF8A93; --red-bg:#37171A;
  --chip-bg:#1E2836; --chip-ink:#A7B4C4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --cl-accent:#6FA0E8; --cl-accent-ink:#071527; --cl-accent-soft:#152A40;
  --cl-hero:#0C1118; --cl-hero-ink:#E8EDF3; --cl-hero-veil:rgba(6,10,15,.64);
  --cl-nav:rgba(15,20,27,.92); --cl-tile:#1A2230; --cl-faint:#8A97AA;
  --cl-hover:0 10px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
.clhead{position:sticky;top:0;z-index:40;background:var(--cl-nav);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule)}
.clhead .bar{display:flex;align-items:center;gap:14px;height:56px}
.wordmark{font-weight:800;font-size:20px;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.wordmark i{font-style:normal;color:var(--cl-accent)}
.byline{font-size:12px;color:var(--muted)}
.spacer{flex:1}
.themebtn{border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer}

/* hero */
.hero{position:relative;background:var(--cl-hero) center/cover no-repeat;color:var(--cl-hero-ink)}
.hero .veil{position:absolute;inset:0;background:var(--cl-hero-veil)}
.hero .inner{position:relative;padding:72px 0 64px}
.hero .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#CBD9EF;margin-bottom:10px}
.hero h1{margin:0 0 12px;font-size:clamp(30px,5.4vw,46px);line-height:1.12;font-weight:800;max-width:17em}
.hero .sub{margin:0;max-width:38em;font-size:clamp(15px,2.3vw,18px);color:#E4EBF6}
.hero .cta{display:inline-block;margin-top:22px;background:var(--cl-accent);color:var(--cl-accent-ink);
  text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px}

/* sections */
section{padding:44px 0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cl-accent)}
h2{margin:6px 0 6px;font-size:clamp(22px,3.4vw,30px);line-height:1.2}
.lede{margin:0 0 22px;color:var(--muted);max-width:44em}

/* cards */
.cardgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;text-decoration:none;display:block;transition:box-shadow .15s}
.card:hover{box-shadow:var(--cl-hover)}
.card .media{aspect-ratio:16/9;background:var(--cl-tile) center/cover no-repeat}
.card .pad{padding:16px 18px 18px}
.card .kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cl-accent)}
.card h3{margin:4px 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* honest empty state */
.state{background:var(--sunk);border:1px dashed var(--line);border-radius:var(--radius);
  padding:34px 24px;text-align:center;color:var(--muted)}
.state .wordmark{font-size:17px}
.state h2{font-size:19px;margin:10px 0 4px;color:var(--ink)}
.state p{margin:0;font-size:14px}

/* gallery (showcase page) */
.gallery{display:grid;gap:18px}
@media (min-width:760px){.gallery{grid-template-columns:1fr 1fr}}
.gallery figure{margin:0;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{padding:12px 16px;font-size:14px;color:var(--muted)}

/* the question block */
.ask{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.chip{border:1.5px solid var(--line);background:var(--sunk);color:var(--ink);border-radius:999px;
  padding:10px 18px;font:inherit;font-size:15px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip[aria-pressed="true"]{background:var(--cl-accent);border-color:var(--cl-accent);color:var(--cl-accent-ink);font-weight:700}
textarea{width:100%;margin-top:14px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--sunk);color:var(--ink);font:inherit;font-size:15px;min-height:96px;resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--cl-accent);outline-offset:1px;border-color:var(--cl-accent)}
.count{font-size:12px;color:var(--cl-faint);text-align:right;margin-top:4px}
.followrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
input[type=email]{flex:1;min-width:220px;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--sunk);color:var(--ink);font:inherit;font-size:15px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14px;color:var(--muted)}
.consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--cl-accent)}
.privacy{font-size:12.5px;color:var(--cl-faint);margin-top:10px}
.submit{margin-top:18px;background:var(--cl-accent);color:var(--cl-accent-ink);border:0;border-radius:999px;
  padding:13px 26px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.submit[disabled]{opacity:.55;cursor:default}
.formmsg{margin-top:12px;font-size:14px}
.formmsg.err{color:var(--red)}
.thanks{background:var(--cl-accent-soft);border:1px solid var(--cl-accent);border-radius:var(--radius);
  padding:26px 22px;text-align:center}
.thanks h3{margin:0 0 6px;color:var(--cl-accent)}
.thanks p{margin:0;color:var(--ink)}
[hidden]{display:none!important}

/* footer */
.clfoot{border-top:1px solid var(--rule);padding:30px 0 40px;margin-top:30px}
.clfoot .fine{font-size:12px;color:var(--cl-faint);line-height:1.6;max-width:70em}

/* ── municipality browse shell (muni/index.html) — 26-0902 ─────────────────────────── */
.muni{padding:26px 0 10px}
.munihead{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.munihead h1{margin:4px 0 6px;font-size:clamp(26px,4vw,38px);line-height:1.1}
.munihead .lede{margin:0;max-width:40em}
.modes{display:flex;gap:6px;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:4px}
.modebtn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;
  padding:7px 16px;border-radius:999px;cursor:pointer}
.modebtn[aria-pressed="true"]{background:var(--cl-accent);color:var(--cl-accent-ink)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 16px}
.toolbar input[type=search]{flex:1;min-width:200px;padding:10px 14px;border:1.5px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:14px}
.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chip.small{padding:7px 13px;font-size:13px}
.chip.dotted::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--dot,#9BA3A9);margin-right:7px;vertical-align:1px}
.countline{flex-basis:100%;font-size:12.5px;color:var(--cl-faint)}
.browse{display:grid;gap:16px;align-items:start}
.browse[data-mode="list"]{grid-template-columns:1fr}
.browse[data-mode="list"] .mappane{display:none}
.browse[data-mode="split"]{grid-template-columns:minmax(0,1fr) minmax(320px,44%)}
.browse[data-mode="map"]{grid-template-columns:1fr}
.browse[data-mode="map"] .cards{display:none}
@media (max-width:760px){.browse[data-mode="split"]{grid-template-columns:1fr}
  .browse[data-mode="split"] .mappane{display:none}}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.browse[data-mode="split"] .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.appcard{text-align:left;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer;transition:box-shadow .15s}
.appcard:hover{box-shadow:var(--cl-hover)}
.kicker{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cl-accent)}
.stchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.04em;
  color:var(--muted);text-transform:none;font-weight:600}
.stchip::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--dot,#9BA3A9)}
.appcard h3{margin:7px 0 4px;font-size:16.5px;line-height:1.25}
.appcard p{margin:0 0 8px;font-size:13.5px;color:var(--muted);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.metarow{font-size:12.5px;color:var(--cl-faint)}
.mappane{position:sticky;top:70px}
#map{height:min(72vh,640px);border-radius:var(--radius);border:1px solid var(--rule);
  box-shadow:var(--shadow);background:var(--cl-tile)}
.browse[data-mode="map"] #map{height:76vh}
.ovl{position:fixed;inset:0;background:rgba(10,16,26,.55);z-index:80;display:flex;
  align-items:flex-end;justify-content:center;padding:0}
@media (min-width:640px){.ovl{align-items:center;padding:24px}}
.ovlcard{position:relative;background:var(--card);color:var(--ink);width:100%;max-width:560px;
  max-height:88vh;overflow:auto;border-radius:16px 16px 0 0;padding:26px 24px;box-shadow:var(--cl-hover)}
@media (min-width:640px){.ovlcard{border-radius:16px}}
.ovlx{position:absolute;top:10px;right:12px;border:0;background:var(--sunk);color:var(--muted);
  width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer}
.ovlcard h2{margin:8px 0 6px;font-size:22px}
.ovlcard .lede{margin:0 0 6px}
.sdetail{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.drow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--rule);font-size:14px}
.drow span{color:var(--muted)}
.srcline{margin:16px 0 0;font-size:12.5px;color:var(--cl-faint)}
.srcline a{color:var(--cl-accent)}
.claimline{margin:12px 0 0;padding:12px 14px;background:var(--cl-accent-soft);border-radius:10px;
  font-size:13.5px}
.claimline a{color:var(--cl-accent);font-weight:700}