/* Skin "politics" (setting skin = politics): "Signal", the near-black, lime and grey look of Politics Predictions
   (Catie's Lovable home screen, Brand & Design build spec hub/handoffs/cms/2026-10-20-politics-build-spec.md, logo
   = the lime tick, Catie 20 Oct). One mode: dark. Strictly non-partisan: no red or blue anywhere, charts lime + grey.
   Same structure as the Hollywood skin: tokens, one font, a few decorations on top of the designed layout in
   site.css; the home page is templates/partials/home/showcase-politics.php. */

/* Font (SIL Open Font License 1.1, licence text in public/assets/fonts/): Inter for everything (400-700). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* size-adjust as Hollywood (measured 26 Oct in Chrome: Inter runs 106% of Arial) */
@font-face { font-family: "PP Sans Fallback"; font-weight: 400 700; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 106%; }

/* Tokens (spec section 1, contrast measured by Brand: ink 17.5:1 on bg, muted 8.4:1, lime 14.9:1, edge 3.4:1 for controls) */
body.skin-politics {
  --pp-bg: #0b0f0e; --pp-panel: #121816; --pp-ink: #f2f4f2; --pp-muted: #a3ada8; --pp-lime: #c5f25a; --pp-line: #26302c; --pp-edge: #5e6a64;
  --wrap: 1200px; --gutter: 24px; --radius: 6px;
  --sans: "Inter", "PP Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans); --serif-text: var(--sans); --serif-display: var(--sans); --display: var(--sans); --sc-ui: var(--sans);
  font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 359px) { body.skin-politics { --gutter: 16px; } }
@media (min-width: 768px) { body.skin-politics { font-size: 17px; } }
body.skin-politics.theme-dark {
  --paper: var(--pp-bg); --paper-2: var(--pp-panel); --sc-card: var(--pp-panel); --ink: var(--pp-ink); --ink-2: var(--pp-muted); --muted: var(--pp-muted); --line: var(--pp-line); --border: var(--pp-edge);
  --accent: var(--pp-lime); --accent-text: var(--pp-lime); --on-accent: var(--pp-bg); --accent-ink: var(--pp-bg); --focus: var(--pp-lime);
  --sc-gold: var(--pp-lime); --sc-hair: var(--pp-line); --sc-wordmark: var(--pp-ink); --oc-title: var(--pp-lime);
  background: var(--pp-bg); color: var(--pp-ink);
}

/* Type (spec section 1): Inter 700 headings, h1 32/48px, h2 22/28, h3 18/20; labels 12px uppercase .08em */
body.skin-politics :is(h1, h2, h3, .article-title, .card-title, .sc-title) { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
body.skin-politics :is(h1, .article-title) { font-size: 2rem; line-height: 1.15; }
body.skin-politics h2, body.skin-politics .prose h2 { font-size: 1.375rem; line-height: 1.25; }
body.skin-politics h3, body.skin-politics .prose h3 { font-size: 1.125rem; line-height: 1.3; }
@media (min-width: 768px) {
  body.skin-politics :is(h1, .article-title) { font-size: 3rem; line-height: 1.08; }
  body.skin-politics h2, body.skin-politics .prose h2 { font-size: 1.75rem; }
  body.skin-politics h3, body.skin-politics .prose h3 { font-size: 1.25rem; }
}
body.skin-politics :is(.standfirst, .sc-standfirst) { font-size: 1.125rem; line-height: 1.5; color: var(--pp-ink); }
body.skin-politics :is(.prose .label, .kicker, .sc-kicker, .eyebrow) { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-lime); }
body.skin-politics :is(.meta, .byline, .breadcrumbs, .disclosure, .sc-disclosure, .rg-notice) { color: var(--pp-muted); font-size: max(.75rem, 12px); }
body.skin-politics :is(time, .dates) { font-variant-numeric: tabular-nums; }

