:root {
  --black: #000;
  --white: #fff;
  --pichis: #f7f6f6d0;
  --page-bg: #dedacb98;
  --g100: #f0ede8;
  --coral: #e83d1a;
  --coral-light: #fdfbf0;
  --hanken: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --g200: #e8e4de;
  --g300: #c5c0b8;
  --g400: #9ca3af;
  --g500: #888;
  --g600: #666;
  --g800: #333;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 10px;
  --accent: #1d4ed8;
  --accent-light: #eff6ff;
  --col-aqi: #0891b2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--hanken), var(--sans);
  font-weight: 400;
  background: var(--white);
  color: var(--black);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}

/* ─── MASTHEAD ─────────────────────────────────────────── */
#masthead {
  padding: 1.75rem 1.5rem 0;
  background: var(--white);
  position: sticky; top: 0; z-index: 100;
  transition: padding 0.2s ease;
}
.mast-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0rem;
}
.wordmark-center {
  text-align: center;
  cursor: pointer;
}
.mast-tagline {
  font: 400 0.8rem var(--hanken);
  color: var(--g500);
  margin-bottom: 0.6rem;
  max-height: 2rem;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.15s ease, margin-bottom 0.2s ease;
}
.wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
  transition: margin-bottom 0.2s ease;
}
.wordmark-name {
  font: 400 3.2rem 'Oi', serif;
  line-height: 1;
  color: #ed3f3f;
  letter-spacing: 0.01em;
  transition: font-size 0.2s ease;
}
/* Compact header when scrolled */
#masthead.scrolled { padding-top: 0.4rem; }
#masthead.scrolled .mast-tagline { max-height: 0; opacity: 0; margin-bottom: 0; }
#masthead.scrolled .wordmark-name { font-size: 1.8rem; }
#masthead.scrolled .wordmark { margin-bottom: 0.3rem; }
.wordmark-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e83d1a;
  color: #fff;
  border-radius: 50%;
  font-size: 0.8em;
  width: 1.4em;
  height: 1.4em;
  line-height: 1;
  vertical-align: 0.1em;
}
#weather-widget {
  font-family: var(--hanken);
  font-size: 0.72rem;
  color: var(--black);
  min-height: 1.2rem;
}
#date-widget {
  font-family: var(--hanken);
  font-size: 0.72rem;
  color: var(--black);
  text-align: left;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
}
.mast-time {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--black);
  text-transform: none;
  letter-spacing: 0;
}

/* Search — pill with icon */
#search-wrap {
  display: flex;
  align-items: center;
  background: var(--g100);
  border-radius: 0;
  border: 1px solid transparent;
  padding: 0 0.6rem 0 0.75rem;
  transition: border-color 0.15s, background 0.15s;
}
#search-wrap:focus-within {
  background: var(--white);
  border-color: var(--black);
}
#search-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--g500);
}
#search-input {
  padding: 0.42rem 0.4rem;
  border: none;
  font-size: 0.78rem;
  font-family: var(--sans);
  width: 190px;
  outline: none;
  background: transparent;
  color: var(--black);
}
#search-input::placeholder { color: var(--g400); }
#search-clear {
  background: none; border: none;
  font-size: 0.65rem; color: var(--g600);
  cursor: pointer; padding: 0.2rem 0.1rem;
  display: none; line-height: 1;
}
#search-clear.visible { display: block; }
#search-clear:hover { color: var(--black); }

/* Nav */
/* ─── SECONDARY NAV (hidden — replaced by hamburger on all screens) ── */
#sec-nav { display: none; }
.sec-nav-link {
  background: none; border: none; cursor: pointer; padding: 0.15rem 0.3rem;
  font: 500 0.58rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--g600); text-decoration: none;
  transition: color 0.15s;
}
.sec-nav-link:hover { color: var(--black); }
.sec-nav-sep { font-size: 0.55rem; color: var(--g400); }

/* ─── MASTHEAD LEFT/RIGHT + HAMBURGER ──────────────────────── */
.mast-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mast-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mast-sub-btn {
  font: 700 0.75rem var(--hanken);
  padding: 0.5rem 0.85rem;
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  /* rendered as an <a> so it works without JS and is a real link for crawlers */
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
}
.mast-sub-btn:hover { opacity: 0.85; }
#ham-btn {
  display: flex; align-items: center;
  background: none; border: none; cursor: pointer;
  padding: 0.4rem 0.6rem 0.4rem 0;
  color: var(--g400);
  transition: color 0.15s;
  position: relative;
}
#ham-btn:hover { color: var(--g700); }
#ham-btn.home-active { color: var(--coral); }
#ham-btn.home-active::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0.6rem;
  height: 2px; background: var(--coral); border-radius: 1px;
}
#ham-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--white);
  border: 1px solid var(--g200);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  min-width: 200px;
  z-index: 300;
}
#ham-menu.open { display: block; }
#nav-wrap { display: none; }
.ham-sep {
  height: 1px; background: var(--g200); margin: 0.25rem 0;
}
.ham-link {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%; padding: 0.6rem 1rem;
  font: 500 0.82rem var(--hanken);
  color: var(--g600); text-decoration: none;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.ham-link:hover { background: var(--g100); color: var(--black); }
.ham-link-primary {
  font-weight: 700;
  color: var(--black);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.ham-link-primary:first-child { padding-top: 0.9rem; }
.ham-link.active {
  color: var(--coral) !important;
  box-shadow: inset 3px 0 0 var(--coral);
  background: rgba(232, 61, 26, 0.05);
}
.nav-btn {
  font-family: var(--hanken);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 1.1rem;
  color: var(--black);
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
  opacity: 1;
  text-decoration: none;
}
.nav-btn:hover { background: var(--g200); }
.nav-btn.active { background: var(--g200); color: var(--black); }


/* ─── GUIDES DROPDOWN ───────────────────────────────────── */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--black);
  z-index: 200;
  min-width: 160px;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--g200);
  cursor: pointer;
  font: 700 0.68rem var(--hanken);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
}
.nav-dropdown-menu button:last-child { border-bottom: none; }
.nav-dropdown-menu button:hover { background: var(--g100); }

/* ─── LOCATION BANNER ───────────────────────────────────── */
#location-banner { display: none; padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--g200); background: var(--g100); }
#location-banner.visible { display: flex; align-items: center; gap: 1rem; }
#loc-back {
  font-family: var(--hanken);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g600); background: none; border: none; cursor: pointer;
  padding: 0; white-space: nowrap; flex-shrink: 0;
}
#loc-back:hover { color: var(--black); }
#loc-name {
  font-family: var(--hanken);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
}
#loc-meta {
  font-family: var(--hanken);
  font-size: 0.62rem; color: var(--g600);
}
#loc-stripe { display: none; }

/* ─── MAIN ──────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: 0.5rem; }

/* ─── SECTION HEADER ────────────────────────────────────── */
.sec-hd {
  display: flex; align-items: center; gap: 0.6rem;
  border-top: 0px solid var(--g200); padding-top: 0.15rem; margin-bottom: 1rem;
}
.sec-label {
  font-family: var(--hanken);
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black); padding: 0;
}

/* View-level headings: Agenda, Neighborhoods, Weather, Newsletters */
.view-hd {
  padding-top: 1.75rem;
  margin-bottom: 1.5rem;
}
.view-hd .sec-label {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--black);
}
.sec-meta { font-size: 1rem; color: var(--g600); }
.sec-link {
  font: 500 0.72rem var(--hanken); color: var(--coral);
  background: none; border: none; cursor: pointer; padding: 0; margin-left: auto;
  text-decoration: none;
}
.sec-link:hover { color: var(--black); text-decoration: underline; }

/* ─── GEO NAV STRIP ──────────────────────────────────────── */
#geo-nav {
  display: none;
}
.geo-strip {
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.25rem 0;
  scrollbar-width: none;
  text-align: center;
}
.geo-strip::-webkit-scrollbar { display: none; }
.geo-pill {
  display: inline-block;
  padding: 0.3rem 1rem;
  margin: 0.15rem 0.18rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--g200);
  color: var(--black);
  background: var(--white);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.12s;
  font-family: var(--hanken);
  opacity: 0.5;
}
.geo-pill:hover { border-color: var(--black); opacity: 0.8; }
.geo-pill.active { background: var(--black); color: var(--white); border-color: var(--black); opacity: 1; }
.geo-count {
  font-size: 0.5rem; font-weight: 500;
  opacity: 0.55; margin-left: 0.15rem;
}
.geo-pill.active .geo-count { opacity: 0.75; }
.nav-btn.active .geo-count { opacity: 1; }
.dateline-mode-btn.active .geo-count { color: var(--black); }
.dateline-mode-btn .geo-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font-size: 0.65rem;
  font-weight: 800;
  opacity: 1;
  margin-left: 0.35rem;
  padding: 0 0.2em;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
}

/* ─── LOCAL EXCLUSIVES LIST ──────────────────────────────── */
.card-grid {
  display: flex;
  flex-direction: column;
}

/* ─── CARD ──────────────────────────────────────────────── */
.card, .card-single {
  padding: 0.85rem 0;
  background: transparent;
  display: flex; flex-direction: column; gap: 0.3rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--g200);
}
.card:last-child { border-bottom: none; }
.card:hover .card-title { text-decoration: underline; }
.card-summary { display: none; }
.card-eyebrow { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.src-name { font-family: var(--hanken); font-size: 1rem; font-weight: 700; color: var(--g700); }
.fc-outlet { font-family: var(--hanken); font-size: 1rem; font-weight: 700; color: var(--coral); font-style: normal; }
.fc-time   { font-family: var(--hanken); font-size: 1rem; font-weight: 700; color: var(--g500); white-space: nowrap; }
.borough-dot { display: none; }
.nbhd-label-sm { font-size: 1rem; color: var(--g800); }
.time-sm { font-size: 1rem; color: var(--g800); margin-left: auto; flex-shrink: 0; }
.time-pill {
  display: inline-block; font: 500 0.72rem var(--hanken); color: var(--g500);
  background: var(--g100); border-radius: 20px; padding: 0.1rem 0.5rem;
  white-space: nowrap; line-height: 1.5; flex-shrink: 0;
}

.card-title {
  display: block; font-family: var(--hanken);
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: #363737; text-decoration: none; max-width: 80%;
}
.card-title.lg { font-size: 1rem; line-height: 1.5; }
/* Inside fc-headline-wrap: headline flows inline with excerpt */
.fc-headline-wrap { display: block; margin-bottom: 0.35rem; }
.fc-headline-wrap .card-title { display: inline; max-width: none; }

.card-summary {
  font-size: 1rem; line-height: 1.6; color: #363737;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.coverage-note {
  font-size: 1rem; color: var(--g800); white-space: nowrap; flex-shrink: 0;
  letter-spacing: 0.03em;
}
.coverage-note strong { color: var(--black); }

/* ─── LATEST — typographic ranked list ──────────────────── */
.latest-list { display: flex; flex-direction: column; gap: 0; }
.latest-list .latest-item {
  padding: 0.85rem 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--g200);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.latest-list .latest-item:last-child { border-bottom: none; }
.latest-list .latest-item:hover { box-shadow: none; }
.latest-list .latest-item:hover .card-title { text-decoration: underline; }

.item-meta { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.1rem; }
.meta-sep { color: var(--g500); font-size: 1rem; }
.meta-loc { font-size: 1rem; color: var(--g800); }

/* Score badge */
.score-badge {
  display: inline-flex; align-items: center;
  background: none; border: 1px solid var(--g300); border-radius: 3px;
  cursor: pointer; color: var(--g500); padding: 0.1rem 0.35rem;
  font-size: 0.62rem; font-family: var(--hanken); font-weight: 700;
  letter-spacing: 0.04em; white-space: nowrap; transition: border-color 0.15s, color 0.15s;
}
.score-badge:hover { border-color: var(--g600); color: var(--g800); }

/* Score popover */
#score-popover { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 9998; padding: 1rem; }
#score-popover.hidden { display: none; }
.score-pop-box { background: var(--white); max-width: 360px; width: 100%;
  padding: 1.5rem 1.75rem; border: 1px solid var(--g200); border-top: 3px solid var(--black); }
.score-pop-header { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.75rem; gap: 0.75rem; }
.score-pop-title { font-size: 0.78rem; font-family: var(--hanken); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--black); }
.score-pop-num { font-size: 1.35rem; font-family: var(--hanken); font-weight: 800;
  color: var(--black); white-space: nowrap; }
.score-pop-body { margin: 0 0 0.75rem; font-size: 0.8rem; line-height: 1.6; color: var(--g700); }
.score-pop-list { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.score-pop-list li { font-size: 0.78rem; line-height: 1.6; color: var(--g700); margin-bottom: 0.35rem; }
.score-pop-note { margin: 0 0 1.1rem; font-size: 0.72rem; color: var(--g500); font-style: italic; line-height: 1.5; }
.score-pop-close { display: block; width: 100%; padding: 0.6rem 1rem;
  background: var(--black); color: var(--white); border: none; cursor: pointer;
  font-size: 0.78rem; font-family: var(--hanken); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; }

/* Vote bar — horizontal inline pair in actions row */
.vote-bar {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 0.05rem; flex-shrink: 0;
}

/* Thumbs-up */
.vote-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0.3rem;
  cursor: pointer; opacity: 0.35;
  transition: opacity 0.15s, transform 0.1s; line-height: 1;
  min-width: 40px; min-height: 40px;
}
.vote-btn:hover { opacity: 0.7; }
.vote-btn.voted { opacity: 1; }
.vote-btn svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Thumbs-down */
.vote-down-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0.3rem;
  cursor: pointer; opacity: 0.35;
  transition: opacity 0.15s, transform 0.1s; line-height: 1;
  min-width: 40px; min-height: 40px;
  font-size: 0.9rem; font-weight: 700; color: var(--g500);
}
.vote-down-btn:hover { opacity: 0.7; }
.vote-down-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.vote-down-btn.signaled {
  cursor: default; pointer-events: none; opacity: 0.5;
}

/* Boost button */
.boost-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--coral); border-radius: 999px;
  padding: 0 0.55rem;
  cursor: pointer; opacity: 0.75;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  font: 800 0.88rem var(--hanken); color: var(--coral);
  margin-left: 0.35rem;
  min-width: 36px; min-height: 36px;
}
.boost-btn:hover { opacity: 1; background: rgba(232,61,26,0.06); }
.boost-btn.boosted {
  background: var(--coral); border-color: var(--coral);
  color: var(--white); opacity: 1;
}

/* Fading toast after vote/signal */
.vote-toast {
  position: fixed; z-index: 2000; pointer-events: none;
  font: 600 0.72rem var(--hanken); color: var(--black);
  background: var(--white); border: 1px solid var(--g200);
  border-radius: 4px; padding: 0.2rem 0.55rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: voteToastFade 1.1s ease forwards;
}
@keyframes voteToastFade {
  0%   { opacity: 1; transform: translateY(0); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Contextual feedback popup */
#fb-popup {
  background: var(--white);
  border: 1px solid var(--g200);
  border-top: 3px solid var(--coral);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 280px;
  padding: 1.1rem 1rem 0.9rem;
}
.fb-popup-q {
  font: 700 0.95rem var(--hanken); color: var(--black);
  margin-bottom: 0.75rem; line-height: 1.35;
}
.fb-popup-opt {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; background: none;
  border: 1.5px solid var(--g200); border-radius: 6px;
  padding: 0.65rem 0.85rem; margin-bottom: 0.4rem;
  font: 600 0.875rem var(--hanken); color: var(--g800);
  cursor: pointer; text-align: left;
  transition: border-color 0.12s, color 0.12s;
  min-height: 44px; justify-content: center;
}
.fb-popup-opt:hover { border-color: var(--g500); color: var(--black); }
.fb-opt-ctx {
  font: 500 0.75rem var(--hanken); color: var(--g500);
  margin-top: 0.15rem;
}
.fb-popup-skip {
  display: block; background: none; border: none;
  font: 500 0.8rem var(--hanken); color: var(--g400);
  cursor: pointer; padding: 0.3rem 0; margin-top: 0.1rem;
  transition: color 0.12s; width: 100%; text-align: center;
}
.fb-popup-skip:hover { color: var(--g700); }

/* Vote explainer overlay */
#vote-explainer { position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; }
#vote-explainer.hidden { display: none; }
.vote-explainer-box { background: var(--white); max-width: 320px; width: 100%;
  padding: 1.5rem 1.75rem; border: 1px solid var(--g200); border-top: 3px solid var(--coral); }
.vote-explainer-box h4 { margin: 0 0 0.65rem; font-size: 0.92rem; font-family: var(--hanken);
  font-weight: 800; letter-spacing: 0.02em; color: var(--black); }
.vote-explainer-box p { margin: 0 0 1.1rem; font-size: 0.8rem; line-height: 1.55; color: var(--g700); }
.vote-explainer-btn { display: block; width: 100%; padding: 0.6rem 1rem;
  background: var(--black); color: var(--white); border: none; cursor: pointer;
  font-size: 0.78rem; font-family: var(--hanken); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; }

/* ─── ENGAGEMENT TOASTS (milestones + nudge) ────────────── */
.engagement-toast {
  position: fixed; bottom: 72px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 3500; pointer-events: none;
  font: 600 0.875rem var(--hanken); color: var(--black);
  background: var(--white); border: 1px solid var(--g200);
  border-radius: 100px; padding: 0.6rem 1.3rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  max-width: calc(100vw - 2rem); text-align: center;
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.engagement-toast.visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ─── SCROLL PROGRESS PILL ───────────────────────────────── */
#feed-progress-pill {
  position: fixed; bottom: 80px; left: 50%; z-index: 3000;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; padding: 0.35rem 0.45rem 0.35rem 0.75rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  display: flex; align-items: center; gap: 0.4rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
}
#feed-progress-pill.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#feed-prog-text {
  display: flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.prog-count {
  font: 700 0.72rem/1 var(--hanken); color: var(--black);
}
.prog-next-btn {
  font: 500 0.68rem/1 var(--hanken); color: var(--g600);
  background: rgba(0,0,0,0.05); border: none; cursor: pointer;
  border-radius: 999px; padding: 0.22rem 0.55rem;
  white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s;
}
.prog-next-btn:hover { background: rgba(0,0,0,0.1); color: var(--black); }
#feed-prog-up {
  background: rgba(0,0,0,0.07); border: none; cursor: pointer;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font: 700 0.85rem/1 var(--hanken); color: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  #feed-progress-pill { background: rgba(28,28,38,0.94); box-shadow: 0 2px 14px rgba(0,0,0,0.4); }
  .prog-count { color: rgba(255,255,255,0.9); }
  .prog-next-btn { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.1); }
  .prog-next-btn:hover { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }
  #feed-prog-up { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
}

/* ─── EMPTY STATE ────────────────────────────────────────── */
.empty { padding: 1.5rem 0; font-size: 0.78rem; color: var(--g600); font-style: italic; }

/* ─── SPINNER ────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; margin: 3rem auto;
  border: 2px solid var(--g200); border-top-color: var(--black);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.spinner-sm {
  width: 14px; height: 14px; margin: 1rem 0;
  border: 1.5px solid var(--g200); border-top-color: var(--black);
  border-radius: 50%; animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── LOADING SEQUENCE ───────────────────────────────────── */
.fp-loading-wrap { padding: 3rem 0 1rem; text-align: center; }
.px-mascot { display: block; margin: 0 auto 0.75rem; width: 60px; height: 60px;
  animation: pigeon-bob 1.5s ease-in-out infinite; }
@keyframes pigeon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.loading-msg {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--g500);
  min-height: 1rem; transition: opacity 0.35s ease; opacity: 0;
}

/* ─── SEARCH VIEW ────────────────────────────────────────── */
#search-view { display: none; }
#search-view.active { display: block; }
#search-heading { font-size: 0.75rem; color: var(--g600); margin-bottom: 0.75rem; }
#search-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 8px;
}
#search-list .latest-item {
  padding: 0.875rem 1rem;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
#search-list .latest-item:hover .card-title { text-decoration: underline; }
#search-more-wrap { padding: 1.5rem 0; text-align: center; display: none; }
.more-btn {
  font-family: var(--hanken); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55rem 1.75rem; border: 1.5px solid var(--black); border-radius: 0;
  background: var(--white); color: var(--black); cursor: pointer; transition: all 0.15s;
}
.more-btn:hover { background: var(--black); color: var(--white); }

