/* Opt-in dark theme shared by consumer, messaging, profile, and MI templates.
   Keep selectors scoped to data-theme so existing browser users stay Light by default. */
html[data-theme="dark"] {
  color-scheme: dark;
  background: #111820;
  color: #e9edf0;
  --bb-bg: #111820;
  --bb-surface: #1d2832;
  --bb-surface-raised: #24323e;
  --bb-text: #e9edf0;
  --bb-muted: #b3c0ca;
  --bb-border: #43515d;
  --bb-link: #9fc9ed;
  --bb-control: #18232c;
  --bb-accent: #c4d0ff;
  --bb-success-bg: #183b2b;
  --bb-success-text: #c4f1d0;
  --bb-warning-bg: #493916;
  --bb-warning-text: #ffe4a3;
  --bb-danger-bg: #4b252d;
  --bb-danger-text: #ffd3d9;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-bg,
html[data-theme="dark"] main,
html[data-theme="dark"] #app,
html[data-theme="dark"] #content,
html[data-theme="dark"] .page-container { background-color: var(--bb-bg); color: var(--bb-text); }
html[data-theme="dark"] body::before { background: rgba(9, 15, 21, .78) !important; }
html[data-theme="dark"] header,
html[data-theme="dark"] nav,
html[data-theme="dark"] footer,
html[data-theme="dark"] aside,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="sidebar"],
html[data-theme="dark"] [class*="header"],
html[data-theme="dark"] [class*="nav"],
html[data-theme="dark"] [class*="dropdown"],
html[data-theme="dark"] [class*="menu"],
html[data-theme="dark"] [class*="modal"],
html[data-theme="dark"] [class*="dialog"],
html[data-theme="dark"] [class*="popover"],
html[data-theme="dark"] [class*="brief"],
html[data-theme="dark"] [class*="story"],
html[data-theme="dark"] [class*="message"],
html[data-theme="dark"] [class*="contact"],
html[data-theme="dark"] [class*="profile"],
html[data-theme="dark"] [class*="setting"],
html[data-theme="dark"] [class*="alert"],
html[data-theme="dark"] [class*="toast"],
html[data-theme="dark"] [class*="loading"] {
  color: var(--bb-text);
  border-color: var(--bb-border);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="modal"],
