/* PollCheck US site shell (the UK header, nav and
   footer are /style.css classes; the US header markup is us_site/subnav.py, styled by subnav.css), page widths, home front page, portraits. Colours come from pc-tokens.css (page) and
   site-tokens.css (chrome); no raw hexes here. Prefix: us- (shell), us-hp- (home). */
body.ps-site { margin: 0; background: var(--pc-surface); color: var(--pc-text-body); font-family: var(--pc-sans); }

/* ============ UK chrome ============ */
/* The UK header, nav and footer come from /partials/ (js/includes.js) and are
   styled by /style.css, which loads first. The UK html { zoom: 0.8 } stays on, so
   US pages render at the same size as the UK and midterms pages. Two of its global
   rules are undone for the US body so the pages render as designed: the * margin/
   padding reset (US CSS relies on the browser defaults; zero specificity, so every
   US rule still wins) and the body line-height (kept for the UK header and footer).
   The US header is us/assets/subnav.css (shared with the midterms pages). */
body.ps-site .us-main { line-height: normal; }
:where(body.ps-site main.us-main) :where(*) { margin: revert; padding: revert; }
/* Height of the sticky UK header in CSS px (layout px under the 0.8 zoom: 102 css px
   = 81 screen px on desktop, 75 = 60 on phones; measured). Sticky panels sit under it. */
.ps-site { --us-nav-h: 102px; }
@media (max-width: 768px) { .ps-site { --us-nav-h: 75px; } }

/* PollCheck US line at the foot of <main> (data date, photo credits) */
.us-main .us-built { margin: 32px 0 0; font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-meta); }
.pc-wrap .us-built a { color: var(--pc-text-body); }

/* ============ Page widths ============ */
/* One centred container on every page (nav and footer line up with it):
   max 1200px of content plus 32px gutters, 16px on phones. Tables, charts and
   strips use the full container; prose stays at a 680px reading measure.
   Narrow pages (privacy, 404, credits) keep the same container and left edge
   with the whole body at the prose measure. */
.ps-site { --us-page-max: calc(1200px + 2 * var(--us-gutter)); }
.us-main { min-height: 60vh; }
.us-main.us-main--wide, .us-main.us-main--narrow {
    max-width: var(--us-page-max); margin: 0 auto; padding: 40px var(--us-gutter) 64px;
}
.us-main .us-masthead { max-width: none; }

/* ============ Masthead ============ */
/* One masthead on every page (UK scottish-polls order): breadcrumb, kicker,
   3px rule, headline, subtitle, then any page extras. Pages write the rule
   before or after the kicker; the order and spacing are fixed here so every
   masthead lines up the same. The date goes right of the headline in
   .pc-masthead-meta / .pc-data-through (.us-masthead-row). */
.us-main .us-masthead:not(.pc-masthead) { display: flex; flex-direction: column; align-items: stretch; }
.us-main .us-masthead:not(.pc-masthead) > * { order: 3; }
.us-main .us-masthead:not(.pc-masthead) > .us-crumb { order: 0; margin: 0 0 8px; }
.us-main .us-masthead:not(.pc-masthead) > .pc-kicker { order: 1; margin: 0 0 8px; }
.us-main .us-masthead:not(.pc-masthead) > .pc-masthead-rule { order: 2; width: 100%; margin: 0 0 16px; }
.us-main .us-masthead > .pc-masthead-headline { margin: 0 0 6px; }
.us-masthead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 24px; }
.us-masthead-row .pc-masthead-headline { margin: 0 0 6px; min-width: 0; }
.us-masthead-row .pc-masthead-meta { flex: 0 0 auto; padding-bottom: 10px; }
@media (max-width: 768px) {
    .us-masthead-row { flex-direction: column; align-items: flex-start; }
    .us-masthead-row .pc-masthead-meta { align-items: flex-start; padding-bottom: 6px; }
}

/* Tap targets: 40px minimum on every button and pill sitewide (pc-btn, pc-pill,
   pc-mode-btn, the "Show all" buttons are pc-btn); same font, padding and width
   logic, only the height grows. pc-btn-primary drops its fixed 30px height. */
body.ps-site .pc-btn, body.ps-site .pc-mode-btn, body.ps-site .pc-pill { min-height: 40px; box-sizing: border-box; }
body.ps-site .pc-btn { display: inline-flex; align-items: center; justify-content: center; }
body.ps-site .pc-btn-primary { height: auto; }
body.ps-site .pc-pill { justify-content: center; }

