/* approval.css - Trump approval page (prefix ap-). Tokens only (pc-tokens.css).
   The headline numbers sit on one approve / disapprove split bar; tables are
   pc-table; method notes sit in closed disclosures at the page foot. */

/* ---- masthead: kicker, portrait + serif headline, as-of line, strip ---- */
.ap-masthead { margin-bottom: 36px; }
.ap-masthead .pc-kicker { margin-bottom: 14px; }
.ap-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ap-head-photo { flex: 0 0 auto; line-height: 0; }
.ap-head-photo .us-pt { box-shadow: inset 0 0 0 1px var(--pc-border-light); }
.ap-head-text { min-width: 0; }
.ap-headline { font-size: 36px; line-height: 1.12; margin: 0 0 6px; text-wrap: balance; }
.ap-asof { font-family: var(--pc-sans); font-size: 13px; color: var(--pc-text-secondary); margin: 0; line-height: 1.5; max-width: 680px; }
.ap-bar-wrap { border-top: 2px solid var(--pc-text); padding-top: 14px; }
.ap-bar-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; margin-bottom: 10px; }
.ap-bar-num { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-family: var(--pc-sans); }
.ap-bar-num.is-net { align-items: center; text-align: center; }
.ap-bar-num.is-disapprove { align-items: flex-end; text-align: right; }
/* labels and figures in ink; the series colour sits on a dot before the label */
.ap-bar-lbl { font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); line-height: 1.2; }
.ap-bar-num.is-approve .ap-bar-lbl::before, .ap-bar-num.is-disapprove .ap-bar-lbl::after, .ap-rows-head i.is-approve::before, .ap-rows-head i.is-disapprove::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px;
}
.ap-bar-num.is-approve .ap-bar-lbl::before { background: var(--pc-positive); margin-right: 5px; }
.ap-bar-num.is-disapprove .ap-bar-lbl::after { background: var(--pc-negative); margin-left: 5px; }
.ap-rows-head i.is-approve::before { background: var(--pc-positive); margin-right: 3px; }
.ap-rows-head i.is-disapprove::before { background: var(--pc-negative); margin-right: 3px; }
.ap-bar-val { font-size: 34px; font-weight: 700; color: var(--pc-text); line-height: 1; font-variant-numeric: tabular-nums; }
.ap-bar-num.is-net .ap-bar-val { font-size: 22px; }
.ap-chg { font-size: 12px; color: var(--pc-text-meta); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-chg b { font-weight: 700; color: var(--pc-text); }
/* no series colour on the change: direction colour is the sitewide pc-change convention (site.css) */
.ap-bar { position: relative; display: flex; height: 32px; background: var(--pc-border-light); }
.ap-bar-seg { display: block; height: 100%; }
.ap-bar-seg.is-approve { background: var(--pc-positive); }
.ap-bar-seg.is-neither { background: var(--pc-border); }
.ap-bar-seg.is-disapprove { background: var(--pc-negative); }
.ap-bar-mid { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 0; border-left: 1.5px dashed var(--pc-text); }
/* label under the grey "neither" segment */
.ap-bar-under { position: relative; height: 16px; margin-top: 4px; font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-meta); font-variant-numeric: tabular-nums; }
.ap-bar-neither { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; line-height: 16px; }

