/* Council profile pages (/councils/<slug>). Tokens only; components from pc-components.css. */

body.cn-page { background: var(--pc-bg); color: var(--pc-text-body); }
.cn-page .pc-standfirst { margin-bottom: 32px; }

.cn-muted { color: var(--pc-text-muted); font-size: 12px; }
.cn-note { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin: 6px 0 16px; }

/* seat segments for pale parties */
.pc-seatbar .pc-seat-seg.is-light { color: var(--pc-on-party-light); }  /* dark ink in both themes */

/* ward map */
.cn-map-wrap { position: relative; max-width: 640px; margin: 16px 0 8px; }
.cn-map { width: 100%; height: auto; display: block; }
.cn-map path { stroke: var(--pc-bg); stroke-width: 0.8; cursor: pointer; }
.cn-map .cn-split-bg { fill: var(--pc-bg); }
.cn-map .cn-split-line { stroke: var(--pc-text-muted); stroke-width: 1.5; }
.cn-map path:hover, .cn-map path.is-active { stroke: var(--pc-text); stroke-width: 1.6; }
.cn-tip { pointer-events: none; }

/* ward table */
.cn-wards td { vertical-align: top; }
.pc-table.cn-wards tbody td:not(:first-child),
.pc-table.cn-wards thead th:not(:first-child) { text-align: left; }
.cn-wards a { color: var(--pc-text); text-decoration: underline; text-underline-offset: 2px; }
.cn-wards tr.is-active td { background: var(--pc-hover-bg); }
.cn-cllr { display: block; white-space: nowrap; }
.cn-cllr .pc-swatch, .cn-wards .pc-swatch, .cn-cand .pc-swatch { margin-right: 6px; }

/* ward result details */
.cn-details { margin-top: 24px; }
.cn-ward { scroll-margin-top: 80px; }
.cn-result-title { font-family: var(--pc-sans); font-size: 14px; font-weight: 600; margin: 12px 0 6px; color: var(--pc-text); }
.pc-table.cn-cand tbody td:nth-child(2),
.pc-table.cn-cand thead th:nth-child(2) { text-align: left; }

@media (max-width: 768px) {
    .cn-cllr { white-space: normal; }
    .cn-wards { font-size: 13px; }
}

/* postcode lookup */
.cn-postcode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; font-family: var(--pc-sans); font-size: 14px; }
.cn-postcode label { font-weight: 600; color: var(--pc-text); }
.cn-postcode input { width: 120px; padding: 7px 10px; font: inherit; text-transform: uppercase; color: var(--pc-text); background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: 2px; }
.cn-postcode-msg { flex-basis: 100%; font-size: 13px; color: var(--pc-text-secondary); }
.cn-postcode-msg:empty { display: none; }
.cn-postcode-msg a { color: var(--pc-text); text-decoration: underline; text-underline-offset: 2px; }

/* vote share bars */
.cn-bars { margin: 8px 0 12px; }
.cn-bar-row { display: grid; grid-template-columns: 96px 1fr 48px; gap: 8px; align-items: center; font-family: var(--pc-sans); font-size: 13px; margin: 3px 0; }
.cn-bar-party { color: var(--pc-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-bar-track { height: 12px; background: var(--pc-tint); }
.cn-bar-fill { display: block; height: 100%; background: var(--party-color); }
.cn-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--pc-text); }

/* ward drawer */
.cn-drawer .cn-cllr { white-space: normal; font-family: var(--pc-sans); font-size: 14px; margin: 3px 0; }
.cn-drawer .pc-table { font-size: 13px; }
.cn-drawer .cn-result-title { margin-top: 0; }
.cn-map path.is-selected { stroke: var(--pc-text); stroke-width: 2.2; }
.cn-wards tr.is-selected td { background: var(--pc-hover-bg); }

