/* tariff-ui.css — общие куски тарифов 4.3.0 для «Откликов» и кабинета:
 * ползунок «Скорость в день» (speed-control.js) и окно «было / стало»
 * (tariff-news.js).
 *
 * Ползунок — один компонент на три места: автопилот в «Откликах», «Обзор» и настройки
 * кабинета. Цвета и радиусы берутся из токенов страницы (--card2, --line,
 * --line2, --text, --muted, --faint, --cyan, --blue, --purple, --ease, --fd):
 * у /responses/ и /cabinet/ они названы одинаково и переключаются через
 * [data-theme], своих цветов у компонента нет.
 *
 * Движение. Перетаскивание ползунка ничем не анимируется: число и заливка
 * идут за пальцем мгновенно, иначе ползунок кажется вязким. Анимация одна —
 * «искры» на максимуме тарифа, как у ползунка Effort в Claude при Ultracode:
 * короткий разлёт при выходе на максимум и тихое мерцание, пока скорость
 * стоит там. Ставят её редко, поэтому это место для маленькой радости.
 * Только transform и opacity; при prefers-reduced-motion искры стоят на
 * месте без разлёта и мерцания.
 */

.spd{
  /* Доля заливки 0..1 ставится скриптом на самом input (style="--r:…"),
     отсюда только запасное значение. */
  --spd-thumb:24px;
  --spd-ease-out:cubic-bezier(.23,1,.32,1);
  /* Цвета искр — от токенов бренда. В тёмной теме светлее: насыщенные
     фиолетовый и синий на тёмной карточке почти не видны. */
  --spd-c1:var(--cyan);--spd-c2:var(--purple);--spd-c3:var(--blue);
  position:relative;
}
[data-theme="dark"] .spd{
  --spd-c1:color-mix(in srgb,var(--cyan) 60%,#fff);
  --spd-c2:color-mix(in srgb,var(--purple) 45%,#fff);
  --spd-c3:#fff;
}

/* ---- Верхняя строка: число, подпись, сохранение ---- */
.spd-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-height:34px}
.spd-num{font-family:var(--fd);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.spd-unit{font-size:14.5px;font-weight:600;color:var(--muted)}
.spd-save{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--faint);
  opacity:0;transform:translateY(2px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.spd-save.is-on{opacity:1;transform:none}
.spd-save.is-ok{color:var(--green)}
.spd-save.is-err{color:var(--red)}
/* На максимуме число переливается цветами бренда, как подпись Ultracode. */
.spd.is-max .spd-num{
  background:linear-gradient(90deg,var(--cyan),var(--blue) 50%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Дорожка ---- */
.spd-rail{position:relative;margin-top:14px;height:30px;display:flex;align-items:center}
.spd-range{
  --r:.25;
  position:relative;z-index:1;
  -webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer}
.spd-range:focus{outline:none}
/* Заливка — срез общего градиента, а не градиент, сжатый в заполненную часть:
   поверх цветной полосы во всю ширину лежит «пустая» часть от ползунка до
   края. Граница считается от центра ползунка, поэтому заливка и кружок
   совпадают на любой ширине. */
.spd-range::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:
    linear-gradient(90deg,transparent calc(var(--spd-thumb) / 2 + (100% - var(--spd-thumb)) * var(--r)),var(--card2) 0),
    linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--purple));
  box-shadow:inset 0 0 0 1px var(--line2)}
.spd-range::-moz-range-track{
  height:8px;border-radius:999px;
  background:
    linear-gradient(90deg,transparent calc(var(--spd-thumb) / 2 + (100% - var(--spd-thumb)) * var(--r)),var(--card2) 0),
    linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--purple));
  box-shadow:inset 0 0 0 1px var(--line2)}
.spd-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:var(--spd-thumb);height:var(--spd-thumb);margin-top:-8px;
  border-radius:50%;border:0;background:#fff;
  box-shadow:0 0 0 1px rgba(13,17,48,.14),0 2px 10px rgba(13,17,48,.28);
  transition:transform .14s var(--ease),box-shadow .2s var(--ease)}