/* ─── NEIGHBORHOODS VIEW ─────────────────────────────────── */
#nbhds-view { display: none; }
#nbhds-view.active { display: block; }
.nbhd-intro { font-size: 0.78rem; color: var(--g600); margin-bottom: 1.5rem; line-height: 1.5; }
.bor-section { margin-bottom: 2rem; }
.bor-title {
  font-family: var(--hanken);
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black); padding: 0;
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
}
.bor-title-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nbhd-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px;
}
.nbhd-cell {
  padding: 0.65rem 0.875rem;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 8px;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  transition: background 0.1s, border-color 0.1s;
}
.nbhd-cell:hover { background: var(--g100); border-color: var(--g400); }
.nbhd-cell-name { font-size: 0.78rem; font-weight: 500; }
.nbhd-cell-count { font-size: 0.65rem; color: var(--g600); }

/* ─── NEWSLETTER VIEW ────────────────────────────────────── */
#nl-view { display: none; }
#nl-view.active { display: block; }
.nl-intro { max-width: 560px; margin-bottom: 1.75rem; }
.nl-intro-title { font-family: var(--hanken); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; }
.nl-intro-body { font-size: 0.82rem; color: var(--g800); line-height: 1.6; }

.nl-form-card {
  max-width: 480px;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.nl-field { display: flex; flex-direction: column; gap: 0.4rem; }
.nl-field-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g500); }
.nl-email-input {
  width: 100%; padding: 0.85rem 1rem; box-sizing: border-box; min-height: 44px;
  border: 1.5px solid var(--g200); border-radius: 6px;
  font: 400 0.9rem var(--hanken); outline: none;
  transition: border-color 0.15s;
}
.nl-email-input:focus { border-color: var(--coral); }
.nl-cards { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; }
.nl-card {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1.5px solid var(--g200); border-radius: 10px;
  padding: 0.85rem 1rem; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.nl-card:has(input:checked) {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 4%, var(--white));
}
.nl-card input[type="radio"] { display: none; }
.nl-card-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--g300); transition: border-color 0.12s, background 0.12s;
}
.nl-card:has(input:checked) .nl-card-dot { border-color: var(--coral); background: var(--coral); }
.nl-card-inner { flex: 1; min-width: 0; }
.nl-card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.15rem; }
.nl-card-name { font: 700 0.88rem var(--hanken); color: var(--black); }
.nl-card-cadence { font: 500 0.65rem var(--hanken); color: var(--g500); white-space: nowrap; }
.nl-card-desc { font: 400 0.78rem var(--hanken); color: var(--g600); line-height: 1.4; }
.nl-borough-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.5rem; }
.nl-boro-opt { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; cursor: pointer; }
.nl-error { font-size: 0.8rem; color: #c0392b; }
/* Matches the /newsletter hero button — the modal previously used a square
   black button, the only subscribe control on the site that wasn't a coral
   pill. */
.nl-submit-btn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0.85rem 1.5rem;
  background: var(--coral); color: var(--white);
  border: none; border-radius: 6px;
  font: 700 0.88rem var(--hanken);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.nl-submit-btn:hover { background: #c9320f; }
.nl-submit-btn:active { transform: scale(0.98); }
.nl-submit-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.nl-success {
  max-width: 480px; margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius);
  font-size: 0.88rem; color: #15803d; line-height: 1.5;
}

/* ─── TOPICS SECTION ─────────────────────────────────────── */
#topics-section {
  /* background: var(--g100); */
  margin: 0 -1.5rem;
  padding: 1.5rem 1.5rem 2rem;
  border: 1px solid #cecaca;
}
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 1rem;
}
.topic-block { display: flex; flex-direction: column; gap: 0.5rem; }
.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.85rem;
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: 20px;
  font-family: var(--hanken);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: flex-start;
}
.topic-pill:hover { opacity: 0.82; }
.topic-count {
  font-family: var(--hanken);
  font-size: 0.62rem;
  color: var(--g600);
}
.topic-headlines { display: flex; flex-direction: column; }
.topic-headline {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--g200);
}
.topic-headline:last-child { border-bottom: none; padding-bottom: 0; }
.topic-headline .card-title { font-size: 1rem; color: #363737; }

/* ─── BOROUGH BLOCKS (Latest) ────────────────────────────── */
.bor-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem 2.5rem;
}
.bor-block { display: flex; flex-direction: column; gap: 0; }
.bor-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--black);
  margin-bottom: 0.25rem;
}
.bor-block-name {
  font-family: var(--hanken);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bor-more {
  font-size: 0.62rem;
  color: var(--g600);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--hanken);
  text-decoration: underline;
}
.bor-more:hover { color: var(--black); }
.bor-headline {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--g200);
}
.bor-headline:last-child { border-bottom: none; }
.bor-headline .card-title { font-size: 1rem; color: #363737; }

/* ─── WEATHER STRIP (homepage) ───────────────────────────── */
#weather-strip { margin-bottom: 1rem; margin-top: 1rem; }
#weather-boroughs {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.25rem 0;
}
.weather-borough-item {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0 0.85rem 0 0;
  font: 400 0.72rem var(--hanken);
  white-space: nowrap;
}
.weather-borough-item + .weather-borough-item {
  border-left: 1px solid var(--g200);
  padding-left: 0.85rem;
}
.wbi-name { color: var(--black); }
.wbi-temp { color: var(--black); }
.wbi-forecast-link {
  font: 500 0.8rem var(--hanken); color: var(--coral);
  background: none; border: none; cursor: pointer; padding: 0 0 0 0.85rem;
  border-left: 1px solid var(--g200); white-space: nowrap;
}
.wbi-forecast-link:hover { color: var(--black); text-decoration: underline; }

.edition-link {
  font: 500 0.72rem var(--hanken); color: var(--coral);
  background: none; border: none; cursor: pointer; padding: 0;
  white-space: nowrap;
}
.edition-link:hover { color: var(--black); }

/* ─── WEATHER VIEW ───────────────────────────────────────── */
#weather-view { display: none; }
#weather-view.active {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.25rem; overflow-y: auto;
}

/* Hourly forecast strip */
.wx-hourly-wrap { margin-bottom: 1.25rem; }
.wx-hourly { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wx-hourly-inner {
  display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr));
  border: 1px solid var(--g200); min-width: 100%;
}
.wx-hour {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.5rem 0.15rem; border-right: 1px solid var(--g200); border-bottom: 1px solid var(--g200);
  min-width: 0;
}
.wx-hour:nth-child(6n)  { border-right: none; }
.wx-hour:nth-child(n+7) { border-bottom: none; }
.wx-hour.now { }
.wx-hour-time { font: 700 0.62rem var(--hanken); text-transform: uppercase; letter-spacing: 0.02em; color: var(--g500); }
.wx-hour.now .wx-hour-time { color: var(--black); }
/* OpenMoji weather icons — scales with each context's font-size */
.wx-icon { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.wx-hour-icon { font-size: 1.1rem; line-height: 1; }
.wx-hour-temp { font: 500 0.8rem var(--hanken); color: var(--black); }
.wx-rain-section { margin-top: 0.5rem; }
.wx-rain-section-label { font: 700 0.6rem var(--hanken); text-transform: uppercase; letter-spacing: 0.04em; color: var(--g500); margin-bottom: 0.3rem; }
.wx-rain-bars { display: flex; gap: 2px; }
.wx-rain-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wx-rain-pct { font: 600 0.72rem var(--hanken); color: #2471a3; margin-bottom: 3px; }
.wx-rain-bar-area { height: 32px; display: flex; align-items: flex-end; width: 80%; }
.wx-rain-bar { width: 100%; background: #5b9bd5; opacity: 0.65; border-radius: 2px 2px 0 0; min-height: 2px; }
.wx-rain-time { font: 400 0.62rem var(--hanken); color: var(--g600); margin-top: 3px; white-space: nowrap; }

/* Mobile feed weather card — 10-hour strip, 5 per row × 2 rows */
.fc-wx-strip .wx-hourly-inner { grid-template-columns: repeat(5, minmax(52px, 1fr)); }
.fc-wx-strip .wx-hour:nth-child(5n)   { border-right: none; }
.fc-wx-strip .wx-hour:nth-child(n+6)  { border-bottom: none; }
.fc-wx-strip .wx-hour-time { font-size: 0.65rem; }
.fc-wx-strip .wx-hour-icon { font-size: 1.3rem; }
.fc-wx-strip .wx-hour-temp { font-size: 0.95rem; }
.fc-wx-strip .wx-hour-rain { font-size: 0.65rem; }

/* Mini temperature color bar (sidebar + mobile feed card) */
.wx-mini-bar { display: grid; grid-template-columns: repeat(12, 1fr); width: 100%; margin-top: 0.6rem; border-radius: 3px; overflow: hidden; }
.wx-mini-cell { height: 7px; }

/* Borough cards */
.weather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.weather-card {
  padding: 0.85rem 1rem;
  border: 1px solid var(--g200);
  border-radius: 0;
}
.hl-icon { display:inline-block; width:1.1em; height:1.1em; vertical-align:-0.15em; margin-right:4px; flex-shrink:0; }
.wc-borough { font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.08em; color: var(--black); margin-bottom: 0.4rem; }
.wc-temp    { font: 400 1.6rem var(--hanken); color: var(--black); line-height: 1.1; }
.wc-feels   { font: 400 0.72rem var(--hanken); color: var(--g800); margin-top: 0.25rem; }
.wc-desc    { font: 400 0.72rem var(--hanken); color: var(--g800); margin-top: 0.1rem; }
.wc-hl      { font: 400 0.68rem var(--hanken); color: var(--g600); margin-top: 0.15rem; }
.wc-range-bar {
  display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem;
}
.wc-range-lo, .wc-range-hi {
  font: 400 0.65rem var(--hanken); color: var(--g600); white-space: nowrap;
}
.wc-range-track {
  flex: 1; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #64b5f6 0%, #ef5350 100%);
  position: relative;
}
.wc-range-cur {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--black); border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.wc-range-rain { font: 400 0.62rem var(--hanken); color: #2471a3; margin-left: 0.15rem; white-space: nowrap; }

.wx-zip-inline { display: flex; gap: 0.3rem; align-items: center; }
.wx-zip-corner { position: absolute; top: .8rem; left: 1.5rem; }
.wx-zip-inline-field {
  padding: 0.3rem 0.5rem; width: 6.5rem;
  border: 1px solid var(--g300); border-radius: 3px;
  font: 400 0.8rem var(--hanken); outline: none;
}
.wx-zip-inline-field:focus { border-color: var(--black); }
.wx-zip-inline-btn {
  padding: 0.3rem 0.65rem;
  font: 700 0.65rem var(--hanken); letter-spacing: 0.04em;
  background: var(--black); color: var(--white);
  border: none; cursor: pointer;
}
.wx-zip-inline-btn:hover { background: var(--g800); }

.zip-result { margin-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--g200); }
.zip-location-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.zip-location { font: 700 0.72rem var(--hanken); text-transform: uppercase; letter-spacing: 0.08em; color: var(--black); }
.zip-clear-btn {
  font: 700 0.65rem var(--hanken); letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--g200); padding: 0.25rem 0.65rem;
  cursor: pointer; color: var(--g600); border-radius: 0;
}
.zip-clear-btn:hover { border-color: var(--black); color: var(--black); }
.zip-current { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.zip-current-main { display: flex; align-items: center; gap: 0.5rem; }
.zip-icon  { font-size: 2rem; line-height: 1; }
.zip-temp  { font: 400 2.5rem var(--hanken); color: var(--black); line-height: 1; }
.zip-current-detail { padding-top: 0.2rem; }
.zip-desc  { font: 700 0.75rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em; color: var(--black); margin-bottom: 0.2rem; }
.zip-feels { font: 400 0.78rem var(--hanken); color: var(--g800); margin-bottom: 0.2rem; }
.zip-meta-row { font: 400 0.72rem var(--hanken); color: var(--g600); }
.zip-daily { display: flex; flex-direction: column; gap: 0; margin-top: 0.25rem; }
.zip-day { display: flex; align-items: center; justify-content: space-between; padding: 0.52rem 0; border-bottom: 1px solid var(--g200); min-width: 0; }
.zip-day:last-child { border-bottom: none; }
.zd-left  { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.zd-name  { font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em; color: var(--black); width: 2.5rem; flex-shrink: 0; }
.zd-icon  { font-size: 1.1rem; flex-shrink: 0; }
.zd-temps { font-size: 0.8rem; }
.zd-hi    { font-weight: 700; color: var(--black); }
.zd-lo    { color: var(--g500); font-weight: 400; }
.zd-right { display: flex; gap: 0.45rem; align-items: center; font-size: 0.7rem; color: var(--g600); flex-shrink: 0; }
.zd-rain  { color: #2471a3; }

/* ─── AGENDA VIEW ────────────────────────────────────────── */
#agenda-view { display: none; }
#agenda-view.active {
  display: block;
  max-width: calc(540px + 2.25rem + 300px);
  margin-left: auto; margin-right: auto;
  padding: 1.25rem 0 0;
}
@media (max-width: 800px) { #agenda-view.active { padding: 0.5rem 0 0; } }
#agenda-content {
  background: var(--white);
  border: 1px solid var(--g200);
  padding: 1.25rem 1.25rem 2rem;
}
@media (max-width: 800px) { #agenda-content { padding: 1rem 0.75rem 2rem; } }
#agenda-more-wrap { padding: 1.5rem 0; text-align: center; }

/* ─── COMMUTE VIEW ────────────────────────────────────────── */
#transit-view { display: none; }
#transit-view.active { display: block; max-width: calc(540px + 2.25rem + 300px); margin-left: auto; margin-right: auto; }

.transit-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin: 1rem 0 0.5rem;
}
.transit-line-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--g200);
}
.transit-line-name {
  font: 700 0.65rem/1 var(--sans);
  padding: 2px 4px;
  white-space: nowrap;
  text-align: center;
}
.transit-line-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.transit-line-dot.ok       { background: #2d8a4e; }
.transit-line-dot.delayed  { background: #e8901a; }
.transit-line-dot.suspended{ background: #e83d1a; }
.transit-line-dot.modified { background: var(--g400); }

.transit-alert {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--g200);
}
.transit-alert-routes {
  display: flex; flex-wrap: wrap; gap: 0.2rem; margin-bottom: 0.3rem;
}
.mta-bullet {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font: 700 0.75rem/1 var(--sans);
}
.transit-alert-effect {
  font: 700 0.82rem var(--hanken); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.transit-alert-effect.delayed   { color: #e8901a; }
.transit-alert-effect.suspended { color: #e83d1a; }
.transit-alert-effect.modified  { color: var(--g500); }
.transit-alert-header {
  font: 400 1rem/1.5 var(--hanken);
  color: var(--black);
}
#transit-current-list,
#transit-lirr-list,
#transit-mnr-list,
#transit-bus-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
@media (max-width: 600px) {
  #transit-current-list,
  #transit-lirr-list,
  #transit-mnr-list,
  #transit-bus-list { grid-template-columns: 1fr; }
}
.transit-meta {
  font: 400 0.8rem var(--hanken); color: var(--g600); margin-top: 1.5rem;
}

/* ─── TRANSIT FEED CARD ──────────────────────────────────── */
.fc.fc-transit {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem;
}
@media (min-width: 801px) { .fc.fc-transit { display: none; } }
.fc-transit-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.fc-transit-label {
  display: inline-block;
  background: none; color: var(--g600);
  font: 700 0.8rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0;
  border: none; cursor: pointer;
}
.fc-transit-label:hover { text-decoration: underline; }

/* ─── GREATER NEW YORK REGIONAL FEED CARD ───────────────────── */
.fc.fc-greater-ny {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem;
}
.fc-gny-header {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem;
}
.fc-gny-label {
  font: 700 0.8rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--g600);
}
.fc-gny-list { display: flex; flex-direction: column; }
.fc-gny-item { padding: 0.45rem 0; border-bottom: 1px solid var(--g100); }
.fc-gny-item:last-child { border-bottom: none; }
.fc-gny-headline {
  display: block; font: 500 1rem var(--hanken); color: var(--black);
  text-decoration: none; line-height: 1.35;
}
.fc-gny-headline:hover { text-decoration: underline; }
.fc-gny-meta {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  margin-top: 0.15rem; font-size: 0.75rem;
}
.fc-gny-loc { color: var(--g500); }

/* Sidebar transit card (desktop only) */
.sidebar-tc {
  border: 1px solid var(--g200); background: var(--white);
  padding: 0.65rem 1rem; margin-bottom: 0.75rem;
}
.sidebar-tc-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.sidebar-tc-label {
  display: inline-block;
  background: var(--white); color: var(--black);
  font: 700 0.65rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 0;
  border: none; cursor: pointer;
}
.sidebar-tc-label:hover { text-decoration: underline; }
.sidebar-tc-map-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font: 500 .65rem var(--sans); color: var(--g600); white-space: nowrap;
}
.sidebar-tc-map-btn:hover { color: var(--black); text-decoration: underline; }
.sidebar-tc-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.sidebar-tc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.sidebar-tc-group {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 7px; border-radius: 3px;
  font: 700 0.7rem/1 var(--sans); white-space: nowrap;
}
.sidebar-tc-status {
  font: 700 0.72rem var(--sans); text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.sidebar-tc-status.delayed { color: #e8901a; }
.sidebar-tc-status.suspended { color: #e83d1a; }
.sidebar-tc-status.modified { color: var(--g500); }
.fc-transit-status { display: flex; flex-direction: column; gap: 0.35rem; }
.transit-alert-row {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  font: 400 0.88rem/1.35 var(--sans); color: var(--black);
}
.transit-alert-text { flex: 1; min-width: 0; }
.mta-bullet-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  font: 700 0.68rem/1 var(--sans); flex-shrink: 0;
}
.transit-good { font: 400 0.95rem var(--hanken); color: #2d8a4e; }
.transit-route-tag {
  display: inline-block;
  font: 700 0.7rem/1 var(--sans);
  padding: 2px 7px; margin-right: 3px; margin-bottom: 2px;
  background: var(--g100); border: 1px solid var(--g200); color: var(--black);
}
.transit-alert-more {
  font: 400 0.82rem var(--sans); color: var(--g600);
  padding: 0.4rem 0; margin: 0;
}
.transit-alert-more-btn {
  display: block; background: none; border: none; padding: 0.4rem 0; margin: 0;
  font: 400 0.82rem var(--sans); color: var(--g600); cursor: pointer; text-align: left;
  grid-column: 1 / -1;
}
.transit-alert-more-btn:hover { color: var(--black); text-decoration: underline; }

/* ─── TRANSIT MODE PILLS ─────────────────────────────────── */
.transit-mode-pills {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.75rem 0 0.5rem;
}
.transit-mode-pill {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0.45rem 0.85rem; border: 1.5px solid var(--g300);
  background: none; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  text-align: left;
}
.transit-mode-pill:hover { border-color: var(--black); background: var(--g100); }
.transit-mode-pill.active { background: var(--black); border-color: var(--black); }
.transit-pill-name {
  font: 700 0.8rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); line-height: 1.2;
}
.transit-mode-pill:hover .transit-pill-name { color: var(--black); }
.transit-mode-pill.active .transit-pill-name { color: var(--white); }
.transit-pill-summary {
  font: 600 0.76rem var(--hanken); letter-spacing: 0.01em;
  color: var(--coral); margin-top: 0.2rem; line-height: 1.2;
}
.transit-pill-summary.ok { color: #2d8a4e; }
.transit-mode-pill.active .transit-pill-summary { color: rgba(255,255,255,0.8); }

/* ─── TRANSIT DETAIL GRID ────────────────────────────────── */
.transit-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--g200);
  border: 1px solid var(--g200);
  margin: 0.5rem 0 1.5rem;
}
@media (max-width: 600px) {
  .transit-detail-grid { grid-template-columns: 1fr; }
}
.transit-detail-card {
  background: var(--white);
  padding: 0.75rem 1rem;
}
.transit-detail-routes {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 0.35rem;
}
.transit-detail-effect {
  font: 700 0.75rem var(--hanken); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.transit-detail-effect.suspended { color: #e83d1a; }
.transit-detail-effect.delayed   { color: #e8901a; }
.transit-detail-effect.modified  { color: var(--g500); }
.transit-detail-header {
  font: 400 0.95rem/1.5 var(--hanken); color: var(--black);
}

/* ─── TRANSIT TABS ───────────────────────────────────────── */
.transit-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--g200);
  margin-bottom: 0.75rem;
}
.transit-tab {
  padding: 0.55rem 1.1rem; border: none; background: none; cursor: pointer;
  font: 700 0.72rem var(--hanken); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--g500); border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.12s, border-color 0.12s;
}
.transit-tab:hover { color: var(--black); }
.transit-tab.active { color: var(--black); border-bottom-color: var(--black); }

/* ─── CITI BIKE FEED CARD ────────────────────────────────── */
.cb-avail-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #1a7a3f; color: #fff;
  font: 700 0.82rem var(--hanken);
  min-width: 2rem; height: 1.6rem; padding: 0 0.4rem;
  border-radius: 999px;
}

/* ─── TRAFFIC FEED CARD ──────────────────────────────────── */
.fc.fc-traffic {
  border-bottom: 1px solid var(--g200); padding: 1.25rem 1rem;
}
@media (min-width: 801px) { .fc.fc-traffic { display: none; } }
.fc-traffic-label {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 700 0.8rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--g600);
}
.fc-traffic-label::after { content: ' →'; font-weight: 400; }
.fc-traffic-label:hover { text-decoration: underline; }
.tf-feed-row { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.5rem 0 0.2rem; }
.tf-feed-pct { font: 600 2rem var(--hanken); line-height: 1; }
.tf-feed-pct-label { font-size: 0.8rem; color: var(--g600); }
.tf-feed-status { font-size: 0.75rem; color: var(--g500); margin-bottom: 0.5rem; }
.tf-feed-cta { display: block; margin-top: 0.5rem; font: 700 0.8rem var(--hanken); text-transform: uppercase; letter-spacing: 0.06em; color: var(--black); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }

/* ─── CITI BIKE FEED CARD ────────────────────────────────── */
.fc.fc-citibike {
  border-bottom: 1px solid var(--g200); padding: 1.25rem 1rem;
}
.fc-citibike-label {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 700 0.8rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--g600);
}
.fc-citibike-label:hover { text-decoration: underline; }

/* Citi Bike card — location search form */
.cb-location-form {
  display: flex; gap: 0.3rem; margin: 0.75rem 0 0;
}
.cb-zip-err {
  display: block; margin-top: 0.25rem;
  font-size: 0.7rem; color: #c0392b;
  min-height: 0.9rem;
}
.cb-location-input {
  flex: 1; min-width: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--g300); border-radius: 3px;
  font: 400 0.78rem var(--hanken); outline: none; color: var(--black);
  background: var(--white);
}
.cb-location-input:focus { border-color: var(--black); }
.cb-location-input::placeholder { color: var(--g400); }
.cb-location-btn {
  padding: 0.3rem 0.65rem; flex-shrink: 0;
  font: 700 0.65rem var(--hanken); letter-spacing: 0.04em;
  background: var(--black); color: var(--white);
  border: none; cursor: pointer; border-radius: 3px;
}
.cb-location-btn:hover { background: var(--g800); }

/* ─── CITI BIKE VIEW ─────────────────────────────────────── */
.cb-summary-bar { font-size: 0.85rem; color: var(--black); margin-bottom: 0.25rem; }
.cb-summary-bar strong { color: var(--black); }
.cb-sum-sep { color: var(--g500); margin: 0 0.15rem; }
.cb-station-hd {
  font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--g500); margin: 0.75rem 0 0.35rem;
}
.cb-station-table { width: 100%; border-collapse: collapse; }
.cb-station-table tr { border-bottom: 1px solid var(--g200); }
.cb-station-table tr:last-child { border-bottom: none; }
.cb-sth-name { font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.06em; color: var(--g500); padding-bottom: 0.3rem; }
.cb-sth-num { font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.06em; color: var(--g500); text-align: right; padding-bottom: 0.3rem; width: 2.5rem; }
.cb-std-name { font-size: 0.85rem; color: var(--black); padding: 0.35rem 0; }
.cb-std-num { font: 600 0.85rem var(--hanken); text-align: right; padding: 0.35rem 0; color: var(--black); }
.cb-ebike { color: #1a6bb5; }
.cb-zero { color: var(--g600); }
.cb-station-note { font-size: 0.68rem; color: var(--g600); margin-top: 0.5rem; line-height: 1.4; }
.tv-loading { font-size: 0.82rem; color: var(--g600); padding: 1rem 0; }
.cb-totals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--g200); border: 1px solid var(--g200); margin: 0.75rem 0;
}
@media (max-width: 480px) { .cb-totals { grid-template-columns: repeat(2, 1fr); } }
.cb-total-stat {
  background: var(--white); padding: 0.75rem 0.5rem; text-align: center;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.cb-total-num { font: 600 1.4rem var(--hanken); color: var(--black); line-height: 1; }
.cb-total-label { font: 400 0.68rem var(--hanken); color: var(--g500); text-transform: uppercase; letter-spacing: 0.05em; }
.cb-regions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
.cb-region-pill {
  padding: 0.3rem 0.75rem; border: 1.5px solid var(--g300); background: none;
  font: 600 0.75rem var(--hanken); cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--g600); transition: all 0.1s;
}
.cb-region-pill:hover { border-color: var(--black); color: var(--black); }
.cb-region-pill.active { background: var(--black); border-color: var(--black); color: var(--white); }
.cb-region-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--g200); border: 1px solid var(--g200);
}
@media (max-width: 480px) { .cb-region-grid { grid-template-columns: 1fr; } }
.cb-region-card {
  background: var(--white); padding: 0.75rem 1rem; cursor: pointer;
  transition: background 0.1s;
}
.cb-region-card:hover { background: var(--g100); }
.cb-region-name { font: 700 0.82rem var(--hanken); color: var(--black); margin-bottom: 0.25rem; }
.cb-region-row { font-size: 0.82rem; color: var(--black); margin-bottom: 0.15rem; }
.cb-region-sub { font-size: 0.7rem; color: var(--g500); }

