/* Canonical Power & Politics masthead, navigation, and footer. Loaded by vf_head() on every page. */

.newsroom-home,
.newsroom-detail,
.newsroom-status-card {
  /* Compatibility aliases while older page modules are retired. These map every
     Reading Room token onto the canonical action-newsroom palette. */
  --max: 1536px;
  --blue: var(--vf-blue);
  --red: var(--vf-navy);
  --muted: var(--vf-ink-2);
  --ink: var(--vf-ink);
  --ink-soft: var(--vf-ink-2);
  --ink-faint: var(--vf-mute);
  --paper: var(--vf-bg);
  --paper-deep: var(--vf-bg);
  --card: var(--vf-surface);
  --rule: var(--vf-rule);
  --green: var(--vf-blue);
  --green-deep: var(--vf-blue);
  --green-tint: var(--vf-green-soft);
  --stamp: var(--vf-red-text);
  --stamp-tint: var(--vf-red-soft);
  --rule-soft: color-mix(in srgb, var(--vf-mute) 18%, transparent);
  --shadow: none;
  --cream: var(--vf-surface);
  font-family: var(--vf-font-body);
}

.newsroom-home::after,
.newsroom-detail::after,
.newsroom-status-card::after { display: none; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar.nr-site-header {
  min-height: 0;
  max-width: none;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--vf-rule);
  background: var(--vf-bg);
  color: var(--vf-ink);
}

.nr-site-header a { text-decoration: none; }

.nr-skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 0;
  background: var(--vf-ink);
  color: var(--vf-bg);
  font-size: .8rem;
  font-weight: 900;
}
.nr-skip-link:focus { transform: translateY(0); }
.nr-content-anchor { display: block; width: 1px; height: 0; overflow: hidden; }

.nr-site-header a:focus-visible,
.nr-site-header button:focus-visible,
.nr-site-header input:focus-visible,
.nr-site-footer a:focus-visible {
  outline: 3px solid var(--vf-blue);
  outline-offset: 3px;
}

:where(.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;
}

.nr-masthead,
.nr-primary-row,
.nr-site-footer-inner {
  width: min(1536px, 100%);
  min-width: 0;
  margin-inline: auto;
}

