/* =========================================================
   Переключатель-сегмент (shared/seg.js): дорожка с равными
   ячейками и скользящей подсветкой. Размер задаёт font-size
   родителя — всё внутри в em, поэтому один и тот же переключатель
   годится и для телевизора, и для телефона.
   ========================================================= */

.seg{
  --n: 3; --i: 0;
  --pad: .3em;
  /* цвет подсветки: верх, низ, свечение */
  --seg-a: #8f8aa8; --seg-b: #4d4966; --seg-glow: rgba(140,130,190,.28);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: var(--pad); border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.26));
  box-shadow:
    inset 0 .12em .35em rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 1px 0 rgba(255,255,255,.06);
  user-select: none; -webkit-user-select: none;
}

.seg-thumb{
  position: absolute; z-index: -1;
  top: var(--pad); bottom: var(--pad); left: var(--pad);
  width: calc((100% - 2 * var(--pad)) / var(--n));
  border-radius: 999px;
  background: linear-gradient(180deg, var(--seg-a), var(--seg-b));
  box-shadow:
    0 .2em .9em var(--seg-glow),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.25);
  transform: translateX(calc(var(--i) * 100%));
  transition:
    transform .34s cubic-bezier(.65,0,.35,1),
    background .34s ease, box-shadow .34s ease;
}

.seg-opt{
  position: relative;
  min-width: 0; margin: 0; border: 0; background: none;
  padding: .62em .35em; border-radius: 999px;
  font: inherit; font-weight: 700; letter-spacing: .06em; line-height: 1;
  color: rgba(255,255,255,.58); text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .25s ease, background .2s ease;
}
.seg-opt.on{ color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.seg-opt:not(.on):not(:disabled):hover{ color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }
.seg-opt:focus-visible{ outline: 2px solid rgba(255,255,255,.85); outline-offset: -3px; }
.seg-opt.is-locked{ color: rgba(255,255,255,.28); text-decoration: line-through; cursor: not-allowed; }

/* ---------- цвета по смыслу ---------- */
.seg--scare{ --seg-a: #ff4d63; --seg-b: #b0102a; --seg-glow: rgba(255,45,80,.45); }
.seg--voice{ --seg-a: #5bbcff; --seg-b: #1d62a3; --seg-glow: rgba(70,165,255,.42); }
.seg--lite { --seg-a: #4fd889; --seg-b: #1f7a47; --seg-glow: rgba(60,210,130,.38); }

/* «выключено» — подсветка серая: выбор виден, но ничего не горит */
.seg--scare[data-v="off"], .seg--voice[data-v="off"]{
  --seg-a: #8f8aa8; --seg-b: #4d4966; --seg-glow: rgba(140,130,190,.25);
}
/* 18+ — отдельно и тревожно, чтобы не включили случайно */
.seg--voice[data-v="mat"]{ --seg-a: #ff3d6e; --seg-b: #8c0a2c; --seg-glow: rgba(255,40,100,.5); }

@media (prefers-reduced-motion: reduce){
  .seg-thumb{ transition: none; }
}
/* лёгкая картинка: без свечения, скольжение оставляем — оно дешёвое */
.lite .seg-thumb{ box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }