/*
 * The site's button style ("soft civic"): tinted, rounded, no outline. Loaded last on every
 * page, after style.css, home.css and genetics.css, so it restyles their buttons in one place:
 *
 *   plain       a soft violet tint, violet text (most buttons: the top bar, filters, toggles)
 *   main        flat violet, white text (the one action that moves you on: Compare →,
 *               Next, Send, Play)
 *   selected    white with a violet ring (a toggle that's on, a tab that's open)
 *
 * Disabled buttons, and the colors that carry meaning (a quiz answer's right or wrong, the
 * red-light pill), keep their own looks.
 */
:root {
  --btn-tint: #d3cdfb;        /* plain buttons */
  --btn-tint-hover: #c4bcf8;
  --btn-ink: #150e5e;         /* their text */
  --btn-go: #21167c;          /* main actions: flat violet */
  --btn-go-hover: #180f5c;
  --btn-ring: #4232d4;        /* selected, and the keyboard focus ring */
  --btn-radius: 14px;
  --btn-shadow: none;         /* flat: no gloss, no shadow */
  --btn-go-shadow: none;
  --violet-go: var(--btn-go);        /* (the violet, kept for parts inside a black-and-white area) */
  --violet-go-hover: var(--btn-go-hover);
}

/* ---------- plain ---------- */
.nav-btn, .index-tab, .land-btn, .land-pill, .reset-button, .view-toggle, .filter-toggle,
.compare-open, .show-more, .previously-btn, .fc-toggle, .seg-btn, .je-btn, .jr-btn, .jr-pill, .gen-chip,
.jr-title, .jr-stops-btn, .jr-stops-cur, .map-btn + .map-btn, .gen-p-other, .vg-reset {
  border-color: transparent !important;
  border-radius: var(--btn-radius);
  background: var(--btn-tint);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
}
.seg-btn:first-child, .seg-btn:last-child, .seg-btn { border-radius: var(--btn-radius); }
.seg-btn + .seg-btn { margin-left: 4px; }
.nav-btn:hover, .index-tab:hover, .land-btn:hover, .land-pill:hover, .reset-button:hover, .view-toggle:hover,
.compare-open:hover, .show-more:hover, .gen-chip:not([aria-pressed="true"]):hover, .previously-btn:hover, .fc-toggle:hover, .seg-btn:hover, .je-btn:hover,
.jr-btn:hover, .jr-pill:hover, .jr-title:hover, .jr-stops-btn:not(:disabled):hover, .jr-stops-cur:hover, .map-btn + .map-btn:hover, .vg-reset:hover {
  background: var(--btn-tint-hover);
  color: var(--btn-ink);
}
.nav-btn:active, .land-btn:active, .land-pill:active, .reset-button:active, .jr-pill:active, .jr-title:active,
.jr-stops-btn:not(:disabled):active, .jr-stops-cur:active, .jr-btn:active, .je-btn:active, .vg-reset:active {
  transform: translateY(1px);
  box-shadow: none;
}
.jr-stops-btn:disabled { box-shadow: none; }
.view-toggle .view-swap { background: var(--btn-go); color: #fff; border-radius: 10px; }

/* ---------- main actions ---------- */
.land-go:not([aria-disabled="true"]), .compare-go:not(:disabled), .jr-btn.is-go, .je-btn.is-go, .gen-p-go,
.jr-ask-go:not(:disabled), .map-btn:first-child, .gm-go {
  border-color: transparent !important;
  border-radius: var(--btn-radius);
  background: var(--btn-go);
  color: #fff;
  box-shadow: var(--btn-go-shadow);
}
.land-go:not([aria-disabled="true"]):hover, .compare-go:not(:disabled):hover, .jr-btn.is-go:hover, .je-btn.is-go:hover,
.gen-p-go:hover, .jr-ask-go:not(:disabled):hover, .map-btn:first-child:hover {
  background: var(--btn-go-hover);
  color: #fff;
}
.land-go[aria-disabled="true"], .compare-go:disabled { border-radius: var(--btn-radius); }

/* ---------- selected ---------- */
.seg-btn[aria-pressed="true"], .seg-btn[aria-selected="true"], .fc-toggle[aria-pressed="true"],
.previously-btn[aria-expanded="true"], .filter-toggle[aria-expanded="true"], .je-btn.is-on,
.show-more[aria-expanded="true"], .gen-view .seg-btn[aria-pressed="true"], .gen-chip[aria-pressed="true"] {
  background: #fff;
  color: var(--btn-ink);
  box-shadow: inset 0 0 0 2px var(--btn-ring);
}

/* ---------- meaning stays ---------- */
.jr-pill.is-red { background: #b91c1c; color: #fff; }
.jr-pill.is-red:hover { background: #a31717; color: #fff; }
.jr-stops-cur.is-red, .jr-stops-cur.is-red:hover { background: #b91c1c; color: #fff; animation: jr-red 1.4s ease-in-out infinite; }
.jr-stops-cur.is-red:hover { background: #a31717; }
.jr-stops-cur.is-red .jr-stops-icon { background: #fff; border-color: #fff; }
.jr-stops-cur.is-red small { color: #fde2e2; }

/* ---------- quiz answers: soft cards ---------- */
.quiz-opt, .jr-choice { border-color: transparent; border-radius: var(--btn-radius); background: #f4f3ff; box-shadow: var(--btn-shadow); }
.quiz-opt:hover:not(:disabled), .jr-choice:hover:not(:disabled) { background: var(--btn-tint); }

/* ---------- keyboard focus ---------- */
.nav-btn:focus-visible, .index-tab:focus-visible, .land-btn:focus-visible, .land-pill:focus-visible, .land-go:focus-visible, .reset-button:focus-visible,
.view-toggle:focus-visible, .compare-open:focus-visible, .compare-go:focus-visible,
.show-more:focus-visible, .seg-btn:focus-visible, .gen-chip:focus-visible, .je-btn:focus-visible, .jr-btn:focus-visible, .jr-pill:focus-visible,
.jr-title:focus-visible, .jr-stops-btn:focus-visible, .jr-stops-cur:focus-visible, .jr-choice:focus-visible, .quiz-opt:focus-visible {
  outline: 3px solid var(--btn-ring);
  outline-offset: 2px;
}

/* ---------- close (×) buttons: round, tinted ---------- */
.index-close, .jr-x, .land-answer-x, .search-addr-x, .gen-panel-close, .map-panel-close, .compare-close, .vg-hide {
  border: 0 !important;
  border-radius: 50%;
  background: var(--btn-tint);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
}
.index-close:hover, .jr-x:hover, .land-answer-x:hover, .search-addr-x:hover, .gen-panel-close:hover, .map-panel-close:hover,
.compare-close:hover, .vg-hide:hover { background: var(--btn-tint-hover); color: var(--btn-ink); }
/* (the little × inside a chip: no background until you point at it) */
.chip-x, .land-chip-x, .map-chip-x, .compare-remove { background: transparent; color: var(--btn-ink); border-radius: 50%; }
.chip-x:hover, .land-chip-x:hover, .map-chip-x:hover, .compare-remove:hover { background: var(--btn-tint); color: var(--btn-ink); }
.chip-plus { border-color: #c9c3fb; color: var(--btn-ink); background: #f7f6ff; }
.chip-plus:hover { border-color: var(--btn-ring); }

/* ---------- the Index panel ---------- */
.site-index { border-right: 0; box-shadow: 8px 0 30px rgba(59, 47, 181, .18); }
.index-tabs button {
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-tint);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
}
.index-tabs button:hover { background: var(--btn-tint-hover); }
.index-tabs button[aria-selected="true"] { background: #fff; color: var(--btn-ink); box-shadow: inset 0 0 0 2px var(--btn-ring); }
.index-filter { border: 0; border-radius: var(--btn-radius); background: #f4f3ff; box-shadow: inset 0 0 0 1.5px #d9d4fc; }
.index-filter:focus-visible { outline: 3px solid var(--btn-ring); }
.index-item:hover, .index-item:focus-visible { background: #f4f3ff; }
.index-item.here { background: var(--btn-tint); box-shadow: inset 3px 0 0 var(--btn-ring); }
.index-guide { border: 0; border-radius: var(--btn-radius); background: var(--btn-tint); color: var(--btn-ink); box-shadow: var(--btn-shadow); }
.index-guide:hover { background: var(--btn-tint-hover); color: var(--btn-ink); }

/* ---------- keyboard focus (these too) ---------- */
.index-close:focus-visible, .jr-x:focus-visible, .land-answer-x:focus-visible, .search-addr-x:focus-visible, .gen-panel-close:focus-visible,
.map-panel-close:focus-visible, .compare-close:focus-visible, .chip-x:focus-visible, .chip-plus:focus-visible, .index-tabs button:focus-visible,
.index-guide:focus-visible { outline: 3px solid var(--btn-ring); outline-offset: 2px; }

/* =====================================================================================
 * Surfaces, in the same family as the buttons:
 *
 *   cards       floating: white, no outline, lifted by a soft violet shadow
 *               (the home cards, Quick compare, the Games cards, the Compare tray)
 *   the rest    tinted: flat lavender, no outline (menus, dropdowns, search bars, the
 *               slider, pop-up panels; the news ticker is solid violet)
 *   check boxes hairline switches
 * ===================================================================================== */
:root {
  --surf-tint: #f1effe;       /* menus, panels */
  --surf-ink: #4e4a7a;        /* their quieter text */
  --surf-head: #7d78ab;       /* their section headings */
  --surf-shadow: 0 12px 30px rgba(38, 27, 143, .14);
  --field: var(--btn-tint);   /* search bars, text boxes, selects, the slider: as strong as the buttons */
  --field-ph: #4a4486;        /* placeholder text */
  --switch-off: #b3aaf3;      /* a check box (switch) that's off */
  --card-shadow: 0 2px 4px rgba(38, 27, 143, .05), 0 10px 26px rgba(38, 27, 143, .10);
  --card-shadow-hover: 0 4px 8px rgba(38, 27, 143, .06), 0 16px 34px rgba(38, 27, 143, .16);
  --hairline: #c4bcf8;
}

/* ---------- cards: floating ---------- */
.land-card, .gm-card, .compare-box {
  border: 0 !important;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
a.land-card:hover, a.gm-card:hover { box-shadow: var(--card-shadow-hover); }
.land-preview { border-bottom: 0; }
.land-card h2, .land-card h3, .gm-card h2, .gm-card h3 { color: #1b1464; }
.land-card p, .gm-card p { color: var(--surf-ink); }
.gm-card.is-soon, .gm-card[aria-disabled="true"] { box-shadow: none; background: var(--surf-tint); }
.compare-tray.drop-hover .compare-box { box-shadow: 0 0 0 3px var(--btn-ring), var(--card-shadow-hover); }
/* their empty slots: dashed lavender */
.land-slot { border: 1.5px dashed #c9c3fb; border-radius: var(--btn-radius); background: #f4f3ff; color: var(--btn-ink); }
.land-slot:hover { border-color: var(--btn-ring); color: var(--btn-ink); }
.compare-slot { border-color: #c9c3fb; border-radius: 14px; background: #f8f7ff; }
.compare-slot.filled { border-color: transparent; background: #f4f3ff; }
.compare-tray.dragging .compare-slot:not(.filled), .compare-slot.pinned { border-color: var(--btn-ring); }
.land-chip { border: 0; border-radius: var(--btn-radius); background: var(--btn-tint); color: var(--btn-ink); }

/* ---------- menus and dropdowns: tinted ---------- */
.land-menu, .land-results, .jr-games-menu, .jr-stops-list, .search-results, .chip-results,
.map-pick-results, .previously-panel {
  border: 0 !important;
  border-radius: 16px;
  background: var(--surf-tint);
  box-shadow: var(--surf-shadow);
}
.land-menu-item, .land-result, .jr-games-item, .jr-stops-row, .search-result, .chip-result, .map-pick-results li {
  border-radius: 10px;
  color: var(--btn-ink);
}
.land-menu-item:hover, .land-menu-item:focus-visible, .land-result:hover, .land-result.is-active,
button.jr-games-item:hover, .jr-stops-row:hover, .jr-stops-row:focus-visible,
.search-result:hover, .search-result.active, .chip-result:hover, .chip-result.is-active,
.map-pick-results li:hover, .map-pick-results li.is-active { background: rgba(255, 255, 255, .7); }
/* the one you're on: white */
.land-menu-item[aria-checked="true"], .land-menu-item.is-on, .jr-games-item.is-here, .jr-stops-row.is-here { border-color: transparent; background: #fff; }
.land-menu-state, .land-results-sec, .jr-stops-list-head { color: var(--surf-head); }
.land-menu-sub, .land-menu-soon, .land-result-sub, .search-sub { color: var(--surf-ink); }

/* ---------- search bars, text boxes, selects: tinted ---------- */
.search-input, .index-filter, .land-picker input, .chip-search, .map-where-row input, .map-pick-search input,
.news-filter select, .news-filter input, .learn-address input, .jr-ask-input,
.admin-area-form input[type="text"], .admin-quiz-field input, .admin-quiz-field textarea, .admin-trip-pick select,
.admin-review-key input, .je-input, .map-select {
  border-color: transparent !important;
  border-radius: var(--btn-radius);
  background-color: var(--field);
  color: var(--btn-ink);
  box-shadow: none;
}
.land-search {
  border: 0;
  border-radius: 20px;
  background: var(--field);
  color: var(--btn-ink);
  box-shadow: 0 10px 30px rgba(38, 27, 143, .18);
}
.land-search input { color: var(--btn-ink); }
:is(.search-input, .index-filter, .land-picker input, .chip-search, .map-where-row input, .map-pick-search input,
  .news-filter input, .learn-address input, .jr-ask-input, .admin-area-form input, .land-search input)::placeholder { color: var(--field-ph); }
/* typing: white with the violet ring, like a selected button */
.search-input:focus, .index-filter:focus, .land-picker input:focus, .chip-search:focus, .map-where-row input:focus,
.map-pick-search input:focus, .news-filter select:focus-visible, .news-filter input:focus, .learn-address input:focus,
.jr-ask-input:focus:focus, .admin-area-form input[type="text"]:focus, .admin-quiz-field input:focus,
.admin-quiz-field textarea:focus, .admin-trip-pick select:focus, .admin-review-key input:focus, .je-input:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 2px var(--btn-ring);
  outline: none;
}
.land-search:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--btn-ring), 0 10px 30px rgba(38, 27, 143, .18); }
.map-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23261b8f'/%3E%3C/svg%3E"); }
.search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23261b8f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E"); }
.search-addr { border: 0; border-radius: var(--btn-radius); background: var(--surf-tint); color: var(--btn-ink); }
.search-addr-count { background: var(--btn-go); }

/* ---------- the slider: tinted ---------- */
.size-filter { border: 0; border-radius: var(--btn-radius); background: var(--field); color: var(--btn-ink); }
.size-filter:focus-within { outline: 3px solid var(--btn-ring); }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: linear-gradient(var(--btn-go), var(--btn-go)) 0 / var(--fill, 0%) 100% no-repeat, #f7f6ff;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: var(--btn-go); box-shadow: 0 0 0 3px #fff; cursor: pointer;
}
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--btn-go); box-shadow: 0 0 0 3px #fff; cursor: pointer; }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--btn-go); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--btn-ring); }

/* ---------- the home page's news ticker: solid violet like the Play button (breaking news keeps its red) ---------- */
.land-news.is-latest { background: var(--violet-go); color: #fff; box-shadow: 0 8px 20px rgba(38, 27, 143, .22); }
.land-news.is-latest:hover { background: var(--violet-go-hover); }
.land-news.is-latest .land-news-tag { background: #fff; color: var(--violet-go); }

/* ---------- pop-up panels: tinted, no outline ---------- */
.map-controls, .map-panel, .gen-panel, .fc-pop, .land-answer {
  border: 0 !important;
  background: var(--surf-tint);
  box-shadow: var(--surf-shadow);
}
.map-hover .maplibregl-popup-content { border: 0; border-radius: 12px; background: var(--surf-tint); box-shadow: var(--surf-shadow); }
.jr-card { border: 0 !important; }   /* (a lesson stays white to read) */
.jr-ask-go:disabled { border-color: transparent; }

/* ---------- top bars: a soft line in place of the black one ---------- */
.land-bar { border-bottom: 1.5px solid #e6e3fb; }

/* ---------- check boxes: hairline switches ---------- */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none;
  width: 30px; height: 18px; margin: 0;
  border-radius: 9px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background .15s;
  vertical-align: middle;
}
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(38, 27, 143, .25);
  transition: transform .15s;
}
input[type="checkbox"]:checked { background: var(--btn-go); }
input[type="checkbox"]:checked::before { transform: translateX(12px); }
input[type="checkbox"]:focus-visible { outline: 3px solid var(--btn-ring); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.multi-toggle input { width: 30px; height: 18px; }
.multi-toggle {
  border: 1.5px solid var(--hairline);
  border-radius: var(--btn-radius);
  background: #fff;
  color: var(--btn-ink);
  font-weight: 600;
}
.multi-toggle { gap: 8px; padding: 4px 10px 4px 6px; }

/* ---------- leftovers ---------- */
/* the Games cards: no hard lines inside; "coming soon" ones are flat tinted */
.gm-pic { border-bottom: 0; }
.gm-card.is-soon { border-style: none; background: var(--surf-tint); color: var(--surf-ink); }
.gm-card.is-soon .gm-pic { background: transparent; }
.land-preview.is-games { background: var(--surf-tint); }
.land-preview.is-games > span { border: 0; border-radius: 12px; }
.land-preview.is-games > span:not(.is-road) { background: #fff; }
/* disabled main actions: a faded tint, no outline */
.land-go[aria-disabled="true"], .compare-go:disabled { border-color: transparent !important; background: var(--btn-tint); color: #a6a2cf; }
/* the map: Find is the main action, the layer chips are plain buttons */
.map-where-row .map-btn[type="submit"] { border-color: transparent; border-radius: var(--btn-radius); background: var(--btn-go); color: #fff; }
.map-where-row .map-btn[type="submit"]:hover { background: var(--btn-go-hover); }
.map-seg button { border-color: transparent; border-radius: 10px; background: #fff; color: var(--btn-ink); }
.map-seg button:hover { background: var(--btn-tint-hover); }
.map-seg button[aria-pressed="true"]:not([data-layer]) { background: var(--btn-go); color: #fff; }
/* person and position pages: their info cards float too */
.text-card, .area-mini { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--card-shadow); }
.area-mini:hover { box-shadow: var(--card-shadow-hover); }
.view-toggle:hover .view-swap { background: var(--btn-go-hover); }

/* =====================================================================================
 * Black and white: the same style in greys and black, for the home page's Ask box, the
 * Compare boxes (Orbit's and a person page's tray, the home page's Quick compare), the Road Trip (its map and
 * its stop dialog), the Vote page and the News page. The variables above are redefined
 * on those parts, so everything inside them follows; colors that carry meaning (party
 * rings, a right or wrong answer, the red light, breaking news) stay.
 * ===================================================================================== */
.compare-tray, .land-compare, .land-hero, #panel-journey, .jr-dialog, .voter-page .learn-main, .news-page .news-main {
  --btn-tint: #e4e4e7;
  --btn-tint-hover: #d4d4d8;
  --btn-ink: #111;
  --btn-go: #111;
  --btn-go-hover: #333;
  --btn-ring: #111;
  --field: #e4e4e7;
  --field-ph: #55555c;
  --switch-off: #bdbdc3;
  --surf-tint: #f1f1f3;
  --surf-ink: #4a4a50;
  --surf-head: #77777d;
  --hairline: #cfcfd4;
  --card-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .10);
  --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .06), 0 16px 34px rgba(0, 0, 0, .16);
  --surf-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
:is(.compare-tray, .land-compare) .land-slot, .compare-tray .compare-slot { border-color: #c4c4ca; background: #f6f6f7; }
:is(.compare-tray, .land-compare) .land-slot:hover { border-color: #111; }
.compare-tray .compare-slot.filled { border-color: transparent; background: #f1f1f3; }
.compare-tray.dragging .compare-slot:not(.filled), .compare-tray .compare-slot.pinned { border-color: #111; }
.compare-tray.drop-hover .compare-box { box-shadow: 0 0 0 3px #111, var(--card-shadow-hover); }
:is(.compare-tray, .land-compare, .jr-dialog, .voter-page, .news-page) :is(.land-go[aria-disabled="true"], .compare-go:disabled) { color: #9a9aa0; }
:is(.compare-tray, .land-compare, .voter-page, .news-page) .chip-plus { border-color: #c4c4ca; background: #f6f6f7; }
:is(.compare-tray, .land-compare, .voter-page, .news-page) .chip-plus:hover { border-color: #111; }
:is(#panel-journey, .jr-dialog) :is(.quiz-opt, .jr-choice) { background: #f1f1f3; }
:is(#panel-journey, .jr-dialog) :is(.quiz-opt, .jr-choice):hover:not(:disabled) { background: #dcdce0; }   /* (darker on hover: white was lost on the white card) */
:is(.compare-tray, .land-compare, .land-hero, .voter-page, .news-page) .search-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E"); }

/* the Vote page: its blocks float; races and favorites inside them are flat grey */
.voter-page .learn-block { border: 0; border-radius: 20px; box-shadow: var(--card-shadow); }
.voter-page :is(.learn-race, .vg-fav) { border: 0; border-radius: 14px; background: #f4f4f6; }
.voter-page .vg-race.is-picked { box-shadow: inset 4px 0 0 #4232d4; }   /* (the site's violet: a pick) */
.voter-page :is(.vg-writein, .vg-note) { border: 0; border-radius: 10px; background: #fff; color: #111; }
.voter-page :is(.vg-writein, .vg-note):focus { box-shadow: inset 0 0 0 2px #111; outline: none; }
.voter-page :is(.vg-writein, .vg-note)::placeholder { color: #6a6a70; }
.voter-page .vg-print-bar :is(.vg-print-btn, .vg-reset) { box-shadow: 0 3px 6px rgba(33, 22, 124, .12), 0 10px 24px rgba(33, 22, 124, .22); }   /* (a soft lift: the bar floats over the page as it scrolls) */
/* (its Start over and Print stay the site's violet, not the page's black and white) */
.voter-page .vg-print-bar {
  --btn-tint: #d3cdfb;
  --btn-tint-hover: #c4bcf8;
  --btn-ink: #150e5e;
  --btn-go: #21167c;
  --btn-go-hover: #180f5c;
}
/* the News page: headlines float (breaking ones keep their red edge) */
.news-page .news-item { border: 0; border-radius: 18px; box-shadow: var(--card-shadow); }
.news-page .news-item.is-breaking { box-shadow: inset 0 0 0 2px #d50000, var(--card-shadow); }
.news-page .news-headline { font-weight: 500; }
.land-compare h2 { color: #111; }
/* inside a Road Trip stop: the guide's tip, the answer box and speech bubbles are flat grey; link and office tiles float */
.jr-dialog :is(.jr-guide, .jr-ask-out) { border: 0; background: #f1f1f3; }   /* (a quiz answer's speech bubble keeps its outline, all the way round its pointer) */
.jr-dialog :is(.jr-link, .jr-office) { border: 0; border-radius: 16px; background: #fff; box-shadow: var(--card-shadow); }
.jr-dialog a.jr-link:hover, .jr-dialog a.jr-office:hover { box-shadow: var(--card-shadow-hover); }
/* the home page's Ask box: white, typing or not, on a grey shadow (no ring) */
.land-hero .land-search, .land-hero .land-search:focus-within { background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.land-hero .land-search input:focus-visible { outline: none; }
/* the home page's cards: black text */
/* the home page's cards and the Games cards: black text */
.land-card h2, .land-card h3, .land-card p, .gm-card h2, .gm-card h3, .gm-card p { color: #111; }
.land-card p, .gm-card p { color: #444; }
/* fact-check notes: scrolling to their end doesn't scroll the page behind (which would close them) */
.fc-pop { overscroll-behavior: contain; }
/* the Road Trip's buttons: white, not grey (on the map they sit on a soft shadow; in a stop's white card, a thin grey outline) */
#panel-journey, .jr-dialog { --btn-tint: #fff; --btn-tint-hover: #ececef; }
#panel-journey :is(.jr-title, .jr-pill:not(.is-red), .jr-stops-btn, .jr-stops-cur) { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.jr-dialog :is(.jr-btn:not(.is-go), .jr-x) { box-shadow: inset 0 0 0 1.5px #d4d4d8; }

/* =====================================================================================
 * Genetics: the tree (desktop) and the outline (phones), in black and white. The bodies
 * float (white cards with a soft shadow, no outline); seats, groups and the level headers
 * are flat grey tiles with black text; the offices are small hairline tags; the tree's
 * lines are thin and grey. The party rings on the photos and the lit seat stay.
 * ===================================================================================== */
.gen-chart, .gen-outline {
  --gt-tile: #f1f1f3;
  --gt-tile-hover: #e2e2e6;
  --gt-head: #e4e4e7;
  --gt-line: #b4b4bb;
  --gt-hair: #e3e3e7;
  --gt-muted: #6b6b72;
}
.gen-chart .gen-root, .gen-o-voters { background: #111; color: #fff; border-radius: 16px; }
.gen-chart .gen-root:hover { background: #333; }
.gen-chart .gen-level-head { padding: 6px 14px; border: 0; border-radius: 14px; background: var(--gt-head); color: #111; }
.gen-chart .gen-body { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow, 0 2px 4px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .10)); }
.gen-chart .gen-body-head { border: 0; border-radius: 20px 20px 0 0; background: none; padding: 14px 12px 2px; color: #111; }
.gen-chart .gen-tier.is-below { border-top: 1px solid var(--gt-hair); margin-inline: 14px; padding-inline: 0; }
.gen-chart .gen-tier.is-offices { border-top: 1px solid var(--gt-hair); background: none; border-radius: 0 0 20px 20px; margin-inline: 14px; padding-inline: 0; }
.gen-chart .gen-band, .gen-o-tier .gen-band { color: var(--gt-muted); }
.gen-chart .gen-seat, .gen-chart .gen-seat.is-group { border: 0; border-radius: 14px; background: var(--gt-tile); color: #111; }
.gen-chart .gen-seat:hover, .gen-chart .gen-seat.is-group:hover { background: var(--gt-tile-hover); border-color: transparent; }
.gen-chart .gen-seat.is-extra { border: 1px solid var(--gt-hair); border-radius: 8px; background: #fff; color: #333; }
.gen-chart .gen-seat.is-extra:hover { border-color: #111; background: #fff; }
.gen-group-count { color: var(--gt-muted); }
.gen-fold { border: 0; border-radius: 999px; background: var(--gt-tile); color: #111; }
.gen-fold:hover { background: var(--gt-tile-hover); }
.gen-tree line { stroke: var(--gt-line); stroke-width: 2; stroke-linecap: round; }
/* the seat whose card is open: a black ring (and its box's title underlined) */
.gen-chart .gen-seat.is-lit, .gen-outline .gen-seat.is-lit { box-shadow: 0 0 0 2.5px #111; background: #fff; }
.gen-chart .gen-body.is-lit > .gen-body-head { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gen-chart .gen-root.is-lit { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #111; }
.gen-seat:focus-visible { outline: 3px solid #111; }
/* phones: the outline */
.gen-o-level > summary { border: 0; border-radius: 16px; background: #fff; box-shadow: var(--card-shadow, 0 2px 4px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .10)); }
.gen-o-kids { border-left: 2px solid var(--gt-line); }
.gen-o-body > summary { border: 0; border-radius: 12px; background: var(--gt-head); color: #111; }
.gen-o-tier + .gen-o-tier, .gen-o-tier.is-offices { border-top: 1px solid var(--gt-hair); }
.gen-outline .gen-seat.is-row, .gen-o-tier.is-lead .gen-seat.is-row { border: 0; border-radius: 14px; background: var(--gt-tile); color: #111; }
.gen-outline .gen-seat.is-row:hover { background: var(--gt-tile-hover); }
.gen-outline .gen-seat.is-extra { border: 1px solid var(--gt-hair); background: #fff; }
.gen-chart { padding: 0 24px 30px; box-sizing: border-box; }   /* (room for the cards' shadows inside the stage) */