/* ─── Пейвол (канон-чертёж 11): тарифы + способы + оплата ─────────────────
   Порт docs/blueprints/11-pricing.html (11·1-4): шит снизу ≤520, три тарифа
   строками 56, буллеты выбранного 136, ОДНА gold-кнопка 48 (всегда в кадре,
   не ghost/disabled), способы 48 (★/крипта/карта), restore/промо ghost 32,
   обработка-кольцо 1.1с, успех с конфетти 26, отказ red-dashed со штампом.
   Переменные — web-токены, #sqg→#squiggle. Анимации transform/opacity (§1). */

/* шит снизу: диалог прижат к низу, R16 только сверху, тап мимо = закрыть */
#plan-dialog{border:none; background:none; padding:0; margin:0 auto;
  position:fixed; inset:auto 0 0 0; width:min(520px,100vw); max-width:100vw;
  max-height:calc(100vh - 48px); overflow:visible;}
#plan-dialog::backdrop{background:rgba(44,42,38,.35);}
/* авто-фокус showModal садится на сам <dialog> (контейнер, не контрол) — гасим
   его UA-кольцо (синее на iOS); фокус-кольца кнопок внутри остаются */
#plan-dialog:focus{outline:none;}

/* выезд шита снизу — transform/opacity, один композит-слой (§1): анимация на
   transform промотит .pw-sheet в отдельный слой на время выезда, поэтому
   filter:url(#squiggle) всех псевдо растрируется ОДИН раз, а не по кадрам */
@keyframes pw-sheet-up{from{transform:translateY(100%);}}
@keyframes pw-bd-in{from{opacity:0;}}
#plan-dialog[open] .pw-sheet{animation:pw-sheet-up .24s cubic-bezier(.22,1,.36,1);}
#plan-dialog[open]::backdrop{animation:pw-bd-in .2s ease;}

