/* Genetics (genetics.html, js/genetics.js). Loaded after css/style.css. */

body.genetics-page { background: #f6f6f8; }
.gen-main { width: min(100% - 32px, 1500px); margin: 18px auto 48px; }
.gen-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.gen-head .page-heading { margin: 0; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-chip { padding: 5px 13px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.gen-chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.gen-chip:focus-visible { outline: 3px solid #0022ff; outline-offset: 2px; }
.gen-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gen-head .gen-checks { margin-left: auto; }
.gen-view { display: flex; }
.gen-view .seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.gen-key { margin: 6px 0 14px; color: var(--muted); font-size: 13px; }
.gen-empty { padding: 40px 0; text-align: center; color: var(--muted); }


/* A seat: circle above its label; every seat the same size, whatever its power. */
.gen-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 124px; padding: 10px 6px;
  border-radius: 14px; color: var(--ink); text-decoration: none; text-align: center; }
.gen-seat:hover { background: #f0f0f3; }
.gen-seat:focus-visible { outline: 3px solid #0022ff; outline-offset: 1px; }
/* People hidden: just the position's name, in a box that grows with its power. */
.gen-seat.is-name-only { justify-content: center; width: auto; min-width: 84px; max-width: 220px; margin: 3px; padding: 12px 8px; border: 1.5px solid var(--line); background: #fff; }
.gen-seat.is-name-only:hover { border-color: var(--ink); background: #fff; }
.gen-seat.is-name-only .gen-seat-label { font-size: 14px; }
.gen-seat.is-row.is-name-only { max-width: none; padding: 10px 14px; }
.gen-seat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gen-seat-label { font-size: 14px; line-height: 1.2; }
.gen-seat-who { font-size: 12px; color: #444; line-height: 1.25; }
.gen-seat-run, .gen-seat-note { font-size: 11px; font-weight: 700; color: var(--muted); }

/* ---------- chart ---------- */

.gen-chart { display: flex; flex-direction: column; align-items: center; }
.gen-root { position: relative; padding: 10px 26px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: 17px; }
.gen-levels { position: relative; width: 100%; display: grid; gap: 34px; margin-top: 6px; align-items: start; }
.gen-level { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.gen-level-head { position: relative; margin: 0; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; text-align: center; font-size: 16px; }
/* Bodies stack by rank, each hanging from the one above. */
.gen-body { position: relative; margin-top: 22px; border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; }
.gen-body-head { margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #f0f0f3; text-align: center; font-size: 14px; }
.gen-tier { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2px; padding: 6px; }
.gen-tier.is-below { border-top: 1px dashed var(--line); }

/* ---------- outline (phones) ---------- */

.gen-outline { display: grid; gap: 12px; }
.gen-outline summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.gen-outline summary::-webkit-details-marker { display: none; }
.gen-caret { display: inline-block; width: 12px; transition: transform .15s; }
details[open] > summary .gen-caret { transform: rotate(90deg); }
.gen-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.gen-o-level > summary { padding: 12px 14px; border: 2px solid var(--ink); border-top-width: 6px; border-radius: 14px; background: #fff; font-weight: 800; font-size: 17px; }
.gen-o-kids { margin-left: 16px; padding-left: 14px; border-left: 2px solid var(--ink); }
.gen-o-body > summary { margin-top: 10px; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 12px; background: #f0f0f3; font-weight: 800; font-size: 15px; }
.gen-o-tier { display: grid; gap: 6px; margin-top: 8px; }
.gen-o-tier + .gen-o-tier { padding-top: 8px; border-top: 1px dashed var(--line); }
.gen-seat.is-row { flex-direction: row; width: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-align: left; }
.gen-o-tier.is-lead .gen-seat.is-row { border: 1.5px solid var(--ink); }
.gen-seat.is-row .gen-seat-text { flex: 1; }

@media (max-width: 700px) {
  .gen-main { margin-top: 12px; }
  .gen-controls { width: 100%; }
  .gen-head .gen-checks { margin-left: 0; }
}

/* ---------- the chart ---------- */
.gen-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 10px 0 12px; }
.gen-chart { position: relative; }
/* The seat whose card is open. */
.gen-seat.is-lit { box-shadow: 0 0 0 3px #ffe48a; border-color: #e5c64a; }
.gen-body.is-lit > .gen-body-head { background: #fff6d6; }
.gen-root { border: 0; font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; }
.gen-root.is-lit { box-shadow: 0 0 0 4px #ffe48a; }
/* Room above the voters for its glow (the stage clips what's outside it). */
.gen-chart > .gen-root { margin-top: 6px; }
.gen-seat, .gen-body { transition: opacity .12s; }

/* Offices off the roster: grey, dashed. */
.gen-tier.is-offices { border-top: 1.5px dashed #c9c9d1; background: #fafafb; border-radius: 0 0 14px 14px; }
.gen-o-tier.is-offices { padding-top: 8px; border-top: 1.5px dashed #c9c9d1; }
.gen-seat.is-extra { border-style: dashed; color: #555; }
.gen-seat.is-extra .gen-seat-label { font-size: 12.5px; font-weight: 700; }

/* ---------- the panel: a pop-up card ---------- */

/* The card holds still; its body scrolls inside the border (kept clear of the
   rounded corners), so the × stays in view. */
.gen-panel { position: fixed; top: 84px; right: 20px; z-index: 1600; width: min(580px, calc(100vw - 40px)); max-height: calc(100vh - 104px);
  display: flex; flex-direction: column; overflow: hidden; padding: 0; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); outline: 0;
  animation: gen-pop .18s ease-out; }
@keyframes gen-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.gen-panel[hidden] { display: none; }
#genPanelBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 12px 6px 12px 0; padding: 6px 14px 12px 20px; }
/* Scrolled, the text fades out under the × instead of running behind it. */
#genPanelBody.is-scrolled { -webkit-mask-image: linear-gradient(transparent 0, #000 44px); mask-image: linear-gradient(transparent 0, #000 44px); }
.gen-panel-close { position: absolute; z-index: 2; top: 12px; right: 22px; background: #fff; width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; --glyph: 14px; }
.gen-panel-close:hover { background: #f0f0f3; }
.gen-p-top { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.gen-p-top h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.gen-p-title { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.gen-p-title:hover { text-decoration-color: var(--ink); }
.gen-p-crumb { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.gen-p-who { margin: 4px 0 0; font-weight: 700; font-size: 14px; }
.gen-p-go { display: inline-block; margin-top: 22px; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; }

/* ---------- money ---------- */

.gen-money { padding: 4px 0 24px; --m-mid: #8c2981; --m-pale: #f1f1f3; --m-panel: #f6f3fa; }
.gen-money-key { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
/* the governments shown: chips with ×, and ＋ for more (like the Compare box) */
.gen-money-govs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 10px; }
.gen-gov-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-size: 14px; min-height: 32px; box-sizing: border-box; }
.gen-gov-chip:not(:has(.chip-x)) { padding-right: 14px; }
.gen-gov-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 260px; max-height: 360px; overflow: auto; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.gen-gov-menu-head { margin: 6px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gen-gov-menu-item { display: flex; justify-content: space-between; gap: 14px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.gen-gov-menu-item:hover, .gen-gov-menu-item:focus-visible { background: var(--m-panel); outline: none; }
.gen-gov-menu-item span { color: var(--muted); font-weight: 700; }

/* Frame: a rounded square of tiles per government, its name and total inside, the picked tile
   lifted, its panel at the side (squishy, a little retro: near-black ink on cream) */
.gen-money { --m-ink: #231f20; --m-cream: #e7e1d6; }
.gen-frame-wrap { display: flex; align-items: flex-start; justify-content: center; gap: 24px; }
.gen-frame-wrap:not(.is-narrow) { justify-content: space-between; }
.gen-frame-wrap:not(.is-narrow) .gen-frame-side { overflow-y: auto; overscroll-behavior: contain; }   /* (docked at the right, its height set to the window's: js/genetics.js drawFrames) */
.gen-frame-wrap.is-narrow { flex-direction: column; align-items: stretch; }
.gen-frames { flex: 1 1 auto; display: grid; justify-content: center; align-content: start; }   /* (its columns and gaps: js/genetics.js drawFrames) */
.gen-frame-fig { margin: 0; flex: none; max-width: 100%; text-align: center; }   /* (sized to the window: js/genetics.js drawFrames) */
.gen-frame { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.gen-tile { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: filter .12s, transform .15s ease; }
.gen-tile:hover { transform: scale(var(--gx, 1.02), var(--gy, 1.02)); }   /* (a few px bigger each way) */

.gen-tile:not(.is-on):hover { filter: brightness(1.07) saturate(1.05); }
.gen-tile:focus { outline: none; }
.gen-tile:focus-visible { stroke: var(--m-ink); }
.gen-tile-label { font-weight: 800; pointer-events: none; }
.gen-tile-amt { font-weight: 600; opacity: .85; }
.gen-frame-name { font-weight: 800; letter-spacing: .1em; fill: #6b6b72; }
.gen-frame-sum { font-weight: 900; fill: var(--m-ink); }
.gen-frame-side { flex: 0 0 360px; box-sizing: border-box; padding: 22px 24px; border-radius: 28px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .10); }
.gen-frame-wrap.is-narrow .gen-frame-side { flex: none; }
/* what a piece is (the frame's side panel, and the pop-up from the receipt and every $100) */
.gen-frame-kicker { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b6b72; }
.gen-frame-amt { margin: 4px 0 2px; font-size: 36px; font-weight: 900; line-height: 1.1; color: var(--m-ink); }
.gen-frame-share { margin: 0 0 12px; font-size: 15px; color: #6b6b72; }
.gen-frame-bar { height: 12px; border-radius: 6px; background: #efe9df; margin-bottom: 12px; }
.gen-frame-bar i { display: block; height: 12px; border-radius: 6px; background: var(--m-mid); }
.gen-frame-note, .gen-frame-by { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.gen-frame-by { color: #6b6b72; font-size: 13px; }
.gen-money .gen-p-go, .gen-piece-pop .gen-p-go { margin-top: 16px; padding: 10px 16px; border-radius: 16px; background: var(--m-ink, #231f20); color: #fff6ea; font: inherit; font-weight: 800; font-size: 14px; border: 0; cursor: pointer; }
.gen-piece-list { display: grid; gap: 2px; margin-top: 6px; max-height: 260px; overflow: auto; }
.gen-piece-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 0; border-radius: 10px; background: #f5f1ea; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.gen-piece-item:hover, .gen-piece-item:focus-visible { background: #ebe3d6; outline: none; }
.gen-piece-back { margin: 0 0 10px; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .06); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.gen-piece-back:hover { background: rgba(0, 0, 0, .12); }
.gen-piece-pop { padding: 4px 2px 6px; }
.gen-piece-pop.is-in-card { margin: 12px 0 4px; padding: 14px 16px; border-radius: 20px; background: #f7f3ec; }
.gen-piece-pop.is-in-card .gen-piece-item { background: #fff; }
.gen-frame-src { display: inline-block; margin: 14px 0 0 12px; font-size: 13px; color: var(--muted); }

/* Receipt (sized by --fs: js/genetics.js drawReceipts fits it to the window) */
.gen-receipts { --fs: 13.5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 28px; }
.gen-receipt { width: min(430px, 100%); box-sizing: border-box; padding: calc(var(--fs) * 1.6) calc(var(--fs) * 1.7) calc(var(--fs) * 1.9); background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .12); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: var(--fs); }
.gen-receipt-name { margin: 0; text-align: center; font-size: calc(var(--fs) * 1.45); letter-spacing: .08em; }
.gen-receipt-sub { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: calc(var(--fs) * .85); }
.gen-receipt hr { border: 0; border-top: 2px dashed #c4c4ca; margin: calc(var(--fs) * .85) 0; }
.gen-receipt-line { display: flex; gap: 6px; align-items: baseline; width: 100%; margin-top: calc(var(--fs) * .45); padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; }
button.gen-receipt-line { cursor: pointer; }
button.gen-receipt-line:hover > .gen-receipt-t { text-decoration: underline; }
.gen-receipt-line i { flex: 1; border-bottom: 2px dotted #c4c4ca; }
.gen-receipt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-receipt-tw { flex: none; width: 1.1em; color: #8c2981; font-weight: 900; }
.gen-receipt-line.is-open { background: #f6f3fa; box-shadow: 0 0 0 5px #f6f3fa; }
.gen-receipt-line.is-sub { margin-top: 2px; padding-left: 2.2em; font-size: .88em; color: var(--muted); }
.gen-receipt-line.is-total { font-weight: 900; font-size: 1.18em; }
.gen-receipt-bar { height: 5px; margin: 3px 0 2px 1.6em; border-radius: 3px; background: var(--m-pale); }
.gen-receipts.is-pair { flex-wrap: nowrap; gap: 8px; }
.gen-receipts.is-pair .gen-receipt { width: 50%; flex: 1 1 0; max-width: 430px; padding-left: 9px; padding-right: 9px; }
@media (min-width: 761px) { .gen-receipts.is-pair { gap: 20px; } .gen-receipts.is-pair .gen-receipt { padding-left: 16px; padding-right: 16px; } }
.gen-receipts.is-pair .gen-receipt-t { white-space: normal; }   /* (narrow: long names wrap instead of being cut) */
.gen-receipt-bar u { display: block; height: 5px; border-radius: 3px; background: var(--m-mid); }

/* Every $100 */
.gen-hundreds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 20px; }
.gen-hundred { padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 26px rgba(0, 0, 0, .10); }
.gen-hundred-kicker { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gen-hundred-head { margin: 2px 0 14px; font-size: 26px; }
.gen-hundred-body { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: flex-start; }
.gen-hundred-grid { display: grid; grid-template-columns: repeat(10, var(--sq, 26px)); gap: 4px; }
.gen-hundred-grid i { width: var(--sq, 26px); height: var(--sq, 26px); border-radius: calc(var(--sq, 26px) / 4); cursor: pointer; transition: opacity .12s, transform .12s; }
.gen-hundred-grid.is-lit i:not(.is-on) { opacity: .2; }
.gen-hundred-grid i.is-on { transform: scale(1.08); }
.gen-hundred-item.is-on span:last-child { text-decoration: underline; }
.gen-hundred-key { display: grid; gap: 8px; flex: 1; min-width: 200px; }
.gen-hundred-item { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: inherit; text-align: left; }
button.gen-hundred-item { cursor: pointer; }
button.gen-hundred-item:hover span { text-decoration: underline; }
.gen-hundred-sw { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.gen-hundred-item b { min-width: 2.2em; }

/* narrow, with one or two shown: the cards side by side, smaller type (js/genetics.js drawHundreds) */
.gen-hundreds.is-pair { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; }
@media (min-width: 761px) { .gen-hundreds.is-pair { gap: 16px; } .gen-hundreds.is-pair .gen-hundred { padding: 16px; } .gen-hundreds.is-pair .gen-hundred-head { font-size: 19px; } .gen-hundreds.is-pair .gen-hundred-item { font-size: 13px; } }
.gen-hundreds.is-pair .gen-hundred { padding: 12px; border-radius: 16px; }
.gen-hundreds.is-pair .gen-hundred-head { font-size: 15px; margin-bottom: 8px; }
.gen-hundreds.is-pair .gen-hundred-kicker { font-size: 10px; }
.gen-hundreds.is-pair .gen-hundred-body { flex-direction: column; gap: 10px; }
.gen-hundreds.is-pair .gen-hundred-key { min-width: 0; gap: 3px; }
.gen-hundreds.is-pair .gen-hundred-item { font-size: 12px; gap: 5px; }
.gen-hundreds.is-pair .gen-hundred-sw { width: 10px; height: 10px; }
/* a phone: the Money view's controls kept short, so the chart fits under them */
@media (max-width: 700px) {
  body[data-gen-mode="money"] #genTypes .seg-btn { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
  body[data-gen-mode="money"] #genTypes { flex-wrap: nowrap; }
  .gen-money-govs { gap: 6px; margin-bottom: 6px; }
  .gen-gov-chip { min-height: 28px; padding: 2px 4px 2px 10px; gap: 5px; font-size: 13px; }
}
@media (max-width: 440px) {
  .gen-money-govs .chip-plus { width: 28px; height: 28px; }
  .gen-money-key { display: none; }
}
.gen-o-voters { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; }

@media (max-width: 700px) {
  .gen-view { display: flex; }
  .gen-key { display: none; }
  .gen-panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 72vh; border-width: 2px 0 0; border-radius: 18px 18px 0 0; }
}

/* The chart fits the window: laid out wide, then scaled (js/genetics.js fitChart). */
.gen-stage { position: relative; overflow: hidden; }
body[data-gen-mode="chart"] .gen-stage .gen-chart { transform-origin: top left; }
body[data-gen-mode="chart"] .gen-main { width: calc(100% - 32px); max-width: none; }
.gen-key { margin-bottom: 8px; }
/* Lanes between rows of seats, where the power lines run. */
.gen-tier { row-gap: 14px; column-gap: 4px; padding: 8px 12px 12px; }
.gen-seat { width: auto; min-width: 100px; max-width: 160px; padding: 6px 6px; }
/* Bodies below the top one, side by side (the countywide offices and the constables). */
.gen-body-row { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 26px; margin-top: 22px; align-items: start; }
.gen-body-row > .gen-body { margin-top: 11px; }


/* The legend: beside the hint, above the chart. */
.gen-sub .gen-key { margin: 0; }
body[data-gen-mode="money"] .gen-sub { display: none; }

/* The label over a body's "Offices and appointees" row. */
.gen-band { flex-basis: 100%; margin: 2px 0 -2px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: center; }
.gen-o-tier .gen-band { text-align: left; margin: 0; }

@media (min-width: 701px) {
  .gen-head .page-heading { font-size: 36px; }
  .gen-controls { gap: 8px 12px; }
}

/* ---------- chart: compact seats (a small photo beside the position) ---------- */

.gen-chart .gen-seat { flex-direction: row; width: auto; min-width: 0; max-width: none; gap: 6px; padding: 3px 10px 3px 3px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; text-align: left; }
.gen-chart .gen-seat:hover { background: #f6f6f8; border-color: #bbb; }
.gen-chart .gen-seat .gen-disc { width: 30px !important; height: 30px !important;
  border-width: 1.5px; box-shadow: 0 0 0 2px var(--party-other); font-size: 9px !important; }
.gen-chart .gen-seat .gen-disc[data-party="democrat"] { box-shadow: 0 0 0 2px var(--party-democrat); }
.gen-chart .gen-seat .gen-disc[data-party="republican"] { box-shadow: 0 0 0 2px var(--party-republican); }
.gen-chart .gen-seat-who, .gen-chart .gen-seat-run, .gen-chart .gen-seat-note { display: none; }
.gen-chart .gen-seat-label { font-size: 15px; white-space: nowrap; }
.gen-chart .gen-seat.is-name-only { padding: 6px 12px; }
.gen-chart .gen-seat.is-name-only .gen-seat-label { font-size: 15px; }
.gen-chart .gen-tier { row-gap: 13px; column-gap: 8px; padding: 14px 12px 16px; }
.gen-chart .gen-body-head { padding: 9px 10px; }
.gen-chart .gen-band { margin: 0 0 2px; }
.gen-chart .gen-body-head { font-size: 15px; }
.gen-chart .gen-level-head { padding: 3px 12px; }


/* The level checkboxes (top right). */
.gen-checks { display: flex; flex-wrap: wrap; gap: 6px; }
/* The level toggle: one joined pill, like Chart | Money. */
.gen-checks.gen-view { gap: 0; flex-wrap: nowrap; }

/* The tree's connecting lines (js/genetics.js drawTree), behind everything. */
.gen-tree { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.gen-tree line { stroke: var(--ink); stroke-width: 2; stroke-linecap: square; }
.gen-chart > .gen-root, .gen-chart .gen-levels { position: relative; z-index: 1; }

/* Folded groups of repeated seats (the constables, council districts…): one tile. */
.gen-chart .gen-seat.is-group { flex-direction: row; gap: 8px; padding: 5px 14px 5px 6px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff;
  font: inherit; color: var(--ink); cursor: pointer; }
.gen-chart .gen-seat.is-group:hover { background: #f6f6f8; }
.gen-group-strip { display: flex; padding-left: 6px; }
.gen-group-strip .gen-disc { width: 22px !important; height: 22px !important; margin-left: -7px; border-width: 1.5px; font-size: 8px !important; }
.gen-chart .gen-seat.is-group .gen-seat-label { font-size: 15px; }
/* More than 50 of a kind (a legislature's seats): one tile that says how many and opens the body's card. */
.gen-o-tier .gen-seat.is-group { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.gen-seat.is-lump .gen-disc.is-plain { background: #e7e7ec; }
.gen-group-count { display: block; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--muted); }
.gen-fold { align-self: center; padding: 3px 10px; border: 1px dashed #aaa; border-radius: 999px; background: none; color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.gen-fold:hover { border-color: var(--ink); color: var(--ink); }

/* Offices and appointees: one slim line of small tags along the bottom of a box. */
.gen-chart .gen-tier.is-offices { row-gap: 4px; column-gap: 5px; padding: 6px 10px 8px; align-items: center; }
.gen-chart .gen-tier.is-offices .gen-band { flex-basis: auto; margin: 0 4px 0 0; font-size: 9.5px; }
.gen-chart .gen-seat.is-extra { padding: 2px 9px; border-radius: 6px; background: #fafafb; }
.gen-chart .gen-seat.is-extra .gen-seat-label { font-size: 12px; font-weight: 600; }