/* Links in text: lime and underlined (colour alone is not enough) */
body.skin-politics .prose a:not(.button), body.skin-politics .faq-answer a, body.skin-politics .breadcrumbs a { color: var(--pp-lime); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.skin-politics .prose a:not(.button):hover { color: var(--pp-ink); }
body.skin-politics a:hover { color: var(--pp-lime); }
body.skin-politics :focus-visible { outline: 2px solid var(--pp-lime); outline-offset: 2px; }

/* One partner button style (spec fix 1): FILLED lime, dark text (14.9:1), 44px. Offer block B cards keep their
   partner colours (site.css); everything else uses this. */
:where(body.skin-politics) :is(.prose a.button, .promo-button, .lo-book, .button-primary, .sc-btn, .newsletter-row button, .search-big button, .sticky-cta .button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--pp-lime); border-radius: 6px;
  background: var(--pp-lime); color: var(--pp-bg); font-family: var(--sans); font-size: 1rem; font-weight: 600; text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
:where(body.skin-politics) :is(.prose a.button, .promo-button, .sc-btn, .button-primary, .sticky-cta .button):hover { background: var(--pp-ink); border-color: var(--pp-ink); color: var(--pp-bg); }
body.skin-politics .copy-code { min-height: 44px; border: 1px solid var(--pp-edge); border-radius: 6px; background: transparent; color: var(--pp-ink); }
body.skin-politics .copy-code.is-copied { background: var(--pp-lime); border-color: var(--pp-lime); color: var(--pp-bg); }
body.skin-politics code.promo-code { color: var(--pp-ink); background: var(--pp-line); border-radius: 4px; padding: 2px 6px; }

/* Inputs: the edge colour (3.4:1), never the decorative line */
body.skin-politics :is(.search-form input, .search-big input, .newsletter-row input) { background: var(--pp-panel); color: var(--pp-ink); border: 1px solid var(--pp-edge); border-radius: 6px; }
body.skin-politics :is(.search-form input, .search-big input, .newsletter-row input)::placeholder { color: var(--pp-muted); opacity: 1; }

/* Cards, boxes, tables: panel, 1px line */
body.skin-politics .prose :is(.box, .market-box) { background: var(--pp-panel); border: 1px solid var(--pp-line); border-radius: 6px; }
body.skin-politics :is(.card, .sc-platform) { background: var(--pp-panel); border: 1px solid var(--pp-line); border-radius: 8px; transition: border-color .14s ease; }
body.skin-politics .card { padding: 16px; }
body.skin-politics .card:hover { border-color: var(--pp-lime); }
body.skin-politics .prose :is(th, td) { border-color: var(--pp-line); }
body.skin-politics.theme-dark .prose th { background: var(--pp-panel); color: var(--pp-ink); }
/* the short answer at the top of a page or article: a panel with a 3px lime left rule (spec section 3) */
body.skin-politics:is(.t-article, .t-page) .prose > .box:first-child { border-inline-start: 3px solid var(--pp-lime); }
body.skin-politics .prose blockquote { border-inline-start: 3px solid var(--pp-lime); padding-inline-start: 16px; color: var(--pp-ink); font-style: normal; }
/* "Start here" topic cards on the home page: 1 column on phones, 2 from 480px, 3 from 1024px (spec fix 3) */
body.skin-politics .prose .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { body.skin-politics .prose .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { body.skin-politics .prose .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.skin-politics .prose .cards > .box { margin: 0; transition: border-color .14s ease; }
body.skin-politics .prose .cards > .box:hover { border-color: var(--pp-lime); }

/* Header: panel background; the tick wordmark (skins/politics-brand.php) never wraps */
body.skin-politics.theme-dark .site-header { background: var(--pp-panel); border-bottom: 1px solid var(--pp-line); }
body.skin-politics .pp-brand { display: inline-flex; align-items: center; gap: .3em; max-width: 100%; font-family: var(--sans); font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: -.02em; color: var(--pp-ink); white-space: nowrap; }
body.skin-politics .pp-tick { width: .85em; height: .85em; flex: none; }
@media (max-width: 359px) { body.skin-politics .pp-brand { font-size: 1.125rem; } }
@media (min-width: 1024px) { body.skin-politics .pp-brand { font-size: 1.5rem; } }
body.skin-politics.theme-dark .nav-list a { color: var(--pp-ink); font-weight: 500; }
body.skin-politics.theme-dark .nav-list a:hover, body.skin-politics.theme-dark .nav-list a[aria-current] { color: var(--pp-lime); }
body.skin-politics.theme-dark :is(.search-form button, .menu-toggle) { min-height: 44px; min-width: 44px; border-color: var(--pp-edge); color: var(--pp-ink); }
body.skin-politics .brand-tagline { font-family: var(--sans); font-size: .75rem; color: var(--pp-muted); }
@media (max-width: 1023px) { body.skin-politics .site-header .brand-tagline { display: none; } }

/* Home hero: the made-up dome picture behind the tick wordmark and the tagline (Catie 20 Oct); two columns on wide
   screens come from the shared showcase. */
body.skin-politics .sc-hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--pp-bg) 70%, transparent), transparent); }
body.skin-politics .sc-hero-art { filter: saturate(.85) brightness(.6); }
body.skin-politics .sc-wordmark { display: inline-flex; align-items: center; gap: .25em; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; color: var(--pp-ink); }
body.skin-politics .sc-wordmark::before { content: ""; width: .85em; height: .85em; flex: none; background: url("../../img/skins/politics/tick.svg") center / contain no-repeat; }
body.skin-politics .sc-wordmark-sub { margin-top: 4px; font-family: var(--sans); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--pp-lime); }
body.skin-politics .sc-wordmark-sub::before, body.skin-politics .sc-wordmark-sub::after { display: none; }
body.skin-politics .pp-hero-tagline { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--pp-lime); font-family: var(--sans); font-size: .9375rem; color: var(--pp-muted); }
@media (min-width: 640px) { body.skin-politics .sc-wordmark { font-size: 3.5rem; } body.skin-politics .sc-wordmark-sub { font-size: 2rem; } }
@media (min-width: 1024px) { body.skin-politics .sc-wordmark { font-size: 4.5rem; } body.skin-politics .sc-wordmark-sub { font-size: 2.5rem; } body.skin-politics .pp-hero-tagline { font-size: 1rem; } }
body.skin-politics .sc-title { line-height: 1.08; }
body.skin-politics .sc-title-accent { font-style: normal; color: var(--pp-lime); }
body.skin-politics .sc-chips li { border: 1px solid var(--pp-edge); border-radius: 6px; color: var(--pp-muted); font-size: .75rem; }