/* ─── TRAFFIC VIEW ───────────────────────────────────────── */
.tf-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--g200); border: 1px solid var(--g200); margin: 0.75rem 0;
}
@media (max-width: 480px) { .tf-stats { grid-template-columns: 1fr; } }
.tf-stat {
  background: var(--white); padding: 0.75rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.1rem; text-align: center;
}
.tf-num { font: 600 1.6rem var(--hanken); color: var(--black); line-height: 1; }
.tf-label { font: 400 0.68rem var(--hanken); color: var(--g500); text-transform: uppercase; letter-spacing: 0.05em; }
.tf-sub { font-size: 0.68rem; color: var(--g600); }
.tf-worst-hd {
  font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--g500); margin: 1rem 0 0.35rem;
}
.tf-table { width: 100%; border-collapse: collapse; }
.tf-table tr { border-bottom: 1px solid var(--g200); }
.tf-table tr:last-child { border-bottom: none; }
.tf-road { font-size: 0.85rem; color: var(--black); padding: 0.4rem 0; }
.tf-boro { font-size: 0.72rem; color: var(--g600); margin-left: 0.3rem; }
.tf-speed { font: 600 0.85rem var(--hanken); text-align: right; padding: 0.4rem 0; white-space: nowrap; }

/* ─── AGENDA FILTER BAR ───────────────────────────────────── */
/* ─── AGENDA ─────────────────────────────────────────────── */

.agenda-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.1rem;
}
#agenda-filter-card {
  background: #eeeee279;
  border: 1px solid var(--g200);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
#agenda-filter-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
#agenda-filter-top-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
#agenda-event-count {
  font: 400 2rem 'Oi', serif; color: var(--black);
  line-height: 1.05;
}
#agenda-count-saved {
  font: 600 0.82rem var(--hanken); color: #e83d1a; letter-spacing: 0;
  margin-top: 0.1rem;
}
.agenda-count-none {
  color: var(--g400);
  font-weight: 500;
}
#agenda-filter-summary {
  font: 500 0.78rem var(--hanken); color: var(--g500);
}
/* Saved tab — top-right of filter card header */
#agenda-saved-tab {
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid #e83d1a;
  color: #e83d1a;
  border-radius: 999px;
  font: 700 0.76rem var(--hanken);
  padding: .32rem .85rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
#agenda-saved-tab:hover { background: color-mix(in srgb, #e83d1a 10%, transparent); }
#agenda-saved-tab.active { background: #e83d1a; color: var(--white); }
#agenda-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0;
  margin-bottom: 0;
}
.agenda-filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.agenda-filter-label {
  font: 700 0.58rem var(--hanken);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g400);
}
#agenda-filter-row .ys-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* Square time buttons */
.ys-square { border-radius: 6px !important; }
/* Agenda toggle overrides: white inactive, coral active */
#agenda-filter-card .ys-toggle {
  background: var(--white);
  border-color: var(--g300);
  color: var(--g800);
}
#agenda-filter-card .ys-toggle.active {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--white);
}
#agenda-filter-card .ys-toggle:hover:not(.active) {
  background: var(--white);
  border-color: var(--black);
  color: var(--black);
}
.agenda-more-filters-btn {
  font: 600 .76rem var(--hanken); padding: .32rem .75rem;
  border: 1.5px solid var(--g300); border-radius: 20px;
  background: transparent; color: var(--g500);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.agenda-more-filters-btn:hover { border-color: var(--black); color: var(--black); }
.agenda-more-filters-btn.has-filters { background: var(--coral); color: var(--white); border-color: var(--coral); }
.agenda-reset-btn {
  font: 500 0.72rem var(--hanken); color: var(--g500);
  background: none; border: none; cursor: pointer; padding: 0.2rem 0;
  text-decoration: underline; text-decoration-color: var(--g300);
  text-underline-offset: 2px;
  transition: color 0.12s;
}
.agenda-reset-btn:hover { color: var(--black); }

.agenda-attribution {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--g200);
  font: 400 0.72rem var(--hanken);
  color: var(--g500);
  text-align: center;
}
.agenda-attribution a {
  color: var(--g500);
  text-decoration: underline;
  text-decoration-color: var(--g300);
}
.agenda-attribution a:hover { color: var(--black); }
.cat-pill {
  padding: 0.3rem 0.9rem;
  font: 700 0.68rem var(--hanken);
  letter-spacing: 0.04em;
  border: 1.5px solid var(--g300);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-pill:hover { border-color: var(--black); }
.cat-pill.active { background: var(--black); color: var(--white); border-color: var(--black); }

.boro-pill {
  padding: 0.25rem 0.75rem;
  font: 700 0.65rem var(--hanken);
  letter-spacing: 0.04em;
  border: 1px solid var(--g200);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  opacity: 0.5;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.boro-pill:hover { border-color: var(--coral); color: var(--coral); }
.boro-pill.active { background: var(--coral); color: var(--white); border-color: var(--coral); }


.agenda-featured-strip {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.agenda-featured-strip::-webkit-scrollbar { display: none; }
.agenda-feat-wrap {
  flex-shrink: 0;
  width: 240px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.agenda-feat-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--g200);
  overflow: hidden; width: 100%;
  text-decoration: none; color: inherit;
  flex: 1;
}
.agenda-feat-card:hover .agenda-feat-title { text-decoration: underline; }
.agenda-feat-img {
  height: 140px;
  background-size: cover; background-position: top center;
  background-color: var(--g100);
}
.agenda-feat-img--empty { background-color: var(--g100); }
.agenda-feat-body { padding: 0.75rem; }
.agenda-feat-title {
  font: 700 1rem/1.4 var(--hanken);
  color: var(--black);
  margin-bottom: 0.35rem;
}
.agenda-feat-meta { font: 400 0.8rem var(--hanken); color: var(--g600); }

#agenda-list,
#events-preview-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
@media (max-width: 600px) {
  #agenda-list, #events-preview-content { grid-template-columns: 1fr; }
}

.agenda-date-hd {
  grid-column: 1 / -1;
  font: 700 0.8rem var(--hanken);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g500);
  padding: 1.25rem 0 0.5rem;
  border-top: 2px solid var(--black);
  margin-top: 0.5rem;
}
.agenda-date-hd:first-child { border-top: none; margin-top: 0; }

.agenda-venue-hd {
  grid-column: 1 / -1;
  font: 700 0.8rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--g500);
  padding: 0.75rem 0 0.25rem;
  border-top: 1px dashed var(--g300);
  margin-top: 0.25rem;
}
.agenda-item-wrap {
  display: flex; align-items: flex-start;
  border-bottom: 1px solid var(--g200);
}
.agenda-item-share { align-self: center; flex-shrink: 0; margin-left: 0.25rem; }
.agenda-item-time-col {
  flex-shrink: 0;
  width: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0 0.5rem;
  gap: 0.3rem;
}
.agenda-item {
  flex: 1; padding: 0.6rem 0;
  text-decoration: none; color: inherit;
}
.agenda-item:hover .agenda-item-title { text-decoration: underline; }
.agenda-item-time {
  font: 400 0.8rem var(--hanken);
  color: var(--g500);
  text-align: center;
}
.agenda-item-title { font: 700 1rem/1.45 var(--hanken); color: var(--black); margin-bottom: 0.2rem; }
.agenda-item-meta { font: 400 0.8rem/1.4 var(--hanken); color: var(--g600); }
.agenda-item-src { font: 400 0.72rem var(--hanken); color: var(--g500); margin-top: 0.2rem; }
.agenda-loading { padding: 2rem 0; text-align: center; }

.free-badge {
  display: inline-block;
  font: 700 0.65rem var(--hanken);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e8f5e9; color: #2e7d32;
  padding: 0.1rem 0.4rem; border-radius: 3px;
  margin-right: 0.25rem;
}

/* Borough quick buttons — slightly narrower than date squares */
#agenda-boros-quick .ys-toggle { min-width: 2.1rem; padding: 0.28rem 0.4rem; }


/* Newsletter CTA banner */
#agenda-nl-cta { margin-bottom: 0.75rem; }
.agenda-nl-cta-card {
  display: flex; align-items: center; gap: 0.55rem;
  background: color-mix(in srgb, var(--coral) 5%, var(--white));
  border-left: 3px solid var(--coral);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font: 500 0.78rem var(--hanken);
  color: var(--black);
}
.agenda-nl-cta-icon { font-size: 1rem; flex-shrink: 0; }
.agenda-nl-cta-text { flex: 1; min-width: 0; }
.agenda-nl-cta-link { color: var(--coral); font-weight: 700; text-decoration: none; }
.agenda-nl-cta-link:hover { text-decoration: underline; }
.agenda-nl-cta-dismiss {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--g400); line-height: 1;
  padding: 0 0.1rem; flex-shrink: 0;
}
.agenda-nl-cta-dismiss:hover { color: var(--black); }

/* Happening Now badge */
.now-badge {
  display: inline-block;
  font: 700 0.6rem var(--hanken);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--coral); color: var(--white);
  padding: 0.1rem 0.38rem; border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* For You strip */
#agenda-foryou { margin-bottom: 0.75rem; }
.foryou-hd {
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.foryou-label {
  font: 700 0.68rem var(--hanken);
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--coral);
}
.foryou-prefs {
  font: 500 0.68rem var(--hanken);
  color: var(--g500);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foryou-edit {
  font: 500 0.65rem var(--hanken);
  color: var(--g500); background: none; border: none;
  text-decoration: underline; cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.foryou-edit:hover { color: var(--black); }


/* ─── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  #masthead { padding: 0.875rem 1rem 0; }
  #masthead.scrolled { padding-top: 0.3rem; }
  #masthead.scrolled .wordmark-name { font-size: 1.4rem; }
  main { padding: 0.5rem; }
  .mast-top { grid-template-columns: 1fr auto 1fr; gap: 0.5rem; }
  #weather-widget, #date-widget { display: none; }
  .wordmark-name { font-size: 1.85rem; }
  .mast-tagline { font: 500 0.875rem var(--hanken); color: var(--black); }
  #loc-name { font-size: 1.75rem; }
  #location-banner { padding: 0.875rem 1rem 0.75rem; }
  .topics-grid, .bor-blocks { grid-template-columns: 1fr; }
  #topics-section { margin: 0 -1rem; padding: 1rem 1rem 1.5rem; }
  .card-grid, .card-grid.has-lead, #search-list, .nbhd-cells {
    grid-template-columns: 1fr;
  }
  .card-grid.has-lead .card:first-child { grid-row: auto; }
}

/* ─── HOME FEED LAYOUT ───────────────────────────────────── */
#feed-dateline { margin: 0; padding: 0; }

.dateline-card {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  padding: 0.95rem 1.15rem;
  margin: 0.75rem 1rem 0;
}
.dateline-card-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.dateline-left {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.dateline-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem; }
.dateline-brand {
  font: 800 0.92rem var(--hanken);
  color: var(--coral);
}
.dateline-sep { color: var(--g400); font-size: 0.88rem; margin: 0 0.1rem; }
.dateline-date {
  font: 600 0.88rem var(--hanken);
  color: var(--g600);
}
.dateline-tagline {
  font: 400 0.82rem var(--hanken);
  color: var(--g500);
}
.dateline-archive {
  font: 600 0.78rem var(--hanken);
  color: var(--g500);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.12rem;
  transition: color 0.15s;
}
.dateline-archive:hover { color: var(--coral); }

.dateline-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.5rem;
}
.dateline-ed-left { display: flex; align-items: center; }
.dateline-ed-name {
  font: 600 0.78rem var(--hanken);
  color: var(--black);
}
.dateline-ed-sep { font-size: 0.78rem; color: var(--g400); margin: 0 0.35rem; }
.dateline-ed-date {
  font: 400 0.78rem var(--hanken);
  color: var(--g500);
}
.dateline-sub-btn {
  font: 700 0.75rem var(--hanken);
  background: var(--coral);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.dateline-sub-btn:hover { opacity: 0.85; }

/* Edition dropdown */
.ed-drop-wrap { position: relative; display: inline-flex; align-items: center; }
.ed-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font: 600 0.78rem var(--hanken);
  color: var(--black);
  padding: 0.15rem 0.3rem;
  border-radius: 5px;
  line-height: 1;
  transition: background 0.12s;
}
.ed-drop-btn:hover { background: var(--g100); }
.ed-drop-chevron { transition: transform 0.18s; flex-shrink: 0; }
.ed-drop-btn[aria-expanded="true"] .ed-drop-chevron { transform: rotate(180deg); }
.ed-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 195px;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 0.35rem;
  z-index: 400;
}
.ed-drop-menu.open { display: block; }
.ed-drop-item { display: block; padding: 0.5rem 0.7rem; border-radius: 7px; }
.ed-drop-label { display: block; font: 600 0.82rem var(--hanken); color: var(--black); }
.ed-drop-sub { display: block; font: 400 0.72rem var(--hanken); color: var(--g500); margin-top: 0.1rem; }
.ed-drop-active .ed-drop-label { color: var(--coral); }
.ed-drop-unavail .ed-drop-label { color: var(--g300); }
.ed-drop-unavail .ed-drop-sub { color: var(--g300); }
.ed-drop-sep { height: 1px; background: var(--g100); margin: 0.3rem 0.35rem; }
.ed-drop-nnc { cursor: pointer; }
.ed-drop-nnc .ed-drop-label { color: var(--black); }
.ed-drop-nnc:hover { background: var(--g100); }

/* Classified ads render as fc-b news items; no extra styles needed */

#home-layout {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 1.25rem;
}
#weather-sidebar { display: none; }
#home-feed { min-width: 0; }
#feed-sentinel { height: 1px; }

@media (max-width: 800px) {
  #home-layout { padding-top: 0.5rem; }
  .fc-c { padding: 1.25rem 1rem; }
}

/* ─── DESKTOP NAV ────────────────────────────────────────── */
#desktop-nav { display: none; }

@media (min-width: 800px) {
  /* Masthead: hide hamburger, center wordmark */
  .mast-left, .mast-right { display: none; }
  .mast-top { display: block; text-align: center; }

  /* Desktop nav bar */
  #desktop-nav {
    display: flex;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 1.5rem 0.5rem;
    border-top: 1px solid var(--g100);
    margin-top: 0.4rem;
  }
  .dnav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    padding: 0.5rem 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    color: var(--g500);
    transition: background 0.15s, color 0.12s;
    white-space: nowrap;
  }
  .dnav-btn:hover { background: var(--g100); color: var(--black); }
  .dnav-btn span { font: 500 0.65rem var(--hanken); }
  .dnav-btn.active { color: var(--coral); }

  /* Feed + sidebar grid */
  #home-layout {
    max-width: 1060px;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  /* Dateline occupies row 1, feed column only */
  #feed-dateline { grid-column: 1; grid-row: 1; }
  /* Feed and sidebar both start at row 2, so NNC card aligns with first section header */
  #home-feed { grid-column: 1; grid-row: 2; }
  #weather-sidebar {
    display: block;
    grid-column: 2;
    grid-row: 2;
  }
  #feed-now-nyc-card { display: none; }
}

/* ─── MID-SIZE (800–1079px): match mobile logo/tagline ────── */
@media (min-width: 800px) and (max-width: 1079px) {
  .wordmark-name { font-size: 1.85rem; }
  .mast-tagline { font: 500 0.875rem var(--hanken); color: var(--black); }
}

/* ─── VERTICAL SIDEBAR NAV (≥1080px) ─────────────────────── */
#vertical-nav { display: none; }

