/* Segmented tab picker (Apple-style): equal segments, one sliding thumb.
   The thumb holds a second copy of the labels, counter-translated, so the selected
   label inverts continuously as the thumb moves — transform only, no repaints. */

.seg{
  --n:4;--pad:3px;--item-h:28px;
  position:fixed;z-index:201;
  top:calc((var(--nav-h) - var(--item-h) - var(--pad) * 2 - 2px) / 2);left:50%;
  translate:-50% 0;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);
  padding:var(--pad);
  border:1px solid var(--faint);border-radius:999px;
  background:var(--paper2);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}

.seg-item,.seg-thumb-row span{
  display:grid;place-items:center;height:var(--item-h);padding:0 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.seg-item{
  position:relative;z-index:0;
  color:var(--dim);text-decoration:none;border-radius:999px;
  -webkit-tap-highlight-color:transparent;
}
.seg-item:focus-visible{outline:1px solid var(--hot);outline-offset:-2px}

.seg-thumb{
  position:absolute;z-index:1;pointer-events:none;
  top:var(--pad);left:var(--pad);
  width:calc((100% - var(--pad) * 2) / var(--n));height:var(--item-h);
  border-radius:999px;overflow:hidden;
  background:var(--ink);opacity:0;
}
.seg-thumb-row{
  position:absolute;top:0;left:0;
  width:calc(100% * var(--n));
  display:grid;grid-template-columns:repeat(var(--n),1fr);
  color:var(--paper);
}

@media (hover:hover){
  .seg-item:hover{color:var(--ink)}
}