/* Liveable Issaquah — City Council Digest shared styles. Mirrors the
   existing site's design system: sage gradient backdrop, white cards with
   cream gradient and sage borders, forest-to-olive accent gradients,
   system font. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sage-light: #a8c09a;
  --sage-mid: #c9d5b7;
  --forest: #4a7c59;
  --olive: #6b8e23;
  --cream: #f5f9f3;
  --mist: #e8f0e2;
  --gray-line: #e0e0e0;
  --text-1: #333;
  --text-2: #666;
  --text-3: #999;
  --warning-bg: #fbf7ec;
  --warning-fg: #5b4612;
  --warning-border: #d6a93a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--text-1);
  background: linear-gradient(135deg, var(--sage-light) 0%, var(--sage-mid) 100%);
  min-height: 100vh;
}

a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---- Header ---- */
.site-header {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky; top: 0; z-index: 100;
}
/* Horizontal padding lives here (not on .container) because the nav
   IS the container in our markup — the more-specific .site-header nav
   selector would otherwise blank out .container's 0 20px padding,
   leaving the logo flush to the screen edge. Using 20px to match
   liveableissaquah.org's main pages. */
.site-header nav { padding: 1rem 20px; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo {
  font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(135deg, var(--forest) 0%, var(--olive) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-decoration: none;
}
.nav-links { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
.nav-links a { color: var(--text-1); font-weight: 500; transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--forest); text-decoration: none; }
.nav-links a.active { border-bottom: 2px solid var(--forest); padding-bottom: 2px; }

/* ---- Hamburger menu (mobile) ----
   Mirrors the layout used on liveableissaquah.org's main pages so the
   header looks identical when a visitor jumps between the digest and
   the rest of the site:
     - logo left-anchored
     - hamburger right-anchored (via flex space-between, NOT margin-auto,
       so it stays at the right edge regardless of the menu's open state)
     - nav-links absolutely positioned BELOW the header, full-width drop
*/
.hamburger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.5rem;
}
.hamburger span {
  display: block; width: 24px; height: 3px; background: var(--text-1);
  border-radius: 2px; margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

@media (max-width: 768px) {
  .hamburger { display: block; }
  /* nav must be position: relative so the absolute nav-links menu
     anchors to it (not the page) — matches liveableissaquah.org.
     Keep horizontal padding here (not on .container) so logo isn't
     flush against the screen edge on phones. */
  .site-header nav { position: relative; padding: 1rem 20px; }
  .site-header .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    padding: 1rem 20px;
    gap: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    align-items: stretch;
  }
  .site-header .nav-links.active { display: flex; }
  .site-header .nav-links li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mist);
  }
  .site-header .nav-links li:last-child { border-bottom: 0; }
  .site-header .nav-links a.active {
    border-bottom: 0;  /* underline collides with li bottom border */
  }
}

/* ---- Hero ---- */
.hero {
  padding: 4rem 0 2rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(168,192,154,0.55) 0%, rgba(107,142,35,0.45) 100%), #6f8c5c;
  color: white;
}
.hero h1 {
  font-size: 3rem; margin-bottom: 0.75rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 25px rgba(0,0,0,0.3);
}
.hero p.tagline {
  font-size: 1.15rem; max-width: 720px; margin: 0 auto 2rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.search {
  background: rgba(255,255,255,0.97); border-radius: 14px;
  max-width: 640px; margin: 0 auto; padding: 1rem;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  display: flex; gap: 0.75rem;
}
.search input {
  flex: 1; padding: 0.85rem 1rem; border: 2px solid var(--gray-line);
  border-radius: 10px; font-size: 1rem; font-family: inherit;
}
.search input:focus { outline: none; border-color: var(--forest); }
.search button {
  padding: 0.85rem 1.5rem; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--olive) 100%);
  color: white; font-weight: 600; cursor: pointer;
}

/* ---- Card patterns ---- */
.card {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist);
  border-radius: 15px;
  padding: 2rem;
}
.card.compact { padding: 1.25rem 1.5rem; }
.card-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .card-grid { grid-template-columns: 1fr; }
  .card-grid.three { grid-template-columns: 1fr; }
}

/* ---- Stats ---- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat .num {
  font-size: 1.6rem; font-weight: 600; color: var(--forest);
}
.stat .label { font-size: 0.8rem; color: var(--text-2); }

/* ---- Sections (white panels over the sage gradient) ---- */
.panel {
  background: white;
  padding: 2rem 0 3rem;
}
.panel.tight { padding: 2rem 0; }
.panel h2 {
  font-size: 1.8rem; margin-bottom: 1rem; color: var(--text-1);
}
.panel h3 {
  font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--forest);
}

