/* Zambrero UK · command strip and segmented pill.
   Shared by the map (/) and the dashboard (/os/). Self-contained: every
   selector is prefixed zs- and every colour is set here, so neither page's
   stylesheet can bend it and it looks the same on both. */

:root{
  --zs-cream:#F2E7DA;
  --zs-green:#0A3324;
  --zs-ease:cubic-bezier(.32,.72,0,1);
  --zs-rail-w:64px;
}

/* ── The command strip ─────────────────────────────────────────────
   A slim glass rail on the left edge, vertically centred. Two places:
   Map and Dashboard. It floats over the map, and on the dashboard it
   sits in the gutter left of the sidebar. */
.zs-rail{
  position:fixed;z-index:4000;left:12px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;padding:7px;
  border-radius:22px;
  background:rgba(10,16,22,.62);
  border:1px solid rgba(242,231,218,.22);
  box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
}
.zs-rail .zs-mark{
  width:36px;height:36px;margin:2px auto 6px;display:block;opacity:.95;
}
.zs-rail a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:50px;height:54px;border-radius:15px;text-decoration:none;
  color:rgba(242,231,218,.66);
  font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .25s var(--zs-ease),color .25s var(--zs-ease),transform .25s var(--zs-ease);
}
.zs-rail a svg{width:20px;height:20px}
.zs-rail a:hover{color:var(--zs-cream);background:rgba(242,231,218,.1)}
.zs-rail a:active{transform:scale(.96)}
.zs-rail a[aria-current=page]{color:#08121A;background:rgba(242,231,218,.94);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.zs-rail a:focus-visible{outline:2px solid var(--zs-cream);outline-offset:2px}
.zs-rail .zs-sep{height:1px;margin:2px 8px;background:rgba(242,231,218,.16)}
.zs-rail .zs-home{width:auto;height:auto;background:none!important;box-shadow:none!important}
.zs-rail .zs-home::after{display:none}
.zs-rail a.zs-region{height:40px;font-size:12px;letter-spacing:.08em}
.zs-rail a.zs-region b{font-weight:650}
.zs-rail a.zs-region[aria-pressed=true]{color:var(--zs-cream);background:rgba(242,231,218,.14);box-shadow:inset 0 0 0 1px rgba(242,231,218,.45)}

/* Tooltip on hover, to the right of the rail. */
.zs-rail a::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);
  white-space:nowrap;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--zs-cream);background:rgba(10,16,22,.9);border:1px solid rgba(242,231,218,.18);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--zs-ease);
}
.zs-rail a:hover::after{opacity:1;transform:translate(0,-50%)}

/* On the dashboard the rail is docked: full height, flush left, and the
   page is pushed right by its width. */
.zs-docked .zs-rail{
  left:0;top:0;bottom:0;transform:none;border-radius:0;border:0;border-right:1px solid rgba(242,231,218,.1);
  background:#051C13;padding:14px 7px;justify-content:flex-start;box-shadow:none;
}
.zs-docked .zs-rail .zs-mark{margin-bottom:14px}
body.zs-docked{padding-left:var(--zs-rail-w)}

/* ── The segmented pill ────────────────────────────────────────────
   Apple-style: a translucent track with a sliding thumb under the
   selected option. Built by ZS.pill(); keyboard: arrows move, the
   choice follows focus. */
.zs-seg{
  position:relative;display:inline-flex;align-items:stretch;padding:3px;gap:0;
  border-radius:999px;
  background:rgba(118,118,128,.18);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.12);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  user-select:none;
}
.zs-seg .zs-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 3px 8px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.08),inset 0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .38s var(--zs-ease),width .38s var(--zs-ease);
}
.zs-seg button{
  position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;
  padding:7px 16px;min-width:74px;border-radius:999px;
  font:inherit;font-size:13px;font-weight:550;letter-spacing:-.005em;white-space:nowrap;
  color:rgba(242,231,218,.78);
  transition:color .25s var(--zs-ease);
}
.zs-seg button[aria-checked=true]{color:#0B1116}
.zs-seg button:focus-visible{outline:2px solid rgba(242,231,218,.9);outline-offset:1px}
.zs-seg button .zs-n{margin-left:6px;font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}

/* Light surfaces (the dashboard header in light theme). */
.zs-seg.zs-light{background:rgba(118,118,128,.12);border-color:rgba(8,40,27,.1)}
.zs-seg.zs-light button{color:rgba(8,40,27,.62)}
.zs-seg.zs-light button[aria-checked=true]{color:#08281B}
.zs-seg.zs-light .zs-thumb{background:#fff}

@media (max-width:700px){
  .zs-rail{left:8px;padding:5px}
  .zs-rail a{width:44px;height:48px}
  .zs-rail a::after{display:none}
  .zs-seg button{padding:6px 11px;min-width:0;font-size:12px}
  .zs-docked .zs-rail{top:auto;bottom:0;left:0;right:0;height:60px;flex-direction:row;justify-content:center;
    border-right:0;border-top:1px solid rgba(242,231,218,.1);padding:5px}
  .zs-docked .zs-rail .zs-mark,.zs-docked .zs-rail .zs-sep{display:none}
  body.zs-docked{padding-left:0;padding-bottom:60px}
}
@media (prefers-reduced-motion:reduce){ .zs-seg .zs-thumb,.zs-rail a{transition:none} }
.zs-rail a[hidden]{display:none}
.zs-rail a[data-au] span{font-size:8.5px;letter-spacing:.02em}