/* Theme switch: small, flat and in proportion with the 32px nav buttons.
   38x22 track in the secondary-button grey with a hairline; a 16px white knob
   carries a tiny sun or moon that crossfades as it slides. theme.js sets
   data-theme before paint and drives aria-checked, the circular view
   transition, the tick sound and the haptic. */

.theme-toggle {
  --tt-w: 38px;
  --tt-h: 22px;
  --tt-pad: 3px;
  --tt-k: 16px;
  --tt-x: 0px;
  --tt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--tt-w);
  height: var(--tt-h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle[hidden] {
  display: none;
}

/* a 44px tap area on touch screens without changing the visual size */
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: -11px -3px;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus, #3e6aef);
  outline-offset: 3px;
}

.tt-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--btn2-bg, #f5f5fa);
  box-shadow: inset 0 0 0 1px var(--line-strong, rgba(0, 18, 46, 0.14));
  transition:
    background-color 280ms var(--tt-ease),
    box-shadow 280ms var(--tt-ease);
}

.tt-knob {
  position: absolute;
  top: var(--tt-pad);
  left: var(--tt-pad);
  display: grid;
  place-items: center;
  width: var(--tt-k);
  height: var(--tt-k);
  border-radius: 50%;
  background: #ffffff;
  color: #00122e;
  box-shadow:
    0 0 0 0.5px rgba(0, 18, 46, 0.12),
    0 1px 2px rgba(0, 18, 46, 0.18);
  transform: translateX(var(--tt-x)) scale(var(--tt-press, 1));
  transition: transform 280ms var(--tt-ease);
}

.tt-knob svg {
  grid-area: 1 / 1;
  width: 10px;
  height: 10px;
  transition:
    opacity 220ms var(--tt-ease),
    transform 280ms var(--tt-ease);
}

.tt-moon {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

:root[data-theme="dark"] .theme-toggle {
  --tt-x: calc(var(--tt-w) - var(--tt-k) - 2 * var(--tt-pad));
}

:root[data-theme="dark"] .tt-track {
  background: #1b2242;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .tt-knob {
  background: #f2f4fa;
  color: #1b2242;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .tt-sun {
  opacity: 0;
  transform: rotate(60deg) scale(0.6);
}

:root[data-theme="dark"] .tt-moon {
  opacity: 1;
  transform: none;
}

.theme-toggle:active {
  --tt-press: 0.88;
}

@media (hover: hover) {
  .theme-toggle:hover .tt-track {
    box-shadow: inset 0 0 0 1px rgba(0, 18, 46, 0.24);
  }

  :root[data-theme="dark"] .theme-toggle:hover .tt-track {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
}

/* theme change: the new theme opens as a circle from the switch (theme.js) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .tt-track,
  .tt-knob,
  .tt-knob svg {
    transition: none;
  }
}

@media (forced-colors: active) {
  .tt-track {
    border: 1px solid ButtonText;
  }

  .tt-knob {
    background: ButtonText;
    color: ButtonFace;
  }
}

@media (max-width: 360px) {
  .marketing-home .nav-cta {
    display: none;
  }
}