/* The light/dark switch of the public pages: a pill of sky with a knob that
   springs across it — the sun on a pale day, the moon on a deep night with a
   few stars out. Every state is a function of `--scheme-dark` (0 by day, 1 by
   night, set in `_global.css`), so the switch never names a theme and shows
   the right side before any script runs. It stands beside the language
   switch — in the marketing header's upper row, and in the sheet the phone's
   burger opens. */

@layer components {
  .theme-toggle {
    --theme-toggle-height: 28px;
    --theme-toggle-width: 56px;
    --theme-toggle-knob: 22px;
    --theme-toggle-gap: 1.5px;
    --theme-toggle-border: 1.5px;
    /* How far the knob travels: the inside of the pill less the knob and a
       gap on either side of it. */
    --theme-toggle-travel: calc(var(--theme-toggle-width) - 2 * var(--theme-toggle-border) - var(--theme-toggle-knob) - 2 * var(--theme-toggle-gap));

    background: var(--color-brand-tint);
    block-size: var(--theme-toggle-height);
    border: var(--theme-toggle-border) solid var(--color-pill-edge);
    border-radius: var(--radius-pill);
    cursor: pointer;
    flex-shrink: 0;
    inline-size: var(--theme-toggle-width);
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: background 0.4s;
  }

  .theme-toggle:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  /* A wisp of cloud on the day side of the pill. */
  .theme-toggle::before {
    background: oklch(from var(--color-surface) l c h / 65%);
    block-size: 6px;
    border-radius: var(--radius-pill);
    content: "";
    inline-size: 14px;
    inset-block-start: 5px;
    inset-inline-start: 10px;
    opacity: calc(1 - var(--scheme-dark));
    pointer-events: none;
    position: absolute;
    transition: opacity 0.3s;
  }

  /* Stars on the night side: three pinpricks, out only after dark. */
  .theme-toggle::after {
    background:
      radial-gradient(circle, var(--color-ink-inverted) 1px, transparent 1.6px) 4px 6px / 6px 6px no-repeat,
      radial-gradient(circle, var(--color-ink-inverted) 0.8px, transparent 1.4px) 12px 13px / 6px 6px no-repeat,
      radial-gradient(circle, var(--color-ink-inverted) 0.8px, transparent 1.4px) 9px 2px / 6px 6px no-repeat;
    block-size: 100%;
    content: "";
    inline-size: 50%;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: calc(var(--scheme-dark) * 0.8);
    pointer-events: none;
    position: absolute;
    transition: opacity 0.4s 0.1s;
  }

  /* The knob is white by day and brand by night, mixed off the same number
     that moves it, so the two never disagree — and by night it glows: the
     second shadow has no blur by day, so it hides behind the knob. */
  .theme-toggle__knob {
    align-items: center;
    background: color-mix(in oklch, var(--color-surface) calc((1 - var(--scheme-dark)) * 100%), var(--color-brand-fill));
    block-size: var(--theme-toggle-knob);
    border-radius: 50%;
    box-shadow:
      0 1px 4px oklch(from var(--color-shadow) l c h / 25%),
      0 0 calc(var(--scheme-dark) * 10px) oklch(from var(--color-brand) l c h / 70%);
    display: flex;
    inline-size: var(--theme-toggle-knob);
    inset-block-start: var(--theme-toggle-gap);
    inset-inline-start: var(--theme-toggle-gap);
    justify-content: center;
    pointer-events: none;
    position: absolute;
    transform: translateX(calc(var(--scheme-dark) * var(--theme-toggle-travel)));
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s;
  }

  .theme-toggle__sun,
  .theme-toggle__moon {
    position: absolute;
    transition: opacity 0.3s;
  }

  .theme-toggle__sun {
    color: var(--color-warning);
    opacity: calc(1 - var(--scheme-dark));
  }

  .theme-toggle__moon {
    color: var(--color-ink-inverted);
    opacity: var(--scheme-dark);
  }
}