html[data-theme="dark"] [class*="dialog"],
html[data-theme="dark"] [class*="dropdown"],
html[data-theme="dark"] [class*="popover"],
html[data-theme="dark"] [class*="menu"],
html[data-theme="dark"] [class*="sidebar"],
html[data-theme="dark"] .chat-top-bar,
html[data-theme="dark"] .chat-input,
html[data-theme="dark"] .message-bubble,
html[data-theme="dark"] .profile-dropdown,
html[data-theme="dark"] .mi-header,
html[data-theme="dark"] .mi-footer {
  background-color: var(--bb-surface);
}
html[data-theme="dark"] .container,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .content-card { background-color: var(--bb-surface); color: var(--bb-text); }
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background:#f8f9fa" i],
html[data-theme="dark"] [style*="background: #f8f9fa" i],
html[data-theme="dark"] [style*="background-color:#f8f9fa" i],
html[data-theme="dark"] [style*="background-color: #f8f9fa" i],
html[data-theme="dark"] [style*="background:#f8fafc" i],
html[data-theme="dark"] [style*="background: #f8fafc" i],
html[data-theme="dark"] [style*="background:#f9f9f9" i],
html[data-theme="dark"] [style*="background: #f9f9f9" i],
html[data-theme="dark"] [style*="background:#fafafa" i],
html[data-theme="dark"] [style*="background: #fafafa" i],
html[data-theme="dark"] [style*="background:#f5f5f5" i],
html[data-theme="dark"] [style*="background: #f5f5f5" i],
html[data-theme="dark"] [style*="background:#f0f0f0" i],
html[data-theme="dark"] [style*="background: #f0f0f0" i],
html[data-theme="dark"] [style*="background:#f0f4ff" i],
html[data-theme="dark"] [style*="background: #f0f4ff" i],
html[data-theme="dark"] [style*="background-color:#f0f4ff" i],
html[data-theme="dark"] [style*="background-color: #f0f4ff" i] {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text) !important;
}
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#4b5563"],
html[data-theme="dark"] [style*="color: #4b5563"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"] { color: var(--bb-text) !important; }
html[data-theme="dark"] [style*="color:#222" i],
html[data-theme="dark"] [style*="color: #222" i],
html[data-theme="dark"] [style*="color:#293241" i],
html[data-theme="dark"] [style*="color: #293241" i],
html[data-theme="dark"] [style*="color:#111827" i],
html[data-theme="dark"] [style*="color: #111827" i] { color: var(--bb-text) !important; }
html[data-theme="dark"] [style*="color:#0055aa" i],
html[data-theme="dark"] [style*="color: #0055aa" i],
html[data-theme="dark"] [style*="color:#667eea" i],
html[data-theme="dark"] [style*="color: #667eea" i],
html[data-theme="dark"] [style*="color:#64748b" i],
html[data-theme="dark"] [style*="color: #64748b" i],
html[data-theme="dark"] [style*="color:#4f5fc4" i],
html[data-theme="dark"] [style*="color: #4f5fc4" i] { color: var(--bb-accent) !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option,
html[data-theme="dark"] [contenteditable="true"] {
  background-color: var(--bb-control);
  color: var(--bb-text);
  border-color: var(--bb-border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #a5b2bc; opacity: 1; }
html[data-theme="dark"] a { color: var(--bb-link); }
html[data-theme="dark"] a:hover { color: #c6e3fa; }
html[data-theme="dark"] hr,
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] fieldset { border-color: var(--bb-border); }
html[data-theme="dark"] th,
html[data-theme="dark"] tr:nth-child(even) { background-color: var(--bb-surface-raised); }
html[data-theme="dark"] button:not([class*="primary"]):not(.btn):not(#send-btn),
html[data-theme="dark"] [role="button"]:not([class*="primary"]) {
  color: var(--bb-text);
  border-color: var(--bb-border);
}
html[data-theme="dark"] button:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled { opacity: .65; }
html[data-theme="dark"] :focus-visible { outline-color: #9fc9ed; }
html[data-theme="dark"] .message.sent .message-bubble,
html[data-theme="dark"] .btn,
html[data-theme="dark"] #send-btn { color: #fff; }
html[data-theme="dark"] .message-time { color: var(--bb-muted); }
html[data-theme="dark"] .contact:hover,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] [role="menuitem"]:hover { background-color: var(--bb-surface-raised); }
html[data-theme="dark"] .contact.active { background-color: #203b50; }
html[data-theme="dark"] #status.connecting { background: #4c4022; color: #ffe6a3; }
html[data-theme="dark"] #status.error { background: #512d33; color: #ffd7dc; }
html[data-theme="dark"] #status.success { background: #244632; color: #c8f3d2; }
html[data-theme="dark"] img,
html[data-theme="dark"] video { color-scheme: light; }
html[data-theme="dark"] ::selection { background: #365c78; color: #fff; }

/* Dashboard dispatches and their shared Event Brief content. The old light theme
   uses .dispatch rather than a card class, so it needs an explicit surface rule. */
html[data-theme="dark"] .dispatch:not(.in-feed-ad),
html[data-theme="dark"] .event-brief-card,
html[data-theme="dark"] .sitrep-preview,
html[data-theme="dark"] .event-flow,
html[data-theme="dark"] .event-flow-brief,
html[data-theme="dark"] .event-flow-step,
html[data-theme="dark"] .event-update-flow,
html[data-theme="dark"] .arc-history-list,
html[data-theme="dark"] .follow-row,
html[data-theme="dark"] .saved-brief,
html[data-theme="dark"] .saved-item {
  background: var(--bb-surface) !important;
  color: var(--bb-text);
  border-color: var(--bb-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .24);
}
html[data-theme="dark"] .dispatch:not(.in-feed-ad):hover,
html[data-theme="dark"] .follow-row:hover,
html[data-theme="dark"] .saved-brief:hover,
html[data-theme="dark"] .saved-item:hover { background: var(--bb-surface-raised) !important; }
html[data-theme="dark"] .dispatch-header,
html[data-theme="dark"] .story-page-header { border-color: var(--bb-border); }
html[data-theme="dark"] .dispatch-header h2,
html[data-theme="dark"] .dispatch h1,
html[data-theme="dark"] .dispatch h2,
html[data-theme="dark"] .dispatch h3,
html[data-theme="dark"] .dispatch h4,
html[data-theme="dark"] .event-brief-card h1,
html[data-theme="dark"] .event-brief-card h2,
html[data-theme="dark"] .event-brief-card h3,
html[data-theme="dark"] .eb-headline,
html[data-theme="dark"] .story-title { color: var(--bb-text) !important; }
html[data-theme="dark"] .dispatch p,
html[data-theme="dark"] .dispatch li,
html[data-theme="dark"] .dispatch .five-w,
html[data-theme="dark"] .dispatch .fivew-val,
html[data-theme="dark"] .event-brief-card p,
html[data-theme="dark"] .eb-summary,
html[data-theme="dark"] .eb-5w-val,
html[data-theme="dark"] .story-meta,
html[data-theme="dark"] .story-page-wrap { color: var(--bb-text); }
html[data-theme="dark"] .dispatch .five-w strong,
html[data-theme="dark"] .dispatch p strong,
html[data-theme="dark"] .dispatch .five-w p strong,
html[data-theme="dark"] .dispatch .fivew-label,
html[data-theme="dark"] .dispatch .fivew-row strong,
html[data-theme="dark"] .eb-5w-label,
html[data-theme="dark"] .eb-filed,
html[data-theme="dark"] .eb-mi-blurb,
html[data-theme="dark"] .eb-trust-signal,
html[data-theme="dark"] .story-meta time,
html[data-theme="dark"] .filed-time,
html[data-theme="dark"] .updated-time { color: var(--bb-muted); }
/* Explicitly override dashboard.css's light-mode .fivew-value color (#555).
   Keep the label rule above unchanged; answers share the Event Brief body color. */
html[data-theme="dark"] .dispatch .fivew-value,
html[data-theme="dark"] .eb-5w-val {
  color: var(--bb-text) !important;
}
html[data-theme="dark"] .dispatch .links a,
html[data-theme="dark"] .dispatch .sources-list a,
html[data-theme="dark"] .event-brief-card a,
html[data-theme="dark"] .eb-trust-link,
html[data-theme="dark"] .eb-filed-label,
html[data-theme="dark"] .eb-summary-label,
html[data-theme="dark"] .dispatch .five-w strong,
html[data-theme="dark"] .dispatch .fivew-row strong,
html[data-theme="dark"] .event-arc-publisher-attribution a,
html[data-theme="dark"] .sitrep-history-link,
html[data-theme="dark"] .story-page-header a { color: var(--bb-link) !important; }
html[data-theme="dark"] .dispatch .sources-list a,
html[data-theme="dark"] .dispatch .tag,
html[data-theme="dark"] .dispatch-tags .tag,
html[data-theme="dark"] .dispatch .story-tag { background-color: var(--bb-surface-raised); }
html[data-theme="dark"] .dispatch .tag,
html[data-theme="dark"] .dispatch-tags .tag,
html[data-theme="dark"] .dispatch .story-tag { color: var(--bb-accent) !important; }
html[data-theme="dark"] .updated-badge {
  background-color: var(--bb-success-bg) !important;
  color: var(--bb-success-text) !important;
  border: 1px solid #35694a;
}
html[data-theme="dark"] .source-chip {
  background-color: var(--bb-surface-raised) !important;
  color: var(--bb-accent) !important;
  border: 1px solid var(--bb-border);
}
html[data-theme="dark"] .event-arc-summary { color: var(--bb-accent) !important; }
html[data-theme="dark"] .event-arc-note { color: var(--bb-muted) !important; }
html[data-theme="dark"] .dispatch .event-arc-publisher-attribution,
html[data-theme="dark"] .dispatch .sources-dropdown,
html[data-theme="dark"] .dispatch .source-timeline,
html[data-theme="dark"] .dispatch .story-history,
html[data-theme="dark"] .event-arc-publisher-attribution,
html[data-theme="dark"] .arc-history-list,
html[data-theme="dark"] #sitrep-modal-5ws,
html[data-theme="dark"] #sitrep-modal-event-arc { background-color: var(--bb-surface-raised) !important; color: var(--bb-text); }

/* Keep weather data labels, metric blocks, and time-machine controls legible. */
html[data-theme="dark"] .weather-brief,
html[data-theme="dark"] .weather-brief-metric,
html[data-theme="dark"] .weather-brief-primary,
html[data-theme="dark"] .weather-brief-modal,
html[data-theme="dark"] .weather-brief-time-machine { background-color: var(--bb-surface); color: var(--bb-text); }
html[data-theme="dark"] .weather-brief-heading,
html[data-theme="dark"] .weather-brief-location,
html[data-theme="dark"] .weather-published,
html[data-theme="dark"] .weather-brief-condition,
html[data-theme="dark"] .weather-brief-metric strong,
html[data-theme="dark"] .weather-brief-temperature { color: var(--bb-text); }
html[data-theme="dark"] .weather-brief-publication-label,
html[data-theme="dark"] .weather-brief-condition small,
html[data-theme="dark"] .weather-brief-metric small,
html[data-theme="dark"] .weather-brief-times,
html[data-theme="dark"] .weather-brief-sources,
html[data-theme="dark"] .weather-brief-metric-label { color: var(--bb-muted); }
html[data-theme="dark"] .weather-brief-sources a,
html[data-theme="dark"] .weather-brief a { color: var(--bb-link); }
html[data-theme="dark"] .weather-brief button,
html[data-theme="dark"] .weather-brief-time-machine button { background-color: var(--bb-surface-raised); color: var(--bb-text); border-color: var(--bb-border); }

html[data-theme="dark"] .dispatch.in-feed-ad {
  background: linear-gradient(135deg, #302714 0%, #3c3018 100%) !important;
  color: var(--bb-warning-text);
  border-left-color: #c58b2f !important;
}
html[data-theme="dark"] .dispatch.in-feed-ad [style*="background" i] { background-color: #493916 !important; color: var(--bb-warning-text) !important; }
html[data-theme="dark"] .dispatch.in-feed-ad [style*="color" i] { color: var(--bb-warning-text) !important; }

/* Dashboard filters and shared modal/menu surfaces. Keep the branded header
   and its white controls unchanged; these rules target only light page surfaces. */
html[data-theme="dark"] .dashboard-subfilters a,
html[data-theme="dark"] .mybriefs-subfilters a,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .filter-tab,
html[data-theme="dark"] .filter-active,
html[data-theme="dark"] .modal-pagination,
html[data-theme="dark"] .region-filter a,
html[data-theme="dark"] .topic-filter a { background-color: var(--bb-surface-raised) !important; color: var(--bb-text) !important; border-color: var(--bb-border) !important; text-shadow: none; }
html[data-theme="dark"] .dashboard-subfilters a.active,
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .filter-tab.active,
html[data-theme="dark"] .region-filter a.active,
html[data-theme="dark"] .topic-filter a.active { background-color: #334b61 !important; color: #fff !important; border-color: #7892ad !important; }
html[data-theme="dark"] .share-modal-content,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .share-modal-header,
html[data-theme="dark"] .profile-dropdown,
html[data-theme="dark"] .profile-dropdown-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .menu-panel { background-color: var(--bb-surface) !important; color: var(--bb-text); border-color: var(--bb-border); }
html[data-theme="dark"] .share-modal-header h2,
html[data-theme="dark"] .share-modal-content h1,
html[data-theme="dark"] .share-modal-content h2,
html[data-theme="dark"] .share-modal-content h3,
html[data-theme="dark"] .modal-content h1,
html[data-theme="dark"] .modal-content h2,
html[data-theme="dark"] .modal-content h3 { color: var(--bb-text) !important; }
html[data-theme="dark"] .share-modal-content p,
html[data-theme="dark"] .share-modal-content li,
html[data-theme="dark"] .modal-content p,
html[data-theme="dark"] .profile-dropdown-info,
html[data-theme="dark"] .profile-dropdown-info a { color: var(--bb-text); }
html[data-theme="dark"] .modal-actions,
html[data-theme="dark"] .modal-actions button:not(.btn-send):not(.btn-primary) { border-color: var(--bb-border); }

/* Messaging has a page-specific stylesheet with a white drawer and chat panes. */
html[data-theme="dark"] #chat-app,
html[data-theme="dark"] .chat-sidebar,
html[data-theme="dark"] .chat-main,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .drawer-nav,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .chat-top-bar,
html[data-theme="dark"] .chat-input,
html[data-theme="dark"] .contact-item,
html[data-theme="dark"] .contact,
html[data-theme="dark"] .drawer-nav-item,
html[data-theme="dark"] .drawer-toggle-item { background-color: var(--bb-surface) !important; color: var(--bb-text); border-color: var(--bb-border); }
html[data-theme="dark"] .drawer-nav-item:hover,
html[data-theme="dark"] .drawer-toggle-item:hover,
html[data-theme="dark"] .contact:hover { background-color: var(--bb-surface-raised) !important; }
html[data-theme="dark"] .message.received .message-bubble,
html[data-theme="dark"] .message-bubble:not(.priority-flash):not(.priority-priority):not(.priority-admin) { background-color: var(--bb-surface-raised) !important; color: var(--bb-text); }
html[data-theme="dark"] .message.sent .message-bubble { background-color: #4655aa !important; color: #fff !important; }
html[data-theme="dark"] .message-bubble.priority-flash { background-color: #49252d !important; color: #ffe0e4 !important; border-color: #dc5864; }
html[data-theme="dark"] .message-bubble.priority-priority { background-color: #493316 !important; color: #ffe7c2 !important; border-color: #e39435; }
html[data-theme="dark"] .message-bubble.priority-admin { background-color: var(--bb-surface-raised) !important; color: var(--bb-text) !important; }
html[data-theme="dark"] .contact-status-dot,
html[data-theme="dark"] .message-time,
html[data-theme="dark"] #empty-state,
html[data-theme="dark"] .drawer-nav-label,
html[data-theme="dark"] .chat-header p { color: var(--bb-muted); }
html[data-theme="dark"] .chat-input input,
html[data-theme="dark"] .chat-input textarea,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] #inbox-search,
html[data-theme="dark"] #list-member-search { background-color: var(--bb-control) !important; color: var(--bb-text) !important; border-color: var(--bb-border) !important; }
html[data-theme="dark"] .inbox-section-title { color: var(--bb-muted) !important; }
html[data-theme="dark"] .inbox-section-title-separated { border-color: var(--bb-border) !important; }
html[data-theme="dark"] .inbox-user-option:hover { background-color: var(--bb-surface-raised) !important; }
html[data-theme="dark"] button.bookmark-button { background-color: var(--bb-surface-raised) !important; border-color: var(--bb-border) !important; color: var(--bb-accent) !important; }
html[data-theme="dark"] button.bookmark-button.is-bookmarked { background-color: #334b61 !important; border-color: #7892ad !important; color: #fff !important; }

/* Profile and authentication forms. Preserve colored primary actions and use
   semantic colors for success/error states rather than turning them gray. */
html[data-theme="dark"] form label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .profile-photo-selected,
html[data-theme="dark"] .links a { color: var(--bb-text); }
html[data-theme="dark"] .container .title,
html[data-theme="dark"] .container .subtitle,
html[data-theme="dark"] .container .panel-title,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .profile-photo-note,
html[data-theme="dark"] .profile-photo-editor { color: var(--bb-text) !important; }
html[data-theme="dark"] .error,
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .status-error { background-color: var(--bb-danger-bg) !important; color: var(--bb-danger-text) !important; border-color: #82424c; }
html[data-theme="dark"] .success,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .status-success { background-color: var(--bb-success-bg) !important; color: var(--bb-success-text) !important; border-color: #35694a; }
html[data-theme="dark"] .warning,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .status-warning { background-color: var(--bb-warning-bg) !important; color: var(--bb-warning-text) !important; border-color: #80652b; }
html[data-theme="dark"] #signup-flash.flash-status-error { background-color: var(--bb-danger-bg) !important; color: var(--bb-danger-text) !important; }
html[data-theme="dark"] #signup-flash.flash-status-success { background-color: var(--bb-success-bg) !important; color: var(--bb-success-text) !important; }
html[data-theme="dark"] #alerts-label { color: var(--bb-accent) !important; }

html[data-theme="dark"] .event-brief-card .eb-headline,
html[data-theme="dark"] .event-brief-card .eb-summary,
html[data-theme="dark"] .event-brief-card .eb-filed,
html[data-theme="dark"] .event-brief-card .eb-5w-val,
html[data-theme="dark"] .event-brief-card .eb-trust-signal { color: var(--bb-text) !important; }
html[data-theme="dark"] .event-brief-card .eb-label,
html[data-theme="dark"] .event-brief-card .eb-5w-label,
html[data-theme="dark"] .event-brief-card .eb-mi-blurb { color: var(--bb-muted) !important; }
html[data-theme="dark"] .story-page-wrap hr,
html[data-theme="dark"] .event-brief-card hr { border-color: var(--bb-border); }


/* Dashboard ad-free sidebars should read as part of the page, not as ad slots. */
html[data-theme="dark"] .sidebar-content:has(.ad-free-panel) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .sidebar-content:has(.ad-free-panel) .ad-free-panel,
html[data-theme="dark"] .sidebar-content:has(.ad-free-panel) .ad-free-panel > div {
  color: var(--bb-muted) !important;
  background: transparent !important;
  border: 0 !important;
}

/* The dashboard publisher attribution contains light inline colors. Keep its
   introduction/note muted, its section heading readable, and links accented. */
html[data-theme="dark"] .dispatch .event-arc-publisher-attribution {
  color: var(--bb-muted) !important;
}
html[data-theme="dark"] .dispatch .event-arc-publisher-attribution details > div {
  color: var(--bb-text) !important;
}
html[data-theme="dark"] .dispatch .event-arc-publisher-attribution details > summary {
  color: var(--bb-link) !important;
}
html[data-theme="dark"] .dispatch .event-arc-publisher-attribution details > div > p {
  color: var(--bb-muted) !important;
}


/* The shared dark surface selector also paints the outer sidebar flex items.
   When they contain the ad-free acknowledgment, let the page background show. */
html[data-theme="dark"] .sidebar:has(.ad-free-panel) {
  background: transparent !important;
}