:root[data-theme="dark"] {
  color-scheme: dark;
  --_jl-focus-gap-color: var(--jl-theme-dark-color-focus-gap-dark);
  --jl-color-canvas: var(--jl-theme-dark-color-canvas);
  --jl-color-canvas-dot: var(--jl-theme-dark-color-canvas-dot);
  --jl-color-surface: var(--jl-theme-dark-color-surface);
  --jl-color-surface-muted: var(--jl-theme-dark-color-surface-muted);
  --jl-color-surface-strong: var(--jl-theme-dark-color-surface-strong);
  --jl-color-surface-inverse: var(--jl-theme-dark-color-surface-inverse);
  --jl-color-ink: var(--jl-theme-dark-color-ink);
  --jl-color-text: var(--jl-theme-dark-color-text);
  --jl-color-muted: var(--jl-theme-dark-color-muted);
  --jl-color-text-inverse: var(--jl-theme-dark-color-text-inverse);
  --jl-color-muted-inverse: var(--jl-theme-dark-color-muted-inverse);
  --jl-color-rule: var(--jl-theme-dark-color-rule);
  --jl-color-rule-strong: var(--jl-theme-dark-color-rule-strong);
  --jl-color-rule-inverse: var(--jl-theme-dark-color-rule-inverse);
  --jl-color-overlay: var(--jl-theme-dark-color-overlay);
  --jl-color-accent: var(--jl-theme-dark-color-accent);
  --jl-color-accent-hover: var(--jl-theme-dark-color-accent-hover);
  --jl-color-accent-active: var(--jl-theme-dark-color-accent-active);
  --jl-color-accent-decorative: var(--jl-theme-dark-color-accent-decorative);
  --jl-color-accent-soft: var(--jl-theme-dark-color-accent-soft);
  --jl-color-on-accent: var(--jl-theme-dark-color-on-accent);
  --jl-color-danger-hover: var(--jl-theme-dark-color-danger-hover);
  --jl-color-danger-active: var(--jl-theme-dark-color-danger-active);
  --jl-color-placeholder: var(--jl-theme-dark-color-placeholder);
  --jl-color-selection-background: var(--jl-theme-dark-color-selection-background);
  --jl-color-selection-text: var(--jl-theme-dark-color-selection-text);
  --jl-color-skeleton: var(--jl-theme-dark-color-skeleton);
  --jl-color-focus-ring: var(--jl-theme-dark-color-focus-ring);
  --jl-color-focus-gap-light: var(--jl-theme-dark-color-focus-gap-light);
  --jl-color-focus-gap-dark: var(--jl-theme-dark-color-focus-gap-dark);
  --jl-semantic-success-text: var(--jl-theme-dark-semantic-success-text);
  --jl-semantic-success-surface: var(--jl-theme-dark-semantic-success-surface);
  --jl-semantic-success-border: var(--jl-theme-dark-semantic-success-border);
  --jl-semantic-warning-text: var(--jl-theme-dark-semantic-warning-text);
  --jl-semantic-warning-surface: var(--jl-theme-dark-semantic-warning-surface);
  --jl-semantic-warning-border: var(--jl-theme-dark-semantic-warning-border);
  --jl-semantic-danger-text: var(--jl-theme-dark-semantic-danger-text);
  --jl-semantic-danger-surface: var(--jl-theme-dark-semantic-danger-surface);
  --jl-semantic-danger-border: var(--jl-theme-dark-semantic-danger-border);
  --jl-semantic-info-text: var(--jl-theme-dark-semantic-info-text);
  --jl-semantic-info-surface: var(--jl-theme-dark-semantic-info-surface);
  --jl-semantic-info-border: var(--jl-theme-dark-semantic-info-border);
  --jl-semantic-violet-text: var(--jl-theme-dark-semantic-violet-text);
  --jl-semantic-violet-surface: var(--jl-theme-dark-semantic-violet-surface);
  --jl-semantic-violet-border: var(--jl-theme-dark-semantic-violet-border);
}

:root[data-theme="dark"] .jl-surface-inverse,
:root[data-theme="dark"] [data-jl-surface="inverse"] {
  --_jl-focus-gap-color: var(--jl-color-focus-gap-light);
}

/* Retained as a compatibility hook for existing generated-control audits. */
.jl-theme-menu-item {
  display: contents;
}

.jl-settings-menu {
  width: var(--jl-control-height-md);
  box-sizing: border-box;
  padding: 0;
}

.jl-theme-options {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: calc(var(--jl-control-height-md) - var(--jl-space-1));
  padding: var(--jl-space-1) 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
}

.jl-theme-options::before {
  position: absolute;
  z-index: 0;
  top: var(--jl-space-1);
  right: 2px;
  left: 2px;
  height: calc(var(--jl-control-height-md) - var(--jl-space-1));
  border-radius: var(--jl-radius-sm);
  background: var(--jl-color-accent);
  content: "";
  transform: translateY(0);
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 120ms ease;
}

.jl-theme-options:has(button:nth-child(2)[aria-pressed="true"])::before {
  transform: translateY(100%);
}

.jl-theme-options:has(button:nth-child(3)[aria-pressed="true"])::before {
  transform: translateY(200%);
}