.nr-masthead {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(250px, auto) minmax(250px, 540px) auto;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  padding: 12px clamp(18px, 2.2vw, 34px);
  /* At large text-zoom levels the brand wordmark, search field, and header actions
     can together need more width than any narrow viewport has, even after the
     minmax() floors below shrink. Scroll the row itself rather than the page,
     the same accessible fallback the primary nav already uses for its own links. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.nr-masthead::-webkit-scrollbar { display: none; }

.nr-site-header .nr-brand {
  width: auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--vf-ink);
}

.nr-site-header .nr-brand-main {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--vf-ink);
  font-family: var(--vf-font-head);
  font-size: clamp(24px, 2vw, 31px);
  letter-spacing: .035em;
  line-height: 1;
  white-space: nowrap;
}

.nr-site-header .nr-brand-star {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 34%);
  background: var(--vf-surface);
  color: var(--vf-ink);
  font-size: 10px;
}

.nr-site-header .nr-flag-bars {
  width: 24px;
  display: grid;
  gap: 3px;
}

.nr-site-header .nr-flag-bars i { display: block; height: 3px; background: var(--vf-red); }
.nr-site-header .nr-flag-bars i:nth-child(2) { width: 76%; }
.nr-site-header .nr-flag-bars i:nth-child(3) { width: 52%; }

.nr-site-header .nr-edition {
  color: var(--vf-ink-2);
  font-size: .7rem;
  line-height: 1.15;
  white-space: nowrap;
}

.nr-site-header .nr-edition small {
  display: block;
  margin-top: 3px;
  color: var(--vf-red-text);
  font-size: .48rem;
  letter-spacing: .18em;
}

.nr-site-header .nr-nav-search {
  display: block;
  width: 100%;
  position: relative;
  margin: 0;
}

.nr-site-header .nr-nav-search input {
  width: 100%;
  height: 40px;
  padding: 0 46px 0 15px;
  border: 1px solid var(--vf-rule);
  border-radius: 0;
  outline: none;
  background: var(--vf-bg);
  color: var(--vf-ink);
  font-size: .78rem;
}

.nr-site-header .nr-nav-search input:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.04);
}

.nr-site-header .nr-nav-search button {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 42px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--vf-ink);
  font-size: 1.2rem;
  cursor: pointer;
}

.nr-site-header .nr-search-suggest { top: 47px; width: min(540px, calc(100vw - 30px)); }

.nr-header-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
  white-space: nowrap;
}

.nr-header-actions a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--vf-rule);
  border-radius: 0;
  color: var(--vf-ink);
  font-size: .75rem;
  font-weight: 800;
}

.nr-header-actions a:hover,
.nr-header-actions a[aria-current="page"] { border-color: var(--vf-action-strong); color: var(--vf-ink); background: var(--vf-surface); }
.nr-header-actions .nr-desk-link { border-color: var(--vf-action); background: var(--vf-blue-soft); color: var(--vf-ink); }
.nr-header-actions .nr-desk-link:hover,
.nr-header-actions .nr-desk-link[aria-current="page"] { border-color: var(--vf-action-strong); background: var(--vf-action-strong);color:var(--vf-on-accent); }

.nr-primary-row {
  min-height: 41px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(18px, 2.2vw, 34px);
  border-top: 1px solid var(--vf-surface-2);
}

.nr-site-header .nr-nav {
  width: auto;
  min-width: 0;
  max-width: none;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: clamp(17px, 2vw, 31px);
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.nr-site-header .nr-nav::-webkit-scrollbar { display: none; }

.nr-site-header .nr-nav a {
  min-height: 41px;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 1px 0 0;
  color: var(--vf-ink-2);
  font-size: .77rem;
  font-weight: 750;
}

.nr-site-header .nr-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  transform: scaleX(0);
  background: var(--vf-action);
  transition: transform .16s ease;
}

.nr-site-header .nr-nav a:hover,
.nr-site-header .nr-nav a[aria-current="page"] { color: var(--vf-ink); }
.nr-site-header .nr-nav a:hover::after,
.nr-site-header .nr-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nr-record-note {
  flex: 0 0 auto;
  color: var(--vf-mute);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabstrip:empty { display: none; }

.tabstrip.has-tabs {
  border-color: var(--vf-rule);
  background: var(--vf-bg);
}

.tabstrip .ftab-wrap { flex: 0 0 auto; position: relative; display: flex; }
.tabstrip .ftab {
  min-width: 150px;
  padding-right: 34px;
  border-color: var(--vf-rule);
  background: var(--vf-surface);
  color: var(--vf-ink-2);
  clip-path: none;
}
.tabstrip .ftab:hover,
.tabstrip .ftab.on { border-color: var(--vf-mute); background: var(--vf-surface); color: var(--vf-ink); }
.tabstrip .ftab .kind,
.tabstrip .ftab.on .kind { color: var(--vf-blue-text); }
.tabstrip .ftab-close {
  width: 28px;
  height: 28px;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vf-mute);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.tabstrip .ftab-close:hover,
.tabstrip .ftab-close:focus-visible { outline: 2px solid var(--vf-blue); outline-offset: -2px; background: var(--vf-surface-2); color: var(--vf-ink); }

.footer.nr-site-footer {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--vf-rule);
  background: var(--vf-bg);
  color: var(--vf-ink-2);
}

.nr-site-footer-inner {
  display: grid;
  grid-template-columns: minmax(270px, 1.4fr) repeat(3, minmax(130px, .65fr));
  gap: clamp(28px, 4vw, 64px);
  padding: 38px clamp(20px, 3.4vw, 52px) 25px;
}

.nr-footer-brand > a {
  display: block;
  color: var(--vf-ink);
  font-family: var(--vf-font-head);
  font-size: 1.55rem;
  letter-spacing: .1em;
  text-decoration: none;
}

.nr-footer-brand > span {
  display: block;
  margin-top: 4px;
  color: var(--vf-ink);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nr-footer-brand p { max-width: 370px; margin: 20px 0 0; color: var(--vf-ink-2); font-size: .88rem; line-height: 1.55; }

.nr-site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nr-site-footer nav strong { margin-bottom: 4px; color: var(--vf-ink); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.nr-site-footer nav a { color: var(--vf-ink-2); font-size: .78rem; text-decoration: none; }
.nr-site-footer nav a:hover { color: var(--vf-ink); text-decoration: underline; }
.nr-site-footer-inner > small {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid var(--vf-ink);
  color: var(--vf-mute);
  font-size: .7rem;
}

@media (max-width: 980px) {
  .nr-masthead { grid-template-columns: minmax(230px, auto) minmax(210px, 1fr) auto; gap: 14px; }
  .nr-site-header .nr-edition { display: none; }
  .nr-header-actions a:first-child { display: inline-flex; }
  .nr-record-note { display: none; }
  .nr-site-footer-inner { grid-template-columns: 1.2fr repeat(3, .7fr); gap: 25px; }
}

@media (max-width: 700px) {
  .nr-masthead {
    grid-template-columns: 1fr auto;
    gap: 11px 14px;
    padding: 11px 14px 12px;
  }
  .nr-site-header .nr-brand-main { font-size: 23px; }
  .nr-site-header .nr-flag-bars { display: none; }
  .nr-site-header .nr-nav-search { grid-column: 1 / -1; grid-row: 2; }
  .nr-header-actions a { min-height: 34px; padding-inline: 11px; font-size: .69rem; }
  /* The Plans link would push Sign in onto a second row at phone width; phones reach plans from the footer. */
  .nr-header-actions .nr-plans-link { display: none; }
  .nr-primary-row { padding: 0 14px; }
  .nr-site-header .nr-nav { gap: 22px; }
  .nr-site-header .nr-nav a { font-size: .76rem; }
  .nr-site-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 22px; padding: 32px 20px 23px; }
  .nr-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .nr-site-header .nr-brand-main { font-size: 21px; }
  .nr-site-header .nr-brand-star { width: 19px; height: 19px; }
  .nr-header-actions a { padding-inline: 9px; }
  .nr-site-footer-inner { grid-template-columns: 1fr 1fr; }
  .nr-site-footer nav:first-of-type { grid-column: 1 / -1; }
}

