/* Semantic appearance layer. Loaded after brand tokens, before components.
   Brand blocks live on html only; profile accent overrides remain locally scoped. */
:root {
  color-scheme: light;
  --color-surface-elevated: var(--color-surface);
  --color-input: var(--color-surface);
  --color-placeholder: var(--color-text-muted);
  --color-focus: #2563eb;
  --color-inverse: #fff;
  --color-on-primary: #fff;
  --color-danger: #b42318;
  --color-danger-soft: #fff0ef;
  --color-warning-soft: #fff6df;
  --color-focus-ring:0 0 0 3px color-mix(in srgb,var(--color-focus) 30%,transparent);
  --color-disabled: var(--color-surface-soft);
  --color-success: #14704d;
  --color-warning: #8a5705;
  --color-tooltip: #162137;
  --color-overlay: rgb(11 18 32 / 48%);
  --color-primary-soft: var(--color-surface-lavender);
  --color-primary-hover: var(--color-primary-dark);
  --color-button-disabled:var(--color-surface-soft);
  --color-deep-surface: #162137;
  --color-paper: var(--color-surface);
  --color-soft-white: color-mix(in srgb, var(--color-surface) 85%, transparent);
  --color-glass-border: var(--color-border);
  --layer-header: 50;
  --layer-dock: 100;
  --layer-sheet: 1000;
  --layer-drawer: 5000;
  --layer-dialog: 6000;
  --layer-toast: 7000;
  --mobile-dock-height: 74px;
  --mobile-dock-gap: 12px;
  --mobile-dock-clearance: 0px;
  --warning-soft: var(--color-warning-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
}
html[data-color-mode="dark"] {
  color-scheme: dark;
  --color-background: #0b1220;
  --color-surface: #121c2e;
  --color-surface-elevated: #162137;
  --color-surface-soft: #18243a;
  --color-surface-lavender: #1d2e4b;
  --color-text: #eef4ff;
  --color-text-muted: #a8b8d1;
  --color-text-faint: #94a6c2;
  --color-ink: var(--color-text);
  --color-ink-2: #cfddf5;
  --color-ink-3: #b6c9ed;
  --color-primary: #89b1ff;
  --color-primary-dark: #b1cbff;
  --color-primary-mid: #6b9dff;
  --color-primary-light: #b1cbff;
  --color-accent: #6b9dff;
  --color-blue: var(--color-primary);
  --color-blue-soft: var(--color-surface-lavender);
  --color-lavender: #6584b9;
  --color-border: #2b3a53;
  --color-border-strong: #4b607f;
  --color-input: #152239;
  --color-focus: #91b6ff;
  --color-on-primary: #0b1220;
  --color-success: #70dab1;
  --color-success-soft: #12352e;
  --color-warning: #ffd18a;
  --color-warning-soft: #382d1b;
  --color-danger: #ffaaa5;
  --color-danger-soft: #3a222b;
  --color-overlay: rgb(3 8 18 / 70%);
  --glass: rgb(18 28 46 / 94%);
  --glass-strong: rgb(22 33 55 / 96%);
  --glass-line: var(--color-border);
  --glass-1: var(--glass);
  --glass-2: var(--glass-strong);
  --glass-3: var(--glass-strong);
  --glass-4: var(--color-surface-elevated);
  --soft-hover: var(--color-surface-soft);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 12%);
  --shadow-sm: 0 6px 20px rgb(0 0 0 / 18%);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 24%);
  --shadow-lg: 0 24px 48px rgb(0 0 0 / 28%);
  --shadow-search: var(--shadow-md);
  --control-bg: var(--color-input);
  --control-border: var(--color-border-strong);
  --control-hover-bg: var(--color-surface-soft);
  --control-readonly-bg: var(--color-disabled);
}
html[data-theme="women"][data-color-mode="dark"] {
  --color-primary: #c5a3ff;
  --color-primary-dark: #dcc5ff;
  --color-primary-mid: #b287ef;
  --color-primary-light: #dcc5ff;
  --color-accent: #b287ef;
  --color-surface-lavender: #2c2344;
}
/* Avoid bright ambient radial layers and expensive blur on ordinary cards. */
html[data-color-mode="dark"] body {background-image: none;}
html[data-color-mode="dark"] :is(.glass-card,.dash-panel,.dash-card,.metric-card,.plan-card) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.appearance-settings {padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);min-width:0; margin: 8px}
.appearance-heading {display:grid;gap:3px;margin-bottom:10px;color:var(--color-text);font-size:.85rem;}
.appearance-heading small {color:var(--color-text-muted);font-size:.75rem;}
.appearance-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--color-surface-soft);}
.appearance-options button {display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:8px 4px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--color-text-muted);font:inherit;font-size:.8rem;cursor:pointer;}
.appearance-options button[aria-pressed="true"] {background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border);box-shadow:var(--shadow-xs);}
.appearance-options button:focus-visible {outline:3px solid var(--color-focus);outline-offset:2px;}
/* Single, reusable appearance control for all headers, including 320px devices. */
.appearance-menu {position:relative;flex:0 0 auto;}
.appearance-menu > summary {display:grid;place-items:center;list-style:none;width:44px;height:44px;padding:0;border:1px solid var(--color-border);border-radius:13px;background:var(--color-surface);color:var(--color-primary);cursor:pointer;font:inherit;}
.appearance-menu > summary::-webkit-details-marker {display:none;}
.appearance-menu > summary i {font-size:20px;line-height:1;}
.appearance-menu > summary .visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.appearance-menu > summary:hover,.appearance-menu[open] > summary {border-color:var(--color-border-strong);background:var(--color-surface-soft);}
.appearance-menu > summary:focus-visible {outline:3px solid var(--color-focus);outline-offset:2px;}
.appearance-menu-panel {position:absolute;inset-inline-end:0;top:calc(100% + 9px);width:300px;max-width:calc(100vw - 24px);z-index:var(--layer-sheet);box-shadow:var(--shadow-lg);border-radius:var(--radius-md);}
.appearance-menu-panel > .appearance-settings {background:var(--color-surface-elevated);}
@media(max-width:767px) {
  .appearance-menu > summary {width:40px;height:40px;border-radius:12px;}
  .appearance-menu-panel {position:fixed;top:calc(66px + env(safe-area-inset-top,0px));inset-inline:12px;width:min(300px,calc(100vw - 24px));margin-inline:auto;max-height:calc(100dvh - 96px);overflow:auto;}
}

