/* Homepage panel controls and notifications — isolated overlay, 2026-10-02. */

/* The appearance/settings control is a panel-level control, not a page-level tile. */
html[data-private-mode][data-private-mode][data-private-mode][data-private-mode] body button.privateThemeToggle {
  background-color:var(--private-final-panel)!important;
  background-image:var(--private-panel-fill)!important;
  border:1px solid var(--private-final-border)!important;
  color:var(--private-final-text)!important;
  -webkit-text-fill-color:var(--private-final-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 4px 10px var(--private-final-shadow)!important;
  filter:none!important;
  text-shadow:none!important;
}

html[data-private-mode][data-private-mode][data-private-mode][data-private-mode] body button.privateThemeToggle :is(svg,svg *) {
  color:var(--private-final-text)!important;
  stroke:currentColor!important;
}

html[data-private-mode][data-private-mode][data-private-mode][data-private-mode] body button.privateThemeToggle:is(:hover,:focus-visible,[aria-expanded="true"]) {
  background-color:var(--private-final-hover)!important;
  background-image:var(--private-hover-fill)!important;
  border-color:var(--private-accent,var(--private-final-text))!important;
  color:var(--private-final-text)!important;
  -webkit-text-fill-color:var(--private-final-text)!important;
  outline:none!important;
}

/* Notification cards use the same raised panel surface as the surrounding block. */
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block,
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block:is(:hover,:focus-within) {
  background-color:var(--private-final-panel)!important;
  background-image:var(--private-panel-fill)!important;
  border:1px solid var(--private-final-border)!important;
  border-left:3px solid color-mix(in srgb,var(--private-final-muted) 72%,transparent)!important;
  color:var(--private-final-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 4px 10px var(--private-final-shadow)!important;
}

html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block.info{border-left-color:#5e9ed6!important;}
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block.success{border-left-color:#65b982!important;}
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block.warning{border-left-color:#d4aa50!important;}
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block.error{border-left-color:#ce6873!important;}

/* Header and close controls also belong to the panel surface. */
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>.block_head>.btn,
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block>.icon-remove {
  background-color:var(--private-final-panel)!important;
  background-image:var(--private-panel-fill)!important;
  border:1px solid var(--private-final-border)!important;
  color:var(--private-final-text)!important;
  -webkit-text-fill-color:var(--private-final-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 3px 8px var(--private-final-shadow)!important;
  opacity:1!important;
  text-shadow:none!important;
}

html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>.block_head>.btn:is(:hover,:focus-visible),
html[data-private-home-depth][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line>#notifications>.noty-block.noty-block>.icon-remove:is(:hover,:focus-visible) {
  background-color:var(--private-final-hover)!important;
  background-image:var(--private-hover-fill)!important;
  border-color:var(--private-accent,var(--private-final-text))!important;
  color:var(--private-final-text)!important;
  -webkit-text-fill-color:var(--private-final-text)!important;
  outline:none!important;
}

/* Preserve group/user colours. Solid inline colours stay solid. */
html[data-private-mode][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line #notifications .noty-block [style*="color"] {
  -webkit-text-fill-color:currentColor!important;
}

/* Gradient usernames intentionally need a transparent glyph fill. Keep this rule last. */
html[data-private-mode][data-private-mode][data-private-mode][data-private-mode][data-private-mode] body .wapper #notifications_line #notifications .noty-block [style*="-webkit-text-fill-color"] {
  -webkit-text-fill-color:transparent!important;
}