/* THE SWITCHER, the strip across the top of every layout (core.js, The switcher).
 *
 * Built from the drawing Chris approved on 12 Oct 2026, which is its prototype:
 * https://claude.ai/artifact/EJRCt7enFMFMZXy4Qcyomi
 *
 * Its own colours, light and dark, because it sits above every layout and each
 * layout names its colours differently. Light, and dark when the device asks,
 * as every layout is. A segmented control, not tabs or pills: those already mean a day or a
 * category inside the layouts, and this is a step above them. It takes the
 * layout's typeface, so an event's own typeface reaches it too.
 *
 * Dept 10, the Public Surface.
 */
.nps-sw{
  --sw-bg:#F0EFEB; --sw-rule:#E0E2E6; --sw-track:#E3E2DD; --sw-text:#4C5563;
  --sw-hover:#14171C; --sw-on:#FFFFFF; --sw-on-text:#14171C; --sw-shadow:0 1px 2px rgba(20,23,28,.14),0 0 0 1px rgba(20,23,28,.04);
  --sw-focus:#C0263A;
  background:var(--sw-bg);border-bottom:1px solid var(--sw-rule);
  padding-block:8px;padding-inline:16px;
  font-family:var(--sans,Archivo,"Helvetica Neue",Arial,sans-serif);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nps-sw{
  --sw-bg:#0B0E12; --sw-rule:#262C36; --sw-track:#1C2129; --sw-text:#A6AFBC;
  --sw-hover:#EEF1F5; --sw-on:#323A48; --sw-on-text:#F4F6F9; --sw-shadow:0 1px 2px rgba(0,0,0,.5);
  --sw-focus:#E8637A;
}}
:root[data-theme="dark"] .nps-sw{
  --sw-bg:#0B0E12; --sw-rule:#262C36; --sw-track:#1C2129; --sw-text:#A6AFBC;
  --sw-hover:#EEF1F5; --sw-on:#323A48; --sw-on-text:#F4F6F9; --sw-shadow:0 1px 2px rgba(0,0,0,.5);
  --sw-focus:#E8637A;
}
.nps-sw-in{display:flex;width:max-content;max-width:100%;margin-inline:auto;
  background:var(--sw-track);border-radius:10px;padding:3px;gap:2px}
.nps-sw-seg{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:32px;padding:5px 16px;border-radius:7px;font-size:13px;font-weight:600;line-height:1.15;
  letter-spacing:.005em;color:var(--sw-text);text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
a.nps-sw-seg:hover{color:var(--sw-hover)}
a.nps-sw-seg:focus-visible{outline:2px solid var(--sw-focus);outline-offset:1px}
.nps-sw-seg.is-on{background:var(--sw-on);color:var(--sw-on-text);box-shadow:var(--sw-shadow);cursor:default}
/* A phone: the control takes the width, the names share it equally, and a long
   name may take two lines rather than push the page sideways. */
@media (max-width:560px){
  .nps-sw-in{width:100%}
  .nps-sw-seg{padding:5px 6px;white-space:normal;text-wrap:balance}
}
@media print{.nps-sw{display:none!important}}