/* Seven optional themes. Default intentionally keeps every original style. */
html[data-theme="teal"],
html[data-theme="blue"],
html[data-theme="purple"],
html[data-theme="forest"],
html[data-theme="sunset"],
html[data-theme="black-white"] {
  --theme-card: #FFFFFF;
  --theme-nav: #FFFFFF;
  --theme-raised: #FFFFFF;
  --theme-subtle: #F2F4F7;
  --theme-text: #182230;
  --theme-secondary: #475467;
  --theme-placeholder: #667085;
  --theme-icon: #475467;
  --theme-border: #E4E7EC;
  --theme-control-border: #667085;
  --theme-input: #FFFFFF;
  --theme-disabled-bg: #EAECF0;
  --theme-disabled-fg: #616B80;
  --theme-tooltip-bg: #182230;
  --theme-tooltip-fg: #FFFFFF;
  --theme-photo-bg: rgba(0,0,0,0.72);
  --theme-photo-fg: #FFFFFF;
  --theme-backdrop: rgba(16,24,40,0.55);
  --theme-shadow: rgba(16,24,40,0.08);
  --theme-on-primary: #FFFFFF;
  --theme-success-bg: #ECFDF3;
  --theme-success-fg: #067647;
  --theme-warning-bg: #FFFAEB;
  --theme-warning-fg: #93370D;
  --theme-error-bg: #FEF3F2;
  --theme-error-fg: #B42318;
  --theme-info-bg: #EFF8FF;
  --theme-info-fg: #175CD3;
  --theme-danger: #B42318;
  --theme-danger-hover: #912018;
  --theme-danger-pressed: #7A271A;
  --theme-on-danger: #FFFFFF;
}
html[data-theme="dark"] {
  --theme-card: #181E25;
  --theme-nav: #181E25;
  --theme-raised: #222B35;
  --theme-subtle: #242E3A;
  --theme-text: #F2F4F7;
  --theme-secondary: #BDC6D3;
  --theme-placeholder: #98A2B3;
  --theme-icon: #BDC6D3;
  --theme-border: #394452;
  --theme-control-border: #98A2B3;
  --theme-input: #181E25;
  --theme-disabled-bg: #2A3441;
  --theme-disabled-fg: #98A2B3;
  --theme-tooltip-bg: #F2F4F7;
  --theme-tooltip-fg: #182230;
  --theme-photo-bg: rgba(0,0,0,0.72);
  --theme-photo-fg: #FFFFFF;
  --theme-backdrop: rgba(0,0,0,0.72);
  --theme-shadow: rgba(0,0,0,0.32);
  --theme-on-primary: #10182E;
  --theme-success-bg: #073D30;
  --theme-success-fg: #75E0A7;
  --theme-warning-bg: #4E3015;
  --theme-warning-fg: #FEDF89;
  --theme-error-bg: #4A1D24;
  --theme-error-fg: #FDA29B;
  --theme-info-bg: #183153;
  --theme-info-fg: #B2DDFF;
  --theme-danger: #FDA29B;
  --theme-danger-hover: #FECDCA;
  --theme-danger-pressed: #F97066;
  --theme-on-danger: #10182E;
}
html[data-theme="dark"] {
  --theme-page: #101418;
  --theme-primary: #9DB3FF;
  --theme-primary-hover: #B6C6FF;
  --theme-primary-pressed: #839FFF;
  --theme-selection-bg: #253252;
  --theme-selection-fg: #C7D3FF;
}
html[data-theme="teal"] {
  --theme-page: #F5FAFA;
  --theme-primary: #087F8C;
  --theme-primary-hover: #066773;
  --theme-primary-pressed: #05535D;
  --theme-selection-bg: #E8F6F6;
  --theme-selection-fg: #066773;
}
html[data-theme="blue"] {
  --theme-page: #F8FAFF;
  --theme-primary: #355CFF;
  --theme-primary-hover: #2948D6;
  --theme-primary-pressed: #203BAF;
  --theme-selection-bg: #EEF2FF;
  --theme-selection-fg: #2948D6;
}
html[data-theme="purple"] {
  --theme-page: #FAF8FD;
  --theme-primary: #6941C6;
  --theme-primary-hover: #5733A8;
  --theme-primary-pressed: #452887;
  --theme-selection-bg: #F2EDFF;
  --theme-selection-fg: #5733A8;
}
html[data-theme="forest"] {
  --theme-page: #F7F9F5;
  --theme-primary: #175C45;
  --theme-primary-hover: #124B38;
  --theme-primary-pressed: #0D3A2B;
  --theme-selection-bg: #EAF3ED;
  --theme-selection-fg: #175C45;
}
html[data-theme="sunset"] {
  --theme-page: #FCF8F4;
  --theme-primary: #B54730;
  --theme-primary-hover: #973925;
  --theme-primary-pressed: #7A2E1E;
  --theme-selection-bg: #FFF0E8;
  --theme-selection-fg: #973925;
}
html[data-theme="black-white"] {
  --theme-page: #FAFAFA;
  --theme-primary: #171717;
  --theme-primary-hover: #333333;
  --theme-primary-pressed: #000000;
  --theme-selection-bg: #EEEEEE;
  --theme-selection-fg: #171717;
}
html[data-theme="teal"],
html[data-theme="blue"],
html[data-theme="purple"],
html[data-theme="forest"],
html[data-theme="sunset"],
html[data-theme="black-white"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* Shared first-party colour roles. Specific module surfaces are mapped in
   themes-components.css and themes-planning.css; geometry remains in original CSS. */

html[data-theme]:not([data-theme="default"]) {
  --ink: var(--theme-text);
  --navy: var(--theme-text);
  --muted: var(--theme-secondary);
  --purple: var(--theme-primary);
  --purple-2: var(--theme-primary-pressed);
  --teal: var(--theme-primary);
  --orange: var(--theme-warning-fg);
  --red: var(--theme-danger);
  --card: var(--theme-card);
  --line: var(--theme-border);
  --soft-purple: var(--theme-subtle);
  --soft-teal: var(--theme-selection-bg);
  --soft-orange: var(--theme-warning-bg);
  --shadow: 0 22px 70px var(--theme-shadow);
  background-color: var(--theme-page);
  color: var(--theme-text);
  scrollbar-color: var(--theme-control-border) var(--theme-page);
}

:where(html[data-theme]:not([data-theme="default"])) body {
  background-color: var(--theme-page);
  color: var(--theme-text);
}
:where(html[data-theme]:not([data-theme="default"])) :is(h1,h2,h3) { color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) ::selection {
  background-color: var(--theme-selection-bg);
  color: var(--theme-selection-fg);
}

/* Foundation actions. Component-owned variants still need their scoped review. */
:where(html[data-theme]:not([data-theme="default"])) .btn.primary {
  background-color: var(--theme-primary); color: var(--theme-on-primary);
  border-color: var(--theme-primary); box-shadow: 0 4px 10px var(--theme-shadow);
}
:where(html[data-theme]:not([data-theme="default"])) .btn.primary:hover:not(:disabled) { background-color: var(--theme-primary-hover); border-color: var(--theme-primary-hover); }
:where(html[data-theme]:not([data-theme="default"])) .btn.primary:active:not(:disabled) { background-color: var(--theme-primary-pressed); border-color: var(--theme-primary-pressed); }
:where(html[data-theme]:not([data-theme="default"])) .btn.secondary {
  background-color: var(--theme-card); color: var(--theme-text); border-color: var(--theme-control-border);
}
:where(html[data-theme]:not([data-theme="default"])) .btn.secondary:hover:not(:disabled) { background-color: var(--theme-subtle); }
:where(html[data-theme]:not([data-theme="default"])) .btn.secondary:active:not(:disabled) { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) .btn.teal { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .btn.ghost { color: var(--theme-primary); }
:where(html[data-theme]:not([data-theme="default"])) .btn.ghost:hover:not(:disabled) { color: var(--theme-primary-hover); }
:where(html[data-theme]:not([data-theme="default"])) .iconbtn { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) :is(.btn.ghost,.iconbtn):hover:not(:disabled) { background-color: var(--theme-subtle); }
:where(html[data-theme]:not([data-theme="default"])) :is(.btn.ghost,.iconbtn):active:not(:disabled) { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) .btn.danger { background-color: var(--theme-danger); color: var(--theme-on-danger); border-color: var(--theme-danger); }
:where(html[data-theme]:not([data-theme="default"])) .btn.danger:hover:not(:disabled) { background-color: var(--theme-danger-hover); border-color: var(--theme-danger-hover); color: var(--theme-on-danger); }
:where(html[data-theme]:not([data-theme="default"])) .btn.danger:active:not(:disabled) { background-color: var(--theme-danger-pressed); border-color: var(--theme-danger-pressed); color: var(--theme-on-danger); }
:where(html[data-theme]:not([data-theme="default"])) :is(.person-actions .btn.teal,.person-card .person-message-action) { background-color: var(--theme-primary); color: var(--theme-on-primary); border-color: var(--theme-primary); }
:where(html[data-theme]:not([data-theme="default"])) :is(.person-actions .btn.teal,.person-card .person-message-action):hover:not(:disabled) { background-color: var(--theme-primary-hover); border-color: var(--theme-primary-hover); }
:where(html[data-theme]:not([data-theme="default"])) :is(.person-actions .btn.teal,.person-card .person-message-action):active:not(:disabled) { background-color: var(--theme-primary-pressed); border-color: var(--theme-primary-pressed); }
:where(html[data-theme]:not([data-theme="default"])) :is(.person-actions .btn.teal,.person-card .person-message-action):disabled { opacity: 1; background-color: var(--theme-disabled-bg); color: var(--theme-disabled-fg); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .btn.tool-back { background-color: var(--theme-card); color: var(--theme-icon); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .btn.tool-back:hover:not(:disabled) { background-color: var(--theme-subtle); }

/* Native controls retain their author-defined layout, fonts and handlers. */
:where(html[data-theme]:not([data-theme="default"])) :is(input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])),select,textarea) {
  color: var(--theme-text); background-color: var(--theme-input); border-color: var(--theme-control-border);
}
:where(html[data-theme]:not([data-theme="default"])) :is(input,textarea)::placeholder { color: var(--theme-placeholder); }
/* State colours outrank later module input surfaces without changing their layout. */
html[data-theme]:not([data-theme="default"]) :is(input,select,textarea):focus { border-color: var(--theme-primary); }
html[data-theme]:not([data-theme="default"]) :is(input,select,textarea):is([aria-invalid="true"],:user-invalid) { border-color: var(--theme-error-fg); }
:where(html[data-theme]:not([data-theme="default"])) :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color: var(--theme-primary); }
/* Browser-drawn check marks do not honour on-primary in dark colour schemes.
   Keep the native 13px intrinsic fallback at zero specificity: existing 18–22px
   author sizes still win. Hidden Settings radios use their parent-card marker. */