/* 30-day strip: each poll in the window on the bar's 0-100 scale */
.ap-strip { position: relative; height: 34px; margin-top: 8px; border-bottom: 1px solid var(--pc-border); }
.ap-strip::before, .ap-strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pc-border-grid); }
.ap-strip::before { left: 25%; }
.ap-strip::after { left: 75%; }
.ap-strip-mid { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px dashed var(--pc-border); }
.ap-strip i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; opacity: 0.55; z-index: 1; }
.ap-strip i.is-approve { background: var(--pc-positive); }
.ap-strip i.is-disapprove { background: var(--pc-negative); }
.ap-strip b { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px solid var(--pc-text); z-index: 2; }
.ap-bar-scale { position: relative; height: 14px; font-family: var(--pc-sans); font-size: 10px; color: var(--pc-text-meta); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ap-bar-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.ap-bar-scale span:first-child { transform: none; }
.ap-bar-scale span:last-child { transform: translateX(-100%); }
.ap-strip-note { font-family: var(--pc-sans); font-size: 12px; color: var(--pc-text-meta); margin: 4px 0 0; }

/* then and now: four small number groups */
.ap-tn { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--pc-border-light); font-family: var(--pc-sans); }
.ap-tn-g { min-width: 0; }
.ap-tn-lbl { font-size: 12px; font-weight: 600; color: var(--pc-text-secondary); margin-bottom: 3px; white-space: nowrap; }
.ap-tn-lbl span { font-weight: 400; color: var(--pc-text-meta); }
.ap-tn-v { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.ap-tn-v b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.ap-tn-net { font-size: 13px; color: var(--pc-text-secondary); }
/* approve / disapprove figures in ink (series colour is on the bars and dots only) */
.ap-tn-v b, .ap-row-nums b { color: var(--pc-text); }
.ap-rows-head i.is-approve, .ap-rows-head i.is-disapprove { color: var(--pc-text-secondary); }

/* rows: label, thin split bar (or diverging bar), numbers */
.ap-rows-head, .ap-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 170px; align-items: center; gap: 16px; }
.ap-rows-head { font-family: var(--pc-sans); font-size: 11px; color: var(--pc-text-meta); margin: 14px 0 4px; }
.ap-rows-head > span:last-child, .ap-row-nums { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.ap-rows-head i { font-style: normal; font-weight: 600; }
.ap-row { padding: 9px 0; border-bottom: 1px solid var(--pc-border-light); font-family: var(--pc-sans); }
.ap-row-lbl { font-size: 14px; font-weight: 600; color: var(--pc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row-lbl span { font-weight: 400; font-size: 12px; color: var(--pc-text-meta); }
.ap-row-bar { position: relative; display: flex; height: 14px; background: var(--pc-border-light); }
.ap-row-bar .ap-bar-mid { top: -3px; bottom: -3px; }
.ap-row-nums { font-size: 15px; }
.ap-row-nums b { font-weight: 700; }
.ap-row-net { font-weight: 700; color: var(--pc-text); }
.ap-row-nums .ap-row-net:only-child { grid-column: 3; }
.ap-row-div { position: relative; height: 14px; }
.ap-row-div::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--pc-text-meta); }
.ap-row-div i { position: absolute; top: 0; bottom: 0; }
.ap-row-div.is-pos i { background: var(--pc-positive); }
.ap-row-div.is-neg i { background: var(--pc-negative); }

/* ---- chart ---- */
.ap-chart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 10px; }
.ap-chart-head .pc-section-title { margin: 0; }
.ap-controls { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
/* tap targets: group tabs and chart controls at least 40px tall */
.ap-controls .pc-btn, .ap-controls .pc-mode-btn, .ap-more-btn { min-height: 40px; }
.gbp-chart-container.ap-chart { height: 420px; }
.ap-chart + .pc-help { margin-top: 8px; }
/* poll-line-chart.css is light-only (raw hexes): restate its chrome on tokens
   so the chart follows dark mode, and the tooltip matches pc-tooltip */
.ap-chart .grid-line { stroke: var(--pc-border-grid); }
.ap-chart .axis text { fill: var(--pc-text-meta); }
.ap-chart .crosshair { stroke: var(--pc-border); }
.ap-chart .gbp-refline { stroke: var(--pc-text-meta); }
.ap-chart .gbp-reflabel-bg { fill: var(--pc-surface); }
.ap-chart .gbp-reflabel { fill: var(--pc-text-secondary); }
.ap-chart .gbp-tooltip { background: var(--pc-surface); border-color: var(--pc-border); }
.ap-chart .gbp-tooltip-date { color: var(--pc-text-body); }
.ap-chart .gbp-tooltip-party { color: var(--pc-text-body); }
.ap-chart .gbp-tooltip-val { color: var(--pc-text); }

/* ---- tables: one line per row ---- */
.ap-table td, .ap-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-table tbody td { padding-top: 6px; padding-bottom: 6px; }
.ap-name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.ap-poll-table .ap-name { max-width: 380px; }
.ap-name-txt { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ap-date { color: var(--pc-text-secondary); }
.ap-house-table .ap-date a, .ap-poll-table .us-src a { color: var(--pc-text-secondary); }
.ap-house-table, .ap-poll-table { min-width: 560px; }

/* lean: a dot on a centred scale (house-effect cap either side), stem from
   zero, then the value; the same track width on every row so they align */
.ap-lean-th { text-align: left !important; }
.ap-lean-axis { display: inline-flex; justify-content: space-between; width: 120px; margin-right: 6px; vertical-align: middle; font-weight: 400; color: var(--pc-text-meta); }
.ap-lean-cell { text-align: left !important; }
.ap-lean { display: inline-block; position: relative; width: 120px; height: 14px; vertical-align: middle; margin-right: 6px; }
.ap-lean::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--pc-border-light); }
.ap-lean::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--pc-text-meta); }
.ap-lean i { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; }
.ap-lean b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; z-index: 1; }
.ap-lean.is-pos i, .ap-lean.is-pos b { background: var(--pc-positive); }
.ap-lean.is-neg i, .ap-lean.is-neg b { background: var(--pc-negative); }
.ap-lean.is-nc b { background: var(--pc-text-meta); }
.ap-lean-val { display: inline-block; min-width: 38px; text-align: right; vertical-align: middle; }

