/* The Builds app is mounted inside XenForo, with dialogs portaled to body.
   Scope the seasonal bridge to this child style and those two app boundaries;
   product icons and release/status colors retain their functional meanings. */
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) {
  --color-primary: var(--wf50-accent);
  --color-secondary: var(--wf50-accent);
  --color-accent: var(--wf50-accent);
  --color-background: var(--wf50-canvas);
  --color-backgroundSecondary: var(--wf50-subtle);
  --color-backgroundTertiary: var(--wf50-subtle);
  --color-backgroundElevated: var(--wf50-surface);
  --color-backgroundHover: var(--wf50-subtle);
  --color-surface: var(--wf50-surface);
  --color-surfaceHover: var(--wf50-subtle);
  --color-surfaceActive: var(--wf50-accent-soft);
  --color-surfaceBorder: var(--wf50-border);
  --color-text: var(--wf50-ink);
  --color-textSecondary: var(--wf50-secondary);
  --color-textTertiary: var(--wf50-muted);
  --color-textInverse: var(--wf50-on-accent);
  --color-gray-50: var(--wf50-surface);
  --color-gray-100: var(--wf50-subtle);
  --color-gray-200: var(--wf50-border);
  --color-gray-300: var(--wf50-border);
  --color-gray-400: var(--wf50-muted);
  --color-gray-500: var(--wf50-muted);
  --color-gray-600: var(--wf50-muted);
  --color-gray-700: var(--wf50-secondary);
  --color-gray-800: var(--wf50-ink);
  --color-gray-900: var(--wf50-ink);
  --color-gray-950: var(--wf50-ink);
  color: var(--wf50-ink);
}
#XF[data-wf-halloween="1"].dark :is(#windows-builds-root, .wf-modal-layer) {
  --color-gray-50: var(--wf50-ink);
  --color-gray-100: var(--wf50-ink);
  --color-gray-200: var(--wf50-ink);
  --color-gray-300: var(--wf50-secondary);
  --color-gray-400: var(--wf50-muted);
  --color-gray-500: var(--wf50-muted);
  --color-gray-600: var(--wf50-border);
  --color-gray-700: var(--wf50-subtle);
  --color-gray-800: var(--wf50-surface);
  --color-gray-900: var(--wf50-surface);
  --color-gray-950: var(--wf50-canvas);
}

#XF[data-wf-halloween="1"] #windows-builds-root .wf-app-shell {
  background: var(--wf50-surface);
  color: var(--wf50-ink);
  border: 1px solid var(--wf50-border);
  border-radius: var(--wf50-radius, 10px);
}
#XF[data-wf-halloween="1"] #windows-builds-root:has(> .wb-ssr) {
  background: var(--wf50-surface);
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) [class~="bg-white"] {
  background-color: var(--wf50-surface);
}
#XF[data-wf-halloween="1"].dark :is(#windows-builds-root, .wf-modal-layer) [class~="dark:bg-white"] {
  background-color: var(--wf50-accent-soft);
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(.glass, .glass-dark) {
  background: var(--wf50-surface);
  color: var(--wf50-ink);
  border-color: var(--wf50-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(.card-shadow, .card-shadow-lg) {
  box-shadow: var(--wf-halloween-panel-shadow);
}
#XF[data-wf-halloween="1"] #windows-builds-root .wf-product-tabs {
  background: var(--wf50-subtle);
  border: 1px solid var(--wf50-border);
}
#XF[data-wf-halloween="1"] #windows-builds-root .wf-product-tab {
  color: var(--wf50-secondary);
}
#XF[data-wf-halloween="1"] #windows-builds-root .wf-product-tab:hover {
  background: var(--wf50-accent-soft);
  color: var(--wf50-ink);
}
#XF[data-wf-halloween="1"] #windows-builds-root .wf-product-tab[aria-selected="true"] {
  background: var(--wf50-accent);
  color: var(--wf50-on-accent);
  box-shadow: none;
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a)[class~="bg-blue-500"],
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a)[class~="bg-secondary"],
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a)[class~="bg-accent"],
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) button[aria-pressed="true"] {
  background: var(--wf50-accent);
  color: var(--wf50-on-accent);
  border-color: var(--wf50-accent);
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a)[class~="bg-blue-500"]:hover,
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a)[class~="bg-secondary"]:hover,
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a)[class~="bg-accent"]:hover {
  background: var(--wf50-accent-hover);
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) .gradient-text,
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) a[class*="text-blue-"] {
  color: var(--wf50-accent);
}
#XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wf50-accent);
  outline-offset: 2px;
}

/* The crawlable first paint and permanent build pages use native templates. */
#XF[data-wf-halloween="1"] .wb-ssr {
  background: var(--wf50-surface);
  color: var(--wf50-ink);
  border: 1px solid var(--wf50-border);
  border-radius: var(--wf50-radius, 10px);
}
#XF[data-wf-halloween="1"] .wb-ssr h2,
#XF[data-wf-halloween="1"] .wbb :is(.wbb-buildNumber, .wbb-title) {
  color: var(--wf50-ink);
}
#XF[data-wf-halloween="1"] .wb-ssr :is(.wb-ssr-meta, .wb-ssr-note, .wb-ssr-lines) {
  color: var(--wf50-muted);
}
#XF[data-wf-halloween="1"] .wb-ssr a {
  color: var(--wf50-accent);
}
#XF[data-wf-halloween="1"] .wb-ssr :is(.wb-ssr-nav, .wb-ssr-list li) {
  border-color: var(--wf50-border);
}
#XF[data-wf-halloween="1"] .wbb {
  --wbb-muted: var(--wf50-muted);
  --wbb-accent: var(--wf50-accent);
  color: var(--wf50-ink);
}
#XF[data-wf-halloween="1"] .wbb :is(.wbb-lineNote, .wbb-pill:not(.wbb-pill--release):not(.wbb-pill--preview):not(.wbb-pill--beta):not(.wbb-pill--experimental), .wbb-kind:not(.wbb-kind--issue):not(.wbb-kind--fix):not(.wbb-kind--coverage):not(.wbb-kind--howto)) {
  background-color: var(--wf50-subtle);
  color: var(--wf50-ink);
}
#XF[data-wf-halloween="1"] .wbb .wbb-item {
  border-color: var(--wf50-divider);
}

@media (max-width: 900px) {
  #XF.wf-phone[data-wf-halloween="1"].template-windowsbuilds_builds .p-body-inner.wf4-shellCanvas {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 12px 24px !important;
  }
}
@media (forced-colors: active) {
  #XF[data-wf-halloween="1"] :is(#windows-builds-root, .wf-modal-layer) {
    --color-primary: Highlight;
    --color-secondary: Highlight;
    --color-accent: Highlight;
    --color-surface: Canvas;
    --color-text: CanvasText;
  }
  #XF[data-wf-halloween="1"] :is(#windows-builds-root .wf-app-shell, #windows-builds-root .glass, .wf-modal-layer [role="dialog"], .wb-ssr) {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
}