/* Black theme switch in the header (assets/theme.js). The black colours themselves are in theme-dark.css. */
.tt-theme-toggle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; margin-left: auto; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  transition: color .15s, border-color .15s, background-color .15s;
}
.tt-theme-toggle:hover { color: var(--accent-strong); border-color: var(--accent); }
.tt-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tt-theme-toggle svg { width: 18px; height: 18px; }
.tt-theme-toggle .tt-theme-sun, html[data-theme="dark"] .tt-theme-toggle .tt-theme-moon { display: none; }
html[data-theme="dark"] .tt-theme-toggle .tt-theme-sun { display: block; }
:is(.tt-auth-nav, .btn-login, .btn-apply:not([hidden])) ~ .tt-theme-toggle { margin-left: 0; }
@media (min-width: 1000px) and (max-width: 1159px) { .tt-theme-toggle { width: 34px; height: 34px; } }
@media (max-width: 999px) {
  .mobile-nav-ready .tt-theme-toggle { width: 42px; height: 42px; border-radius: 11px; }
}
/* A signed-in nickname plus the switch and the menu button only fit 390–429px phones with slightly tighter spacing
   (narrower phones already use auth.css's compact header). */
@media (min-width: 390px) and (max-width: 429px) {
  body:has(.tt-auth-account) .header-inner { gap: 8px; }
  .tt-auth-nav .tt-auth-account { max-width: 96px; }
}
@media (max-width: 389px) {
  .mobile-nav-ready .tt-theme-toggle { width: 38px; height: 38px; }
}
.tt-theme-toggle.is-switching svg { animation: tt-icon-turn .7s cubic-bezier(.2, .9, .25, 1.2) both; }
@keyframes tt-icon-turn { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Day ↔ night (theme.js): the new theme sweeps over the page — night falls from the top (dusk) or day rises from the
   horizon (dawn) — under a twilight band while the sun and the moon pass. The sky layer exists only while switching. */
html[data-tt-sky]::view-transition-old(root) { animation: none; }
html[data-tt-sky]::view-transition-new(root) {
  animation: 1.5s cubic-bezier(.6, .04, .3, 1) both;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
}
html[data-tt-sky="dusk"]::view-transition-new(root) {
  animation-name: tt-dusk-reveal;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 55%); mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
}
html[data-tt-sky="dawn"]::view-transition-new(root) {
  animation-name: tt-dawn-reveal;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 55%); mask-image: linear-gradient(to top, #000 45%, transparent 55%);
}
html[data-tt-sky]::view-transition-new(tt-sky) { animation: none; }
@keyframes tt-dusk-reveal { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes tt-dawn-reveal { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }

.tt-sky { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: none; contain: strict; view-transition-name: tt-sky; animation: tt-sky-out 1.5s linear both; }
.tt-sky i { position: absolute; display: block; }
@keyframes tt-sky-out { 0%, 82% { opacity: 1; } to { opacity: 0; } }
.tt-sky-band { top: 0; left: -5%; width: 110%; height: 42vh; animation: 1.5s cubic-bezier(.6, .04, .3, 1) both; }
.tt-sky[data-dir="dusk"] .tt-sky-band {
  animation-name: tt-band-fall;
  background: linear-gradient(to bottom, rgba(23, 17, 43, 0), rgba(49, 33, 92, .55) 24%, rgba(140, 88, 186, .45) 46%, rgba(244, 146, 172, .42) 64%, rgba(255, 196, 118, .38) 80%, rgba(255, 210, 150, 0));
}
.tt-sky[data-dir="dawn"] .tt-sky-band {
  animation-name: tt-band-rise;
  background: linear-gradient(to bottom, rgba(23, 17, 43, 0), rgba(84, 62, 150, .4) 22%, rgba(214, 150, 214, .42) 46%, rgba(255, 176, 170, .46) 64%, rgba(255, 216, 140, .5) 82%, rgba(255, 236, 190, 0));
}
/* The band's middle rides the edge of the new theme: the mask edge travels from -25vh to 125vh. */
@keyframes tt-band-fall { from { transform: translateY(-46vh); } to { transform: translateY(104vh); } }
@keyframes tt-band-rise { from { transform: translateY(104vh); } to { transform: translateY(-46vh); } }
.tt-sky-sun {
  top: 0; left: 72%; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fffaf0 0 22%, #ffe7a6 46%, #ffc27a 72%, #ff9f6a);
  box-shadow: 0 0 34px 14px rgba(255, 196, 120, .55), 0 0 110px 50px rgba(255, 160, 130, .28);
}
.tt-sky-moon {
  top: 0; left: 26%; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%;
  box-shadow: inset -15px 7px 0 0 #f5efff; filter: drop-shadow(0 0 12px rgba(214, 196, 255, .85));
}
.tt-sky-stars {
  inset: 12vh 0 30% 0; opacity: 0;
  background-image:
    radial-gradient(circle at 6% 12%, #fff 0 1.5px, transparent 2.2px), radial-gradient(circle at 14% 34%, #f3e9ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 21% 8%, #fff 0 1.8px, transparent 2.5px), radial-gradient(circle at 30% 26%, #fff 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 37% 52%, #e9dcff 0 1.3px, transparent 2px), radial-gradient(circle at 44% 15%, #fff 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 51% 40%, #fff 0 1px, transparent 1.7px), radial-gradient(circle at 58% 6%, #f6efff 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 63% 30%, #fff 0 1.2px, transparent 1.9px), radial-gradient(circle at 69% 58%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 18%, #ece0ff 0 1.6px, transparent 2.3px), radial-gradient(circle at 83% 42%, #fff 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 89% 10%, #fff 0 1.4px, transparent 2.1px), radial-gradient(circle at 95% 30%, #f3e9ff 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 10% 60%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 27% 70%, #f0e6ff 0 1.3px, transparent 2px),
    radial-gradient(circle at 48% 66%, #fff 0 1.1px, transparent 1.8px), radial-gradient(circle at 74% 74%, #fff 0 1.3px, transparent 2px),
    radial-gradient(circle at 92% 62%, #ece0ff 0 1.2px, transparent 1.9px), radial-gradient(circle at 40% 88%, #fff 0 1px, transparent 1.6px);
}
.tt-sky[data-dir="dusk"] .tt-sky-sun { animation: tt-sun-set 1.5s cubic-bezier(.5, .05, .4, 1) both; }
.tt-sky[data-dir="dusk"] .tt-sky-moon { animation: tt-moon-rise 1.5s cubic-bezier(.3, .6, .3, 1) both; }
.tt-sky[data-dir="dusk"] .tt-sky-stars { animation: tt-stars-in 1.5s linear both; }
.tt-sky[data-dir="dawn"] .tt-sky-sun { animation: tt-sun-rise 1.5s cubic-bezier(.3, .6, .3, 1) both; }
.tt-sky[data-dir="dawn"] .tt-sky-moon { animation: tt-moon-set 1.5s cubic-bezier(.5, .05, .5, 1) both; }
.tt-sky[data-dir="dawn"] .tt-sky-stars { animation: tt-stars-out 1.5s linear both; }
@keyframes tt-sun-set { from { transform: translateY(20vh); opacity: 0; } 12%, 70% { opacity: 1; } to { transform: translateY(90vh) scale(.92); opacity: 0; } }
@keyframes tt-moon-rise { 0%, 25% { transform: translateY(-8vh) rotate(-30deg); opacity: 0; } 70% { transform: translateY(20vh) rotate(-16deg); opacity: 1; } to { transform: translateY(22vh) rotate(-14deg); opacity: 1; } }
@keyframes tt-stars-in { 0%, 30% { opacity: 0; } 55% { opacity: 1; } 65% { opacity: .7; } 75%, to { opacity: 1; } }
@keyframes tt-sun-rise { 0%, 15% { transform: translateY(96vh) scale(.9); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(22vh); opacity: 1; } }
@keyframes tt-moon-set { from { transform: translateY(22vh) rotate(-14deg); opacity: 1; } 60%, to { transform: translateY(-8vh) rotate(-34deg); opacity: 0; } }
@keyframes tt-stars-out { from { opacity: 1; } 45%, to { opacity: 0; } }
/* Browsers without view transitions: a sky veil gathers, the theme changes behind it, and the veil lifts with the same sky. */
.tt-sky.is-overlay::before { content: ""; position: absolute; inset: 0; animation: tt-veil 1.5s ease both; }
.tt-sky.is-overlay[data-dir="dusk"]::before { background: linear-gradient(to bottom, #120d24, #33245f 55%, #b47ab8 85%, #f2b48f); }
.tt-sky.is-overlay[data-dir="dawn"]::before { background: linear-gradient(to top, #fff2d2, #f7c3cf 45%, #b9a6ea 80%, #6d58b8); }
@keyframes tt-veil { from { opacity: 0; } 28%, 36% { opacity: .94; } to { opacity: 0; } }