@media (min-width: 1080px) {
  body { padding-left: 200px; }

  #vertical-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
    height: 100vh;
    background: var(--white);
    border-right: 1px solid var(--g100);
    z-index: 150;
    overflow-y: auto;
    padding: 1.5rem 0;
    box-sizing: border-box;
  }

  .vnav-brand {
    padding: 0.25rem 1.25rem 1rem;
    font: 400 1.3rem 'Oi', serif;
    color: var(--coral);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
  }

  .vnav-sep {
    height: 1px;
    background: var(--g100);
    margin: 0 1rem 0.5rem;
  }

  .vnav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: 500 0.875rem var(--hanken);
    color: var(--g600);
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    box-sizing: border-box;
  }
  .vnav-btn:hover { background: var(--g100); color: var(--black); }
  .vnav-btn.active { color: var(--coral); }
  .vnav-btn svg { flex-shrink: 0; }
  .vnav-spacer { flex: 1; min-height: 1rem; }

  /* Hide the horizontal desktop nav at wide desktop */
  #desktop-nav { display: none; }

  /* Masthead: logo already in sidebar — hide wordmark, elevate tagline */
  .wordmark { display: none; }
  .mast-tagline {
    font: 700 1.05rem var(--hanken);
    color: var(--black);
    margin-bottom: 0.75rem;
    max-height: none;
  }
  /* Keep tagline visible when scrolled (no logo to compact toward) */
  #masthead.scrolled .mast-tagline { max-height: none; opacity: 1; margin-bottom: 0.5rem; }
  #masthead { padding-top: 1rem; }
}

/* ─── FEED FILTER PILLS ──────────────────────────────────── */
.feed-pill {
  background: var(--white);
  border: 1.5px solid var(--coral);
  border-radius: 999px;
  font: 600 0.7rem var(--hanken);
  color: var(--coral);
  padding: 0.28rem 0.8rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.feed-pill:hover { background: color-mix(in srgb, var(--coral) 8%, var(--white)); }
.feed-pill.active { background: var(--coral); border-color: var(--coral); color: var(--white); }
.pill-count { font-size: 1em; margin-left: 0.2rem; }
.feed-pill.active .pill-count { color: rgba(255,255,255,0.85); }

/* ─── FEED CARDS ─────────────────────────────────────────── */
.fc {
  border-radius: 0;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  position: relative;
}
/* Quick-access shortcut circles above the feed */

/* Article cards: no card box, just a thin divider */
.fc-a, .fc-b, .fc-f, .fc-thread {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g200);
  padding: 0.9rem 1rem;
  margin-bottom: 0;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.15s;
}
.fc-a:hover, .fc-b:hover, .fc-f:hover, .fc-thread:hover {
  background: var(--g100);
}
.fc-icon-col {
  flex-shrink: 0;
  width: 28px;
  padding-top: 0.1rem;
}
.fc-topic-icon { display: block; opacity: 0.75; }
.fc-content-col { flex: 1; min-width: 0; }

/* Now in NYC card — contextual daily briefing */
.fc-now-nyc {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem 1rem;
  display: flex; gap: 0.65rem; align-items: flex-start;
}
/* Data cards: same icon-col + content-col flex layout as article cards */
.fc-weather, .fc-transit, .fc-traffic, .fc-aqi, .fc-uvi,
.fc-citibike, .fc-civic, .fc-civic-week, .fc-pools,
.fc-markets, .fc-cooling, .fc-top-events, .fc-brief {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.fc.fc-brief { border-bottom: 1px solid var(--g200); padding: 1.25rem 1rem; }
.nnc-title {
  display: block;
  font: 700 1rem/1.4 var(--hanken);
  color: #363737; text-decoration: none;
  margin-bottom: 0.6rem;
}
.nnc-title:hover { text-decoration: underline; }
.nnc-body {
  font: 400 1rem/1.6 var(--hanken);
  color: #363737;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}
.nnc-link { color: inherit; text-decoration: none; }
.nnc-link:hover { text-decoration: underline; }
.nnc-alert-link { font-weight: 700; color: #c0392b; }
.nnc-warn-link  { color: #713f12; }

/* Card A — In the News (no box — see .fc-a rule above) */
/* Card Thread — Trending (no box — see .fc-thread rule above) */
/* Card B — Latest (no box — see .fc-b rule above) */

/* Card E — Promo */
.fc-e { border-bottom: 1px solid var(--g200); padding: 2.75rem 1.5rem; }
.fc-e-img {
  display: block;
  width: calc(100% + 3rem);
  margin: -2.75rem -1.5rem 1.25rem;
  height: 200px;
  object-fit: cover;
}
.fc-e-game-wrap {
  position: relative;
  width: calc(100% + 3rem);
  margin: -2.75rem -1.5rem 1.25rem;
  aspect-ratio: 1 / 1;
}
.fc-e-game {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  border: none;
}
@media (max-width: 800px) {
  .fc-e-img { width: calc(100% + 2.5rem); margin: -1.5rem -1.25rem 1rem; }
  .fc-e-game-wrap { width: calc(100% + 2.5rem); margin: -1.5rem -1.25rem 1rem; aspect-ratio: 1 / 1; }
}

/* ── Dedicated game card ───────────────────────────────────────── */
.fc-game-wrap {
  margin-bottom: 1.75rem;
}
.fc-game-label {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--black); margin-bottom: 0.5rem;
}
.fc-game-cta {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 800 0.56rem var(--hanken); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral); text-decoration: none;
}
.fc-game-cta:hover { text-decoration: underline; }
.fc-game {
  background: #0c0c1a;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  touch-action: none;
}
.fc-game-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1; /* horizontal promo banner on desktop; mobile overrides below */
}
@media (max-width: 800px) {
  .fc-game-frame { aspect-ratio: 1 / 1; }
}
.fc-game-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
  display: block;
}
.fc-game-attract {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; display: block;
  pointer-events: none;
}
.fc-game-gate {
  position: absolute;
  inset: 0;
  background: rgba(12,12,26,0.62);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.5rem;
}
.fc-game-gate-name {
  font: 400 2.5rem 'Oi', serif;
  color: #fff;
  line-height: 1;
}
.fc-game-gate-q { display: none; }
.fc-game-gate-btns { display: flex; gap: 0.65rem; align-items: center; }
.fc-game-gate-yes {
  background: var(--coral);
  color: #fff;
  border: none;
  padding: 0.45rem 1.1rem;
  font: 700 0.72rem var(--hanken);
  cursor: pointer;
  border-radius: 3px;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
.fc-game-gate-yes:hover { opacity: 0.85; }
.fc-game-gate-no {
  background: none;
  border: none;
  color: #fff;
  font: 400 0.72rem var(--hanken);
  cursor: pointer;
  padding: 0.45rem 0.25rem;
  transition: opacity 0.15s;
}
.fc-game-gate-no:hover { opacity: 0.7; }
.fc-game-gate-thanks {
  font: 400 0.78rem var(--hanken);
  color: rgba(255,255,255,0.45);
  margin: 0;
}
/* ── Games modal ── */
.games-modal-hd {
  font: 400 2rem 'Oi', serif;
  color: #fff;
  line-height: 1;
  display: flex; align-items: center;
}
#games-view { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); }
#games-view.active { display: flex; align-items: flex-end; justify-content: center; }
#games-view .view-modal-inner { max-height: 96dvh; overflow-y: auto; background: #0c0c1a; }
#games-view .fc-game-frame { width: min(100%, 48dvh); aspect-ratio: 1 / 1; }
#games-view .view-modal-close {
  background: var(--coral); border-color: var(--coral); color: #fff;
  border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
}
#games-view .view-modal-close:hover { background: #c0320f; border-color: #c0320f; color: #fff; }
.games-tabs {
  display: flex; gap: 0.5rem; margin-bottom: 1rem;
}
.games-tab {
  background: rgba(255,255,255,.1); border: none; border-radius: 999px;
  font: 600 0.75rem var(--hanken); color: rgba(255,255,255,.5);
  padding: 0.3rem 0.9rem; cursor: pointer; transition: background .15s, color .15s;
}
.games-tab.active { background: #fff; color: #0c0c1a; }
.games-tab:not(.active):hover { background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.games-frame-outer { display: flex; justify-content: center; border-radius: 8px; overflow: hidden; background: #0c0c1a; }
.games-celebration {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .35s ease;
}
.games-celebration.active { max-height: 5rem; opacity: 1; }
.games-celebration-inner {
  text-align: center;
  padding: .7rem .5rem .35rem;
  font: 600 0.88rem var(--hanken);
  color: #fff;
  line-height: 1.4;
}
.games-cel-score { opacity: .5; font-weight: 400; margin-left: .25rem; }
.games-dashboard { padding: 1.2rem 0 .5rem; }
.games-dash-streak {
  font: 600 0.9rem var(--hanken); color: #fff;
  text-align: center; margin-bottom: 1rem;
}
.games-dash-scores { display: flex; gap: .75rem; }
.games-dash-card {
  flex: 1; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: .85rem 1rem;
}
.games-dash-game { font: 600 0.78rem var(--hanken); color: #fff; margin-bottom: .4rem; }
.games-dash-best { font: 700 1.5rem var(--hanken); color: #fff; line-height: 1; }
.games-dash-label { font: 400 0.72rem var(--hanken); color: rgba(255,255,255,.55); margin-top: .25rem; }
.games-share-row {
  display: flex; justify-content: center; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: .5rem;
}
.games-share-btn {
  background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  font: 500 0.78rem var(--hanken); color: rgba(255,255,255,.6);
  padding: 0.35rem 1rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.games-share-btn:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.fc-e-embed {
  width: calc(100% + 3rem);
  margin: -2.75rem -1.5rem 1.25rem;
  overflow: hidden;
}
.fc-e-embed iframe { max-width: 100%; display: block; border: none; }
@media (max-width: 800px) {
  .fc-e-embed { width: calc(100% + 2.5rem); margin: -1.5rem -1.25rem 1rem; }
}
.fc-e-label {
  font: 700 0.62rem var(--hanken); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--g600); margin-bottom: 0.55rem;
}
.fc-e-headline { display: block; }
.fc-e-headline-link { background: none; border: none; padding: 0; text-align: left; cursor: pointer; width: 100%; }
.fc-e-headline-link:hover { text-decoration: underline; }
.fc-e-body { font: 400 0.78rem var(--hanken); color: var(--g800); margin-top: 0.35rem; line-height: 1.5; }
.fc-e-cta {
  display: inline-block; margin-top: 0.7rem;
  font: 600 0.8rem var(--hanken); color: var(--coral); text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer;
}
.fc-e-cta:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .fc-e { padding: 1.5rem 1.25rem; }
}

/* Card B image bleed — hidden pending image rights review */
.fc-b-img {
  display: none !important;
}
.fc-b-img-enabled {
  display: block;
  width: calc(100% + 3rem);
  margin: -2.75rem -1.5rem 1rem;
  height: 160px;
  object-fit: cover;
  border-radius: 0;
}
@media (max-width: 800px) {
  .fc-b-img {
    width: calc(100% + 2.5rem);
    margin: -1.5rem -1.25rem 0.85rem;
  }
}

/* Card C — Agenda */
.fc-c { border-bottom: 1px solid var(--g200); display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1rem; }
.fc-c-img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fc-c-body { flex: 1; min-width: 0; }
.fc-c-eyebrow {
  font: 700 0.72rem var(--hanken); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 0.4rem;
}
.fc-c-title {
  display: block; font: 700 1.0rem/1.4 var(--hanken);
  color: var(--black); text-decoration: none;
}
.fc-c-title:hover { text-decoration: underline; }
.fc-c-meta { font: 400 0.8rem/1.4 var(--hanken); color: var(--g600); }
.fc-c-cta {
  display: inline-block; margin-top: 0.5rem;
  font: 600 0.72rem var(--hanken); color: var(--white);
  background: var(--coral); border: none; border-radius: 4px;
  padding: 0.25rem 0.6rem; cursor: pointer;
  text-decoration: none; transition: opacity .15s;
}
.fc-c-cta:hover { opacity: 0.85; }

/* Card D — Newsletter */
.fc-d { border-bottom: 1px solid var(--g200); }
.fc-d-heading { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.85rem; }

/* Shared feed elements */
.fc-headline {
  display: inline; font: 800 1rem/1.5 var(--hanken);
  color: #363737; text-decoration: none;
}
/* Legacy: headline-row used in latest/search views */
.fc-headline-row { display: block; margin-bottom: 0.5rem; }

/* Contextual label shown above meta line on multi-source thread cards */
.fc-context-label {
  font: 700 0.72rem var(--hanken);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.2rem;
}

/* Feed card meta line: [outlet in coral] · [time] — both bold */
.fc-meta {
  font: 700 1rem var(--hanken);
  color: var(--g500);
  margin-bottom: 0.28rem;
}
.fc-tag {
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Excerpt flows inline after headline — continuation of the thought */
.fc-excerpt {
  display: inline;
  font: 400 1rem/1.5 var(--hanken);
  color: #363737;
}
/* Inline actions row: vote + share */
.fc-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.5rem;
}

/* ─── SECTION HEADERS ───────────────────────────────────── */
.feed-section-hdr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem 0.5rem;
  margin-top: 2rem;
  cursor: pointer;
  user-select: none;
}
.feed-section-hdr:first-child { margin-top: 0; }
.fsh-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--g100);
  border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  transition: background 0.15s;
}
.feed-section-hdr:hover .fsh-pill { background: var(--g150, #e8e8e8); }
.fsh-emoji { font-size: 0.85rem; line-height: 1; flex-shrink: 0; }
.fsh-label { font: 700 0.68rem var(--hanken); color: var(--coral); text-transform: uppercase; letter-spacing: 0.07em; }
.fsh-count { font: 400 0.68rem var(--hanken); color: var(--g400); white-space: nowrap; }
.fsh-chevron {
  font-size: 0.8rem; color: var(--g400); line-height: 1;
  transition: transform 0.18s; display: inline-block;
}
.feed-section-hdr.fsh-open .fsh-chevron { transform: rotate(90deg); }

/* Section TOC dropdown */
.fsh-toc {
  background: var(--g50, #fafafa);
  border-left: 3px solid var(--coral);
  margin: 0 0 0.5rem;
  padding: 0.25rem 0;
}
.fsh-toc-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--g100);
  cursor: pointer;
}
.fsh-toc-item:last-child { border-bottom: none; }
.fsh-toc-item:hover { background: var(--g100); }
.fsh-toc-emoji { font-size: 0.85rem; flex-shrink: 0; line-height: 1; }
.fsh-toc-label { font: 500 0.82rem var(--hanken); color: var(--g700); flex: 1; line-height: 1.3; }
.fsh-toc-active .fsh-toc-label { color: var(--coral); font-weight: 700; }
.fsh-toc-here {
  font: 700 0.6rem var(--hanken); color: var(--white);
  background: var(--coral); border-radius: 999px;
  padding: 0.1em 0.45em; flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  .fsh-pill { background: rgba(255,255,255,0.08); }
  .fsh-toc { background: rgba(255,255,255,0.04); }
  .fsh-toc-item:hover { background: rgba(255,255,255,0.07); }
  .fsh-toc-label { color: var(--g300); }
  .fsh-toc-active .fsh-toc-label { color: var(--coral); }
}

/* ─── METADATA TAGS (neighborhood + topic) ──────────────── */
.fc-tags { display: flex; align-items: center; gap: 0.3rem; flex: 1; flex-wrap: wrap; min-width: 0; }
.fc-tag {
  font: 600 0.62rem var(--hanken);
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.fc-tag-nbhd { background: color-mix(in srgb, var(--coral) 10%, var(--white)); color: var(--coral); }
.fc-tag-topic { background: var(--g100); color: var(--g500); }

.fc-foot { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; padding-top: 0.5rem; }
.fc-src { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.fc-sep { color: var(--g200); font-size: 0.58rem; }
.fc-nbhd { font-size: 0.65rem; color: var(--g800); }
@media (max-width: 640px) {
  .fc-nbhd, .fc-sep { display: none; }
}
.fc-share {
  background: none; border: none; padding: 0.3rem 0.4rem;
  cursor: pointer; color: var(--g400); display: inline-flex; align-items: center;
  border-radius: 4px; line-height: 1; font-size: 0.6rem;
  transition: color 0.15s; margin-left: auto;
  min-width: 40px; min-height: 40px; justify-content: center;
}
.fc-share:hover { color: var(--g800); }
.fc-share img, .fc-share svg { pointer-events: none; }
/* Event/agenda cards keep absolute share button */
.fc-c .fc-share { position: absolute; bottom: 0.75rem; right: 0.75rem; margin-left: 0; }

/* Weather feed card — mobile only, compact strip */
.fc.fc-weather {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem;
}
/* ─── TOP-EVENTS FEED CARD ───────────────────────────────── */
.fc.fc-top-events {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem;
}
.top-ev-list { margin: 0.6rem 0 0; }
.top-ev-row {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--g100);
}
.top-ev-row:last-child { border-bottom: none; }
.top-ev-icon { font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.top-ev-body { flex: 1; min-width: 0; }
.top-ev-title {
  display: block; font: 600 0.9rem/1.35 var(--hanken); color: var(--black);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-ev-title:hover { text-decoration: underline; }
.top-ev-meta {
  font: 400 0.82rem/1.3 var(--hanken); color: var(--g500); margin-top: 0.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-save-btn--sm {
  display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
  background: none; border: none; cursor: pointer; padding: 0.25rem;
  color: var(--g400); transition: color 0.15s; line-height: 1;
}
.ev-save-btn--sm img { width: 1.1rem; height: 1.1rem; }
.ev-save-btn--sm.saved { color: var(--coral); }
.ev-save-btn--sm.saved img { filter: none; }
.top-ev-saves { font: 500 0.75rem var(--hanken); color: var(--g500); }
.ev-score { font: 400 0.72rem var(--hanken); color: var(--g400); }
.ev-score.score-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.top-ev-empty { font: 400 0.78rem var(--hanken); color: var(--g400); padding: 0.5rem 0; }

.fc.fc-metro-wx {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem;
}
.metro-wx-rows { margin: 0.75rem 0 0; }
.metro-wx-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--g100);
}
.metro-wx-row:last-child { border-bottom: none; }
.metro-wx-place {
  flex: 1;
  font: 500 0.82rem var(--hanken);
  color: var(--g800);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metro-wx-cur {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font: 600 0.9rem var(--hanken);
  color: var(--black);
  width: 4rem;
  justify-content: flex-end;
}
.metro-wx-hl {
  font: 400 0.75rem var(--hanken);
  color: var(--g500);
  width: 5.5rem;
  text-align: right;
  white-space: nowrap;
}
.metro-wx-rain {
  font: 400 0.72rem var(--hanken);
  color: #2471a3;
  width: 2.5rem;
  text-align: right;
  white-space: nowrap;
}
.fc-alert-badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
  font: 700 0.6rem var(--hanken);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.fc-wx-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.fc-wx-label {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 700 0.8rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--black);
}
.fc-wx-label:hover { text-decoration: underline; }
.fc-wx-unit-toggle {
  background: none; border: 1px solid var(--g200); border-radius: 999px;
  padding: .15rem .55rem; cursor: pointer;
  font: 600 .65rem var(--hanken); color: var(--g500);
}
.fc-wx-unit-toggle:hover { border-color: var(--black); color: var(--black); }
.fc-wx-current { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.fc-wx-temp { font-size: 1.5rem; font-weight: 400; line-height: 1.2; }
.fc-wx-desc { font-size: 0.78rem; color: var(--g600); }
.fc-wx-hl   { font-size: 0.7rem; color: var(--g500); margin-bottom: 0.6rem; }
.fc-wx-strip { margin-top: 0.5rem; }

/* ─── WEATHER SIDEBAR ────────────────────────────────────── */
#weather-sidebar {
  position: sticky;
  top: calc(140px + 2rem);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: none;
}
#weather-sidebar::-webkit-scrollbar { display: none; }
.sidebar-label {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--black); margin-bottom: 0.75rem;
}
#sidebar-weather-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.sidebar-wc {
  padding: 0.65rem 0.875rem; border: 1px solid var(--g200); background-color: var(--white); border-radius: 0;
}
.sidebar-wc-borough {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--black); margin-bottom: 0.25rem;
}
.sidebar-wc-temp { font-size: 1.4rem; font-weight: 400; line-height: 1.2; }
.sidebar-wc-feels { font-size: 0.68rem; color: var(--g800); margin-top: 0.15rem; }
.sidebar-wc-hl    { font-size: 0.65rem; color: var(--g600); margin-top: 0.1rem; }
.sidebar-zip-row { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.sidebar-zip-input {
  flex: 1; padding: 0.4rem 0.55rem; border: 1px solid var(--g200);
  border-radius: 4px; font-size: 0.8rem; outline: none; font-family: var(--sans);
}
.sidebar-zip-input:focus { border-color: var(--black); }
.sidebar-zip-btn {
  padding: 0.4rem 0.7rem; font-family: var(--hanken); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--black); color: var(--white); border: none;
  border-radius: 0; cursor: pointer; white-space: nowrap;
}
.sidebar-zip-btn:hover { background: var(--g800); }
#sidebar-zip-result { font-size: 0.78rem; color: var(--g600); }
.sidebar-forecast-link {
  display: block; padding: 0; border-left: none;
  margin: 0 0 0.5rem;
}

/* Geo-filtered feed — uses same fc-b cards as the main feed */
#geo-feed-list { display: block; padding-top: 0.25rem; }

.feed-end-msg {
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-size: 0.75rem;
  color: var(--g600);
  letter-spacing: 0.03em;
}
.feed-end-headline {
  display: block; font: 700 1rem var(--hanken); color: var(--black); margin-bottom: 0.4rem;
}
.feed-end-sub {
  display: block; font-size: 0.8rem; color: var(--g600); margin-bottom: 1rem; line-height: 1.5;
}
.feed-end-cta {
  display: inline-block; background: var(--coral); color: var(--white);
  border: none; cursor: pointer;
  font: 700 0.82rem var(--hanken);
  padding: 0.6rem 1.4rem; border-radius: 6px; transition: opacity 0.15s;
  text-decoration: none;
}
.feed-end-cta:hover { opacity: 0.85; }

/* ─── END-OF-FEED FEEDBACK ────────────────────────────────── */
.fef-wrap { margin: 1.25rem 0 0.5rem; border-top: 1px solid var(--g200); padding-top: 1.25rem; }
.fef-q { font: 700 0.82rem var(--hanken); color: var(--black); margin-bottom: 0.75rem; }
.fef-opts { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.fef-opt {
  padding: 0.4rem 1rem; border: 1.5px solid var(--g300); border-radius: 999px;
  background: none; cursor: pointer; font: 700 0.72rem var(--hanken);
  color: var(--g600); letter-spacing: 0.04em; transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.fef-opt:hover { border-color: var(--black); color: var(--black); }
.fef-opt.active { border-color: var(--black); background: var(--black); color: var(--white); }
.fef-step2 { margin-top: 1rem; }
.fef-q2 { font: 400 0.78rem var(--hanken); color: var(--g600); margin-bottom: 0.5rem; }
.fef-textarea {
  width: 100%; box-sizing: border-box;
  padding: 0.55rem 0.75rem; border: 1px solid var(--g200); border-radius: 4px;
  font: 400 0.8rem var(--hanken); color: var(--black); resize: none;
  background: var(--white); line-height: 1.45;
}
.fef-textarea:focus { outline: none; border-color: var(--g400); }
.fef-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; }
.fef-skip {
  background: none; border: none; cursor: pointer;
  font: 400 0.72rem var(--hanken); color: var(--g500); padding: 0;
}
.fef-skip:hover { color: var(--g700); }
.fef-submit-btn {
  background: var(--black); color: var(--white); border: none; cursor: pointer;
  font: 700 0.7rem var(--hanken); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.45rem 1.1rem; border-radius: 999px; transition: opacity 0.12s;
}
.fef-submit-btn:hover { opacity: 0.8; }
.fef-thanks { font: 400 0.8rem var(--hanken); color: var(--g600); margin: 1rem 0 0.75rem; }

/* ─── END-OF-FEED CONTRIBUTION STATS ─────────────────────── */
.feed-end-contrib {
  margin: 1.25rem auto 0; border-top: 1px solid var(--g200); padding-top: 1rem;
  max-width: 260px;
}
.fec-label {
  font: 700 0.63rem var(--hanken); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g400); margin-bottom: 0.55rem;
}
.fec-stats { display: flex; justify-content: center; gap: 1.75rem; flex-wrap: wrap; }
.fec-stat { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.fec-stat strong { font: 700 1.35rem var(--hanken); color: var(--black); line-height: 1; }
.fec-stat em { font: 400 0.63rem var(--hanken); color: var(--g500); font-style: normal; }

/* ─── POST-SAVE SUBSCRIBE TOAST ───────────────────────────── */
#save-cta-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--black); color: var(--white);
  border-radius: 10px; padding: .8rem 1.3rem;
  font: 500 .84rem var(--hanken); white-space: nowrap;
  z-index: 9999; box-shadow: 0 4px 24px rgba(0,0,0,.28);
  animation: _saveCtaIn .2s ease;
  max-width: calc(100vw - 2rem); white-space: normal; text-align: center;
}
#save-cta-toast a { color: #ffc080; font-weight: 700; text-decoration: underline; cursor: pointer; }
@keyframes _saveCtaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── ALERT FEED CARD ────────────────────────────────────────── */
.fc.alert-feed-card {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--g200);
  display: flex; gap: 0.65rem; align-items: flex-start;
}
.alert-feed-card:hover .alert-card-event { text-decoration: underline; }
.alert-sev-tag {
  display: inline-block; font: 700 0.6rem var(--hanken);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.1em 0.42em; border-radius: 3px;
}
.alert-sev-tag.severe  { background: #fee2e2; color: #991b1b; }
.alert-sev-tag.minor   { background: #eff6ff; color: #1e40af; }
.alert-sev-tag.default { background: #fef3c7; color: #92400e; }
.alert-card-event {
  font: 700 1.05rem var(--hanken); line-height: 1.2;
  margin: 0.18rem 0 0.25rem; display: block; color: var(--coral);
}
.alert-nws-link {
  font: 400 0.72rem var(--hanken); color: var(--g500); text-decoration: none;
}
.alert-nws-link:hover { text-decoration: underline; color: var(--black); }
.alert-card-secondary {
  display: flex; align-items: center; gap: 0.4rem;
  padding-top: 0.4rem; margin-top: 0.4rem;
  border-top: 1px solid var(--g100);
}
.alert-secondary-event {
  flex: 1; min-width: 0;
  font: 600 0.88rem/1.2 var(--hanken);
}
.alert-news-section {
  margin-top: 0.65rem; padding-top: 0.6rem;
  border-top: 1px solid var(--g100);
}
.alert-news-meta { margin-bottom: 0.35rem; }
.alert-map-item-title {
  display: block; font: 500 1rem var(--hanken);
  color: var(--black); line-height: 1.4;
}
.alert-map-item:hover .alert-map-item-title { text-decoration: underline; }


/* ─── WEATHER ALERT MODAL ────────────────────────────────── */
.wx-alert-card { max-width: 520px; padding: 1.75rem 1.5rem 2rem; }
#wx-alert-modal-content .wam-event {
  font: 700 1rem var(--hanken,sans-serif); margin-bottom: .3rem;
}
#wx-alert-modal-content .wam-headline {
  font: 400 .8rem var(--sans); color: var(--g600); margin-bottom: .75rem; line-height: 1.45;
}
#wx-alert-modal-content .wam-meta {
  font: 400 .72rem var(--roboto,sans-serif); color: var(--g500); margin-bottom: .5rem;
}
#wx-alert-modal-content .wam-area {
  font: 400 .72rem var(--sans); color: var(--g600); margin-bottom: .85rem;
}
#wx-alert-modal-content .wam-section { margin-bottom: .8rem; }
#wx-alert-modal-content .wam-label {
  font: 700 .6rem var(--roboto,sans-serif); letter-spacing: .09em; text-transform: uppercase;
  color: var(--g500); margin-bottom: .2rem;
}
#wx-alert-modal-content .wam-body {
  font: 400 .82rem var(--sans); color: var(--black); line-height: 1.6;
}
#wx-alert-modal-content .wam-instr {
  border-top: 1px solid var(--g200); padding-top: .8rem; margin-top: .8rem;
}
#wx-alert-modal-content .wam-link {
  margin-top: 1rem; font: 400 .72rem var(--sans);
}
#wx-alert-modal-content .wam-link a { color: var(--g500); text-decoration: underline; }
#wx-alert-modal-content .wam-link a:hover { color: var(--black); }

