/* Animated light/dark toggle. Icon state is driven purely by html[data-theme];
   no per-instance JS is needed for the visual. */
.aq-theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  color: var(--text);
  padding: 0;
}
.aq-theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.aq-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aq-tt-svg { width: 22px; height: 22px; overflow: visible; }

.aq-tt-core { transform-origin: center; transition: transform .5s cubic-bezier(.5,1.6,.4,1); }
.aq-tt-ray  { transform-origin: center; transition: transform .45s cubic-bezier(.5,1.8,.5,1), opacity .3s ease; }
.aq-tt-bite { transition: transform .5s cubic-bezier(.6,.1,.3,1); transform: translate(9px,-9px); }

/* dark = big crescent moon */
[data-theme="dark"] .aq-tt-core { transform: scale(1.3); }
[data-theme="dark"] .aq-tt-ray  { transform: scale(.1); opacity: 0; }
[data-theme="dark"] .aq-tt-bite { transform: translate(3px,-3px); }
/* light = compact sun with rays */
[data-theme="light"] .aq-tt-core { transform: scale(.85); }
[data-theme="light"] .aq-tt-ray  { transform: scale(1); opacity: 1; }
[data-theme="light"] .aq-tt-bite { transform: translate(11px,-11px); }

@media (prefers-reduced-motion: reduce) {
  .aq-tt-core, .aq-tt-ray, .aq-tt-bite { transition: none !important; }
}

/* Toggle sits at the right edge of the account-sheet user row. */
.aq-sheet-user-row .aq-theme-toggle { flex-shrink: 0; }