/* Change figures: one convention on every page. The figure is ink, 12px/600,
   tabular; a small triangle before it carries the direction in green / red
   (pc-change.is-pos / .is-neg; the triangle is the first character, coloured
   through ::first-letter so the markup stays "▲0.8"). No change: meta grey.
   The approval strip's .ap-chg carries no direction class, so its figure is ink
   with an ink triangle until approval.py emits pc-change (see report). */
body.ps-site .pc-change {
    display: inline-block; font-family: var(--pc-sans); font-size: 12px; font-weight: 600;
    color: var(--pc-text); font-variant-numeric: tabular-nums; line-height: 1.2;
}
body.ps-site .pc-change.is-pos::first-letter { color: var(--pc-positive); }
body.ps-site .pc-change.is-neg::first-letter { color: var(--pc-negative); }
body.ps-site .pc-change.is-nc { color: var(--pc-text-meta); font-weight: 500; }
body.ps-site .us-hp-chg, body.ps-site .ap-chg {
    font-family: var(--pc-sans); font-size: 12px; font-weight: 400; color: var(--pc-text-meta);
    line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums;
}
body.ps-site .us-hp-chg b, body.ps-site .ap-chg b,
body.ps-site .ap-chg.is-approve b, body.ps-site .ap-chg.is-disapprove b, body.ps-site .ap-chg.is-net b { font-weight: 600; color: var(--pc-text); }

/* 40px hit areas on small links and disclosure summaries; the
   extra padding is cancelled by a negative margin so the layout keeps its spacing */
.pc-wrap .pc-cta-link { padding: 12px 0; margin: -8px 0; }
.pc-disclosure > summary { display: block; line-height: 18px; padding: 11px 0; margin: -11px 0; }
.pc-disclosure[open] > summary { margin-bottom: 0; padding-bottom: 0; }
.us-main .pc-masthead-subtitle,
.us-main .pc-help,
.us-main .us-prose,
.us-main p.pc-standfirst,
.us-main .pc-disclosure-body { max-width: 680px; }
.us-main--narrow > * { max-width: 680px; }
@media (max-width: 768px) {
    .ps-site { --us-gutter: 16px; }
    .us-main.us-main--wide, .us-main.us-main--narrow { padding-top: 28px; padding-bottom: 48px; }
}

/* Method and caveats: one closed disclosure block at the page foot */
.us-foot-notes { margin-top: 48px; }

/* Sources and credits (write_page credits=): small grey lines at the foot of
   <main>; a closed "Sources" disclosure when there are more than two */
.us-main .us-sources-foot { margin-top: 40px; }
.us-main .us-sources-foot p { margin: 0 0 4px; max-width: 680px; }
.us-main .us-sources-foot .pc-disclosure { margin-top: 0; }
.us-main .us-sources-foot .pc-disclosure > summary { font-size: 12px; color: var(--pc-text-secondary); }
.us-main .us-sources-foot .pc-disclosure p:first-of-type { margin-top: 6px; }
.pc-wrap .us-sources-foot a { color: var(--pc-text-body); }   /* links read as body links (UK), not the muted line colour */

/* ============ Portraits ============ */
/* Round, face-top crop (images stored at 192px for 3x screens). Without a
   usable photo: a neutral silhouette (no party colour). */
.us-pt {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    box-sizing: border-box; border-radius: 50%; overflow: hidden; vertical-align: middle;
}
img.us-pt { object-fit: cover; object-position: center top; background: var(--pc-border-light); }
.us-pt--none { align-items: flex-end; background: var(--pc-border-light); box-shadow: inset 0 0 0 1px var(--pc-border); }
.us-pt--none svg { width: 100%; height: 100%; display: block; fill: var(--pc-text-meta); opacity: 0.55; }

/* ============ Home (UK homepage pattern, prefix us-hp-) ============ */
.us-hp { margin: 0; }
.us-hp-kicker-rule { border-top: 3px solid var(--pc-text); padding-top: 8px; margin-top: 40px; }
.us-hp-kicker-rule:first-of-type { margin-top: 0; }
.us-hp-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.us-hp-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pc-text); }
.us-hp-kicker .sub { color: var(--pc-text-meta); margin-left: 10px; }
.pc-wrap a.us-hp-section-link { font-size: 13px; font-weight: 500; color: var(--pc-text-body); text-decoration: none; white-space: nowrap; }
.pc-wrap a.us-hp-section-link:hover { color: var(--pc-text); text-decoration: underline; }