/* Retire the last light inserts that survived earlier page-module passes. */
.newsroom-tracker .nr-signal-method { border-color: var(--vf-rule); background: var(--vf-bg); color: var(--vf-ink); }
.newsroom-tracker .nr-signal-method header p,
.newsroom-tracker .nr-signal-method article p,
.newsroom-tracker .nr-signal-method footer { color: var(--vf-ink-2); }
.newsroom-tracker .nr-signal-method > .shell > div { border-color: var(--vf-rule); background: var(--vf-rule); }
.newsroom-tracker .nr-signal-method article { background: var(--vf-surface); }
.newsroom-tracker .nr-signal-method article p strong { color: var(--vf-ink); }
.newsroom-tracker .nr-signal-method footer a { color: var(--vf-blue-text); }
.newsroom-state .nr-state-zip { border-top: 1px solid var(--vf-rule); background: var(--vf-bg); color: var(--vf-ink); }
.newsroom-state .nr-state-zip h2 { color: var(--vf-ink); }
.newsroom-state .nr-state-zip p { color: var(--vf-ink-2); }
.newsroom-state .nr-state-zip input { border-color: var(--vf-rule-strong); background: var(--vf-surface); color: var(--vf-ink); }
.newsroom-state .nr-state-zip input::placeholder { color: var(--vf-ink-2); }
.newsroom-home .nr-visual-brief img { filter: none; }
.newsroom-home .nr-visual-brief i { top: 10px; right: 10px; left: auto; transform: none; border-color: color-mix(in srgb, var(--vf-ink) 75%, transparent); background: color-mix(in srgb, var(--vf-bg) 66%, transparent); }
.newsroom-home .nr-visual-brief > div > a { height: auto; aspect-ratio: 16 / 10; }
.newsroom-home .nr-visual-brief > div > a::after { inset: 38% 0 0; }
.newsroom-home .nr-visual-brief strong { bottom: 40px; }
.newsroom-home .nr-visual-brief small { bottom: 14px; }
.pos--YEA { color: var(--vf-green-text); background: var(--vf-green-soft); }
.pos--NAY { color: var(--vf-red-text); background: var(--vf-red-soft); }
.pos--NV { color: var(--vf-ink); background: var(--vf-surface-2); }
.nr-search-suggest [role="option"][aria-selected="true"],
.nr-search-suggest [role="option"]:focus-visible { background: var(--vf-surface-2) !important; color: var(--vf-ink); }
.newsroom-state .nr-state-hero > img { filter: saturate(.96) contrast(1.04) brightness(1); }
.newsroom-history .nr-history-latest-grid header img { filter: brightness(1) saturate(.9); }
.newsroom-project .nr-p25-areas img,
.newsroom-project .nr-p25-scope-grid img { filter: brightness(1) saturate(.9); }
.newsroom-member .nr-member-latest-grid img { filter: brightness(1) saturate(.85); }
.newsroom-eo .nr-eo-hero > img { filter: brightness(1) saturate(.86); }
.newsroom-history .nr-history-method,
.newsroom-presidential .nr-pres-status-explainer,
.newsroom-eo-archive .nr-eoa-status { border-color: var(--vf-rule); background: var(--vf-bg); color: var(--vf-ink); }
.newsroom-history .nr-history-method h2,
.newsroom-presidential .nr-pres-status-explainer h2,
.newsroom-presidential .nr-pres-status-explainer strong,
.newsroom-eo-archive .nr-eoa-status h2,
.newsroom-eo-archive .nr-eoa-status article > strong { color: var(--vf-ink); }
.newsroom-history .nr-history-method p,
.newsroom-presidential .nr-pres-status-explainer .nr-detail-section-head p,
.newsroom-presidential .nr-pres-status-explainer p,
.newsroom-eo-archive .nr-eoa-status article > p { color: var(--vf-ink-2); }
.newsroom-history .nr-history-method a { color: var(--vf-blue-text); }
.newsroom-presidential .nr-pres-status-explainer > .shell > div:last-child,
.newsroom-eo-archive .nr-eoa-status .shell > div:last-child { border-color: var(--vf-rule-strong); }
.newsroom-presidential .nr-pres-status-explainer article,
.newsroom-eo-archive .nr-eoa-status article { border-color: var(--vf-rule-strong); background: var(--vf-surface); }
.newsroom-eo .js-eo-text { border-color: var(--vf-rule-strong); background: var(--vf-surface); color: var(--vf-ink); }
.newsroom-eo .js-eo-text h2,
.newsroom-eo .js-eo-text h3 { color: var(--vf-ink); }
.newsroom-eo .js-eo-text a { color: var(--vf-blue-text); }
.nr-court-collage > a { position: relative; height: 145px; overflow: hidden; border: 1px solid var(--vf-rule); color: var(--vf-ink); }
.nr-court-collage > a::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,var(--vf-bg)); }
.nr-court-collage > a > i { position: absolute; z-index: 3; right: 14px; bottom: 12px; color: var(--vf-mute); font-style: normal; }
.nr-court-collage > a:hover,.nr-court-collage > a:focus-visible { border-color: var(--vf-blue); }
@media(max-width:900px){.nr-court-collage > a:first-child{grid-column:1/-1}}
@media(max-width:620px){.nr-court-collage > a{height:165px}.nr-court-collage > a:first-child{grid-column:auto}}
.newsroom-watchlist .nr-watch-hero,
.newsroom-search .nr-search-hero { background: var(--vf-bg); }
.newsroom-watchlist .nr-watch-hero > img,
.newsroom-search .nr-search-hero > img { object-position: 62% 44%; }

