/* One accessible preference control across public pages and the app. */
[data-appearance-control][hidden] { display: none !important; }
.appearance-setting { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--fg-1); font: 400 14px/1.4 var(--font-sans); }
.appearance-setting select { appearance: auto; min-height: 44px; min-width: 112px; width: auto; margin: 0; padding: 8px 12px; border: 1px solid var(--line-input); border-radius: var(--r-sm); background: var(--bg-1); color: var(--fg-0); font: inherit; cursor: pointer; }
.appearance-setting select:hover { background: var(--bg-2); }
.appearance-setting select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.foot { flex-wrap: wrap; align-items: center; }

/* Existing Clerk elements remain functional. Their appearance configuration
 * uses these same tokens, including components rendered in portals. */
:root[data-theme="light"] .cl-userButtonPopoverActionButton:hover { background: var(--bg-3); }

/* Transitional public illustrations retain their artwork. Copy and interactive
 * surfaces share the readable appearance while their redesign is in progress. */
:root[data-theme="light"] { --accent-2: #195f9b; --accent-2-soft: rgba(25, 95, 155, 0.06); --accent-2-line: rgba(25, 95, 155, 0.28); --canvas-blue: #eff3f6; --panel-deep: #f3f3f0; --panel-raised: #ffffff; --signal-glow: none; }
:root[data-theme="light"] .eyebrow { color: var(--info); }
:root[data-theme="light"] .hero h1 .dim { color: var(--info); }
:root[data-theme="light"] .lede { color: var(--fg-1); }
:root[data-theme="light"] .site-foot { background: var(--bg-2); }
:root[data-theme="light"] :is(.compare-transfer, .branch-console, .guard-simulator, .artifact-atlas, .artifact-browser, .evidence-proof) { background: var(--bg-1); }
:root[data-theme="light"] :is(.branch-switch, .guard-controls, .artifact-index) { background: var(--bg-2); }
:root[data-theme="light"] .pres.bad { background: var(--danger-soft); }
:root[data-theme="light"] .nav-pill { background: var(--bg-1); border-color: var(--line-strong); box-shadow: var(--e-2); }
:root[data-theme="light"] .btn-solid { box-shadow: none; }
:root[data-theme="light"] .trust-path-notes li:nth-child(2) span { color: var(--warn); }
:root[data-theme="light"] .trust-path-notes li:nth-child(3) span { color: var(--info); }
:root[data-theme="light"] .trust-path-notes li:nth-child(4) span { color: var(--accent); }

/* Preserve solid material and contrast preferences in both appearances. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="light"] { --material-thin: #ffffff; --material: #ffffff; --material-thick: #ffffff; --material-blur: none; }
}
@media (prefers-contrast: more) {
  :root[data-theme="light"] { --fg-1: #30303a; --fg-2: #40404b; --fg-3: #40404b; --line: #8b8b93; --line-strong: #74747e; --material: #ffffff; --material-thick: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-setting select { transition: none; }
}