/* Semantic common native/Bootstrap popups; images and map tiles stay untouched. */
html[data-color-mode="dark"] :is(.dropdown-menu,.popover,.modal-content,.tooltip-inner,.leaflet-popup-content-wrapper,.leaflet-control a,jdp-container) {background:var(--color-surface-elevated);color:var(--color-text);border-color:var(--color-border);}
html[data-color-mode="dark"] :is(.dropdown-item,.popover-header,.popover-body,.modal-header,.modal-footer) {color:var(--color-text);background-color:var(--color-surface-elevated);border-color:var(--color-border);}
html[data-color-mode="dark"] .table {--bs-table-bg:var(--color-surface);--bs-table-color:var(--color-text);--bs-table-border-color:var(--color-border);--bs-table-striped-bg:var(--color-surface-soft);--bs-table-hover-bg:var(--color-surface-soft);}
html[data-color-mode="dark"] :is(input,textarea,select)::placeholder {color:var(--color-placeholder);opacity:1;}
html[data-color-mode="dark"] input:-webkit-autofill {-webkit-text-fill-color:var(--color-text);-webkit-box-shadow:0 0 0 1000px var(--color-input) inset;}
html[data-color-mode="dark"] :is(input,textarea,select):disabled {background:var(--color-disabled);color:var(--color-text-muted);}
html[data-color-mode="dark"] .site-footer {background:var(--color-deep-surface);}
html[data-color-mode="dark"] .btn-primary {color:var(--color-on-primary);}
@supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))) {
  :is(.site-header,.dash-bottom,.site-dock,.nav-drawer-panel,.sheet,.modal-content) {background:var(--color-surface-elevated);}
}