/* =============================================================
   Шаблон «Колода листов»
   Разделы: переменные · каркас · панель · шапка · колода ·
            лист · разметка · навигация · адаптив · печать
   ============================================================= */

:root{
  --bg:#FFFFFF;
  --bg-soft:#f4e7e7;             /* фон информационной панели */
  --ink:#15171B;
  --ink-soft:#6E747C;
  --line:rgba(21,23,27,.14);
  --line-soft:rgba(21,23,27,.07);
  --accent:#1D3E9E;

  --panel-max:clamp(250px,21vw,330px);
  --pad-x:clamp(16px,2.6vw,34px);
}

*{box-sizing:border-box}
html{height:100%}
body{
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  font-family:'Onest','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* =============================================================
   КАРКАС
   ============================================================= */
.shell{
  display:grid;
  grid-template-columns:var(--panel-max) minmax(0,1fr);
  min-height:100vh;
  min-height:100dvh;
}

.main{
  display:flex;flex-direction:column;min-width:0;
  overflow-x:clip;
}

/* =============================================================
   ИНФОРМАЦИОННАЯ ПАНЕЛЬ
   ============================================================= */
.panel{
  background:var(--bg-soft);
  border-right:1px solid var(--line);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(21,23,27,.2) transparent;
}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:rgba(21,23,27,.18);border-radius:9px}

.panel__in{
  min-height:100%;
  display:flex;flex-direction:column;
  padding:clamp(20px,2.6vh,30px) clamp(18px,1.6vw,24px) 22px;
  gap:18px;
}

.panel__top{display:flex;flex-direction:column;gap:3px}
.panel__org{
  margin:0;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:none;
  color:var(--ink-soft);
}
.panel__group{
  margin:0;font-size:19px;font-weight:700;line-height:1.15;color:var(--ink);
}
.panel__lead{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

.panel__sections{display:flex;flex-direction:column}

.sec{border-top:1px solid var(--line);}
.sec:last-of-type{border-bottom:1px solid var(--line)}
.sec__head{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  padding:13px 2px;
  font-size:12px;font-weight:600;letter-spacing:.055em;text-transform:none;
  color:var(--ink);
  transition:color .2s;
}
.sec__head::-webkit-details-marker{display:none}
.sec__head:hover{color:var(--accent)}
.sec__head:focus-visible{outline:1px solid var(--ink-soft);outline-offset:2px}
.sec__chev{
  width:11px;height:11px;flex:0 0 auto;margin-left:auto;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease;opacity:.6;
}
.sec[open] .sec__chev{transform:rotate(180deg)}
.sec__num{
  font-size:10px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;opacity:.75;
}
.sec__body{padding:0 2px 16px}

/* содержимое разделов панели (markdown) */
.md{font-size:13px;line-height:1.66;color:var(--ink-soft)}
.md > *:first-child{margin-top:0}
.md > *:last-child{margin-bottom:0}
.md p{margin:0 0 .7em}
.md h1,.md h2,.md h3,.md h4{
  font-weight:600;color:var(--ink);line-height:1.25;margin:1.2em 0 .45em;
}
.md h1{font-size:1.24em}
.md h2{font-size:1.12em}
.md h3{font-size:1em}
.md h4{font-size:.94em;color:var(--ink-soft);letter-spacing:.03em;text-transform:none}
.md ul,.md ol{margin:0 0 .8em;padding-left:1.1em}
.md li{margin:0 0 .34em}
.md ul{list-style:none;padding-left:0}
.md ul li{position:relative;padding-left:14px}
.md ul li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:4px;height:4px;border-radius:50%;background:rgba(21,23,27,.28);
}
.md ul ul,.md ol ol,.md ul ol,.md ol ul{margin:.34em 0 0}
.md li.task{padding-left:0}
.md li.task::before{display:none}
.md li.task input{margin:0 .4em 0 0;accent-color:var(--accent)}
.md a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(29,62,158,.35)}
.md a:hover{text-decoration-color:currentColor}
.md code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(21,23,27,.06);border-radius:3px;padding:.1em .38em;color:var(--ink);
}
.md pre{
  margin:0 0 .8em;padding:10px 12px;overflow-x:auto;
  background:rgba(21,23,27,.045);border:1px solid var(--line-soft);border-radius:6px;
}
.md pre code{background:none;padding:0;font-size:.86em;line-height:1.55}
.md blockquote{
  margin:0 0 .8em;padding-left:11px;border-left:2px solid var(--line);color:var(--ink-soft);
}
.md hr{border:0;border-top:1px solid var(--line);margin:1em 0}
.md table{border-collapse:collapse;width:100%;margin:0 0 .8em;font-size:.94em}
.md th,.md td{text-align:left;padding:.42em .5em;border-bottom:1px solid var(--line-soft);vertical-align:top}
.md th{font-weight:600;color:var(--ink);border-bottom-color:var(--line)}
.md img{max-width:100%;height:auto;border-radius:4px}
.md .katex{font-size:1.05em!important}