/* Keep the accepted v6 focal points on the live consumers reviewed in the crop sheet. */
.nr-bill-v2-hero > img { object-position: 65% 43%; }
.nr-case-v2-hero > img { object-position: 62% 43%; }
.newsroom-scotus-case .nr-case-v2-hero > img,
.newsroom-scotus-hub .nr-scotus-hero > img { object-position: 67% 38%; }
.newsroom-presidential .nr-pres-hero > img,
.newsroom-eo .nr-eo-hero > img,
.newsroom-eo-archive .nr-eoa-hero > img { object-position: 60% 43%; }
.newsroom-project .nr-p25-hero > img { object-position: 63% 45%; }
.newsroom-courts .nr-courts-hero { background-position: center, 54% 40%; }
.newsroom-home .nr-action-tracker article:nth-child(1) img,
.newsroom-member .nr-member-latest-grid > :nth-child(1) img { object-position: 60% 43%; }
.newsroom-home .nr-action-tracker article:nth-child(2) img,
.newsroom-project .nr-p25-scope-grid > :nth-child(1) img { object-position: 60% 43%; }
.newsroom-home .nr-action-tracker article:nth-child(3) img,
.newsroom-vote-card .vc-regional > figure img { object-position: 62% 43%; }
.newsroom-history .nr-history-mosaic > :nth-child(1) img,
.newsroom-member .nr-member-latest-grid > :nth-child(2) img { object-position: 65% 43%; }
.newsroom-history .nr-history-mosaic > :nth-child(2) img { object-position: 60% 43%; }
.newsroom-history .nr-history-mosaic > :nth-child(3) img,
.newsroom-tracker .nr-tracker-watch a:nth-child(1) img,
.newsroom-watchlist .nr-watch-starters a:nth-child(2) img { object-position: 67% 38%; }
.newsroom-tracker .nr-tracker-watch a:nth-child(2) img,
.newsroom-watchlist .nr-watch-starters a:nth-child(3) img { object-position: 63% 45%; }
.newsroom-tracker .nr-tracker-watch a:nth-child(3) img { object-position: 65% 44%; }
.newsroom-watchlist .nr-watch-starters a:nth-child(4) img { object-position: 60% 43%; }