.pw-sheet{position:relative; background:var(--paper2,#FFFDF6);
  border-radius:16px 16px 0 0; padding:16px 16px calc(16px + var(--safe-bottom));
  max-height:calc(100vh - 48px); overflow-y:auto; overscroll-behavior:contain;}
.pw-sheet::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-bottom:none; border-radius:16px 16px 0 0;
  filter:url(#squiggle);}

/* вдавливание 90 мс — «лифт» */
.pw-sheet [data-press]{transition:transform .09s ease;}
.pw-sheet [data-press]:active{transform:scale(.96);}
/* лампа 360 мс — вспышка маркером внутри контрола */
@keyframes pw-lamp{0%{box-shadow:inset 0 0 0 99px rgba(255,222,89,0);}
  35%{box-shadow:inset 0 0 0 99px var(--marker);}
  100%{box-shadow:inset 0 0 0 99px rgba(255,222,89,0);}}
.pw-lamp{animation:pw-lamp .36s ease;}

/* шапка 56 (метод/оплата — 48): заголовок Caveat + ✕ 40 */
.pw-top{display:flex; align-items:center; gap:8px; height:56px;}
.pw-top.h48{height:48px;}
.pw-title{font-family:'Caveat',cursive; font-weight:700; font-size:22px; flex:1;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--graphite);}
.pw-top.h48 .pw-title{font-size:20px;}
.pw-x{width:40px; height:40px; flex:none; border-radius:10px; position:relative;
  background:var(--paper2,#FFFDF6); color:var(--graphite-soft); border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-family:inherit;}
.pw-x::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.pw-x svg{width:18px; height:18px;}

/* строка тарифа 343×56 R14: радио 24 · имя 19 + суть 11 · цена 17 + период 10 */
.pw-plan{width:100%; height:56px; border-radius:14px; background:var(--paper2,#FFFDF6);
  position:relative; display:flex; align-items:center; gap:12px; padding:0 12px;
  text-align:left; margin-top:8px; border:none; cursor:pointer; font-family:inherit;}
.pw-plan:first-of-type{margin-top:0;}
.pw-plan::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:14px; filter:url(#squiggle);}
.pw-plan.sel{background:var(--marker);}
.pw-plan.sel::before{border-width:2px;}
.pw-rad{width:24px; height:24px; flex:none; border-radius:50%; background:#fff;
  position:relative; box-shadow:0 0 0 2px var(--graphite);}
.pw-rad::after{content:""; position:absolute; inset:5px; border-radius:50%;
  background:var(--graphite); opacity:0; transform:scale(.4); transition:.15s;}
.sel > .pw-rad::after{opacity:1; transform:scale(1);}
.pw-nm{flex:1; min-width:0; line-height:1;}
.pw-nm b{font-family:'Caveat',cursive; font-weight:700; font-size:19px; color:var(--graphite);
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pw-nm span{font-size:11px; color:var(--pencil); display:block; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pw-plan.sel .pw-nm span{color:var(--graphite-soft);}
.pw-pr{text-align:right; line-height:1; flex:none;}
.pw-pr b{font-family:'Caveat',cursive; font-weight:700; font-size:17px; color:var(--graphite); display:block;}
.pw-pr span{font-size:10px; color:var(--pencil); display:block; margin-top:2px;}
/* ярлыки 20 R6, поворот −4°: «популярный» gold / «у вас сейчас» ghost */
.pw-tag,.pw-cur{position:absolute; top:-8px; right:10px; height:20px; padding:0 8px;
  border-radius:6px; font-size:12px; display:flex; align-items:center; transform:rotate(-4deg);}
.pw-tag{background:var(--gold,#D9A832); color:#fff; font-family:'Caveat',cursive; font-weight:700;}
.pw-cur{background:var(--paper2,#FFFDF6); color:var(--pencil); font-size:10px;}
.pw-cur::before{content:""; position:absolute; inset:0; border:1.5px dashed var(--pencil);
  border-radius:6px; filter:url(#squiggle);}

/* буллеты выбранного 343×136 R16: заголовок + 4 строки по 24, смена 100+200 мс */
.pw-blts{margin-top:12px; background:var(--paper2,#FFFDF6); border-radius:16px;
  position:relative; padding:10px 14px; min-height:136px;}
.pw-blts::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:16px; filter:url(#squiggle);}
.pw-blts .row{display:flex; align-items:center; gap:8px; min-height:24px;
  font-size:13.5px; color:var(--graphite-soft); transition:opacity .2s ease;}
.pw-blts .row.hd{color:var(--pencil); font-size:12px;}
.pw-blts .row svg{width:14px; height:14px; flex:none; color:var(--green);}
.pw-blts .row .tx{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pw-blts.fade .row{opacity:0;}

/* gold-кнопка 343×48 R12 — единственный акцент, никогда ghost/disabled */
.pw-cta{margin-top:12px; width:100%; height:48px; border-radius:12px;
  background:var(--gold,#D9A832); color:#fff; font-family:'Caveat',cursive; font-weight:700;
  font-size:19px; position:relative; display:flex; align-items:center; justify-content:center;
  gap:8px; border:none; cursor:pointer;}
.pw-cta::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.pw-cta .tx{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* сноска 24: тумблер периода («год −30%») или «продолжить бесплатно» */
.pw-sub{margin-top:4px; min-height:24px; display:flex; align-items:center;
  justify-content:center; font-size:12px; color:var(--pencil); width:100%; gap:6px;}
.pw-sub button{text-decoration:underline dashed; text-underline-offset:3px;
  color:var(--pencil); font-size:12px; min-height:24px; background:none; border:none;
  cursor:pointer; font-family:inherit;}
.pw-sub button.on{color:var(--graphite); }

/* ряд способа 343×48 R12: иконка 24 + имя 16/условия 10 + радио */
.pw-mrow{width:100%; height:48px; border-radius:12px; background:var(--paper2,#FFFDF6);
  position:relative; display:flex; align-items:center; gap:12px; padding:0 12px;
  text-align:left; margin-top:8px; border:none; cursor:pointer; font-family:inherit;}
.pw-mrow::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
.pw-mrow.sel{background:var(--marker);}
.pw-mrow.sel::before{border-width:2px;}
.pw-mrow svg.ic{width:24px; height:24px; flex:none; color:var(--graphite-soft);}
.pw-mrow.sel svg.ic{color:var(--graphite);}
.pw-mrow .pw-nm b{font-size:16px;}
.pw-mrow .pw-nm span{font-size:10px;}

/* ghost-строки 32 R8: «уже платил? восстановить» и «у меня есть код» */
.pw-ghost{margin-top:8px; width:100%; min-height:32px; border-radius:8px; position:relative;
  color:var(--graphite-soft); font-size:12px; display:flex; align-items:center;
  justify-content:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:inherit; padding:0 10px;}
.pw-ghost::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:8px; filter:url(#squiggle);}
.pw-ghost svg{width:14px; height:14px; flex:none;}
/* раскрытое поле промо-кода: инпут 16px (iOS-зум), кнопка-стрелка */
.pw-promo{margin-top:8px; display:flex; gap:8px;}
.pw-promo input{flex:1; min-width:0; height:40px; border-radius:10px; border:none;
  outline:none; background:var(--paper2,#FFFDF6); padding:0 12px; font-family:inherit;
  font-size:16px; color:var(--graphite); position:relative;}
.pw-promo .inwrap{flex:1; min-width:0; position:relative; display:flex;}
.pw-promo .inwrap::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.pw-promo .go{width:64px; height:40px; flex:none; border-radius:10px; position:relative;
  background:none; border:none; cursor:pointer; font-family:'Caveat',cursive;
  font-weight:700; font-size:16px; color:var(--graphite);}
.pw-promo .go::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle);}
.pw-promo-msg{margin-top:4px; font-size:12px; color:var(--red); min-height:16px; text-align:center;}

/* обработка: кольцо 48 dashed, rotate 1.1 с (transform-only) */
.pw-state{display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:24px 0 8px; text-align:center;}
.pw-ring{width:48px; height:48px; border-radius:50%; border:2.5px dashed var(--graphite-soft);
  animation:pw-spin 1.1s linear infinite;}
@keyframes pw-spin{to{transform:rotate(360deg);}}
.pw-state h3{font-family:'Caveat',cursive; font-weight:700; font-size:22px; color:var(--graphite);}
.pw-state .sm{font-size:12px; color:var(--pencil); max-width:280px; line-height:1.35;}
.pw-note{margin-top:8px; font-size:11px; color:var(--pencil); min-height:24px;
  display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;}

/* отказ: red dashed панель + штамп «не прошло ✕» 6° */
.pw-fail{position:relative; width:100%; border-radius:16px; padding:16px; margin-top:8px;}
.pw-fail::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px dashed var(--red); border-radius:16px; filter:url(#squiggle);}
.pw-fail .st{position:absolute; top:-14px; right:14px; height:32px; padding:0 12px;
  border-radius:8px; background:var(--paper2,#FFFDF6); border:2px solid var(--red);
  color:var(--red); font-family:'Caveat',cursive; font-weight:700; font-size:17px;
  display:flex; align-items:center; transform:rotate(6deg);}
.pw-fail p{font-size:13px; color:var(--graphite-soft); margin:0;}

/* конфетти 26 (как финал ящичка): фиксированные цвета сущностей */
.pw-cw{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6;}
.pw-cf{position:absolute; width:8px; height:16px; top:-20px;
  animation:pw-fall 1.5s ease-in forwards;}
@keyframes pw-fall{to{transform:translateY(80vh) rotate(540deg);}}

@media (prefers-reduced-motion:reduce){
  .pw-ring,.pw-cf{animation:none;}
  .pw-lamp{animation:none;}
  #plan-dialog[open] .pw-sheet,#plan-dialog[open]::backdrop{animation:none;}
}
body.light-fx .pw-sheet::before,body.light-fx .pw-sheet [class*="pw-"]::before{filter:none;}