/* theme_switcher.css — the 2-stop theme toggle switch, shared markup:
   <div class="gi-theme-toggle" title="Switch layout">
     <span class="gi-theme-toggle-label left">Classic</span>
     <span class="gi-theme-toggle-track"><span class="gi-theme-toggle-knob"></span></span>
     <span class="gi-theme-toggle-label right">Modern</span>
   </div>
   theme_switcher.js toggles the .is-modern class on click/arrow keys and
   slides the knob via a CSS transition — deliberately ~220ms, fast enough
   to feel responsive, slow enough to actually see it move between the two
   stops rather than snapping instantly. */

.gi-theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.gi-theme-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: #9aa7b3;
  transition: color 180ms ease;
}
.gi-theme-toggle.is-modern .gi-theme-toggle-label.left,
.gi-theme-toggle:not(.is-modern) .gi-theme-toggle-label.right {
  color: #9aa7b3;
}
.gi-theme-toggle:not(.is-modern) .gi-theme-toggle-label.left,
.gi-theme-toggle.is-modern .gi-theme-toggle-label.right {
  color: #1f2937;
}
.gi-theme-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #d7dde3;
  transition: background 220ms ease;
  flex-shrink: 0;
}
.gi-theme-toggle.is-modern .gi-theme-toggle-track {
  background: #2563eb;
}
.gi-theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left 220ms cubic-bezier(.4, 0, .2, 1);
}
.gi-theme-toggle.is-modern .gi-theme-toggle-knob {
  left: 20px;
}
.gi-theme-toggle:focus-visible .gi-theme-toggle-track {
  box-shadow: 0 0 0 2px #2563eb55;
}

/* Phase 2 — full chrome swap. Both variants are always in the DOM; only one
   is shown at a time. theme_switcher.js sets data-gi-theme synchronously
   before first paint, so there is no flash — no inline display:none needed
   on the alternates for that reason, but a couple carry one anyway as a
   defensive fallback, so every rule here needs !important on BOTH the hide
   and the show side to reliably win over an inline style either way.
   Each element type needs its own "shown" display value restored
   explicitly — a bare class-only hide rule can't be undone generically. */
.theme-classic-only, .theme-modern-only { display: none !important; }

:root:not([data-gi-theme="modern"]) nav.theme-classic-only { display: flex !important; flex-direction: column; }
:root:not([data-gi-theme="modern"]) span.theme-classic-only { display: contents !important; }
:root:not([data-gi-theme="modern"]) div.theme-classic-only { display: flex !important; }

:root[data-gi-theme="modern"] nav.theme-modern-only { display: flex !important; flex-direction: column; }
:root[data-gi-theme="modern"] span.theme-modern-only { display: contents !important; }
:root[data-gi-theme="modern"] div.theme-modern-only { display: flex !important; }