#weather-view .vote-btn { display: none; }

/* Weather Center — active alerts list */
#weather-alerts-section { margin-bottom: 1.25rem; }
.wx-alert-row {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .65rem .75rem; margin-bottom: .5rem;
  background: var(--light); border-radius: 8px;
  cursor: pointer; transition: background .15s;
}
.wx-alert-row:hover { background: var(--g100); }
.wx-alert-row-body { flex: 1; min-width: 0; }
.wx-alert-row-event { font: 600 .85rem var(--hanken,sans-serif); line-height: 1.3; }
.wx-alert-row-until { font: 400 .72rem var(--roboto,sans-serif); color: var(--g500); margin-top: .15rem; }
.wx-alert-row-what  { font: 400 .78rem var(--sans); color: var(--g600); margin-top: .25rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Shared eyebrow for data cards (AQI, UVI) — black bold uppercase like weather label */
.fc-data-eyebrow {
  font: 700 0.8rem var(--hanken); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--black); margin-bottom: 0.4rem;
}

/* ─── AIR QUALITY FEED CARD ──────────────────────────────── */
.fc-aqi {
  border-bottom: 1px solid var(--g200);
  padding: 0.75rem 1rem;
}
.aqi-main-row {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.4rem;
}
.aqi-num    { font: 700 1.8rem var(--hanken); line-height: 1; }
.aqi-status { font: 600 0.85rem var(--hanken); align-self: flex-end; padding-bottom: 0.1rem; }
.aqi-trend  { font: 700 0.6rem var(--hanken); text-transform: uppercase; letter-spacing: .04em; margin-left: auto; padding: .18rem .55rem; border-radius: 100px; border: 1.5px solid currentColor; flex-shrink: 0; }
.aqi-pm     { font: 400 0.68rem var(--hanken); color: var(--g600); flex-basis: 100%; margin-top: -0.15rem; }
.aqi-scale-wrap { margin: 0 0 1.2rem; }
.aqi-scale-bar {
  height: 7px;
  background: linear-gradient(to right,
    #22c55e 0%,   #22c55e 16.7%,
    #eab308 16.7%, #eab308 33.3%,
    #f97316 33.3%, #f97316 50%,
    #ef4444 50%,  #ef4444 66.7%,
    #a855f7 66.7%, #a855f7 100%);
  border-radius: 4px; position: relative;
}
.aqi-scale-dim {
  position: absolute; top: 0; height: 100%;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}
.aqi-scale-marker {
  position: absolute; top: -3px;
  width: 13px; height: 13px;
  background: var(--white);
  border: 2.5px solid currentColor;
  border-radius: 50%; transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.aqi-scale-tick-lo,
.aqi-scale-tick-hi {
  position: absolute;
  top: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 700 0.6rem var(--hanken);
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  transform: translateX(-50%);
}
.aqi-scale-tick-lo::before,
.aqi-scale-tick-hi::before {
  content: '';
  width: 1.5px; height: 5px;
  background: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
}
.aqi-signal {
  font: 400 0.7rem var(--hanken); color: var(--g700);
  margin-bottom: 0.4rem; line-height: 1.35;
}
.aqi-pollen { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--g200); }
.aqi-pollen-row, .aqi-pollen-none { font: 400 0.68rem var(--hanken); }
.aqi-pollen-none { color: var(--g600); }
.aqi-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.5rem; padding-top: 0.35rem; border-top: 1px solid var(--g200);
}
.aqi-source { font: 400 0.65rem var(--hanken); color: var(--g600); }
.aqi-map-pill {
  font: 600 0.72rem var(--hanken); color: var(--white);
  background: var(--coral); border: none; border-radius: 4px;
  padding: 0.25rem 0.6rem; cursor: pointer; transition: opacity .15s;
}
.aqi-map-pill:hover { opacity: 0.85; }

/* ─── AQI DETAIL MODAL ───────────────────────────────────── */
#aqi-modal {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,.52);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
#aqi-modal-card {
  background: #fff; border-radius: 8px; width: min(500px, 94vw);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
#aqi-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--g200); flex-shrink: 0;
}
#aqi-modal-title { font: 700 .88rem var(--hanken); text-transform: uppercase; letter-spacing: .06em; }
#aqi-modal-close {
  background: none; border: none; cursor: pointer; font-size: .9rem;
  color: #888; padding: .15rem .4rem; border-radius: 50%;
}
#aqi-modal-close:hover { background: var(--g100); }
#aqi-modal-body { overflow-y: auto; padding: .9rem 1.1rem 1.25rem; flex: 1; }
.aqi-modal-section-hd {
  font: 700 .72rem var(--hanken); letter-spacing: .08em; text-transform: uppercase;
  color: var(--g500); margin-bottom: .55rem;
}
.aqi-hist-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
@media (max-width: 480px) { .aqi-hist-grid { grid-template-columns: repeat(6, 1fr); } }
.aqi-hist-cell {
  aspect-ratio: 1; border-radius: 3px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.aqi-hist-val  { font: 700 0.52rem var(--hanken); color: rgba(255,255,255,.9); line-height: 1; }
.aqi-hist-date { font: 400 0.42rem var(--hanken); color: rgba(255,255,255,.75); line-height: 1; }
.aqi-hist-loading { font: 400 .65rem var(--hanken); color: var(--g600); padding: .5rem 0; }

/* ─── AQI FORECAST BAR CHART ─────────────────────────────── */
.aqi-fc-chart { margin: .5rem 0 0; }
.aqi-fc-bars { display: flex; gap: 4px; align-items: flex-end; height: 72px; }
.aqi-fc-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 2px; height: 100%;
}
.aqi-fc-val { font: 700 0.6rem var(--hanken); line-height: 1; }
.aqi-fc-bar-area { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.aqi-fc-bar { width: 100%; min-height: 3px; border-radius: 2px 2px 0 0; transition: height .3s; }
.aqi-fc-day { font: 400 0.6rem var(--hanken); color: var(--g500); line-height: 1; white-space: nowrap; }

/* ─── AIR QUALITY + POLLEN SIDEBAR (desktop only) ───────── */
#sidebar-aqi-card {
  border: 1px solid var(--g200);
  border-radius: 0;
  padding: 0.65rem 1rem;
  background: var(--white);
  margin-bottom: 0.75rem;
}
.sidebar-aqi-row { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.2rem; }
.sidebar-aqi-eyebrow {
  font: 700 0.55rem var(--hanken); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black); flex-grow: 1;
}
.sidebar-aqi-num    { font: 700 1.4rem var(--hanken); line-height: 1; }
.sidebar-aqi-status { font: 600 0.72rem var(--hanken); }
.sidebar-aqi-pm     { font: 400 0.65rem var(--hanken); color: var(--g800); }
.sidebar-pollen-section { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--g200); }
.sidebar-pollen-heading {
  font: 700 0.55rem var(--hanken); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black); margin-bottom: 0.3rem;
}
.sidebar-pollen-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.15rem; }
.sidebar-pollen-name  { font: 400 0.68rem var(--hanken); color: var(--g800); flex: 1; }
.sidebar-pollen-dot   { font-size: 0.55rem; line-height: 1; }
.sidebar-pollen-label { font: 600 0.65rem var(--hanken); }
.sidebar-pollen-none  { font: 400 0.68rem var(--hanken); color: var(--g600); }
.env-pollen-none      { font: 400 0.72rem var(--hanken); color: var(--g600); padding: 0.25rem 0; }

/* ─── ENVIRONMENT SECTION (weather view) ────────────────── */
#weather-env-card { margin-bottom: 0.5rem; }
.env-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;
  padding: 0.75rem 0;
}
@media (max-width: 500px) { .env-section { grid-template-columns: 1fr; } }
.env-col-label {
  font: 700 0.55rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--g600); margin-bottom: 0.4rem;
}
.env-aqi-main { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.2rem; }
.env-aqi-num    { font: 700 2rem var(--hanken); line-height: 1; }
.env-aqi-status { font: 600 0.85rem var(--hanken); }
.env-aqi-pm     { font: 400 0.68rem var(--hanken); color: var(--g600); }
.env-pollen-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.env-pollen-name  { font: 400 0.72rem var(--hanken); color: var(--g800); width: 4.5rem; flex-shrink: 0; }
.env-pollen-bar   { flex: 1; height: 5px; background: var(--g200); border-radius: 3px; overflow: hidden; }
.env-pollen-fill  { display: block; height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.env-pollen-label { font: 600 0.65rem var(--hanken); width: 4.5rem; flex-shrink: 0; }
.aqi-hourly {
  display: flex; overflow-x: auto; gap: 0; margin-top: 0.75rem;
  padding-top: 0.6rem; border-top: 1px solid var(--g200);
}
.aqi-hour-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  min-width: 3rem; padding: 0.2rem 0.3rem;
  border-right: 1px solid var(--g200); flex-shrink: 0;
}
.aqi-hour-cell:last-child { border-right: none; }
.aqi-hour-time { font: 400 0.65rem var(--hanken); color: var(--g600); white-space: nowrap; }
.aqi-hour-val  { font: 700 0.8rem var(--hanken); }

/* AQI day bar chart (HTML equivalent of Instagram canvas vis) */
.aqi-day-chart { margin: 1rem 0 0; }
.aqi-day-bars {
  display: flex; align-items: flex-end; height: 56px; gap: 1px;
  border-bottom: 1px solid var(--g200);
  overflow: visible;
}
.aqi-day-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; position: relative;
}
.aqi-bar-now::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px dashed rgba(0,0,0,0.35); transform: translateX(-50%);
  pointer-events: none;
}
.aqi-day-bar { width: 100%; min-height: 2px; border-radius: 1px 1px 0 0; position: relative; }
.aqi-bar-lbl {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  font: 700 0.5rem var(--hanken); line-height: 1; white-space: nowrap;
  pointer-events: none;
}
.aqi-day-ticks { display: flex; margin-top: 3px; }
.aqi-day-tick { flex: 1; font: 400 0.58rem var(--hanken); color: var(--g500); text-align: center; }

/* ─── UV INDEX FEED CARD ─────────────────────────────────── */
.fc-uvi {
  border-bottom: 1px solid var(--g200);
  padding: 0.75rem 1rem;
}
.uvi-main-row {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.15rem;
}
.uvi-num      { font: 700 2.2rem var(--hanken); line-height: 1; }
.uvi-status-col { display: flex; flex-direction: column; gap: 0.15rem; justify-content: center; }
.uvi-status   { font: 600 0.95rem var(--hanken); }
.uvi-peak-row { font: 400 0.7rem var(--hanken); color: var(--g500); }
.uvi-peak-tag { display: block; font: 600 0.6rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1px; }
.uvi-card-foot {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.65rem;
}
.uvi-source { font: 400 0.62rem var(--hanken); color: var(--g400); flex: 1; }
.uvi-day-chart { margin: 0.5rem 0 0; }
.uvi-day-bars {
  display: flex; align-items: flex-end; height: 64px; gap: 1px;
  border-bottom: 1px solid var(--g200);
  overflow: visible; margin-top: 1.4rem;
}
.uvi-day-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; position: relative;
}
.uvi-bar-now::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px dashed rgba(0,0,0,0.35); transform: translateX(-50%);
  pointer-events: none;
}
.uvi-day-bar { width: 100%; min-height: 2px; border-radius: 1px 1px 0 0; }
.uvi-bar-lbl {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font: 700 0.62rem var(--hanken); line-height: 1.2;
  padding-bottom: 3px; white-space: nowrap; text-align: center;
}
.uvi-day-ticks { display: flex; margin-top: 4px; }
.uvi-day-tick { flex: 1; font: 400 0.65rem var(--hanken); color: var(--g500); text-align: center; }

