/*!
 * TaxVault — public theme toggle styling.
 *
 * A small pill that reads as a physical switch: recessed track, raised knob
 * with a lit top edge, and the icon crossfading as the knob travels. Colours
 * come from the site's own --lx-* tokens so it belongs in either theme.
 */
.tv-theme-toggle {
  --tt-w: 60px;
  --tt-h: 30px;
  --tt-pad: 3px;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0 2px 0 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 999px;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.tv-theme-toggle:focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; }

.tv-tt-track {
  display: block;
  position: relative;
  width: var(--tt-w);
  height: var(--tt-h);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(255,255,255,.05));
  border: 1px solid var(--lx-border, rgba(255,255,255,.14));
  /* recessed: dark inner shadow at the top, faint lift at the bottom */
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 1px 0 rgba(255,255,255,.05);
  transition: background .35s ease, border-color .35s ease;
}

.tv-tt-knob {
  position: absolute;
  top: var(--tt-pad);
  left: var(--tt-pad);
  width: calc(var(--tt-h) - var(--tt-pad) * 2);
  height: calc(var(--tt-h) - var(--tt-pad) * 2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #fdfcf8 0%, #e8e3d6 48%, #cfc7b4 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 1px 1px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(0,0,0,.14);
  transition: transform .38s cubic-bezier(.4,.9,.3,1.2),
              background .35s ease;
}
.tv-theme-toggle[aria-pressed="true"] .tv-tt-knob {
  transform: translateX(calc(var(--tt-w) - var(--tt-h)));
  background: linear-gradient(160deg, #f7e6a8 0%, #d4af37 52%, #a37f1c 100%);
  box-shadow:
    0 2px 5px rgba(0,0,0,.5),
    0 0 10px rgba(212,175,55,.35),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 2px rgba(0,0,0,.28);
}

.tv-tt-knob svg {
  position: absolute;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #2a2620;
  stroke-width: 2;
  transition: opacity .25s ease, transform .38s ease;
}
.tv-tt-sun  { opacity: 1; transform: rotate(0deg)    scale(1); }
.tv-tt-moon { opacity: 0; transform: rotate(-70deg) scale(.6); fill: #2a2620; stroke: none; }
.tv-theme-toggle[aria-pressed="true"] .tv-tt-sun  { opacity: 0; transform: rotate(70deg) scale(.6); }
.tv-theme-toggle[aria-pressed="true"] .tv-tt-moon { opacity: 1; transform: rotate(0deg)  scale(1); }

.tv-theme-toggle:hover .tv-tt-track { border-color: rgba(212,175,55,.5); }
.tv-theme-toggle:active .tv-tt-knob { transform: scale(.93); }
.tv-theme-toggle[aria-pressed="true"]:active .tv-tt-knob {
  transform: translateX(calc(var(--tt-w) - var(--tt-h))) scale(.93);
}

/* Narrow screens: the header collapses its action row, so keep the toggle
   visible on its own rather than letting it disappear with the buttons. */
@media (max-width: 767px) {
  .tv-theme-toggle { --tt-w: 52px; --tt-h: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-tt-knob, .tv-tt-knob svg, .tv-tt-track { transition: none; }
}

/* The toggle is placed into the header's own row, which may be a plain flex
   container, so it carries its own alignment rather than relying on a parent. */
.tv-tt-slot {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  flex: 0 0 auto;
}