/* ---- Pills ---- */
.pill {
  display: inline-block; font-size: 0.8rem; padding: 0.2rem 0.6rem;
  border-radius: 6px; background: var(--mist); color: var(--forest);
  font-weight: 500;
}
.pill.warn { background: var(--warning-bg); color: var(--warning-fg); }
.pill.cancelled { background: #fde9e9; color: #a32d2d; font-weight: 600; }
.pill.upcoming { background: #e6f1fb; color: #185fa5; font-weight: 600; }

/* ---- Upcoming-meeting banner ---- */
.upcoming-banner {
  background: #e6f1fb;
  border-left: 4px solid #185fa5;
  border-radius: 0 12px 12px 0;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem; color: #0c447c;
  line-height: 1.5;
}
.upcoming-banner.tentative {
  background: #fff7e1;
  border-left-color: #b8821a;
  color: #6a4807;
}
/* "Meeting concluded — minutes pending" — neutral gray-green palette
   so it doesn't compete with the bright blue Upcoming banner. */
.upcoming-banner.concluded {
  background: #f1f4ed;
  border-left-color: var(--forest);
  color: #2c4a1f;
}
.upcoming-banner.concluded em { font-style: italic; }
.tentative-pill {
  display: inline-block; vertical-align: middle;
  background: #fff3d4; color: #7a5708;
  border: 1px solid #e3c46f;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 0.4rem;
}
.new-pill {
  display: inline-block; vertical-align: middle;
  background: #e6f6e8; color: #2a6c34;
  border: 1px solid #a8d4af;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 0.4rem;
}

/* ---- Action buttons (secondary outline + primary gradient) ---- */
.btn {
  display: inline-block; padding: 0.6rem 1.1rem; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 0; transition: transform 0.2s, box-shadow 0.2s;
}
.btn.primary {
  color: white;
  background: linear-gradient(135deg, var(--forest) 0%, var(--olive) 100%);
}
.btn.primary:hover {
  transform: translateY(-2px); box-shadow: 0 8px 16px rgba(74,124,89,0.3);
  text-decoration: none;
}
.btn.secondary {
  color: var(--forest); background: white; border: 2px solid var(--mist);
}
.btn.secondary:hover { border-color: var(--forest); text-decoration: none; }

/* ---- Meeting page ---- */
/* ---- Thread timeline (Layer 3 — dedicated thread pages) ---- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-row { display: flex; gap: 0.85rem; }
.timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.timeline-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: white; border: 3px solid var(--forest); margin-top: 0.7rem;
}
.timeline-dot.current { background: var(--forest); }
.timeline-line { flex: 1; width: 2px; background: var(--mist); margin-top: 4px; min-height: 30px; }
.timeline-card {
  flex: 1; background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px;
  padding: 0.85rem 1.1rem; margin-bottom: 0.85rem;
}
.timeline-meta { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.timeline-date {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem;
  color: var(--text-3); font-weight: 600;
}
.timeline-body { font-weight: 600; color: var(--forest); font-size: 0.95rem; }
.timeline-title { color: var(--text-1); margin-top: 0.3rem; font-size: 0.9rem; }
.timeline-action { color: var(--text-2); font-size: 0.82rem; margin-top: 0.25rem; }
.timeline-vote { font-size: 0.82rem; font-weight: 600; margin-top: 0.25rem; }
.timeline-excerpt { color: var(--text-1); font-size: 0.85rem; line-height: 1.55; margin-top: 0.4rem; }
.timeline-link { display: inline-block; margin-top: 0.4rem; color: var(--forest); font-weight: 600; font-size: 0.82rem; }
.timeline-out { font-size: 0.78rem; color: var(--text-3); font-style: italic; margin-top: 0.3rem; }

/* ---- Meeting-page thread strip (Layer 2) ---- */
/* ---------- Lifecycle chips on the meeting page ----------
   Replaces the old stacked thread-strips (which took ~120px each).
   Each chip is a <details> that expands to show the mini-timeline +
   prev / next nav. Multiple chips wrap inline. */
.lifecycle-chips {
  margin: 0.75rem 0;
  display: flex; flex-direction: column; gap: 4px;
}
.lifecycle-chips .lc-label {
  font-size: 0.78rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500;
  margin-bottom: 0.25rem;
}
.lc-chip {
  background: white; border: 1px solid var(--mist); border-radius: 8px;
  transition: border-color 0.12s, background 0.12s;
  width: 100%;
  min-width: 0;
}
.lc-chip:hover { border-color: var(--sage-mid); }
.lc-chip[open] {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border-color: var(--sage-mid);
}
.lc-chip > summary {
  list-style: none; cursor: pointer;
  padding: 7px 12px;
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.84rem;
  width: 100%;
}
.lc-chip > summary::-webkit-details-marker { display: none; }
.lc-chip > summary::before {
  content: '▸'; color: var(--text-3); font-size: 0.7rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.lc-chip[open] > summary::before { transform: rotate(90deg); color: var(--forest); }
.lc-chip[open] > summary { display: flex; padding: 10px 14px; border-bottom: 1px solid var(--mist); }
/* Collapsed: title truncates to one line with ellipsis. */
.lc-chip-name {
  color: var(--forest); font-weight: 500;
  min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 36em;
}
/* Expanded: title wraps fully so the user sees the whole thing. */
.lc-chip[open] .lc-chip-name {
  white-space: normal; overflow: visible; text-overflow: clip;
  max-width: none;
}
.lc-chip-ident {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.75rem; color: var(--forest);
  background: var(--mist); padding: 1px 6px; border-radius: 4px;
}
.lc-chip-progress {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.74rem; color: var(--text-3);
  flex-shrink: 0;
  margin-left: auto;  /* pushes the dot-trail to the right edge */
}
/* Mini-dots that walk through a lifecycle's stops, with directional
   arrows between them so the chip reads as "this thing is moving". */
.lc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mist); border: 1px solid var(--sage-mid);
  flex-shrink: 0;
}
.lc-dot.past { background: var(--sage-mid); border-color: var(--sage-light); }
.lc-dot.current {
  width: 9px; height: 9px;
  background: var(--forest); border-color: var(--forest);
  box-shadow: 0 0 0 2px rgba(74,124,89,0.18);
}
.lc-arrow {
  color: var(--sage-light); font-size: 0.7rem; line-height: 1;
  margin: 0 -1px; flex-shrink: 0;
}
.lc-progress-text {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
/* When the chip is collapsed and very long, hide the progress text
   to avoid cramping the dots. */
.lc-chip:not([open]) .lc-progress-text { display: none; }
.lc-chip-body { padding: 0.65rem 0.95rem 0.85rem; }
.lc-trail {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  margin-bottom: 0.6rem;
}
.lc-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.lc-btn {
  font-size: 0.78rem; padding: 4px 10px;
  border: 1px solid var(--mist); border-radius: 6px;
  background: white; color: var(--text-2); text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lc-btn:hover {
  background: var(--cream); color: var(--text-1); border-color: var(--sage-mid);
  text-decoration: none;
}
.lc-btn.primary {
  background: var(--forest); color: white; border-color: var(--forest);
  font-weight: 500;
}
.lc-btn.primary:hover { background: #3a6447; }

/* Compact meeting-header card */
.meeting-header.compact { padding: 1rem 1.25rem; }
.meeting-header.compact h1 { font-size: 1.6rem; margin: 0.2rem 0 0.15rem; }
.meeting-header.compact .meta { font-size: 0.92rem; color: var(--text-2); }
.meeting-header-row {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  justify-content: space-between;
}
.meeting-header-main { flex: 1; min-width: 280px; }

/* Old thread-strips shim — keep selectors so existing rules don't 404,
   but the structural element is no longer rendered. */
.thread-strips { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.thread-strip {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}
.thread-strip .ts-head {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.thread-strip .ts-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3);
}
.thread-strip .ts-name {
  font-size: 0.95rem; font-weight: 600; color: var(--text-1);
  text-decoration: none;
}
.thread-strip .ts-name:hover { color: var(--forest); text-decoration: none; }
.thread-strip .ts-ident {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem;
  color: var(--forest); background: var(--mist);
  padding: 1px 6px; border-radius: 4px;
}
.thread-strip .ts-progress {
  margin-left: auto; font-size: 0.78rem; color: var(--text-2);
}
.thread-strip .ts-trail {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  margin-bottom: 0.6rem;
}
.thread-strip .ts-nav {
  display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
}
.thread-strip .ts-nav-btn, .thread-strip .ts-nav-btn.disabled {
  font-size: 0.78rem; padding: 0.4rem 0.7rem;
  background: white; border: 2px solid var(--mist);
  border-radius: 8px; color: var(--forest); font-weight: 600;
  text-decoration: none;
}
.thread-strip .ts-nav-btn:hover {
  background: var(--cream); border-color: var(--forest);
  text-decoration: none;
}
.thread-strip .ts-nav-btn.disabled {
  color: var(--text-3); cursor: default; opacity: 0.6;
}
.thread-strip .ts-detail {
  margin-left: auto; font-size: 0.82rem; color: var(--forest);
  font-weight: 600; text-decoration: none;
}
.thread-strip .ts-detail:hover { text-decoration: underline; }

/* ---- Search-context banner (visible when arriving with ?q=) ---- */
#search-context {
  background: #fbf7ec;
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
#search-context .ctx-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; flex-wrap: wrap;
}
#search-context .ctx-text { font-size: 0.92rem; color: var(--warning-fg); }
#search-context .ctx-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3); margin-right: 0.4rem;
}
#search-context .ctx-q { font-weight: 600; color: var(--text-1); }
#search-context .ctx-count { color: var(--text-2); margin-left: 0.4rem; font-size: 0.85rem; }
#search-context .ctx-actions { display: flex; gap: 0.4rem; }
#search-context .ctx-btn {
  background: white; border: 2px solid var(--warning-border);
  color: var(--warning-fg);
  padding: 0.35rem 0.7rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
#search-context .ctx-btn:hover {
  background: var(--warning-border); color: white; text-decoration: none;
}

/* ---- Meeting stats strip ---- */
.stats-strip {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1.25rem; margin-top: 0.75rem;
  background: rgba(255,255,255,0.85); border-radius: 12px;
  border: 1px solid var(--mist);
}
.stats-strip .stat {
  display: flex; align-items: baseline;
}
.stats-strip .stat .num {
  font-size: 1.05rem; font-weight: 600; color: var(--forest);
  margin-right: 0.4rem;
}
.stats-strip .stat .label { font-size: 0.78rem; color: var(--text-2); }

.meeting-header .pills { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.meeting-header h1 { font-size: 1.9rem; }
.meeting-header .meta { color: var(--text-2); font-size: 0.95rem; margin-top: 0.4rem; }
.meeting-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.tabs {
  display: flex; gap: 0.25rem; padding: 0.25rem;
  background: rgba(255,255,255,0.6); border-radius: 10px; margin-bottom: 1rem;
}
.tab {
  flex: 1; text-align: center; padding: 0.5rem 0.75rem; cursor: pointer;
  border-radius: 8px; font-size: 0.9rem; color: var(--text-2);
  border: 0; background: transparent; font-family: inherit;
}
.tab:hover { color: var(--forest); }
.tab.active { background: white; color: var(--forest); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Transcript tab ---- */
.transcript-search {
  display: flex; gap: 0.5rem; align-items: center;
  margin-bottom: 0.75rem;
}
.transcript-search input {
  flex: 1; padding: 0.5rem 0.75rem; border: 2px solid var(--mist);
  border-radius: 8px; font-size: 0.9rem; font-family: inherit;
}
.transcript-search input:focus { outline: none; border-color: var(--forest); }
.transcript-search .count { font-size: 0.8rem; color: var(--text-3); }

.transcript-full {
  background: white; border: 1px solid var(--mist); border-radius: 12px;
  padding: 0.5rem 0;
}
.transcript-row {
  display: grid; grid-template-columns: 70px 1fr; gap: 0.75rem;
  padding: 0.4rem 1rem; border-bottom: 1px dashed var(--mist);
  font-size: 0.92rem; line-height: 1.55;
}
.transcript-row:last-child { border-bottom: 0; }
.transcript-row:hover { background: #fafdf6; }
.transcript-row.hide { display: none; }
.transcript-row.hit { background: #fff8d6; }
.transcript-row.hit .text mark { background: #ffd54f; padding: 0 2px; border-radius: 2px; }
.transcript-row.current-hit {
  background: #ffeb91;
  outline: 2px solid var(--forest);
  outline-offset: -2px;
}
.transcript-row.current-hit .text mark { background: #ffba00; }

.transcript-row a.ts {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--forest);
  font-size: 0.78rem;
  padding-top: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.transcript-row a.ts:hover { text-decoration: underline; }
.transcript-row a.ts .ext { font-size: 0.7rem; opacity: 0.7; }

/* Next/Prev match buttons */
.transcript-search .nav-btn {
  width: 32px; height: 32px;
  border: 2px solid var(--mist);
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--forest);
  font-family: inherit;
  padding: 0;
}
.transcript-search .nav-btn:hover {
  border-color: var(--forest);
  background: var(--cream);
}
.transcript-search .nav-btn:active { transform: scale(0.96); }
.transcript-row .ts {
  font-family: ui-monospace, Menlo, monospace; color: var(--forest);
  font-size: 0.78rem; padding-top: 2px;
}
.transcript-row .ts a { color: var(--forest); text-decoration: none; }
.transcript-row .ts a:hover { text-decoration: underline; }
.transcript-row mark { background: #fff3a8; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ---- Agenda tab ---- */
.packet-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px;
  margin-bottom: 1rem;
}
.packet-link .info { font-size: 0.9rem; color: var(--text-2); }

/* ---- Minutes tab ---- */
.minutes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 760px) { .minutes-grid { grid-template-columns: 1fr; } }
.minutes-section h3 {
  font-size: 1rem; margin-bottom: 0.5rem; color: var(--text-1);
}
.motion-detail {
  background: white; border: 1px solid var(--mist);
  border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.6rem;
  font-size: 0.88rem;
}
.motion-detail .text { margin-bottom: 0.4rem; }
.motion-detail .by { color: var(--text-2); margin-bottom: 0.25rem; }
.motion-detail .vote { font-weight: 600; }
.motion-detail .roll { font-size: 0.8rem; color: var(--text-2); margin-top: 0.25rem; }

/* ---- Topics tab placeholder ---- */
.topics-placeholder {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px dashed var(--mist); border-radius: 12px;
  padding: 2rem; text-align: center; color: var(--text-2);
}

.meeting-body {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.5rem;
  padding: 1rem 0 2rem;
}
@media (max-width: 920px) { .meeting-body { grid-template-columns: 1fr; } }

.video-card {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px;
  overflow: hidden; background: #1a1a1a; margin-bottom: 1.25rem;
  display: block; text-decoration: none; color: white;
}
.video-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85; transition: opacity 0.2s;
}
.video-card:hover img { opacity: 1; }
.video-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.5) 100%);
}
.video-card .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.95); display: flex; align-items: center;
  justify-content: center; transition: transform 0.2s;
}
.video-card:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.video-card .play::after {
  content: ""; display: block;
  width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid var(--forest);
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.video-card .meta {
  position: absolute; bottom: 10px; left: 14px;
  font-size: 0.78rem; color: white; text-decoration: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.video-card .meta strong { font-weight: 600; margin-right: 6px; }
.video-card .badge {
  position: absolute; top: 10px; right: 12px; font-size: 0.72rem;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.95); color: var(--forest); font-weight: 500;
}

.agenda-list { background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px; overflow: hidden; }
/* Agenda rows are <details>: collapsed by default, click summary to expand. */
.agenda-row {
  border-bottom: 1px solid var(--mist);
  scroll-margin-top: 140px;
}
.agenda-row:last-child { border-bottom: 0; }
.agenda-row.hide { display: none; }
.agenda-row > summary {
  list-style: none; cursor: pointer;
  padding: 0.85rem 1.1rem;
  display: flex; gap: 0.75rem; align-items: flex-start;
  transition: background 0.15s;
}
.agenda-row > summary::-webkit-details-marker { display: none; }
.agenda-row > summary::before {
  content: '▸';
  flex-shrink: 0;
  color: var(--text-3); font-size: 0.85rem;
  margin-top: 3px;
  transition: transform 0.15s, color 0.15s;
}
.agenda-row[open] > summary::before { transform: rotate(90deg); color: var(--forest); }
.agenda-row.no-detail > summary { cursor: default; }
.agenda-row.no-detail > summary::before { visibility: hidden; }
.agenda-row > summary:hover { background: rgba(232,240,226,0.4); }
.agenda-row[open] > summary { background: rgba(232,240,226,0.55); }
.agenda-row:target { background: #fff8d8; box-shadow: inset 4px 0 0 #d4a417; }
.agenda-row .num { font-size: 0.85rem; color: var(--forest); font-weight: 600; min-width: 32px; padding-top: 2px; }
.agenda-row .body { flex: 1; min-width: 0; }
.agenda-row .title-row {
  display: flex; align-items: flex-start; gap: 0.5rem; justify-content: space-between;
}
.agenda-row .title { font-size: 0.96rem; }
.agenda-row .meta { font-size: 0.78rem; color: var(--text-2); margin-top: 0.15rem; }
.agenda-row-detail {
  padding: 0.5rem 1.1rem 1rem 3rem;
  background: rgba(255, 255, 255, 0.7);
}
.agenda-row-detail .detail-label {
  font-size: 0.74rem; color: var(--text-3); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-right: 0.4rem;
}
.agenda-row-detail .topic-row { margin: 0.5rem 0; align-items: center; }
.agenda-row-detail .breadcrumbs { margin: 0.5rem 0; }
.agenda-row-detail .excerpt {
  margin-top: 0.6rem; padding: 0.75rem 0.9rem;
  background: white; border: 1px solid var(--mist); border-radius: 8px;
}
.agenda-row-detail .excerpt-text { font-size: 0.85rem; line-height: 1.55; margin-top: 0.3rem; }
.agenda-row-detail .roll-call {
  margin-top: 0.6rem; padding: 0.75rem 0.9rem;
  background: white; border: 1px solid var(--mist); border-radius: 8px;
  font-size: 0.85rem;
}
.agenda-row-detail .roll-line { margin-top: 0.25rem; }
.agenda-row a.ident {
  font-size: 0.78rem; color: var(--forest); margin-left: 0.3rem;
  font-family: ui-monospace, Menlo, monospace;
  background: var(--mist); padding: 1px 6px; border-radius: 4px;
  text-decoration: none; transition: background 0.2s;
}
.agenda-row a.ident:hover { background: #d8e8c5; text-decoration: none; }

/* Vote badge */
.vote-badge {
  font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.vote-badge.pass { background: #eaf3de; color: #3b6d11; }
.vote-badge.fail { background: #fde9e9; color: #a32d2d; }

/* Topic chips on the row */
.topic-row { margin-top: 0.4rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.topic-tag {
  font-size: 0.7rem; padding: 2px 7px; border-radius: 4px;
  background: #e6f1fb; color: #185fa5;
}

/* Breadcrumbs */
.breadcrumbs {
  margin-top: 0.4rem; font-size: 0.74rem; color: var(--text-2);
  display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center;
}
.breadcrumbs .crumb-label { color: var(--text-3); font-weight: 500; }
.breadcrumbs .crumb {
  background: #fbf7ec; color: #5b4612; padding: 1px 6px; border-radius: 4px;
}
.breadcrumbs a.crumb-link {
  text-decoration: none; transition: background 0.2s;
}
.breadcrumbs a.crumb-link:hover {
  background: #f5e9c5;
  text-decoration: none;
}
.breadcrumbs a.crumb-link::after { content: " →"; opacity: 0.55; font-size: 0.85em; }

/* Item action links — Watch / Show staff report / Roll call */
.item-actions {
  margin-top: 0.5rem; display: flex; gap: 0.85rem; flex-wrap: wrap;
}
.action-link {
  font-size: 0.78rem; color: var(--forest); font-weight: 600;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: inherit; text-decoration: none;
}
.action-link:hover { text-decoration: underline; }

/* Expandable excerpt + roll call panels */
.excerpt, .roll-call {
  margin-top: 0.6rem; padding: 0.75rem 0.9rem;
  background: white; border: 1px solid var(--mist); border-radius: 8px;
  font-size: 0.85rem; line-height: 1.55;
}
.excerpt-text { color: var(--text-1); margin-bottom: 0.5rem; }
.excerpt-link { font-size: 0.78rem; color: var(--forest); }
.roll-call .roll-line { margin: 0.15rem 0; color: var(--text-2); }
.roll-call .roll-line strong { color: var(--text-1); margin-right: 0.25rem; }

/* Filter toolbar */
.agenda-filters {
  background: white; padding: 0.5rem 0.75rem; border-radius: 10px;
  border: 1px solid var(--mist); margin-bottom: 0.75rem;
}
.agenda-filter-row {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.25rem 0;
}
.agenda-filter-row + .agenda-filter-row { border-top: 1px dashed var(--mist); }
.agenda-filter-label {
  font-size: 0.7rem; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.4px; min-width: 60px;
}
.filter-chip {
  font-size: 0.74rem; padding: 3px 9px; border-radius: 6px;
  background: white; color: var(--text-2); border: 1px solid var(--mist);
  cursor: pointer; font-family: inherit;
}
.filter-chip:hover { border-color: var(--forest); color: var(--forest); }
.filter-chip.active {
  background: var(--forest); color: white; border-color: var(--forest);
}

.section-bar.hide { display: none; }

.section-bar {
  background: var(--mist); color: var(--forest); padding: 0.4rem 1.1rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
}

.attendance, .motion-card, .related-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px;
  padding: 0.85rem 1rem; font-size: 0.88rem; line-height: 1.55;
  margin-bottom: 1rem;
}
.attendance .label, .motion-card .label, .related-card .label {
  font-size: 0.7rem; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 0.15rem;
}
.attendance .group + .group { margin-top: 0.5rem; }
.motion-card .vote-pass { color: #3b6d11; font-weight: 600; }
.motion-card .vote-fail { color: #a32d2d; font-weight: 600; }

.transcript-preview {
  background: #fcfcfa; border: 1px solid var(--mist); border-radius: 10px;
  padding: 1rem 1.2rem; font-size: 0.88rem;
}
.transcript-preview .turn { display: flex; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--mist); }
.transcript-preview .turn:last-child { border: 0; }
.transcript-preview .ts {
  font-family: ui-monospace, Menlo, monospace; color: var(--forest);
  min-width: 56px; font-size: 0.78rem;
}

.warn-card {
  background: var(--warning-bg); border-left: 4px solid var(--warning-border);
  padding: 0.85rem 1rem; border-radius: 0 10px 10px 0; font-size: 0.88rem;
  color: var(--warning-fg);
}

.footer { background: white; padding: 1.5rem 0; border-top: 1px solid var(--mist);
  font-size: 0.85rem; color: var(--text-2); text-align: center; }

/* ---- Index page extras ---- */
.meeting-list { background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px; overflow: hidden; }
.meeting-row, a.meeting-row {
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--mist);
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem;
  align-items: center;
  text-decoration: none; color: inherit;
}
.meeting-row:last-child { border: 0; }
.meeting-row:hover { background: rgba(232,240,226,0.4); text-decoration: none; }
.meeting-row .body-name { color: var(--forest); font-weight: 600; }
.meeting-row .meta { color: var(--text-2); font-size: 0.85rem; }

/* Coming-up cards */
.upcoming-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .upcoming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .upcoming-grid { grid-template-columns: 1fr; }
}
.upcoming-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.upcoming-card .up-date {
  font-size: 0.72rem; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.5px;
}
.upcoming-card .up-title {
  font-weight: 600; color: var(--text-1); font-size: 0.92rem;
  line-height: 1.25; margin-top: 0.05rem;
}
.upcoming-card .up-flag {
  display: inline-block; font-size: 0.66rem; padding: 1px 6px;
  border-radius: 4px; background: #fde9e9; color: #a32d2d;
  align-self: flex-start; margin-top: 0.1rem;
}
.upcoming-card .up-flag.tentative {
  background: #fff3d4; color: #7a5708;
}
/* Tentative meetings (planning-calendar ghosts) keep the same neutral
 * card chrome as posted ones — only the small yellow "Tentative" pill
 * marks them. The full-card highlight was too loud given how many
 * Coming up cards are tentative at any time. */

/* ---------- Planning Calendar page ---------- */
.hero-thin { padding: 1.4rem 0 2.2rem; }
/* "Last updated …" timestamp pinned to the homepage footer. Very
   subtle — same color as the rest of the footer text but smaller. */
/* Board minutes — extracted "recommendations & actions" list under the
   minutes section. Compact, slightly muted so it reads as derived
   data rather than authoritative motion records. */
.action-list {
  list-style: none;
  padding: 0; margin: 0;
}
.action-list li {
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.4rem;
  background: #f7faf4;
  border-left: 3px solid var(--mist);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: var(--text-1);
  line-height: 1.4;
}

/* Per-councilmember page — stats grid above the dissent list. */
.member-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.member-stat {
  background: white;
  border: 1px solid var(--mist);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.member-stat .ms-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  font-weight: 600;
}
.member-stat .ms-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.1;
  margin-top: 0.2rem;
}
.member-stat .ms-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 0.2rem;
}
.member-stat.yes {
  background: #f1f7eb;
  border-color: #cfe0bc;
}
.member-stat.yes .ms-value { color: var(--forest); }
.member-stat.no {
  background: #fff3e9;
  border-color: #f3c89e;
}
.member-stat.no .ms-value { color: #b65a13; }
.member-grid .body-card-stats {
  font-size: 0.83rem;
  margin-top: 0.35rem;
}
.back-link {
  font-size: 0.85rem; color: var(--text-2);
  text-decoration: none; font-weight: 500;
}
.back-link:hover { color: var(--forest); }

.footer-stamp {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-left: 0.3rem;
  white-space: nowrap;
}
.hero-thin h1 {
  font-size: 1.85rem; margin-bottom: 0.35rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.hero-tagline {
  color: rgba(255,255,255,0.92);
  font-size: 0.92rem; margin-bottom: 0.85rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ---------- Sticky section nav (homepage) ----------
   The site-header brand bar is also position: sticky; top: 0; z-index: 100,
   so the section-nav has to stick BELOW it. The brand bar measures
   roughly 56–60px (1.5rem logo + 1rem y-padding); we use 60px and rely
   on the cream backdrop to mask the seam. Higher z-index than content
   so the tabs stay legible over scrolled-up section anchors. */
.section-nav {
  /* Warm-beige nav. */
  --nav-beige: #f7f4ea;
  position: sticky; top: 72px; z-index: 90;
  background: var(--nav-beige);
  border-bottom: 1px solid var(--mist);
  border-radius: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Buffer above the nav ONLY when stuck under the brand bar. At the top
   of the page it reads as extra beige above the labels and looks heavy;
   when stuck we want a 12px gap filled with beige between brand bar and
   nav. JS toggles the .stuck class via a sentinel + IntersectionObserver. */
.section-nav.stuck {
  box-shadow: 0 -12px 0 var(--nav-beige);
}
.section-nav.hidden { transform: translateY(-100%); }
.section-nav-inner {
  display: flex; gap: 0;
  padding: 0;
  border-bottom: 0;
}
.nav-tab {
  flex: 1 1 auto;
  padding: 0.7rem 0.85rem;
  text-align: center;
  font-size: 0.85rem; font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  white-space: nowrap;
}
.nav-tab:hover {
  color: var(--forest);
  background: rgba(255,255,255,0.55);
  text-decoration: none;
}
.nav-tab.active {
  color: var(--forest);
  border-bottom-color: var(--forest);
}

/* Mobile: horizontal scroll, smaller padding, auto-hide on scroll-down */
@media (max-width: 760px) {
  .section-nav-inner {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .section-nav-inner::-webkit-scrollbar { display: none; }
  .nav-tab {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
  }
}

/* Home section spacing & headers.
   scroll-margin-top accounts for the stacked sticky brand bar (≈60px),
   the 12px beige buffer, and the section nav itself (≈48px) so anchor
   jumps land below them with a little breathing room. */
.home-section { margin-bottom: 2.25rem; scroll-margin-top: 140px; }
.home-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.75rem; margin-bottom: 0.55rem; flex-wrap: wrap;
}
.home-section-head h2 { margin: 0; font-size: 1.15rem; }
.home-section-count {
  font-size: 0.82rem; color: var(--text-3);
}
.home-section-link {
  font-size: 0.85rem; color: var(--forest); font-weight: 500;
  text-decoration: none;
}
.home-section-link:hover { text-decoration: underline; }
.home-section-sub {
  font-size: 0.88rem; color: var(--text-2);
  margin: -0.2rem 0 0.85rem;
}
.home-section-more {
  margin-top: 0.85rem; font-size: 0.88rem;
  text-align: right;
}
.home-section-more a { color: var(--forest); font-weight: 500; }
.home-section-expand {
  margin-top: 0.85rem;
}
.home-section-expand summary {
  cursor: pointer; color: var(--forest); font-size: 0.88rem;
  font-weight: 500; padding: 4px 0;
  list-style: none;
}
.home-section-expand summary::-webkit-details-marker { display: none; }
.home-section-expand summary::before { content: '+ '; }
.home-section-expand[open] summary::before { content: '− '; }

/* Prominent "see all" / "browse all" call-to-action button.
   Sits below a capped section and signals there's more to explore. */
.see-all-btn {
  display: block;
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 1.5px solid var(--sage-mid);
  border-radius: 10px;
  color: var(--forest);
  font-weight: 500; font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.see-all-btn:hover {
  background: var(--mist);
  border-color: var(--forest);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Promoted "+ N more X" expanders — same visual weight as see-all-btn,
   so the user reads all of these as equally clickable affordances. */
.see-all-expand { margin-top: 1rem; }
.see-all-expand summary {
  display: block;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 1.5px solid var(--sage-mid);
  border-radius: 10px;
  color: var(--forest);
  font-weight: 500; font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s, border-color 0.15s;
}
.see-all-expand summary::-webkit-details-marker { display: none; }
.see-all-expand summary:hover {
  background: var(--mist);
  border-color: var(--forest);
}
.see-all-expand[open] summary {
  margin-bottom: 0.6rem;
  background: var(--mist);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* All meetings page filters */
.meetings-blurb {
  font-size: 0.92rem; color: var(--text-2);
  margin-bottom: 1.1rem;
}
.meetings-blurb a { color: var(--forest); font-weight: 500; }
.ai-disclaimer {
  font-size: 0.88rem; color: var(--text-2);
  background: #fff8e1;
  border: 1px solid #f0d97a;
  border-left: 4px solid #d4a418;
  padding: 0.7rem 0.95rem;
  border-radius: 6px;
  margin: 0 0 1rem 0;
  line-height: 1.45;
}
.ai-disclaimer strong { color: #6b4f0a; }
.ai-disclaimer em { font-style: italic; }
.meetings-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 0.75rem; align-items: center;
}
.meetings-filters input[type="text"] {
  flex: 1; min-width: 220px;
  padding: 7px 11px; font-size: 0.92rem;
  border: 1px solid var(--mist); border-radius: 8px;
  background: white;
}
.meetings-filters select {
  padding: 7px 11px; font-size: 0.92rem;
  border: 1px solid var(--mist); border-radius: 8px;
  background: white; color: var(--text-1);
}
.meetings-filters button {
  padding: 7px 14px; font-size: 0.88rem;
  border: 1px solid var(--mist); border-radius: 8px;
  background: white; color: var(--text-2); cursor: pointer;
}
.meetings-filters button:hover { background: var(--cream); color: var(--text-1); }
.meetings-count {
  font-size: 0.84rem; color: var(--text-3);
  margin-bottom: 0.85rem;
}


.cal-history {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; padding: 0.5rem 0.85rem;
  background: var(--cream); border: 1px solid var(--mist);
  border-radius: 8px; margin-bottom: 1.25rem; font-size: 0.86rem;
}
.cal-history-label { color: var(--text-2); margin-right: 0.4rem; }
.cal-history-item {
  padding: 2px 8px; border-radius: 999px;
  background: white; border: 1px solid var(--mist);
  color: var(--forest); text-decoration: none;
}
.cal-history-item.current { background: var(--forest); color: white; border-color: var(--forest); }

.pc-date-group { margin-bottom: 1.5rem; }
.pc-date-header {
  font-size: 1.05rem; font-weight: 600;
  color: var(--text-1); margin-bottom: 0.5rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--sage-mid);
}
.pc-weekday { font-weight: 400; color: var(--text-2); font-size: 0.9rem; }
.pc-meeting {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid var(--mist); border-radius: 10px;
  padding: 0.7rem 0.95rem; margin-bottom: 0.6rem;
}
.pc-meeting-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.45rem; flex-wrap: wrap;
}
.pc-meeting-name {
  font-weight: 600; color: var(--forest);
  font-size: 0.96rem; text-decoration: none;
}
.pc-meeting-name:hover { text-decoration: underline; }
.pc-item-count {
  font-size: 0.78rem; color: var(--text-3);
  background: var(--mist); padding: 1px 7px; border-radius: 999px;
}
.pc-items { display: flex; flex-direction: column; gap: 0.4rem; }
.pc-item {
  padding: 0.4rem 0.55rem; border-left: 3px solid var(--sage-mid);
  border-radius: 0 6px 6px 0; background: rgba(255,255,255,0.55);
}
.pc-item-row { display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; }
.pc-ident a {
  color: var(--forest); font-weight: 600; text-decoration: none;
  font-size: 0.84rem; padding: 1px 6px;
  background: var(--mist); border-radius: 4px;
}
.pc-ident a:hover { text-decoration: underline; }
.pc-title { color: var(--text-1); flex: 1; min-width: 200px; }
.pc-placement {
  font-size: 0.75rem; color: var(--text-2);
  padding: 1px 7px; border: 1px solid var(--mist);
  border-radius: 999px; background: white;
}
.pc-item-meta { font-size: 0.82rem; color: var(--text-2); margin-top: 0.2rem; padding-left: 0.1rem; }
.pc-item-meta .pc-dept { color: var(--text-3); }
.pc-item-meta .pc-time { color: var(--text-3); }
.upcoming-card .up-link {
  font-size: 0.78rem; color: var(--forest); font-weight: 500;
  margin-top: auto; padding-top: 0.35rem;
}
.upcoming-card .up-link.dim { color: var(--text-3); font-weight: 400; }

/* Recently decided */
.decisions-list {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px; overflow: hidden;
}
.decision-row {
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--mist);
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem;
  align-items: center;
}
.decision-row:last-child { border: 0; }
.decision-row .d-meta {
  grid-column: 1 / 2; font-size: 0.75rem; color: var(--text-3);
  display: flex; gap: 0.5rem;
}
.decision-row .d-body { color: var(--forest); font-weight: 500; }
.decision-row .d-title {
  grid-column: 1 / 2; font-size: 0.95rem; color: var(--text-1);
}
.decision-row .d-action {
  grid-column: 2 / 3; grid-row: 1 / 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;
}
.decision-row.contested {
  background: linear-gradient(135deg, #fffbeb 0%, #fff5e6 100%);
}
.decision-row.contested .d-title { font-weight: 500; }
.d-tag {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem; border-radius: 4px;
}
.d-tag.consent { background: var(--mist); color: var(--text-3); }
.d-tag.contested-tag { background: #fde68a; color: #92400e; }
.d-rollcall {
  grid-column: 1 / 2; grid-row: 3 / 4;
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.78rem; color: var(--text-2);
  margin-top: 0.2rem;
}
.d-rollcall .rc-yes strong { color: var(--forest); }
.d-rollcall .rc-no strong { color: #b91c1c; }
.action-link.verify-link {
  font-size: 0.7rem; color: var(--text-3);
}
.action-link.verify-link:hover { color: var(--forest); }
/* Filter row for the decisions page. Wraps to a second line when the
   controls don't fit, instead of being clipped on the right (which used
   to hide the Clear button). The base .meetings-filters rule already
   sets flex-wrap: wrap, so we only override the per-control sizing. */
.meetings-filters.meetings-filters-tight {
  padding-bottom: 4px;
}
.meetings-filters.meetings-filters-tight input[type="text"] {
  min-width: 150px; flex: 1 1 220px;
}
/* Let the dropdowns shrink — when their per-option text is short
   ("All bodies", "All years"), they were defaulting to large
   intrinsic widths and pushing Clear off-screen. */
.meetings-filters.meetings-filters-tight select {
  min-width: 0; max-width: 100%;
}
.meetings-filters.meetings-filters-tight button,
.meetings-filters.meetings-filters-tight label {
  flex-shrink: 0;
}
.dec-contested-label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem; color: var(--text-2);
  padding: 0 0.4rem;
}
.dec-contested-label input { margin: 0; }

/* Active policy threads */
.thread-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column;
  height: 100%;
}
.thread-card .thread-title {
  font-size: 0.95rem; font-weight: 500; color: var(--text-1);
  margin-bottom: 0.55rem;
  display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
}
.thread-trail {
  display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
  font-size: 0.72rem;
  flex: 1;
}
/* Group each stop with its preceding arrow so the arrow can't wrap
   onto its own line. The first stop has no arrow; subsequent ones
   are wrapped in <span class="trail-step"><span class="thread-sep">→</span><a class="thread-stop">…</a></span>. */
.trail-step {
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.thread-stop, a.thread-stop {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 5px;
  background: var(--mist); color: var(--forest);
  text-decoration: none; transition: background 0.15s, transform 0.1s;
}
a.thread-stop:hover {
  background: #d8e8c5;
  text-decoration: none;
}
.thread-stop.current, a.thread-stop.current {
  background: var(--forest); color: white; font-weight: 500;
}
a.thread-stop.current:hover { background: var(--forest); }
.thread-stop.dim { opacity: 0.55; cursor: default; }
.thread-sep { color: var(--text-3); font-size: 0.85rem; }
.thread-name-link {
  color: var(--text-1); text-decoration: none;
}
.thread-name-link:hover { color: var(--forest); text-decoration: none; }
.thread-detail-link {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.78rem; color: var(--forest); font-weight: 600;
}

/* Horizontal scrollable bar of past meetings on the homepage. Each
   meeting is a small chip with date + body label. Newest leftmost.
   Wrapped in .meetings-bar-wrap which adds left/right scroll buttons
   and edge fades so users can tell the strip is scrollable instead
   of broken. */
.meetings-bar-wrap {
  position: relative;
  margin-bottom: 0.5rem;
}
/* Edge fade gradients hint that there's more content off-screen.
   Right fade is always present; left fade only shows when the bar
   has been scrolled (toggled via .scrolled-left class by JS). */
.meetings-bar-wrap::before,
.meetings-bar-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 14px;
  width: 38px; pointer-events: none; z-index: 1;
  transition: opacity 0.15s;
}
.meetings-bar-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--cream, #fafaf6) 30%, transparent);
  opacity: 0;
}
.meetings-bar-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--cream, #fafaf6) 30%, transparent);
  opacity: 1;
}
.meetings-bar-wrap.scrolled-left::before { opacity: 1; }
.meetings-bar-wrap.scrolled-right::after { opacity: 0; }
.meetings-bar {
  display: flex; flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto; overflow-y: hidden;
  padding: 0.35rem 0.1rem 0.85rem;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Firefox uses scrollbar-* properties. */
  scrollbar-width: thin;
  scrollbar-color: var(--forest) var(--mist);
}
/* WebKit (Chrome / Safari): thicker, always-visible, darker thumb. */
.meetings-bar::-webkit-scrollbar {
  height: 12px;
}
.meetings-bar::-webkit-scrollbar-track {
  background: var(--mist); border-radius: 6px;
}
.meetings-bar::-webkit-scrollbar-thumb {
  background: var(--forest); border-radius: 6px;
  border: 2px solid var(--mist);
}
.meetings-bar::-webkit-scrollbar-thumb:hover {
  background: #2c4a1f;
}
/* Left/right scroll buttons — overlaid on the bar's edges. Always
   rendered; toggled hidden when at the relevant scroll extreme. */
.bar-scroll-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mist);
  background: white;
  color: var(--forest);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, transform 0.1s;
  padding: 0;
}
.bar-scroll-btn.prev { left: -8px; }
.bar-scroll-btn.next { right: -8px; }
.bar-scroll-btn:hover {
  background: var(--mist);
}
.bar-scroll-btn:active { transform: translateY(-50%) scale(0.94); }
.bar-scroll-btn[hidden] { display: none; }
@media (max-width: 600px) {
  /* On narrow phones the buttons crowd the chips — hide and rely
     on touch-scrolling + visible scrollbar instead. */
  .bar-scroll-btn { display: none; }
}
.meeting-chip {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  min-width: 130px; max-width: 220px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--mist);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.meeting-chip:hover {
  border-color: var(--forest);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transform: translateY(-1px);
}
.meeting-chip .mc-date {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--forest);
  letter-spacing: 0.02em;
}
.meeting-chip .mc-body {
  font-size: 0.78rem;
  color: var(--text-1);
  line-height: 1.25;
  margin-top: 2px;
  /* Clamp to 2 lines so long names don't blow up the chip */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meeting-chip.cancelled {
  opacity: 0.55;
  background: #fafafa;
}
.meeting-chip.cancelled .mc-body::after {
  content: " · Cancelled";
  font-style: italic;
  color: var(--text-3);
}

/* Browse by body */
.body-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.body-grid.topic-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .body-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .body-grid.topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .body-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body-grid.topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.body-card {
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--mist); border-radius: 12px;
  padding: 0.85rem 1rem; text-decoration: none; color: inherit;
  transition: transform 0.2s, border-color 0.2s;
}
.body-card:hover {
  transform: translateY(-2px); border-color: var(--forest);
  text-decoration: none;
}
.body-card-name { font-weight: 600; color: var(--text-1); font-size: 0.92rem; }
.body-card-stats { font-size: 0.78rem; color: var(--text-2); margin-top: 0.2rem; }

/* ============================================================
   Mobile fixes — issues surfaced by the mobile-compat audit.
   ============================================================ */
@media (max-width: 760px) {
  /* Hero: smaller H1, reduce padding so the search box gets more room */
  .hero { padding: 2.5rem 0 1.5rem; }
  .hero h1 { font-size: 2.2rem; }
  .hero p.tagline { font-size: 1rem; }
  .hero-thin { padding: 1rem 0 1.4rem; }
  .hero-thin h1 { font-size: 1.6rem; }
  /* Search input + button stack vertically with full width */
  .search { flex-direction: column; padding: 0.85rem; }
  .search input, .search button { width: 100%; }
  /* Hide the section nav entirely on mobile. With 6 tabs (Upcoming /
     Decisions / Policy lifecycle / Topics / Bodies / All meetings),
     it doesn't fit horizontally on a phone, and the auto-hide-on-
     scroll-down behavior was making it feel jumpy. Mobile users can
     reach the same sections via the homepage cards, search, or the
     hamburger menu. Desktop keeps the sticky tab strip as-is. */
  .section-nav { display: none; }
  /* Lifecycle chips: drop the wide max-width so titles wrap instead
     of pushing the dot trail off the right edge of the screen. */
  .lc-chip-name { max-width: none; white-space: normal; }
  /* Meetings page filter input shrinks gracefully */
  .meetings-filters input[type="text"] { min-width: 0; flex-basis: 100%; }
  .meetings-filters select, .meetings-filters button { flex: 1 1 auto; }
  /* Decisions filter row: same column layout instead of horizontal scroll */
  .meetings-filters.meetings-filters-tight { flex-wrap: wrap; overflow-x: visible; }
  .meetings-filters.meetings-filters-tight input[type="text"] {
    min-width: 0; flex-basis: 100%;
  }
  /* Planning calendar filter chips: keep them readable on mobile */
  .filter-chip { padding: 5px 11px; font-size: 0.85rem; }
  /* Lifecycle action buttons: enlarge tap targets */
  .lc-btn { padding: 8px 14px; font-size: 0.85rem; min-height: 36px; }
  /* Stats strip: stack vertically when narrow */
  .stats { flex-wrap: wrap; gap: 0.85rem; }
  .stats .stat { flex: 1 1 45%; min-width: 0; }
  /* Match liveableissaquah.org's main pages — 20px container padding
     at all breakpoints. (Earlier attempt to shrink to 14px on mobile
     made the digest header look misaligned vs. the rest of the site.) */
  /* Decisions row: action buttons go below the title instead of right side */
  .decision-row {
    grid-template-columns: 1fr; gap: 0.4rem;
  }
  .decision-row .d-action {
    grid-column: 1 / 2; grid-row: auto;
    flex-direction: row; justify-content: flex-start; flex-wrap: wrap;
    gap: 0.6rem; align-items: center;
  }
  /* Body and topic card grids collapse to 2 cols on mobile */
  .body-grid, .body-grid.topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Extra-narrow phones (<420px): single-column body/topic grids */
@media (max-width: 420px) {
  .body-grid, .body-grid.topic-grid { grid-template-columns: 1fr; }
  .stats .stat { flex: 1 1 100%; }
  .hero h1 { font-size: 1.85rem; }
}

/* Long agenda-item identifiers / titles should wrap rather than blow
   out the horizontal viewport */
.agenda-row .a-title, .d-title, .lc-chip-name {
  word-break: break-word; overflow-wrap: anywhere;
}