/* The home page (index.html, js/home.js). Loaded after css/style.css. */

html:has(body.landing), body.landing { height: auto; min-height: 100%; }
/* The page fills the window exactly: the hero takes whatever height is spare
   (no empty band under the cards), and on a shorter window it shrinks first,
   so the page only scrolls when the cards can't fit at all (phones). */
body.landing { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.landing > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.landing .land-hero { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
body.landing .land-search { width: 100%; box-sizing: border-box; }
body.landing { background: #f6f6f8; }
body.landing::after { display: none; }

.land-face { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 2px solid var(--ink); background: #eee 50% 25% / cover;
  box-shadow: 0 0 0 3px var(--party-other); font-size: 12px; font-weight: 800; color: #555; }
.land-face[data-party="democrat"] { box-shadow: 0 0 0 3px var(--party-democrat); }
.land-face[data-party="republican"] { box-shadow: 0 0 0 3px var(--party-republican); }

/* ---------- top bar ---------- */

.land-bar { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: var(--bar-h); padding: 1px 16px 0; background: #fff; border-bottom: 2px solid var(--ink);   /* (1px on top: its border is 1px thicker than the other pages') */ position: relative; z-index: 20; }
.land-pill, .land-btn { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: var(--nav-h); padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; flex: none; }
.land-pill:hover, .land-btn:hover { background: var(--ink); color: #fff; }
.land-pill:focus-visible, .land-btn:focus-visible { outline: 3px solid #0022ff; outline-offset: 2px; }
.land-links { display: flex; gap: 6px; margin-left: auto; }
.land-bar > .index-tab { flex: none; }

.land-place { position: relative; }
.land-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .15); z-index: 30; }
.land-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.land-menu-item:hover, .land-menu-item:focus-visible { background: #f0f0f3; outline: none; }
.land-check { width: 14px; }
.land-menu-item.is-nested { padding-left: 28px; font-weight: 600; }   /* (a city or county, under its state) */
.land-menu-state { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 4px 32px; font-weight: 800; color: #555; cursor: default; }
.land-menu-state + .land-menu-item.is-nested, .land-menu-item.is-state + .land-menu-item.is-nested { margin-top: 0; }
.land-menu-sub { margin-left: auto; padding-left: 12px; color: #999; font-size: 12px; font-weight: 600; white-space: nowrap; }
.land-menu-soon { padding: 6px 10px 6px 32px; color: #999; font-size: 13px; font-weight: 600; }
/* Explore (top right): a menu of links under its button. */
.land-explore { position: relative; }
.land-menu.is-right { left: auto; right: 0; min-width: 190px; }
.land-menu[hidden] { display: none; }
a.land-menu-item { color: var(--ink); text-decoration: none; }
.land-menu-icon { width: 22px; text-align: center; }
.land-caret { font-size: 12px; margin-left: 2px; }

/* ---------- hero ---------- */

/* (the whole background image, stretched to the hero: bright white at the top, deep blue and red at the
   bottom, as on a phone; "cover" would crop a wide screen to the image's pale middle) */
.land-hero { background: #fff url("../images/backgrounds/position.jpg") center / 100% 100%; padding: clamp(12px, 2vh, 40px) 16px clamp(40px, 5vh, 64px); text-align: center; color: #fff; }
.land-title { margin: 0; font-size: clamp(64px, min(12vw, 15vh), 132px); font-weight: 900; letter-spacing: -.04em; line-height: .95; color: var(--ink); text-shadow: 0 2px 18px rgba(255, 255, 255, .45); }
/* the full logo (images/brand/gia-logo.svg) in place of the title's text, a soft white glow behind it */
body { --logo-h: clamp(84px, min(15vw, 19vh), 168px); }
.land-logo { position: relative; display: block; height: var(--logo-h); width: auto; margin: 0 auto; filter: drop-shadow(0 2px 18px rgba(255, 255, 255, .55)); }
/* a soft white spotlight behind the logo's square (its middle: 46% across, 18% down the logo), so the
   pale square stands out from the colorful background */
.land-title:has(.land-logo) { position: relative; width: fit-content; margin: 0 auto; }
.land-title:has(.land-logo)::before { content: ""; position: absolute; left: 46%; top: 18%; width: calc(var(--logo-h) * 2.2); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, .5) 18%, rgba(255, 255, 255, .28) 40%, rgba(255, 255, 255, .1) 65%, rgba(255, 255, 255, .03) 85%, rgba(255, 255, 255, 0));
  pointer-events: none; }   /* (wide and gentle: it fades in and out over most of its width, so it reads as light, not a disc) */
.land-sub { margin: 6px auto 26px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; color: #1e1a67;   /* (the logo's navy) */  text-shadow: 0 1px 10px rgba(255, 255, 255, .5); }

.land-search { position: relative; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.land-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 18px; color: var(--ink); }
.land-search:focus-within { box-shadow: 0 0 0 4px rgba(0, 34, 255, .25), 0 10px 30px rgba(0, 0, 0, .12); }

.land-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; max-height: min(420px, 60vh); overflow-y: auto;
  background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .15); z-index: 10; text-align: left; }
.land-results-sec { padding: 6px 10px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.land-results-empty { padding: 10px; color: var(--muted); }
.land-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 12px; background: none;
  color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.land-result:hover, .land-result.is-active { background: #f0f0f3; }
.land-result-text { display: flex; flex-direction: column; min-width: 0; }
.land-result-name { font-weight: 700; font-size: 15px; }
.land-result-name mark { background: #fff1a8; color: inherit; border-radius: 3px; }
.land-result-sub { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.land-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border: 2px solid var(--ink); border-radius: 50%; font-size: 15px; }

/* ---------- news strip ---------- */

.land-news { display: flex; align-items: center; gap: 10px; max-width: 1100px; margin: -22px auto 0; padding: 10px 18px; position: relative; z-index: 2;
  background: #d50000; color: #fff; border-radius: 999px; font-size: 14.5px; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.land-news[hidden] { display: none; }
.land-news.is-latest { background: var(--ink); }
.land-news:hover .land-news-text { text-decoration: underline; }
.land-news-tag { flex: none; padding: 1px 8px; border-radius: 999px; background: #fff; color: #d50000; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.land-news.is-latest .land-news-tag { color: var(--ink); }
.land-news-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.land-news-meta { opacity: .8; }

/* ---------- cards ---------- */

.land-grid { max-width: 1100px; margin: clamp(16px, 2.5vh, 28px) auto clamp(16px, 2.5vh, 24px); width: 100%; box-sizing: border-box; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.land-card { display: block; background: #fff; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; color: var(--ink); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease; }
a.land-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
a.land-card:focus-visible { outline: 3px solid #0022ff; outline-offset: 3px; }
.land-preview { position: relative; height: 130px; border-bottom: 2px solid var(--ink); background: #eef0f3; overflow: hidden; }
.land-preview.is-circles { background: url("../images/backgrounds/position.jpg") center / cover; }
.land-preview.is-genetics { background: #fff; }
.land-preview.is-genetics svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.land-preview.is-genetics path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.land-gen-root { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); }
.land-face.is-mini { position: absolute; border-width: 2px; }
.land-face.is-blank {   /* a grey person silhouette, no one in particular */
  background: #f2f2f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='15' r='7.5' fill='%23a3a3ad'/%3E%3Cpath d='M5 40c0-9 6.7-15 15-15s15 6 15 15z' fill='%23a3a3ad'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  overflow: hidden;
}
.land-card-in { padding: 14px 16px 16px; }
.land-card h2 { margin: 0 0 4px; font-size: 19px; }
.land-card p { margin: 0; font-size: 14px; color: #444; }

/* Quick compare: the wide card under the three. */
.land-compare { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 16px 18px; overflow: visible; }
.land-compare h2 { margin: 0; font-size: 18px; white-space: nowrap; }
.land-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.land-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 13px; }
.land-face.is-chip { width: 26px; height: 26px; border-width: 1.5px; font-size: 9px; }
.land-face.is-chip[data-party] { box-shadow: 0 0 0 2px var(--party-other); }
.land-face.is-chip[data-party="democrat"] { box-shadow: 0 0 0 2px var(--party-democrat); }
.land-face.is-chip[data-party="republican"] { box-shadow: 0 0 0 2px var(--party-republican); }
.land-chip-x { --glyph: 10px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.land-chip-x:hover { background: #f0f0f3; color: var(--ink); }
.land-slot { height: 34px; padding: 0 14px; border: 2px dashed #aaa; border-radius: 999px; background: none; color: #888; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.land-slot:hover { border-color: var(--ink); color: var(--ink); }
.land-picker { position: relative; }
.land-picker input { height: 34px; width: 170px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; font: inherit; font-size: 14px; outline: 0; }
.land-picker input:focus { box-shadow: 0 0 0 3px rgba(0, 34, 255, .25); }
.land-results.is-picker { width: 320px; right: auto; top: calc(100% + 6px); }
.land-go { margin-left: auto; padding: 8px 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.land-go[aria-disabled="true"] { background: #fff; color: #aaa; border-color: #ccc; cursor: default; }

/* ---------- phones and narrow windows ---------- */

@media (max-width: 860px) {
  .land-grid { grid-template-columns: 1fr; }
  .land-news { margin: -22px 16px 0; }
}
@media (max-width: 520px) {
  .land-hero { padding: 28px 16px 56px; }
  .land-search { height: 52px; padding: 0 16px; }
  .land-search input { font-size: 16px; }
  .land-compare h2 { width: 100%; }
  .land-go { margin-left: 0; }
  .land-results.is-picker { width: min(320px, calc(100vw - 72px)); }
}

/* ---------- admin (admin.html, js/admin.js) ---------- */

.admin-main { width: min(100% - 32px, 900px); margin: 24px auto 48px; }
.admin-body { display: grid; gap: 18px; }
.admin-body h1 { margin: 0; font-size: 28px; }
.admin-card { padding: 16px 18px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; }
.admin-card h2 { margin: 0 0 10px; font-size: 18px; }
/* folding boxes (js/admin.js): the heading is the button */
.admin-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.admin-fold-chev { margin-left: auto; font-size: 16px; color: var(--muted); transition: transform .15s; }
.admin-card.is-folded .admin-fold-chev { transform: rotate(-90deg); }
.admin-card.is-folded h2 { margin-bottom: 0; }
.admin-card.is-folded > :not(h2) { display: none !important; }
.admin-count { color: var(--muted); font-weight: 600; }
.admin-table { border-collapse: collapse; font-size: 14.5px; }
.admin-table th { text-align: left; padding: 4px 18px 4px 0; color: var(--muted); font-weight: 600; white-space: nowrap; vertical-align: top; }
.admin-table td { padding: 4px 0; }
.admin-links { margin: 0; padding-left: 18px; line-height: 1.8; }
.admin-note { margin: 4px 0 8px; color: var(--muted); font-size: 14px; }
.admin-people { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-person { padding: 3px 12px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.admin-person:hover { border-color: var(--ink); }
.admin-signout { margin-left: auto; background: #fff; font: inherit; cursor: pointer; }
.admin-signout[hidden] { display: none; }


/* ---------- News page (news.html, js/newspage.js) ---------- */

body.news-page { background: #f6f6f8; }
.news-main { width: min(100% - 32px, 860px); margin: 24px auto 48px; }
.news-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.news-head .page-heading { margin: 0; }
.news-updated { margin: 0; color: var(--muted); font-size: 14px; }
.news-filters { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; margin: 18px 0 10px; }
.news-filter { display: grid; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.news-filter select, .news-filter input { height: 40px; min-width: 0; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; outline: 0; }
.news-filter select:focus-visible, .news-filter input:focus { box-shadow: 0 0 0 3px rgba(0, 34, 255, .25); }
.news-person { margin: 4px 0 6px; }
.news-person[hidden] { display: none; }
.news-person .land-chip { background: #fff; }
.news-count { margin: 6px 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; }
.news-day { margin-bottom: 22px; }
.news-day-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.news-day-list { display: grid; gap: 10px; }
.news-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.news-item.is-breaking { border: 2px solid #d50000; }
.news-faces { display: flex; flex: none; width: 76px; padding-left: 4px; }
.news-face-link + .news-face-link { margin-left: -18px; }
.news-face { width: 44px; height: 44px; font-size: 13px; }
.news-face-link:hover .news-face { transform: scale(1.08); position: relative; z-index: 1; }
.news-icon { width: 44px; height: 44px; font-size: 20px; border-width: 1.5px; border-color: var(--line); }
.news-body { min-width: 0; flex: 1; }
.news-headline { margin: 0; font-size: 16.5px; line-height: 1.35; }
.news-headline a { color: var(--ink); text-decoration: none; }
.news-headline a:hover { text-decoration: underline; }
.news-headline .news-tag { margin-right: 8px; vertical-align: 2px; }
.news-body .news-summary { margin: 4px 0 0; font-size: 14px; }
.news-body .news-meta { margin: 6px 0 0; font-size: 13px; }
.news-who { color: var(--ink); font-weight: 600; text-decoration: none; }
.news-who:hover { text-decoration: underline; }
.news-empty { padding: 30px 0; text-align: center; color: var(--muted); }
@media (max-width: 700px) {
  .news-filters { grid-template-columns: 1fr 1fr; }
  .news-filter.is-words { grid-column: 1 / -1; }
  .news-item { padding: 12px; gap: 10px; }
  .news-faces { width: 54px; }
  .news-face, .news-icon { width: 36px; height: 36px; }
  .news-face-link + .news-face-link { margin-left: -26px; }
  .news-headline { font-size: 15.5px; }
}

/* The home page's placeholder card (a feature on the way). */
.land-card.is-soon { border-style: dashed; color: var(--muted); }
.land-preview.is-soon { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f6f6f8 0 12px, #eeeef2 12px 24px); border-bottom-style: dashed; }
.land-soon-mark { font-size: 40px; color: #b9b9c3; }
.land-card.is-soon h2 { color: var(--ink); }

/* ---------- admin: areas (js/admin.js) ---------- */
.admin-alerts { padding: 14px 18px; border: 2px solid var(--danger, #d50000); border-radius: 20px; background: #fff3f3; }
.admin-alerts[hidden] { display: none; }
.admin-alerts h2 { margin: 0 0 6px; font-size: 18px; color: var(--danger, #d50000); }
.admin-alerts ul { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 14.5px; }
.admin-new { border-width: 3px; }
.admin-area-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.admin-kind { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.admin-kind label { position: relative; padding: 7px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.admin-kind label + label { border-left: 2px solid var(--ink); }
.admin-kind input { position: absolute; opacity: 0; pointer-events: none; }
.admin-kind label:has(input:checked) { background: var(--ink); color: #fff; }
.admin-kind label:has(input:focus-visible) { outline: 3px solid #0022ff; outline-offset: -3px; }
.admin-area-form input[type="text"] { flex: 1 1 220px; min-width: 0; height: 40px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; font: inherit; outline: 0; }
.admin-area-form input[type="text"]:focus { box-shadow: 0 0 0 3px rgba(0, 34, 255, .25); }
.admin-area-form .land-go { margin: 0; cursor: pointer; font: inherit; font-weight: 800; }
.admin-form-msg { margin-top: 10px; color: var(--ink); }
.admin-form-msg.is-error { color: var(--danger, #d50000); font-weight: 600; }
.admin-form-msg[hidden] { display: none; }
.admin-scroll { overflow-x: auto; }
.admin-areas { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-areas th { text-align: left; padding: 4px 12px 6px 0; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.admin-areas td { padding: 8px 12px 8px 0; vertical-align: top; border-bottom: 1px solid #eee; }
.admin-area-name a { font-weight: 800; color: var(--ink); }
.admin-here { display: block; color: var(--muted); font-size: 12px; }
.admin-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: #eee; }
.admin-status.is-live { background: #e6f6ea; color: #15803d; }
.admin-status.is-queued { background: #eef0ff; color: #3446c9; }
.admin-status.is-building { background: #fff4dc; color: #a15c00; }
.admin-status.is-alert { background: #ffe5e5; color: #c00000; }
.admin-progress { min-width: 220px; }
.admin-stage { font-weight: 700; }
.admin-when, .admin-log { color: var(--muted); font-size: 12.5px; }
.admin-problem { color: #c00000; font-weight: 600; font-size: 13px; }
.admin-issue { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.admin-cadence { height: 32px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; }

/* Phones: one row, like every page's bar (css/style.css): Map, News and Admin as icons,
   the place name shortened. */
@media (max-width: 700px) {
  .land-links .land-btn { width: var(--nav-h); padding: 0; justify-content: center; }
  .land-links .nav-label, .land-links .land-caret { display: none; }
  .land-place { min-width: 0; flex: 1 1 auto; }
  .land-pill { max-width: 100%; flex: 0 1 auto; }
  #placeLabel { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ---------- Yard signs (signs.html, js/signs.js) ---------- */

body.signs-page { background: #f6f6f8; }
.signs-main { width: min(100% - 32px, 1200px); margin: 24px auto 48px; }
.signs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 10px; }
.signs-filters .seg { display: flex; }
.signs-filters .news-filter { flex: 1 1 220px; max-width: 360px; }
/* A masonry of signs: columns keep each sign's own shape. */
.signs-grid { columns: 220px; column-gap: 14px; }
.sign-tile { break-inside: avoid; margin: 0 0 14px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.sign-link { position: relative; display: block; color: var(--ink); text-decoration: none; }
.sign-img { display: block; width: 100%; height: auto; background: #fff; }
/* The name shows on hover (and focus), so the sign is what you recognize first. */
.sign-who { position: absolute; inset: auto 0 0 0; display: grid; gap: 1px; padding: 8px 10px; background: rgba(255, 255, 255, .94);
  border-top: 2px solid var(--ink); font-size: 13px; line-height: 1.25; opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; }
.sign-who b { font-size: 14.5px; }
.sign-who span { color: var(--muted); }
.sign-link:hover .sign-who, .sign-link:focus-visible .sign-who { opacity: 1; transform: none; }
.sign-link:focus-visible { outline: 3px solid #0022ff; outline-offset: -3px; }
.sign-tile[data-party="democrat"]:hover { border-color: var(--party-democrat); }
.sign-tile[data-party="republican"]:hover { border-color: var(--party-republican); }
.sign-credit { padding: 6px 10px 7px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.sign-credit a { color: var(--muted); }
.signs-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; max-width: 760px; }
@media (hover: none) { .sign-who { position: static; opacity: 1; transform: none; } }   /* phones: always shown */
@media (max-width: 700px) { .signs-grid { columns: 2 150px; column-gap: 10px; } .sign-tile { margin-bottom: 10px; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Learn (learn.html, js/learn.js) ---------- */

body.learn-page { background: #f6f6f8; }
.learn-main { width: min(100% - 32px, 900px); margin: 24px auto 48px; }
.learn-panel[hidden] { display: none; }
.learn-panel { margin-top: 16px; }
.learn-note, .learn-sources { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.learn-sources a { color: var(--muted); }
.learn-empty { color: var(--muted); }
.learn-more { font-size: 14px; }


/* ---------- The Learn journey (js/journey.js) ---------- */
.jr { --road: #4b4b4b; }
/* The Learn page isn't for selecting text (dragging the map kept selecting it), except inside a lesson and in fields. */
body.learn-page { -webkit-user-select: none; user-select: none; overflow-x: clip; }   /* (clip: the full-width map is 100vw, scrollbar included) */
body.learn-page .jr-card, body.learn-page .fc-pop, body.learn-page input, body.learn-page textarea, body.learn-page [contenteditable] { -webkit-user-select: text; user-select: text; }
.jr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.jr-sign { background: #1f7a3a; color: #fff; font-weight: 800; padding: 8px 14px; border-radius: 8px; outline: 2px solid #1f7a3a; border: 3px solid #fff; }
.jr-count { font-weight: 700; font-size: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px; }
.jr-map { position: relative; margin: 0 calc(50% - 50vw); border-radius: 0;   /* the land runs to both edges of the screen */ overflow-x: auto; overflow-y: hidden;   /* (scrolls sideways when the camera zooms in) */ background: linear-gradient(#e6f4ff, #eef8ee 30%); }
.jr-iso-inner { position: relative; width: min(100%, 600px); margin: 0 auto; }
/* The moving camera (js/journey.js): a window the town moves under */
.jr-map.jr-cam { height: clamp(380px, 68vh, 640px); overflow: hidden; touch-action: manipulation; background: #c7ecce; isolation: isolate; }   /* (no camera controls: a swipe scrolls the page) */
.jr-cam::before { content: ""; position: absolute; inset: 0 0 auto; height: 24%; z-index: 3; pointer-events: none; background: linear-gradient(#dcefff, rgba(220, 239, 255, 0)); }   /* haze on the horizon */
.jr-cam .jr-iso-inner { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; will-change: transform; }
/* The Road Trip (learn.html#journey): the white nav bar, then the map filling the rest of the
   window, with a row floating over its top (js/journey.js .jr-top, no bar behind it): the title
   pill at the left, the stop navigator in the middle, the red light's quiz and Start over at the right
   (on a phone: the title and Start over, then the navigator under them) */
body.learn-page .person-bar { background: #fff; }
body.is-trip:not(.je-on) .news-head { display: none; }
body.is-trip:not(.je-on) .learn-main { margin: 0 auto; }
body.is-trip:not(.je-on) #panel-journey { margin-top: 0; }
body.is-trip:not(.je-on) .jr-map.jr-cam { height: calc(100dvh - var(--bar-h)); min-height: 360px; }
.jr-top { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; pointer-events: none; }   /* (the title at the left, the navigator in the middle, Start over at the right) */
.jr-top > * { pointer-events: auto; }
.jr-top .jr-stops { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: none; }
.jr-top .jr-stops-list { top: calc(100% + 8px); bottom: auto; }
/* (the title and Start over: the same shape and thickness as the navigator's boxes) */
.jr-title, .jr-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 60px; padding: 0 16px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); font: inherit; font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.jr-games { justify-self: start; position: relative; }
.jr-title { cursor: pointer; }
.jr-title:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.jr-title-caret { font-size: 12px; opacity: .7; }
/* (the title's menu of games) */
.jr-games-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 6; min-width: 220px; display: grid; gap: 4px; padding: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.jr-games-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid transparent; border-radius: 12px; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; }
button.jr-games-item, a.jr-games-item { cursor: pointer; text-decoration: none; }
a.jr-games-item:hover { background: #f4f4f6; }
.jr-games-item.is-here { border-color: var(--ink); background: #fff7cc; }
.jr-games-item.is-soon { color: var(--muted); font-style: italic; }
.jr-games-icon { width: 1.4em; text-align: center; font-style: normal; }
.jr-games-check { margin-left: auto; font-weight: 800; }
.jr-top-end { justify-self: end; display: flex; gap: 6px; }
.jr-pill { cursor: pointer; }
.jr-pill.jr-sound { min-width: 44px; justify-content: center; font-size: 18px; }
.jr-pill.jr-music { position: relative; }
.jr-pill.jr-music.is-off { opacity: .55; }
.jr-pill.jr-music.is-off::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(-45deg); }
.jr-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.jr-pill.is-red { background: #b91c1c; color: #fff; animation: jr-red 1.4s ease-in-out infinite; }
@media (max-width: 700px) {   /* (a phone: the title and the buttons, then the navigator under them, full width) */
  .jr-top { left: 8px; right: 8px; top: 8px; grid-template-columns: 1fr 1fr; }
  .jr-top .jr-stops { grid-column: 1 / -1; grid-row: 2; }
  .jr-top .jr-stops-cur { flex: 1; width: auto; }
  .jr-title, .jr-pill { height: 44px; padding: 0 12px; font-size: 14px; }
  .jr-pill.jr-reset, .jr-pill.jr-sound { width: 44px; padding: 0; }
  .jr-pill-label { display: none; }
}

/* The stop navigator: ‹ the stop the car is at › (js/journey.js) */
.jr-stops { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4; display: flex; align-items: stretch; gap: 6px; max-width: calc(100% - 140px); }
.jr-stops-btn { flex: none; width: 42px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font: inherit; font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--ink); color: var(--ink); padding: 0; }
.jr-stops-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.jr-stops-btn:not(:disabled):active, .jr-stops-cur:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.jr-stops-cur { flex: none; width: 320px; height: 60px; display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font: inherit; color: var(--ink); padding: 5px 12px 5px 6px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.jr-stops-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: #eef3ff; border: 2px solid var(--ink); }
.jr-stops-icon.is-done { background: #ffcc00; font-weight: 800; }
.jr-stops-text { display: grid; min-width: 0; flex: 1; }   /* (the box keeps its size from stop to stop: a long title takes two lines) */
.jr-stops-text b { font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.jr-stops-text small { font-size: 11px; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; }
/* The list of stops so far (the navigator's middle) */
.jr-stops { flex-wrap: nowrap; }
.jr-stops-list { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: min(340px, calc(100vw - 20px)); max-height: min(360px, 55vh); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 4px; padding: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.jr-stops-list-head { font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 6px 4px; }
.jr-stops-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 2px solid transparent; border-radius: 12px; background: none; font: inherit; color: var(--ink); padding: 5px 8px 5px 4px; cursor: pointer; }
.jr-stops-row:hover, .jr-stops-row:focus-visible { background: #eef3ff; outline: none; }
.jr-stops-row.is-here { border-color: var(--ink); background: #fff7cc; }
.jr-stops-num { flex: none; width: 20px; text-align: right; font-size: 12px; font-weight: 700; color: var(--muted); }
.jr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jr-cam .jr-iso-inner { pointer-events: none; }   /* (taps go through to the town; the signs take their own) */
.jr-cam .jr-iso-inner > * { pointer-events: auto; }
.jr-map.jr-cam.is-over { cursor: pointer; }   /* over a building or a tree */
/* A building's sign (visitors): its name, and its stops (tap one, or the building) */
.jr-bsign { position: absolute; transform: translate(-50%, -100%) scale(var(--sign-k, 1)); transform-origin: 50% 100%; display: grid; justify-items: center; gap: 3px; z-index: 2; width: max-content; max-width: 210px; transition: opacity .3s; }
/* (a building below the road: its sign hangs below it; --sign-k keeps signs readable as the camera pulls back) */
.jr-bsign.is-below { transform: translate(-50%, 8px) scale(var(--sign-k, 1)); transform-origin: 50% 0; }
.jr-bsign-name { font: inherit; font-size: 12px; font-weight: 800; color: #fff; background: #111; border: 0; border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.jr-bsign-stop { display: flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2; text-align: left; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 4px 10px 4px 5px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.jr-bsign-stop:hover { transform: translateY(-2px); }
.jr-bsign-stop:focus-visible, .jr-bsign-name:focus-visible { outline: 3px solid #0022ff; outline-offset: 2px; }
.jr-bsign-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: #eef3ff; border: 2px solid var(--ink); }
.jr-bsign-stop.is-done { font-size: 12px; font-weight: 700; color: #444; box-shadow: none; }
.jr-bsign-stop.is-done .jr-bsign-icon { background: #ffcc00; font-size: 12px; font-weight: 800; }
.jr-bsign-stop.is-now { position: relative; background: #fff; }
/* The next stop's glow: a ring that grows and fades (transform and opacity only: no repainting) */
.jr-bsign-stop.is-now::after { content: ""; position: absolute; inset: -2px; border-radius: 14px; border: 3px solid rgba(0, 34, 255, .45); pointer-events: none; animation: jr-ring 1.6s ease-out infinite; }
@keyframes jr-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.12, 1.35); opacity: 0; } }
.jr-bsign.is-waiting { opacity: 0; pointer-events: none; }
.jr-bsign.is-behind { opacity: .18; pointer-events: none; }   /* (another building's sign over the current one's) */
.jr-bsign.is-pop { animation: jr-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.jr-place-tag { position: absolute; transform: translate(-50%, -50%); background: #111; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 2; }
.jr-stop { position: absolute; transform: translate(-50%, -32px); display: grid; justify-items: center; gap: 4px; width: 150px;
  padding: 0; border: 0; background: none; font: inherit; cursor: pointer; z-index: 2; }
.jr-stop-dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: #fff;
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .15s; }
.jr-stop:hover .jr-stop-dot { transform: translateY(-3px); }
.jr-stop:focus-visible .jr-stop-dot { outline: 3px solid #0022ff; outline-offset: 3px; }
.jr-stop.is-done .jr-stop-dot { background: #ffcc00; }
.jr-stop.is-now .jr-stop-dot { animation: jr-pulse 1.6s ease-in-out infinite; }
@keyframes jr-pulse { 0%, 100% { box-shadow: 0 5px 0 var(--ink), 0 0 0 0 rgba(0, 34, 255, .35); } 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 14px rgba(0, 34, 255, 0); } }
.jr-stop-label { font-size: 13px; font-weight: 800; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 10px; line-height: 1.25; }
.jr-fog { position: absolute; transform: translate(-50%, -40%); display: grid; justify-items: center; text-align: center; gap: 2px; width: 240px; z-index: 2;
  padding: 18px 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .97), rgba(255, 255, 255, .85) 60%, rgba(255, 255, 255, 0)); }
/* The road works' sign (drawn by drawSite on the canvas; this is the sign over them) */
.jr-fog.jr-site { transform: translate(-50%, -100%); width: max-content; padding: 0; gap: 3px; border-radius: 0; background: none; pointer-events: none; }
.jr-site b { font-size: 12px; font-weight: 800; color: #111; background: #fbbf24; border: 2px solid #111; border-radius: 6px; padding: 2px 9px; white-space: nowrap; }
.jr-site small { font-size: 11px; font-weight: 700; color: #111; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.jr-fog-art { font-size: 40px; }
.jr-fog small { color: var(--muted); font-size: 12px; }
.jr-fog.is-finish a { font-weight: 800; color: var(--ink); margin-top: 4px; }
/* A stop: a dialog over the map */
body.jr-open { overflow: hidden; }
.jr-dialog { position: fixed; inset: 0; z-index: 2000; background: rgba(17, 17, 17, .45); display: grid; place-items: center; padding: 16px; }
.jr-x { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; font-size: 20px; cursor: pointer; --glyph: 13px; }
.jr-steps i.on { background: var(--ink); }
.jr-guide { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px; font-size: 15px; line-height: 1.45; }
.jr-guide-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #ffcc00; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 18px; }
.jr-btn { border: 2px solid var(--ink); border-radius: 999px; padding: 10px 20px; font: inherit; font-weight: 800; font-size: 15px; background: #fff; cursor: pointer; }
.jr-btn.is-go { background: var(--ink); color: #fff; }
.jr-btn:focus-visible, .jr-choice:focus-visible { outline: 3px solid #0022ff; outline-offset: 2px; }
.jr-choices { display: grid; gap: 8px; }
.jr-choice { display: flex; align-items: center; gap: 10px; text-align: left; border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px; font: inherit; font-weight: 700; font-size: 15px; background: #fff; cursor: pointer; }
.jr-choice:hover:not(:disabled) { background: var(--panel); }
.jr-choice.is-right { background: #dcfce7; border-color: #16a34a; }
.jr-choice.is-wrong { background: #fee2e2; border-color: #dc2626; animation: jr-shake .3s; }
.jr-choice:disabled { cursor: default; }
@keyframes jr-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.jr-msg { margin: 0; font-weight: 700; min-height: 1.3em; }
.jr-msg.is-right { color: #15803d; }
.jr-msg.is-wrong { color: #b91c1c; }
.jr-done { grid-row: 1 / -1; display: grid; justify-items: center; align-content: center; gap: 16px; padding: 40px 20px; text-align: center; min-height: 360px; }
.jr-done-star { font-size: 72px; animation: jr-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.jr-done a { font-weight: 800; color: var(--ink); font-size: 17px; }
.jr-notes { grid-column: 1 / -1; border-top: 2px solid var(--ink); background: #fff7d6; }
.jr-notes > summary { padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 800; color: #5a4a00; }
.jr-notes-body { padding: 0 16px 14px; font-size: 14px; line-height: 1.55; color: #3d3200; }
.jr-notes-body h4 { margin: 0 0 6px; }
/* The pictures */
@keyframes jr-pop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
.jr-emoji { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: clamp(54px, 8vw, 84px); line-height: 1; }
.jr-emoji span { animation: jr-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.jr-face { --party: var(--party-other); --s: 56px; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--party);
  background: #fff 50% 25% / cover no-repeat; display: grid; place-items: center; font-size: calc(var(--s) * .3); font-weight: 800; flex: none; }
.jr-face[data-party="democrat"] { --party: var(--party-democrat); }
.jr-face[data-party="republican"] { --party: var(--party-republican); }
.jr-face.is-empty { --party: #ccc; color: #999; }
.jr-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; max-width: 460px; }
.jr-faces.is-many { gap: 10px 6px; }
.jr-seat { display: grid; justify-items: center; gap: 6px; width: 96px; text-align: center; color: var(--ink); text-decoration: none; animation: jr-pop .35s ease-out both; }
.jr-faces.is-many .jr-seat { width: 74px; }
.jr-seat b { font-size: 12px; line-height: 1.2; }
.jr-seat:hover .jr-face { transform: translateY(-2px); }
.jr-more { align-self: center; font-weight: 800; color: var(--muted); }
.jr-house { position: relative; width: 280px; height: 260px; display: grid; place-items: center; }
.jr-orbit { position: absolute; left: 50%; top: 50%; font-size: 30px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-118px) rotate(calc(-1 * var(--a))); animation: jr-pop .4s ease-out both; }
.jr-layer { border: 3px solid var(--ink); border-radius: 18px; padding: 26px 14px 14px; position: relative; background: hsl(calc(210 + var(--i, 0) * 35) 80% calc(94% - var(--i, 0) * 3%)); animation: jr-pop .4s ease-out both; animation-delay: calc(var(--i, 0) * .15s); }
.jr-layer-name { position: absolute; top: 5px; left: 12px; font-size: 12px; font-weight: 800; }
.jr-layer-sibs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }   /* (counties side by side in one ring) */
.jr-layer.is-sib { flex: 1 1 auto; padding: 6px 10px; border-width: 2px; border-radius: 12px; background: rgba(255, 255, 255, .7); text-align: center; animation: none; }
.jr-layer.is-sib .jr-layer-name { position: static; }
.jr-layer.is-you { padding: 10px 16px; font-weight: 800; background: #ffcc00; border-radius: 999px; text-align: center; }
.jr-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.jr-timeline li { display: grid; grid-template-columns: 64px 22px 1fr; align-items: center; gap: 8px; min-height: 44px; position: relative; animation: jr-pop .35s ease-out both; }
.jr-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 82px; top: 50%; height: 100%; border-left: 3px solid var(--ink); }
.jr-tl-date { font-weight: 800; font-size: 14px; text-align: right; }
.jr-tl-dot { width: 18px; height: 18px; border-radius: 50%; background: #ffcc00; border: 3px solid var(--ink); position: relative; z-index: 1; }
.jr-tl-what { font-weight: 700; font-size: 14px; }
.jr-timeline li.is-past { opacity: .5; }
.jr-timeline li.is-past .jr-tl-dot { background: #fff; }
.jr-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 420px; }
.jr-link { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 8px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 13px; animation: jr-pop .35s ease-out both; }
.jr-link-icon { font-size: 28px; }
.jr-bars { display: grid; gap: 8px; width: 100%; max-width: 440px; }
.jr-bar { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 8px; font-size: 13px; transition: opacity .3s; }
.jr-bar.is-later { opacity: .25; }
.jr-bar-name { font-weight: 700; line-height: 1.2; }
.jr-bar-fill { height: 16px; border-radius: 999px; background: linear-gradient(90deg, #16a34a var(--w), #e5e7eb var(--w)); }
.jr-bar.is-hi .jr-bar-fill { background: linear-gradient(90deg, #ffcc00 var(--w), #e5e7eb var(--w)); box-shadow: 0 0 0 2px var(--ink); }
.jr-bar-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.jr-power { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; width: 100%; max-width: 460px; }
.jr-office { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px 8px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; animation: jr-pop .35s ease-out both; }
.jr-office b { font-size: 13px; line-height: 1.2; }
.jr-office-icon { font-size: 40px; }
.jr-arrow { position: relative; font-size: 12px; font-weight: 800; color: var(--pc); text-align: center; max-width: 110px; padding-bottom: 14px; }
.jr-arrow::after { content: ""; position: absolute; left: 0; right: 6px; bottom: 4px; border-bottom: 4px solid var(--pc); }
.jr-arrow::before { content: ""; position: absolute; right: 0; bottom: -2px; border: 8px solid transparent; border-left: 12px solid var(--pc); border-right: 0; }
.jr-art .learn-video { width: 100%; margin: 0; }
@media (max-width: 720px) {

  .jr-map.jr-cam { height: 62vh; }
  .jr-stops { left: 10px; right: 10px; transform: none; max-width: none; }
  .jr-stops-cur { flex: 1; width: auto; }
  .jr-stop { width: 112px; }
  .jr-stop-dot { width: 46px; height: 46px; font-size: 21px; }
  .jr-stop { transform: translate(-50%, -26px); }
  .jr-stop:not(.is-now) .jr-stop-label { display: none; }   /* phones: only the stop you're on is labeled */
  .jr-bsign-stop { font-size: 12px; padding: 3px 8px 3px 4px; }
  .jr-bsign:not(.is-open):not(.is-here) .jr-bsign-stop.is-done { display: none; }   /* phones: a done stop shows when its building is tapped, or the car is at it */
  .jr-place-tag { font-size: 11px; padding: 2px 8px; }
  .jr-stop-label { font-size: 12px; }
  .jr-bar { grid-template-columns: 96px 1fr auto; }
  .jr-power { grid-template-columns: 1fr; justify-items: center; }
  .jr-arrow { padding: 0 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr *, .jr-dialog * { animation: none !important; transition: none !important; }
}

/* Lessons: one card each, opened one at a time by the reader. */
.learn-lesson-body { padding: 14px 18px 18px; font-size: 15px; line-height: 1.55; }
.learn-lesson-body h4 { margin: 16px 0 6px; font-size: 15px; }
.learn-lesson-body p { margin: 0 0 10px; }
.learn-level { padding: 10px 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; }
.learn-level h4 { margin-top: 0; }
.learn-offices dt { font-weight: 700; margin-top: 10px; }
.learn-offices dd { margin: 2px 0 0; color: #333; }
.learn-powers { padding-left: 18px; }
.learn-powers li { margin-bottom: 8px; }
.learn-budgets { display: grid; gap: 6px; }
.learn-budget { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.learn-budget-bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--ink) var(--w), #e8e8ee var(--w)); }
.learn-budget-amt { font-variant-numeric: tabular-nums; font-weight: 700; }

/* The owner's videos (or, where the area has its own videos, a slot waiting for one). */
.learn-video { margin: 0 0 14px; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.learn-video iframe, .learn-video video { width: 100%; height: 100%; border: 0; display: block; }
.learn-video figcaption { background: #fff; padding: 6px 0 0; font-size: 13px; color: var(--muted); }
.learn-video:has(figcaption) { aspect-ratio: auto; background: none; }
.learn-video:has(figcaption) iframe, .learn-video:has(figcaption) video { aspect-ratio: 16 / 9; height: auto; border-radius: 14px; background: #000; }
.learn-video.is-link { aspect-ratio: auto; background: none; }
/* An empty slot: a slim bar, so the page reads fine before the videos exist. */
.learn-video.is-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; aspect-ratio: auto; min-height: 64px; padding: 10px 14px; box-sizing: border-box;
  background: repeating-linear-gradient(135deg, #f6f6f8 0 12px, #eeeef2 12px 24px); border: 2px dashed #b9b9c3; color: var(--muted); font-weight: 700; font-size: 14px; text-align: center; }
.learn-video-mark { font-size: 22px; }

/* Quizzes */
.quiz-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.quiz-types .seg-btn { height: var(--nav-h); margin: 0; border-radius: 999px; }   /* separate pills: they wrap on phones */
.quiz-card, .quiz-done, .learn-block { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 16px 18px; margin: 0 0 14px; }
.quiz-progress { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.quiz-q { margin: 0 0 12px; font-size: 20px; }
.quiz-img { display: block; max-width: min(100%, 360px); margin: 0 0 12px; border: 2px solid var(--ink); border-radius: 10px; }
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink);
  font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.quiz-opt:hover:not(:disabled) { background: #f0f0f3; }
.quiz-opt:disabled { cursor: default; opacity: .65; }
.quiz-opt.is-right { opacity: 1; border-color: #0a8a3a; background: #e9f8ee; }
.quiz-opt.is-wrong { opacity: 1; border-color: #d50000; background: #fff0f0; }
.quiz-face { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #eee center / cover no-repeat; box-shadow: 0 0 0 3px #bbb; }
.quiz-face[data-party="democrat"] { box-shadow: 0 0 0 3px var(--party-democrat); }
.quiz-face[data-party="republican"] { box-shadow: 0 0 0 3px var(--party-republican); }
.quiz-answer { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.quiz-next { margin-top: 10px; display: flex; }
.quiz-score { font-size: 44px; font-weight: 900; margin: 0; }

/* Voter guide */
.learn-block h3 { margin: 0 0 10px; font-size: 18px; }
.learn-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.learn-dates li { display: grid; grid-template-columns: 190px 1fr auto; gap: 2px 12px; align-items: baseline; }
.learn-date { color: var(--muted); font-weight: 700; font-size: 14px; }
.learn-days { font-size: 13px; font-weight: 800; color: #0022ff; }
.learn-date-text, .learn-dates .learn-sources { grid-column: 2 / -1; font-size: 14px; }
.learn-links { margin: 0; padding-left: 18px; line-height: 1.7; }
.learn-address { display: flex; gap: 8px; margin: 6px 0; }
.learn-address input { flex: 1; min-width: 0; height: var(--nav-h); box-sizing: border-box; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; font: inherit; font-size: 14px; }
.learn-races { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.learn-race { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.learn-race h4 { margin: 0; font-size: 15px; }
.learn-race h4 a { color: var(--ink); }
.learn-race .learn-note { margin: 0 0 8px; }
.learn-race-people { display: grid; gap: 6px; }
.learn-race-person { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.learn-race-person:hover span:nth-child(2) { text-decoration: underline; }
.learn-tag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.learn-compare { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
@media (max-width: 700px) {
  .learn-dates li { grid-template-columns: 1fr auto; }
  .learn-date-text, .learn-dates .learn-sources { grid-column: 1 / -1; }
  .learn-budget { grid-template-columns: 1fr auto; }
  .learn-budget-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* The home page's Learn card */
/* The Learn card: a stretch of the journey's isometric town (images/learn-town.svg, drawn by tools/learn_card_art.py). */
.land-preview.is-learn { background: #c7ecce; }
.land-preview.is-learn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The Games card: four tiles, the Road Trip's town and three to come */
.land-preview.is-games { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; background: #eef3ff; }
.land-preview.is-games > span { position: relative; overflow: hidden; display: grid; place-items: center; font-size: 26px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.land-preview.is-games > span:not(.is-road):not(.is-bennie) { background: #f4f4f5; filter: grayscale(.6); opacity: .8; }
.land-preview.is-games .is-road { background: #c7ecce; }
.land-preview.is-games .is-road img, .land-preview.is-games .is-bennie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.land-preview.is-games .is-bennie { background: #7fc4ef; }
.land-preview.is-games .is-bennie img { object-position: 50% 60%; image-rendering: pixelated; }

/* Admin: yard signs to review */
.admin-signs { display: grid; gap: 12px; }
.admin-sign { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.admin-sign img, .admin-sign-missing { width: 100%; max-height: 160px; object-fit: contain; border: 1.5px solid var(--ink); border-radius: 8px; background: #fff; }
.admin-sign-missing { display: grid; place-items: center; height: 100px; color: var(--muted); font-size: 13px; text-align: center; }
.admin-sign-pics { display: grid; gap: 8px; }
.admin-sign.is-photo .admin-sign-pics { grid-template-columns: 1fr 1fr; }
.admin-pic { margin: 0; display: grid; gap: 4px; }
.admin-pic figcaption { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.admin-sign.is-photo img, .admin-sign.is-photo .admin-sign-missing { height: 130px; max-height: none; object-fit: cover; object-position: 50% 20%; }
.admin-sign h3 { margin: 0 0 2px; font-size: 16px; }
.admin-sign h3 a { color: var(--ink); }
.admin-sign-note { margin: 6px 0; font-size: 14px; }
.admin-sign-src { font-size: 13px; color: var(--muted); }
.admin-sign-actions { display: flex; gap: 8px; margin-top: 10px; }
.admin-sign-actions a { text-decoration: none; }
.admin-sign.is-sent { opacity: .6; }
@media (max-width: 700px) { .admin-sign { grid-template-columns: 1fr; } }

/* ---------- Vote: the guide builder (voter.html, js/voter.js) ---------- */

.vg-favs .vg-fav-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 10px; }
.vg-fav { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.vg-fav .learn-note { grid-column: 1; margin: 0; }
.vg-fav .fav-btn { grid-column: 2; grid-row: 1 / span 2; }
.vg-who { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
.vg-who:hover span:last-child, a.vg-who:hover { text-decoration: underline; }
.vg-print-bar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.vg-print-bar .vg-print-btn { margin-left: 0; }
.vg-print-bar > button { line-height: 1.4; }
/* Print with races still open: a small dialog (js/voter.js askPrint) */
.vg-ask { width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 22px 18px; border: 0; border-radius: 22px; text-align: center;
  box-shadow: 0 20px 50px rgba(21, 14, 94, .28); color: var(--ink); }
.vg-ask[open] { animation: vg-ask-in .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes vg-ask-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.vg-ask::backdrop { background: rgba(21, 14, 94, .35); }
.vg-ask-icon { margin: 0; font-size: 34px; line-height: 1; }
.vg-ask h2 { margin: 10px 0 6px; font-size: 20px; }
.vg-ask p { margin: 0 0 16px; color: #444; font-size: 15px; line-height: 1.4; }
.vg-ask-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vg-ask-row > button { margin: 0; padding: 9px 18px; font-size: 14px; }
.vg-race.is-flash, .vg-mcard.is-flash { animation: vg-flash 1.6s ease-out; }
@keyframes vg-flash { 0%, 40% { box-shadow: 0 0 0 4px #4232d4; } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .vg-ask[open], .vg-race.is-flash, .vg-mcard.is-flash { animation: none; } }
/* Stuck to the top, the two buttons spring out to the screen's edges (js/voter.js sets how far);
   'translate' leaves 'transform' to the buttons' own press effect. */
.vg-bar-mark { height: 0; }
.vg-print-bar > button { transition: translate .55s cubic-bezier(.34, 1.56, .64, 1); }
.vg-print-bar.is-docked > .vg-reset { translate: var(--vg-out-left, 0) 0; }
.vg-print-bar.is-docked > .vg-print-btn { translate: var(--vg-out-right, 0) 0; }
@media (prefers-reduced-motion: reduce) { .vg-print-bar > button { transition-duration: .01s; } }
.vg-reset { padding: 8px 18px; border: 2px solid transparent; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.vg-link { border: 0; padding: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.vg-race { display: grid; gap: 6px; }
.vg-race.is-picked { border-color: #4232d4; box-shadow: inset 4px 0 0 #4232d4; }
.vg-race-head { display: flex; align-items: start; gap: 8px; }
.vg-hide { margin-left: auto; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); cursor: pointer; flex: none; }
.vg-hide:hover { border-color: var(--ink); color: var(--ink); }
.vg-choices { display: grid; gap: 4px; }
.vg-choice { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.vg-choice:has(input:checked) { background: #e6e2fd; }
.vg-choice input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: #4232d4; flex: none; }
.vg-choice .learn-tag { margin-left: auto; }
.vg-choice .fav-btn { width: 28px; height: 28px; font-size: 22px; }
.vg-choice .learn-tag + .fav-btn { margin-left: 4px; }
.vg-choice:not(:has(.learn-tag)) .fav-btn { margin-left: auto; }
.vg-choice.is-skip { color: var(--muted); }
.vg-writein, .vg-note { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; }
.vg-note { width: 100%; }

/* The printed guide: only #printGuide prints, on plain paper. */
#printGuide { display: none; }
@media print {
  body.voter-page > *:not(#printGuide) { display: none !important; }
  body.voter-page { background: #fff !important; }
  #printGuide { display: block; color: #000; font: 11pt/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
  #printGuide h1 { font-size: 18pt; margin: 0 0 2pt; }
  #printGuide .pg-logo { float: right; height: 34pt; margin: 0 0 6pt 12pt; }
  #printGuide h2 { font-size: 12pt; margin: 12pt 0 4pt; }
  #printGuide .pg-sub { margin: 0 0 10pt; color: #333; }
  #printGuide table { width: 100%; border-collapse: collapse; }
  #printGuide th, #printGuide td { border: 1px solid #000; padding: 5pt 6pt; text-align: left; vertical-align: top; }
  #printGuide th { background: #eee; font-size: 9.5pt; text-transform: uppercase; letter-spacing: .04em; }
  #printGuide tr { break-inside: avoid; }
  #printGuide td small { display: block; color: #444; font-size: 9pt; }
  #printGuide td:nth-child(2) { width: 38%; font-weight: 700; }
  #printGuide td.pg-blank { height: 18pt; }
  #printGuide ul { margin: 0; padding-left: 14pt; }
  #printGuide .pg-foot { margin-top: 12pt; font-size: 8.5pt; color: #444; }
  @page { margin: 14mm; }
}

/* ---------- The journey editor (js/journey-editor.js; admins only) ---------- */
.je-panel { position: fixed; z-index: 1500; top: var(--bar-h); right: 0; bottom: 0; width: 400px; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-left: 2px solid var(--ink); box-shadow: -8px 0 30px rgba(0, 0, 0, .12); padding: 12px 14px 40px; box-sizing: border-box; font-size: 14px; overflow-x: hidden; }
body.je-on .learn-main { margin-right: 416px; margin-left: 16px; width: auto; }
body.je-on #learnSwitch { display: none; }
.je-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.je-top b { margin-right: auto; font-size: 16px; }
.je-top .je-btn { white-space: nowrap; }
.je-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.je-btn { border: 2px solid var(--ink); border-radius: 999px; background: #fff; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.je-btn:hover { background: var(--panel); }
.je-btn.is-go { background: var(--ink); color: #fff; }
.je-btn.is-on { background: #ffcc00; }
.je-btn.is-off { opacity: .35; cursor: default; }
.je-btn:focus-visible, .je-input:focus-visible { outline: 3px solid #0022ff; outline-offset: 2px; }
.je-tabs .je-btn { padding: 5px 9px; font-size: 12.5px; }
.je-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.je-body > .je-btn { justify-self: start; }
.je-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #fff7d6; border: 1.5px solid #e0b100; font-size: 13px; }
.je-help { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.je-editing { margin: -4px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* 📚 Levels: every saved level (js/journey-editor.js levelsTool) */
.je-levels { display: grid; gap: 8px; }
.je-level { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 8px; border: 2px solid var(--line); border-radius: 12px; }
.je-level.is-main { border-color: #1f7a3a; }
.je-level.is-editing { background: #eef3ff; }
.je-level .jr-thumb { width: 84px; height: 46px; }
.je-level-words { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.je-level-words b { font-size: 14px; }
.je-level-words small { color: var(--muted); font-size: 11.5px; }
.je-level > .je-row { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px; }
.je-level .je-btn { padding: 3px 8px; font-size: 12px; }
.je-pass { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #eef3ff; border: 1.5px solid #0022ff; }
.je-pass .je-btn { justify-self: start; }
.je-sending { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #eef3ff; border: 1.5px solid #0022ff; font-size: 13px; }
.je-sending.is-done { background: #e8f7ec; border-color: #1f7a3a; }
.je-sending .je-btn { margin-left: 6px; }
.je-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.je-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; border: 1.5px solid var(--line); border-radius: 10px; }
.je-list li.is-sel { border-color: #0022ff; background: #eef1ff; }
.je-list li.is-live { border-color: #16a34a; background: #f0fdf4; }
.je-list li small { color: var(--muted); font-size: 11.5px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.je-list .je-btn { padding: 2px 8px; font-size: 12px; }
.je-name { border: 0 !important; background: none !important; padding: 2px 4px !important; font-size: 13.5px !important; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.je-list li > span.je-name { font-weight: 700; }
.je-hidden { display: grid; gap: 4px; justify-items: start; }
.je-lesson { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; margin-top: 8px; padding: 10px; border: 2px solid var(--ink); border-radius: 14px; background: var(--panel); }
.je-lesson h4 { margin: 6px 0 0; font-size: 14px; }
.je-step { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 6px; padding: 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.je-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.je-row .je-field { flex: 1; }
.je-field { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 3px; font-size: 12px; font-weight: 700; color: #333; }
.je-input { min-width: 0; max-width: 100%; text-overflow: ellipsis; font: inherit; font-size: 14px; font-weight: 400; padding: 6px 8px; border: 1.5px solid #999; border-radius: 8px; background: #fff; box-sizing: border-box; width: 100%; }
textarea.je-input { min-height: 54px; resize: vertical; }
.je-icon { width: 64px; text-align: center; font-size: 18px; }
.je-row .je-field:has(.je-icon) { flex: 0 0 auto; }
.je-check { display: flex; gap: 6px; align-items: center; font-weight: 700; font-size: 13px; }
.je-range { width: 100%; }
.jr-map.is-editing { cursor: crosshair; outline: 3px dashed #f59e0b; outline-offset: -3px; }
.jr-map.is-editing .jr-stop-label { display: block !important; }
.jr-stop.is-selected .jr-stop-dot { outline: 4px solid #0022ff; outline-offset: 2px; }
.jr-sign.is-edit { background: #b45309; outline-color: #b45309; }
.jr-img { max-width: 100%; max-height: 280px; border-radius: 12px; }
@media (max-width: 720px) {
  .je-panel { top: auto; left: 0; width: auto; height: 52vh; border-left: 0; border-top: 2px solid var(--ink); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .15); }
  body.je-on .learn-main { margin: 16px auto; width: min(100% - 32px, 900px); }
  body.je-on .learn-main::after { content: ""; display: block; height: 56vh; }   /* room to scroll the town above the panel */
  .je-open .nav-label { display: none; }
}

/* ---------- Ask: an answer to a question in the search bar (js/home.js; worker/) ---------- */
.land-answer { color: var(--ink); -webkit-text-fill-color: currentColor; max-width: 640px; margin: 14px auto 0; box-sizing: border-box; padding: 14px 18px 12px; background: #fff; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); text-align: left; }
.land-answer[hidden] { display: none; }
.land-answer-q { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.land-answer-q b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.land-answer-mark { font-size: 18px; line-height: 1.2; }
.land-answer-x { flex: none; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; cursor: pointer; font-size: 18px; line-height: 1; --glyph: 11px; }
.land-answer-body { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
.land-answer-body p { margin: 0 0 8px; }
.land-answer-body ul { margin: 0 0 8px; padding-left: 20px; }
.land-answer-body a { color: #0022ff; font-weight: 600; }
.land-answer-wait { color: var(--muted); animation: land-answer-pulse 1.2s ease-in-out infinite; }
@keyframes land-answer-pulse { 50% { opacity: .45; } }
.land-answer-err { color: #b91c1c; }
.land-answer-foot { margin-top: 10px !important; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.admin-sign.is-done { opacity: 1; }
/* The admin page's quiz editor (js/admin.js renderQuiz): a lesson a row, its questions inside */
.admin-quiz { display: grid; gap: 8px; }
.admin-quiz-lesson { border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; }
.admin-quiz-lesson > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 12px; cursor: pointer; }
.admin-quiz-lesson > summary small { color: var(--muted); font-size: 13px; }
.admin-quiz-icon { width: 1.4em; text-align: center; }
.admin-quiz-list { display: grid; gap: 8px; padding: 0 12px 12px; }
.admin-quiz-q { border-top: 1px solid #e5e7eb; padding-top: 8px; }
.admin-quiz-q.is-off { opacity: .55; }
.admin-quiz-q.is-off .admin-quiz-text b { text-decoration: line-through; }
.admin-quiz-text { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.admin-quiz-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 99px; background: #eef2f7; color: #475569; }
.admin-quiz-tag.is-edited { background: #fef3c7; color: #92400e; }
.admin-quiz-tag.is-added { background: #dcfce7; color: #166534; }
.admin-quiz-tag.is-taken { background: #fee2e2; color: #991b1b; }
.admin-quiz-answers { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.admin-quiz-answers .is-right { color: #166534; font-weight: 700; }
.admin-quiz-answers .is-wrong { color: #6b7280; }
.admin-quiz-why { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.admin-quiz-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-quiz-acts .land-btn, .admin-quiz-add { font-size: 13px; padding: 4px 10px; }
.admin-quiz-add { justify-self: start; }
.admin-quiz-form { display: grid; gap: 8px; padding: 10px; border: 1.5px dashed var(--ink); border-radius: 10px; background: #fafafa; }
.admin-quiz-field { display: grid; gap: 3px; font-size: 13px; font-weight: 700; }
.admin-quiz-field input, .admin-quiz-field textarea { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 8px; font: inherit; font-size: 15px; font-weight: 400; resize: vertical; }
.admin-quiz-err { margin: 0; color: #b91c1c; font-size: 13px; }
.admin-quiz-err:empty { display: none; }
.admin-quiz-bar { position: sticky; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: #fffbea; border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.admin-quiz-bar .admin-note { margin: 0; flex: 1 1 200px; }
.admin-quiz-msg { flex-basis: 100%; }

/* The admin page's Road Trip card (js/admin.js renderRoadTrip): the active level and the editor link */
.admin-trip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.admin-trip-pick { display: grid; gap: 4px; flex: 1 1 240px; min-width: 0; font-size: 13px; font-weight: 700; }
.admin-trip-pick select { width: 100%; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; font-weight: 400; }
.admin-trip-row .land-go:disabled { opacity: .45; cursor: default; }
.admin-trip-msg { margin-top: 8px; }
.admin-trip-msg:empty { display: none; }
.admin-review-key { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-review-key input { flex: 1 1 140px; min-width: 0; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 10px; font: inherit; }

/* ---------- Road Trip levels: the picker (js/journey.js levelPicker) and the test drive ---------- */
.jr-thumb { flex: none; width: 120px; height: 64px; background: #c7ecce; border: 2px solid var(--ink); border-radius: 10px; }
.jr-thumb polyline { fill: none; stroke: #4b4b4b; stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.jr-thumb circle { fill: #fff; stroke: #111; stroke-width: 0.25; }
.jr-thumb circle.is-done { fill: #ffcc00; }
.jr-test { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 12px; background: #fff7cc; border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; font-size: 14px; }
@media (max-width: 700px) {
      .jr-thumb { width: 92px; height: 52px; }
}

/* Road Trip traffic lights (js/journey.js openQuiz): the red-light sign, and the quiz */
.jr-sign.is-red { background: #b91c1c; outline-color: #b91c1c; font: inherit; font-weight: 800; color: #fff; cursor: pointer; animation: jr-red 1.4s ease-in-out infinite; }
@keyframes jr-red { 50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, .25); } }
/* The light turns red: the map glows red at its edges, twice, then it's gone (js/journey.js redPulse) */
.jr-redpulse { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 90px 10px rgba(220, 38, 38, .55); background: rgba(220, 38, 38, .08); opacity: 0; animation: jr-redpulse 1.3s ease-in-out 2; }
@keyframes jr-redpulse { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jr-redpulse { animation-iteration-count: 1; } }
/* The quiz at a red light opens with it, in red, across the top */
.jr-quiz-red { flex: none; margin: 0; font-size: 26px; line-height: 1.1; font-weight: 900; color: #b91c1c; letter-spacing: .01em; }
.jr-quiz-from { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.jr-quiz-after { display: grid; gap: 10px; margin-top: 12px; }
.jr-bubble { position: relative; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font-size: 15px; line-height: 1.4; box-shadow: 0 3px 0 var(--ink); }
.jr-bubble::before { content: ""; position: absolute; left: 22px; top: -9px; width: 14px; height: 14px; background: inherit; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); }
.jr-bubble.is-right { background: #e8f7ec; }
.jr-bubble.is-wrong { background: #fff4e5; }
.jr-quiz-score { margin: 0; font-size: 16px; color: var(--muted); }

/* Ask about the lesson (js/journey.js lessonAsk): at the bottom of a lesson card */
.jr-ask-input:focus-visible { outline: 3px solid #0022ff; outline-offset: 2px; }
.jr-ask-go:disabled { opacity: .5; cursor: default; }
.jr-ask-out:empty { display: none; }
.jr-ask-q { margin: 0 0 6px; font-weight: 800; }
.jr-ask-q::before { content: "✨ "; }
.jr-ask-wait { margin: 0; color: var(--muted); }
.jr-ask-a p { margin: 0 0 6px; }
.jr-ask-a ul { margin: 0 0 6px; padding-left: 20px; }
.jr-ask-err { margin: 0; color: #b91c1c; font-weight: 700; }
.jr-ask-foot { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* Games (learn.html #games, js/learn.js renderGames) */
/* The four games, two on top and two below, as big as the window allows (js/learn.js sets the
   grid's height to the room left under the heading; the page is full width on the Games view) */
body.is-games .learn-main { width: calc(100% - 32px); margin-bottom: 16px; }
.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 0; min-height: 480px; }
@media (max-width: 520px) { .gm-grid { gap: 10px; min-height: 420px; } .gm-in { padding: 10px 10px 12px !important; } .gm-in h2 { font-size: 16px !important; } .gm-in p { font-size: 13px !important; } }
.gm-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); color: var(--ink); text-decoration: none; transition: transform .12s; }
a.gm-card:hover, a.gm-card:focus-visible { transform: translateY(-3px); outline: none; }
.gm-card.is-soon { box-shadow: none; border-style: dashed; color: var(--muted); }
.gm-pic { position: relative; min-height: 60px; display: grid; place-items: center; font-size: clamp(40px, 9vh, 120px); border-bottom: 2px solid var(--ink); background: #f4f4f5; }
.gm-card.is-soon .gm-pic { border-bottom-style: dashed; filter: grayscale(.6); opacity: .7; }
.gm-pic.is-road { background: #c7ecce; }
.gm-pic.is-road img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-pic.is-bennie { background: #7fc4ef; }
.gm-pic.is-bennie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; image-rendering: pixelated; }
.gm-in { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
.gm-in h2 { margin: 0; font-size: 20px; }
.gm-in p { margin: 0; font-size: 15px; line-height: 1.35; }
.gm-go { justify-self: start; margin-top: 4px; font-weight: 800; font-size: 15px; background: #1f7a3a; color: #fff; border-radius: 999px; padding: 7px 16px; }
.jr-games-back { margin: 0 0 12px; }

/* The squirrel's prank (js/journey.js appleSplat): an apple at the screen, then a red splat */
.jr-throw { position: fixed; z-index: 5001; font-size: 28px; line-height: 1; pointer-events: none; will-change: transform; }
.jr-splat { position: fixed; inset: 0; z-index: 5000; pointer-events: none; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(200, 16, 16, .96) 0 16%, transparent 16.5%),
    radial-gradient(circle at 38% 36%, rgba(200, 16, 16, .92) 0 7%, transparent 7.5%),
    radial-gradient(circle at 64% 38%, rgba(200, 16, 16, .92) 0 8%, transparent 8.5%),
    radial-gradient(circle at 34% 60%, rgba(200, 16, 16, .9) 0 6%, transparent 6.5%),
    radial-gradient(circle at 66% 62%, rgba(200, 16, 16, .9) 0 7%, transparent 7.5%),
    radial-gradient(circle at 50% 74%, rgba(200, 16, 16, .88) 0 4%, transparent 4.5%),
    radial-gradient(circle at 24% 46%, rgba(200, 16, 16, .85) 0 3%, transparent 3.5%),
    radial-gradient(circle at 77% 49%, rgba(200, 16, 16, .85) 0 3%, transparent 3.5%),
    rgba(220, 38, 38, .55); }
.jr-splat b { font-size: clamp(30px, 6vw, 64px); font-weight: 900; color: #fff; text-align: center; padding: 0 16px; text-shadow: 0 3px 0 #7f1d1d, 0 0 18px rgba(0, 0, 0, .35); transform: rotate(-4deg); }

/* ---------- A Road Trip stop: the lesson card (js/journey.js openStop) ----------
   Where you are along the top, the picture on the left, the words and the step's play
   (js/playbook.js) on the right, and every control in the footer. Phones: one column. */
.jr-card { width: min(980px, 100%); height: min(660px, calc(100vh - 32px)); height: min(660px, calc(100dvh - 32px)); display: flex;   /* (one size for every step; a long one scrolls inside) */
  flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 22px; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 50px rgba(0, 0, 0, .25); }
.jr-card-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.jr-card-place { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-card-meta { flex: none; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.jr-btn.jr-icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 15px; display: grid; place-items: center; flex: none; }
.jr-btn.jr-icon[aria-pressed="true"] { background: #111; color: #fff; }
.jr-steps { display: flex; gap: 6px; padding: 12px 18px 0; }
.jr-steps i { height: 6px; flex: 1; border-radius: 3px; background: #e4e4e7; transition: background .2s; }
.jr-steps i.on { background: #111; }
.jr-card-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; padding: 14px 18px 16px; }
.jr-art { position: relative; display: grid; place-items: center; min-height: 330px; padding: 18px; border-radius: 18px; background: #f6f6f7; overflow: hidden; }
.jr-words { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 4px 2px; }
.jr-big { margin: 0; font-size: clamp(22px, 2.5vw, 29px); font-weight: 850; line-height: 1.15; letter-spacing: -.01em; }
.jr-text { margin: 0; font-size: 16.5px; line-height: 1.55; color: #26262b; }
.jr-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; border-top: 1.5px solid #ececef; }
.jr-foot .jr-btn { height: 42px; padding: 0 18px; border-radius: 14px; }
.jr-foot-gap { flex: 1; }
/* ✨ Ask: a button at the footer's left that grows, when tapped, into the question box
   reaching across to Back and Next; the answers show above the footer. */
.jr-askbar { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 42px; box-sizing: border-box; margin: 0 auto 0 0; padding: 0;
  border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4d8; transition: flex-grow .35s cubic-bezier(.3, .8, .3, 1), padding .35s; }
.jr-askbar.is-open { flex-grow: 1; padding: 0 4px 0 6px; box-shadow: inset 0 0 0 2px #111; }
.jr-askbar-open { flex: none; height: 100%; padding: 0 18px; border: 0; border-radius: 14px; background: none; font: inherit; font-weight: 800; font-size: 15px; color: #111; cursor: pointer; white-space: nowrap; transition: padding .35s; }
.jr-askbar:not(.is-open) { gap: 0; cursor: pointer; }   /* (closed: just the button, all of it greyed on hover) */
.jr-askbar:not(.is-open):hover, .jr-askbar:not(.is-open):focus-within { background: #ececef; }
.jr-askbar.is-open .jr-askbar-open { padding: 0 6px; cursor: default; }
.jr-askbar .jr-ask-input, .jr-askbar .jr-ask-go, .jr-askbar .jr-askbar-x { width: 0; min-width: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity .2s; }
.jr-askbar.is-open .jr-ask-input { flex: 1 1 0; width: 0; height: 34px; padding: 0 6px; opacity: 1; pointer-events: auto; background: transparent; font: inherit; font-size: 15px; color: #111; box-shadow: none; transition-delay: .15s; }
.jr-askbar.is-open .jr-ask-input:focus { outline: none; background: transparent; box-shadow: none; }
.jr-askbar.is-open .jr-ask-go { flex: none; width: auto; height: 34px; padding: 0 14px; border-radius: 10px; background: #111; color: #fff; font: inherit; font-weight: 800; font-size: 14px; opacity: 1; pointer-events: auto; cursor: pointer; transition-delay: .15s; }
.jr-askbar.is-open .jr-ask-go:disabled { opacity: .5; }
.jr-askbar.is-open .jr-askbar-x { flex: none; width: 30px; height: 30px; border-radius: 50%; background: none; font-size: 18px; opacity: 1; pointer-events: auto; cursor: pointer; --glyph: 11px; transition-delay: .15s; }
.jr-askbar.is-open .jr-askbar-x:hover { background: #ececef; }
.jr-ask-out { margin: 0 18px 4px; max-height: 32vh; overflow-y: auto; }
.jr-ask-out[hidden] { display: none; }
.jr-ask-out { border-radius: 14px; padding: 10px 14px; font-size: 15px; line-height: 1.45; background: #fff; box-shadow: inset 0 0 0 1.5px #ececef; }
.jr-ask-out:empty { display: none; }
@media (max-width: 720px) {
  .jr-dialog { padding: 0; place-items: stretch; }
  .jr-card { width: 100%; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
  .jr-card-top { padding: 12px 14px 0; }
  .jr-card-meta { display: none; }
  .jr-steps { padding: 10px 14px 0; }
  .jr-card-body { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: 14px; padding: 12px 14px; align-content: start; }   /* (max-content: the picture never shrinks as the play below it grows) */
  .jr-art { min-height: 0; padding: 12px; }
  .jr-art .jr-house { width: 220px; height: 210px; }
  .jr-art .jr-house svg { width: 110px; }
  .jr-art .jr-orbit { font-size: 25px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))); }
  .jr-art .jr-emoji { font-size: 48px; }
  .jr-words { justify-content: flex-start; }
  .jr-big { font-size: 22px; }
  .jr-text { font-size: 15.5px; }
  .jr-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .jr-foot .jr-btn { padding: 0 14px; }
}

/* ---------- The playbook: a step's interactive piece (js/playbook.js) ---------- */
.pb { display: grid; gap: 9px; padding: 12px 14px 14px; border-radius: 16px; background: #f4f4f6; }
.pb-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #55555c; }
.pb-prompt { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.pb-claim { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.pb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-opts.is-two .pb-opt { flex: 1; justify-content: center; }
.pb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 0; border-radius: 12px; background: #fff; color: #111;
  font: inherit; font-size: 14px; font-weight: 700; text-align: left; line-height: 1.25; cursor: pointer; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.pb-btn:hover:not(:disabled) { background: #ececef; }
.pb-btn:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.pb-btn:disabled { cursor: default; }
.pb-btn.pb-go { background: #111; color: #fff; box-shadow: none; justify-self: start; }
.pb-btn.pb-go:hover:not(:disabled) { background: #333; }
.pb-btn.pb-go:disabled { opacity: .45; }
.pb-btn.is-right { background: #e9f8ee; color: #0a5a26; box-shadow: inset 0 0 0 2px #0a8a3a; }
.pb-btn.is-wrong { background: #fdecea; color: #8a1c12; box-shadow: inset 0 0 0 2px #c0392b; animation: jr-shake .3s; }
.pb-btn .jr-face { --s: 28px; box-shadow: 0 0 0 2px var(--party); border-width: 1.5px; }
.pb-out { margin: 0; font-size: 14.5px; line-height: 1.45; }
.pb-out:empty { display: none; }
.pb-out.is-right { color: #0a5a26; }
.pb-out.is-wrong { color: #8a1c12; }
.pb-count { margin: 0; font-size: 12.5px; font-weight: 700; color: #55555c; }
.pb-count:empty { display: none; }
.pb-hint { margin: 0; color: #77777d; font-size: 14px; }
.pb-info { padding: 10px 12px; border-radius: 12px; background: #fff; min-height: 58px; }
.pb-info b { display: block; font-size: 15px; }
.pb-info p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; }
/* flip */
.pb-flip { position: relative; height: 118px; perspective: 900px; cursor: pointer; }
.pb-face { position: absolute; inset: 0; display: flex; align-items: center; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.4; font-weight: 600;
  backface-visibility: hidden; transition: transform .5s cubic-bezier(.3, .7, .3, 1); overflow: auto; }
.pb-face.is-front { background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4d8; font-weight: 800; font-size: 16px; }
.pb-face.is-back { background: #111; color: #fff; transform: rotateY(180deg); }
.pb-flip.is-flipped .is-front { transform: rotateY(-180deg); }
.pb-flip.is-flipped .is-back { transform: rotateY(0); }
/* order */
.pb-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pb-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: box-shadow .15s; }
.pb-row.is-dragging { cursor: grabbing; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); position: relative; z-index: 1; }
.pb-row.is-right { box-shadow: inset 4px 0 0 #0a8a3a, 0 1px 3px rgba(0, 0, 0, .1); }
.pb-row.is-wrong { box-shadow: inset 4px 0 0 #c0392b, 0 1px 3px rgba(0, 0, 0, .1); }
.pb-grip { color: #a1a1a8; letter-spacing: -2px; font-weight: 800; }
.pb-row-text { flex: 1; font-size: 14.5px; font-weight: 700; }
.pb-btn.pb-mini { min-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 13px; }
.pb-end { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #77777d; }
.pb-row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* sort */
.pb-sort { display: grid; gap: 7px; }
.pb-sort-row { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #fff; }
.pb-sort-text { font-size: 14.5px; font-weight: 700; }
.pb-sort-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-btn.pb-chip { min-height: 30px; padding: 3px 11px; border-radius: 999px; font-size: 13px; }
.pb-sort-why { margin: 0; font-size: 13.5px; line-height: 1.4; color: #3f3f46; }
.pb-sort-why:empty { display: none; }
/* vote */
.pb-seats { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-btn.pb-seat { position: relative; min-height: 0; padding: 2px; border-radius: 50%; background: transparent; box-shadow: none; }
.pb-btn.pb-seat:hover:not(:disabled) { background: transparent; transform: translateY(-1px); }
.pb-seat .jr-face { --s: 34px; border-width: 1.5px; }
.pb-chair { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; font-size: 18px; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.pb-tick { position: absolute; right: -3px; bottom: -3px; display: none; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #0a8a3a; color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 0 0 2px #f4f4f6; }
.pb-seat[aria-pressed="true"] .pb-tick { display: grid; }
.pb-seat[aria-pressed="true"] .jr-face, .pb-seat[aria-pressed="true"] .pb-chair { opacity: 1; box-shadow: 0 0 0 3px #0a8a3a; }
.pb-meter { position: relative; height: 10px; border-radius: 5px; background: #e4e4e7; }
.pb-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: #111; transition: width .2s, background .2s; }
.pb.is-passed .pb-meter-fill { background: #0a8a3a; }
.pb-meter-need { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #c0392b; }
/* estimate */
.pb-val { margin: 0; font-size: 15px; font-weight: 800; }
.pb-track { position: relative; padding: 22px 0 4px; }
.pb-range { width: 100%; margin: 0; }
/* (at --at, 0 to 1, along the track, where the handle's center would be: the handle is 18px wide) */
.pb-truth-dot { position: absolute; left: calc(9px + var(--at, 0) * (100% - 18px)); bottom: 4px; width: 16px; height: 16px; margin: 0 0 -1px -8px; border-radius: 50%; background: #0a8a3a; box-shadow: 0 0 0 3px #fff; pointer-events: none; z-index: 1; }
.pb-truth-dot::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 10px; margin-left: -1px; background: #0a8a3a; }
.pb-truth-dot[hidden] { display: none; }
.pb-truth { position: absolute; top: 0; left: calc(9px + var(--at, 0) * (100% - 18px)); transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #0a8a3a; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pb-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: #77777d; }
/* timeline */
.pb-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pb-btn.pb-tl-btn { width: 100%; }
.pb-tl-when { min-width: 82px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #55555c; }
.pb-tl-what { flex: 1; }
.pb-tl-item.is-open .pb-tl-btn { background: #111; color: #fff; box-shadow: none; }
.pb-tl-item.is-open .pb-tl-when { color: #c9c9cf; }
.pb-tl-text { margin: 6px 12px 4px; font-size: 14.5px; line-height: 1.45; }
/* first vote */
.pb-fv { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-date { flex: 1; min-width: 150px; height: 38px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 15px; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.pb-date:focus { outline: none; box-shadow: inset 0 0 0 2px #111; }
.pb-fv-out:empty { display: none; }
.pb-fv-line { display: flex; gap: 8px; margin: 6px 0 0; font-size: 14.5px; line-height: 1.4; }
/* checklist */
.pb-check { display: grid; gap: 6px; }
.pb-btn.pb-tick-row { width: 100%; }
.pb-box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 2px #bdbdc3; }
.pb-tick-row[aria-pressed="true"] .pb-box { background: #111; box-shadow: none; }
.pb-tick-row[aria-pressed="true"] .pb-box::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 900; }
.pb-tick-row[aria-pressed="true"] span:last-child { color: #77777d; text-decoration: line-through; }
.pb-check-end { display: grid; gap: 8px; }
.pb-check-end[hidden] { display: none; }
a.pb-link { text-decoration: none; }
/* yours */
.pb-yours { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; color: #111; text-decoration: none; box-shadow: inset 0 0 0 1.5px #d4d4d8; }
.pb-yours:hover { background: #ececef; }
.pb-yours .jr-face { --s: 40px; border-width: 1.5px; }
.pb-yours-text { flex: 1; display: grid; line-height: 1.3; }
.pb-yours-text b { font-size: 15px; }
.pb-yours-text small { color: #55555c; font-size: 13px; }
.pb-yours-go { font-weight: 800; font-size: 18px; }
.pb-yours-pin { font-size: 26px; }
/* hotspots and layers, on the picture */
.pb-spot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-art .pb-spot { cursor: pointer; border-radius: 50%; padding: 3px; background: #fff; box-shadow: 0 0 0 2px #d4d4d8, 0 3px 8px rgba(0, 0, 0, .12); line-height: 1; }   /* (its pop-in plays once, when the step opens; a tap only moves the ring) */
.jr-art .pb-spot:hover, .jr-art .pb-spot:focus-visible { outline: none; box-shadow: 0 0 0 3px #111, 0 3px 8px rgba(0, 0, 0, .15); }
.jr-art .pb-spot.is-on { box-shadow: 0 0 0 3px #111, 0 0 0 7px rgba(17, 17, 17, .15); }
.jr-layer.pb-layer { cursor: pointer; transition: box-shadow .15s; }
.jr-layer.pb-layer:hover, .jr-layer.pb-layer:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(17, 17, 17, .35); }
.jr-layer.pb-layer.is-on { box-shadow: 0 0 0 4px #111; }
@media (max-width: 720px) {
  .pb { padding: 10px 12px 12px; }
  .pb-flip { height: 132px; }
}
/* find yours: an address, then who represents it */
.pb-find-out:empty { display: none; }
.pb-find-out { display: grid; gap: 8px; }
.pb-find-where { margin: 0; font-size: 13px; color: #55555c; }
.pb-find-list { display: grid; gap: 6px; }
@media (max-width: 720px) {
  .jr-foot:has(.jr-askbar.is-open) .jr-btn { display: none; }   /* (phones: the question box takes the whole footer; × brings Back and Next back) */
}
.jr-card > .jr-done { flex: 1; }
/* (compact, so a lesson fits its card: a sort's thing and its choices on one line, its answer under them) */
.pb-sort { gap: 5px; }
.pb-sort-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 4px; padding: 6px 8px 6px 10px; }
.pb-sort-why { grid-column: 1 / -1; font-size: 13px; }
.pb-sort-opts { gap: 4px; justify-content: flex-end; }
.pb-btn.pb-chip { min-height: 28px; padding: 2px 10px; }
.pb-order { gap: 4px; }
.pb-row { padding: 2px 6px 2px 10px; }
.pb-end { line-height: 1.1; }
@media (max-width: 720px) {
  .pb-sort-row { grid-template-columns: 1fr; }
  .pb-sort-opts { justify-content: flex-start; }
}
.jr-card-body { padding-bottom: 12px; }
.jr-words { gap: 10px; }
.pb { gap: 7px; padding: 10px 12px 12px; }
/* Level Complete: a splash across the map once the level's done (js/journey.js levelComplete) */
.jr-complete { position: absolute; inset: 0; z-index: 4;   /* (under the top row: the games menu and Start over stay usable) */
  display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .94) 0, rgba(255, 255, 255, .86) 45%, rgba(255, 255, 255, .55) 100%); animation: jr-fade .4s ease-out both; }
.jr-complete-star { font-size: clamp(56px, 9vw, 92px); line-height: 1; animation: jr-pop .6s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
.jr-complete-title { margin: 0; font-size: clamp(40px, 7vw, 84px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #111; animation: jr-pop .6s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
.jr-complete-sub { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.45; color: #3f3f46; animation: jr-fade .5s ease-out .5s both; }
.jr-complete-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; animation: jr-fade .5s ease-out .65s both; }
.jr-complete-go .jr-btn { height: 48px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 14px; font-size: 16px; text-decoration: none; }
@keyframes jr-fade { from { opacity: 0; } to { opacity: 1; } }
/* The U.S. flag, drawn (js/journey.js flagify: the emoji is just "US" on Windows) */
.jr-flag { display: inline-block; height: .78em; width: auto; vertical-align: -.08em; border-radius: .08em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.jr-emoji .jr-flag { height: .72em; vertical-align: .1em; border-radius: 6px; }
/* put them in order: a lifted row follows the pointer; a dashed gap shows where it lands */
.pb-row:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.pb-row.is-lifted { cursor: grabbing; list-style: none; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); transform: rotate(-1.5deg) scale(1.03); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #111; }
.pb-gap { list-style: none; box-sizing: border-box; border-radius: 11px; border: 2px dashed #b4b4bb; background: rgba(255, 255, 255, .5); }
.pb [hidden] { display: none !important; }   /* (e.g. "Show me", until an order is checked) */

/* ---------- On the ballot (measures.html, js/measures.js) and the measures in the voter guide ---------- */
.mz-main { width: min(100% - 32px, 1120px); }
.mz-main .news-head { margin-bottom: 2px; }
.mz-lede { margin: 2px 0 14px; color: #555; font-size: 15px; }
.mz-countdown { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 14px; padding: 10px 16px; border-radius: 14px;
  background: var(--btn-go, #21167c); color: #fff; font-size: 15px; }
.mz-countdown span { opacity: .82; }
.mz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border: 0; border-radius: var(--btn-radius, 14px); background: var(--btn-tint, #d3cdfb);
  color: var(--btn-ink, #150e5e); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.mz-chip:hover { background: var(--btn-tint-hover, #c4bcf8); }
.mz-chip.is-on { background: #fff; box-shadow: inset 0 0 0 2px var(--btn-ring, #4232d4); }
.mz-count { opacity: .6; font-weight: 500; }
/* Filter: Orbit's group pill and bubble (css/style.css), here in the page's flow at the left of
   the filters, its bubble opening out from the pill's own outline (the pill at its top left). */
.mz-filter { position: relative; top: auto; left: auto; translate: none; z-index: 30; }
.mz-filter .mix-button { height: 38px; font-size: 14px; }
.mz-filter .mix-button.is-filtered { box-shadow: inset 0 0 0 2px var(--btn-ring, #4232d4), 0 4px 14px rgba(38, 27, 143, .14); }
.mz-filter .group-pop { left: 0; translate: none; width: min(520px, calc(100vw - 32px)); }
.mz-filter .group-pop.is-opening { animation-name: mz-pop-grow; }
.mz-filter .group-pop.is-closing { animation-name: mz-pop-shrink; }
.mz-filter .pop-pick[hidden] { display: none; }
@keyframes mz-pop-grow {
  from { clip-path: inset(0 calc(100% - var(--pw)) calc(100% - var(--ph)) 0 round 999px); }
  to { clip-path: inset(-40px round 60px); }
}
@keyframes mz-pop-shrink {
  from { clip-path: inset(-40px round 60px); }
  to { clip-path: inset(0 calc(100% - var(--pw)) calc(100% - var(--ph)) 0 round 999px); opacity: .4; }
}
/* Measures | Bills, at the right end of the top bar */
.ballot-switch { margin-left: auto; }
.ballot-switch .seg-btn { text-decoration: none; }
@media (max-width: 600px) {   /* (phones: its own row under the buttons, the two halves side by side) */
  .person-bar:has(.ballot-switch) { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 12px; }
  .ballot-switch { flex: 1 0 100%; }
  .ballot-switch .seg-btn { flex: 1; text-align: center; }
}
.mz-address { margin: 0 0 8px; }
.mz-address[hidden] { display: none; }
.mz-search { box-sizing: border-box; width: 100%; margin: 4px 0 18px; padding: 10px 14px; border: 0; border-radius: 12px; background: #f1effe; font: inherit; font-size: 15px; }
.mz-place { margin: 22px 0 10px; font-size: 20px; color: #150e5e; }
.mz-maybe { margin: 30px 0 4px; padding-top: 14px; border-top: 1px dashed #c9c4ee; font-size: 15px; color: #5d5890; }
.mz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.mz-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 20px; background: #f5f4ff; }
.mz-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: #5d5890; }
.mz-kind { padding: 3px 8px; border-radius: 8px; background: #e9e6fd; color: #21167c; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mz-result { padding: 3px 8px; border-radius: 8px; font-weight: 800; }
.mz-result.is-passed { background: #dff3ea; color: #13795b; }
.mz-result.is-failed { background: #fbe3e1; color: #b3261e; }
.mz-card-title { margin: 0; font-size: 19px; line-height: 1.25; }
.mz-card-title a { color: #150e5e; text-decoration: none; }
.mz-card-title a:hover { text-decoration: underline; }
.mz-plain { margin: 0; font-size: 15px; line-height: 1.5; color: #222; }
.mz-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mz-yn > div { padding: 9px 11px; border-radius: 12px; font-size: 13px; line-height: 1.38; }
.mz-yn b { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .05em; }
.mz-y { background: #dff3ea; color: #0b4a37; } .mz-y b { color: #13795b; }
.mz-n { background: #fbe3e1; color: #6d1712; } .mz-n b { color: #b3261e; }
.mz-yn.is-big { gap: 12px; margin-bottom: 16px; }
.mz-yn.is-big > div { padding: 14px 16px; border-radius: 16px; font-size: 15px; }
.mz-yn.is-big b { font-size: 20px; letter-spacing: 0; margin-bottom: 4px; }
.mz-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mz-cost { padding: 4px 10px; border-radius: 999px; border: 1.5px solid #21167c; background: #fff; color: #21167c; font-size: 12px; font-weight: 700; }
.mz-parties { display: contents; }
.mz-party { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.mz-party.is-for { color: #13795b; } .mz-party.is-against { color: #b3261e; }
.mz-dot { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; }
.mz-dot.is-d { background: var(--party-democrat, #0022ff); } .mz-dot.is-r { background: var(--party-republican, #ff0000); }
.mz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto; }
.mz-foot small { font-size: 12px; color: #5d5890; white-space: nowrap; }
.mz-bar { flex: 1 1 120px; display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #e7e5f3; }
.mz-bar.is-wide { flex: none; height: 14px; margin-bottom: 12px; }
.mz-bar i { display: block; min-width: 4px; }
.mz-bar .is-for { background: #13795b; } .mz-bar .is-against { background: #b3261e; } .mz-bar .is-none { background: #cfcde0; }
.mz-mine { padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; }
.mz-mine.is-yes { background: #13795b; } .mz-mine.is-no { background: #b3261e; }
.mz-more { margin-left: auto; font-weight: 700; font-size: 14px; color: #21167c; text-decoration: none; }
.mz-more:hover { text-decoration: underline; }
.mz-empty { padding: 20px; border-radius: 16px; background: #f5f4ff; color: #5d5890; }
.mz-foot-note { margin: 26px 0 0; font-size: 12px; color: #6a6596; }
.mz-bills-link { display: inline-block; margin-top: 12px; font-weight: 700; color: #21167c; }
.mz-chip.is-link { background: #fff; box-shadow: inset 0 0 0 1.5px #c9c4ee; }

/* one measure */
.mz-back { display: inline-block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #21167c; text-decoration: none; }
.mz-title { margin: 6px 0 2px; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.12; }
.mz-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; align-items: start; }
.mz-box { margin: 0 0 16px; padding: 16px 18px; border-radius: 20px; background: #f5f4ff; }
.mz-box > h3, .mz-box > summary { margin: 0 0 10px; font-size: 17px; color: #150e5e; }
.mz-box > summary { margin: 0; cursor: pointer; font-weight: 700; }
.mz-ballot[open] > summary { margin-bottom: 10px; }
.mz-box .mz-plain + .mz-plain { margin-top: 10px; }
.mz-split { display: flex; height: 34px; border-radius: 10px; overflow: hidden; margin: 4px 0 8px; }
.mz-split i { display: grid; place-items: center; min-width: 6px; overflow: hidden; padding: 0 4px; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mz-split .is-0, .mz-legend .is-0::before { background: #21167c; } .mz-split .is-1, .mz-legend .is-1::before { background: #4232d4; }
.mz-split .is-2, .mz-legend .is-2::before { background: #7a6ff0; } .mz-split .is-3, .mz-legend .is-3::before { background: #a59cf5; }
.mz-split .is-4, .mz-legend .is-4::before { background: #c8c2fa; } .mz-split .is-3, .mz-split .is-4 { color: #150e5e; }
.mz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #333; }
.mz-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; }
.mz-cost-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mz-cost-big b { font-size: 30px; color: #21167c; }
.mz-cost-big span { flex: 1 1 240px; font-size: 14px; color: #333; line-height: 1.45; }
.mz-args { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 14px; line-height: 1.45; }
.mz-args h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.mz-args .is-for h4 { color: #13795b; } .mz-args .is-against h4 { color: #b3261e; }
.mz-args ul { margin: 0; padding-left: 18px; }
.mz-args li + li { margin-top: 6px; }
.mz-mybox { background: #fff; box-shadow: inset 0 0 0 2px #e3dffc; }
.mz-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #f1effe; }
.mz-seg button { padding: 9px 16px; border: 0; border-radius: 11px; background: transparent; color: #150e5e; font: inherit; font-weight: 700; cursor: pointer; }
.mz-seg button:hover { background: #e4e0fd; }
.mz-seg .is-yes.is-on { background: #13795b; color: #fff; } .mz-seg .is-no.is-on { background: #b3261e; color: #fff; }
.mz-seg .is-skip.is-on { background: #d3cdfb; }
.mz-small { margin: 8px 0 0; font-size: 12px; color: #6a6596; }
.mz-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mz-side h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.mz-side.is-for h4 { color: #13795b; } .mz-side.is-against h4 { color: #b3261e; }
.mz-person { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 7px 10px 7px 7px; border-radius: 14px; background: #fff; }
.mz-person > div { display: grid; min-width: 0; }
.mz-name { font-weight: 700; font-size: 14px; line-height: 1.2; color: #111; text-decoration: none; }
a.mz-name:hover { text-decoration: underline; }
.mz-why { font-size: 12px; line-height: 1.35; color: #5d5890; }
.mz-src { justify-self: start; margin-top: 4px; padding: 2px 7px; border-radius: 8px; background: #e9e6fd; color: #4232d4; font-size: 11px; font-weight: 700; text-decoration: none; }
.mz-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #ece9f8; color: #333;
  font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: 0 0 0 3px var(--ring, #8b88a8); }
.mz-av img { width: 100%; height: 100%; object-fit: cover; }
.mz-av.is-democrat { --ring: var(--party-democrat, #0022ff); } .mz-av.is-republican { --ring: var(--party-republican, #ff0000); } .mz-av.is-other { --ring: var(--party-other, #8a2be2); }
.mz-av.is-small { width: 30px; height: 30px; font-size: 10px; box-shadow: 0 0 0 2px var(--ring, #8b88a8); }
.mz-quiet { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mz-partyrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mz-pcard { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #fff; }
.mz-pcard .mz-dot { width: 30px; height: 30px; font-size: 14px; }
.mz-pcard > div { display: grid; gap: 1px; }
.mz-pcard b { font-size: 14px; }
.mz-pcard em { font-style: normal; font-weight: 800; font-size: 13px; }
.mz-pcard em.is-for { color: #13795b; } .mz-pcard em.is-against { color: #b3261e; } .mz-pcard em.is-none { color: #8b88a8; }
.mz-pcard .mz-small { margin: 2px 0 0; }
.mz-timeline { list-style: none; margin: 0; padding: 0; }
.mz-timeline li { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; padding-bottom: 12px; font-size: 14px; }
.mz-timeline li::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 3px; background: #d3cdfb; }
.mz-timeline li:last-child::before { display: none; }
.mz-timeline i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #d3cdfb; }
.mz-timeline .is-done i { background: #21167c; }
.mz-timeline .is-next i { background: #fff; box-shadow: inset 0 0 0 4px #4232d4; }
.mz-timeline b { font-size: 13px; color: #150e5e; }
.mz-timeline span { color: #333; }
.mz-sources { font-size: 12px; color: #6a6596; line-height: 1.6; }
.mz-sources a { color: #4232d4; }
@media (max-width: 820px) {
  .mz-detail { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mz-yn, .mz-args, .mz-sides, .mz-partyrow { grid-template-columns: 1fr; }
  .mz-yn.is-big { grid-template-columns: 1fr 1fr; }
}
/* the voter guide's propositions */
.vg-measures { margin-top: 26px; }
.vg-measures > h3 { margin: 0 0 6px; }
.vg-mlist { display: grid; gap: 10px; margin-top: 10px; }
.vg-mcard { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #f5f4ff; }
.vg-mcard.is-picked { box-shadow: inset 0 0 0 2px #c9c4ee; }
.vg-mcard h4 { margin: 4px 0 2px; font-size: 16px; }
.vg-mcard h4 a { color: #150e5e; }
.vg-mline { margin: 0; font-size: 13px; color: #444; line-height: 1.4; }
.vg-mfavs { margin: 6px 0 0; font-size: 12px; color: #5d5890; }
.vg-mnote { grid-column: 1 / -1; box-sizing: border-box; width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 13px; }
.vg-maybe { margin-top: 12px; }
.vg-maybe > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #5d5890; }
#printGuide .pg-yes { font-weight: 800; } #printGuide .pg-no { font-weight: 800; }
@media (max-width: 560px) {
  .vg-mcard { grid-template-columns: 1fr; }
}

/* ---------- Bills (bills.html, js/bills.js) ---------- */
.bl-updated { margin: -8px 0 12px; font-size: 13px; color: #6a6596; }
.bl-session { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff7d6; color: #5c4a00; font-size: 14px; }
.bl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bl-filters select { max-width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: #f1effe; color: #150e5e; font: inherit; font-size: 14px; }
.bl-list { display: grid; gap: 14px; }
.bl-card { padding: 16px 18px; border-radius: 20px; background: #f5f4ff; }
.bl-card .mz-where a { color: #21167c; }
.bl-title { margin: 6px 0 6px; font-size: 19px; line-height: 1.3; }
.bl-title a { color: #150e5e; text-decoration: none; }
.bl-title a:hover { text-decoration: underline; }
.bl-src { font-size: 12px; font-weight: 700; color: #6a6596; }
.bl-moved { padding: 3px 8px; border-radius: 8px; background: #ffe08a; color: #5c4a00; font-weight: 800; }
.bl-steps { display: flex; list-style: none; margin: 14px 0 6px; padding: 0; }
.bl-steps li { position: relative; flex: 1; display: grid; justify-items: center; text-align: center; font-size: 11px; color: #5d5890; }
.bl-steps li::before { content: ""; position: absolute; top: 9px; right: 50%; left: -50%; height: 3px; background: #d3cdfb; }
.bl-steps li:first-child::before { display: none; }
.bl-steps i { position: relative; z-index: 1; width: 20px; height: 20px; margin-bottom: 4px; border-radius: 50%; background: #d3cdfb; }
.bl-steps b { font-size: 12px; color: #150e5e; line-height: 1.2; }
.bl-steps .is-done i, .bl-steps .is-done::before, .bl-steps .is-now::before { background: #21167c; }
.bl-steps .is-now i { background: #fff; box-shadow: inset 0 0 0 4px #4232d4; }
.bl-steps .is-vetoed i { background: #b3261e; } .bl-steps .is-vetoed b { color: #b3261e; }
.bl-latest { margin: 6px 0 0; font-size: 13px; color: #444; }
.bl-rc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.bl-chamber { padding: 12px 14px; border-radius: 14px; background: #fff; }
.bl-chamber h4 { margin: 0 0 8px; font-size: 13px; }
.bl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.bl-lbl { flex: none; width: 96px; font-weight: 700; }
.bl-lbl.is-R { color: var(--party-republican, #ff0000); } .bl-lbl.is-D { color: var(--party-democrat, #0022ff); } .bl-lbl.is-I { color: var(--party-other, #8a2be2); }
.bl-track { flex: 1; display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: #eee; }
.bl-track i { display: block; min-width: 2px; }
.bl-track .is-yes { background: #13795b; } .bl-track .is-no { background: #b3261e; }
.bl-track .is-pR { background: var(--party-republican, #ff0000); } .bl-track .is-pD { background: var(--party-democrat, #0022ff); } .bl-track .is-pI { background: var(--party-other, #8a2be2); }
.bl-num { flex: none; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.bl-support { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bl-support .mz-pcard { background: #f5f4ff; padding: 10px 12px; }
.bl-ours { display: grid; gap: 8px; margin-top: 12px; }
.bl-ourline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bl-q { flex-basis: 100%; font-size: 12px; color: #5d5890; }
.bl-vote { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: #fff; font-size: 12px; }
.bl-vote b { padding: 1px 6px; border-radius: 6px; font-size: 11px; color: #fff; background: #8b88a8; }
.bl-vote b.is-yes { background: #13795b; } .bl-vote b.is-no { background: #b3261e; }
.bl-follow { padding: 7px 12px; border: 0; border-radius: 12px; background: #e9e6fd; color: #21167c; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.bl-follow.is-on { background: #21167c; color: #fff; }
.bl-off { font-size: 13px; color: #4232d4; }
.bl-card .mz-foot { margin-top: 12px; }
.bl-more { margin: 16px auto 0; display: flex; }
.bl-more[hidden] { display: none; }
.bl-h3 { margin: 18px 0 8px; font-size: 16px; color: #150e5e; }
.bl-all { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #333; }
@media (max-width: 640px) {
  .bl-rc, .bl-support { grid-template-columns: 1fr; }
  .bl-steps b { font-size: 10px; }
  .bl-steps span { display: none; }
}
/* The home page's "On the ballot": a top-bar button, and in the Explore menu on phones instead. */
.land-menu-item.is-ballot { display: none; }
@media (max-width: 520px) {
  .land-btn.is-ballot { display: none; }
  .land-menu-item.is-ballot { display: flex; }
}
.mz-show-maybe { margin-top: 18px; }
/* the Bills page's "Have your say" */
.bl-say { margin: 14px 0 4px; background: #fff; box-shadow: inset 0 0 0 2px #e3dffc; }
.bl-next { margin-bottom: 12px; }
.bl-say .mz-seg { flex-wrap: wrap; }
.bl-people { display: grid; gap: 8px; margin: 12px 0 6px; }
.bl-person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #f5f4ff; }
.bl-person .mz-av { width: 40px; height: 40px; font-size: 18px; }
.bl-person > div:first-of-type { display: grid; flex: 1 1 200px; min-width: 0; }
.bl-voted { justify-self: start; margin-top: 3px; padding: 1px 7px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #fff; background: #8b88a8; }
.bl-voted.is-yes { background: #13795b; } .bl-voted.is-no { background: #b3261e; }
.bl-acts { display: flex; gap: 6px; margin-left: auto; }
.bl-act { padding: 8px 12px; border: 0; border-radius: 12px; background: #e9e6fd; color: #21167c; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.bl-act.is-go { background: #21167c; color: #fff; }
.bl-act:disabled { opacity: .45; cursor: not-allowed; }
.bl-saylink { font-weight: 700; }