/* ─── WELCOME MODAL ──────────────────────────────────────── */
#welcome-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.52);
  z-index: 1200; display: none; align-items: flex-end; justify-content: center;
}
@media (min-width: 560px) { #welcome-modal { align-items: center; } }
.wm-card {
  background: var(--white);
  width: 100%; max-width: 420px;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 2rem 1.5rem 2.5rem;
  position: relative;
  animation: nlSlideUp 0.28s ease;
}
@media (min-width: 560px) { .wm-card { border-radius: 1.25rem; } }
.wm-close {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--g100); border: none; border-radius: 50%;
  width: 2rem; height: 2rem; font-size: 0.9rem; color: var(--g600);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wm-close:hover { background: var(--g200); }
.wm-eyebrow {
  font: 700 0.6rem var(--hanken);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 0.65rem;
}
.wm-hed {
  font: 800 1.5rem var(--hanken);
  line-height: 1.18; color: var(--black);
  margin-bottom: 0.65rem;
}
.wm-body {
  font: 400 0.88rem var(--hanken);
  color: var(--g600); line-height: 1.55;
  margin: 0 0 1.5rem;
}
.wm-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.wm-btn-primary {
  padding: 0.78rem 1rem;
  background: var(--coral); color: var(--white);
  border: none; border-radius: 999px;
  font: 700 0.9rem var(--hanken); cursor: pointer;
}
.wm-btn-primary:hover { opacity: 0.88; }
.wm-btn-secondary {
  padding: 0.72rem 1rem;
  background: none; color: var(--g600);
  border: 1.5px solid var(--g200);
  border-radius: 999px;
  font: 600 0.88rem var(--hanken); cursor: pointer;
}
.wm-btn-secondary:hover { border-color: var(--g300); color: var(--g800); }

/* ─── NEWSLETTER MODAL ───────────────────────────────────── */
.nl-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.48);
  z-index: 500; display: flex; align-items: flex-end; justify-content: center;
}
.nl-modal-card {
  background: var(--white); border-radius: 20px 20px 0 0;
  padding: 2rem 1.5rem 2.5rem; width: 100%; max-width: 480px;
  position: relative; animation: nlSlideUp 0.28s ease;
  max-height: 88vh; overflow-y: auto;
}
@keyframes nlSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (min-width: 640px) {
  .nl-modal-overlay { align-items: center; padding: 1rem; }
  .nl-modal-card { border-radius: 20px; animation: nlFadeIn 0.22s ease; }
}
@keyframes nlFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.nl-modal-close {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 1;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--g200); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  font-size: 1rem; color: var(--black); cursor: pointer; line-height: 1;
}
.nl-modal-close:hover { background: var(--g100); }
.ap-time-footer {
  text-align: right; font-size: 0.62rem; color: var(--g600);
  margin-top: 1.25rem; letter-spacing: 0.02em;
}
.nl-modal-eyebrow {
  font: 700 0.55rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 0.5rem;
}
.nl-modal-title {
  font: 700 1.5rem var(--hanken); letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 0.5rem;
}
.nl-modal-body {
  font: 400 0.85rem var(--hanken); color: var(--g800); line-height: 1.5;
  margin-bottom: 1.1rem;
}
.nl-modal-skip {
  display: block; width: 100%; text-align: center; background: none; border: none;
  cursor: pointer; font: 400 0.72rem var(--hanken); color: var(--g600);
  padding: 0.5rem 0; margin-top: 0.3rem;
}
.nl-modal-skip:hover { color: var(--black); }
.nl-modal-success {
  text-align: center; padding: 1.5rem 0 0.5rem;
}
.nl-modal-check {
  font-size: 2rem; color: #22c55e; margin-bottom: 0.5rem; line-height: 1;
}
.nl-modal-success > div:last-child {
  font: 500 0.9rem var(--hanken); color: var(--black);
}
.nl-opt-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--g400); }
.nl-topic-options { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; }
.nl-topic-opt {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; cursor: pointer;
  background: var(--g100); border-radius: 999px;
  padding: 0.22rem 0.65rem 0.22rem 0.5rem;
  transition: background 0.12s;
}
.nl-topic-opt:has(input:checked) { background: color-mix(in srgb, var(--coral) 12%, var(--white)); }
.nl-topic-opt input { display: none; }

/* ─── ARTICLE PREVIEW CARD ───────────────────────────────────── */
.ap-card { max-width: 520px; }
.ap-event-img {
  width: calc(100% + 3rem); margin: -2rem -1.5rem 1.25rem;
  max-height: 200px; object-fit: cover; object-position: top center; display: block;
}
.ap-event-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem;
  font: 400 0.78rem var(--hanken); color: var(--g800);
  margin-bottom: 0.75rem;
}
.ap-event-datetime { font-weight: 500; color: var(--black); }
.ap-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; vertical-align: middle; margin: 0 1px;
}
.ap-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--g100);
}
.ap-sec-emoji { font-size: 0.72rem; line-height: 1; }
.ap-sec-text { font: 700 0.65rem var(--hanken); color: var(--g600); text-transform: uppercase; letter-spacing: 0.07em; }
.ap-headline {
  font: 700 1.15rem/1.4 var(--hanken);
  margin: 0 0 0.75rem; color: var(--black);
}
.ap-summary {
  font: 400 0.88rem var(--hanken); color: var(--g800); line-height: 1.65;
  margin: 0 0 0.85rem;
}
.ap-cta {
  display: inline-flex; align-items: center;
  background: var(--coral); color: var(--white);
  border: none; border-radius: 4px;
  font: 600 0.72rem var(--hanken);
  padding: 0.28rem 0.7rem; text-decoration: none; margin-bottom: 1.5rem;
  white-space: nowrap;
}
.ap-cta:hover { opacity: 0.85; color: var(--white); }
.ap-related-section { }
.ap-related-loading { text-align: center; padding: 0.5rem 0 0.25rem; }
.ap-related-pigeon { width: 28px; height: 28px; }
.ap-related-empty { color: var(--g600); font-size: 0.75rem; margin: 0; }
.ap-related-heading {
  font: 700 0.58rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--coral); margin-bottom: 0.6rem;
}
.ap-related-item { padding: 0.45rem 0; border-bottom: 1px solid var(--g100); }
.ap-related-item:last-child { border-bottom: none; }
.ap-related-meta {
  font: 700 0.62rem var(--hanken); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--g500); margin-bottom: 0.12rem;
}
.ap-related-row { display: flex; align-items: flex-start; gap: 0.4rem; }
.ap-related-row .ap-related-title { flex: 1; }
.ap-related-title {
  display: block; font: 500 1rem var(--hanken);
  color: var(--black); text-decoration: none; line-height: 1.4;
}
.ap-related-title:hover { text-decoration: underline; }
.ap-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0 0.25rem; }
.ap-share-btn {
  background: none; border: none; cursor: pointer; color: var(--g500);
  padding: 0.2rem 0.3rem; border-radius: 4px; line-height: 1;
  display: flex; align-items: center; flex-shrink: 0; transition: color 0.15s;
}
.ap-share-btn:hover { color: var(--black); }

/* ── Card F — Featured article ─────────────────────────────── */
.fc-f {
  border-left: 2px solid #4ab3e8;
  padding-left: calc(1rem - 2px);
}

/* ── About view ────────────────────────────────────────────── */
#now-nyc-view { display: none; }
#now-nyc-view.active {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.25rem; overflow-y: auto;
}
#now-nyc-view .view-hd { padding-top: 3.5rem; }
#now-nyc-view .view-hd .sec-label { font: 400 1.7rem 'Oi', serif; letter-spacing: 0; text-transform: none; }
.nnc-view-time {
  font: 400 0.72rem var(--hanken); color: var(--g500);
  margin: 0 0 0.75rem; letter-spacing: 0.02em;
}
.nnc-alert-banner {
  background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px;
  padding: 0.6rem 0.85rem; margin-bottom: 1rem;
  font: 600 0.78rem var(--hanken); color: #92400e; line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  .nnc-alert-banner { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); color: #fcd34d; }
}
.nnc-group-hd {
  font: 700 0.65rem var(--hanken); color: var(--g400);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.9rem 0 0.4rem; margin-top: 0.25rem;
}
.nnc-group-hd:first-of-type { padding-top: 0; margin-top: 0; }
.nnc-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.1rem; border-bottom: 1px solid var(--g100);
  text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
a.nnc-row:hover { background: var(--g100); margin: 0 -0.5rem; padding-left: 0.6rem; padding-right: 0.6rem; border-radius: 6px; border-bottom-color: transparent; }
.nnc-row-ghost { cursor: default; opacity: 0.6; }
.nnc-row-icon { font-size: 1.2rem; flex-shrink: 0; width: 1.6rem; text-align: center; }
.nnc-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.nnc-row-main { font: 500 0.88rem var(--hanken); color: var(--black); line-height: 1.3; }
.nnc-row-desc { font-weight: 400; color: var(--g500); }
.nnc-row-sub  { font: 400 0.78rem var(--hanken); color: var(--g500); line-height: 1.3; }
.nnc-row-arr  { font-size: 1rem; color: var(--g300); flex-shrink: 0; }
.nnc-temp { font-size: 1.05rem; }
.nnc-warn { color: #c0392b; }
.nnc-muted { color: var(--g400); }
.nnc-loading { color: var(--g400); font-style: italic; }
.nnc-view-footer { border-top: 1px solid var(--g200); padding-top: 1.25rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nnc-view-footer-btn {
  align-self: flex-start; padding: 0.7rem 1.4rem; min-height: 40px;
  display: inline-flex; align-items: center; text-decoration: none;
  background: var(--coral); color: var(--white); border: none;
  font: 700 0.85rem var(--hanken); cursor: pointer; border-radius: 6px;
}
.nnc-view-footer-btn:hover { background: #c9320f; }
.nnc-view-footer-btn-sec { background: none; color: var(--g600); border: 1.5px solid var(--g300); }
.nnc-view-footer-btn-sec:hover { background: var(--g100); color: var(--black); border-color: var(--g400); }
#about-view, #contribute-view { display: none; }
#about-view.active, #contribute-view.active {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.25rem; overflow-y: auto;
}
#about-view .view-hd, #contribute-view .view-hd { padding-top: 3.5rem; }
#about-view .view-hd .sec-label, #contribute-view .view-hd .sec-label {
  font-family: 'Oi', serif;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* ── Games view ─────────────────────────────────────────────── */
#games-view { display: none; max-width: 860px; margin: 0 auto; padding-bottom: 3rem; }
#games-view.active { display: block; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.5rem; }
.game-title { font: 700 0.75rem var(--hanken); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; }
.game-embed-wrap { position: relative; padding-top: 56.25%; background: var(--g100); }
.game-embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; }
@media (max-width: 600px) { .games-grid { grid-template-columns: 1fr; } }

/* ── Knicks in 5 view ──────────────────────────────────────── */
#knicks-view { display: none; max-width: 860px; margin: 0 auto; padding-bottom: 3rem; }
#knicks-view.active { display: block; }
#knicks-view .view-modal-inner { max-height: 96dvh; overflow-y: auto; background: #0c0c1a; padding-bottom: 3rem; }
#knicks-view .fc-game-frame { width: min(100%, 48dvh); aspect-ratio: 1 / 1; }
#knicks-view .view-modal-close {
  background: #F58426; border-color: #F58426; color: #fff;
  border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
}
#knicks-view .view-modal-close:hover { background: #d46f1a; border-color: #d46f1a; }
.knicks-hero {
  text-align: center;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 1px solid rgba(245,132,38,.2);
  margin-bottom: 1rem;
}
.knicks-trophy { line-height: 1; margin-bottom: .5rem; }
.knicks-trophy img { width: 2.5rem; height: 2.5rem; display: block; margin: 0 auto; }
.knicks-champ {
  font: 600 0.65rem var(--hanken);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F58426;
  margin-bottom: .35rem;
}
.knicks-title {
  font: 400 2.2rem 'Oi', serif;
  color: #fff;
  line-height: 1;
  margin-bottom: .65rem;
}
.knicks-desc {
  font: 400 0.82rem var(--hanken);
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  max-width: 28ch;
  margin: 0 auto;
}

/* ── Dateline feed-mode buttons ─────────────────────────────── */
.dateline-mode-btn { font-size: 0.68rem; padding: 0.25rem 0.7rem; vertical-align: middle; border-radius: 999px; }
.dateline-mode-btn.active { background: var(--coral); color: var(--white); border-radius: 999px; }



.about-body { padding: 0 0.25rem; }

/* Lead statement — the About view opened straight into dense prose with no
   statement of what the product actually does or any way to act on it. */
.about-hero {
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--black);
}
.about-hero-line {
  font: 800 1.45rem/1.22 var(--hanken);
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.about-hero-cta {
  display: inline-flex; align-items: center; min-height: 40px;
  background: var(--coral); color: var(--white);
  font: 700 0.85rem var(--hanken);
  padding: 0.55rem 1.1rem; border-radius: 6px;
  text-decoration: none; transition: opacity 0.15s;
}
.about-hero-cta:hover { opacity: 0.88; }
.about-hero-note {
  display: block; margin-top: 0.6rem;
  font: 400 0.78rem var(--hanken); color: var(--g500);
}
@media (min-width: 700px) {
  .about-hero-line { font-size: 1.85rem; }
}

.about-section { margin-bottom: 2rem; }
.about-section p {
  font: 400 0.95rem var(--hanken); color: var(--g800); line-height: 1.7;
  margin: 0 0 0.75rem;
}
.about-h3 {
  font: 700 0.65rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 0.6rem;
}
.about-contact a { color: var(--black); text-underline-offset: 3px; }
.about-suggest-btn {
  background: none; border: 1.5px solid var(--black); cursor: pointer;
  padding: 0.45rem 1rem; font: 700 0.72rem var(--sans); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--black);
}
.about-suggest-btn:hover { background: var(--black); color: var(--white); }

/* ── Suggest modal ─────────────────────────────────────────── */
.sg-select, .sg-textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--g200); border-radius: 8px;
  padding: 0.6rem 0.75rem; font: 400 0.9rem var(--hanken);
  color: var(--black); background: var(--white);
  margin-bottom: 0.75rem; outline: none;
}
.sg-select:focus, .sg-textarea:focus { border-color: var(--black); }
.sg-textarea { resize: vertical; min-height: 70px; }
.sg-label { font: 500 0.72rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--g600); display: block; margin-bottom: 0.3rem; }

/* ── PUBLIC POOLS FEED CARD ──────────────────────────────────────── */
.fc.fc-pools { border-bottom: 1px solid var(--g200); padding: 1.25rem 1rem; }
.fc-pools-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.fc-pools-label {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: 700 0.9rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); line-height: 1.35;
}
.fc-pools-label:hover { color: var(--coral); }
.fc-pools-season { display: flex; align-items: center; gap: 0.5rem; margin: 0.55rem 0 0.5rem; }
/* ── CONTEXTUAL CTA CARDS (pools, cooling, markets) ─────────── */
.fc-cta-line {
  font: 400 0.85rem/1.5 var(--hanken); color: var(--g700);
  margin: 0.25rem 0 0.6rem;
}
.fc-cta-map-btn {
  display: inline-block;
  font: 600 0.78rem var(--hanken); color: var(--coral);
  background: none; border: 1.5px solid var(--coral);
  border-radius: 999px; padding: 0.3em 0.85em;
  cursor: pointer; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.fc-cta-map-btn:hover { background: var(--coral); color: var(--white); }
.fc-alert-inline { color: #b91c1c; font-weight: 600; }

.fc-pools-badge {
  font: 700 0.6rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.12rem 0.4rem; border-radius: 3px;
  background: rgba(0,145,213,0.1); color: #0091d5;
}
.fc-pools-badge.open { background: #e8f5e9; color: #2d7d46; }
.fc-pools-total { font: 400 0.72rem var(--hanken); color: var(--g500); }
.fc-pools-schedule { font: 400 0.68rem var(--hanken); color: var(--g500); margin: -0.2rem 0 0.45rem; }
.fc-pools-rows { display: flex; flex-direction: column; gap: 0.2rem; }
.fc-pools-row { display: flex; align-items: center; gap: 0.5rem; }
.fc-pools-boro { font: 400 0.72rem var(--hanken); color: var(--g600); width: 4.5rem; flex-shrink: 0; }
.fc-pools-bar-wrap { flex: 1; height: 5px; background: var(--g100); border-radius: 3px; overflow: hidden; }
.fc-pools-bar { height: 100%; background: #0091d5; border-radius: 3px; }
.fc-pools-count { font: 700 0.68rem var(--hanken); color: var(--black); min-width: 1rem; text-align: right; flex-shrink: 0; }

/* ── COOLING CENTERS FEED CARD ────────────────────────────────────── */
.fc.fc-cooling { border-bottom: 1px solid var(--g200); padding: 1.25rem 1rem; }
.fc-cooling-label {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: 700 0.9rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); line-height: 1.35;
}
.fc-cooling-label:hover { color: #0d9488; }

/* ── FARMERS MARKET FEED CARD ─────────────────────────────────────── */
.fc.fc-markets { border-bottom: 1px solid var(--g200); padding: 1.25rem 1rem; }
.fc-markets-label {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: 700 0.9rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); line-height: 1.35;
}
.fc-markets-label:hover { color: var(--coral); }

/* ── 311 CIVIC FEED CARD ──────────────────────────────────────────── */
.fc-civic {
  border-bottom: 1px solid var(--g200);
  padding: 1.25rem 1rem;
}

/* Location pin on cards that open the map */
.fc-transit-label::before,
.fc-traffic-label::before,
.fc-civic-label::before,
.fc-citibike-label::before,
.fc-pools-label::before,
.fc-cooling-label::before,
.fc-markets-label::before,
.sidebar-tc-label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0C1.79 0 0 1.79 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.79 6.21 0 4 0zm0 5.5c-.83 0-1.5-.67-1.5-1.5S3.17 2.5 4 2.5 5.5 3.17 5.5 4 4.83 5.5 4 5.5z' fill='%23e83d1a'/%3E%3C/svg%3E") no-repeat center / contain;
  margin-right: 0.28em;
  vertical-align: -0.05em;
  flex-shrink: 0;
}

/* Arrow affordance on clickable card titles */
.fc-transit-label::after,
.fc-traffic-label::after,
.fc-civic-label::after,
.fc-citibike-label::after,
.fc-pools-label::after,
.fc-cooling-label::after,
.fc-markets-label::after,
.fc-wx-label::after,
.sidebar-tc-label::after { content: ' →'; font-weight: 400; }
.fc-civic-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.fc-civic-sub { margin: 0.25rem 0 0; font: 400 0.78rem var(--hanken); color: var(--g500); line-height: 1.4; }
.fc-civic-label {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: 700 0.9rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--black); line-height: 1.35;
}
.fc-civic-label:hover { color: var(--coral); }

/* Pill affordance for map/view link card headers */
.fc-map-pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--g400);
  border-radius: 100px;
  padding: 0.18rem 0.65rem 0.18rem 0.5rem;
}
.fc-map-pill:hover {
  border-color: var(--black);
  background: var(--g100);
  color: var(--black);
  text-decoration: none;
}

.fc-map-bar { margin: 0.3rem 0 0.15rem; }
.fc-map-chip {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font: 600 0.72rem var(--hanken); color: var(--white);
  background: var(--coral); border: none; border-radius: 4px;
  padding: 0.22rem 0.55rem; cursor: pointer; transition: opacity .1s;
}
.fc-map-chip:hover { opacity: 0.85; }
/* Feed card typography floor: body/meta text ≥ 0.78rem, interactive labels ≥ 0.75rem */
.fc-transit-summary { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.45rem; flex-wrap: wrap; }
.fc-transit-ok { font: 600 0.82rem var(--hanken); color: #2d8a4e; }
.fc-transit-issues { font: 700 0.82rem var(--hanken); color: #c0392b; }
.fc-transit-breakdown { font: 400 0.78rem var(--hanken); color: var(--g500); }
/* Data card header — transit, traffic, citibike */
.fc-data-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.fc-data-link { font: 500 0.75rem var(--hanken); color: var(--coral); text-decoration: none; white-space: nowrap; }
.fc-data-link:hover { text-decoration: underline; }
.fc-data-title {
  font: 900 1.05rem var(--hanken);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0;
}
.fc-data-map-link {
  display: inline-flex; align-items: center;
  font: 600 0.72rem var(--hanken);
  color: var(--white); background: var(--coral);
  border: none; border-radius: 4px;
  padding: 0.25rem 0.6rem; margin-left: auto;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: opacity .15s;
}
.fc-data-map-link:hover { opacity: 0.85; }
.fc-map-pin-icon { display: inline-block; vertical-align: -3px; margin-right: 0.35rem; flex-shrink: 0; color: var(--coral); }
/* Traffic 4-level dots */
.tf-level-row { display: flex; align-items: center; gap: 0.55rem; margin: 0.15rem 0 0.4rem; }
.tf-level-dots { display: flex; gap: 5px; }
.tf-level-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--g200); }
.tf-level-label { font: 700 0.88rem var(--hanken); }