/* Universal search: grouped header suggestions and the Ctrl/Cmd-K palette (js/app.js). */
.nr-search-suggest { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.nr-search-suggest h3, .vf-cmdk-list h3 { margin: 0; padding: 9px 15px 4px; color: var(--vf-ink-2); font: 800 .66rem/1.2 var(--vf-font-body); letter-spacing: .08em; text-transform: uppercase; }
.nr-search-suggest [role="option"], .vf-cmdk-list [role="option"] { position: relative; display: block; padding: 10px 15px 10px 42px; border-bottom: 1px solid var(--vf-surface-2); color: var(--vf-ink); text-decoration: none; }
.nr-search-suggest [role="option"] i, .vf-cmdk-list [role="option"] i { position: absolute; left: 15px; top: 12px; width: 18px; color: var(--vf-mute); font-style: normal; text-align: center; }
.nr-search-suggest [role="option"]:hover { background: var(--vf-surface); }
.nr-search-suggest .nr-search-all, .vf-cmdk-list .nr-search-all { padding-left: 15px; border-bottom: 0; background: var(--vf-blue-soft); color: var(--vf-ink); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.vf-search-note { margin: 0; padding: 10px 15px; color: var(--vf-amber-text); font-size: .75rem; }
.vf-cmdk { width: min(640px, calc(100vw - 32px)); max-height: min(78vh, 680px); margin: 10vh auto auto; padding: 0; border: 1px solid var(--vf-rule-strong); border-radius: 0; background: var(--vf-bg); color: var(--vf-ink); box-shadow: none; overflow: hidden; }
.vf-cmdk[open] { display: flex; flex-direction: column; }
.vf-cmdk::backdrop { background: color-mix(in srgb, var(--vf-bg) 72%, transparent); }
.vf-cmdk form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--vf-surface-2); }
.vf-cmdk input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--vf-ink); font-size: 1.05rem; outline: none; }
.vf-cmdk input:focus-visible { box-shadow: inset 0 -2px 0 var(--vf-blue); }
.vf-cmdk-close { min-width: 44px; min-height: 44px; border: 1px solid var(--vf-rule); border-radius: 0; background: var(--vf-surface); color: var(--vf-ink-2); font-size: .72rem; cursor: pointer; }
.vf-cmdk-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.vf-cmdk-list > p { margin: 0; padding: 18px; color: var(--vf-ink-2); }
.vf-cmdk-list span { display: block; color: var(--vf-mute); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.vf-cmdk-list strong { display: block; margin-top: 3px; font: 1rem/1.25 var(--vf-font-body); }
.vf-cmdk-list small { display: block; margin-top: 3px; overflow: hidden; color: var(--vf-ink-2); font-size: .74rem; white-space: nowrap; text-overflow: ellipsis; }
.vf-cmdk-list [role="option"]:hover, .vf-cmdk-list [role="option"][aria-selected="true"] { background: var(--vf-surface-2); }
.vf-cmdk footer { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--vf-surface-2); color: var(--vf-ink-2); font-size: .7rem; }
.vf-cmdk kbd { padding: 1px 5px; margin-right: 3px; border: 1px solid var(--vf-rule); border-radius: 0; font: inherit; }
@media (max-width: 640px) {
  .vf-cmdk { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .vf-cmdk footer { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .vf-cmdk[open] { animation: vf-cmdk-in .12s ease-out; } }
@keyframes vf-cmdk-in { from { opacity: 0; transform: translateY(-6px); } }

/* Email alerts signup (shared/email_signup.php vf_signup_form_html): the footer copy on every page
   and the /subscribe.php form. The honeypot must never be seen or filled by a person: a filled
   honeypot is refused as a bot. Its markup also carries an inline off-screen style as a fallback. */
.vf-signup-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.vf-signup-form { display: grid; gap: 10px; max-width: 420px; margin-top: 10px; }
.vf-signup-form > label { display: block; font-size: .82rem; }
.vf-signup-form input[type="email"], .vf-signup-form input[type="text"] { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--vf-mute); border-radius: 0; background: var(--vf-surface); color: var(--vf-ink); font: inherit; font-size: .9rem; }
.vf-signup-lists { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.vf-signup-lists legend { margin-bottom: 4px; padding: 0; font-size: .82rem; font-weight: 700; }
.vf-signup-list-choice, .vf-signup-form > label.vf-signup-age { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; }
.vf-signup-list-choice input, .vf-signup-age input { margin-top: 3px; }
.vf-signup-form .btn { justify-self: start; }
.vf-signup-legal { margin: 0; font-size: .74rem; line-height: 1.5; }
.nr-site-footer .vf-signup-legal a { color: var(--vf-ink); }

/* Sections menu: every section hub from every page (section.php). A native details element, so it works
   without scripts; js/app.js only adds Escape and click-away closing. It sits before the scrolling link row
   so the panel is never clipped by that row. */
.nr-primary-row { position: relative; }
.nr-sections { flex: 0 0 auto; align-self: stretch; display: flex; }
.nr-sections > summary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 0;
  cursor: pointer;
  list-style: none;
  color: var(--vf-on-navy);
  font: 700 14px/1 var(--vf-font-body);
  letter-spacing: .01em;
}
.nr-sections > summary::-webkit-details-marker { display: none; }
.nr-sections > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 2px 0 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform var(--vf-ease, .16s ease);
}
.nr-sections[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.nr-sections > summary.is-current { box-shadow: inset 0 -2px 0 var(--vf-gold); }
.nr-sections-panel {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: clamp(8px, 2vw, 30px);
  width: min(760px, calc(100% - 16px));
  padding: 14px;
  border: 1px solid var(--vf-rule);
  border-radius: var(--vf-radius, 16px);
  background: var(--vf-surface);
  box-shadow: var(--vf-shadow);
}
.nr-sections-panel ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.nr-site-header .nr-sections-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--vf-radius-sm, 10px);
  color: var(--vf-ink);
  font: 600 .9375rem/1.2 var(--vf-font-body);
}
.nr-site-header .nr-sections-panel a:hover { background: var(--vf-surface-2); text-decoration: underline; text-decoration-color: var(--vf-gold); text-underline-offset: 4px; }
.nr-site-header .nr-sections-panel a[aria-current="page"] { background: var(--vf-navy); color: var(--vf-on-navy); }
.nr-site-header .nr-sections > summary:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: -3px; }