/* inline tags: partisan sponsor, not-in-average reason */
.ap-ptag, .ap-why { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--pc-text-secondary); margin-left: 4px; vertical-align: 1px; }
.ap-ptag { padding: 0 3px; background: var(--pc-tint); }
.ap-why { font-weight: 500; font-style: normal; color: var(--pc-text-meta); text-transform: uppercase; }

.ap-more-btn { margin-top: 12px; }
.ap-all-pollsters { margin-top: 10px; }
.ap-name a { color: inherit; text-decoration: underline; text-decoration-color: var(--pc-border); text-underline-offset: 2px; }
.ap-name a:hover { text-decoration-color: currentColor; }

/* tables use the full container width; pollster names left-aligned */
.pc-table.ap-poll-table thead th:nth-child(2), .pc-table.ap-poll-table tbody td:nth-child(2) { text-align: left; }
.ap-s { display: none; }

/* phones: the numbers stay on screen; sample, source, poll count and date drop */
@media (max-width: 600px) {
    .ap-opt { display: none; }
    .ap-l { display: none; }
    .ap-s { display: inline; }
    .ap-house-table, .ap-poll-table { min-width: 0; }
    .ap-table thead th, .ap-table tbody td { padding-left: 5px; padding-right: 5px; }
    .ap-table thead th:first-child, .ap-table tbody td:first-child { padding-left: 0; }
    .ap-house-table .ap-name { max-width: 130px; }
    .ap-poll-table .ap-name { max-width: 150px; }
    .ap-name-txt { max-width: 118px; }
    .ap-why { font-size: 9px; }
    .ap-poll-table tr.is-excluded .ap-name-txt { max-width: 84px; }
    .ap-why-r { display: none; }
    .ap-lean { width: 64px; margin-right: 3px; }
    .ap-lean-axis { width: 64px; margin-right: 3px; }
    .ap-lean-val { min-width: 34px; }
    .ap-bar-scale span:nth-child(2), .ap-bar-scale span:nth-child(4) { display: none; }
    .ap-rows-head, .ap-row { grid-template-columns: minmax(0, 1fr) 150px; gap: 4px 12px; }
    .ap-strip i { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
    .ap-rows-head > span:first-child, .ap-rows-head > span:nth-child(2) { display: none; }
    .ap-rows-head { grid-template-columns: 1fr 150px; }
    .ap-rows-head > span:last-child { grid-column: 2; }
    .ap-row-lbl { grid-column: 1; grid-row: 1; }
    .ap-row-nums { grid-column: 2; grid-row: 1; font-size: 14px; }
    .ap-row-bar, .ap-row-div { grid-column: 1 / -1; grid-row: 2; }
    .ap-tn { gap: 14px 24px; }
    .ap-tn-g { flex: 1 1 140px; }
    .ap-tn-v b { font-size: 18px; }
}

@media (max-width: 768px) {
    .ap-headline { font-size: 28px; }
    .ap-head { gap: 12px; align-items: flex-start; }
    .ap-head-photo .us-pt { width: 52px !important; height: 52px !important; }
    .gbp-chart-container.ap-chart { height: 340px; }
    .ap-bar-val { font-size: 28px; }
    .ap-name { max-width: 180px; }
    .ap-name-txt { max-width: 150px; }
}
@media (max-width: 420px) {
    .ap-headline { font-size: 25px; }
    .ap-bar-nums { gap: 8px; }
    .ap-bar-val { font-size: 24px; }
    .ap-bar-num.is-net .ap-bar-val { font-size: 18px; }
    .ap-bar-lbl { font-size: 11px; }
    .ap-chg { font-size: 11px; }
}