.jl-theme-options button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--jl-control-height-md) - var(--jl-space-1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--jl-radius-sm);
  appearance: none;
  background: transparent;
  color: var(--jl-color-text);
  line-height: 1;
  transition: color 120ms ease;
}

.jl-theme-option__icon {
  width: var(--jl-icon-md);
  height: var(--jl-icon-md);
}

.jl-theme-options button:hover {
  color: var(--jl-color-ink);
}

.jl-theme-options button[aria-pressed="true"] {
  color: var(--jl-color-on-accent);
}

.jl-theme-options:has(button[aria-pressed="true"]:hover)::before {
  background: var(--jl-color-accent-hover);
}

@media (max-width: 560px) {
  .jl-settings-menu {
    width: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jl-theme-options::before,
  .jl-theme-options button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .jl-theme-options {
    background: Canvas;
  }

  .jl-theme-options::before {
    display: none;
  }

  .jl-theme-options button {
    border: 1px solid transparent;
    background: ButtonFace;
    color: ButtonText;
  }

  .jl-theme-options button[aria-pressed="true"] {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* Keep the complete top bar together while Sites or Settings is open. The
   normal 82px inner row plus its 1px divider is 83px tall under border-box.
   Lock that exact outer footprint while the inner bar is fixed so disclosure
   state changes cannot move the divider or page content below the header. */
:is(.jl-global-header, .jl-site-header):has([data-site-switcher-button][aria-expanded="true"]),
:is(.jl-global-header, .jl-site-header):has([data-settings-button][aria-expanded="true"]),
:is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit] {
  height: calc(var(--jl-layout-header-height) + 1px);
  min-height: calc(var(--jl-layout-header-height) + 1px);
  max-height: calc(var(--jl-layout-header-height) + 1px);
  z-index: var(--jl-z-menu);
}

:is(.jl-global-header, .jl-site-header):has([data-site-switcher-button][aria-expanded="true"])::before,
:is(.jl-global-header, .jl-site-header):has([data-settings-button][aria-expanded="true"])::before,
:is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit]::before {
  position: fixed;
  z-index: calc(var(--jl-z-menu) - 1);
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--jl-layout-header-height) + 1px);
  border-bottom: 1px solid var(--jl-color-rule);
  background: var(--jl-color-canvas);
  content: "";
  pointer-events: none;
}

:is(.jl-global-header, .jl-site-header):has([data-site-switcher-button][aria-expanded="true"]) .jl-global-header__inner,
:is(.jl-global-header, .jl-site-header):has([data-settings-button][aria-expanded="true"]) .jl-global-header__inner,
:is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit] .jl-global-header__inner {
  position: fixed;
  z-index: var(--jl-z-menu);
  top: 0;
  right: 0;
  left: 0;
  margin-inline: auto;
}

:is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit]::before,
:is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit] .jl-global-header__inner {
  animation: jl-header-disclosure-exit 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes jl-header-disclosure-exit {
  from { top: 0; }
  to { top: var(--_jl-header-disclosure-exit-y, calc(-1 * var(--jl-layout-header-height))); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit]::before,
  :is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit] .jl-global-header__inner { animation: none; }
}

@media (max-width: 560px) {
  :is(.jl-global-header, .jl-site-header):has([data-site-switcher-button][aria-expanded="true"]),
  :is(.jl-global-header, .jl-site-header):has([data-settings-button][aria-expanded="true"]),
  :is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit] {
    height: 69px;
    min-height: 69px;
    max-height: 69px;
  }

  :is(.jl-global-header, .jl-site-header):has([data-site-switcher-button][aria-expanded="true"])::before,
  :is(.jl-global-header, .jl-site-header):has([data-settings-button][aria-expanded="true"])::before,
  :is(.jl-global-header, .jl-site-header)[data-jl-header-disclosure-exit]::before {
    height: 69px;
  }
}


/* The compact utility header keeps a 73px reserved desktop footprint while a
   disclosure is pinned or dismissing. Compact/mobile geometry remains the
   existing 69px shared contract. */
@media (min-width: 561px) {
  :is(.jl-global-header.jl-global-header--compact-utility, .jl-site-header.jl-global-header--compact-utility):has([data-site-switcher-button][aria-expanded="true"]),
  :is(.jl-global-header.jl-global-header--compact-utility, .jl-site-header.jl-global-header--compact-utility):has([data-settings-button][aria-expanded="true"]),
  :is(.jl-global-header.jl-global-header--compact-utility, .jl-site-header.jl-global-header--compact-utility)[data-jl-header-disclosure-exit] {
    height: 73px;
    min-height: 73px;
    max-height: 73px;
  }

  :is(.jl-global-header.jl-global-header--compact-utility, .jl-site-header.jl-global-header--compact-utility):has([data-site-switcher-button][aria-expanded="true"])::before,
  :is(.jl-global-header.jl-global-header--compact-utility, .jl-site-header.jl-global-header--compact-utility):has([data-settings-button][aria-expanded="true"])::before,
  :is(.jl-global-header.jl-global-header--compact-utility, .jl-site-header.jl-global-header--compact-utility)[data-jl-header-disclosure-exit]::before {
    height: 73px;
  }
}