/* Role switch + theme toggle share one row. */
.role-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  margin: 0 20px 12px;
}

.role-row .role-switch {
  flex: 1;
  margin: 0;
}

.theme-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--stone-border);
  border-radius: 50%;
  background: var(--stone);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--duration-press) var(--ease-press),
    background-color var(--duration-enter) var(--ease-enter);
}

.theme-toggle:hover { background: var(--sand); }
.theme-toggle:active { transform: scale(0.97); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.theme-icon {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--duration-enter) var(--ease-enter), transform var(--duration-enter) var(--ease-enter);
}

.theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.is-dark .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
.is-dark .theme-icon-sun { opacity: 1; transform: none; }

body { background: var(--canvas); }

/* Circular reveal from the toggle (View Transitions). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: theme-reveal 560ms var(--ease-enter);
}

@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--reveal-x, 90%) var(--reveal-y, 10%)); }
  to { clip-path: circle(150vmax at var(--reveal-x, 90%) var(--reveal-y, 10%)); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
  .theme-icon, .theme-toggle { transition: none; }
}