.fc-civic-mini-chart { display: flex; flex-direction: column; gap: 0.1rem; }
.fc-civic-row {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0;
}
.fc-civic-icon { font-size: 0.8rem; width: 1rem; flex-shrink: 0; text-align: center; }
.fc-civic-name {
  font: 500 0.84rem var(--hanken); color: var(--black);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-civic-borough {
  font-weight: 700; color: var(--g600);
  flex: 0 0 5.5rem;
}
.fc-civic-bar-wrap {
  flex: 1; background: var(--g100); height: 5px; border-radius: 2px; overflow: hidden;
}
.fc-civic-bar { height: 100%; border-radius: 2px; }
.fc-civic-count {
  font: 700 0.78rem var(--hanken); color: var(--g500);
  width: 2rem; flex-shrink: 0; text-align: right;
}
.fc-civic-total { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.55rem 0 0.6rem; }
.fc-civic-total-num { font: 700 1.5rem var(--hanken); color: var(--black); line-height: 1; }
.fc-civic-total-label { font: 400 0.78rem var(--hanken); color: var(--g500); }
.fc-civic-topic-hd { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.fc-civic-topic-pill {
  font: 700 0.75rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--black); color: var(--white);
  padding: 0.22rem 0.65rem; flex-shrink: 0;
}
.fc-civic-topic-bars { display: flex; flex-direction: column; gap: 0.3rem; }

/* Week mode: hide service cards on mobile (they're already hidden on desktop) */
body.feed-week .fc.fc-weather,
body.feed-week .fc.fc-transit,
body.feed-week .fc.fc-traffic,
body.feed-week .fc.fc-sports { display: none; }

/* ── 311 CIVIC WEEK CARD ─────────────────────────────────────────── */
@media (min-width: 801px) { .fc.fc-civic-week { display: none; } }
.fc-civic-week {
  background: var(--white);
  border: 1px solid var(--g200);
  padding: 2.5rem 1.75rem;
}
.fc-civic-week-bars { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.75rem; }
.fc-civic-week-row { display: flex; align-items: center; gap: 0.35rem; }
.fc-civic-type-icon { flex: 0 0 1.25rem; display: flex; align-items: center; font-size: 0.8rem; }
.fc-civic-week-borough {
  font: 700 0.72rem var(--hanken); color: var(--g700);
  flex: 0 0 6rem; white-space: nowrap;
}
.fc-civic-week-bar-wrap {
  flex: 1; background: var(--g100); height: 6px; border-radius: 3px; overflow: hidden;
}
.fc-civic-week-bar { height: 100%; background: var(--coral); opacity: 0.5; border-radius: 3px; }
.fc-civic-week-count {
  font: 700 0.7rem var(--hanken); color: var(--g500);
  width: 2rem; text-align: right; flex-shrink: 0;
}

/* ── 311 CIVIC ────────────────────────────────────────────────────── */
#civic-view { display: none; }
#civic-view.active { display: block; max-width: calc(540px + 2.25rem + 300px); margin-left: auto; margin-right: auto; }
#sports-view { display: none; }
#sports-view.active {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.25rem; overflow-y: auto;
}

/* ── Shared view modal card (weather + sports) ── */
.view-modal-inner {
  background: var(--white);
  width: min(860px, 96vw);
  border-radius: 12px;
  box-shadow: 0 16px 64px rgba(0,0,0,.4);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding: 0 1.5rem 1.5rem;
}
.view-modal-close {
  position: absolute; top: .75rem; right: .75rem; z-index: 10;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--g200); background: var(--white);
  cursor: pointer; font: 500 1rem/1 var(--sans); color: var(--g600);
  display: flex; align-items: center; justify-content: center;
}
.view-modal-close:hover { border-color: var(--black); color: var(--black); }
#weather-view .view-hd { padding-top: 3.5rem; }
@media (max-width: 600px) {
  #weather-view.active, #sports-view.active, #about-view.active, #contribute-view.active {
    padding: 0; align-items: flex-end;
  }
  .view-modal-inner {
    width: 100%; border-radius: 16px 16px 0 0;
    max-height: 94svh; overflow-y: auto;
  }
}

/* ─── VIEW LOADER (transit / agenda transition) ──────────────── */
#view-loader {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 99; /* behind sticky masthead (z-index 100) so nav stays visible */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#view-loader.active { display: flex; }
#view-loader.leaving { animation: view-loader-out 0.4s ease forwards; }
@keyframes view-loader-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.civic-bor-pills {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.75rem 0 0.5rem;
}
.civic-bor-pill {
  font: 700 0.7rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem; border: 1.5px solid var(--g300);
  background: none; color: var(--black); opacity: 0.55; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s, opacity 0.12s;
}
.civic-bor-pill:hover { border-color: var(--black); background: var(--g100); opacity: 1; }
.civic-bor-pill.active { background: var(--black); color: var(--white); border-color: var(--black); opacity: 1; }

.civic-status-pills {
  display: flex; gap: 0.35rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--g200);
  margin-bottom: 0.75rem;
}
.civic-status-pill {
  font: 500 0.7rem var(--hanken); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem; border: 1px solid var(--g300);
  background: none; color: var(--g500); cursor: pointer;
}
.civic-status-pill.active { border-color: var(--black); color: var(--black); font-weight: 700; }
.civic-status-pill:hover { border-color: var(--g500); color: var(--black); }

/* chart */
.civic-chart-wrap { margin-bottom: 0.5rem; }
.civic-chart-total {
  font: 400 0.72rem var(--hanken); color: var(--g500);
  padding: 0 0 0.6rem; margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--g200);
}
.civic-chart-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.4rem; cursor: pointer; border-radius: 2px;
  transition: background 0.1s;
}
.civic-chart-row:hover { background: var(--g100); }
.civic-chart-row.active { background: var(--g100); outline: 1.5px solid var(--g300); }
.civic-chart-icon { font-size: 0.85rem; width: 1.1rem; flex-shrink: 0; text-align: center; }
.civic-chart-label {
  font: 500 0.78rem var(--hanken); color: var(--black);
  width: 9rem; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.civic-chart-row.active .civic-chart-label { font-weight: 700; }
.civic-chart-bar-wrap {
  flex: 1; background: var(--g100); height: 7px; border-radius: 2px; overflow: hidden;
}
.civic-chart-bar { height: 100%; border-radius: 2px; transition: width 0.25s ease; }
.civic-chart-count {
  font: 700 0.72rem var(--hanken); color: var(--g500);
  width: 2rem; flex-shrink: 0; text-align: right;
}
.civic-cat-infrastructure { background: #2471a3; }
.civic-cat-sanitation { background: #1a8a7a; }
.civic-cat-housing { background: #b7770d; }
.civic-cat-noise { background: #8b5cf6; }
.civic-cat-traffic { background: var(--coral); }
.civic-cat-environment { background: #2ecc71; }
.civic-cat-other { background: #888; }

/* drill-down */
#civic-drill { margin-top: 1rem; border-top: 1.5px solid var(--black); padding-top: 0.75rem; }
.civic-drill-hd {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 0.8rem var(--hanken); color: var(--black);
  margin-bottom: 0.75rem;
}
.civic-type-clear {
  font: 500 0.7rem var(--hanken); color: var(--g500);
  background: none; border: 1px solid var(--g300); padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.civic-type-clear:hover { color: var(--black); border-color: var(--black); }

#civic-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
@media (max-width: 600px) {
  #civic-list { grid-template-columns: 1fr; }
  .civic-chart-label { width: 7rem; }
}

.civic-card {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--g200);
}
.civic-type-row {
  display: flex; align-items: baseline; gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.civic-icon { font-size: 0.9rem; flex-shrink: 0; }
.civic-type-label {
  font: 600 0.8rem var(--hanken);
  color: var(--black);
  flex: 1;
}
.civic-desc { font-weight: 400; color: var(--g600); }
.civic-status {
  font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem; flex-shrink: 0;
}
.civic-status-open { background: #fdecea; color: var(--coral); }
.civic-status-inprogress { background: #fff3e0; color: #d4790a; }
.civic-status-other { background: var(--g100); color: var(--g600); }

.civic-address {
  font: 500 0.82rem var(--hanken);
  color: var(--black);
  margin-bottom: 0.2rem;
}
.civic-meta {
  font: 400 0.72rem var(--hanken);
  color: var(--g500);
}
.civic-cta-wrap {
  padding: 1.5rem 0 1rem;
  text-align: center;
}
.civic-cta {
  font: 600 0.72rem var(--hanken);
  color: var(--white); background: var(--coral);
  border: none; border-radius: 4px;
  padding: 0.55rem 1.25rem; display: inline-block;
  text-decoration: none; transition: opacity .15s;
}
.civic-cta:hover { opacity: 0.85; }
.sg-field { margin-bottom: 0.1rem; }

/* ── SPORTS FEED CARD ───────────────────────────────────────────── */
.fc-sports {
  background: transparent; border: none;
  border-bottom: 1px solid var(--g200);
  padding: 0.9rem 1rem; margin-bottom: 0;
  display: flex; gap: 0.65rem; align-items: flex-start;
}
.fc-live-badge {
  display: inline-flex; align-items: center;
  font: 700 0.6rem var(--hanken); text-transform: uppercase; letter-spacing: 0.06em;
  background: #a7d5bc; color: #0a5c30;
  padding: 0.18rem 0.52rem; flex-shrink: 0;
}
.fc-data-badge {
  display: inline-flex; align-items: center;
  font: 700 0.6rem var(--hanken); text-transform: uppercase; letter-spacing: 0.06em;
  background: #c2d9ff; color: #1a3d6b;
  padding: 0.18rem 0.52rem; flex-shrink: 0;
}
.fc-sports-list { display: flex; flex-direction: column; gap: 0; }
.fc-sports-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--g100); }
.fc-sports-row:last-child { border-bottom: none; }
.fc-sports-off { opacity: .55; }
.fc-sports-off-sport { font: 700 .65rem var(--hanken); text-transform: uppercase; letter-spacing: .06em; color: var(--g600); flex: 0 0 2.4rem; }
.fc-sports-off-teams { font: 400 .72rem var(--hanken); color: var(--g700); flex: 1; }
.fc-sports-off-next { font: 700 .65rem var(--hanken); color: var(--g500); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.fc-sports-logo { width: 1.5rem; height: 1.5rem; object-fit: contain; flex-shrink: 0; }
.fc-sports-tag { font: 700 .68rem var(--hanken); color: var(--g600); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 2.4rem; }
.fc-sports-teams { flex: 1; display: flex; flex-direction: column; gap: .05rem; }
.fc-sports-nyc-name { font: 700 .9rem var(--hanken); color: var(--black); }
.fc-sports-opp { font: 400 .8rem var(--hanken); color: var(--g600); }
.fc-sports-result { display: flex; align-items: center; gap: .3rem; }
.fc-sports-score { font: 700 .9rem var(--hanken); color: var(--black); }
.fc-sports-gametime { font: 400 .82rem var(--hanken); color: var(--g600); white-space: nowrap; }
.fc-sports-live { font: 700 .8rem var(--hanken); color: var(--coral); }
.fc-sports-wl { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 2px; font: 700 .6rem var(--hanken); }
.fc-sports-wl-w { background: #16a34a; color: var(--white); }
.fc-sports-wl-l { background: var(--g300); color: var(--white); }

/* ── SPORTS VIEW ────────────────────────────────────────────────── */
.sports-tabs { display: flex; gap: .35rem; padding: .65rem 1rem; overflow-x: auto; border-bottom: 1px solid var(--g200); scrollbar-width: none; }
.sports-tabs::-webkit-scrollbar { display: none; }
.sports-tab { background: none; border: 1px solid var(--g200); font: 700 .68rem var(--hanken); padding: .25rem .65rem; cursor: pointer; color: var(--g600); border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.sports-tab.active { background: var(--black); color: var(--white); border-color: var(--black); }
.sports-tab:hover:not(.active) { border-color: var(--black); color: var(--black); }
.sports-section-hd { font: 700 .65rem var(--hanken); text-transform: uppercase; letter-spacing: .07em; color: var(--g500); padding: .85rem 1rem .35rem; }
.sports-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--g200); margin: 0 0 1px; }

/* Individual game card */
.sp-card { background: var(--white); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.sp-sport-tag { font: 700 .65rem var(--hanken); text-transform: uppercase; letter-spacing: .06em; color: var(--g600); margin-bottom: .2rem; }
.sp-team { display: flex; align-items: center; gap: .45rem; padding: .15rem 0; }
.sp-team-nyc .sp-name { font-weight: 700; color: var(--black); }
.sp-logo { width: 1.35rem; height: 1.35rem; object-fit: contain; flex-shrink: 0; }
.sp-name { font: 400 .82rem var(--hanken); flex: 1; color: var(--g700); }
.sp-record { font: 400 .65rem var(--hanken); color: var(--g600); flex: 0 0 2.5rem; text-align: right; }
.sp-score { font: 700 .9rem var(--hanken); color: var(--g500); width: 1.75rem; text-align: right; }
.sp-score-win { color: var(--black); }
.sp-status { font: 400 .68rem var(--hanken); color: var(--g600); margin-top: .25rem; border-top: 1px solid var(--g100); padding-top: .3rem; }
.sp-status-final { color: var(--g500); }
.sp-status-live { color: var(--coral); font-weight: 700; }
.sp-winner-dot { display: inline-block; width: .38rem; height: .38rem; border-radius: 50%; background: var(--black); margin-left: .3rem; vertical-align: middle; }

/* ── SPORTS: UPCOMING SCHEDULE ──────────────────────────────────── */
.sports-upcoming { padding: 0 0 .5rem; }
.sp-sched-date { font: 700 .65rem var(--hanken); text-transform: uppercase; letter-spacing: .06em; color: var(--g500); padding: .6rem 1rem .25rem; background: var(--g100); border-bottom: 1px solid var(--g200); margin-top: 1px; }
.sp-sched-row { display: flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-bottom: 1px solid var(--g100); background: var(--white); }
.sp-sched-row:last-child { border-bottom: none; }
.sp-sched-logo { width: 1.1rem; height: 1.1rem; object-fit: contain; flex-shrink: 0; }
.sp-sched-team { font: 700 .78rem var(--hanken); color: var(--black); flex: 0 0 3.5rem; }
.sp-sched-loc { font: 400 .7rem var(--hanken); color: var(--g500); flex: 0 0 1.2rem; }
.sp-sched-opp { font: 400 .78rem var(--hanken); color: var(--g700); flex: 1; }
.sp-sched-tag { font: 700 .65rem var(--hanken); color: var(--g600); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 2.2rem; text-align: right; }
.sp-sched-time { font: 400 .72rem var(--hanken); color: var(--g600); flex: 0 0 4rem; text-align: right; white-space: nowrap; }

/* ── SPORTS: OFF-SEASON CARDS ───────────────────────────────────── */
.sp-offseason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--g200); margin-top: 1px; }
.sp-offseason-card { background: var(--white); padding: 1.75rem 1rem 1.5rem; text-align: center; }
.sp-offseason-teams { font: 700 .78rem var(--hanken); color: var(--black); margin: 0 0 .2rem; }
.sp-offseason-msg { font: 400 .72rem var(--hanken); color: var(--g500); margin: 0 0 .15rem; }
.sp-offseason-next { font: 700 .7rem var(--hanken); color: var(--coral); margin: 0; text-transform: uppercase; letter-spacing: .04em; }

/* ─── MAP MODAL ───────────────────────────────────────────────── */
#map-modal {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 1.25rem;
}
.map-modal-card {
  width: min(1160px,96vw); height: 82vh; border-radius: 12px;
  overflow: hidden; box-shadow: 0 16px 64px rgba(0,0,0,.4);
  background: var(--white); display: flex; flex-direction: column;
}
.map-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .85rem; background: var(--white);
  border-bottom: 1px solid var(--g200); flex-shrink: 0; gap: .5rem; min-height: 40px;
}
.map-modal-title {
  font: 700 0.72rem var(--hanken); text-transform: uppercase;
  letter-spacing: .06em; color: var(--black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-modal-close {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--g100); cursor: pointer;
  font: 500 1rem/1 var(--hanken); color: var(--black);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.map-modal-close:hover { background: var(--g200); }
.map-modal-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.map-modal-map { flex: 1; min-width: 0; }
#map-modal-iframe { width: 100%; height: 100%; border: none; display: block; }
.map-modal-summary {
  width: 272px; flex-shrink: 0; overflow-y: auto;
  background: var(--white); border-left: 1px solid var(--g200); padding: 0;
}
.map-modal-summary.mms-hidden { display: none !important; width: 0 !important; flex: none !important; border: none !important; overflow: hidden !important; }
.map-modal-body.mms-summary-hidden .map-modal-map { flex: 1 !important; }
.mms-panel-hd {
  display: flex; align-items: center; justify-content: flex-end;
  padding: .3rem .5rem; border-bottom: 1px solid var(--g200);
  position: sticky; top: 0; background: var(--white); z-index: 1;
}
.mms-panel-close {
  background: none; border: none; cursor: pointer;
  font: 400 0.8rem var(--hanken); color: var(--g400);
  line-height: 1; padding: .15rem .3rem; border-radius: 3px;
}
.mms-panel-close:hover { color: var(--black); background: var(--g100); }
.mms-panel-body { padding: .6rem .9rem .75rem; }
.map-drag-handle {
  display: none; width: 36px; height: 4px; background: var(--g300);
  border-radius: 2px; margin: .55rem auto .1rem; flex-shrink: 0; cursor: grab; touch-action: none;
}
@media (max-width: 700px) {
  #map-modal { padding: 0; align-items: flex-end; }
  .map-modal-card { width: 100%; height: 88svh; border-radius: 20px 20px 0 0; flex-direction: column; }
  .map-drag-handle { display: block; }
  .map-modal-hd { padding: .3rem .85rem .4rem; }
  .map-modal-close { width: 36px; height: 36px; font-size: 1.05rem; }
  .map-modal-body { flex-direction: column; }
  .map-modal-map { flex: 0 0 46svh; min-height: 0; }
  .map-modal-summary { width: 100%; flex: 1; border-left: none; border-top: 1px solid var(--g200); }
}

/* ─── MAP MODAL SUMMARY PANEL (.mms-*) ───────────────────────── */
.mms-section { margin-bottom: .9rem; }
.mms-hd { font: 700 0.65rem var(--hanken); text-transform: uppercase; letter-spacing: .07em; color: var(--g500); margin-bottom: .35rem; }
.mms-good { font: 400 0.8rem var(--hanken); color: #2d8a4e; }
.mms-meta { font: 400 0.72rem var(--hanken); color: var(--g500); margin-top: .2rem; }
.mms-foot { font: 400 0.65rem var(--hanken); color: var(--g600); margin-top: .6rem; border-top: 1px solid var(--g200); padding-top: .35rem; }
.mms-stat-row { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .15rem; }
.mms-stat-num { font: 700 1.35rem var(--hanken); line-height: 1; color: var(--black); }
.mms-stat-label { font: 400 0.72rem var(--hanken); color: var(--g600); }
.mms-alert-row { display: flex; align-items: center; gap: .4rem; padding: .18rem 0; border-bottom: 1px solid var(--g100); }
.mms-alert-row:last-child { border-bottom: none; }
.mms-alert-status { font: 700 0.72rem var(--hanken); }
.mms-alert-status.delayed { color: #e8901a; }
.mms-alert-status.suspended { color: #e83d1a; }
.mms-alert-status.modified { color: var(--g500); }
.mms-row { display: flex; justify-content: space-between; align-items: center; padding: .18rem 0; border-bottom: 1px solid var(--g100); font: 400 0.8rem var(--hanken); }
.mms-row:last-child { border-bottom: none; }
.mms-row-label { color: var(--black); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; padding-right: .35rem; }
.mms-row-val { font: 400 0.72rem var(--hanken); color: var(--g600); flex-shrink: 0; }
.mms-row-val.green { color: #0a5c30; font-weight: 700; }
.mms-icon { font: 400 0.82rem var(--hanken); width: 1.1rem; text-align: center; flex-shrink: 0; margin-right: .15rem; }

/* ── Your Stoop modal ─────────────────────────────────────────── */
#your-stoop-modal {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,.52);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
#ys-card {
  background: #fff; border-radius: 8px; width: min(480px, 94vw);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
#ys-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--g200); flex-shrink: 0;
}
#ys-title { font: 700 .88rem var(--hanken,sans-serif); text-transform: uppercase; letter-spacing: .06em; }
#ys-tagline { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--g500); font-size: .78rem; }
#ys-close { background: none; border: none; cursor: pointer; font-size: .9rem; color: #888; padding: .15rem .4rem; border-radius: 50%; }
#ys-close:hover { background: var(--g100); }
#ys-body { overflow-y: auto; padding: .9rem 1.1rem; flex: 1; }
#ys-intro { font: 700 1.05rem var(--hanken); color: var(--black); margin: 0 0 1.1rem; }
.ys-section { margin-bottom: 1.25rem; }
.ys-section-hd { font: 700 .72rem var(--roboto,sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--g500); margin-bottom: .55rem; }
.ys-hint { font-weight: 400; color: var(--g500); }
.ys-toggles { display: flex; flex-wrap: wrap; gap: .35rem; }
.ys-toggle {
  font: 600 .76rem var(--hanken,sans-serif); padding: .32rem .75rem;
  border: 1.5px solid var(--g200); border-radius: 20px; background: none;
  cursor: pointer; color: var(--g500); transition: all .12s;
}
.ys-toggle.active {
  background: var(--coral); border-color: var(--coral); color: #fff;
}
.ys-toggle.ys-multi.active { background: var(--coral); border-color: var(--coral); color: #fff; }
.ys-toggle:hover:not(.active) { border-color: var(--black); color: var(--black); }
.ys-toggle.ys-multi:hover:not(.active) { border-color: var(--coral); color: var(--coral); }
#ys-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.1rem; border-top: 1px solid var(--g200); flex-shrink: 0;
  font-size: .75rem;
}
#ys-zip-wrap {
  display: flex; gap: .4rem; margin-top: .55rem;
}
#ys-zip-input {
  flex: 1; border: 1.5px solid var(--g200); border-radius: 6px;
  padding: .35rem .65rem; font: 400 .82rem var(--hanken,sans-serif);
  outline: none; color: var(--black);
}
#ys-zip-input:focus { border-color: var(--black); }
#ys-zip-btn {
  background: var(--black); color: #fff; border: none; border-radius: 6px;
  padding: .35rem .85rem; font: 600 .76rem var(--hanken,sans-serif); cursor: pointer;
}
#ys-zip-btn:hover { background: #333; }
#ys-zip-status { font-size: .72rem; color: var(--g500); margin-top: .3rem; min-height: 1em; }
#ys-nl-cta {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem;
  background: var(--coral-light); border: 1.5px solid var(--coral);
  border-radius: 6px;
}
#ys-nl-copy { font-size: .82rem; color: var(--black); line-height: 1.45; flex: 1; }
#ys-nl-btn {
  flex-shrink: 0;
  background: var(--coral); color: #fff; border: none; border-radius: 999px;
  font: 700 .75rem var(--hanken,sans-serif); letter-spacing: .04em;
  padding: .42rem .95rem; cursor: pointer; white-space: nowrap;
}
#ys-nl-btn:hover { background: #c9320f; }
#ys-save-msg { color: #2d8a4e; font-weight: 700; font-size: .72rem; }
#ys-foot-links { display: flex; align-items: center; gap: .4rem; }
.ys-foot-link {
  background: none; border: 1.5px solid var(--g200); border-radius: 20px;
  cursor: pointer; font: 600 .78rem var(--hanken,sans-serif); color: var(--g600);
  padding: .28rem .8rem; transition: all .12s;
}
.ys-foot-link:hover { border-color: var(--black); color: var(--black); }
.ys-foot-sep { display: none; }
#ys-reset { background: none; border: none; cursor: pointer; font-size: .72rem; color: var(--g600); text-decoration: underline; }
#ys-reset:hover { color: var(--black); }

/* Agenda filter modal */
#agenda-filter-modal {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,.52);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
#af-card {
  background: #fff; border-radius: 8px; width: min(480px, 94vw);
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
}
#af-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--g200); flex-shrink: 0;
}
#af-title { font: 700 .88rem var(--hanken,sans-serif); text-transform: uppercase; letter-spacing: .06em; }
#af-close { background: none; border: none; cursor: pointer; font-size: .9rem; color: #888; padding: .15rem .4rem; border-radius: 50%; }
#af-close:hover { background: var(--g100); }
#af-body { overflow-y: auto; padding: .9rem 1.1rem; flex: 1; }
#af-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.1rem; border-top: 1px solid var(--g200); flex-shrink: 0;
}
#af-done {
  background: var(--black); color: #fff; border: none; border-radius: 999px;
  font: 700 .76rem var(--hanken,sans-serif); padding: .42rem 1.2rem; cursor: pointer;
}
#af-done:hover { background: #333; }
#af-reset { background: none; border: none; cursor: pointer; font-size: .72rem; color: var(--g600); text-decoration: underline; }
#af-reset:hover { color: var(--black); }

#agenda-dateline {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-bottom: 0.75rem;
  text-align: center;
}

/* ── Save button + save count ──────────────────────────────────── */
.ev-save-btn {
  display: inline-flex; align-items: center;
  background: var(--white); border: 1px solid var(--g300); border-radius: 20px;
  cursor: pointer; color: var(--g500);
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem; font-family: var(--hanken);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap;
  flex-shrink: 0;
}
.ev-save-btn:hover { color: var(--g800); border-color: var(--g500); }
.ev-save-btn.saved { color: var(--coral); border-color: var(--coral); }
.ev-save-btn--icon {
  background: none; border: none; border-radius: 0;
  padding: 0.1rem 0.25rem;
  color: var(--g400);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: color 0.15s;
}
.ev-save-btn--icon:hover { color: var(--g600); }
.ev-save-btn--icon.saved { color: var(--coral); }
.ev-heart-svg { display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; }
.ev-save-btn--icon.saved .ev-heart-svg { fill: currentColor; }

.ev-save-count {
  display: inline-block;
  font-size: .7rem;
  color: var(--g600);
  margin-top: .15rem;
}


/* Filter card: hide secondary controls when in saved mode */
.saved-mode #agenda-boros-quick,
.saved-mode #agenda-cats,
.saved-mode #agenda-genres-row,
.saved-mode #agenda-free-row {
  display: none;
}

