/* Halloween child only. Native phone markup and scripts own navigation,
   account state, appearance controls and advertising; this layer owns color. */
html#XF.wf-phone[data-wf-shell="4.1"][data-wf-halloween="1"] {
  --wf-phone-bg: var(--wf50-subtle, #baa08a);
  --wf-phone-surface: var(--wf50-surface, #baa492);
  --wf-phone-ink: var(--wf50-ink, #2d201b);
  --wf-phone-muted: var(--wf50-muted, #514138);
  --wf-phone-border: var(--wf50-border, #947b69);
  --wf-phone-blue: var(--wf50-accent, #793f21);
  --wf-halloween-phone-on-accent: var(--wf50-on-accent, #fff3e7);
  background: var(--wf50-canvas, #76533b);
}

/* The scenic identity has its own space above the ad. No figure is buried
   under the responsive ad, which retains its native reserve and serving. */
html#XF.wf-phone[data-wf-shell="4.1"][data-wf-halloween="1"] .p-pageWrapper {
  background-color: var(--wf50-canvas, #76533b) !important;
  background-image: none !important;
  background-attachment: scroll !important;
}
html#XF.wf-phone[data-wf-shell="4.1"][data-wf-halloween="1"] .p-body-inner.wf4-shellCanvas {
  background: transparent;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead {
  position: relative;
  box-sizing: border-box;
  height: 126px;
  min-height: 126px;
  width: calc(100% + 24px);
  max-width: none;
  margin: 0 -12px 12px;
  border-radius: 0;
  background-image: var(--wf-halloween-masthead);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead img {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead-pumpkin {
  width: 80px;
  max-height: 110px;
  max-width: none;
  left: 8px;
  right: auto;
  bottom: 6px;
  top: auto;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead-witch {
  width: 125px;
  max-height: 114px;
  max-width: none;
  right: 8px;
  left: auto;
  top: 4px;
  bottom: auto;
}
html#XF.wf-phone[data-wf-halloween="1"] :is(.wf-halloweenMasthead-web--left, .wf-halloweenMasthead-web--right) {
  width: 60px;
  max-height: 85px;
  max-width: none;
  top: 0;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead-web--left { left: 0; right: auto; }
html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead-web--right { right: 0; left: auto; transform: scaleX(-1); }

/* One composed community header, with the native appearance menu and action.
   The theme has no floating pale title label over detailed artwork. */
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneFeedHead {
  min-height: 0;
  margin: 0 0 12px;
  padding: 12px;
  gap: 10px;
  background: var(--wf-phone-surface);
  color: var(--wf-phone-ink);
  border: 1px solid var(--wf-phone-border);
  border-radius: 12px;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneFeedHead > div:first-child {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneEyebrow { color: var(--wf-phone-muted); }
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneFeedHead h1 { color: var(--wf-phone-ink); }
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneHeadActions {
  width: 100%;
  margin-inline-start: 0;
  justify-content: space-between;
}
html#XF.wf-phone[data-wf-halloween="1"] :is(.wf-phoneNew, .wfsf-tab.is-active) {
  color: var(--wf-halloween-phone-on-accent);
  background: var(--wf-phone-blue);
  border-color: var(--wf-phone-blue);
}
html#XF.wf-phone[data-wf-halloween="1"] .wfsf-tab.is-active::after { background: currentColor; }
html#XF.wf-phone[data-wf-halloween="1"] :is(.wf-phoneTheme, .wf-phoneThemeMenu) {
  background: var(--wf-phone-surface);
  color: var(--wf-phone-ink);
  border-color: var(--wf-phone-border);
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneThemeMenu {
  top: calc(100% + 4px);
  inset-inline-end: 0;
}
html#XF.wf-phone[data-wf-halloween="1"] .p-body-header {
  padding: 12px;
  background: var(--wf-phone-surface);
  color: var(--wf-phone-ink);
  border: 1px solid var(--wf-phone-border);
  border-radius: 12px;
}
html#XF.wf-phone[data-wf-halloween="1"] .p-body-header .p-title-value {
  color: var(--wf-phone-ink);
}
html#XF.wf-phone[data-wf-halloween="1"] .p-body-header .p-description {
  color: var(--wf-phone-muted);
}

/* Long feeds use a single stable reading surface. They do not create a
   multi-thousand-pixel backdrop-filter layer or stack translucent rows. */
html#XF.wf-phone[data-wf-halloween="1"] .wfsf.wfsf.wfsf {
  background: var(--wf-phone-surface);
  border: 1px solid var(--wf-phone-border);
  box-shadow: 0 4px 18px rgba(25, 12, 20, .12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html#XF.wf-phone[data-wf-halloween="1"] .wfsf > .block-container,
html#XF.wf-phone[data-wf-halloween="1"] .wfsf-row:not(.is-mod-selected):not(.is-highlighted) {
  background: transparent;
  border-color: var(--wf-phone-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html#XF.wf-phone[data-wf-halloween="1"] :is(.wfsf-tabs, .wfsf-list) { border-color: var(--wf-phone-border); }
html#XF.wf-phone[data-wf-halloween="1"] :is(.wfsf-compose, .wf-phoneRepairStatus) {
  background: var(--wf-phone-bg);
  border-color: var(--wf-phone-border);
  color: var(--wf-phone-ink);
}
html#XF.wf-phone[data-wf-halloween="1"] :is(.wfsf-postBody, .wfsf-title, .wfsf-author, .wf-phoneFeedAuthor, .wf-phoneFeedTitle) {
  color: var(--wf-phone-ink);
}
html#XF.wf-phone[data-wf-halloween="1"] :is(.wfsf-meta, .wf-phoneFeedMeta, .wf-phoneFeedExcerpt, .wf-phoneFeedCounts) {
  color: var(--wf-phone-muted);
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneTabs {
  background: var(--wf-phone-surface);
  border-color: var(--wf-phone-border);
  box-shadow: 0 -3px 14px rgba(25, 12, 20, .14);
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneTabs a { color: var(--wf-phone-muted); }
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneTabs a[aria-current="page"] { color: var(--wf-phone-blue); }
html#XF.wf-phone[data-wf-halloween="1"] :is(.wf-phonePanel .offCanvasMenu-content, .wf-phoneThemeMenu, .menu-content, .overlay .block-container) {
  background: var(--wf-phone-surface);
  color: var(--wf-phone-ink);
}
html#XF.wf-phone[data-wf-halloween="1"] :is(.wf-phonePanel .offCanvasMenu-header, .wf-phoneAppearance button, .menu-header, .menu-footer) {
  background: var(--wf-phone-bg);
  color: var(--wf-phone-ink);
  border-color: var(--wf-phone-border);
}
html#XF.wf-phone[data-wf-halloween="1"] .wf-phoneAppearance button[aria-pressed="true"] {
  border-color: var(--wf-phone-blue);
  box-shadow: inset 0 0 0 1px var(--wf-phone-blue);
}

@media (max-width: 359px) {
  html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead { height: 112px; min-height: 112px; }
  html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead-pumpkin { width: 70px; }
  html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead-witch { width: 108px; }
  html#XF.wf-phone[data-wf-halloween="1"] :is(.wf-halloweenMasthead-web--left, .wf-halloweenMasthead-web--right) { width: 52px; }
}
@media (forced-colors: active) {
  html#XF.wf-phone[data-wf-shell="4.1"][data-wf-halloween="1"] {
    --wf-phone-bg: Canvas;
    --wf-phone-surface: Canvas;
    --wf-phone-ink: CanvasText;
    --wf-phone-muted: CanvasText;
    --wf-phone-border: CanvasText;
    --wf-phone-blue: Highlight;
    --wf-halloween-phone-on-accent: HighlightText;
  }
  html#XF.wf-phone[data-wf-halloween="1"] .wf-halloweenMasthead { visibility: hidden; }
}
