/* ==========================================================================
   Sous — shared page chrome
   --------------------------------------------------------------------------
   The fixed top-right corner buttons (icon links + theme toggle) shared by
   every page of the site. Extracted from presentation.css so the docs shell
   reuses the exact same chrome. Everything references --sous-* tokens.

   Corner slots are right-anchored calc() offsets in 2.5rem + gap steps,
   counted from the right edge: slot 1 = npm, slot 2 = GitHub, slot 3 =
   theme toggle. Pages add their own links in higher slots (the presentation
   puts its speed control in slot 4; page-specific slot classes live in the
   page's stylesheet or below). The presentation's Documentation link is the
   exception: a text link anchored top-LEFT (.docs-link).
   ========================================================================== */

/* ----- Icon-link chrome (default position: slot 2, GitHub) ------------------ */
.repo-link {
  position: fixed;
  top: var(--sous-space-m);
  right: calc(var(--sous-space-m) + 2.5rem + var(--sous-space-s));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--sous-body-text-muted);
  background: var(--sous-bg-tile);
  border: 1px solid var(--sous-border-medium);
  border-radius: var(--sous-border-radius);
  transition: color var(--sous-transition-fast) ease,
    border-color var(--sous-transition-fast) ease;
}

.repo-link:hover {
  color: var(--sous-primary);
  border-color: var(--sous-primary);
}

.repo-link:focus-visible {
  outline: none;
  box-shadow: var(--sous-focus-ring);
}

.repo-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Slot 1 (rightmost): npm */
.npm-link {
  right: var(--sous-space-m);
}

.npm-mark {
  font-family: var(--sous-font-family-monospace);
  font-size: var(--sous-font-size-xs);
  font-weight: var(--sous-font-weight-bold);
}

/* The presentation page's Documentation link: a plain text link, top-LEFT.
   No button chrome. Body-text colored (white in dark mode) so it reads as
   quiet chrome, going green on hover like everything interactive. */
.docs-link {
  position: fixed;
  top: var(--sous-space-m);
  left: var(--sous-space-m);
  z-index: 10;
  display: flex;
  align-items: center;
  height: 2.5rem;
  color: var(--sous-body-text);
  font-size: var(--sous-font-size-base);
  font-weight: var(--sous-font-weight-semibold);
  transition: color var(--sous-transition-fast) ease;
}

.docs-link:hover {
  color: var(--sous-primary);
}

.docs-link:focus-visible {
  outline: none;
  box-shadow: var(--sous-focus-ring);
}

/* ----- Theme toggle (slot 3) ------------------------------------------------ */
.theme-toggle {
  position: fixed;
  top: var(--sous-space-m);
  right: calc(var(--sous-space-m) + 2 * (2.5rem + var(--sous-space-s)));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--sous-bg-tile);
  color: var(--sous-body-text-muted);
  border: 1px solid var(--sous-border-medium);
  border-radius: var(--sous-border-radius);
  cursor: pointer;
  transition: color var(--sous-transition-fast) ease,
    border-color var(--sous-transition-fast) ease;
}

.theme-toggle:hover {
  color: var(--sous-primary);
  border-color: var(--sous-primary);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sous-focus-ring);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Show the icon for the mode you'd switch TO: moon in light, sun in dark */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html[data-sous-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-sous-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  html:not([data-sous-theme="light"]) .theme-toggle .icon-sun { display: block; }
  html:not([data-sous-theme="light"]) .theme-toggle .icon-moon { display: none; }
}