/* Event Bucket — Cobalt & Paper, v1.0.0
 * Load after existing styles, with event-bucket-cobalt.js.
 * Additive theme: existing data, forms, authentication and timers stay in place.
 * US Letter = 17 / 22. The complete source image is contained, never cropped.
 */
:root.eb-cobalt {
  --eb-cobalt: #174cdb;
  --eb-cobalt-hover: #103bb2;
  --eb-paper: #f3f7fc;
  --eb-surface: #ffffff;
  --eb-ink: #112347;
  --eb-muted: #526582;
  --eb-line: #d4dfef;
  --eb-tint: #eaf1ff;
  --eb-radius: 8px;
  --eb-letter: 17 / 22;
  --eb-font: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
body.eb-cobalt {
  background: var(--eb-paper);
  color: var(--eb-ink);
  font-family: var(--eb-font);
}
.eb-cobalt :focus-visible { outline: 3px solid var(--eb-cobalt) !important; outline-offset: 4px; }
.eb-cobalt button, .eb-cobalt input, .eb-cobalt select { font: inherit; }
.eb-cobalt .eb-skip-link { position: fixed; top: -100px; left: 16px; z-index: 100000; background: #fff; color: var(--eb-cobalt); padding: 12px 18px; }
.eb-cobalt .eb-skip-link:focus { top: 12px; }

/* Map legacy tokens only on public light surfaces. Admin and safety overlays
   keep their own styling and state. */
.eb-home, .eb-board-shell, .eb-board .site-header, .eb-board .submit-cta, .eb-board .site-footer,
.eb-board #submit, .eb-board footer, .eb-board .floating-cta {
  --gold: var(--eb-cobalt); --gold-accent: var(--eb-cobalt);
  --gold-light: var(--eb-cobalt-hover); --gold-dim: var(--eb-tint);
  --gold-glow: transparent; --on-gold: #fff;
  --civic: var(--eb-cobalt); --civic-deep: var(--eb-cobalt-hover); --civic-light: var(--eb-cobalt);
  --bg-base: var(--eb-paper); --bg-surface: #fff; --bg-card: #fff;
  --bg-elevated: var(--eb-tint); --bg-input: #fff;
  --text-primary: var(--eb-ink); --text-secondary: var(--eb-muted); --text-muted: var(--eb-muted);
  --navy-border: var(--eb-line); --line: var(--eb-line);
  --font-display: var(--eb-font); --font-body: var(--eb-font);
  --shadow-deep: 0 8px 28px rgb(17 35 71 / 9%);
  --shadow-card: 0 3px 12px rgb(17 35 71 / 6%);
}
.eb-home .btn, .eb-board .site-header .btn, .eb-board-shell .btn {
  min-height: 44px; border-radius: 6px; font-size: .9375rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; justify-content: center;
}
.eb-home .btn-primary, .eb-board .site-header .btn-primary, .eb-board-shell .btn-primary {
  color: #fff; background: var(--eb-cobalt); border: 1px solid var(--eb-cobalt);
}
.eb-home .btn-primary:hover, .eb-board .site-header .btn-primary:hover { background: var(--eb-cobalt-hover); box-shadow: none; transform: none; }
.eb-home .btn-outline, .eb-board .site-header .btn-outline { color: var(--eb-cobalt); border-color: var(--eb-line); background: #fff; }
.eb-home .nav-logo-icon, .eb-board .nav-logo-mark { background: var(--eb-cobalt); color: #fff; border-radius: 8px; }
.eb-home .nav-logo-icon svg, .eb-board .nav-logo-mark svg { stroke: #fff; }
.eb-home .nav-logo, .eb-board .nav-logo-text, .eb-board .nav-logo-text em { color: var(--eb-cobalt); }

/* Home: same product, content, pricing and signup flows, matching the board. */
.eb-home .nav { background: #fff; border-bottom: 1px solid var(--eb-line); box-shadow: none; backdrop-filter: none; }
.eb-home .nav-link { color: var(--eb-ink); font-size: .9375rem; text-transform: none; letter-spacing: 0; }
.eb-home .nav-logo span { color: var(--eb-muted); }
.eb-home .hero { background: var(--eb-paper); padding: 64px 32px 48px; min-height: auto; }
.eb-home .hero::before, .eb-home .hero::after { display: none; }
.eb-home .hero-content { max-width: 1320px; gap: 48px; }
.eb-home .hero-title { color: var(--eb-ink); font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1.12; letter-spacing: -.035em; }
.eb-home .hero-title .accent { color: var(--eb-cobalt); }
.eb-home .hero-eyebrow { color: var(--eb-cobalt); background: var(--eb-tint); border-color: var(--eb-line); text-transform: none; letter-spacing: 0; font-size: .9375rem; }
.eb-home .hero-eyebrow::before { display: none; }
.eb-home .hero-sub { font-size: 1.125rem; line-height: 1.65; }
.eb-home .hero-path-card { background: #fff !important; border: 1px solid var(--eb-line) !important; border-top: 4px solid var(--eb-cobalt) !important; border-radius: 8px !important; text-align: left !important; box-shadow: none !important; }
.eb-home .hero-path-card:hover { border-color: var(--eb-cobalt) !important; transform: none !important; }
.eb-home .hpc-kicker, .eb-home .hpc-cta { color: var(--eb-cobalt); text-transform: none; letter-spacing: 0; font-size: .9375rem; }
.eb-home .hero-visual { padding: 20px 0; }
.eb-home .hv-tv { background: #fff; border: 1px solid var(--eb-line); border-radius: 10px; box-shadow: 0 14px 32px rgb(17 35 71 / 10%); overflow: hidden; }
.eb-home .hv-tv-bar { background: var(--eb-cobalt); padding: 18px; color: #fff; }
.eb-home .hv-tv-brand, .eb-home .hv-tv-live { color: #fff; }
.eb-home .hv-slide { background: #fff; border-color: var(--eb-line); color: var(--eb-ink); margin: 20px; }
.eb-home .hv-slide-title { color: var(--eb-ink); }
.eb-home .hv-slide-meta { color: var(--eb-muted); }
.eb-home .hv-date { background: var(--eb-cobalt); color: #fff; }
.eb-home .hv-ticker { background: var(--eb-tint); color: var(--eb-ink); }
.eb-home .hv-ticker strong { background: transparent; color: var(--eb-cobalt); }
.eb-home .hv-card { border: 1px solid var(--eb-line); box-shadow: 0 8px 20px rgb(17 35 71 / 8%); }
.eb-home .section { padding-top: 64px; padding-bottom: 64px; }
.eb-home .section-label { color: var(--eb-cobalt); letter-spacing: 0; text-transform: none; font-size: .9375rem; }
.eb-home .fcard, .eb-home .price-card, .eb-home .contact-form { border-color: var(--eb-line); border-radius: 8px; }
.eb-home .mobile-menu { background: #fff; border-color: var(--eb-line); }
.eb-home .mobile-menu a { color: var(--eb-ink); }
.eb-home .mobile-menu .btn-primary { color: #fff; }
.eb-home .nav-hamburger span { background: var(--eb-ink); }

/* Missouri public board */
.eb-board .site-header { position: relative; top: auto; background: #fff; border-bottom: 1px solid var(--eb-line); box-shadow: none; }
.eb-board .header-inner { max-width: 1600px; min-height: 80px; padding: 16px 24px; gap: 24px; flex-wrap: wrap; }
.eb-board .nav-logo-text { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.eb-board .nav-logo-mark { width: 40px; height: 40px; }
.eb-board .state-badge { background: transparent; border: 0; border-left: 1px solid var(--eb-line); border-radius: 0; color: var(--eb-cobalt); font-size: .9375rem; padding-left: 20px; letter-spacing: .03em; }
.eb-board .state-badge svg { fill: var(--eb-cobalt); }
.eb-board .header-links { flex-wrap: wrap; gap: 16px; }
.eb-board .header-links a { color: var(--eb-ink); font-size: .9375rem; letter-spacing: 0; text-transform: none; }
.eb-board .header-links .btn-primary { color: #fff; }
.eb-board-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); max-width: 1600px; width: 100%; margin: 0 auto; align-items: start; flex: 1; }
.eb-board-sidebar { background: #edf3fb; min-width: 0; padding: 28px 20px; border-right: 1px solid var(--eb-line); align-self: stretch; }
.eb-board-sidebar .hero { padding: 0; margin: 0 0 28px; background: none; text-align: left; overflow: visible; }
.eb-board-sidebar .hero::before, .eb-board-sidebar .hero::after,
.eb-board-sidebar .hero-eyebrow, .eb-board-sidebar .hero-subtitle,
.eb-board-sidebar .hero-ctas { display: none; }
.eb-board-sidebar .hero h1 { color: var(--eb-ink); font-size: 1.25rem; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 12px; }
.eb-board-sidebar .hero h1 .hl { color: inherit; }
.eb-board-sidebar .event-count { font-size: .875rem; margin: 0; color: var(--eb-muted); }
.eb-board-sidebar .filter-bar { position: static; background: none; border: 0; padding: 0; }
.eb-board-sidebar .filter-inner { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.eb-board-sidebar .filter-label { color: var(--eb-ink); font-size: .9375rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.eb-board-sidebar .filter-input, .eb-board-sidebar .filter-select { width: 100%; min-width: 0 !important; min-height: 44px; padding: 10px 12px; border: 1px solid var(--eb-line); border-radius: 5px; color: var(--eb-ink); background-color: #fff; font-size: 1rem; }
.eb-board-sidebar .filter-select option { color: var(--eb-ink); background: #fff; }
.eb-board-sidebar .filter-input:focus, .eb-board-sidebar .filter-select:focus { background: #fff; border-color: var(--eb-cobalt); outline: 2px solid var(--eb-cobalt); outline-offset: 2px; }
.eb-board-sidebar .eb-date-presets { flex-direction: column; align-items: stretch; gap: 2px !important; }
.eb-board-sidebar .filter-preset-btn { text-align: left; border: 1px solid transparent; border-radius: 4px; padding: 10px 8px; font-size: .9375rem; color: var(--eb-cobalt) !important; background: transparent; min-height: 44px; }
.eb-board-sidebar .filter-preset-btn:hover, .eb-board-sidebar .filter-preset-btn.active { background: #fff; border-color: var(--eb-cobalt); }
.eb-board-sidebar .filter-count { margin: 0; color: var(--eb-muted); white-space: normal; font-size: .875rem; }
.eb-sidebar-links { border-top: 1px solid var(--eb-line); padding-top: 22px; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.eb-sidebar-links a { color: var(--eb-cobalt); font-size: .9375rem; }
.eb-board-shell .main-content { max-width: none; width: 100%; min-width: 0; padding: 28px 24px 48px; margin: 0; }
.eb-board-shell .events-section { min-width: 0; }
.eb-board-shell #eventGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100%; overflow: visible; scroll-snap-type: none; }
.eb-board-shell .eb-month-heading { grid-column: 1 / -1; color: var(--eb-ink) !important; font-size: 1.5rem !important; font-weight: 800; text-transform: none !important; letter-spacing: -.025em !important; border-color: var(--eb-line) !important; margin: 8px 0 0 !important; }
.eb-board-shell .event-card { width: 100%; min-width: 0; max-width: none; flex: initial; background: #fff; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); padding: 10px; overflow: visible; box-shadow: none; user-select: auto; }
.eb-board-shell .event-card:hover { transform: none; border-color: var(--eb-cobalt); box-shadow: 0 5px 18px rgb(17 35 71 / 7%); }
.eb-board-shell .eb-letter-frame { width: 100%; height: auto; aspect-ratio: var(--eb-letter); display: flex; align-items: center; justify-content: center; background: #f7f9fc; border: 1px solid var(--eb-line); overflow: hidden; }
.eb-board-shell .eb-letter-frame .card-image { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; background: #f7f9fc; border-radius: 0; }
.eb-board-shell .eb-letter-frame .card-image-placeholder { width: 100%; height: 100%; background: var(--eb-tint); color: var(--eb-ink); }
.eb-board-shell .card-image-placeholder::before { background: var(--eb-cobalt); }
.eb-board-shell .cip-name { color: var(--eb-ink); }
.eb-board-shell .cip-cat { color: var(--eb-cobalt); background: #fff; border-color: var(--eb-line); }
.eb-board-shell .card-body { padding: 16px 2px 4px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.eb-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.eb-card-heading:not(:has(.card-date-badge)) { grid-template-columns: 1fr; }
.eb-board-shell .card-date-badge { position: static !important; inset: auto; min-width: 52px; width: auto; background: var(--eb-cobalt); color: #fff; border: 0; border-radius: 6px; padding: 7px 8px; box-shadow: none; text-align: center; align-self: start; }
.eb-board-shell .card-date-badge span { color: #fff; }
.eb-board-shell .cdb-day { font-size: 1.6rem; line-height: 1.05; font-weight: 800; }
.eb-board-shell .cdb-mo, .eb-board-shell .cdb-dow { font-size: .75rem; line-height: 1.2; font-weight: 700; }
.eb-board-shell .card-title { font-size: 1.0625rem; line-height: 1.35; font-weight: 800; color: var(--eb-ink); display: block; overflow: visible; -webkit-line-clamp: unset; margin: 0; }
.eb-board-shell .card-category { color: var(--eb-muted); font-size: .8125rem; background: transparent; padding: 0; border: 0; border-radius: 0; text-transform: none; letter-spacing: 0; }
.eb-board-shell .card-meta { gap: 8px; color: var(--eb-muted); font-size: .9375rem; }
.eb-board-shell .card-meta-row { color: var(--eb-muted); align-items: start; font-size: .9375rem; line-height: 1.4; }
.eb-board-shell .card-meta-row span { overflow-wrap: anywhere; }
.eb-board-shell .card-meta-row svg { color: var(--eb-cobalt); fill: currentColor; opacity: 1; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.eb-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 12px 2px 0; }
.eb-card-view, .eb-board-shell .card-share-btn { position: static; min-height: 44px; color: var(--eb-cobalt); background: #fff; border: 0; border-radius: 4px; padding: 8px; font: 700 .9375rem var(--eb-font); box-shadow: none; backdrop-filter: none; text-transform: none; letter-spacing: 0; }
.eb-card-view:hover, .eb-board-shell .card-share-btn:hover { color: var(--eb-cobalt-hover); background: var(--eb-tint); transform: none; }
.eb-board-shell .card-share-btn svg { width: 18px; height: 18px; }
.eb-board .submit-cta { background: #fff; border-top: 1px solid var(--eb-line); padding: 36px 24px; }
.eb-board .site-footer { background: var(--eb-paper); color: var(--eb-muted); border-color: var(--eb-line); }
.eb-board .carousel-nav { display: none !important; }
/* Statewide board: the "Have an Event in Missouri?" band and the page footer
   are inline-styled with the legacy tokens (navy surface, gold accent), so
   they get the token remap above plus literal overrides here. */
.eb-board #submit { background: #fff !important; border-top: 1px solid var(--eb-line) !important; color: var(--eb-ink); }
.eb-board #submit h2 { color: var(--eb-ink) !important; }
.eb-board #submit h2 span { color: var(--eb-cobalt) !important; }
.eb-board #submit p { color: var(--eb-muted) !important; }
.eb-board #submit .btn-primary, .eb-board .floating-cta.btn-primary, .eb-board .floating-cta .btn-primary { background: var(--eb-cobalt) !important; color: #fff !important; border: 1px solid var(--eb-cobalt) !important; box-shadow: 0 8px 24px rgb(23 76 219 / 25%) !important; }
.eb-board #submit .btn-primary svg { fill: currentColor; }
.eb-board footer { background: var(--eb-paper) !important; border-top: 1px solid var(--eb-line) !important; color: var(--eb-muted); }
.eb-board .footer-brand { color: var(--eb-ink) !important; }
.eb-board .footer-text { color: var(--eb-muted) !important; }
.eb-board .footer-links a { color: var(--eb-muted) !important; }
.eb-board .footer-links a:hover { color: var(--eb-cobalt) !important; }

/* Lobby: only the event display changes; PSA/video, emergency styling,
   picker, sign-in, QR contents, fullscreen and slide timers stay native. */
.eb-tv #tvDisplay { height: 100vh; height: 100dvh; background: #fff; }
.eb-tv .tv-bar { position: relative; min-height: 72px; background: var(--eb-cobalt); border: 0; padding: 14px 28px; flex-wrap: wrap; gap: 12px 24px; color: #fff; }
/* Lobby/kiosk mode pins the bar over the stage as a fade-out gradient; the
   theme wants the solid cobalt bar in flow, so outrank that rule here. */
body.eb-tv.lobby-fullscreen #tvDisplay .tv-bar { position: relative; top: auto; left: auto; right: auto; z-index: auto; background: var(--eb-cobalt); padding: 14px 28px; pointer-events: auto; box-shadow: none; }
body.eb-tv.lobby-fullscreen #tvDisplay .tv-bar .tv-brand { opacity: 1; }
body.eb-tv.lobby-fullscreen #tvDisplay .tv-bar .tv-clock { color: #fff; opacity: 1; }
.eb-tv .tv-brand { gap: 18px; min-width: 0; }
.eb-tv-wordmark { display: flex; align-items: center; gap: 10px; color: #fff; font-size: clamp(1.2rem, 2vw, 2.2rem); font-weight: 800; white-space: nowrap; }
.eb-tv-wordmark svg { width: 32px; height: 32px; flex-shrink: 0; }
.eb-tv .tv-brand-name, .eb-tv .tv-brand-name em, .eb-tv .tv-clock { color: #fff; }
.eb-tv .tv-brand-name { font-size: clamp(1rem, 1.2vw, 1.5rem); white-space: normal; max-width: none; line-height: 1.3; }
.eb-tv .tv-clock { font-size: clamp(.9375rem, 1.4vw, 1.5rem); text-align: right; }
.eb-tv .live-badge { background: #fff; color: #155f3a; animation: none; }
/* Standing notice pills take their own full-width row under the brand line, the
   same spot the alert pills use, so a long notice can wrap instead of squeezing
   the clock off the row. */
.eb-tv .tv-notice-pills { order: 4; flex-basis: 100%; margin: 0; flex-wrap: wrap; }
.eb-tv .tv-notice-pill { max-width: 100%; }
.eb-tv .alert-banner-wrap { position: static !important; transform: none !important; order: 5; flex-basis: 100%; max-width: none; }
.eb-tv .alert-banner-wrap:empty { display: none; }
.eb-tv .tv-main { background: #fff; min-height: 0; }
.eb-tv .tv-empty-title { color: var(--eb-ink); }
.eb-tv .tv-empty-sub, .eb-tv .tv-empty-icon { color: var(--eb-muted); }
.eb-tv .tv-slide { background: #fff; color: var(--eb-ink); flex-direction: row !important; min-height: 0; }
.eb-tv .tv-flyer-side { flex: 0 0 40% !important; width: 40% !important; padding: clamp(16px, 2vw, 32px) !important; border: 0 !important; background: #fff; min-width: 0; container-type: size; }
.eb-tv .tv-flyer-side .flyer-frame { width: min(100%, calc((100vh - 220px) * 17 / 22)); height: auto; aspect-ratio: var(--eb-letter); max-width: 100%; max-height: 100%; flex: none; background: #f7f9fc; border: 1px solid var(--eb-line); border-radius: 3px; box-shadow: none; position: relative; }
@supports (width: 1cqh) { .eb-tv .tv-flyer-side .flyer-frame { width: min(100cqw, calc(100cqh * 17 / 22)); height: auto; } }
.eb-tv .flyer-frame img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
/* The base kiosk paints its own dark gradient on the info panel; the theme's
   white stage must win there too or ink text lands on navy. */
.eb-tv .tv-info-side { background: #fff !important; color: var(--eb-ink); }
.eb-tv .tv-desc { background: var(--eb-tint) !important; color: var(--eb-ink) !important; border: 1px solid var(--eb-line); border-radius: 8px; }
.eb-tv .tv-info-side { flex: 1; width: auto !important; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 32px) !important; padding: clamp(20px, 2.5vw, 44px) !important; align-content: start; overflow: hidden; }
.eb-tv-title-row { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: start; gap: clamp(16px, 1.8vw, 32px); min-width: 0; }
.eb-tv-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; background: var(--eb-cobalt); color: #fff; padding: 14px 12px; border-radius: 8px; min-width: 80px; }
.eb-tv-date .eb-date-month { font-size: clamp(.875rem, 1.3vw, 1.5rem); text-transform: uppercase; font-weight: 700; }
.eb-tv-date .eb-date-day { font-size: clamp(1.6rem, 2.6vw, 3.5rem); font-weight: 800; line-height: 1.2; }
.eb-tv .tv-event-name { color: var(--eb-ink); font-size: clamp(1.7rem, 3vw, 3.9rem) !important; font-weight: 800; line-height: 1.14; letter-spacing: -.035em; height: auto; min-height: 0; display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; padding: 0; }
.eb-tv .tv-info-side > .tv-event-meta { grid-column: 1; grid-row: 2; margin: 0; align-self: start; gap: clamp(12px, 1.4vw, 24px); }
.eb-tv .tv-meta-row { color: var(--eb-ink); font-size: clamp(1rem, 1.7vw, 2.3rem) !important; font-weight: 500; line-height: 1.4; }
.eb-tv .tv-meta-row > span:not(.tv-meta-icon) { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.eb-tv .tv-meta-icon { color: var(--eb-cobalt); background: var(--eb-cobalt); font-size: inherit; }
.eb-tv .tv-meta-icon svg { color: var(--eb-cobalt); }
.eb-tv .tv-info-side > .tv-qr-block { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; margin: 0; background: var(--eb-paper); border: 1px solid var(--eb-line); padding: 12px; border-radius: 8px; max-width: 22vw; }
.eb-tv .tv-qr-block img { width: clamp(100px, 13vw, 240px) !important; height: auto !important; aspect-ratio: 1; background: #fff; border-radius: 0; }
.eb-tv .tv-qr-block.tv-qr-fallback { background: var(--eb-paper); border-color: var(--eb-line); }
.eb-tv .tv-qr-cta, .eb-tv .tv-qr-text, .eb-qr-label { color: var(--eb-ink); font-size: clamp(.875rem, 1.1vw, 1.3rem); font-weight: 700; text-transform: none; letter-spacing: 0; text-align: center; margin-top: 10px; }
.eb-tv .tv-ticker-wrap { background: var(--eb-tint); border-color: var(--eb-line); }
.eb-tv .tv-ticker-inner { color: var(--eb-ink); font-size: clamp(.9375rem, 1.5vw, 1.8rem); }
.eb-tv .ticker-item { color: var(--eb-ink); }
/* Only the admin notice itself takes its chosen color: gold letters for
   community info, red letters for an urgent alert, on a navy highlight so
   the gold reads on the pale bar (both above 6:1). The default ticker
   lines keep the theme look. */
.eb-tv .ticker-item.ticker-notice { color: #E7A63C; background: #112347; padding: .25em .7em; border-radius: 6px; }
.eb-tv .ticker-item.ticker-notice.ticker-alert { color: #FF7B7B; }
.eb-tv .ticker-dot { color: var(--eb-cobalt); }
.eb-tv .tv-recurring-tag { color: var(--eb-cobalt); }
.eb-tv .tv-nextup-bar { background: var(--eb-cobalt); border: 0; padding: 14px 28px; min-height: 56px; }
.eb-tv .tv-nextup-label, .eb-tv .tv-nextup-name, .eb-tv .tv-nextup-date { color: #fff; }
.eb-tv .tv-nextup-label { text-transform: none; letter-spacing: 0; font-size: clamp(.9375rem, 1.2vw, 1.4rem); }
.eb-tv .tv-nextup-date { font-size: clamp(.875rem, 1.1vw, 1.3rem); }
.eb-tv .tv-progress-wrap { background: #cddcff; height: 6px; }
.eb-tv .tv-progress-fill { background: var(--eb-cobalt); }

/* Responsive website: filters above results, no sideways flyer carousel. */
@media (max-width: 1180px) {
  .eb-board-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .eb-board-shell #eventGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .eb-home .nav { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .eb-home .nav-links { gap: 16px; }
  .eb-home .nav-logo span { display: none; }
}
@media (max-width: 760px) {
  .eb-home .hero { padding: 36px 20px; }
  .eb-home .hero-content { grid-template-columns: 1fr; gap: 24px; }
  .eb-home .hero-title { font-size: clamp(2rem, 7vw, 3rem); }
  .eb-home .section { padding: 40px 20px; }
  .eb-board .header-inner { padding: 16px; gap: 14px; }
  .eb-board .header-links { width: 100%; gap: 14px; }
  .eb-board .nav-logo-text { font-size: 1.3rem; }
  .eb-board .state-badge { font-size: .8125rem; padding-left: 12px; }
  .eb-board-shell { display: block; }
  .eb-board-sidebar { padding: 22px 16px; border-right: 0; border-bottom: 1px solid var(--eb-line); }
  .eb-board-sidebar .hero { margin-bottom: 20px; }
  .eb-board-sidebar .filter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .eb-board-sidebar .filter-group:last-of-type, .eb-board-sidebar .filter-count { grid-column: 1 / -1; }
  .eb-board-sidebar .eb-date-presets { flex-direction: row; flex-wrap: wrap; }
  .eb-sidebar-links { margin-top: 16px; padding-top: 16px; }
  .eb-board-shell .main-content { padding: 22px 16px 32px; }
  .eb-board-shell #eventGrid { overflow: visible !important; padding: 0 !important; scroll-snap-type: none; }
  .eb-board-shell #eventGrid[style*="display: flex"], .eb-board-shell #eventGrid[style*="display:flex"] { display: grid !important; }
  .eb-board-shell .event-card { flex: initial !important; width: 100% !important; min-width: 0 !important; scroll-snap-align: none; }
  /* The header's buttons wrap onto a second row on phones; the base page
     pins the header to a fixed height, which let them spill onto the sidebar. */
  .eb-board .site-header, .eb-board .header-inner { height: auto !important; min-height: 0 !important; }
  /* The base page renders phone cards as 92px-thumbnail rows. This theme
     keeps the complete Letter flyer, so cards stack vertically instead. */
  .eb-board-shell .event-card { flex-direction: column !important; min-height: 0 !important; }
  .eb-board-shell .eb-letter-frame { width: 100% !important; min-width: 0 !important; flex: none; }
  .eb-board-shell .eb-letter-frame .card-image,
  .eb-board-shell .eb-letter-frame .card-image-placeholder { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; object-fit: contain !important; border-radius: 0 !important; }
  .eb-board-shell .card-body { width: auto !important; min-width: 0; padding: 16px 2px 4px !important; }
  .eb-board-shell .card-title { font-size: 1.125rem !important; -webkit-line-clamp: unset !important; }
  .eb-board-shell .card-category { font-size: .8125rem !important; }
  .eb-board-shell .card-meta-row { font-size: .9375rem !important; }
}
@media (max-width: 540px) {
  .eb-board-shell #eventGrid { grid-template-columns: minmax(0, 1fr) !important; }
  .eb-board-sidebar .filter-inner { grid-template-columns: 1fr; }
  .eb-board-shell .eb-month-heading { font-size: 1.375rem !important; }
  .eb-board-shell .card-title { font-size: 1.125rem; }
  .eb-home .hero-stats { flex-wrap: wrap; gap: 18px; }
  .eb-home .hv-card { position: relative; right: auto; bottom: auto; margin: 12px 0 0; }
}
@media (max-height: 720px) and (min-aspect-ratio: 4/3) {
  .eb-tv .tv-bar { min-height: 52px; padding: 10px 20px; }
  .eb-tv .tv-info-side { padding: 20px !important; gap: 18px !important; }
  .eb-tv .tv-event-name { font-size: clamp(1.5rem, 2.7vw, 2.8rem) !important; }
  .eb-tv .tv-meta-row { font-size: clamp(1rem, 1.5vw, 1.5rem) !important; }
  .eb-tv .tv-nextup-bar { padding: 10px 20px; min-height: 42px; }
  .eb-tv-date { min-width: 64px; padding: 10px; }
}
@media (max-aspect-ratio: 4/3) {
  .eb-tv .tv-slide { flex-direction: column !important; }
  .eb-tv .tv-flyer-side { flex: 0 0 46% !important; width: 100% !important; padding: 16px !important; }
  .eb-tv .tv-info-side { padding: 20px !important; width: 100% !important; gap: 16px !important; }
  .eb-tv .tv-info-side > .tv-qr-block { max-width: 30vw; }
  .eb-tv .tv-qr-block img { width: clamp(88px, 20vw, 160px) !important; }
  .eb-tv .tv-brand { flex-wrap: wrap; gap: 8px 16px; }
  .eb-tv .tv-event-name { font-size: clamp(1.3rem, 3vw, 2.4rem) !important; }
  .eb-tv .tv-meta-row { font-size: clamp(.9375rem, 2vw, 1.7rem) !important; }
  .eb-tv .tv-nextup-date { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-cobalt *, .eb-cobalt *::before, .eb-cobalt *::after { scroll-behavior: auto !important; }
  .eb-board .event-card, .eb-home .hero-path-card { transition: none !important; }
  .eb-tv .tv-slide { transition: none; }
  .eb-tv .tv-ticker-inner { animation: none !important; white-space: normal; }
}
@media print {
  .eb-board .site-header, .eb-board-sidebar, .eb-card-actions, .eb-board .submit-cta, .eb-board .site-footer { display: none !important; }
  .eb-board-shell { display: block; }
  .eb-board-shell #eventGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .eb-board-shell .event-card { break-inside: avoid; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Extension (2026-10-05): the rest of the public site.
   - .eb-page  : content pages (blog, about, FAQ, network, developers,
                 setup guide, privacy, terms). Dark brand tokens are remapped
                 to the Cobalt & Paper palette; admin pages never load this.
   - .eb-city  : the Waynesville-style city boards. Scoped to the citizen
                 home view, the flyer overlay and the citizen modal only, so
                 the admin and TV views that share the stylesheet stay as-is.
   - .eb-tpl   : the dynamic city template served at /<slug>.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared token remap: navy surfaces become white/paper, gold becomes cobalt ── */
body.eb-page,
body.eb-tpl,
body.eb-city #view-home, body.eb-city #flyerFeedOverlay, body.eb-city #cvModalOverlay {
  --navy: #fff; --navy-mid: #fff; --navy-light: var(--eb-tint); --navy-border: var(--eb-line); --navy-card: #fff;
  --bg: var(--eb-paper); --bg-base: var(--eb-paper); --bg-surface: #fff; --bg-elevated: var(--eb-tint); --bg-card: #fff; --bg-input: #fff;
  --text: var(--eb-ink); --text-primary: var(--eb-ink); --text-secondary: #3b4a63; --text-muted: var(--eb-muted);
  --gold: var(--eb-cobalt); --gold-light: var(--eb-cobalt-hover); --gold-dark: var(--eb-cobalt-hover); --gold-accent: var(--eb-cobalt);
  --gold-dim: var(--eb-tint); --gold-glow: transparent; --on-gold: #fff;
  --civic: var(--eb-cobalt); --civic-light: var(--eb-cobalt); --civic-deep: var(--eb-cobalt-hover);
  --border: var(--eb-line); --border-strong: #b9c8e3; --line: var(--eb-line);
  --primary: var(--eb-cobalt); --accent: var(--eb-cobalt);
  --eb-paper: #f3f7fc; --eb-surface: #fff; --eb-line: #d4dfef;
  --eb-amber-400: var(--eb-cobalt); --eb-amber-600: var(--eb-cobalt); --eb-amber-100: var(--eb-tint);
  --eb-blue-500: var(--eb-cobalt); --eb-blue-600: var(--eb-cobalt-hover);
  --eb-ink: #112347; --eb-slate: #3b4a63; --eb-muted: #526582;
  --shadow-deep: 0 8px 28px rgb(17 35 71 / 9%); --shadow-card: 0 3px 12px rgb(17 35 71 / 6%); --shadow-gold: none;
  --shadow-sm: 0 1px 2px rgb(17 35 71 / 6%); --shadow-md: 0 6px 18px rgb(17 35 71 / 8%);
  color-scheme: light;
}
body.eb-page { background: var(--eb-paper); color: var(--eb-ink); font-family: var(--eb-font); }
body.eb-page :focus-visible { outline-color: var(--eb-cobalt); }

/* Content pages: the handful of hard-coded dark colors the token remap can't reach. */
body.eb-page nav, body.eb-page header, body.eb-page .site-header, body.eb-page .navbar, body.eb-page .nav, body.eb-page .mobile-menu {
  background: #fff; border-bottom: 1px solid var(--eb-line); box-shadow: none; backdrop-filter: none;
}
body.eb-page footer, body.eb-page .footer, body.eb-page .site-footer { background: #fff; border-top: 1px solid var(--eb-line); color: var(--eb-muted); }
body.eb-page .hero { background: var(--eb-tint); }
body.eb-page .hero::before, body.eb-page .hero::after, body.eb-page .cta-section::before { display: none; }
body.eb-page .share-btn:hover, body.eb-page .listen-btn:hover, body.eb-page .listen-btn.playing,
body.eb-page .btn-outline:hover, body.eb-page .bottom-cta a.btn-ghost:hover,
body.eb-page .tpl-gate-card:hover { background: var(--eb-tint); }
body.eb-page .pricing-card.featured, body.eb-page .cta-section, body.eb-page .site-footer .disclosure,
body.eb-page .step-body code, body.eb-page code, body.eb-page pre { background: var(--eb-tint); color: var(--eb-ink); }
body.eb-page .pricing-tab, body.eb-page .pricing-card, body.eb-page .citizen-model-bar, body.eb-page .features-visual,
body.eb-page .directory-card, body.eb-page .cta-form, body.eb-page .map-wrap, body.eb-page .avoid-section td,
body.eb-page .settings-box li, body.eb-page .result-row { border-color: var(--eb-line); }
body.eb-page .hero-stat-divider, body.eb-page .pricing-divider { background: var(--eb-line); }
body.eb-page .chip, body.eb-page .city-status.pending, body.eb-page .popup-badge.pending { color: var(--eb-cobalt); }
body.eb-page .form-row input, body.eb-page .form-row textarea { background: #fff; color: var(--eb-ink); border-color: var(--eb-line); }
body.eb-page #signupResult .key-display { background: #e8f4ec; border-color: #9fd3b4; color: #1e7a46; }
body.eb-page .stat-row[data-color="orange"] .ring-fill, body.eb-page .stat-row[data-color="orange"] .stat-pct { stroke: var(--eb-cobalt); color: var(--eb-cobalt); }
body.eb-page .blog-card { box-shadow: 0 1px 2px rgb(17 35 71 / 5%); }
/* Privacy & Terms are written with literal colors rather than tokens. */
body.eb-page.eb-legal { background: var(--eb-paper) !important; color: var(--eb-ink); }
body.eb-page.eb-legal nav, body.eb-page.eb-legal footer { background: #fff; border-color: var(--eb-line); }
body.eb-page.eb-legal nav a, body.eb-page.eb-legal .footer-links a, body.eb-page.eb-legal p, body.eb-page.eb-legal li { color: var(--eb-ink); }
body.eb-page.eb-legal h1, body.eb-page.eb-legal h2, body.eb-page.eb-legal a, body.eb-page.eb-legal nav a:hover, body.eb-page.eb-legal .footer-links a:hover { color: var(--eb-cobalt); }
body.eb-page.eb-legal a:hover { color: var(--eb-cobalt-hover); }
body.eb-page.eb-legal .last-updated, body.eb-page.eb-legal .footer-text { color: var(--eb-muted); }
body.eb-page.eb-legal .nav-bucket rect, body.eb-page.eb-legal .nav-bucket path { stroke: var(--eb-cobalt); }

/* ── City boards (Waynesville and copies): citizen home view ── */
body.eb-city #view-home { background: var(--eb-paper) !important; color: var(--eb-ink); }
body.eb-city #view-home::before { display: none !important; }
body.eb-city .home-nav { background: #fff; border-bottom: 1px solid var(--eb-line); backdrop-filter: none; box-shadow: 0 1px 0 var(--eb-line); }
body.eb-city .nav-logo-mark { background: var(--eb-cobalt); }
body.eb-city .nav-logo-mark svg { stroke: #fff; }
body.eb-city .nav-logo-text { color: var(--eb-ink); }
body.eb-city .nav-logo-text em { color: var(--eb-cobalt); }
body.eb-city .nav-back-link { color: var(--eb-cobalt) !important; opacity: 1 !important; }
body.eb-city .nav-back-sep { background: var(--eb-line) !important; }
body.eb-city .home-nav .btn-ghost { background: #fff; color: var(--eb-cobalt) !important; border-color: var(--eb-line) !important; }
body.eb-city .home-nav .btn-ghost:hover { background: var(--eb-tint); }
body.eb-city .v2-kicker, body.eb-city .v2-title .hl { color: var(--eb-cobalt); }
body.eb-city .v2-title { color: var(--eb-ink); }
body.eb-city .v2-sub { color: var(--eb-slate); }
body.eb-city .v2-sub strong { color: var(--eb-ink); }
body.eb-city .v2-chip { background: #fff; border: 1px solid var(--eb-line); color: var(--eb-ink); }
body.eb-city .v2-chip:hover { border-color: var(--eb-cobalt); color: var(--eb-cobalt); }
body.eb-city .v2-chip.active { background: var(--eb-cobalt); border-color: var(--eb-cobalt); color: #fff; }
body.eb-city .v2-cat-sel { background: #fff !important; color: var(--eb-ink) !important; border: 1px solid var(--eb-line) !important; }
body.eb-city .v2-heroside { background: #fff; border: 1px solid var(--eb-line); box-shadow: none; }
body.eb-city .v2-add-btn { background: var(--eb-cobalt); color: #fff; border-color: var(--eb-cobalt); animation: none; box-shadow: none; }
body.eb-city .v2-add-btn:hover { background: var(--eb-cobalt-hover); }
body.eb-city .v2-mini-tv { background: #fff; border: 1px solid var(--eb-line); }
body.eb-city .v2tv-stage { background: #fff; }
body.eb-city .v2tv-bar { background: var(--eb-cobalt); color: #fff; }
body.eb-city .v2tv-bar span { color: #fff; }
body.eb-city .v2tv-name { color: var(--eb-ink); }
body.eb-city .v2tv-meta, body.eb-city .v2tv-loc, body.eb-city .v2tv-loading { color: var(--eb-slate); }
body.eb-city .v2tv-flyer-ph { background: var(--eb-tint); color: var(--eb-ink); }
body.eb-city .v2-drop-sub { color: var(--eb-muted); }
body.eb-city .v2-edit-link { color: var(--eb-cobalt); }
body.eb-city .v2-also { background: var(--eb-tint); border-color: var(--eb-line); }
body.eb-city .v2-also-lbl { color: var(--eb-ink); }
body.eb-city .v2-also-items { color: var(--eb-slate); }
body.eb-city .v2-lobby { background: var(--eb-tint); }
body.eb-city .v2-lobby h2 { color: var(--eb-ink); }
body.eb-city .v2-lobby p, body.eb-city .v2-lobby-note { color: var(--eb-slate); }
body.eb-city .v2-lobby-cta { background: var(--eb-cobalt); color: #fff; border-color: var(--eb-cobalt); }
body.eb-city .v2-lobby-cta--ghost { background: #fff; color: var(--eb-cobalt); border: 1px solid var(--eb-line); }
body.eb-city .hero-note { color: var(--eb-muted); }
body.eb-city .hero-note a { color: var(--eb-cobalt) !important; }
body.eb-city .home-footer { border-top: 1px solid var(--eb-line); color: var(--eb-muted); }
body.eb-city .home-footer div { color: var(--eb-muted) !important; }
body.eb-city .staff-access-btn { color: var(--eb-cobalt) !important; border-color: var(--eb-line) !important; opacity: 1; background: #fff; }
/* Feed */
body.eb-city .mz-hdr { color: var(--eb-ink); text-transform: none; letter-spacing: -.02em; font-size: 1.25rem; font-weight: 800; }
body.eb-city .mz-hdr::after { background: var(--eb-line); }
body.eb-city .mz-card { background: #fff; border: 1px solid var(--eb-line); border-radius: var(--eb-radius); padding: 10px; box-shadow: none; overflow: visible; }
body.eb-city .mz-card:hover { transform: none; border-color: var(--eb-cobalt); box-shadow: 0 5px 18px rgb(17 35 71 / 7%); }
body.eb-city .mz-card .eb-letter-frame { width: 100% !important; min-width: 0; height: auto; aspect-ratio: var(--eb-letter); display: flex; align-items: center; justify-content: center; background: #f7f9fc; border: 1px solid var(--eb-line); overflow: hidden; flex: none; }
body.eb-city .eb-letter-frame .mz-card-img { width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: contain !important; object-position: center !important; background: #f7f9fc; border-radius: 0; }
body.eb-city .eb-letter-frame .mz-card-ph { width: 100%; height: 100%; min-height: 0; background: var(--eb-tint); color: var(--eb-ink); }
body.eb-city .mzp-cat { color: var(--eb-cobalt); }
body.eb-city .mzp-name { color: var(--eb-ink); }
body.eb-city .mz-badge { position: static !important; background: var(--eb-cobalt); border: 0; color: #fff; min-width: 52px; border-radius: 6px; padding: 7px 8px; text-align: center; box-shadow: none; align-self: start; }
body.eb-city .mz-badge .mzb-dow, body.eb-city .mz-badge .mzb-day, body.eb-city .mz-badge .mzb-mo { color: #fff; }
body.eb-city .mz-badge .mzb-day { font-size: 1.6rem; line-height: 1.05; font-weight: 800; }
body.eb-city .mz-body { padding: 14px 2px 4px; display: flex; flex-direction: column; gap: 10px; }
body.eb-city .mz-body .eb-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
body.eb-city .mz-cat { color: var(--eb-muted); background: transparent; padding: 0; border: 0; border-radius: 0; font-size: .8125rem; text-transform: none; letter-spacing: 0; }
body.eb-city .mz-title { color: var(--eb-ink); font-size: 1.0625rem; line-height: 1.35; display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0; }
body.eb-city .mz-meta-row { color: var(--eb-slate); font-size: .9375rem; }
body.eb-city .mz-meta-row svg { color: var(--eb-cobalt); fill: currentColor; stroke: currentColor; }
body.eb-city .mz-card .eb-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 12px 2px 0; }
body.eb-city .mz-card .eb-card-view, body.eb-city .mz-card .mz-share { position: static !important; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--eb-cobalt); background: #fff; border: 0; border-radius: 4px; padding: 8px; font: 700 .9375rem var(--eb-font); box-shadow: none; backdrop-filter: none; text-transform: none; letter-spacing: 0; cursor: pointer; }
body.eb-city .mz-card .eb-card-view:hover, body.eb-city .mz-card .mz-share:hover { color: var(--eb-cobalt-hover); background: var(--eb-tint); transform: none; }
body.eb-city .mz-card .mz-share svg { width: 18px; height: 18px; }
body.eb-city .mz-card .mz-share span { display: inline !important; }
body.eb-city .mz-card .canceled-stamp { z-index: 3; }
@media (max-width: 600px) {
  body.eb-city .mz-card { flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; }
  body.eb-city .mz-card .mz-meta-row { display: flex !important; }
}
/* Flyer overlay (same cards; just the shell) */
body.eb-city .flyer-feed, body.eb-city .flyer-feed-header { background: var(--eb-paper); }
body.eb-city .flyer-feed-header { border-bottom: 1px solid var(--eb-line); }
body.eb-city .flyer-feed-back, body.eb-city .flyer-feed-count { color: var(--eb-cobalt); }
body.eb-city .flyer-feed-count { background: var(--eb-tint); }
body.eb-city .flyer-feed-title { color: var(--eb-ink); }
body.eb-city .flyer-filter-pill { background: #fff; border: 1px solid var(--eb-line); color: var(--eb-ink); }
body.eb-city .flyer-filter-pill.active { background: var(--eb-cobalt); border-color: var(--eb-cobalt); color: #fff; }
/* Citizen modal */
body.eb-city .cv-modal-overlay { background: rgb(17 35 71 / 55%); }
body.eb-city .cv-modal { background: #fff; border-top: 2px solid var(--eb-cobalt); color: var(--eb-ink); }
body.eb-city .cv-modal-handle { background: var(--eb-line); }
body.eb-city .cv-modal-flyer { background: #f7f9fc; }
body.eb-city .cv-modal-type { color: var(--eb-cobalt); }
body.eb-city .cv-modal-title { color: var(--eb-ink); }
body.eb-city .cv-modal-org, body.eb-city .cv-modal-desc { color: var(--eb-slate); }
body.eb-city .cv-modal-details { background: var(--eb-tint); color: var(--eb-ink); }
body.eb-city .cv-modal-detail-icon::before { background: var(--eb-cobalt); }
body.eb-city .cv-modal-share { border-top-color: var(--eb-line); }
body.eb-city .cv-modal-share-label { color: var(--eb-muted); }
body.eb-city .cv-share-btn { background: #fff; border: 1px solid var(--eb-line); color: var(--eb-cobalt); }
body.eb-city .cv-share-btn:hover { background: var(--eb-tint); color: var(--eb-cobalt-hover); }
body.eb-city .cv-share-btn svg { fill: currentColor; }
body.eb-city .cv-share-primary { background: var(--eb-cobalt); border-color: var(--eb-cobalt); color: #fff; }
body.eb-city .cv-modal-close { background: linear-gradient(to bottom, rgb(255 255 255 / 0%), #fff 40%); }
body.eb-city .cv-modal-close button { background: #fff; border: 1px solid var(--eb-line); color: var(--eb-ink); }

/* ── Dynamic city template ── */
body.eb-tpl { background: var(--eb-paper); color: var(--eb-ink); font-family: var(--eb-font); }
body.eb-tpl .spinner { border-color: var(--eb-line); border-top-color: var(--eb-cobalt); }
body.eb-tpl .tpl-header { background: #fff; border-bottom: 1px solid var(--eb-line); }
body.eb-tpl .tpl-nav-btn { background: #fff; color: var(--eb-ink); border-color: var(--eb-line); }
body.eb-tpl .tpl-nav-btn:hover { background: var(--eb-tint); color: var(--eb-cobalt); }
body.eb-tpl .tpl-nav-btn.primary { background: var(--eb-cobalt); border-color: var(--eb-cobalt); color: #fff; }
body.eb-tpl .tpl-filter-btn { background: #fff; color: var(--eb-ink); border-color: var(--eb-line); }
body.eb-tpl .tpl-filter-btn:hover { background: var(--eb-tint); color: var(--eb-cobalt); }
body.eb-tpl .tpl-filter-btn.active { background: var(--eb-cobalt); border-color: var(--eb-cobalt); color: #fff; }
body.eb-tpl .tpl-search { background: #fff; border-color: var(--eb-line); color: var(--eb-ink); }
body.eb-tpl .tpl-event-card { background: #fff; border-color: var(--eb-line); border-radius: var(--eb-radius); padding: 10px; }
body.eb-tpl .tpl-event-card:hover { transform: none; border-color: var(--eb-cobalt); box-shadow: 0 5px 18px rgb(17 35 71 / 7%); }
body.eb-tpl .tpl-event-flyer { aspect-ratio: var(--eb-letter); background: #f7f9fc; border: 1px solid var(--eb-line); }
body.eb-tpl .tpl-event-flyer img { object-fit: contain; object-position: center; }
body.eb-tpl .tpl-event-flyer-empty { color: var(--eb-muted); }
body.eb-tpl .tpl-event-type { color: var(--eb-muted); text-transform: none; letter-spacing: 0; }
body.eb-tpl .tpl-event-name { color: var(--eb-ink); font-size: 1.0625rem; -webkit-line-clamp: unset; overflow: visible; }
body.eb-tpl .tpl-event-meta { color: var(--eb-slate); font-size: .9375rem; }
body.eb-tpl .tpl-event-card .eb-card-actions { display: flex; justify-content: flex-start; padding: 10px 6px 4px; }
body.eb-tpl .tpl-event-card .eb-card-view { min-height: 44px; color: var(--eb-cobalt); background: #fff; border: 0; border-radius: 4px; padding: 8px; font: 700 .9375rem var(--eb-font); cursor: pointer; }
body.eb-tpl .tpl-event-card .eb-card-view:hover { background: var(--eb-tint); color: var(--eb-cobalt-hover); }
body.eb-tpl .tpl-modal-bg { background: rgb(17 35 71 / 55%); }
body.eb-tpl .tpl-modal { background: #fff; border-color: var(--eb-line); color: var(--eb-ink); }
body.eb-tpl .tpl-modal h2 { color: var(--eb-ink); }
body.eb-tpl .tpl-modal-meta .cell { background: var(--eb-tint); }
body.eb-tpl .tpl-modal-desc { background: var(--eb-tint); border-left-color: var(--eb-cobalt); color: var(--eb-slate); }
body.eb-tpl .cta-primary { background: var(--eb-cobalt); color: #fff; }
body.eb-tpl .cta-ghost { background: #fff; color: var(--eb-cobalt); border-color: var(--eb-line); }
body.eb-tpl .tpl-gate-card { background: #fff; border-color: var(--eb-line); color: var(--eb-ink); }
body.eb-tpl .tpl-gate-card:hover { background: var(--eb-tint); border-color: var(--eb-cobalt); }
body.eb-tpl .tpl-status-expired { background: var(--eb-tint); color: var(--eb-muted); }
body.eb-tpl .tpl-footer { background: #fff; border-top: 1px solid var(--eb-line); color: var(--eb-muted); }
body.eb-tpl .tpl-footer a { color: var(--eb-cobalt); }

/* ── Follow-ups from the preview pass ── */
/* Content pages: nav/logo/back links that carry their own color rules. */
body.eb-page nav a, body.eb-page header a, body.eb-page .navbar a, body.eb-page .header-nav a, body.eb-page .site-header a, body.eb-page .nav-link { color: var(--eb-ink) !important; }
body.eb-page nav a:hover, body.eb-page header a:hover, body.eb-page .navbar a:hover, body.eb-page .nav-link:hover,
body.eb-page a.logo, body.eb-page .navbar-back, body.eb-page .back-link, body.eb-page .article-nav-link, body.eb-page .article-nav-center a,
body.eb-page .breadcrumb a, body.eb-page .nav-back { color: var(--eb-cobalt) !important; }
body.eb-page .btn-outline, body.eb-page .btn-civic { background: #fff !important; color: var(--eb-cobalt) !important; border-color: var(--eb-line) !important; }
body.eb-page .btn-primary { background: var(--eb-cobalt) !important; color: #fff !important; border-color: var(--eb-cobalt) !important; }
body.eb-page .chip, body.eb-page .filter-demo .chip { color: var(--eb-cobalt) !important; }
/* Citizen Plus bottom banner (home + Missouri board): hard-coded navy/gold in
   the page, so it needs literal overrides rather than token remaps. */
body.eb-cobalt .cp-banner { background: #fff !important; border-top: 2px solid var(--eb-cobalt) !important; color: var(--eb-ink) !important; box-shadow: 0 -4px 20px rgb(17 35 71 / 12%) !important; }
body.eb-cobalt .cp-banner-text { color: var(--eb-ink) !important; }
body.eb-cobalt .cp-banner-text strong { color: var(--eb-cobalt) !important; }
body.eb-cobalt .cp-banner-cta { background: var(--eb-cobalt) !important; color: #fff !important; }
body.eb-cobalt .cp-banner-cta:hover { background: var(--eb-cobalt-hover) !important; box-shadow: none !important; transform: none !important; }
body.eb-cobalt .cp-banner-close { color: var(--eb-muted) !important; }
body.eb-cobalt .cp-banner-close:hover { color: var(--eb-ink) !important; background: var(--eb-tint) !important; }
body.eb-page .article-cta a { background: var(--eb-cobalt) !important; color: #fff !important; }
body.eb-page .article-cta a:hover { background: var(--eb-cobalt-hover) !important; color: #fff !important; }
body.eb-page .chip.selected, body.eb-page .filter-demo .chip.selected, body.eb-page .chip.active, body.eb-page .chip[aria-pressed="true"] { background: var(--eb-cobalt) !important; color: #fff !important; border-color: var(--eb-cobalt) !important; }
body.eb-page footer a, body.eb-page .footer-links a, body.eb-page .footer-legal a { color: var(--eb-slate) !important; }
body.eb-page footer a:hover, body.eb-page .footer-links a:hover { color: var(--eb-cobalt) !important; }
body.eb-page .footer-logo-name, body.eb-page .footer-col-title, body.eb-page .cta-title { color: var(--eb-ink) !important; }
body.eb-page .footer-tagline, body.eb-page .footer-copy, body.eb-page .cta-sub, body.eb-page .cta-note { color: var(--eb-slate) !important; }
body.eb-page .article-meta-divider { color: var(--eb-muted); }
/* City board: elements with their own color rules or inline styles. */
body.eb-city .home-nav .btn-label, body.eb-city .home-nav .btn-ghost span { color: var(--eb-cobalt) !important; }
body.eb-city .v2-chips .v2-chip, body.eb-city .v2-chip:not(.active) { color: var(--eb-ink) !important; }
body.eb-city .v2-chips .v2-chip.active, body.eb-city .v2-chip.active { color: #fff !important; }
body.eb-city .v2-edit-link, body.eb-city .v2-edit-link span { color: var(--eb-cobalt) !important; }
/* The two mini TV previews mirror the kiosk, which is now white with a cobalt bar. */
body.eb-city .v2-mini-tv, body.eb-city .v2-lobby-tv, body.eb-city .v2tv-stage, body.eb-city .v2tv-slide { background: #fff !important; }
body.eb-city .v2-lobby-tv { border: 1px solid var(--eb-line); }
body.eb-city .v2tv-flyer, body.eb-city .v2tv-flyer-ph { background: #f7f9fc !important; }
body.eb-city .v2tv-info { background: #fff !important; }
body.eb-city .v2tv-name { color: var(--eb-ink) !important; }
body.eb-city .v2tv-meta, body.eb-city .v2tv-loc { color: var(--eb-slate) !important; }
body.eb-city .v2tv-bar { background: var(--eb-cobalt) !important; color: #fff !important; }
/* FAQ accordion, Developers buttons, pricing tabs, setup-guide status labels. */
body.eb-page details, body.eb-page .faq-accordion details { background: #fff !important; border: 1px solid var(--eb-line) !important; }
body.eb-page details[open] { box-shadow: 0 4px 12px rgb(17 35 71 / 8%) !important; }
body.eb-page summary { color: var(--eb-ink); }
body.eb-page .question-text, body.eb-page .toggle-icon { color: var(--eb-cobalt) !important; }
body.eb-page .answer-content { background: var(--eb-tint) !important; color: var(--eb-ink) !important; }
body.eb-page .footer-link { color: var(--eb-slate) !important; }
body.eb-page .nav-brand-icon, body.eb-page .tier-cta.primary, body.eb-page .form-submit, body.eb-page .cta-btn { color: #fff !important; }
body.eb-page .cta-btn.ghost, body.eb-page .btn-ghost { background: #fff !important; color: var(--eb-cobalt) !important; border: 1px solid var(--eb-line) !important; }
body.eb-page .pricing-tab { color: var(--eb-ink) !important; }
body.eb-page .pricing-tab.active { background: var(--eb-cobalt) !important; border-color: var(--eb-cobalt) !important; color: #fff !important; }
body.eb-page .on { color: #1e7a46 !important; }
body.eb-page .off { color: #b3362b !important; }
/* City board on phones: the base layout lets the hero grid and a ticker span
   grow past the viewport (present on production before this theme). Contain it. */
@media (max-width: 900px) {
  body.eb-city .v2-wrap, body.eb-city .v2-hero, body.eb-city .v2-events, body.eb-city .v2-also, body.eb-city .v2-lobby { max-width: 100vw; box-sizing: border-box; }
  body.eb-city .v2-hero { grid-template-columns: minmax(0, 1fr) !important; }
  body.eb-city .v2-hero-copy, body.eb-city .v2-heroside, body.eb-city .v2-mini-tv, body.eb-city .v2tv-stage, body.eb-city .v2tv-bar, body.eb-city .v2-lobby-tv { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
  body.eb-city .v2tv-bar span { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.eb-city .v2-title { overflow-wrap: anywhere; }
  body.eb-city .v2-chips { flex-wrap: wrap; }
}

/* ── City page in the statewide-board layout (Waynesville): white in-flow
   header, left sidebar (title, filters, Add Event), 3-column event grid.
   The shell markup is built by event-bucket-cobalt.js (buildCityShell). ── */
body.eb-city .home-nav { position: static !important; top: auto !important; height: auto !important; min-height: 80px; padding: 16px 24px !important; }
body.eb-city .nav-logo-text { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--eb-cobalt); }
body.eb-city .nav-logo-text em { color: var(--eb-cobalt); font-style: normal; }
body.eb-city .nav-logo-mark { width: 40px; height: 40px; border-radius: 8px; }
body.eb-city .v2-wrap { max-width: none !important; padding: 0 !important; }
body.eb-city .v2-hero.eb-hero-collapsed { display: none !important; }
body.eb-city .eb-board-shell { max-width: 1600px; margin: 0 auto; }
body.eb-city .eb-board-shell .v2-events { margin: 0; }
body.eb-city .eb-board-shell .flyer-feed-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; padding: 0 !important; }
body.eb-city .eb-board-shell .flyer-feed-grid > .mz-card { width: auto; }
body.eb-city .eb-board-shell .mz-hdr { grid-column: 1 / -1; margin: 8px 0 0; }
body.eb-city .eb-board-shell .v2-events-empty { grid-column: 1 / -1; }
body.eb-city .eb-board-sidebar .v2-chips { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
body.eb-city .eb-board-sidebar .v2-chips .v2-chip { background: transparent !important; border: 1px solid transparent !important; border-radius: 4px !important; color: var(--eb-cobalt) !important; text-align: left; padding: 10px 8px !important; min-height: 44px; font-size: .9375rem; width: 100%; }
body.eb-city .eb-board-sidebar .v2-chips .v2-chip:hover, body.eb-city .eb-board-sidebar .v2-chips .v2-chip.active { background: #fff !important; border-color: var(--eb-cobalt) !important; color: var(--eb-cobalt) !important; }
body.eb-city .eb-board-sidebar .v2-cat-sel { width: 100%; border-radius: 5px !important; min-height: 44px; font-size: 1rem; padding: 10px 12px; }
body.eb-city .eb-board-sidebar .v2-add-btn { width: 100%; border-radius: 6px; min-height: 44px; font-size: .9375rem; font-weight: 700; padding: 10px 14px; transform: none !important; }
body.eb-city .eb-board-sidebar .v2-edit-link { background: none; border: 0; padding: 0; text-align: left; font-size: .9375rem; cursor: pointer; }
body.eb-city .v2-also, body.eb-city .v2-lobby, body.eb-city .hero-note { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
@media (max-width: 1180px) {
  body.eb-city .eb-board-shell .flyer-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  body.eb-city .eb-board-shell .flyer-feed-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.eb-city .eb-board-sidebar .v2-chips { flex-direction: row; flex-wrap: wrap; }
  body.eb-city .eb-board-sidebar .v2-chips .v2-chip { width: auto; }
}
/* Homepage header at tablet widths (2026-10-11): the full row needs about
   1050px, so between 680px and 1100px the links wrapped onto two lines and the
   header ran off the right edge (iPad portrait included). Same breakpoints as
   the shared content-page header in assets/css/eb-site-chrome.css. The
   !important on .nav-cta beats the inline display:flex in the markup. */
.eb-home .nav-link, .eb-home .nav-logo { white-space: nowrap; }
@media (max-width: 1100px) {
  .eb-home .nav-cta .btn-outline { display: none; }
}
@media (max-width: 960px) {
  .eb-home .nav-links { display: none; }
  .eb-home .nav-cta { margin-left: auto; }
  .eb-home .nav-hamburger { display: flex; margin-left: 0; }
}
@media (max-width: 560px) {
  .eb-home .nav-cta { display: none !important; }
  .eb-home .nav-hamburger { margin-left: auto; }
}
/* Homepage price lookup: the input's default min-width kept the row from
   shrinking, so "Find my price" pushed the page 58px sideways on phones. */
.eb-home #cityLookupInput { min-width: 0; }