/* ring: commons
 * seed: silk (hand-tied t is linear; click play 560ms silk; dock on release uses spring duration only)
 * still: ./still.md
 * reduced: replace (instant t snap — no rotation, no ray collapse, no mask travel)
 * when-not: a daily settings row (a switch is a switch; 360deg is a performance); any toggle that must announce via the icon alone; pairing with a second motion personality on the same bar
 *
 * C-THEME-TOGGLE — one SVG (disc + ray group + mask circle). --sunmoon-t 0 day … 1 night.
 * Theme latch of t>=0.5 writes BOTH html[data-theme] (Commons) AND html[data-night] (loomallure).
 * Do not ship two icons. Do not latch only one attribute.
 */

@property --sunmoon-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[data-c-theme-toggle] {
  --sunmoon-t: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  color: var(--os-ink);
  user-select: none;
  -webkit-user-select: none;
}

[data-c-theme-toggle] input {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

[data-c-theme-toggle] .c-theme-toggle-well {
  display: grid;
  place-items: center;
  width: 88px;
  height: 44px;
  border-radius: var(--os-radius-pill);
  background: var(--os-ground);
  border: 1px solid var(--os-rule);
  box-shadow: var(--os-press-shadow-out);
  flex: 0 0 auto;
  touch-action: none;
}

[data-c-theme-toggle]:focus-within .c-theme-toggle-well {
  outline: var(--os-focus-ring-width) solid var(--os-focus-ring-color);
  outline-offset: var(--os-focus-ring-offset);
  box-shadow: var(--os-focus-inner-shadow);
}

[data-c-theme-toggle] svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
}

[data-c-theme-toggle] .c-sunmoon-rotator {
  transform-origin: 16px 16px;
  transform: rotate(calc(var(--sunmoon-t) * 360deg));
}

[data-c-theme-toggle] .c-sunmoon-disc {
  fill: currentColor;
}

[data-c-theme-toggle] .c-sunmoon-rays {
  transform-origin: 16px 16px;
  transform: scale(calc(1 - var(--sunmoon-t) * 0.75)) rotate(calc(var(--sunmoon-t) * 60deg));
  opacity: calc(1 - var(--sunmoon-t));
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}

[data-c-theme-toggle] .c-sunmoon-cut {
  transform-box: fill-box;
  transform-origin: center;
  /* t=0 parked off the disc; t=1 overlaps as a crescent cutter — never a second moon path */
  transform: translate(
    calc(12px - var(--sunmoon-t) * 6px),
    calc(-10px + var(--sunmoon-t) * 6px)
  );
}

[data-c-theme-toggle][data-ready]:not([data-dragging]) .c-sunmoon-rotator,
[data-c-theme-toggle][data-ready]:not([data-dragging]) .c-sunmoon-rays,
[data-c-theme-toggle][data-ready]:not([data-dragging]) .c-sunmoon-cut {
  transition:
    transform var(--ss-silk-duration, 560ms) var(--ss-silk-easing, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--ss-silk-duration, 560ms) var(--ss-silk-easing, cubic-bezier(0.16, 1, 0.3, 1));
}

[data-c-theme-toggle][data-docking]:not([data-dragging]) .c-sunmoon-rotator,
[data-c-theme-toggle][data-docking]:not([data-dragging]) .c-sunmoon-rays,
[data-c-theme-toggle][data-docking]:not([data-dragging]) .c-sunmoon-cut {
  transition-duration: var(--ss-spring-duration, 340ms);
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

[data-c-theme-toggle] .c-theme-toggle-copy {
  font-size: 14px;
  letter-spacing: -0.01em;
}

html[data-theme="night"] [data-c-theme-toggle],
html[data-night="1"] [data-c-theme-toggle] {
  color: var(--os-ground);
}

html[data-theme="night"] [data-c-theme-toggle] .c-theme-toggle-well,
html[data-night="1"] [data-c-theme-toggle] .c-theme-toggle-well {
  background: var(--os-ground-void);
  border-color: color-mix(in oklab, var(--os-ground) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  [data-c-theme-toggle]:not([data-ready]) {
    --sunmoon-t: 1;
  }
}