.cn-crumbs { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-muted); margin-bottom: 12px; }
.cn-crumbs a { color: var(--pc-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.pc-seatbar .pc-seat-seg.is-dark { color: var(--pc-on-party-dark); }

/* seat changes since the last election */
.cn-changes { font-family: var(--pc-sans); font-size: 14px; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.cn-changes-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pc-text-meta); flex-basis: 100%; }
.cn-change { font-weight: 600; font-variant-numeric: tabular-nums; }
.cn-change.is-pos { color: var(--pc-positive); }
.cn-change.is-neg { color: var(--pc-negative); }

/* summary paragraph */
.cn-summary { font-family: var(--pc-serif); font-size: 17px; line-height: 1.6; color: var(--pc-text-body); margin: 0 0 24px; max-width: 720px; }

/* by-elections + constituencies tables: text columns left */
.pc-table.cn-byes tbody td:nth-child(2), .pc-table.cn-byes thead th:nth-child(2),
.pc-table.cn-byes tbody td:nth-child(3), .pc-table.cn-byes thead th:nth-child(3),
.pc-table.cn-seats tbody td:nth-child(3), .pc-table.cn-seats thead th:nth-child(3),
.pc-table.cn-seats tbody td:nth-child(4), .pc-table.cn-seats thead th:nth-child(4) { text-align: left; }
.cn-byes .pc-swatch, .cn-seats .pc-swatch { margin-right: 6px; }
.cn-seats a { color: var(--pc-text); text-decoration: underline; text-underline-offset: 2px; }

/* demographics tiles */
.pc-stat-grid.cn-demo { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .pc-stat-grid.cn-demo { grid-template-columns: repeat(2, 1fr); } }

/* similar councils */
.cn-similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cn-similar-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--pc-border); background: var(--pc-surface); text-decoration: none; font-family: var(--pc-sans); }
.cn-similar-card:hover { border-color: var(--pc-text); }
.cn-similar-name { font-weight: 600; color: var(--pc-text); }
.cn-similar-card, .cn-similar-card * { text-decoration: none; }

/* ---------- wide grid layout (23 Sep) ---------- */
.cn-page .pc-wrap--wide.cn-wide { max-width: 1480px; padding-top: 24px; }
.cn-wide .pc-masthead { margin-bottom: 8px; }
.cn-wide .cn-summary { max-width: 900px; }
.cn-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; font-family: var(--pc-sans); font-size: 13px; }
.cn-jump a { padding: 6px 12px; border: 1px solid var(--pc-border); background: var(--pc-surface); color: var(--pc-text); text-decoration: none; font-weight: 600; }
.cn-jump a:hover { border-color: var(--pc-text); }

.cn-row { display: grid; gap: 20px; margin-bottom: 20px; align-items: start; }
.cn-row--hero { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cn-row--wards { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.cn-row--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cn-card { border: 1px solid var(--pc-border); background: var(--pc-surface); padding: 18px 20px; margin-bottom: 20px; min-width: 0; }
.cn-row > .cn-card { margin-bottom: 0; }
.cn-card .pc-section-title { margin-top: 2px; }
.cn-card .pc-seatbar-wrap { border: 0; padding: 0; background: none; }
section.cn-card { scroll-margin-top: 80px; }

/* key facts */
.cn-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-content: start; }
.cn-fact-lbl { font-family: var(--pc-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pc-text-meta); }
.cn-fact-val { font-family: var(--pc-sans); font-size: 20px; font-weight: 700; color: var(--pc-text); font-variant-numeric: tabular-nums; line-height: 1.25; }
.cn-fact-sub { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-muted); }

/* ward map + list */
.cn-row--wards .cn-map-wrap { max-width: none; }
.cn-wardlist { display: flex; flex-direction: column; }
.cn-wardlist-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cn-ward-filter { width: 220px; }
.cn-scroll { flex: 1; min-height: 320px; max-height: 720px; overflow-y: auto; border-top: 1px solid var(--pc-border-light); }
.cn-scroll thead th { position: sticky; top: 0; background: var(--pc-surface); z-index: 1; }
.cn-wards td .cn-muted .pc-swatch { margin-right: 2px; }
.cn-scrollcard .pc-table-wrap { max-height: 480px; overflow-y: auto; }
.cn-scrollcard thead th { position: sticky; top: 0; background: var(--pc-surface); }

/* people tiles: denser grid on the wide layout */
.cn-wide .pc-stat-grid.cn-demo { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1000px) {
    .cn-row--hero, .cn-row--wards, .cn-row--two { grid-template-columns: 1fr; }
    .cn-wide .pc-stat-grid.cn-demo { grid-template-columns: repeat(3, 1fr); }
    .cn-scroll { max-height: 520px; }
}
@media (max-width: 600px) {
    .cn-card { padding: 14px 12px; }
    .cn-facts { grid-template-columns: 1fr 1fr; }
    .cn-wide .pc-stat-grid.cn-demo { grid-template-columns: repeat(2, 1fr); }
    .cn-ward-filter { width: 100%; }
    .cn-jump { gap: 6px; }
    .cn-jump a { padding: 5px 9px; }
}

