/* ==========================================================================
   Navbar
   The bar keeps the upstream strategy: a card-tinted, blurred surface that is
   always visible, sized to the content column (92vw on xl, capped at the page
   width) and rounded on its bottom corners.
   ========================================================================== */
#navbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: var(--z-navbar);
  width: 100%; max-width: var(--page-width);
  height: var(--navbar-h); padding: 0 1rem;
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}
@media (min-width: 1280px) {
  #navbar { width: 92vw; }
}
.navbar-inner {
  pointer-events: auto;
  height: 100%; width: 100%;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.75rem;
  background: var(--card-bg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#navbar[data-width-full="true"] { width: 100%; max-width: none; padding: 0; }
#navbar[data-width-full="true"] .navbar-inner { border-radius: 0; }

/* banner mode: always a translucent glass surface (mobile only on the home
   page, where the wallpaper is actually behind it) */
html[data-wallpaper-mode="banner"] .navbar-inner {
  background: color-mix(in oklch, var(--card-bg) 45%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
@media (max-width: 1023px) {
  html[data-wallpaper-mode="banner"] #navbar[data-is-home="false"] .navbar-inner {
    background: var(--card-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* a downward shadow once the page is scrolled at all */
#navbar.scrolled .navbar-inner { box-shadow: var(--shadow-navbar); }
:root.dark #navbar.scrolled .navbar-inner { box-shadow: 0 4px 16px rgb(0 0 0 / 0.35); }

.navbar-brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.05rem; flex: 0 0 auto;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease);
}
.navbar-brand:hover { background: var(--btn-plain-bg-hover); }
.navbar-logo { width: 28px; height: 28px; object-fit: contain; }
.logo-dark { display: none; }
:root.dark .logo-light { display: none; }
:root.dark .logo-dark { display: block; }

/* menu links live on the bar only from the lg breakpoint up; below that the
   hamburger drawer takes over */
.navbar-menu { display: none; align-items: center; gap: 0.15rem; flex: 1 1 auto; }
.navbar-menu.align-center { justify-content: center; }
.navbar-menu.align-left { justify-content: flex-start; padding-left: 0.5rem; }
.navbar-actions { display: flex; align-items: center; gap: 0.1rem; flex: 0 0 auto; margin-left: auto; }
.menu-btn { display: inline-flex; }
@media (min-width: 1024px) {
  .navbar-menu { display: flex; }
  .menu-btn { display: none; }
}

.nav-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.5rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 500; border: none; background: transparent;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-item:hover { background: var(--btn-plain-bg-hover); }
.nav-item:active { transform: scale(0.95); }
.nav-item.active { color: var(--primary); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle .chev { transition: transform var(--dur) var(--ease); }
.nav-dropdown.open .nav-dropdown-toggle .chev { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 11rem; padding: 0.4rem; border-radius: var(--radius-md);
  background: var(--float-panel-bg); box-shadow: var(--shadow-navbar);
  backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--btn-plain-bg-hover); }
/* The panel floats 0.4rem below the toggle, so the pointer would leave the
   dropdown on its way down and the hover-opened menu would close before it can
   be reached. This invisible strip bridges the gap (the panel's own
   `pointer-events` still gates it while closed). */
.nav-dropdown-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem;
}

/* ---------- theme mode switch (light / dark / system) ---------- */
.theme-mode { position: relative; display: inline-flex; }
.theme-icon-dark { display: none; }
:root.dark .theme-icon-light { display: none; }
:root.dark .theme-icon-dark { display: block; }

.theme-mode-panel {
  position: absolute; top: calc(100% + 0.35rem); right: 0;
  min-width: 9.5rem; padding: 0.4rem; border-radius: var(--radius-md);
  background: var(--float-panel-bg); box-shadow: var(--shadow-navbar);
  backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.theme-mode.open .theme-mode-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.theme-mode-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.5rem 0.7rem; border: none; border-radius: var(--radius-sm);
  background: transparent; font-size: 0.92rem; text-align: left; white-space: nowrap;
}
.theme-mode-item:hover { background: var(--btn-plain-bg-hover); }
.theme-mode-item[aria-checked="true"] { color: var(--primary); font-weight: 600; }

/* ---------- display settings (accent hue) ---------- */
.display-settings { position: relative; display: inline-flex; }
.display-settings-panel {
  position: absolute; top: calc(100% + 0.35rem); right: 0;
  width: min(16rem, calc(100vw - 2rem)); padding: 0.75rem;
  border-radius: var(--radius-md);
  background: var(--float-panel-bg); box-shadow: var(--shadow-navbar);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.display-settings.open .display-settings-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.settings-title {
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.6rem; font-size: 0.92rem; font-weight: 600;
}
.settings-title::before {
  content: ""; flex: 0 0 auto; width: 0.25rem; height: 1rem;
  border-radius: 0.125rem; background: var(--primary);
}
.settings-reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border: none; border-radius: 0.375rem;
  background: var(--btn-regular-bg); color: var(--btn-content);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.settings-reset:hover { background: var(--btn-regular-bg-hover); }
.settings-reset:active { background: var(--btn-regular-bg-active); transform: scale(0.92); }
.settings-reset[hidden] { display: none; }
.settings-value {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 1.5rem; padding: 0 0.35rem;
  border-radius: 0.375rem; background: var(--btn-regular-bg); color: var(--btn-content);
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hue-slider-shell {
  padding: 0.25rem; border-radius: 0.375rem;
  background: oklch(0.80 0.10 0);
}
:root.dark .hue-slider-shell { background: oklch(0.70 0.10 0); }
.hue-slider {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 1rem; margin: 0; padding: 0;
  border: none; border-radius: 0.25rem;
  background: var(--color-selection-bar); cursor: pointer;
}
.hue-slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.5rem; height: 1.1rem; border: none;
  border-radius: 0.125rem; background: rgb(255 255 255 / 0.75);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
}
.hue-slider::-webkit-slider-thumb:hover { background: rgb(255 255 255 / 0.9); }
.hue-slider::-webkit-slider-thumb:active { background: rgb(255 255 255 / 0.6); }
.hue-slider::-moz-range-thumb {
  width: 0.5rem; height: 1.1rem; border: none; border-radius: 0.125rem;
  background: rgb(255 255 255 / 0.75); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
}
.hue-slider::-moz-range-thumb:hover { background: rgb(255 255 255 / 0.9); }

/* ---------- code colour scheme toggle ---------- */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: 0.65rem;
}
.settings-label { font-size: 0.88rem; font-weight: 500; color: var(--text-75); }
.code-scheme-toggle {
  --scheme-toggle-w: 6.6rem;
  --scheme-toggle-h: 1.75rem;
  --scheme-toggle-pad: 0.2rem;
  --scheme-toggle-knob: 1.35rem;
  position: relative; flex: 0 0 auto;
  width: var(--scheme-toggle-w); height: var(--scheme-toggle-h);
  padding: 0; border: none; border-radius: 999px;
  background: var(--btn-regular-bg); color: var(--deep-text);
  cursor: pointer; overflow: hidden;
  transition: background-color var(--dur) var(--ease);
}
.code-scheme-toggle:hover { background: var(--btn-regular-bg-hover); }
.code-scheme-toggle:active { background: var(--btn-regular-bg-active); }
.code-scheme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.code-scheme-knob {
  position: absolute; top: var(--scheme-toggle-pad); left: var(--scheme-toggle-pad);
  width: var(--scheme-toggle-knob); height: var(--scheme-toggle-knob);
  border-radius: 999px; background: var(--primary);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color var(--dur) var(--ease);
}
.code-scheme-text {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
  transition: opacity 160ms var(--ease), transform 240ms var(--ease);
}
.code-scheme-text-atom { right: 0.55rem; }
.code-scheme-text-github { left: 0.55rem; }
:root:not([data-code-scheme="github"]) .code-scheme-text-atom { opacity: 1; transform: translateX(0); }
:root:not([data-code-scheme="github"]) .code-scheme-text-github { opacity: 0; transform: translateX(-0.25rem); }
:root[data-code-scheme="github"] .code-scheme-knob {
  transform: translateX(calc(var(--scheme-toggle-w) - var(--scheme-toggle-knob) - 2 * var(--scheme-toggle-pad)));
}
:root[data-code-scheme="github"] .code-scheme-text-atom { opacity: 0; transform: translateX(0.25rem); }
:root[data-code-scheme="github"] .code-scheme-text-github { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .code-scheme-knob, .code-scheme-text { transition: none; }
}

body[data-navbar-mode="dynamic"] #navbar.hidden-up { transform: translate(-50%, -100%); }