/* Каркас экрана на время загрузки (js/skeleton.js). Сами блоки — .skeleton из
   base.css, тут только раскладка. Каркас проявляется с задержкой: мгновенный
   переход не должен мигать серыми прямоугольниками. */

.sk {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  animation: sk-in 220ms var(--ease-out) 110ms both;
}
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }

.sk-top {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.sk-top__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: calc(64px + env(safe-area-inset-top, 0px));
}
.sk-top__btn { width: 40px; height: 40px; border-radius: var(--r-md); }

.sk-main { padding-top: var(--s-6); padding-bottom: var(--s-8); display: grid; gap: var(--s-6); }
.sk-head { display: grid; gap: var(--s-3); justify-items: start; }

.sk-list { display: grid; gap: var(--s-3); }
.sk-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.sk-row__ico { width: 52px; height: 52px; border-radius: var(--r-md); }
.sk-row__body { display: grid; gap: var(--s-2); align-content: center; justify-items: start; }

.sk-cards { display: grid; gap: var(--s-4); }
.sk-block { height: 132px; border-radius: var(--r-xl); }

.sk-doc__text { display: grid; gap: var(--s-5); min-width: 0; align-content: start; }
.sk-tabs { display: none; }
.sk-para { display: grid; gap: var(--s-2); justify-items: start; }
.sk-doc__side { display: none; }
@media (max-width: 999px) { .sk-tabs { display: block; } }
@media (min-width: 1000px) {
  .sk-doc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); }
  .sk-doc__side { display: block; height: 420px; }
}