/**
 * JonnyPops Pop Truck Tracker — widget styles.
 *
 * Branded, mockup-matched layout: a red header bar, a full-width map with a
 * floating "Today's schedule" card, an "ON THE MAP" legend, an illustrated
 * rainbow-popsicle truck, and rainbow-popsicle event pins. Uses the bundled
 * brand tokens (assets/ds/colors.css) — --jp-red, --jp-gold, --jp-woodburned,
 * --jp-stick-brown, --jp-line, --jp-soft-pink, --jp-grey-dark, --jp-off-white,
 * --jp-dark-red, --jp-blue, --jp-ada-purple — and Montserrat.
 */

.jp-poptruck {
	--jp-poptruck-height: 620px;
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
	color: var(--jp-dark-red, #6f052d);
	box-sizing: border-box;
	max-width: 100%;
}
.jp-poptruck *, .jp-poptruck *::before, .jp-poptruck *::after { box-sizing: border-box; }

.jp-poptruck-inner {
	height: var(--jp-poptruck-height);
	min-height: 420px;
	border-radius: 20px;
	overflow: hidden;
	background: var(--jp-off-white, #f5f1f1);
	border: 1px solid var(--jp-line, #e7e0e0);
	box-shadow: 0 10px 30px rgba(79, 57, 40, 0.10);
	display: flex;
	flex-direction: column;
}

/* Branded header bar */
.jp-header {
	flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
	padding: 13px 20px; background: var(--jp-red, #c5003e); color: #fff;
}
.jp-header__logo {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
	background: #fff; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(79, 57, 40, 0.25);
}
.jp-header__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.jp-header__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jp-header__title { font-weight: 900; font-size: 20px; line-height: 1.1; letter-spacing: .01em; }
.jp-header__tagline { font-weight: 600; font-size: 12.5px; opacity: .92; }
/* Embeds that blank both title and tagline still get a bar, because it carries the view
   switcher — the only way back from the schedule. Slimmer, since there is no text to sit beside. */
.jp-header--bare { padding: 8px 20px; justify-content: flex-end; }

/* ---------- View switcher (Live map / Schedule) ----------
   Lives in the header, which sits outside .jp-views and is flex:0 0 auto in a fixed-height,
   overflow:hidden shell — so it stays put in both views and never scrolls away.

   Armoured exactly like .jp-schedule-cta below. On the live site the widget renders inside
   Elementor, whose <button> rules flattened .jp-recenter into a blank oval (see the TEMP rule
   further down). Every property that matters is pinned rather than inherited; do not "tidy" the
   !important flags away without testing on the real page. */
.jp-viewtabs {
	margin-left: auto; flex: 0 0 auto;
	display: flex; gap: 4px; padding: 3px;
	background: rgba(255, 255, 255, .16); border-radius: 999px;
}
.jp-poptruck .jp-viewtab {
	display: inline-flex !important; align-items: center; justify-content: center;
	appearance: none; -webkit-appearance: none;
	font-family: 'Montserrat', system-ui, sans-serif !important;
	font-weight: 800 !important; font-size: 12.5px !important; line-height: 1.2 !important;
	text-transform: none !important; letter-spacing: normal !important;
	color: #fff !important;
	background: transparent !important;
	border: none !important; border-radius: 999px !important;
	padding: 7px 15px !important; margin: 0 !important;
	width: auto !important; min-width: 0 !important; height: auto !important;
	cursor: pointer; box-shadow: none !important; text-decoration: none !important;
	white-space: nowrap;
}
.jp-poptruck .jp-viewtab:hover { background: rgba(255, 255, 255, .18) !important; }
.jp-poptruck .jp-viewtab.is-active {
	background: #fff !important;
	color: var(--jp-dark-red, #6f052d) !important;
}
/* The header is red, so the UA's default focus ring is close to invisible against it. */
.jp-poptruck .jp-viewtab:focus-visible {
	outline: 2px solid #fff !important; outline-offset: 2px !important;
}
/* setView() moves focus into the revealed panel for keyboard users; that is a programmatic
   focus on a container, so suppress the ring it would otherwise draw around the whole view. */
.jp-view:focus { outline: none; }

/* View wrapper: one visible at a time */
.jp-views { flex: 1 1 auto; min-height: 0; }
.jp-view { height: 100%; }
.jp-view-track { display: flex; flex-direction: column; position: relative; }
/* Everything the track view swaps between states (map, day-off panel, error) lives here.
   The date bar sits outside it so the picker survives every state change. */
.jp-track-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* Date picker bar — above the map, present in every state */
.jp-datebar {
	display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
	padding: 9px 14px; background: var(--jp-off-white, #f5f1f1);
	border-bottom: 1px solid var(--jp-line, #e7e0e0);
}
.jp-datebar__label {
	font: 900 10.5px 'Montserrat', sans-serif; letter-spacing: .1em;
	text-transform: uppercase; color: var(--jp-grey-dark, #908c8c);
	white-space: nowrap; flex: 0 0 auto; /* two-word label, never stack it */
}
.jp-view-schedule { overflow-y: auto; background: var(--jp-off-white, #f5f1f1); }

/* Multi-truck selector (only shown when >1 truck) */
.jp-poptruck-trucks {
	flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap;
	background: #fff; border-bottom: 1px solid var(--jp-line, #e7e0e0);
}
.jp-truck-tab {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--jp-line, #e7e0e0); background: #fff;
	border-radius: 999px; padding: 6px 14px; cursor: pointer;
	font: 800 13px 'Montserrat', system-ui, sans-serif; color: var(--jp-dark-red, #6f052d);
}
.jp-truck-tab.is-active { background: var(--jp-red, #c5003e); color: #fff; border-color: var(--jp-red, #c5003e); }

/* Full-width map */
.jp-map-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.jp-map { position: absolute; inset: 0; width: 100%; height: 100%; background: #e9e4e4; }
.jp-map .leaflet-container { height: 100%; width: 100%; font-family: 'Montserrat', system-ui, sans-serif; }

/* "Updated" chip (top center, clear of zoom control + legend) */
.jp-updated-chip {
	position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1001;
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: var(--jp-dark-red, #6f052d);
	font-weight: 700; font-size: 12px; padding: 7px 13px; border-radius: 999px;
	box-shadow: 0 4px 12px rgba(79, 57, 40, 0.22);
}
/* Stale = last GPS fix is old (truck parked / not reporting): mute the dot + text. */
.jp-updated-chip.is-stale { color: var(--jp-grey-dark, #908c8c); }
.jp-updated-chip.is-stale .jp-livedot { background: var(--jp-grey-dark, #908c8c); animation: none; }

/* Recenter button */
.jp-recenter {
	position: absolute; bottom: 18px; right: 18px; z-index: 1001;
	width: 52px; height: 52px; border-radius: 50%;
	background: #fff; border: none; cursor: pointer;
	box-shadow: 0 6px 16px rgba(79, 57, 40, 0.28);
	display: flex; align-items: center; justify-content: center;
	color: var(--jp-red, #c5003e); /* drives the SVG's currentColor */
}
.jp-recenter:hover { background: var(--jp-soft-pink, #f4c9d0); }
/* Keep the crosshair icon visible, sized, and colored regardless of theme/Elementor button-color rules.
   Color the shapes directly (not via inherited currentColor, which page builders hijack). */
.jp-poptruck .jp-recenter svg { width: 24px !important; height: 24px !important; max-width: none !important; max-height: none !important; display: block; stroke: var(--jp-red, #c5003e) !important; fill: none !important; }
.jp-poptruck .jp-recenter svg circle:last-of-type { fill: var(--jp-red, #c5003e) !important; stroke: none !important; }
/* TEMP (2026-08): recenter control hidden — inside Elementor's aggressive <button>
   styling on the live site it renders as a blank oval. Re-enable by deleting this
   one rule once the control is reworked as a non-<button> element. */
.jp-poptruck .jp-recenter { display: none !important; }

/* LIVE: the truck is out right now (driver's Drive-app status, or an admin override),
   whether or not a route was ever entered. Reuses .jp-livedot, so the reduced-motion
   rule at the bottom of this file already covers it. */
.jp-poptruck .jp-updated-chip.is-live { background: var(--jp-red, #c5003e); color: #fff; }
.jp-poptruck .jp-updated-chip.is-live .jp-livedot { background: #fff; }

/* Live dot */
.jp-livedot {
	display: inline-block; width: 9px; height: 9px; border-radius: 50%;
	background: var(--jp-red, #c5003e); flex: 0 0 auto;
	animation: jp-live 1.2s ease-in-out infinite;
}
@keyframes jp-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }

/* ON THE MAP legend (top-right) */
.jp-legend {
	position: absolute; top: 12px; right: 12px; z-index: 1001;
	background: #fff; border-radius: 14px; padding: 10px 13px; min-width: 130px;
	box-shadow: 0 6px 18px rgba(79, 57, 40, 0.22);
}
.jp-legend__title { font: 900 10px 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--jp-grey-dark, #908c8c); margin-bottom: 7px; }
.jp-legend__row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; color: var(--jp-dark-red, #6f052d); }
.jp-legend__row + .jp-legend__row { margin-top: 5px; }
.jp-legend__icon { flex: 0 0 30px; height: 26px; display: flex; align-items: center; justify-content: center; }
.jp-poptruck .jp-legend__ico { display: block; width: auto !important; height: 24px !important; max-width: none !important; max-height: none !important; } /* truck + pop matched heights */

/* Floating "Today's schedule" card (bottom-left) */
.jp-card {
	position: absolute; left: 16px; bottom: 16px; z-index: 1002;
	width: 360px; max-width: calc(100% - 32px); max-height: calc(100% - 104px);
	display: none; flex-direction: column;
	background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: 0 16px 40px rgba(79, 57, 40, 0.30);
}
.jp-card.is-open { display: flex; }
.jp-card-head { display: flex; align-items: flex-start; gap: 10px; padding: 15px 15px 11px; }
.jp-card-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.jp-card-title { font-weight: 900; font-size: 17px; color: var(--jp-dark-red, #6f052d); line-height: 1.1; }
.jp-card-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; color: var(--jp-red, #c5003e); line-height: 1.25; }
.jp-card-status.is-next { color: var(--jp-gold-deep, #e08f0a); }
.jp-card-status.is-done { color: var(--jp-grey-dark, #908c8c); }
.jp-card-status.is-done .jp-livedot, .jp-card-status.is-next .jp-livedot { background: currentColor; }
.jp-card-close {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--jp-off-white, #f5f1f1); color: var(--jp-dark-red, #6f052d);
	font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.jp-card-close:hover { background: var(--jp-soft-pink, #f4c9d0); }
.jp-card-daylabel { font-weight: 700; font-size: 11.5px; color: var(--jp-grey-dark, #908c8c); }
/* Status line in the card when we're showing a plan, not a live observation: mute it and
   drop the pulsing dot, which would imply a live feed. */
.jp-card-status.is-planned { color: var(--jp-grey-dark, #908c8c); }
.jp-card-status.is-planned .jp-livedot { display: none; }
.jp-date-select {
	font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 12px;
	color: var(--jp-dark-red, #6f052d); background: #fff;
	border: 1px solid var(--jp-line, #e7e0e0); border-radius: 999px;
	padding: 5px 10px; cursor: pointer; max-width: 100%;
}
.jp-date-select:hover, .jp-date-select:focus-visible { border-color: var(--jp-red, #c5003e); outline: none; }
/* Themes/Elementor commonly ship a blanket `select { width: 100% }`, which stretches this pill
   across the row and squeezes the "Schedule for" label onto two lines. Size it to its content. */
.jp-poptruck .jp-date-select { flex: 0 1 auto; width: auto !important; min-width: 0; }
.jp-card-sched-h {
	padding: 9px 15px 6px; font: 900 11px 'Montserrat', sans-serif; letter-spacing: .1em;
	text-transform: uppercase; color: var(--jp-grey-dark, #908c8c);
	border-top: 1px solid var(--jp-line, #e7e0e0);
}
.jp-card-list { list-style: none; margin: 0; padding: 0 7px 7px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.jp-card-row { border-radius: 12px; }
.jp-card-row.is-sel { background: rgba(197, 0, 62, .06); }
.jp-card-rowbtn {
	width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 9px 9px;
	border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit;
}
.jp-card-when { flex: 0 0 82px; font-weight: 800; font-size: 12.5px; color: var(--jp-red, #c5003e); white-space: nowrap; }
.jp-card-row.jp-status-current .jp-card-when { color: var(--jp-gold-deep, #e08f0a); }
.jp-card-what { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jp-card-name { overflow-wrap: anywhere; }
.jp-card-name { font-weight: 800; font-size: 14px; color: var(--jp-dark-red, #6f052d); line-height: 1.2; }
.jp-card-badge {
	font: 800 9.5px 'Montserrat', sans-serif; letter-spacing: .04em; text-transform: uppercase;
	background: var(--jp-gold, #f9a51a); color: var(--jp-woodburned, #4f3928);
	padding: 2px 8px; border-radius: 999px;
}
.jp-card-empty { padding: 16px; text-align: center; color: var(--jp-grey-dark, #908c8c); font-weight: 600; font-size: 13px; }
.jp-card-foot { flex: 0 0 auto; padding: 10px 15px; border-top: 1px dashed var(--jp-line, #e7e0e0); text-align: center; font-weight: 800; font-size: 11.5px; color: var(--jp-grey-dark, #908c8c); }

/* Map markers (Leaflet divIcon content) */
.jp-stop {
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font: 900 15px 'Montserrat', system-ui, sans-serif; color: #fff;
	box-shadow: 0 3px 8px rgba(79, 57, 40, .32); border: 3px solid #fff;
	transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.jp-stop span { display: flex; align-items: center; justify-content: center; }
.jp-stop--completed { background: #b7b0af; }
.jp-stop--current { background: var(--jp-gold, #f9a51a); color: var(--jp-woodburned, #4f3928); }
.jp-stop--upcoming { background: var(--jp-red, #c5003e); }
.jp-stop--sel { transform: scale(1.24); box-shadow: 0 0 0 4px rgba(197, 0, 62, .3), 0 5px 12px rgba(79, 57, 40, .35); }

/* Event pops share one size via --jp-pop-size. */
.jp-poptruck { --jp-pop-size: 50px; }

/* Truck locator — JonnyPops pop-truck image (sits on the map, live-pulse beneath) */
.jp-truck { position: relative; width: 46px; height: 46px; }
.jp-truck__halo {
	position: absolute; left: 50%; bottom: 2px; width: 26px; height: 10px;
	transform: translateX(-50%); border-radius: 50%; background: rgba(197, 0, 62, .28);
	animation: jp-pulse 2.2s ease-out infinite;
}
.jp-poptruck .jp-truck__art {
	position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); display: block;
	height: 44px !important; width: auto !important; max-width: none !important; max-height: none !important;
	filter: drop-shadow(0 3px 5px rgba(79, 57, 40, .35));
}
@keyframes jp-pulse {
	0% { opacity: .35; transform: translateX(-50%) scale(.75); }
	100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

/* Rainbow pop event / festival pins — same size as the truck pop */
.jp-evt {
	display: flex; align-items: flex-end; justify-content: center;
	transform-origin: bottom center;
}
.jp-poptruck .jp-evt img {
	height: var(--jp-pop-size) !important; width: auto !important; max-width: none !important; max-height: none !important; display: block;
	filter: drop-shadow(0 3px 4px rgba(79, 57, 40, .42));
}

/* Leaflet popups */
.jp-map .leaflet-popup-content-wrapper { border-radius: 18px !important; box-shadow: 0 12px 34px rgba(79, 57, 40, .28) !important; padding: 2px !important; }
.jp-map .leaflet-popup-content { margin: 14px 16px !important; font-family: 'Montserrat', system-ui, sans-serif !important; }
.jp-pop-inner { min-width: 200px; }
.jp-pop-eyebrow { font: 900 10px/1 'Montserrat'; letter-spacing: .12em; color: var(--jp-grey-dark, #908c8c); text-transform: uppercase; margin-bottom: 4px; }
.jp-pop-name { font-weight: 900; font-size: 15px; color: var(--jp-dark-red, #6f052d); line-height: 1.15; }
.jp-pop-addr { font-size: 12px; color: var(--jp-grey-dark, #908c8c); margin-top: 3px; line-height: 1.3; }
.jp-pop-win { font-size: 12.5px; font-weight: 700; color: var(--jp-stick-brown, #c3996b); margin-top: 4px; }
.jp-pop-dirs { display: flex; gap: 7px; margin-top: 11px; }

/* Direction buttons (used in map popups) */
.jp-dir {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
	padding: 9px 10px; border-radius: 999px; text-decoration: none;
	font: 800 12px/1 'Montserrat', system-ui, sans-serif; color: #fff;
	box-shadow: 0 3px 8px rgba(79, 57, 40, 0.22);
}
.jp-dir--google { background: var(--jp-blue, #2161ad); }
.jp-dir--apple { background: var(--jp-red, #c5003e); }
.jp-dir:hover { filter: brightness(1.05); color: #fff; text-decoration: none; }
/* Override Leaflet's default popup link color (#0078A8), which out-specifies .jp-dir. */
.jp-map .leaflet-popup-content a.jp-dir,
.jp-map .leaflet-popup-content a.jp-dir:hover,
.jp-map .leaflet-popup-content a.jp-dir:focus,
.jp-map .leaflet-popup-content a.jp-dir:visited { color: #fff; text-decoration: none; }

/* Day-off / error state */
.jp-dayoff { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; padding: 22px 28px; gap: 12px; overflow-y: auto; }
.jp-poptruck .jp-dayoff__img { height: auto !important; max-height: 42% !important; width: auto !important; max-width: 100% !important; filter: drop-shadow(0 14px 24px rgba(79, 57, 40, .22)); }
.jp-dayoff__badge { display: inline-flex; background: var(--jp-gold, #f9a51a); color: var(--jp-woodburned, #4f3928); font-weight: 900; font-size: 26px; padding: 8px 22px; border-radius: 999px; box-shadow: 0 6px 16px rgba(249, 165, 26, .4); }
.jp-dayoff__title { max-width: 420px; font-size: 18px; font-weight: 700; color: var(--jp-dark-red, #6f052d); line-height: 1.35; margin: 0; }
.jp-dayoff__sub { font-size: 14px; color: var(--jp-grey-dark, #908c8c); margin: 0; }
/* "Driving later" reads as good news, not a closed sign — badge goes brand red. The
   nothing-scheduled-for-this-date state is informational, so it stays neutral grey. */
.jp-dayoff--scheduled .jp-dayoff__badge { background: var(--jp-red, #c5003e); color: #fff; box-shadow: 0 6px 16px rgba(197, 0, 62, .35); }
.jp-dayoff--otherday .jp-dayoff__badge { background: var(--jp-off-white, #f5f1f1); color: var(--jp-grey-dark, #908c8c); font-size: 16px; box-shadow: none; }
/* The art competes with the next-stop details, so shrink it on the informational states. */
.jp-poptruck .jp-dayoff--scheduled .jp-dayoff__img,
.jp-poptruck .jp-dayoff--otherday .jp-dayoff__img { max-height: 26% !important; }

/* Next-stop callout inside the "driving later" panel */
.jp-next {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	background: #fff; border: 1px solid var(--jp-line, #e7e0e0); border-radius: 16px;
	padding: 14px 20px; max-width: 380px; width: 100%;
	box-shadow: 0 6px 18px rgba(79, 57, 40, .12);
}
.jp-next__eyebrow { font: 900 10px 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--jp-grey-dark, #908c8c); }
.jp-next__when { font-weight: 800; font-size: 13.5px; color: var(--jp-red, #c5003e); }
.jp-next__name { font-weight: 900; font-size: 17px; color: var(--jp-dark-red, #6f052d); line-height: 1.25; }
.jp-next__addr { font-size: 12.5px; color: var(--jp-grey-dark, #908c8c); }
.jp-next__dirs { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; justify-content: center; }

/* "See the schedule" call to action.
   Styled defensively: on the live site Elementor's <button> rules flattened the recenter
   control into a blank oval (see the TEMP rule above), so pin every property that matters
   rather than inheriting it. */
.jp-poptruck .jp-schedule-cta {
	display: inline-flex !important; align-items: center; justify-content: center;
	appearance: none; -webkit-appearance: none;
	font-family: 'Montserrat', system-ui, sans-serif !important;
	font-weight: 800 !important; font-size: 13px !important; line-height: 1.2 !important;
	text-transform: none !important; letter-spacing: normal !important;
	color: var(--jp-dark-red, #6f052d) !important;
	background: var(--jp-gold, #f9a51a) !important;
	border: none !important; border-radius: 999px !important;
	padding: 11px 22px !important; margin: 2px 0 0 !important;
	width: auto !important; min-width: 0 !important; height: auto !important;
	cursor: pointer; box-shadow: 0 6px 16px rgba(249, 165, 26, .38) !important;
	text-decoration: none !important;
}
.jp-poptruck .jp-schedule-cta:hover { filter: brightness(1.04); }

/* ---------- Schedule view ---------- */
.jp-sched { padding: 20px 22px 26px; }
.jp-sched-head { margin-bottom: 12px; }
.jp-sched-eyebrow { color: var(--jp-grey-dark, #908c8c); font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.jp-sched-title { margin: 4px 0 2px; font-size: 22px; font-weight: 900; color: var(--jp-dark-red, #6f052d); }
.jp-sched-lede { margin: 0 0 14px; color: var(--jp-grey-dark, #908c8c); font-size: 13px; }
.jp-pills { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.jp-pill {
	border: 1px solid var(--jp-line, #e7e0e0); background: #fff; color: var(--jp-dark-red, #6f052d);
	border-radius: 999px; padding: 6px 14px; font: 700 12px 'Montserrat', system-ui, sans-serif; cursor: pointer;
}
.jp-pill:hover { border-color: var(--jp-red, #c5003e); }
.jp-pill.is-on { background: var(--jp-red, #c5003e); color: #fff; border-color: var(--jp-red, #c5003e); }
.jp-sch-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--jp-line, #e7e0e0); border-radius: 14px; overflow: hidden; }
.jp-sch-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; }
.jp-sch-when { color: var(--jp-red, #c5003e); font-weight: 800; font-size: 13px; }
.jp-sch-when small { display: block; color: var(--jp-grey-dark, #908c8c); font-weight: 600; font-size: 12px; margin-top: 2px; }
.jp-sch-what { min-width: 0; }
.jp-sch-name { display: block; font-weight: 900; font-size: 15px; color: var(--jp-dark-red, #6f052d); }
.jp-sch-addr { display: block; color: var(--jp-grey-dark, #908c8c); font-size: 12.5px; margin-top: 1px; }
.jp-sch-dirs { display: flex; gap: 8px; margin-top: 8px; max-width: 300px; flex-wrap: wrap; }
/* Save-to-calendar actions. Same shape as the Maps buttons but outlined, so getting
   directions stays the primary action and adding to a calendar reads as secondary. */
.jp-sch-cal { display: flex; gap: 8px; margin-top: 6px; max-width: 300px; flex-wrap: wrap; }
.jp-cal {
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 12px; padding: 7px 12px; border-radius: 999px;
	background: #fff; color: var(--jp-dark-red, #6f052d);
	border: 1.5px solid var(--jp-line, #e7e0e0);
	text-decoration: none; white-space: nowrap;
}
.jp-cal:hover { border-color: var(--jp-red, #c5003e); color: var(--jp-dark-red, #6f052d); text-decoration: none; }
/* Same Leaflet popup-link override the direction buttons need (#0078A8 out-specifies us). */
.jp-map .leaflet-popup-content a.jp-cal,
.jp-map .leaflet-popup-content a.jp-cal:hover,
.jp-map .leaflet-popup-content a.jp-cal:focus,
.jp-map .leaflet-popup-content a.jp-cal:visited { color: var(--jp-dark-red, #6f052d); text-decoration: none; }

/* Day grouping header in the schedule list */
.jp-sch-day {
	padding: 11px 16px 8px; background: var(--jp-off-white, #f5f1f1);
	border-bottom: 1px solid var(--jp-line, #e7e0e0);
	font: 900 11px 'Montserrat', sans-serif; letter-spacing: .1em;
	text-transform: uppercase; color: var(--jp-dark-red, #6f052d);
}
.jp-badge { align-self: start; white-space: nowrap; font-weight: 800; font-size: 11px; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; color: #fff; }
.jp-badge--stop { background: var(--jp-red, #c5003e); }
.jp-badge--festival { background: var(--jp-ada-purple, #712484); }
.jp-badge--public { background: var(--jp-blue, #2161ad); }
.jp-sch-empty { padding: 30px 16px; text-align: center; color: var(--jp-grey-dark, #908c8c); font-weight: 600; }
.jp-sched-foot { margin-top: 12px; color: var(--jp-grey-dark, #908c8c); font-size: 12px; font-style: italic; }

/* Responsive */
@media (max-width: 900px) {
	.jp-header { padding: 11px 15px; gap: 11px; }
	.jp-header__logo { width: 40px; height: 40px; }
	.jp-header__title { font-size: 17px; }
	.jp-header__tagline { font-size: 11.5px; }
	/* Logo + title + tagline + switcher does not fit on a ~375px phone. Let the switcher drop
	   to its own full-width line rather than squeezing the title to a couple of characters. */
	.jp-header { flex-wrap: wrap; }
	.jp-viewtabs { margin-left: 0; width: 100%; justify-content: stretch; }
	/* Taller on touch: the desktop padding gives a ~29px tall target, short of the ~44px
	   guideline. Full-width halves plus this gets both tabs comfortably thumb-sized. */
	.jp-poptruck .jp-viewtab { flex: 1 1 0 !important; padding: 12px 15px !important; }
	.jp-legend { top: 10px; right: 10px; padding: 8px 10px; min-width: 0; }
	.jp-card { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; max-height: 56%; }
	.jp-updated-chip { top: 10px; font-size: 11px; padding: 6px 11px; }
	.jp-sch-row { grid-template-columns: 92px 1fr; }
	.jp-sch-row .jp-badge { grid-column: 1 / -1; justify-self: start; }
	.jp-datebar { padding: 8px 12px; }
	.jp-next { padding: 12px 15px; }
	.jp-next__name { font-size: 15.5px; }
	/* Let the action buttons use the full row width rather than wrapping one per line. */
	.jp-sch-dirs, .jp-sch-cal { max-width: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.jp-truck__halo, .jp-livedot { animation: none; }
}