/* ─── WEATHER PAGE (/weather) ────────────────────────────── */
#wx-page-outer {
  max-width: calc(540px + 2.25rem + 300px);
  margin-left: auto;
  margin-right: auto;
  padding: 1.25rem 0 0;
}
@media (max-width: 800px) { #wx-page-outer { padding: 0.5rem 0.5rem 0; } }

#wx-page-outer #weather-alert-banner {
  margin: 0 0 0.75rem;
  max-width: unset;
  margin-left: 0;
  margin-right: 0;
}

#wx-dateline {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-bottom: 0.75rem;
  text-align: center;
}

.wx-zip-bar { display: flex; align-items: center; gap: 0.35rem; }
.wx-zip-bar input {
  border: 1.5px solid var(--g300);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font: 500 0.82rem var(--sans);
  width: 90px;
  outline: none;
  background: var(--white);
  color: var(--black);
}
.wx-zip-bar input:focus { border-color: var(--black); }
.wx-zip-bar button {
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1.5px solid var(--black);
  background: var(--black);
  color: var(--white);
  font: 600 0.78rem var(--sans);
  cursor: pointer;
}
.wx-zip-bar button:hover { opacity: 0.85; }
.wx-zip-bar .wx-clear-btn {
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  border: 1.5px solid var(--g300);
  background: none;
  color: var(--g500);
  font: 500 0.78rem var(--sans);
  cursor: pointer;
}
.wx-zip-bar .wx-clear-btn:hover { border-color: var(--black); color: var(--black); }

#wx-content {
  background: var(--white);
  border: 1px solid var(--g200);
  padding: 1.25rem 1.25rem 2rem;
}
@media (max-width: 800px) { #wx-content { padding: 1rem 0.75rem 2rem; } }

.wx-section-hd {
  font: 700 0.65rem var(--hanken, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--g500);
  margin: 2.25rem 0 0.6rem;
}
#weather-borough-section { margin-top: 1.25rem; }
#weather-borough-section .wx-section-hd { margin-top: 0; }
#weather-aqi-section    { margin-top: 2.75rem; border-top: 1px solid #fcfcfc; }
#weather-metro-section  { margin-top: 2.75rem; border-top: 1px solid #fcfcfc; }
#weather-news-section   { margin-top: 2.75rem; border-top: 1px solid #fcfcfc; }
#weather-zip-result:not(:empty) { margin-top: 0; }
#wx-content .ap-related-section { margin-top: 2.75rem; border-top: 1px solid #fcfcfc; }
#wx-content .fc { padding: 0; margin: 0; }
#wx-content .fc-aqi { padding: 0; border: none; background: transparent; }

/* Your Weather modal */
.yw-section { margin-top: 1.1rem; }
.yw-section-label {
  font: 700 0.6rem var(--hanken);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--g500);
  margin-bottom: 0.45rem;
}
.yw-section-body {
  font: 400 0.82rem var(--hanken);
  color: var(--g700);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}
.yw-divider { border: none; border-top: 1px solid var(--g200); margin: 1.25rem 0 0; }
#yw-subscribe-form .nl-email-input { width: 100%; margin-top: 0; margin-bottom: 0.65rem; }
#yw-subscribe-form .nl-submit-btn { width: 100%; margin-top: 0; }

.zip-day { gap: 0.5rem; }
.zip-day .zd-name {
  width: auto;
  min-width: 0;
  flex: 1 1 5rem;
  max-width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zip-day .zd-left { flex: 1; min-width: 0; overflow: hidden; }

/* ── Onboarding tour ───────────────────────────────────────────────────────── */
#ob-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.28); z-index: 8000; pointer-events: none; }
#ob-tooltip {
  position: fixed; z-index: 8001; background: var(--white);
  border: 1px solid var(--g200); border-radius: 6px;
  padding: 1rem 1rem 0.75rem; width: 240px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
#ob-tooltip::before {
  content: ''; position: absolute; bottom: 100%; left: var(--ob-arrow, 50%);
  transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: var(--g200);
}
#ob-tooltip::after {
  content: ''; position: absolute; bottom: calc(100% - 1px); left: var(--ob-arrow, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--white);
}
.ob-x { position: absolute; top: 0.4rem; right: 0.5rem; background: none; border: none; cursor: pointer; font-size: 0.7rem; color: var(--g400); padding: 0; line-height: 1; }
.ob-step { font: 700 0.6rem var(--hanken); letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); margin: 0 0 0.35rem; }
.ob-text { font: 400 0.8rem var(--hanken); color: var(--black); line-height: 1.5; margin: 0 0 0.75rem; }
.ob-foot { display: flex; justify-content: space-between; align-items: center; }
.ob-skip { background: none; border: none; cursor: pointer; font: 400 0.7rem var(--hanken); color: var(--g500); padding: 0; }
.ob-next { background: var(--black); color: var(--white); border: none; cursor: pointer; font: 700 0.68rem var(--hanken); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 999px; }
.ob-highlight { outline: 2px solid var(--coral) !important; outline-offset: 3px; position: relative; z-index: 8001; }

/* ── Mission "Rate the Feed" card ──────────────────────────────────── */
.fc-mission { background: var(--coral); color: var(--white); padding: 1.5rem 1.5rem 1.25rem; }
.fc-mission-eyebrow { font: 700 0.62rem var(--hanken); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 0.6rem; }
.fc-mission-headline { font: 400 2.5rem 'Oi', serif; line-height: 1.0; color: var(--white); margin: 0 0 0.55rem; }
.fc-mission-sub { font: 700 1.05rem var(--hanken); color: var(--white); margin: 0 0 0.65rem; }
.fc-mission-body { font: 400 0.9rem var(--hanken); color: rgba(255,255,255,0.82); line-height: 1.55; margin: 0 0 1rem; }
.fc-mission-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fc-mission-link { font: 700 0.85rem var(--hanken); color: var(--white); text-decoration: underline; }
.fc-mission-link:hover { opacity: 0.7; }
.fc-mission-export { background: none; border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.65); font: 600 0.65rem var(--hanken); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.7rem; cursor: pointer; border-radius: 3px; transition: color 0.15s, border-color 0.15s; }
.fc-mission-export:hover { color: var(--white); border-color: rgba(255,255,255,0.7); }

/* Sidebar variant */
/* ─── FEED — SUBSCRIBE PROMO CARD (mobile only) ─────────── */
.fc-subscribe-promo {
  background: var(--coral);
  padding: 1.1rem 1rem 1rem;
  border-bottom: none;
}
.fc-sub-eyebrow {
  font: 800 0.54rem var(--hanken);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.4rem;
}
.fc-sub-hed {
  font: 700 1.05rem var(--hanken);
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.fc-sub-body {
  font: 400 0.82rem var(--hanken);
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
  margin: 0 0 0.75rem;
}
.fc-sub-btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--white);
  border: none;
  border-radius: 6px;
  color: var(--coral);
  font: 700 0.78rem var(--hanken);
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
  min-height: 36px;
}
.fc-sub-btn:hover { opacity: 0.88; }
@media (max-width: 799px) { .dateline-sub-btn { display: none; } }
.fc-sub-dismiss {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: rgba(255,255,255,0.2); border: none; border-radius: 50%;
  width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--white); cursor: pointer;
}
.fc-sub-dismiss:hover { background: rgba(255,255,255,0.35); }
.fc-subscribe-promo { position: relative; }
@media (min-width: 800px) { .fc-subscribe-promo { display: none; } }
.ap-nl-cta {
  margin-top: 1.25rem; padding: 0.85rem 0 0;
  border-top: 1px solid var(--g100);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ap-nl-cta-text { font: 400 0.82rem var(--hanken); color: var(--g600); }
.ap-nl-cta-btn {
  align-self: flex-start; background: none; border: 1.5px solid var(--coral);
  border-radius: 999px; padding: 0.35rem 0.9rem;
  font: 600 0.78rem var(--hanken); color: var(--coral); cursor: pointer;
}
.ap-nl-cta-btn:hover { background: var(--coral); color: var(--white); }

/* ─── SIDEBAR — SUBSCRIBE PROMO ─────────────────────────── */
.sidebar-sub-card {
  padding: 1rem;
  background: var(--coral);
  margin-bottom: 1rem;
}
.sidebar-sub-card.sidebar-sub-confirmed {
  background: var(--g100);
  border: 1px solid var(--g200);
}
.sidebar-sub-eyebrow {
  font: 800 0.54rem var(--hanken);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.4rem;
}
.sidebar-sub-confirmed .sidebar-sub-eyebrow {
  color: var(--coral);
  font-size: 0.66rem;
}
.sidebar-sub-confirmed .sidebar-sub-hed {
  color: var(--g800);
  margin-bottom: 0.25rem;
}
.sidebar-sub-confirmed .sidebar-sub-body {
  color: var(--g600);
  font-size: 0.83rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.sidebar-sub-hed {
  font: 700 1rem var(--hanken);
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.sidebar-sub-body {
  font: 400 0.8rem var(--hanken);
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
  margin: 0 0 0.75rem;
}
.sidebar-sub-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border: none;
  border-radius: 6px;
  color: var(--coral);
  font: 700 0.78rem var(--hanken);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
  text-decoration: none;
}
.sidebar-sub-btn:hover { opacity: 0.88; }

/* ─── SUBSCRIBER STATUS CARD (mobile feed) ──────────────────── */
.fc-subscriber-status {
  background: var(--g100);
  border-bottom: none;
  padding: 1rem 1rem 0.875rem;
}
.fc-subscriber-status .fc-sub-eyebrow {
  color: var(--coral);
  font-size: 0.66rem;
}
.fc-subscriber-status .fc-sub-hed {
  color: var(--g800);
  font-size: 1rem;
}
.fc-subscriber-status .fc-sub-body {
  color: var(--g600);
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
}
.fc-sub-nbhd {
  display: inline-block;
  font: 600 0.68rem var(--hanken);
  color: var(--white);
  background: var(--coral);
  border-radius: 999px;
  padding: 0.1em 0.55em;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.fc-sub-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.1rem;
}
.fc-sub-link { font: 500 0.8rem var(--hanken); color: var(--coral); text-decoration: none; }
.fc-sub-link:hover { text-decoration: underline; }
.fc-sub-boro-btn {
  font: 600 0.75rem var(--hanken);
  color: var(--coral);
  background: none; border: 1.5px solid var(--coral);
  border-radius: 999px; padding: 0.2em 0.7em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fc-sub-boro-btn:hover { background: var(--coral); color: var(--white); }
@media (min-width: 800px) { .fc-subscriber-status { display: none; } }

/* ─── "ALREADY SUBSCRIBED?" TOGGLE (feed card + sidebar) ────── */
.fc-sub-login { margin-top: 0.7rem; }
.fc-sub-login-link {
  font: 400 0.75rem var(--hanken);
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.fc-sub-login-link:hover { color: rgba(255,255,255,0.9); }
.fc-sub-login-form { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.fc-sub-login-email {
  padding: 0.4rem 0.6rem;
  border: none; border-radius: 6px;
  font: 400 0.8rem var(--hanken);
  background: rgba(255,255,255,0.9);
  color: var(--g900); width: 100%;
}
.fc-sub-login-submit {
  align-self: flex-start;
  padding: 0.35rem 0.9rem;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  font: 600 0.75rem var(--hanken);
  color: var(--white); cursor: pointer;
}
.fc-sub-login-submit:hover { background: rgba(255,255,255,0.32); }
.fc-sub-login-msg { font: 400 0.78rem var(--hanken); color: rgba(255,255,255,0.85); }

/* ─── SIDEBAR SUBSCRIBER LINKS ───────────────────────────────── */
.sidebar-sub-link {
  display: block; margin-top: 0.55rem;
  font: 500 0.75rem var(--hanken);
  color: var(--g500); text-decoration: none;
}
.sidebar-sub-link:hover { color: var(--g700); text-decoration: underline; }
.sidebar-sub-login { margin-top: 0.6rem; }
.sidebar-sub-login-link {
  font: 400 0.75rem var(--hanken);
  color: rgba(255,255,255,0.65);
  text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.sidebar-sub-login-link:hover { color: rgba(255,255,255,0.9); }

/* ─── SIDEBAR — NOW IN NYC ───────────────────────────────── */
#sidebar-now-nyc { margin-bottom: 1rem; }
#sidebar-now-nyc .fc-now-nyc { border: 1px solid var(--g200); }

.sidebar-mission { padding: 0.875rem 1rem 0.875rem; background: var(--coral); margin-bottom: 0.75rem; }
.sidebar-mission-eyebrow { font: 700 0.54rem var(--hanken); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 0.4rem; }
.sidebar-mission-headline { font: 400 1.7rem 'Oi', serif; line-height: 1.0; color: var(--white); margin: 0 0 0.4rem; }
.sidebar-mission-sub { font: 700 0.82rem var(--hanken); color: var(--white); margin: 0 0 0.5rem; }
.sidebar-mission-body { font: 400 0.82rem var(--hanken); color: rgba(255,255,255,0.8); line-height: 1.5; margin: 0 0 0.75rem; }
.sidebar-mission-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.sidebar-mission-link { font: 700 0.75rem var(--hanken); color: var(--white); text-decoration: underline; }
.sidebar-mission-link:hover { opacity: 0.7; }
.sidebar-mission-export { background: none; border: 1px solid rgba(255,255,255,0.32); color: rgba(255,255,255,0.62); font: 600 0.58rem var(--hanken); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.55rem; cursor: pointer; border-radius: 3px; }
.sidebar-mission-export:hover { color: var(--white); border-color: rgba(255,255,255,0.65); }

/* ── Big Promo card (public-service / promotional, dynamic bg color) ── */
.fc-big-promo { color: #fff; padding: 1.5rem 1.5rem 1.25rem; }
.fc-big-promo-eyebrow { font: 700 0.6rem var(--hanken); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 0.5rem; }
.fc-big-promo-headline { font: 400 2.2rem 'Oi', serif; line-height: 1.0; color: #fff; margin: 0 0 0.3rem; }
.fc-big-promo-sub { font: 700 1rem var(--hanken); color: #fff; margin: 0 0 0.65rem; }
.fc-big-promo-body { font: 400 0.88rem var(--hanken); color: rgba(255,255,255,0.84); line-height: 1.6; margin: 0 0 1rem; }
.fc-big-promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fc-big-promo-link { font: 700 0.85rem var(--hanken); color: #fff; text-decoration: underline; }
.fc-big-promo-link:hover { opacity: 0.75; }
.fc-big-promo-share { background: none; border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.75); font: 600 0.65rem var(--hanken); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.7rem; cursor: pointer; border-radius: 3px; transition: color 0.15s, border-color 0.15s; }
.fc-big-promo-share:hover { color: #fff; border-color: rgba(255,255,255,0.7); }

/* ── Social media cards (verified X/Twitter accounts) ── */
.fc-social { padding: 0.9rem 1.25rem 0.8rem; border-left: 3px solid #1d9bf0; }
.fc-social-hd { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.5rem; gap: 0.5rem; }
.fc-social-src { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.fc-social-name { font: 700 0.82rem var(--hanken); color: var(--text); }
.fc-social-handle { font: 400 0.78rem var(--hanken); color: var(--g400); }
.fc-social-badge { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; background: #1d9bf0; color: #fff; border-radius: 50%; font-size: 0.5rem; font-weight: 900; line-height: 1; flex-shrink: 0; }
.fc-social-icon { color: var(--g400); flex-shrink: 0; line-height: 0; }
.fc-social-body { display: block; font: 400 0.88rem var(--hanken); color: var(--text); line-height: 1.55; margin: 0 0 0.6rem; text-decoration: none; }
.fc-social-body:hover { color: var(--coral); }
.fc-social-ft { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fc-social-time { font: 400 0.73rem var(--hanken); color: var(--g400); }
.fc-social-link { font: 700 0.73rem var(--hanken); color: var(--coral); text-decoration: none; }
.fc-social-link:hover { text-decoration: underline; }