/* Number strip: the approval split bar (same look as the approval page's
   .ap-bar, copied under us-hp-bar) beside the two primary leaders. Changes
   read "▲0.8 in 30 days": a pc-change figure (ink, coloured triangle) and a meta tail. */
.us-hp-strip {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 32px; align-items: center;
    border-top: 2px solid var(--pc-text); border-bottom: 1px solid var(--pc-border);
    padding: 14px 0 12px; margin: 0 0 8px;
}
.us-hp-bar-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; margin-bottom: 10px; }
.us-hp-bar-num { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-family: var(--pc-sans); }
.us-hp-bar-num.is-net { align-items: center; text-align: center; }
.us-hp-bar-num.is-disapprove { align-items: flex-end; text-align: right; }
.us-hp-bar-lbl { font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); line-height: 1.2; }
.us-hp-bar-num.is-approve .us-hp-bar-lbl { color: var(--pc-positive); }
.us-hp-bar-num.is-disapprove .us-hp-bar-lbl { color: var(--pc-negative); }
.us-hp-bar-val { font-size: 30px; font-weight: 700; color: var(--pc-text); line-height: 1; font-variant-numeric: tabular-nums; }
.us-hp-bar-num.is-net .us-hp-bar-val { font-size: 20px; }
.us-hp-bar { position: relative; display: flex; height: 24px; background: var(--pc-border-light); }
.us-hp-bar-seg { display: block; height: 100%; }
.us-hp-bar-seg.is-approve { background: var(--pc-positive); }
.us-hp-bar-seg.is-neither { background: var(--pc-border); }
.us-hp-bar-seg.is-disapprove { background: var(--pc-negative); }
.us-hp-bar-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--pc-text); }
.us-hp-bar-scale { display: flex; justify-content: space-between; font-family: var(--pc-sans); font-size: 10px; color: var(--pc-text-meta); margin-top: 5px; font-variant-numeric: tabular-nums; }


.us-hp-leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; align-content: center; }
.us-hp-leaders-h { grid-column: 1 / -1; margin: 0; padding: 0 0 8px 16px; border-left: 1px solid var(--pc-border); font-family: var(--pc-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pc-text-meta); line-height: 1.2; }
.us-hp-cell { min-width: 0; padding: 4px 0 4px 16px; border-left: 1px solid var(--pc-border); display: flex; align-items: center; gap: 10px; }
.us-hp-cell-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.us-hp-name { font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-hp-val { font-size: 26px; font-weight: 700; color: var(--pc-text); line-height: 1; font-variant-numeric: tabular-nums; }
.us-hp-note { font-size: 11px; color: var(--pc-text-meta); margin: 6px 0 0; }

/* Tools: a plain two-column list of links */
.us-hp-tools {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 4px;
}
.pc-wrap a.us-hp-tool, .pc-wrap a.us-hp-tool:hover { text-decoration: none; }
.us-hp-tool {
    padding: 12px 0; color: inherit; border-bottom: 1px solid var(--pc-border-light);
    display: flex; flex-direction: column; gap: 4px;
}
.us-hp-tool:hover .us-hp-tc-title { text-decoration: underline; text-underline-offset: 2px; }
.us-hp-tc-title { font-family: var(--pc-serif); font-size: 17px; font-weight: 700; color: var(--pc-text); line-height: 1.15; }
.us-hp-tc-desc { font-size: 13px; color: var(--pc-text-secondary); line-height: 1.4; }
.us-hp-tc-viz { margin-top: auto; height: 38px; width: 100%; display: block; }

/* Hero chart: the approval trend, whole term */
.us-hp-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 6px; }
.us-hp-chart-head h2 { font-family: var(--pc-serif); font-size: 18px; font-weight: 700; color: var(--pc-text); margin: 0; }
.gbp-chart-container.us-hp-chart { height: 340px; }