/* ---------- key facts, people rows, similar mini maps (23 Sep, round 2) ---------- */
.cn-facts { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.cn-fact { padding: 14px 18px; border-bottom: 1px solid var(--pc-border-light); }
.cn-fact:nth-child(odd) { border-right: 1px solid var(--pc-border-light); }
.cn-fact-val { font-size: 19px; }
.cn-fact-val a { color: var(--pc-text); text-decoration: underline; text-decoration-color: var(--pc-border); text-underline-offset: 3px; }
.cn-fact-val a:hover { text-decoration-color: var(--pc-text); }
.cn-fact-sub { font-size: 12.5px; color: var(--pc-text-secondary); line-height: 1.4; margin-top: 2px; }

.cn-demo-pop { font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-secondary); margin: 0 0 14px; }
.cn-demo-pop b { color: var(--pc-text); font-variant-numeric: tabular-nums; }
.cn-demo-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.cn-demo-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "lbl val" "bar bar"; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--pc-border-light); font-family: var(--pc-sans); }
.cn-demo-lbl { grid-area: lbl; font-size: 13.5px; color: var(--pc-text-body); }
.cn-demo-val { grid-area: val; text-align: right; font-size: 12px; color: var(--pc-text-meta); font-variant-numeric: tabular-nums; }
.cn-demo-val b { font-size: 15px; color: var(--pc-text); margin-right: 4px; }
.cn-demo-bar { grid-area: bar; position: relative; height: 8px; background: var(--pc-tint); }
.cn-demo-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pc-text-secondary); opacity: 0.55; }
.cn-demo-gb { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--pc-accent); }
.cn-demo-key { display: inline-block; width: 2px; height: 11px; background: var(--pc-accent); vertical-align: -1px; margin-right: 4px; }

.cn-similar { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cn-similar-card { align-items: flex-start; }
.cn-mini { width: 100%; height: 96px; margin-bottom: 6px; }
.cn-mini path { stroke: var(--pc-surface); stroke-width: 0.4; }

@media (max-width: 1000px) { .cn-demo-rows { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .cn-fact { padding: 12px; }
    .cn-fact-val { font-size: 17px; }
    .cn-demo-row { grid-template-columns: minmax(0, 1fr) 120px; }
    .cn-similar { grid-template-columns: 1fr 1fr; }
}
.cn-page .cn-wide a.cn-similar-card { text-decoration: none; }
.cn-page .cn-wide a.cn-similar-card:hover .cn-similar-name { text-decoration: underline; text-underline-offset: 3px; }
.cn-demo-gb { width: 3px; margin-left: -1.5px; top: -4px; bottom: -4px; }

/* ---------- vote share, margin map, party changes, seats up (23 Sep, round 3) ---------- */
.cn-vs { margin-top: 18px; font-family: var(--pc-sans); }
.cn-vs-head, .cn-vs-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 54px 70px; gap: 10px; align-items: center; }
.cn-vs-head { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pc-text-meta); margin: 8px 0 2px; }
.cn-vs-head span:nth-child(n+3), .cn-vs-pct, .cn-vs-seats { text-align: right; font-variant-numeric: tabular-nums; }
.cn-vs-row { padding: 3px 0; font-size: 13px; color: var(--pc-text-body); }
.cn-vs-track { height: 10px; background: var(--pc-tint); }
.cn-vs-fill { display: block; height: 100%; background: var(--party-color); }
.cn-vs-pct { font-weight: 700; color: var(--pc-text); }
.cn-map-mode { margin: 4px 0 10px; }
.cn-mband { --party-color: var(--pc-text-secondary); }
.cn-up-tally { margin: 0 0 10px; }
.pc-table.cn-switches th, .pc-table.cn-switches td, .pc-table.cn-up th, .pc-table.cn-up td { text-align: left; }
@media (max-width: 600px) {
    .cn-vs-head, .cn-vs-row { grid-template-columns: 84px minmax(0, 1fr) 48px 44px; gap: 6px; }
    .cn-vs-head span:last-child { font-size: 0; }
    .cn-vs-head span:last-child::after { content: 'Seats'; font-size: 10px; }
}
.cn-seatrow { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; margin-top: 5px; }
.cn-seatsqs { display: flex; flex-wrap: wrap; gap: 3px; }
.cn-seatrow-lbl { width: 34px; font-size: 11px; color: var(--pc-text-meta); }
.cn-seatsq { width: 12px; height: 12px; background: var(--party-color); }