/* Comparison UI is separate from both scheduling state and the approved baseline. */
#themeComparison { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 12px; }
#themeComparison label { display: flex; align-items: center; gap: 7px; }
#themeComparison select { min-height: 36px; padding: 6px 24px 6px 8px; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text); }
#themeComparison select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#themeComparison [hidden] { display: none; }
.comparison-note { color: var(--muted); }
#comparisonFeedback { color: var(--brand); font-size: 12px; }
body.comparison-enabled .app-shell { height: calc(100dvh - var(--comparison-height, 54px)); }
body.comparison-enabled .application-rail { top: var(--comparison-height, 54px); }
body.comparison-framed { padding: 0 !important; overflow: hidden; }
body.comparison-framed > :is(.app-shell,#employeeMobile,#desktopNavigation,#storageWarning,.toast) { display: none !important; }
#comparisonStage { height: calc(100dvh - var(--comparison-height, 54px)); display: flex; justify-content: center; align-items: stretch; overflow: auto; background: var(--bg); }
#comparisonFrame { display: block; max-width: 100%; height: 100%; border: 0; background: var(--bg); flex: 0 0 auto; }
#comparisonStage[data-view="mobile"] #comparisonFrame { outline: 1px solid var(--line); }
@media(max-width:600px) { #themeComparison { gap: 6px 10px; padding: 7px 10px; } .comparison-note { width: 100%; font-size: 11px; } #themeComparison label { gap: 4px; } #themeComparison select { padding-right: 5px; } }

/* Only nonbaseline themes remap presentation roles. No template/annotation values
   (--accent, --event-color, --swatch, --template-color) are assigned here. */
:root[data-theme="midnight"] {
  --bg: #071317; --panel: #0e2228; --panel-2: #163139; --panel-3: #1e4149;
  --line: #35565f; --line-soft: #233f47; --text: #edf6f6; --muted: #b0c6cb; --subtle: #91acb4;
  --brand: #FFBD65; --theme-cool: #02A0A0; --theme-cool-text: #72d6d4; --theme-cool-wash: #02a0a014;
  --theme-header: #0a1b20; --theme-cell: #0c1e24; --theme-cell-alt: #10272e; --theme-hover: #19373f;
  --theme-card: #243c45; --theme-card-border: #5a7883; --theme-field: #132d35;
  --theme-button: #02A0A0; --theme-button-hover: #28b6b3; --theme-button-text: #03191c;
  --theme-warm: #FFBD65; --theme-warm-wash: #ffbd6514; --theme-on-card: #d6e6e9;
}
:root[data-theme="ocean"] {
  --bg: #101B24; --panel: #192832; --panel-2: #20333F; --panel-3: #294350;
  --line: #415967; --line-soft: #2E4350; --text: #f0f7fc; --muted: #b8cede; --subtle: #a5bfd2;
  --brand: #F59E71; --theme-cool: #C0EBFF; --theme-cool-text: #C0EBFF; --theme-cool-wash: #c0ebff12;
  --theme-header: #14212B; --theme-cell: #12232C; --theme-cell-alt: #172C36; --theme-hover: #283F4B;
  --theme-card: #293F4C; --theme-card-border: #6B8492; --theme-field: #1B303C;
  --theme-button: #C0EBFF; --theme-button-hover: #ddf5ff; --theme-button-text: #002B4C;
  --theme-warm: #F59E71; --theme-warm-wash: #f59e7114; --theme-on-card: #e0edf5;
}
:root[data-theme] { --card-surface: var(--theme-card); }
:root[data-theme] body, :root[data-theme] body.mobile-employee-mode { background: var(--bg); color: var(--text); }
:root[data-theme] :is(.employee-mobile,.em-more-row,.em-empty h3,.employee-mobile h2,.to-request h3,.av-form legend,.av-summary h3,.sm-person,.sm-filters label,.sm-form label,.to-form label,.to-filter) { color: var(--text); }
:root[data-theme] :is(.topbar,.application-rail,.em-bottom-nav,.em-topbar) { background-color: var(--theme-header); border-color: var(--line); }
:root[data-theme] :is(.template-sidebar,.ed-lower > section,.ed-full-grid,.legend-bar,.grid-wrap) { background-color: var(--theme-cell); }
:root[data-theme] :is(.em-more-group,.em-empty,.sa-item,.detail-item,.ss-dialog,#staffDeactivate,.toast,.template-actions > div,.lab-stage,.lab-corner) { background-color: var(--panel); border-color: var(--line); }
:root[data-theme] :is(.employee-mobile,.ed-my,.ed-open) { --subsection-accent: var(--theme-cool); }
:root[data-theme] :is(.em-annotation-row,.sa-shift) { background: var(--panel-2); border-color: var(--line); }
:root[data-theme] dialog { background: var(--panel); color: var(--text); border-color: var(--theme-card-border); }
:root[data-theme] dialog::backdrop { background: #000a; }
:root[data-theme] :is(.grid-cell,.grid-cell.open-row) { background-color: var(--theme-cell); }
:root[data-theme] :is(.grid-cell.weekend,.person-label,.person-label.open-row,.corner,.day-head,.day-head.weekend,.ed-full-grid thead th,.ed-full-grid th:first-child) { background-color: var(--theme-cell-alt); }
:root[data-theme] .week-heading { background-color: var(--theme-header); }
:root[data-theme] .week-actions summary { background-color: var(--panel-2); }
:root[data-theme] .ed-own-row > th { background-color: var(--theme-hover) !important; }
:root[data-theme] body:not(.employee-preview) .grid-cell:not(:has(.shift-card)):hover { background: var(--theme-hover); }
:root[data-theme] :is(.secondary,.segmented button,.em-week-navigation button) { background: var(--panel-2); color: var(--text); border-color: var(--line); }
:root[data-theme] :is(.secondary:hover,.segmented button:hover,.em-week-navigation button:hover,.sm-person:hover,.template-actions button:hover) { background: var(--theme-hover); }
:root[data-theme] .primary { background: linear-gradient(#ffffff0a,#00000004),var(--theme-button); color: var(--theme-button-text); }
:root[data-theme] .primary:hover { background: var(--theme-button-hover); }
:root[data-theme] .brand-mark { color: var(--bg); }
:root[data-theme] :is(.avatar,.em-avatar) { background: var(--panel-3); color: var(--text); }
:root[data-theme] :is(.em-bottom-nav button,.ar-toggle,.application-rail a,.ar-controls,.em-prototype,.em-more-row > svg) { color: var(--muted); }
:root[data-theme] :is(.application-rail a[aria-current="page"],.em-bottom-nav button[aria-current]) { color: var(--theme-cool-text); background: var(--theme-cool-wash); }
:root[data-theme] .application-rail a[aria-current="page"] { box-shadow: inset 2px 0 var(--theme-cool); }
:root[data-theme] :is(.em-back,.em-this-week,.em-prototype a,.em-directory-actions a,.em-open-actions button,.sa-filter [aria-pressed="true"],.week-calendar,.week-actions summary,.ar-controls summary) { color: var(--theme-warm); }
:root[data-theme] .sa-filter [aria-pressed="true"] { border-color: var(--theme-warm); }
:root[data-theme] :is(.em-screen-heading p,.em-directory-phone,.em-directory-email,.em-shared-title,.em-card-label,.em-shared-top .em-times,.shift-card strong,.to-request-heading strong,.sm-filters label,.sm-form label) { color: var(--text); }
:root[data-theme] :is(.em-more-note,.em-more-row small,.em-screen-heading > span,.em-preference small,.em-phone-sharing small,.em-account dt,.em-directory-info small,.em-published-note,.em-week-summary,.em-week-navigation div > span,.em-empty p,.ed-open > p,.ed-grid-empty,.ed-full-grid th > span,.ar-identity,.sm-person small,.sm-profile-title > span,.sm-optional,.ss-row small,.ss-management-list span,.to-history,.to-reason > span,.av-history,.av-day small,.av-summary .av-unavailable,.legend-note,.legend-bar,.em-prototype summary > span) { color: var(--muted); }
:root[data-theme] :is(.em-card-date,.em-card-meta,.em-card-venue,.em-card-arrow,.em-time-dash,.em-shared-schedule,.sa-shift small,.shift-card span) { color: var(--theme-on-card); }
:root[data-theme] .shift-card .shift-note { color: var(--accent); }
:root[data-theme] :is(.em-card,.card-lab .lab-lit,#scheduleGrid .shift-card,.ed-grid-shift) { background: var(--publication-pattern,linear-gradient(transparent,transparent)),linear-gradient(180deg,#ffffff08,#ffffff01 40%,#0000000a),var(--theme-card); border-color: var(--theme-card-border); }
:root[data-theme] :is(.em-card:hover,.shift-card:hover) { border-color: var(--theme-on-card); }
:root[data-theme] #scheduleGrid .shift-card.publication-deleted { background: var(--panel-2); border-color: #a77978; }
:root[data-theme] :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { background-color: var(--theme-field); color: var(--text); border-color: var(--theme-card-border); }
@supports (appearance: base-select) { :root[data-theme] #editTemplate::picker(select) { background: var(--theme-field); color: var(--text); border-color: var(--theme-card-border); } }
:root[data-theme] .em-own-shift { border-color: color-mix(in srgb,var(--theme-on-card) 65%,var(--theme-card-border)); }
:root[data-theme] :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme] :is(input[type=checkbox],input[type=radio]) { accent-color: var(--theme-cool); }
:root[data-theme] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: var(--theme-warm); }
:root[data-theme] :is(.em-topbar,.em-prototype,.em-more-row + .em-more-row,.em-preference + .em-preference,.em-week-navigation,.em-directory-person + .em-directory-person,.sm-person,.ss-row,.ss-form,.to-form,.to-request,.to-availability,.av-staff,.av-day,.av-summary dl > div,.em-shift-detail dl > div,.ar-brand,.ar-footer) { border-color: var(--line); }
:root[data-theme] #editTemplate option:checked { background: var(--theme-hover); }
:root[data-theme] #editTemplate option:hover { background: var(--panel-3); }
:root[data-theme] .application-rail { scrollbar-color: var(--theme-card-border) var(--theme-header); }
:root[data-theme] :is(.grid-wrap,.weekly-rows,.ed-grid-scroll) { scrollbar-color: var(--theme-card-border) var(--theme-cell); }
/* Palette chips, status/availability bars, semantic warnings and color swatches
   retain their data/semantic treatments. Themes alter only their surroundings. */
/* Midnight overlays only: crisp edge and a tight, restrained turquoise halo. */
:root[data-theme="midnight"] { --overlay-edge: #5b939a; --overlay-light: #02a0a02e; }
:root[data-theme="midnight"] dialog { border: 1px solid var(--overlay-edge); box-shadow: 0 0 4px var(--overlay-light), 0 24px 80px #000a; }
:root[data-theme="midnight"] .template-actions > div { border: 1px solid var(--overlay-edge); border-color: var(--overlay-edge) !important; box-shadow: 0 0 4px var(--overlay-light), 0 6px 12px #0004; }