/* Footer: deeper than the page, the tick wordmark, tagline, links in columns */
body.skin-politics.theme-dark .site-footer { margin-top: 0; background: #070a09; border-top: 1px solid var(--pp-line); font-size: .875rem; }
body.skin-politics .footer-brand .brand--wordmark { display: inline-flex; align-items: center; gap: .3em; font-family: var(--sans); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--pp-ink); }
body.skin-politics .footer-brand .brand--wordmark::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: url("../../img/skins/politics/tick.svg") center / contain no-repeat; }
body.skin-politics .footer-brand .brand-top { font-size: 1.375rem; }
body.skin-politics .footer-brand .brand-bottom { font-size: 1.375rem; color: var(--pp-lime); }
body.skin-politics .footer-brand .muted { margin: 12px 0 0; max-width: 24rem; color: var(--pp-muted); }
body.skin-politics .footer-head a { color: var(--pp-lime); }
body.skin-politics :is(.footer-links a, .footer-social a) { min-height: 32px; color: var(--pp-muted); }
body.skin-politics :is(.footer-links a, .footer-social a):hover { color: var(--pp-lime); text-decoration: none; }
body.skin-politics :is(.rg-notice, .footer-bottom) { color: var(--pp-muted); opacity: 1; }
body.skin-politics .footer-bottom { border-top-color: var(--pp-line); }
@media (max-width: 767px) { body.skin-politics :is(.footer-links a, .footer-social a) { min-height: 44px; } }