.spd-range::-moz-range-thumb{
  width:var(--spd-thumb);height:var(--spd-thumb);border-radius:50%;border:0;background:#fff;
  box-shadow:0 0 0 1px rgba(13,17,48,.14),0 2px 10px rgba(13,17,48,.28);
  transition:transform .14s var(--ease),box-shadow .2s var(--ease)}
/* Нажал — кружок чуть подрастает: ползунок «взят». */
.spd-range:active::-webkit-slider-thumb{transform:scale(1.1)}
.spd-range:active::-moz-range-thumb{transform:scale(1.1)}
.spd-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--purple)}
.spd-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--purple)}
.spd.is-max .spd-range::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--purple),0 0 18px rgba(139,92,246,.55)}
.spd.is-max .spd-range::-moz-range-thumb{box-shadow:0 0 0 2px var(--purple),0 0 18px rgba(139,92,246,.55)}

/* ---- Засечки: щелчок по числу ставит скорость ---- */
.spd-ticks{position:relative;height:22px;margin-top:4px}
.spd-tick{position:absolute;top:0;transform:translateX(-50%);
  left:calc(var(--spd-thumb) / 2 + (100% - var(--spd-thumb)) * var(--t));
  font-size:12.5px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;
  padding:2px 6px;border-radius:6px;line-height:1.3;transition:color .15s ease}
.spd-tick::before{content:"";position:absolute;left:50%;top:-5px;width:1px;height:4px;background:var(--line2)}
.spd-tick.is-on{color:var(--text)}
@media(hover:hover) and (pointer:fine){
  .spd:not(.is-locked) .spd-tick:hover{color:var(--text)}
}

/* ---- Прогноз под ползунком ---- */
.spd-fore{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted);min-height:20px}
.spd-fore b{color:var(--text);font-weight:600}
/* «Чтобы не ждать: тариф выше» в прогнозе (4.4.0): ссылка в цвет бренда. */
.spd-fore .spd-up a{color:var(--purple);font-weight:600}
@media(hover:hover) and (pointer:fine){.spd-fore .spd-up a:hover{text-decoration:underline}}

/* ---- Искры на максимуме ----
   Слой стоит в центре ползунка на правом краю дорожки (максимум всегда
   справа). Свечение под дорожкой, звёзды над ней, клики сквозь них. */
.spd-fx{position:absolute;top:50%;left:calc(100% - var(--spd-thumb) / 2);width:0;height:0;
  pointer-events:none;opacity:0;transition:opacity .15s ease}
.spd.is-max .spd-fx{opacity:1;transition:opacity .22s var(--spd-ease-out)}
/* Разлёт играет сразу в полную силу: плавное проявление слоя съедало его. */
.spd.is-burst .spd-fx.is-over{opacity:1;transition:none}
.spd-fx.is-under{z-index:0}
.spd-fx.is-over{z-index:2}
.spd-glow{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(139,92,246,.5),rgba(54,201,232,.18) 60%,transparent);
  opacity:.75}
/* Четырёхлучевая звезда: форма обрезкой, цвет — токены бренда. */
.spd-star,.spd-spark{position:absolute;left:0;top:0;width:var(--s,9px);height:var(--s,9px);
  margin:calc(var(--s,9px) / -2) 0 0 calc(var(--s,9px) / -2);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  background:var(--c,var(--purple))}
/* Статичное состояние звезды — оно же вид при reduced motion. */
.spd-star{opacity:.9;transform:translate(var(--x),var(--y)) scale(.85) rotate(45deg)}
.spd-spark{opacity:0}

