/* =====================================================================
   iOS / macOS-style SEGMENTED CONTROL
   Drop-in restyle for .uc-tabs (use-case tabs) and #statList (desktop).
   Pure CSS track + a single JS-positioned sliding pill (.seg-pill).
   Depends on tokens already in styles.css:
     --green-mist #F0FAF5 · --green-deep #007A52 · --gray #6B746E
     --line #E4E8E5 · --green #00B277 · --shadow-soft 0 8px 30px rgba(16,21,18,.06)
   No per-button background: the pill sits BEHIND the active segment.
   ===================================================================== */

/* ---- TRACK (pill container) ------------------------------------------ */
/* Marker class .seg-track is added by tabs.js so we never touch the
   existing rules that still target bare .uc-tabs elsewhere. */
.seg-track{
  position:relative;               /* pill is absolutely positioned to this */
  display:flex;
  gap:0;
  padding:4px;
  border-radius:999px;
  background:var(--green-mist);
  box-shadow:inset 0 0 0 1px var(--line);
  /* override the old underline styling from .uc-tabs */
  border-bottom:0 !important;
  isolation:isolate;               /* keep the pill's shadow local */
}

/* ---- SLIDING PILL INDICATOR ------------------------------------------ */
.seg-pill{
  position:absolute;
  top:4px;                         /* == track padding */
  left:0;                          /* real offset supplied via translateX */
  height:calc(100% - 8px);         /* track height minus top+bottom padding */
  width:0;                         /* set by JS */
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px rgba(0,178,119,.18);
  z-index:0;                       /* behind the segments */
  pointer-events:none;
  /* GPU-composited spring: drive transform + width, never `left`.
     The 1.56 overshoot in the bezier is the subtle iOS bounce. */
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),
             width     .42s cubic-bezier(.34,1.56,.64,1);
  will-change:transform,width;
}
/* Progress arc: a thin 3px green bar hugging the bottom inside edge of the
   pill. Replaces the old ::after underline; JS drives --uc-p / --sp 0->1. */
.seg-pill::after{
  content:"";
  position:absolute;
  left:8px;right:8px;bottom:5px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green-dark));
  transform:scaleX(var(--seg-p,0));
  transform-origin:left;
  transition:transform .12s linear;
  pointer-events:none;
}
[dir="rtl"] .seg-pill::after{transform-origin:right}

/* ---- SEGMENTS (the existing buttons) --------------------------------- */
.seg-track > button{
  position:relative;
  z-index:1;                       /* above the pill */
  flex:1 1 0;
  min-width:0;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;                         /* icon + label inline */
  padding:10px 18px;
  border:0;
  background:none !important;      /* the pill is the only background */
  border-radius:999px;            /* keeps focus ring pill-shaped */
  font-size:13.5px;
  font-weight:600;
  line-height:1.2;
  color:var(--gray);
  cursor:pointer;
  white-space:nowrap;
  transition:color .28s ease;
  -webkit-tap-highlight-color:transparent;
}
.seg-track > button svg{width:18px;height:18px;flex:none}
.seg-track > button:hover{color:var(--ink-soft,var(--green-deep))}
.seg-track > button.active{color:var(--green-deep)}
/* neutralise legacy per-button pseudo underline if the element carried it */
.seg-track > button::after{content:none !important}

/* Keyboard focus: crisp pill-shaped ring, only for keyboard users. */
.seg-track > button:focus{outline:none}
.seg-track > button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(0,178,119,.55);
}

/* ---- MOBILE: horizontally scrollable pill ---------------------------- */
@media (max-width:640px){
  .seg-track{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .seg-track::-webkit-scrollbar{display:none}
  .seg-track > button{
    flex:0 0 auto;                 /* natural width, no squeeze */
    scroll-snap-align:center;
  }
}

/* ---- VERTICAL variant (#statList) ------------------------------------ */
/* Applied only on desktop by tabs.js. The pill still slides; JS positions
   it with translate on the Y axis via the same offset math. */
.seg-track.seg-vertical{
  flex-direction:column;
  gap:2px;
  border-radius:22px;              /* not a 999px stadium when tall */
  padding:6px;
}
.seg-track.seg-vertical > button{
  flex:1 1 0;
  justify-content:flex-start;
  text-align:left;
  padding:13px 18px;
  min-height:58px;
  border-radius:16px;
}
.seg-track.seg-vertical .seg-pill{
  height:0;                        /* set by JS */
  width:calc(100% - 12px);
  left:6px;
  top:6px;
  border-radius:16px;
}
[dir="rtl"] .seg-track > button{justify-content:center}
[dir="rtl"] .seg-track.seg-vertical > button{text-align:right}

/* ---- REDUCED MOTION -------------------------------------------------- */
/* Pill jumps instantly; no progress fill. (styles.css already blanket-
   disables transitions, but we make the intent explicit + scoped here so
   this file is self-contained.) */
@media (prefers-reduced-motion:reduce){
  .seg-pill{transition:none !important}
  .seg-pill::after{display:none}
}