/* Главная — выдвинутый ящик картотеки. Чертёжный стиль: бумага, чёрные линии в 1px, моноширинный шрифт.
   Вся сцена живёт в «коробке» (.cabinet) с постоянной пропорцией: ящик — две картинки SVG, папки — HTML
   в процентах коробки, так что ящик масштабируется целиком, как плакат. Страница без прокрутки. */
.is-drawer {
  --paper: #f4f3ef;
  --line: #17181b;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--line);
  font-family: var(--mono);
}
.is-drawer * { box-sizing: border-box; }

.dp {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

/* ---------- шапка ---------- */
.dp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 14px 0 8px;
}
.dp-hint { margin: 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: #8d9098; }
.is-drawer .topbar-actions { gap: 6px; }
.is-drawer .topbar-link {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 0;
  border-color: var(--line);
  background: #fff;
}
.is-drawer .topbar-link:hover { background: var(--line); color: #fff; }
.is-drawer .topbar-link-on { background: var(--line); color: #fff; }

.dp-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  z-index: 40;
  transform: translateX(-50%);
  max-width: min(640px, calc(100% - 32px));
  padding: 10px 14px;
  background: var(--line);
  color: #fff;
  font: 500 11px/1.5 var(--mono);
  animation: toast 0.5s var(--ease) both;
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, -10px); } }