.panel__foot{
  margin:auto 0 0;padding-top:16px;
  display:flex;flex-direction:column;gap:7px;
}
.panel__mail{margin:0;font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
.panel__mail kbd{
  font-family:inherit;font-size:11px;white-space:nowrap;background:#fff;
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink-soft);
}
.panel__stamp{margin:0;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);opacity:.75}

.panel-scrim{display:none}

/* =============================================================
   СЦЕНА И ШАПКА
   ============================================================= */
.stage{
  --ratio:1.414;        /* ширина листа к высоте (альбомный A4) */
  --cw-max:1120px;      /* шире лист не становится */
  --fill:.74;           /* доля ширины колоды — остальное на стопку по бокам */
  --deck-min:300px;     /* ниже колода не сжимается: страница начинает прокручиваться */
  position:relative;z-index:1;
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vh,30px);
  padding:clamp(18px,3vh,34px) var(--pad-x) clamp(20px,3vh,32px);
}

.head{
  width:var(--sheet-w, min(var(--cw-max), calc(100% * var(--fill))));
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
}
.head__side{display:flex;align-items:flex-start;gap:12px;min-width:0}
.head__id{
  font-weight:500;font-size:12px;letter-spacing:.02em;color:var(--ink-soft);margin:0 0 7px;
}
.head__title{
  font-weight:700;font-size:clamp(17px,2.3vw,25px);line-height:1.1;color:var(--ink);margin:0;
}
.counter{
  font-weight:700;font-size:clamp(20px,3vw,34px);line-height:1;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.counter small{font-size:.45em;font-weight:500;color:var(--ink-soft);margin-left:2px}

.panel-btn{
  flex:0 0 auto;margin-top:1px;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:9px;color:var(--ink-soft);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.panel-btn:hover{background:rgba(21,23,27,.045);color:var(--ink);border-color:rgba(21,23,27,.24)}
.panel-btn:focus-visible{outline:1px solid var(--ink-soft);outline-offset:3px}
.panel-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.panel-open .panel-btn{background:rgba(21,23,27,.05);color:var(--ink)}

/* =============================================================
   КОЛОДА
   ============================================================= */
.deck{
  position:relative;
  flex:1 0 var(--deck-min);width:100%;
  container-type:size;          /* лист считает размер от свободной высоты колоды */
  perspective:2200px;perspective-origin:50% 42%;
  touch-action:pan-y;
  outline:none;
}

.card{
  --cw:min(var(--cw-max), 100cqw * var(--fill), 100cqh * var(--ratio));
  --ch:calc(var(--cw) / var(--ratio));
  position:absolute;left:50%;top:50%;
  width:var(--cw);height:var(--ch);
  margin:0;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.22,.68,.24,1),
             filter .5s ease, opacity .38s ease;
  will-change:transform;
}
.deck.is-dragging .card{transition:none}
.card:not(.is-active){cursor:pointer}

.sheet{
  position:absolute;inset:0;
  border-radius:6px 6px 6px 6px;
  background:var(--bg);
  overflow:hidden;
  box-shadow:
    0 0 0 1px var(--line),
    0 2px 4px rgba(21,23,27,.05),
    0 16px 32px -14px rgba(21,23,27,.28);
}

.card__sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.78) 100%);
  opacity:0;transition:opacity .5s ease;
}

/* =============================================================
   ЛИСТ
   Всё на листе считается от его кегля (em), поэтому пропорции
   держатся при любом размере листа. Шкала — шаг √1.25 ≈ 1.12:
   .9 · 1 · 1.12 · 1.25 · 1.4 · 1.56
   ============================================================= */
.sheet__inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  padding:2.1em 2.6em;
  color:var(--ink);
  /* кегль листа: 8px + 1.55% его высоты — 12px на мелком листе,
     ≈18px на полном, ≈20px на большом экране */
  font-size:clamp(12px, calc(8px + var(--ch)*.0155), 22px);
  line-height:1.55;
}

.sheet__head{margin-bottom:1.5em}
.sheet__head h2{
  font-weight:500;font-size:1.56em;line-height:1.2;margin:0;color:var(--ink);
}
.sheet__head .katex{font-size:1em!important}

.sheet__body{flex:1;min-height:0;display:grid;grid-template-columns:1fr;overflow:hidden}

.col-main{
  overflow-y:auto;overflow-x:hidden;padding-right:.6em;
  scrollbar-width:thin;scrollbar-color:rgba(21,23,27,.2) transparent;
  display:flex;flex-direction:column;
}
.col-main::-webkit-scrollbar{width:5px}
.col-main::-webkit-scrollbar-thumb{background:rgba(21,23,27,.2);border-radius:9px}
.col-main > *{flex:0 0 auto;max-width:64ch}
.col-main > *:first-child{margin-top:0}
.col-main > *:last-child{margin-bottom:0}
.col-main p{margin:0 0 .75em}
.col-main h2,.col-main h3,.col-main h4,.col-main h5,.col-main h6{
  font-weight:600;color:var(--ink);line-height:1.25;
  margin:1.55em 0 .4em;
}
.col-main h2{font-size:1.25em}
.col-main h3{font-size:1.12em}
.col-main h4,.col-main h5,.col-main h6{font-size:1em}
.col-main ul,.col-main ol{margin:0 0 .75em;padding-left:1.3em}
.col-main li{margin:0 0 .3em}
.col-main li.task{list-style:none;margin-left:-1.3em}
.col-main li.task input{margin:0 .45em 0 0;accent-color:var(--accent)}
.col-main hr{border:0;border-top:1px solid var(--line);margin:1.55em 0}
.col-main code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(21,23,27,.07);border-radius:3px;padding:.1em .38em;
}
.col-main a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.col-main table{border-collapse:collapse;margin:0 0 .9em;font-size:.9em;width:100%}
.col-main th,.col-main td{padding:.4em .6em;border-bottom:1px solid var(--line-soft);text-align:left}
.col-main th{font-weight:600;border-bottom-color:var(--line)}
.col-main pre{
  margin:0 0 .75em;padding:.7em .9em;overflow-x:auto;
  background:rgba(21,23,27,.04);border:1px solid var(--line-soft);border-radius:5px;
  font-size:.9em;line-height:1.5;
}
.col-main pre code{background:none;padding:0;font-size:1em}
.col-main blockquote{margin:0 0 .75em;padding-left:1em;border-left:2px solid var(--line)}
.col-main img{max-width:100%;height:auto}

/* =============================================================
   РАЗМЕТКА ВНУТРИ ЛИСТА
   ============================================================= */
.eq{
  margin:1.3em 0;max-width:none;      /* формула — во всю ширину листа, по центру */
  text-align:center;overflow-x:auto;overflow-y:hidden;
}
.katex{color:inherit}
.katex-display{margin:0!important}
.col-main .katex{font-size:1.12em!important}       /* формула в строке */
.eq .katex{font-size:1.4em!important}              /* формула отдельным блоком */

/* служебный лист-заглушка */
.sheet--notice code{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(21,23,27,.06);border-radius:4px;padding:.15em .45em;font-size:.9em;
}

/* =============================================================
   НАВИГАЦИЯ ПОД КОЛОДОЙ
   ============================================================= */
.rail{width:min(1080px,100%);display:flex;flex-direction:column;gap:14px;align-items:center}
.rail__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--ink-soft);
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .12s;
}
.btn:hover:not(:disabled){background:rgba(21,23,27,.045);color:var(--ink);border-color:rgba(21,23,27,.24)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:default}
.btn:focus-visible{outline:1px solid var(--ink-soft);outline-offset:3px}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.pips{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:100%}
.pip{
  position:relative;height:5px;width:26px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(21,23,27,.17);transition:background .25s,width .35s cubic-bezier(.22,.68,.24,1);
}
.pip:hover{background:rgba(21,23,27,.34)}
.pip[aria-current="true"]{background:var(--accent);width:46px}
.pip:focus-visible{outline:1px solid var(--ink-soft);outline-offset:5px}

.hint{font-size:12px;color:var(--ink-soft);letter-spacing:.02em;text-align:center;margin:0}
.hint kbd{
  font-family:inherit;font-size:11px;background:rgba(21,23,27,.05);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink-soft);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =============================================================
   АДАПТИВ
   ============================================================= */
@media (max-width:1080px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .panel{
    position:fixed;top:0;bottom:0;left:0;z-index:60;
    width:min(340px,86vw);
    transform:translateX(-102%);
    transition:transform .32s cubic-bezier(.22,.68,.24,1);
    box-shadow:0 0 44px rgba(21,23,27,.2);
  }
  body.panel-open .panel{transform:none}
  .panel-scrim{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(21,23,27,.34);opacity:0;pointer-events:none;transition:opacity .3s;
  }
  body.panel-open .panel-scrim{opacity:1;pointer-events:auto}
  body.panel-open{overflow:hidden}
}

@media (min-width:1081px){
  .panel{position:sticky;top:0;height:100vh;height:100dvh}
  .panel-btn{display:none}
}

@media (max-width:760px){
  .stage{--ratio:.7407;--cw-max:440px;--fill:1;--deck-min:340px}
  .sheet__inner{padding:1.7em 1.8em}
  .sheet__body{grid-template-columns:1fr;overflow-y:auto}
  .col-main{overflow:visible;display:block}
  .head{flex-wrap:wrap;align-items:flex-start;gap:10px}
  .counter{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  .card{transition:transform .01s,filter .01s,opacity .01s}
  .shell,.panel{transition:none}
}

/* =============================================================
   ПЕЧАТЬ
   ============================================================= */
@media print{
  body{background:#fff}
  .panel,.panel-scrim,.panel-btn,.rail,.hint,.card__sheen{display:none!important}
  .shell{display:block}
  .main{overflow:visible}
  .stage{display:block;padding:0}
  .deck{width:auto;height:auto;perspective:none;container-type:normal}
  .card{
    --cw:180mm;
    position:static;width:100%;height:auto;transform:none!important;
    filter:none!important;opacity:1!important;page-break-after:always;margin-bottom:10mm;
  }
  .sheet{position:relative;box-shadow:none;border:1px solid var(--line);min-height:150mm}
  .sheet__inner{position:relative;inset:auto}
  .sheet__body{overflow:visible}
  .col-main{overflow:visible}
}