@media(prefers-reduced-motion:no-preference){
  .spd.is-max .spd-glow{animation:spd-glow 2.4s ease-in-out infinite alternate}
  .spd.is-max .spd-star{animation:spd-twinkle var(--dur,2.6s) ease-in-out var(--d,0s) infinite both}
  .spd.is-burst .spd-spark{animation:spd-burst .7s var(--spd-ease-out) var(--d,0s) both}
}
@keyframes spd-glow{
  from{opacity:.55;transform:scale(.9)}
  to{opacity:.95;transform:scale(1.08)}
}
@keyframes spd-twinkle{
  0%,100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.35) rotate(0deg)}
  45%{opacity:1;transform:translate(var(--x),var(--y)) scale(1) rotate(45deg)}
  70%{opacity:.8;transform:translate(var(--x),var(--y)) scale(.9) rotate(60deg)}
}
@keyframes spd-burst{
  0%{opacity:1;transform:translate(0,0) scale(.4)}
  40%{opacity:1}
  100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1)}
}

/* ---- Бесплатный: скорость стоит на 5, вся шкала под замком ----
   Штриховка лежит под ползунком на всю длину дорожки, сама дорожка
   прозрачная, кружок на 5 рисуется поверх. Раньше штриховка шла от 10 до
   центра кружка на 50: отрезок 5–10 выглядел доступным, а конец полоски
   оставался недорисованным. */
.spd.is-locked .spd-range{cursor:not-allowed}
.spd.is-locked .spd-range::-webkit-slider-runnable-track{background:transparent;box-shadow:none}
.spd.is-locked .spd-range::-moz-range-track{background:transparent;box-shadow:none}
.spd.is-locked .spd-range::-webkit-slider-thumb{background:var(--card2);box-shadow:0 0 0 1px var(--line2)}
.spd.is-locked .spd-range::-moz-range-thumb{background:var(--card2);box-shadow:0 0 0 1px var(--line2)}
.spd-lockzone{position:absolute;z-index:0;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:999px;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--line2) 0 5px,transparent 5px 10px),var(--card2);
  box-shadow:inset 0 0 0 1px var(--line2)}
.spd.is-locked .spd-tick{color:var(--faint);opacity:.55;cursor:default}
.spd.is-locked .spd-tick.is-on{opacity:1;color:var(--text)}
.spd-lock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:3px 10px;border-radius:999px;background:var(--card2);border:1px solid var(--line)}
.spd-lock svg{width:12px;height:12px}
.spd-cta{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:12px}
.spd-cta p{flex:1 1 240px;margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.spd-cta p b{font-weight:600;color:var(--purple)}
.spd-cta a{flex:none}

/* ---- Скорость не меняется (старый тариф, проба) ---- */
.spd.is-fixed .spd-fore{margin-top:6px}

/* ======================================================================
   Окно «было / стало» (tariff-news.js): один раз после перевода на новую
   сетку. Подложка проявляется, карточка приезжает на 8px снизу и чуть
   растёт; плитка «стало» догоняет «было» с задержкой 60 мс, чтобы глаз
   прочитал их по порядку. Выход короче входа.
   ====================================================================== */
.tnw{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .16s ease}
.tnw.is-open{opacity:1;pointer-events:auto;transition:opacity .22s var(--ease)}
.tnw-back{position:absolute;inset:0;background:rgba(8,10,24,.66)}
.tnw-card{position:relative;width:100%;max-width:560px;max-height:min(92vh,720px);overflow:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r,16px);padding:24px 24px 20px;
  box-shadow:0 24px 80px rgba(6,8,28,.45);
  transform:translateY(8px) scale(.98);transition:transform .16s ease}
