/* ============================================================================
   THE SPLIT — two errands, two grids, one swipe between them
   ========================================================================== */
.sp-wrap{position:relative;display:flex;flex-direction:column;align-items:center}

/* -------------------------------------------------------------- the toggle
   The lit pill is exactly half the control and slides by exactly its own width,
   so the geometry is only correct if the two tabs are exactly half each. Sized
   by their text they were not, and nothing lined up. A two-column grid of 1fr
   forces the halves; the labels are the same length so the type is balanced too. */
.sp-toggle{position:relative;display:inline-flex;
  margin:0 auto 14px;padding:4px;border-radius:999px;
  border:1px solid var(--line);background:var(--well);isolation:isolate}
/* Both halves are pinned to one width rather than sized by their text. A grid of
   1fr would stretch the control to the full column, and content sizing makes the
   halves unequal, which is what left the pill sitting off its label. */
.sp-tab{position:relative;z-index:2;flex:0 0 auto;
  min-width:clamp(128px,30vw,162px);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:var(--ink-2);
  padding:12px 18px;border-radius:999px;white-space:nowrap;
  transition:color .3s cubic-bezier(.16,1,.3,1)}
.sp-tab b{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  font-family:var(--mono);font-size:10.5px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:inherit;
  transition:background .3s ease}
.sp-tab.on{color:#fff}
.sp-tab.on b{background:rgba(255,255,255,.24)}
/* the lit pill slides between the two rather than snapping */
.sp-ind{position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:999px;background:linear-gradient(112deg,#7C3AED,#E250C8);
  box-shadow:0 6px 20px -8px rgba(var(--glow-m),.9);
  transition:transform .42s cubic-bezier(.16,1,.3,1)}
.sp-wrap[data-side="gen"] .sp-ind{transform:translateX(100%)}
.sp-sub{margin:0 0 22px;text-align:center;font-size:14px;color:var(--ink-2);max-width:52ch}

/* --------------------------------------------------------------- the track */
/* Straight overflow clipping. An inline padding here sits INSIDE the clip box,
   so the pane you are not on shows through it as a sliver at the edge. The
   height follows the active pane so the shorter side leaves no dead space. */
.sp-view{width:100%;overflow:hidden;
  transition:height .5s cubic-bezier(.16,1,.3,1)}
.sp-track{display:flex;align-items:flex-start;width:200%;touch-action:pan-y;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sp-track.drag{transition:none;cursor:grabbing}
.sp-pane{width:50%;flex:none;display:grid;gap:14px;
  grid-template-columns:repeat(5,1fr);align-content:start;
  transition:opacity .34s ease}
.sp-pane.off{opacity:.35;pointer-events:none}
@media(max-width:960px){.sp-pane{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){
  .sp-pane{grid-template-columns:repeat(2,1fr);gap:12px}
  .sp-tab{padding:11px 12px;font-size:13.4px;gap:7px;min-width:clamp(112px,36vw,140px)}
  .sp-sub{font-size:13.4px;margin-bottom:18px}
}

/* a hint that there is another side, on touch where there is no hover */
.sp-view::after{content:"";display:block;height:0}
.sp-wrap[data-side="bench"] .sp-hint-r,
.sp-wrap[data-side="gen"] .sp-hint-l{display:none}