/* "Find your officeholders" (vf_chrome_zip_find): one ZIP field in the Sections menu, the footer and the section hubs. */
.nr-zip-find { display: grid; gap: 6px; max-width: 420px; margin: 0; }
.nr-zip-find label { color: var(--vf-ink-strong); font: 700 .9375rem/1.25 var(--vf-font-body); }
.nr-zip-row { display: flex; gap: 8px; }
.nr-zip-find input[type="text"] { flex: 0 1 11rem; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--vf-rule-strong); border-radius: var(--vf-radius-sm, 10px); background: var(--vf-surface); color: var(--vf-ink); font: 600 1rem/1 var(--vf-font-body); }
.nr-zip-find input[type="text"]:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 2px; }
.nr-zip-find .btn { flex: 0 0 auto; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--vf-radius-pill); background: var(--vf-action); color: var(--vf-on-accent); font: 700 .9375rem/1 var(--vf-font-body); letter-spacing: .01em; text-transform: none; cursor: pointer; }
.nr-zip-find .btn:is(:hover, :focus-visible) { background: var(--vf-action-strong); color: var(--vf-on-accent); }
.nr-zip-find .btn:focus-visible { outline: 3px solid var(--vf-gold); outline-offset: 2px; }
.nr-zip-find small { color: var(--vf-mute); font: 400 .8125rem/1.4 var(--vf-font-body); }
.nr-sections-panel .nr-zip-find { max-width: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vf-rule); }
.nr-site-footer .nr-footer-zip { grid-column: 1 / -1; }
.nr-site-footer .nr-footer-zip .nr-zip-find label { color: var(--vf-gold); font: 700 11px/1.3 var(--vf-font-body); letter-spacing: .12em; text-transform: uppercase; }
.nr-site-footer .nr-footer-zip .nr-zip-find small { color: var(--vf-on-navy-mute); }
.nr-site-footer .nr-footer-zip .nr-zip-find input[type="text"] { border-color: var(--vf-navy-3); }
.nr-site-footer .nr-footer-zip .nr-zip-find .btn { background: var(--vf-gold); color: var(--vf-ink-strong); }
.nr-site-footer .nr-footer-zip .nr-zip-find .btn:is(:hover, :focus-visible) { background: var(--vf-gold-soft); color: var(--vf-ink-strong); }