:where(html[data-theme]:not([data-theme="default"]) input:is([type="checkbox"],[type="radio"]):not([data-theme-choice])) {
  width: 13px; height: 13px; vertical-align: text-top;
}
:where(html[data-theme]:not([data-theme="default"])) input:is([type="checkbox"],[type="radio"]):not(:where([data-theme-choice])) {
  appearance: none; position: relative; padding: 0;
  border: 1px solid var(--theme-control-border); border-radius: 3px;
  background-color: var(--theme-input); color: var(--theme-on-primary);
}
:where(html[data-theme]:not([data-theme="default"])) input[type="radio"]:not(:where([data-theme-choice])) { border-radius: 50%; }
:where(html[data-theme]:not([data-theme="default"])) input:is([type="checkbox"],[type="radio"]):not(:where([data-theme-choice])):checked,
:where(html[data-theme]:not([data-theme="default"])) input[type="checkbox"]:indeterminate {
  background-color: var(--theme-primary); border-color: var(--theme-primary);
}
:where(html[data-theme]:not([data-theme="default"])) input:is([type="checkbox"],[type="radio"]):not(:where([data-theme-choice]))::before {
  content: ""; position: absolute; inset: 15%; background-color: currentColor;
  visibility: hidden; pointer-events: none;
}
:where(html[data-theme]:not([data-theme="default"])) input[type="checkbox"]:checked::before {
  visibility: visible;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.3 3.3L13 4.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(html[data-theme]:not([data-theme="default"])) input[type="checkbox"]:indeterminate::before {
  visibility: visible; inset: 40% 20%; mask: none; border-radius: 1px;
}
:where(html[data-theme]:not([data-theme="default"])) input[type="radio"]:not(:where([data-theme-choice])):checked::before {
  visibility: visible; inset: 25%; border-radius: 50%;
}
@media (forced-colors: active) {
  :where(html[data-theme]:not([data-theme="default"])) input:is([type="checkbox"],[type="radio"]):not(:where([data-theme-choice])) { appearance: auto; }
  :where(html[data-theme]:not([data-theme="default"])) input:is([type="checkbox"],[type="radio"])::before { content: none; }
}
:where(html[data-theme]:not([data-theme="default"])) input::file-selector-button { background-color: var(--theme-card); color: var(--theme-text); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .field label { color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) .search-field .icon { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) .check { color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) .check input { accent-color: var(--theme-primary); }
/* Only genuine disabled controls lose the inherited opacity treatment. The exact
   supplied foreground/background pair is kept, never opacity on a container. */
:where(html[data-theme]:not([data-theme="default"])) :is(.btn,.iconbtn,.header-icon):disabled,
html[data-theme]:not([data-theme="default"]) :is(input,select,textarea,button):disabled {
  opacity: 1; color: var(--theme-disabled-fg); background-color: var(--theme-disabled-bg); border-color: var(--theme-control-border);
}
/* Explicitly requested focus geometry; Default retains its existing outlines. */
:where(html[data-theme]:not([data-theme="default"])) :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--theme-primary); outline-offset: 2px;
}
:where(html[data-theme]:not([data-theme="default"])) :is(.btn,.iconbtn,.header-icon,.tool-tile,.tool-shortcut,.tool-back):focus-visible,
:where(html[data-theme]:not([data-theme="default"])) .post .post-options>summary:focus-visible {
  outline: 2px solid var(--theme-primary); outline-offset: 2px;
}
:where(html[data-theme]:not([data-theme="default"])) .post-photo-picker:focus-within { outline: 2px solid var(--theme-primary); outline-offset: 2px; }

