/* The moment of light — the control every Guided surface wears, in the
   topbar of the room, the account pages, the Companion, and the nav of
   guided.team. Reviewed in the field on the front door first
   (services/home/CONTENT.md §1), then lifted here so there is one copy.
   Markup: .moment > .moment-button (three .moment-dot pebbles: a sun, the
   current moment as .moment-now, a moon) + .moment-wheel (six role=radio
   buttons with data-moment and title) + .moment-label. Behaviour lives in
   @guided/ui-react shell.tsx (React) and inline on guided.team (no React);
   the two must stay in step. */

/* the moment of light. One pill. Collapsed: three pebbles — a sun, the
   current moment in its own colours, a moon — so the thing reads as
   "light, now, dark" without a word. Hover, focus, or a tap widens the
   pill and the three give way to the product's day wheel: the six moments
   as plain pebbles (gradients from packages/theme atoms.css .day-dot), the
   chosen one ringed — amber for a choice, quiet for the clock's own — and
   the name under the pill while one is hovered. No Auto button: a pick
   overrides the clock, clicking the chosen pebble again hands it back. */
.moment {
  position: relative;
  /* in a topbar the control sits at the right end, as the day wheel did */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  transition: border-color 200ms var(--ease-out);
}
.moment[hidden] { display: none; }
.moment:hover,
.moment:focus-within,
.moment[data-open] { border-color: var(--moss); }

/* Both halves animate to their exact widths (pebble 22px, gap 4px, 6px of
   room for the ring inside the clip): three pebbles = 86px, six = 164px.
   Sizes are whole pixels so the glyphs sit on the pixel grid.
   An open-ended max-width overshot the real width and the pill bounced. */
.moment-button,
.moment-wheel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 6px;
  border: 0;
  background: transparent;
  overflow: hidden;
  /* a breath before collapsing so the moving edge cannot flicker under
     the pointer */
  transition: width 260ms var(--ease-out) 120ms, opacity 200ms var(--ease-out) 120ms, padding 260ms var(--ease-out) 120ms;
}
.moment-button { border-radius: 999px; cursor: pointer; width: 86px; }
.moment-wheel { width: 0; opacity: 0; padding-inline: 0; }
.moment:hover .moment-button,
.moment:hover .moment-wheel,
.moment:focus-within .moment-button,
.moment:focus-within .moment-wheel,
.moment[data-open] .moment-button,
.moment[data-open] .moment-wheel { transition-delay: 0s; }
.moment:hover .moment-wheel,
.moment:focus-within .moment-wheel,
.moment[data-open] .moment-wheel { width: 164px; opacity: 1; padding-inline: 6px; }
.moment:hover .moment-button,
.moment:focus-within .moment-button,
.moment[data-open] .moment-button { width: 0; opacity: 0; padding-inline: 0; }

.moment-wheel button {
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.moment-wheel button:hover,
.moment-wheel button:focus-visible { opacity: 1; transform: scale(1.12); outline: none; }
/* the ringed pebble already stands out; growing it pushed the ring into the clip */
.moment-wheel button[aria-checked='true'] { opacity: 1; transform: none; }
/* a choice wears amber; the clock's own moment a quiet paper ring */
.moment-wheel button[aria-checked='true'] .moment-dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--amber); }
.moment[data-auto] .moment-wheel button[aria-checked='true'] .moment-dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink-faint); }

/* the name sits to the left of the pill, on its centre line: below it, in
   a topbar, it ran across the bar's bottom rule */
.moment-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.6rem);
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  white-space: nowrap;
  pointer-events: none;
}
.moment-label:empty { display: none; }

.moment-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50% 45% 55% 50%;
}
/* the glyphs are light on their pebbles — a dark sun read as wrong — and
   sit 0.4px up-left of the box centre, where the pebble's uneven corners
   put its visual centre */
.moment-dot svg { display: block; width: 14px; height: 14px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transform: translate(-0.5px, -0.5px); }
.moment-dot { color: oklch(0.97 0.015 95); }
.moment-dot[data-day='morning'] { background: linear-gradient(135deg, oklch(0.85 0.09 60), oklch(0.88 0.06 230)); }
.moment-dot[data-day='noon'] { background: linear-gradient(135deg, oklch(0.88 0.05 230), oklch(0.9 0.05 140)); }
.moment-dot[data-day='golden'] { background: linear-gradient(135deg, oklch(0.8 0.11 60), oklch(0.7 0.09 40)); }
.moment-dot[data-day='twilight'] { background: linear-gradient(135deg, oklch(0.7 0.08 300), oklch(0.5 0.08 285)); }
.moment-dot[data-day='dusk'] { background: linear-gradient(135deg, oklch(0.42 0.08 285), oklch(0.26 0.03 270)); }
.moment-dot[data-day='night'] { background: linear-gradient(135deg, oklch(0.24 0.04 265), oklch(0.13 0.012 260)); }

@media (prefers-reduced-motion: reduce) {
  .moment-button, .moment-wheel, .moment-wheel button { transition: none; }
}