/* ─── Универсальная модалка уведомлений/подтверждений (js/modal.js) ───
   Один компонент, два скина:
   • desktop — центрированный диалог поверх ::backdrop (общая dialog-база
     в screens.css: margin:auto, прозрачный фон, backdrop);
   • ≤639px (телефон / Telegram Mini App / iOS+Android WebView-обёртки) —
     нижний лист: «ручка», кнопки во всю ширину, отступ под safe-area.
   Правила: скроллится ТОЛЬКО тело (.skm-body), шапка и футер пришпилены;
   максимум две кнопки, основная справа; картинка 16:9 full-bleed. */

#sk-modal{width:min(432px, calc(100vw - 24px));}
.skm-frame{
  display:flex; flex-direction:column;
  max-height:min(82dvh, 640px);
  background:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 1px, transparent 1.2px);
  background-size:24px 24px;
  position:relative; padding:16px 18px 14px;
  border-radius:var(--r-sketch);
  box-shadow:7px 9px 0 rgba(44,42,38,.22);
  transform:rotate(-.4deg);
  animation:skm-pop .16s ease;
}
.skm-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border:2px solid var(--graphite); border-radius:var(--r-sketch);
  filter:url(#squiggle);
}
@keyframes skm-pop{
  from{transform:rotate(-.4deg) scale(.96); opacity:.5;}
  to{transform:rotate(-.4deg) scale(1); opacity:1;}
}

/* ── акцент типа: подчёркивание под заголовком (info/error/success/warn) ── */
#sk-modal{--skm-accent:var(--ink-blue);}
#sk-modal[data-kind="error"]{--skm-accent:var(--red);}
#sk-modal[data-kind="success"]{--skm-accent:var(--green);}
#sk-modal[data-kind="warn"]{--skm-accent:var(--amber);}

/* ── шапка: заголовок + ✕ (.m-close из screens.css, абсолютный) ── */
.skm-grab{display:none;}
#skm-title{margin-bottom:2px; overflow-wrap:anywhere;}
#skm-title:empty{display:none;}
#skm-title:empty + .skm-line{display:none;}
/* синяя линия-акцент под заголовком убрана из разметки (по просьбе) — правила
   ниже мертвы, оставлены на случай возврата элемента */
.skm-line{
  flex:none; display:block; width:118px; height:0; margin:0 0 10px;
  border-top:2.6px solid var(--skm-accent);
  filter:url(#squiggle);
}
/* крестик закрытия skModal — по шаблону (лист 06·3 .xb): 40 R10, карандашный
   контур ::before + filter:url(#squiggle), line-✕ 2.5/24 вместо текст-глифа.
   Скоуп .skm-x — только модалка skModal (ач/стат/гонка), другие .m-close не трогаем. */
.skm-x{ width:40px; height:40px; top:12px; right:12px; border-radius:10px;
  color:var(--graphite-soft); }
.skm-x::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:10px; filter:url(#squiggle); }
.skm-x svg{ width:22px; height:22px; }
.skm-x:hover{ color:var(--red); transform:none; }
.skm-x:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px; border-radius:10px; }

/* ── тело: единственная скроллящаяся зона; буфер по краям, чтобы
   squiggle-рамки контента не резались краем скролла ── */
.skm-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:2px 10px 8px; margin:0 -10px;
  font-size:.97rem; line-height:1.45; color:var(--graphite);
}
.skm-text{margin:0 0 4px; white-space:pre-line; overflow-wrap:anywhere;}
.skm-rich :where(p, ul, ol){margin:6px 0; overflow-wrap:anywhere;}
.skm-rich :where(ul, ol){padding-left:20px;}

/* картинка — 16:9 full-bleed сверху тела, своя графитовая рамка */
.skm-pic{
  margin:2px 0 10px; border-radius:14px; overflow:hidden;
  box-shadow:0 0 0 2px var(--graphite);
}
.skm-pic img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;}

/* ── футер: пунктирный отрыв, кнопки ≥44px, основная справа ── */
.skm-foot{
  flex:none; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  padding-top:12px; position:relative;
}
.skm-foot::before{
  content:""; position:absolute; left:2px; right:2px; top:0;
  border-top:1.6px dashed var(--pencil-faint);
}
.skm-foot .btn{min-height:44px; padding:8px 18px; font-size:.98rem;}
.skm-foot .btn.primary{font-family:'Caveat',cursive; font-weight:700; font-size:1.12rem;}
.skm-foot .btn.primary.danger{background:var(--red);}
.skm-foot .btn.primary.danger::before{border-color:var(--red);}

/* ══ нижний лист: телефоны и Mini App (брейкпоинт = MQ_PHONE в core.js) ══ */
@media (max-width:639px){
  #sk-modal{
    width:100vw; max-width:100vw; max-height:100dvh;
    margin:auto 0 0; /* прижать к нижнему краю; центрирование остаётся по X */
  }
  .skm-frame{
    max-height:88dvh;
    transform:none; border-radius:22px 22px 0 0;
    box-shadow:0 -8px 30px rgba(44,42,38,.25);
    padding:6px 14px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)));
    animation:skm-up .3s cubic-bezier(.3,1.2,.5,1);
  }
  .skm-frame::before{border-radius:22px 22px 0 0; border-bottom:none;}
  .skm-grab{
    display:block; flex:none; width:44px; height:5px; border-radius:4px;
    background:var(--pencil-faint); margin:4px auto 8px;
  }
  .skm-foot .btn{flex:1 1 0; min-width:0; text-align:center;}
  @keyframes skm-up{
    from{transform:translateY(56px); opacity:.4;}
    to{transform:none; opacity:1;}
  }
}
/* анимации гаснут глобально под prefers-reduced-motion / body.light-fx (base.css) */