/* The Light / Dark toggle in the page header, shared by every shell (site.css, Last Table, story). It takes its color
   from the header it sits in, so it needs no token of its own. It stays hidden until /theme.js runs, and it names the
   theme a click turns on: "Dark" while the page is light, "Light" while it is dark. */
:root {
  --theme-toggle-gap: 8px;
  --theme-toggle-pad: 12px;
  --theme-toggle-pad-narrow: 8px;
  --theme-toggle-text: 0.8125rem;
  --theme-toggle-radius: 999px;
  --story-bar-gap: 16px;
}
.theme-toggle {
  position: relative;
  display: none;
  flex: none;
  align-items: center;
  gap: var(--theme-toggle-gap);
  min-block-size: 32px;
  padding-block: 0;
  padding-inline: var(--theme-toggle-pad);
  border: 1px solid color-mix(in oklch, currentColor 28%, transparent);
  border-radius: var(--theme-toggle-radius);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--theme-toggle-text);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.theme-js .theme-toggle { display: inline-flex; }
/* The pill is 32 px tall; the hit area reaches 44 px so a thumb finds it on a phone. */
.theme-toggle::after { content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2); }
.theme-toggle svg { flex: none; }
.theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.theme-toggle:active { background: color-mix(in oklch, currentColor 14%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { border-color: currentColor; }
}
.theme-toggle-hint {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}
.theme-to-light { display: none; }
:root[data-theme="dark"] .theme-to-dark { display: none; }
:root[data-theme="dark"] .theme-to-light { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-to-light { display: inline; }
}
/* In a narrow Last Table header the toggle is its icon only; its hint still names it for screen readers. */
@media (max-width: 780px) {
  .lt-header .theme-toggle { padding-inline: var(--theme-toggle-pad-narrow); }
  .lt-header .theme-toggle [aria-hidden="true"]:not(svg) { display: none; }
}
/* A story page's footer puts the toggle on the brand's row. */
.story-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--story-bar-gap); }