/* The light/dark switch drawn by /theme.js (docs/branding-contract.md, "Light and dark"; GlacierPoint Snapshot's file). Colors are
   the tokens of theme.css, so the switch reads in both themes. A 48 by 26 track with a sun on the left and a moon on the right; the
   round thumb covers the side that is on and shows its sign. The button around it is 40 px tall, a comfortable target. */
.theme-switch{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:40px;padding:0 2px;margin:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:var(--r-pill)}
.theme-switch-track{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:48px;height:26px;padding:0 6px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--card);box-sizing:border-box;transition:border-color var(--ease),background-color var(--ease)}
.theme-switch:hover .theme-switch-track{border-color:var(--border)}
.theme-switch-icon{display:block;flex-shrink:0}
.theme-switch-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform var(--ease)}
.theme-switch-thumb .theme-switch-icon{width:12px;height:12px}
.theme-switch-thumb .theme-switch-moon{display:none}
.theme-switch[aria-checked="true"] .theme-switch-thumb{transform:translateX(22px)}
.theme-switch[aria-checked="true"] .theme-switch-thumb .theme-switch-sun{display:none}
.theme-switch[aria-checked="true"] .theme-switch-thumb .theme-switch-moon{display:block}
.theme-switch:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
/* On a dark band (the portal's sidebar, a dark panel) the switch takes the band's colors. */
.dark .theme-switch{color:var(--on-dark-muted)}
.dark .theme-switch-track{background:var(--ink-2);border-color:var(--ink-line)}
/* A place for the switch in a corner (the sign-in, code, sign-up and invitation pages). */
.theme-corner{position:absolute;top:12px;right:16px;z-index:2}
@media (prefers-reduced-motion:reduce){.theme-switch-thumb,.theme-switch-track{transition:none}}
@media print{.theme-switch,.theme-corner{display:none!important}}