/* Vote Files design system: base, shared chrome, and reusable components.
   Loaded last on every page, after page stylesheets, so the shared rules below are the final word
   on page canvas, typography defaults, header, and footer. Values come from css/vf-tokens.css. */

/* ---------- Base ---------- */
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) {
  margin: 0;
  color: var(--vf-ink);
  font-family: var(--vf-font-body);
  font-size: 17px;
  line-height: 1.55;
  background-color: var(--vf-bg);
  background-image: var(--vf-paper-texture);
  background-size: 900px 900px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card)::after { display: none; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) :where(h1, h2, h3, h4) {
  font-family: var(--vf-font-head);
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
}
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) :where(p) { text-wrap: pretty; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) ::selection { background: var(--vf-blue-soft); color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--vf-blue) !important;
  outline-offset: 3px !important;
}
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) :where(input, select, textarea)::placeholder { color: var(--vf-placeholder); }
@media (prefers-reduced-motion: reduce) {
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) *,
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) *::before,
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- Shared header ---------- */
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .topbar.nr-site-header { border: 0; background: transparent; color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-masthead { min-height: 0; padding: 22px clamp(16px, 3vw, 44px) 10px; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-brand { gap: 10px; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-brand-main { gap: 2px; color: var(--vf-ink); font: 800 26px/1 var(--vf-font-head); letter-spacing: -.03em; text-transform: lowercase; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-brand-star { width: 30px; height: 30px; margin: 0 3px 0 -1px; clip-path: none; border-radius: 50%; background: var(--vf-ink); color: var(--vf-on-accent); font-size: 15px; line-height: 1; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header :is(.nr-flag-bars, .nr-edition) { display: none; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav-search input { height: 44px; border: 1px solid var(--vf-rule); border-radius: 14px; background: var(--vf-surface); color: var(--vf-ink); font: 600 15px/1 var(--vf-font-body); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav-search input:focus { border-color: var(--vf-blue); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav-search button { height: 42px; color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest { border: 1px solid var(--vf-rule); border-radius: var(--vf-radius); background: var(--vf-surface); box-shadow: var(--vf-shadow); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest > a { border-color: var(--vf-rule); color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest > a:hover { background: var(--vf-blue-soft); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest span { color: var(--vf-blue-text); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest strong { font-family: var(--vf-font-head); font-weight: 700; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest :is(small, p) { color: var(--vf-mute); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-search-suggest .nr-search-all { background: var(--vf-ink); color: var(--vf-on-accent); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-header-actions a { min-height: 40px; border: 0; border-radius: var(--vf-radius-pill); background: transparent; color: var(--vf-ink); font: 700 15px/1 var(--vf-font-body); letter-spacing: 0; text-transform: none; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-header-actions a:is(:hover, [aria-current="page"]) { background: var(--vf-surface); color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-header-actions .nr-desk-link,
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-header-actions .nr-desk-link:is(:hover, [aria-current="page"]) { background: var(--vf-ink); color: var(--vf-on-accent); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-primary-row { justify-content: center; min-height: 0; padding: 8px clamp(16px, 3vw, 44px) 4px; border: 0; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav { flex: 0 1 auto; gap: 2px; padding: 6px; border-radius: var(--vf-radius-pill); background: var(--vf-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav a { min-height: 38px; padding: 0 14px; border-radius: var(--vf-radius-pill); color: var(--vf-ink-2); font: 700 14px/1 var(--vf-font-body); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav a::after { display: none; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav a:hover { background: var(--vf-surface-2); color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav a[aria-current="page"] { background: var(--vf-ink); color: var(--vf-on-accent); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-record-note { display: none; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-skip-link { border-radius: var(--vf-radius-sm); background: var(--vf-ink); color: var(--vf-on-accent); }

/* Open-file tabs under the header */
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .tabstrip.has-tabs { border-color: var(--vf-rule); background: transparent; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .tabstrip .ftab { border-color: var(--vf-rule); border-radius: 12px 12px 0 0; background: var(--vf-surface); color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .tabstrip .ftab:is(:hover, .on) { border-color: var(--vf-ink); background: var(--vf-surface); color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .tabstrip .ftab .kind { color: var(--vf-blue-text); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .tabstrip .ftab-close { color: var(--vf-mute); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .tabstrip .ftab-close:is(:hover, :focus-visible) { background: var(--vf-surface-2); color: var(--vf-ink); }

/* ---------- Shared footer ---------- */
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .footer.nr-site-footer { margin-top: 40px; border-top: 1.5px solid var(--vf-rule); background: transparent; color: var(--vf-mute); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-footer-inner { width: min(var(--vf-page), 100%); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-footer-brand > a { color: var(--vf-ink); font: 800 24px/1 var(--vf-font-head); letter-spacing: .02em; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-footer-brand > span { color: var(--vf-ink-2); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-footer-brand p { color: var(--vf-mute); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-footer nav strong { color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-footer nav a { color: var(--vf-ink-2); font-size: .86rem; }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-footer nav a:hover { color: var(--vf-ink); }
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-footer-inner > small { border-color: var(--vf-rule); color: var(--vf-mute); }

/* Fixture label on local previews */
body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-preview-badge { left: 16px; right: auto; padding: 9px 12px; border-radius: var(--vf-radius-pill); background: var(--vf-ink); color: var(--vf-on-accent); font: 700 12px/1 var(--vf-font-body); text-transform: none; }

/* ---------- Components (opt-in classes for new markup) ---------- */
.vf-eyebrow { display: block; color: var(--vf-mute); font: 800 12px/1.3 var(--vf-font-body); letter-spacing: .08em; text-transform: uppercase; }
.vf-hand { font-family: var(--vf-font-hand); font-weight: 400; }
.vf-highlight { color: var(--vf-blue); }
.vf-card { border-radius: var(--vf-radius-lg); background: var(--vf-surface); box-shadow: var(--vf-shadow-sm); }
.vf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--vf-ink); color: var(--vf-on-accent); font: 800 16px/1 var(--vf-font-head); text-decoration: none; cursor: pointer; }
.vf-btn:hover { background: var(--vf-ink-strong); }
.vf-btn--accent { background: var(--vf-red); }
.vf-btn--accent:hover { background: var(--vf-red-text); }
.vf-btn--quiet { background: var(--vf-surface); color: var(--vf-ink); box-shadow: inset 0 0 0 1.5px var(--vf-ink); }
.vf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--vf-radius-pill); background: var(--vf-surface); box-shadow: inset 0 0 0 1px var(--vf-rule); color: var(--vf-ink); font: 700 15px/1 var(--vf-font-body); text-decoration: none; }
.vf-chip:hover { box-shadow: inset 0 0 0 1.5px var(--vf-ink); }
.vf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--vf-radius-pill); background: var(--vf-surface-2); color: var(--vf-ink-2); font: 800 12px/1 var(--vf-font-body); }
.vf-pill--blue { background: var(--vf-blue-soft); color: var(--vf-blue-text); }
.vf-pill--red { background: var(--vf-red-soft); color: var(--vf-red-text); }
.vf-pill--green { background: var(--vf-green-soft); color: var(--vf-green-text); }
.vf-pill--amber { background: var(--vf-amber-soft); color: var(--vf-amber-text); }
.vf-dots { background-image: var(--vf-dot-grid); background-size: 16px 16px; }
.vf-underline { display: block; width: min(360px, 70%); height: auto; margin: 10px auto 0; color: var(--vf-ink); }

@media (max-width: 980px) {
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-primary-row { justify-content: flex-start; }
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-nav { max-width: 100%; }
  /* Enlarged text: let the two header actions stack instead of pushing the masthead wider than the screen. */
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-header-actions { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 620px) {
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-masthead { padding: 14px 16px 8px; }
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-site-header .nr-brand-main { font-size: 23px; }
  body:is(.newsroom-home, .newsroom-detail, .newsroom-status-card) .nr-primary-row { padding: 6px 16px 2px; }
}