/* Sticky phone bar: the network bar restyled (panel, lime Claim with dark text, 44px close). Label stays
   "21+ · T&Cs apply · Terms" (Catie d84, again 20 Oct: no commission words in the bar). Fades in (180ms). */
@media (max-width: 767px) {
  body.skin-politics.theme-dark .sticky-cta:not([hidden]) { background: var(--pp-panel); border-top: 1px solid var(--pp-line); color: var(--pp-ink); animation: pp-fade .18s ease-out; }
  body.skin-politics.theme-dark :is(.sticky-terms, .sticky-close) { color: var(--pp-muted); }
  body.skin-politics .sticky-close { min-width: 44px; min-height: 44px; }
}

/* FAQ: lime markers, the answer fades in (180ms) */
body.skin-politics .faq details { border-color: var(--pp-line); }
body.skin-politics .faq summary { font-family: var(--sans); font-weight: 600; color: var(--pp-ink); }
body.skin-politics .faq summary::marker { color: var(--pp-lime); }
body.skin-politics .faq details[open] .faq-answer { animation: pp-fade .18s ease-out; }
body.skin-politics .faq-answer { color: var(--pp-muted); }

/* Motion (spec section 4, same as Hollywood): hero fades in 220ms from .01 (the h1 still counts for LCP); hovers
   140ms; FAQ and sticky bar 180ms. Nothing loops, no "live" pulse. */
body.skin-politics :is(.sc-hero-mark, .sc-title, .sc-standfirst) { animation: pp-fade .22s ease-out both; }
@keyframes pp-fade { from { opacity: .01; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.skin-politics *, body.skin-politics *::before, body.skin-politics *::after { animation: none !important; transition: none !important; }
}
/* 12px floor, as Hollywood */
body.skin-politics :is(.sc-kicker, .sc-copy, .sc-terms, .sc-terms *, .sticky-terms, .sticky-terms *, .sc-disclosure, .sc-platform-rating, .sc-platform-note, .sc-platform-offer, .sc-platform-code, .sc-prose .label, .sc-note, .promo-code, .copy-code) { font-size: max(.75rem, 12px); }
@media (max-width: 767px) {
  body.skin-politics .sc-offer { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
  body.skin-politics .sc-offer > span[aria-hidden="true"] { display: none; }
  body.skin-politics .sc-offer :is(.sc-offer-text, .sc-offer-note) { order: -1; flex-basis: 100%; }
  body.skin-politics .sc-offer .sc-copy { min-height: 44px; padding-inline: 8px; margin-inline-start: 0; }
}
/* night preview 28 Oct: the "Start here" card labels came out at 11px from the shared showcase; 12px floor */
body.skin-politics .prose .cards > .box > .label { font-size: max(.75rem, 12px); }
/* Brand sign-off 28 Oct (bundle-5 follow-ups done now): hero capped so the h1 starts in the first screen at 1280; the
   footer lockup matches the header (tick + name on one line). */
body.skin-politics { --sc-hero-max: min(60vh, 520px); }
body.skin-politics .footer-brand .brand--wordmark { flex-wrap: nowrap; }
body.skin-politics .footer-brand .brand-bottom { color: var(--pp-ink); }
/* Brand re-check 28 Oct 00:3x: (1) the footer lockup stacked at every width (the shared wordmark is a column with an
   uppercase top line and an italic serif bottom line); now one line like the header: tick, "Politics", "Predictions".
   (2) at 1280 the 16:9 hero with the 520px cap shrank to ~924px wide; a fixed height instead keeps the art full width. */
body.skin-politics .footer-brand .brand--wordmark { flex-direction: row; align-items: center; gap: .3em; }
body.skin-politics .footer-brand .brand--wordmark .brand-top { font-family: var(--sans); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--pp-ink); }
body.skin-politics .footer-brand .brand--wordmark .brand-bottom { margin: 0; font-family: var(--sans); font-style: normal; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--pp-lime); }
@media (min-width: 768px) { body.skin-politics .sc-hero { aspect-ratio: auto; height: min(60vh, 520px); } }