.nr-site-footer .nr-footer-sections { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-top: 4px; }
.nr-site-footer .nr-footer-sections > span { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nr-site-footer .nr-footer-sections strong { margin: 0 4px 0 0; }

@media (max-width: 700px) {
  .nr-sections > summary { min-height: 44px; }
  .nr-sections-panel { left: 8px; width: calc(100% - 16px); padding: 10px; }
  .nr-sections-panel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
}
@media (max-width: 330px) {
  .nr-sections-panel ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Sponsor placements (stage N9, shared/sponsorships.php): one component for every slot. The SPONSORED label is always part of it. ---- */
.sp-slot { margin: 18px 0; padding: 12px 16px; border: 1px solid var(--vf-rule-strong); border-radius: var(--vf-radius); background: var(--vf-surface); color: var(--vf-ink); font: 400 1rem/1.5 var(--vf-font-body); }
.sp-slot .sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sp-slot .nh-tag { display: inline-block; padding: 5px 9px; border-radius: var(--vf-radius-pill); background: var(--vf-surface); color: var(--vf-ink); box-shadow: inset 0 0 0 1.5px var(--vf-ink-2); font: 800 .6875rem/1 var(--vf-font-body); letter-spacing: .1em; text-transform: uppercase; }
.sp-slot .sp-by { color: var(--vf-ink-2); font-size: .9375rem; }
.sp-slot .sp-by strong { color: var(--vf-ink-strong); }
.sp-slot .sp-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 0; color: var(--vf-blue-text); text-decoration: none; }
.sp-slot a.sp-body .sp-line { text-decoration: underline; text-underline-offset: 3px; }
.sp-slot .sp-line { font: 400 1.0625rem/1.45 var(--vf-font-head); color: var(--vf-blue-text); overflow-wrap: anywhere; }
.sp-slot span.sp-body .sp-line { color: var(--vf-ink); }
.sp-slot .sp-logo { display: block; max-width: 160px; height: auto; max-height: 56px; width: auto; }
.sp-slot .sp-why { display: inline-block; margin: 6px 0 0; color: var(--vf-mute); font-size: .8125rem; text-underline-offset: 3px; }
.sp-slot a:focus-visible { outline: 3px solid var(--vf-blue); outline-offset: 2px; }
.nr-site-footer .nr-footer-sponsor { grid-column: 1 / -1; max-width: 640px; }
.nr-site-footer .nr-footer-sponsor .sp-slot { margin: 6px 0 0; background: var(--vf-surface); color: var(--vf-ink); }
.nr-site-footer .nr-footer-sponsor .sp-slot a { color: var(--vf-blue-text); }
.nr-site-footer .nr-footer-sponsor .sp-slot .sp-why { color: var(--vf-mute); }
@media (max-width: 480px) { .sp-slot { padding: 12px; } }