/* mayors.css - /mayors/ (private preview; built by us_site/mayors.py). Prefix my-. Tokens only. */

/* Party count row: figures, no boxes */
.my-sum { display: flex; flex-wrap: wrap; gap: 12px 48px; padding-top: 8px; }
.my-fig { display: flex; flex-direction: column; min-width: 0; }
.my-num { font-family: var(--pc-sans); font-size: 40px; font-weight: 700; line-height: 1.05; color: var(--pc-text);
    font-variant-numeric: tabular-nums; }
.my-lbl { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-meta); margin-top: 4px; }
.my-legend { margin: 14px 0 6px; }
.my-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* Map: grey states, city circles by mayor's party */
.my-map-wrap { max-width: 960px; }
.my-map { width: 100%; height: auto; display: block; }
.us-map.my-map path.us-state.my-st { fill: var(--pc-border-light); stroke: var(--pc-surface); stroke-width: 1; }
.my-map .my-c { stroke: var(--pc-surface); stroke-width: 1.2; fill-opacity: 0.9; }
.my-map .my-c:hover { stroke: var(--pc-text); stroke-width: 2; }
.my-map .my-c.is-gap { stroke: var(--pc-text-meta); stroke-dasharray: 2 2; }

/* Tables */
.my-table { font-variant-numeric: tabular-nums; }
.pc-table.my-table thead th.my-l, .pc-table.my-table tbody td.my-l { text-align: left; }
.pc-table.my-table tbody tr:last-child td { border-bottom: 2px solid var(--pc-text); }
.my-nw { white-space: nowrap; }
.my-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.my-pty { color: var(--pc-text-meta); font-size: 12px; }
.my-na { color: var(--pc-text-meta); font-style: italic; }
.my-barcell { min-width: 140px; }
.my-rbar { display: flex; height: 12px; width: 100%; min-width: 120px; background: var(--pc-border-light); }
.my-seg { display: block; height: 100%; border-right: 1px solid var(--pc-surface); }
.my-seg:last-child { border-right: 0; }
.my-method { margin-top: 16px; }
.my-gaps ul { margin: 8px 0 0; padding-left: 18px; font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-body); }

@media (max-width: 768px) {
    .my-num { font-size: 32px; }
    .my-table { font-size: 13px; }
    .my-table .my-hide { display: none; }
}