/* Shared theme menu for the main website and all project sites. */
:root {
  --theme-bg: var(--project-bg, var(--bg, #fff));
  --theme-text: var(--project-text, var(--text, #000));
  --theme-muted: var(--project-muted, var(--muted, #4e5861));
  --theme-rule: var(--project-rule, var(--rule, #ddd));
  --theme-link: var(--project-link, var(--link, #587abc));
  --theme-hover: #f0f2f5;
}
:root[data-theme="dark"] { --theme-hover: #262c33; }
.theme-picker { position: relative; display: inline-flex; flex: 0 0 44px; min-height: 32px; z-index: 50; }
.theme-toggle, .theme-option {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-height: 32px; padding: 5px 6px; margin: 0; border: 1px solid var(--theme-rule);
  border-radius: 7px; background: var(--theme-bg); color: var(--theme-muted); cursor: pointer;
}
.theme-toggle { border-color: transparent; }
.theme-toggle:hover, .theme-option:hover { background: var(--theme-hover); color: var(--theme-text); }
.theme-toggle:focus-visible, .theme-option:focus-visible { outline: 2px solid var(--theme-link); outline-offset: 2px; }
.theme-picker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-picker .theme-chevron { width: 10px; height: 10px; }
.theme-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 62px; padding: 4px;
  display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--theme-rule);
  border-radius: 9px; background: var(--theme-bg); box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.theme-menu[hidden] { display: none; }
.theme-option { width: 100%; border-color: transparent; justify-content: space-between; }
.theme-option[aria-checked="true"] { color: var(--theme-text); background: var(--theme-hover); }
.theme-option .theme-check { width: 12px; height: 12px; visibility: hidden; }
.theme-option[aria-checked="true"] .theme-check { visibility: visible; }