/* css/states.css — «сеть и состояния» (лист 29, js/states.js):
   каркас пустоты 29·2 · пре-лист разрешений 29·3 §3 · экран «ой» G20 ·
   бейдж офлайн-очереди 24 R6 на карточке · вспышка поля дока.
   Всё transform/opacity, спиннеров нет (SPEC); тёмная тема — токенами. */

/* ── каркас пустоты: ghost R16 dashed · иконка 32 p · Neucha 15 italic p ── */
.ske{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:24px 16px; border-radius:16px; text-align:center;
}
.ske::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil-faint); border-radius:16px; filter:url(#squiggle);}
.ske-ic{width:32px; height:32px; color:var(--pencil);}
.ske-ic svg{width:100%; height:100%; display:block;}
/* фраза-плейсхолдер — единственное место, где p-цвет допустим текстом (29·2) */
.ske-tx{font-size:15px; font-style:italic; color:var(--pencil); line-height:1.35;
  max-width:300px;}
.ske-sub{font-size:13px; color:var(--graphite-soft); max-width:300px;}
.ske-sm{padding:14px 12px; gap:6px;}
.ske-sm .ske-ic{width:24px; height:24px;}
.ske-sm .ske-tx{font-size:13px;}
.ske-tap{cursor:pointer;}
/* одно действие: ghost 40 (золото — .btn.primary из base) */
.ske-ghost{
  position:relative; min-height:40px; padding:0 16px; margin-top:4px;
  border:none; background:none; cursor:pointer; border-radius:10px;
  font-family:'Neucha',cursive; font-size:14px; color:var(--graphite-soft);
}
.ske-ghost::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite-soft); border-radius:10px; filter:url(#squiggle);}
.ske-ghost:hover{color:var(--graphite);}
.ske-act{margin-top:4px;}

/* ── экран «ой» на упавшем старте (G20): не белый экран ── */
.sk-boot{
  position:fixed; inset:0; z-index:80; background:var(--paper);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.sk-boot .ske{width:min(343px, 100%); padding:32px 20px;}

/* ── пре-лист разрешения (N9): нижний лист до системного окна ── */
#perm-dialog{width:min(420px, calc(100vw - 24px)); border:none; padding:0;
  background:var(--paper2); border-radius:16px 16px 12px 12px; color:var(--graphite);}
#perm-dialog::backdrop{background:rgba(44,42,38,.3);}
@media (max-width:480px){
  #perm-dialog{width:100vw; max-width:100vw; margin:auto 0 0; border-radius:16px 16px 0 0;}
}
.pm-frame{position:relative; display:flex; flex-direction:column; gap:8px;
  padding:0 16px calc(12px + var(--safe-bottom, 0px));}
.pm-frame::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:inherit; filter:url(#squiggle);}
.pm-grab{height:16px; display:flex; align-items:center; justify-content:center; flex:none;}
.pm-grab i{width:48px; height:4px; border-radius:2px; background:var(--pencil-faint);}
.pm-head{display:flex; align-items:center; gap:12px;}
.pm-head .ske-ic{color:var(--graphite-soft); flex:none;}
/* Caveat 22 — заголовок «Skrably хочет…» */
.pm-head .t{font-family:'Caveat',cursive; font-weight:700; font-size:22px;
  line-height:1.1; min-width:0;}
.pm-body{font-size:13px; line-height:17px; color:var(--graphite-soft);}
.pm-btns{display:flex; gap:8px; padding-top:4px;}
.pm-btns .btn.primary{flex:1; min-height:48px;}
.pm-btns .ske-ghost{flex:1; min-height:48px; margin-top:0;}

/* отказ в системе → строка-состояние red dashed 40 «как включить» на месте
   действия (профиль → уведомления: #push-hint) */
.perm-denied{
  position:relative; display:flex; align-items:center; min-height:40px;
  padding:4px 12px; border-radius:10px; color:var(--red-t) !important;
}
.perm-denied::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--red); border-radius:10px; filter:url(#squiggle);}

/* ── бейдж очереди 24 R6 ghost на карточке: часы = «в очереди» (29·1) ── */
.qmark{
  position:relative; width:24px; height:24px; flex:none; border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:var(--pencil);
  align-self:center;
}
.qmark::before{content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:6px;}
.qmark svg{width:18px; height:18px; display:block;}

/* ── маркер-вспышка поля дока (пустой ящичек: «кидай задачи сюда») ── */
.cp-flash::after{content:""; position:absolute; inset:-2px; border-radius:12px;
  background:var(--marker); opacity:0; pointer-events:none;
  animation:cp-flash .6s ease;}
@keyframes cp-flash{0%{opacity:0;} 35%{opacity:1;} 100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ .cp-flash::after{animation:none;} }