.tnw.is-open .tnw-card{transform:none;transition:transform .26s var(--ease)}
.tnw-eb{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tnw-card h2{font-family:var(--fd);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.015em;margin:8px 0 6px}
.tnw-lead{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0 0 18px}
.tnw-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.tnw-tile{border-radius:var(--r-sm,12px);padding:14px 15px;border:1px solid var(--line);background:var(--card2)}
.tnw-tile .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.tnw-tile .n{font-weight:700;font-size:15.5px;margin-top:6px;line-height:1.3}
.tnw-tile .d{color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.45}
.tnw-tile.is-new{border-color:transparent;
  background:linear-gradient(var(--card2),var(--card2)) padding-box,
    linear-gradient(135deg,var(--cyan),var(--blue),var(--purple)) border-box;border:1px solid transparent}
.tnw-tile.is-new .n{color:var(--text)}
.tnw-arrow{display:grid;place-items:center;color:var(--faint)}
.tnw-arrow svg{width:18px;height:18px}
.tnw-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tnw-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--muted)}
.tnw-list li b{color:var(--text);font-weight:600}
.tnw-list svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--green)}
.tnw-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.tnw-actions .btn{flex:1 1 auto}
@media(prefers-reduced-motion:no-preference){
  .tnw.is-open .tnw-tile{animation:tnw-in .3s var(--ease) both}
  .tnw.is-open .tnw-tile.is-new{animation-delay:.06s}
}
@keyframes tnw-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .tnw-card{transform:none;transition:none}
}
@media(max-width:560px){
  .tnw-card{padding:20px 18px 18px}
  .tnw-pair{grid-template-columns:1fr}
  .tnw-arrow{transform:rotate(90deg);height:18px}
  .tnw-actions .btn{width:100%}
}

/* ======================================================================
   «Отклики» (/responses/): строка месяца под статусом и окно ручного
   режима: «сейчас и завтра», когда не хватает дня, и тариф выше с
   доплатой, когда не хватает месяца (4.4.0).
   ====================================================================== */
.st-mid .month-note{display:block;margin-top:4px;font-size:14px;color:var(--faint);font-variant-numeric:tabular-nums}
.lim-lead{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0 0 16px}
.lim-link{color:var(--purple);font-weight:600}
.lim-link:hover{text-decoration:underline}
.lim-offer{padding:14px 16px;border:1px solid var(--line2);border-radius:var(--r-sm,12px)}
.lim-offer .lo-name{font-weight:700;font-size:15px;line-height:1.35;color:var(--text)}
.lim-offer .lo-note{margin:4px 0 12px;color:var(--muted);font-size:13.5px;line-height:1.5}
.lim-offer .lo-btn{width:100%}

/* ======================================================================
   Заглушка «раздел откроется, когда включите тариф» (tariff-lock.js).
   Для человека без тарифа: раздел открывается и объясняет, что внутри
   появится после включения, одна кнопка — в «Подписку». Своего движения
   нет: в кабинете раздел проявляется общим cabReveal.
   ====================================================================== */
.tlock{display:flex;gap:16px;align-items:flex-start}
.tlock-ic{width:44px;height:44px;flex:none;border-radius:var(--r-sm,12px);display:grid;place-items:center;
  background:var(--soft);color:var(--purple)}
.tlock-ic svg{width:20px;height:20px}
.tlock-tx{min-width:0}
.tlock-t{font-size:17px;font-weight:700;line-height:1.3;color:var(--text)}
.tlock-p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:56ch}
.tlock-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;padding:10px 18px;
  border-radius:var(--r-xs,10px);font-weight:600;font-size:15px;color:#fff;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--blue),var(--purple));transition:filter .2s ease,transform .16s var(--ease)}
.tlock-btn:active{transform:scale(.975)}
@media(hover:hover) and (pointer:fine){.tlock-btn:hover{filter:brightness(1.09)}}
.tlock-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
/* Отдельные страницы: своя карточка и заголовок в стиле страницы. */
.tlock-page{padding:4px 0 40px}
.tlock-h1{font-family:var(--fd);font-weight:700;font-size:29px;letter-spacing:-.015em;line-height:1.1;margin:0 0 20px;color:var(--text)}
.tlock-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r,16px);padding:22px}
@media(max-width:560px){
  .tlock{flex-direction:column;gap:12px}
  .tlock-btn{width:100%}
  .tlock-h1{font-size:24px}
}