@media (max-width: 768px) {
    .gbp-chart-container.us-hp-chart { height: 260px; }
    .us-hp-strip { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .us-hp-leaders { border-top: 1px solid var(--pc-border-light); padding-top: 12px; }
    .us-hp-leaders-h { padding-left: 0; border-left: 0; }
    .us-hp-cell:first-child { border-left: 0; padding-left: 0; }
    .us-hp-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .us-hp-bar-nums { gap: 8px; }
    .us-hp-bar-val { font-size: 24px; }
    .us-hp-bar-num.is-net .us-hp-bar-val { font-size: 18px; }
    .us-hp-bar-lbl { font-size: 11px; }
    body.ps-site .us-hp-chg, body.ps-site .us-hp-chg .pc-change { font-size: 11px; }
    .us-hp-cell { padding-left: 10px; gap: 8px; }
    .us-hp-val { font-size: 22px; }
}

/* ============ Photo credits page ============ */
/* One paragraph per public-domain source, then the names in a comma list */
.us-credit-groups { margin: 16px 0 0; padding: 0; border-top: 2px solid var(--pc-text); }
.us-credit-group { padding: 14px 0; border-bottom: 1px solid var(--pc-border-light); }
.us-credit-group-src { font-size: 14px; line-height: 1.5; color: var(--pc-text-body); margin: 0 0 6px; }
.us-credit-group-src b { color: var(--pc-text); }
.us-credit-names { font-size: 13px; line-height: 1.6; color: var(--pc-text-secondary); margin: 0; }
.us-credit-names b { font-weight: 600; color: var(--pc-text-body); }
.us-credit-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 2px solid var(--pc-text); }
.us-credit-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pc-border-light); }
.us-credit-name { font-size: 15px; font-weight: 700; color: var(--pc-text); }
.us-credit-role { font-weight: 400; color: var(--pc-text-secondary); font-size: 13px; margin-left: 4px; }
.us-credit-meta { font-size: 12px; line-height: 1.5; color: var(--pc-text-secondary); margin-top: 2px; }

/* ============ Home: recent polls ============ */
.us-hp-recent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; margin-top: 12px; }
.us-hp-recent h3 { font-family: var(--pc-sans); font-size: 12px; font-weight: 700; color: var(--pc-text); margin: 0 0 4px; }
.us-hp-rt td, .us-hp-rt th { white-space: nowrap; }
.us-hp-rt tbody td { padding-top: 6px; padding-bottom: 6px; }
.us-hp-rt .us-hp-rt-who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.us-hp-rt .us-hp-rt-when { color: var(--pc-text-secondary); }
.us-hp-rt .us-hp-rt-lead { text-align: left; }
.pc-table.us-hp-rt thead th:nth-child(2), .pc-table.us-hp-rt tbody td:nth-child(2),
.pc-table.us-hp-rt--pr thead th:nth-child(3), .pc-table.us-hp-rt--pr tbody td:nth-child(3) { text-align: left; }
.us-hp-rt .us-hp-rt-tag { font-size: 10px; font-weight: 600; color: var(--pc-text-secondary); margin-left: 4px; }
@media (max-width: 900px) { .us-hp-recent { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.us-hp-s { display: none; }
@media (max-width: 480px) {
    .us-hp-l { display: none; }
    .us-hp-s { display: inline; }
    /* pollster names wrap to two lines instead of truncating */
    .us-hp-rt .us-hp-rt-who { max-width: 120px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
    .us-hp-rt--pr .us-hp-rt-who { max-width: 104px; }
    .us-hp-rt thead th, .us-hp-rt tbody td { padding-left: 4px; padding-right: 4px; }
    .us-hp-rt thead th:first-child, .us-hp-rt tbody td:first-child { padding-left: 0; }
}

/* Home: the 2026 midterms block (build_home.midterms_block, until Nov 5, 2026) */
.us-hp-midterms {
    margin: 20px 0 28px; padding: 14px 0 12px;
    border-top: 1px solid var(--pc-border); border-bottom: 1px solid var(--pc-border);
}
.us-hp-midterms-head { margin: 0 0 4px; font-family: var(--pc-serif); font-size: 20px; font-weight: 700; line-height: 1.25; }
.pc-wrap .us-hp-midterms-head a { color: var(--pc-text); text-decoration: none; }
.pc-wrap .us-hp-midterms-head a:hover { text-decoration: underline; text-underline-offset: 2px; }
.us-hp-midterms-text { margin: 0 0 6px; font-family: var(--pc-sans); font-size: 14px; color: var(--pc-text-body); }