/* ---------- коробка ---------- */
/* Пропорция 1000:920; вписывается и по ширине, и по высоте окна */
.cabinet {
  --ratio: 1000 / 920;
  --tab-w: 24cqw;        /* ширина ярлыка в долях коробки */
  --tab-h: 5.33cqh;      /* высота: 49 единиц из 920 — ярлык держит пропорцию картинки 240:49 */
  --radius: 1.6cqw;
  --sheet-h: 50cqh;      /* высота листа в выдвинутой папке */
  position: relative;
  container-type: size;
  aspect-ratio: var(--ratio);
  width: min(100%, 900px, calc((100dvh - 150px) * 1000 / 920));
  margin: 0 auto;
  align-self: center;
  animation: rise 0.8s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.box { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.box-back { z-index: 0; }
.box-front { z-index: calc(var(--n) + 3); pointer-events: none; }
.box-front .box-face { pointer-events: auto; }
.box-label { font: 700 24px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; fill: var(--line); }
.box-tall { display: none; }
.stack { position: absolute; inset: 0; }

/* ---------- папка ---------- */
.folder {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--width);
  height: var(--height);
  z-index: var(--z);
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: top 0.6s var(--ease), left 0.6s var(--ease), width 0.6s var(--ease), height 0.6s var(--ease), transform 0.3s var(--ease);
  animation: drop 0.7s var(--ease) both;
  animation-delay: calc(var(--i) * 40ms + 150ms);
}
@keyframes drop { from { opacity: 0; transform: translateY(-24px); } }
.folder.is-dashed { border-style: dashed; }
.folder:not(.is-open):hover { transform: translateY(-5px); }
/* Выдвинутая папка: выезжает вверх и становится перед остальными; её тело уходит вниз, в ящик,
   за переднюю стенку. Лист занимает верхнюю часть */
.folder.is-open {
  top: 8%;
  left: 4%;
  width: 92%;
  height: 71%;
  z-index: calc(var(--n) + 2);
  border-style: solid;
}
.is-still .folder { transition: none; }

/* Ярлык: контур с плечиками — одна картинка, подпись поверх. Низ ярлыка перекрывает линию корешка;
   столбцы отступают от скруглённых углов папки, чтобы плечики ложились на прямую линию */
.tab {
  --inset: calc(var(--radius) + 0.8cqw);
  position: absolute;
  bottom: 100%;
  left: calc(var(--inset) + var(--c) * (100% - var(--tab-w) - 2 * var(--inset)) / 2);
  width: var(--tab-w);
  height: var(--tab-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--line);
  font: 500 clamp(9px, 1.5cqw, 13px)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab-shape { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tab-shape .tab-fill { fill: #fff; }
.tab-shape .tab-line { fill: none; stroke: var(--line); vector-effect: non-scaling-stroke; }
.tab.is-ink { color: #fff; }
.tab.is-ink .tab-shape .tab-fill { fill: var(--line); }
.tab-label {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  bottom: 0;
  display: block;
  line-height: var(--tab-h);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tab-count { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); font-size: 0.78em; letter-spacing: 0; color: #8d9098; }
.tab.is-ink .tab-count { color: rgba(255, 255, 255, 0.7); }
.tab:focus-visible { outline: 2px solid #2f6bff; outline-offset: 3px; }
.folder.is-open .tab { color: #fff; }
.folder.is-open .tab .tab-shape .tab-fill { fill: var(--line); }
/* На ярлыке открытой папки — крестик: нажатие задвигает её обратно */
.folder.is-open .tab-count { display: none; }
.folder.is-open .tab::after { content: '✕'; position: absolute; right: 9%; top: 50%; transform: translateY(-50%); font-size: 0.95em; font-weight: 700; }
.folder.is-open .tab-label { right: 22%; }

/* ---------- лист внутри папки ---------- */
.sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sheet-h);
  padding: 1.2cqw 1.3cqw 1.3cqw;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.folder.is-open .sheet { visibility: visible; opacity: 1; transition: opacity 0.35s ease 0.2s, visibility 0s; }
.doc {
  height: 100%;
  padding: clamp(10px, 1.6cqw, 16px) clamp(10px, 1.8cqw, 18px);
  border: 1px dashed var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.1cqw, 10px);
}
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.doc-title {
  margin: 0;
  font: 700 clamp(15px, 2.8cqw, 26px)/1.1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--line);
  color: #fff;
  padding: 0.15em 0.35em 0.2em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.doc-mark {
  flex: none;
  width: clamp(44px, 7cqw, 62px);
  height: clamp(28px, 4.2cqw, 38px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font: 700 clamp(11px, 1.6cqw, 15px)/1 var(--mono);
  position: relative;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--line) calc(50% - 0.5px), var(--line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.doc-mark::before { content: ''; position: absolute; inset: 20% 24%; background: #fff; }
.doc-mark > * { position: relative; }
.doc-lead { margin: 0; font: 400 clamp(10px, 1.45cqw, 12.5px)/1.5 var(--mono); max-width: 62ch; }
.doc-stamps { display: flex; gap: 6px; flex-wrap: wrap; }
.stamp { font: 700 clamp(8px, 1cqw, 9px)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 7px; border: 1px solid var(--line); }
.doc-label { font: 500 clamp(8px, 1cqw, 9px)/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5f636b; margin: 0 0 6px; }

.doc-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(10px, 1.8cqw, 18px);
  padding-top: clamp(6px, 1cqw, 10px);
  border-top: 1px dotted var(--line);
}
.doc-fig { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.doc-shot-link { display: block; flex: 1; min-height: 0; }
.doc-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent, #9aa3b2) 16%, #fff);
  filter: grayscale(0.4);
  transition: filter 0.4s ease;
}
.folder.is-open:hover .doc-shot { filter: none; }
.doc-windows {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: clamp(6px, 1cqw, 10px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent, #9aa3b2) 14%, #fff);
}
.doc-windows i { display: block; border: 1px solid var(--line); background: #fff; position: relative; }
.doc-windows i.on { background: var(--line); }
.doc-windows i.warn { background: repeating-linear-gradient(45deg, var(--line) 0 1px, #fff 1px 4px); }
.doc-windows-live { grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: 1fr; }
.doc-windows-live i::after { content: attr(data-n); position: absolute; left: 4px; bottom: 2px; font: 500 8px/1 var(--mono); color: #8d9098; }
.doc-windows-live i.on::after { color: rgba(255, 255, 255, 0.6); }

.doc-side { display: flex; flex-direction: column; gap: clamp(6px, 1cqw, 10px); min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; mask-image: linear-gradient(#000 calc(100% - 16px), transparent); }
.doc-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  min-height: clamp(40px, 6.5cqw, 54px);
  padding: 0 clamp(10px, 1.6cqw, 14px);
  background: var(--line);
  color: #fff;
  font: 700 clamp(12px, 1.9cqw, 17px)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.doc-go:hover { background: #2c2e33; }
.doc-go:active { transform: scale(0.98); }
.doc-fields { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font: 400 clamp(9.5px, 1.25cqw, 11px)/1.4 var(--mono); }
.doc-fields dt { font-size: 0.82em; letter-spacing: 0.12em; text-transform: uppercase; color: #5f636b; padding-top: 2px; }
.doc-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.doc-fields .status { font-weight: 500; font-size: inherit; }
.doc-steps { margin: 0; padding-left: 18px; font: 400 clamp(9.5px, 1.25cqw, 11px)/1.5 var(--mono); display: grid; gap: 3px; }
.doc-text { margin: 0; padding-top: 8px; border-top: 1px dotted var(--line); font: 400 clamp(9px, 1.15cqw, 10.5px)/1.5 var(--mono); color: #5f636b; }

/* Оглавление раздела и список контейнеров — листаются внутри листа */
.doc-scrollbox { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; padding-top: clamp(6px, 1cqw, 10px); border-top: 1px dotted var(--line); }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc-item {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  margin: 0;
  padding: clamp(6px, 1cqw, 10px) 0;
  border: 0;
  border-bottom: 1px dotted var(--line);
  background: transparent;
  color: var(--line);
  font: 400 clamp(10px, 1.4cqw, 12px)/1.35 var(--mono);
  text-align: left;
  cursor: pointer;
}
.toc-item::before { content: counter(toc, decimal-leading-zero); grid-row: 1 / span 2; color: #8d9098; font-size: 0.85em; }
.toc-item:hover .toc-name { background: var(--line); color: #fff; }
.toc-name { justify-self: start; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 4px; margin-left: -4px; }
.toc-note { grid-column: 2; color: #5f636b; font-size: 0.9em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toc-note:empty { display: none; }
.toc-item .status { grid-column: 3; grid-row: 1 / span 2; font-size: 0.85em; }
.doc-scrollbox .groups { display: grid; gap: 10px; }
.doc-scrollbox .group { padding: 0; border: 0; background: transparent; }
.doc-scrollbox .container { font-size: clamp(9.5px, 1.25cqw, 11px); }
.doc-scrollbox .hint { font-size: clamp(9.5px, 1.25cqw, 11px); margin: 0 0 8px; }

/* ---------- подвал ---------- */
.dp-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  font: 400 9.5px/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dp-blurb { margin: 0; max-width: 300px; text-align: justify; color: #5f636b; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dp-table { flex: none; border-collapse: collapse; }
.dp-table th, .dp-table td { border: 1px solid var(--line); padding: 3px 9px; text-align: left; font-weight: 500; white-space: nowrap; }
.dp-table th { color: #5f636b; font-weight: 400; background: #fff; }

/* ---------- телефон: коробка выше, два столбца ярлыков ---------- */
@media (max-width: 699.98px) {
  .cabinet {
    --ratio: 1000 / 1500;
    --tab-w: 33cqw;
    --tab-h: 4.49cqh; /* 330 × 49 / 240 = 67 единиц из 1500 — та же пропорция ярлыка */
    --radius: 2.6cqw;
    --sheet-h: 54cqh;
    width: min(100%, calc((100dvh - 120px) * 1000 / 1500));
  }
  .box-tall { display: block; }
  .box:not(.box-tall) { display: none; }
  .tab { font-size: clamp(8.5px, 2.5cqw, 10.5px); letter-spacing: 0.06em; }
  .folder.is-open { top: 7%; left: 3%; width: 94%; height: 72%; }
  .sheet { padding: 2cqw; }
  .doc { padding: 10px; gap: 8px; overflow: auto; }
  .doc-title { font-size: clamp(14px, 4.6cqw, 20px); }
  .doc-lead { font-size: clamp(10px, 2.9cqw, 12px); }
  .doc-grid { display: flex; flex-direction: column; gap: 10px; flex: none; border-top: 0; padding-top: 0; }
  .doc-side { display: contents; }
  .doc-go { order: -1; font-size: clamp(12px, 3.6cqw, 15px); min-height: 44px; }
  .doc-fig { display: block; }
  .doc-shot-link { display: block; }
  .doc-shot, .doc-windows { aspect-ratio: 16 / 7; height: auto; }
  .doc-fields, .doc-steps, .doc-text { font-size: clamp(9.5px, 2.7cqw, 11px); }
  .dp-top { padding-top: 10px; }
  .dp-hint { font-size: 9.5px; }
  .dp-foot { grid-template-columns: 1fr; gap: 8px; }
  .dp-blurb { display: none; }
  .dp-table { width: 100%; }
  .dp-table tr:not(:first-child) { display: none; }
  .dp-table td { width: 100%; white-space: normal; }
}
@media (max-height: 560px) {
  .dp-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folder, .cabinet, .dp-toast { animation: none !important; transition: none !important; }
}