/* ==========================================================================
   Theme toggle  (.pf-theme-toggle)
   A quiet, icon-only utility — NOT a nav link, NOT a button. Borderless,
   grey (ink-secondary) at rest, ink on hover/focus. Lives in the nav's
   utility slot (.pf-nav__utility), Rapha-style, set apart from the links.

   A toggle button: the accessible name is a constant "Dark theme" and
   aria-pressed (set by assets/theme.js) carries the state. The label never
   changes with the state (Inclusive Components: never change label and
   pressed state together). The one-pink law (R5) forbids a pink icon
   fill/stroke, so this control never goes pink — resting = grey, active = ink.
   ========================================================================== */

.pf-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-ink-secondary); /* grey at rest — 5.3:1 on surface */
  border-radius: var(--pf-radius-full); /* round, so the hover chip is a circle */
  cursor: pointer;
  transition: color var(--pf-dur) var(--pf-ease),
    background-color var(--pf-dur) var(--pf-ease);
}

/* Hover/focus: the icon darkens to ink AND a round sunken chip appears behind it.
   A shape appearing is a stronger affordance cue than colour alone — still never
   pink (R5), still neutral. */
.pf-theme-toggle:hover,
.pf-theme-toggle:focus-visible {
  color: var(--pf-ink);
  background: var(--pf-surface-sunken);
}

/* Icon: the "channel" contrast disc (v0.9.86, Louis's pick from the 2026-10-01
   exploration). A solid left half and an open right arc with a 2px channel between
   them, so the halves never touch. Drawn the way Rapha draws header icons: a 16 grid,
   2px weight, butt ends; the channel sits on whole pixels (x 7 to 9) so it stays crisp.
   ONE static glyph in both themes: it means "theme", not "you are here" or "go
   there", so it can't be misread as state vs action; the page itself shows the theme.
   A CSS mask, so the markup carries no inline SVG (just an empty
   <span class="pf-theme-toggle__icon">); background-color paints it in currentColor.
   display:block keeps it off the line box, so it centres exactly in the 40px chip. */
.pf-theme-toggle__icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1.07A7 7 0 0 0 7 14.93Z' fill='black'/%3E%3Cpath d='M9 2.08A6 6 0 0 1 9 13.92' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1.07A7 7 0 0 0 7 14.93Z' fill='black'/%3E%3Cpath d='M9 2.08A6 6 0 0 1 9 13.92' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .pf-theme-toggle {
    transition: none;
  }
}