/* ============================================================
   Solver segmented tabs — warm glass sliding thumb
   The active window slides between all three readable choices.
   ============================================================ */

.solver-tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--tab-count,3),1fr);
  width:100%;
  max-width:760px;
  height:68px;
  padding:5px;
  margin:0 auto 34px;
  border:1px solid rgba(148, 103, 51, .22);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(232, 218, 194, .72)),
    var(--cream-2);
  box-shadow:
    0 12px 26px rgba(93, 62, 27, .14),
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 5px rgba(90, 57, 20, .12);
}

.solver-tabs__thumb{
  position:absolute;
  top:5px;
  height:calc(100% - 10px);
  border-radius:999px;
  background:
    radial-gradient(110% 145% at 28% 8%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 25%, rgba(255,239,204,.20) 58%, transparent 74%),
    linear-gradient(135deg, #fffdf8 0%, #f7ead4 46%, #dca451 100%);
  box-shadow:
    0 8px 16px rgba(83, 51, 16, .24),
    inset 0 1px 1px rgba(255,255,255,.96),
    inset 0 -5px 10px rgba(123, 74, 15, .18),
    inset 0 0 0 1px rgba(255,255,255,.72);
  overflow:hidden;
  pointer-events:none;
  z-index:3;
  will-change:left,width;
}

.solver-tabs__thumb::before{
  content:"";
  position:absolute;
  top:6%;
  right:10%;
  width:14%;
  height:74%;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.88) 0%, rgba(255,203,113,.30) 48%, transparent 72%);
  filter:blur(8px);
  opacity:.72;
}

.solver-tabs__thumb::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  background:linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(8deg);
  opacity:0;
}
.solver-tabs.is-animating .solver-tabs__thumb::after{
  animation:solverTabsSweep .62s cubic-bezier(.22,1,.36,1);
}
@keyframes solverTabsSweep{
  0%{ opacity:0; left:-60%; }
  35%{ opacity:.85; }
  100%{ opacity:0; left:130%; }
}

.solver-tabs__opt{
  position:relative;
  z-index:2;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
  font-family:'Poppins',sans-serif;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:-.01em;
  min-width:0;
  padding:0 10px;
  color:#71563a;
  opacity:1;
  transform:scale(.96);
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.62);
  transition:
    opacity .25s ease,
    transform .45s cubic-bezier(.22,1,.36,1),
    color .3s ease;
  will-change:opacity,transform;
}
.solver-tabs__opt.side-left{ transform:scale(.96) translateX(-2px); }
.solver-tabs__opt.side-right{ transform:scale(.96) translateX(2px); }
.solver-tabs__opt:not(.active):hover{
  color:#3f2b17;
  transform:scale(1);
}
.solver-tabs__opt.active{
  color:#2c1d0e;
  opacity:1;
  transform:scale(1);
  z-index:5;
}
.solver-tabs__opt:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:8px;
}

@media (max-width:520px){
  .solver-tabs{ height:56px; }
  .solver-tabs__opt{ font-size:.70rem; padding:0 4px; }
}

@media (prefers-reduced-motion: reduce){
  .solver-tabs.is-animating .solver-tabs__thumb::after{ animation:none !important; }
  .solver-tabs__opt{ transition:opacity .15s linear !important; transform:none !important; }
}