/* The independent startup guard is pinned byte-for-byte and owns these inline
   colours. These exact colour-only exceptions preserve its layout and hash. */
:where(html[data-theme]:not([data-theme="default"])) #startupRecovery {
  background-color: var(--theme-raised) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}
:where(html[data-theme]:not([data-theme="default"])) #startupReload {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border-color: var(--theme-primary) !important;
}
:where(html[data-theme]:not([data-theme="default"])) #startupReload:hover:not(:disabled) { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; }
:where(html[data-theme]:not([data-theme="default"])) #startupReload:active:not(:disabled) { background-color: var(--theme-primary-pressed) !important; border-color: var(--theme-primary-pressed) !important; }
:where(html[data-theme]:not([data-theme="default"])) #startupReload:disabled { background-color: var(--theme-disabled-bg) !important; color: var(--theme-disabled-fg) !important; border-color: var(--theme-control-border) !important; }

/* Main navigation; the requested noncolour marker is outside normal layout. */
:where(html[data-theme]:not([data-theme="default"])) .topbar { background-color: var(--theme-nav); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .sidebar { background-color: var(--theme-nav); }
:where(html[data-theme]:not([data-theme="default"])) .sidebar-label { color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .sidebar nav button { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) .sidebar nav button:hover:not(.active) { background-color: var(--theme-subtle); }
:where(html[data-theme]:not([data-theme="default"])) .sidebar nav button.active { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) :is(.mobile-nav,.guest-mobile-nav) { background-color: var(--theme-nav); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) :is(.mobile-nav,.guest-mobile-nav) button { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) :is(.mobile-nav,.guest-mobile-nav) button.active { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) .header-icon { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) .header-icon:hover:not(:disabled) { background-color: var(--theme-subtle); }
:where(html[data-theme]:not([data-theme="default"])) .header-icon:active:not(:disabled) { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) :is(.count-badge,.header-count) { background-color: var(--theme-primary); color: var(--theme-on-primary); }
:where(html[data-theme]:not([data-theme="default"])) .kit-due-count { background-color: var(--theme-info-bg); color: var(--theme-info-fg); }
:where(html[data-theme]:not([data-theme="default"])) .skip { background-color: var(--theme-primary); color: var(--theme-on-primary); }
:where(html[data-theme]:not([data-theme="default"])) .community-app .top-profile[aria-current="page"] { background-color: var(--theme-selection-bg); border-color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) :is(.mobile-nav,.guest-mobile-nav) button,
:where(html[data-theme]:not([data-theme="default"])) .home-browse-tabs>button { position: relative; }
:where(html[data-theme]:not([data-theme="default"])) :is(.mobile-nav,.guest-mobile-nav) button.active::after,
:where(html[data-theme]:not([data-theme="default"])) .home-browse-tabs>button[aria-current="page"]::after {
  content: ""; position: absolute; width: 16px; height: 3px;
  inset-inline-start: calc(50% - 8px); inset-block-end: 3px;
  border-radius: 2px; background-color: currentColor; pointer-events: none;
}
:where(html[data-theme]:not([data-theme="default"])) .sidebar nav button.active { text-decoration: underline; text-underline-offset: 3px; }

/* Foundation surfaces. Existing transparent components have greater specificity. */
:where(html[data-theme]:not([data-theme="default"])) .card:not(:where(.stat)) { box-shadow: 0 3px 12px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) :is(.upcoming-card,.request-item,.people-filters) { background-color: var(--theme-card); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .upcoming-card:hover { border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) :is(.privacy-note,.sidebar-note,.match-summary,.empty,.preview-box,.recovery-codes,.recovery-reminder,.account-private-email,.post-targeting,.feed-placeholder) { background-color: var(--theme-subtle); color: var(--theme-secondary); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) :is(.feature-icon,.compare-icon,.empty-icon,.avatar,.profile-avatar) { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) .sidebar-note .feature-icon { background-color: var(--theme-selection-bg); }
:where(html[data-theme]:not([data-theme="default"])) :is(.sidebar-note p,.eyebrow,.hero-fine,.sidebar-label,.stat>span,.like-count,.match-reasons,.person-identity .muted,.post-owner .muted,.photo-size,.footer,.footer-brand) { color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) :is(.stat .icon,.match-reasons .icon) { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) .stat:hover { background-color: var(--theme-subtle); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) :is(.pill,.badge,.reason-chip,.badge.private) { background-color: var(--theme-subtle); color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) :is(.pill.teal,.match-label) { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .pill.orange { background-color: var(--theme-warning-bg); color: var(--theme-warning-fg); }
:where(html[data-theme]:not([data-theme="default"])) .badge.popular { background-color: var(--theme-subtle); color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .score-ring { background: conic-gradient(var(--theme-primary) calc(var(--score)*1%),var(--theme-subtle) 0); color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) .score-ring:before { background-color: var(--theme-card); }
:where(html[data-theme]:not([data-theme="default"])) .activity-score { border-color: var(--theme-border); background-color: var(--theme-subtle); color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .profile-grid .card p b { color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) .post-media { background-color: var(--theme-subtle); }
:where(html[data-theme]:not([data-theme="default"])) :is(.post-actions,.person-actions) { border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .like-btn.liked { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); border-color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) .view-tabs button.active { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }

/* Modal/auth shells: uploaded media, QR contents and provider SVGs are excluded. */
:where(html[data-theme]:not([data-theme="default"])) .modalback { background-color: var(--theme-backdrop); }
:where(html[data-theme]:not([data-theme="default"])) .modal { background-color: var(--theme-raised); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .modal-close { background-color: var(--theme-subtle); color: var(--theme-icon); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .form-actions { background-color: var(--theme-raised); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .social-button { background-color: var(--theme-card); color: var(--theme-text); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .social-button:hover:not(:disabled) { background-color: var(--theme-subtle); }
:where(html[data-theme]:not([data-theme="default"])) .social-button:active:not(:disabled) { background-color: var(--theme-selection-bg); }
:where(html[data-theme]:not([data-theme="default"])) .language-dialog { background-color: var(--theme-raised); border-color: var(--theme-border); box-shadow: 0 20px 70px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) .language-dialog::backdrop { background-color: var(--theme-backdrop); }
:where(html[data-theme]:not([data-theme="default"])) .toast { background-color: var(--theme-info-bg); color: var(--theme-info-fg); }
:where(html[data-theme]:not([data-theme="default"])) .feed-sync-notice { box-shadow: 0 4px 24px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) .post .post-secondary-actions { box-shadow: 0 8px 28px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) .post .post-secondary-actions>[data-post-control="delete"],
:where(html[data-theme]:not([data-theme="default"])) .post .post-secondary-actions>[data-post-control="block"] { color: var(--theme-danger); }

/* Semantic statuses are identical across six light themes, including B&W. */
:where(html[data-theme]:not([data-theme="default"])) .notice { background-color: var(--theme-info-bg); color: var(--theme-info-fg); border-color: var(--theme-info-fg); }
:where(html[data-theme]:not([data-theme="default"])) .notice.warning { background-color: var(--theme-warning-bg); color: var(--theme-warning-fg); border-color: var(--theme-warning-fg); }
:where(html[data-theme]:not([data-theme="default"])) .notice.danger { background-color: var(--theme-error-bg); color: var(--theme-error-fg); border-color: var(--theme-error-fg); }
:where(html[data-theme]:not([data-theme="default"])) .notice.success { background-color: var(--theme-success-bg); color: var(--theme-success-fg); border-color: var(--theme-success-fg); }
:where(html[data-theme]:not([data-theme="default"])) .server-status { background-color: var(--theme-info-bg); color: var(--theme-info-fg); border-color: var(--theme-info-fg); }
:where(html[data-theme]:not([data-theme="default"])) .server-status.online { background-color: var(--theme-success-bg); color: var(--theme-success-fg); border-color: var(--theme-success-fg); }
:where(html[data-theme]:not([data-theme="default"])) .server-status.offline { background-color: var(--theme-warning-bg); color: var(--theme-warning-fg); border-color: var(--theme-warning-fg); }
:where(html[data-theme]:not([data-theme="default"])) :is(.live-dot,.server-status.online:before,.status-note.accepted:before) { background-color: var(--theme-success-fg); }
:where(html[data-theme]:not([data-theme="default"])) .status-note.pending:before { background-color: var(--theme-warning-fg); }
:where(html[data-theme]:not([data-theme="default"])) .status-note:before { background-color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .loading-spinner { border-color: var(--theme-subtle); border-top-color: var(--theme-primary); }

/* Existing public documents rendered by style.css; standalone own roots pending. */
:where(html[data-theme]:not([data-theme="default"])) .document-language a { background-color: var(--theme-card); color: var(--theme-text); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) :is(.document-breadcrumb a,.document-article a,.document-contact a,.footer-links>a,.upcoming-link) { color: var(--theme-primary); }
:where(html[data-theme]:not([data-theme="default"])) :is(.document-breadcrumb a,.document-article a,.document-contact a,.footer-links>a,.upcoming-link):hover { color: var(--theme-primary-hover); }
:where(html[data-theme]:not([data-theme="default"])) :is(.document-article p,.document-contact p) a { text-decoration: underline; }
:where(html[data-theme]:not([data-theme="default"])) .document-article { background-color: var(--theme-card); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .document-article p { color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) .document-article .document-updated { color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .document-article .document-intro { color: var(--theme-text); }
:where(html[data-theme]:not([data-theme="default"])) .document-article .eyebrow { color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .document-contact { background-color: var(--theme-subtle); border-color: var(--theme-border); }

/* Local Teal contrast exception: primary is 4.307:1 on subtle; the existing
   hover/selection foreground is 5.964:1. Primary remains exact everywhere else. */
:where(html[data-theme="teal"]) .document-contact a,
:where(html[data-theme="teal"]) :is(.sidebar-note,.privacy-note,.empty,.preview-box,.recovery-reminder,.account-private-email,.post-targeting,.feed-placeholder) .btn.ghost { color: var(--theme-primary-hover); }

/* Current first-party landing artwork only: unchanged shapes and gradient stops. */
:where(html[data-theme]:not([data-theme="default"])) .hero h1 em { color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) .hero-panel { background: radial-gradient(ellipse,var(--theme-subtle) 0,transparent 70%); }
:where(html[data-theme]:not([data-theme="default"])) .orbit { border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .sample-card { background-color: var(--theme-card); border-color: var(--theme-border); box-shadow: 0 24px 55px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) :is(.sample-label,.sample-bottom) { border-color: var(--theme-border); color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) :is(.sample-avatar.one,.sample-avatar.two,.sample-avatar.three) { background-color: var(--theme-selection-bg); color: var(--theme-selection-fg); }
:where(html[data-theme]:not([data-theme="default"])) :is(.sample-reason,.hobby-note span,.landing-invite p,.welcome-banner .eyebrow) { color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) .hobby-note { background-color: var(--theme-card); border-color: var(--theme-border); box-shadow: 0 9px 20px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) .feature-card { background-color: var(--theme-card); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .feature-top>span { color: var(--theme-secondary); }
:where(html[data-theme]:not([data-theme="default"])) :is(.landing-invite,.welcome-banner) { background-color: var(--theme-subtle); border-color: var(--theme-border); }
:where(html[data-theme]:not([data-theme="default"])) .welcome-banner .btn { background-color: var(--theme-card); border-color: var(--theme-control-border); }
:where(html[data-theme]:not([data-theme="default"])) .banner-art span { background-color: var(--theme-card); border-color: var(--theme-border); box-shadow: 0 7px 20px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) .greeting-mark { color: var(--theme-icon); }
:where(html[data-theme]:not([data-theme="default"])) .tool-tile { box-shadow: 0 2px 6px var(--theme-shadow); }
:where(html[data-theme]:not([data-theme="default"])) .community-app .home-filter-tools>.home-location-filter,
:where(html[data-theme]:not([data-theme="default"])) .community-app .home-filter-tools>.home-sort { background-color: var(--theme-card); border-color: var(--theme-border); }