/* ═══════════════════════════════════════════════════════════════════════
   «Рабочий стол» — слой КЕЙСОВОЙ страницы. Подключается ПОСЛЕ desk.css.

   Токены, шрифты и общие компоненты (.menubar, .win, .btn, .pane, .step,
   .foot, .mlbl, .arw) живут в desk.css и здесь не повторяются — тут только
   то, чего на главной нет. Reference lock и запреты — DESIGN.md.

   Ритм страницы намеренно чередует тип объекта (правило METHOD.md §6:
   низ разваливается, когда три блока подряд одной конструкции):
     Зачем      — текст на столе
     Роль       — окно
     Продукт    — опись с номерами на столе
     Шаги       — ряд окон
     Экраны     — галерея окон на столе
     Где посмотреть — окно с действием
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Путь к странице: имитация адресной строки, служебное — моношрифтом ── */

.crumb{display:flex;align-items:center;gap:8px;margin:16px 0 0;
       font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
       text-transform:uppercase;color:var(--text-faint)}
.crumb a{color:var(--text-muted);display:flex;align-items:center;gap:7px}
.crumb a:hover,.crumb a:focus-visible{color:var(--text)}
.crumb b{font-weight:var(--fw-regular);color:var(--text)}

/* ── Обложка кейса ───────────────────────────────────────────────────
   Та же конструкция, что на главной: текст слева, окна продукта справа.
   Окон нет только там, где нет ни одного настоящего кадра — рисовать
   заглушку вместо скриншота запрещено брифом.                          */

/* Выравнивание по верху, а не по центру: кадр выше текста, и при центрировании
   слева сверху оставалась дыра в треть экрана. */
.chero{padding:22px 0 30px;display:grid;
       grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.chero--solo{grid-template-columns:minmax(0,74ch)}
.chero h1{font-size:var(--fs-h1);font-weight:var(--fw-medium);line-height:1.08;
          letter-spacing:var(--tracking-tight);margin:12px 0 14px;text-wrap:balance}
.chero__lead{font-size:19px;color:var(--text-muted);line-height:1.45;max-width:52ch;
             margin-bottom:20px;text-wrap:pretty}
/* Кадр обложки — окно с подписью, тень крупнее: предмет лежит поверх стола.
   Кадр обрезан сверху, целиком открывается кликом (lightbox.js ловит .shots img). */
.chero__media .shot{box-shadow:var(--shadow-md);margin:0}
.chero__media img{height:300px;object-fit:cover;object-position:top center}
.chero__media--phone{max-width:286px;margin-left:auto}
.chero__media--phone img{height:400px}

/* Строка состояния: не абзац, а бирка на предмете. */
.spec{margin-top:22px;background:var(--surface-soft);
      border:var(--border-width) solid var(--border-soft);border-radius:var(--r-md);
      padding:12px 15px;max-width:62ch;display:grid;grid-template-columns:auto minmax(0,1fr);
      gap:14px;align-items:start}
.spec__k{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;
         text-transform:uppercase;color:var(--text-faint);padding-top:3px}
.spec__v{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}

/* ── Секция «на столе»: мономаркер слева, содержимое справа ─────────── */

.sect{display:grid;grid-template-columns:132px minmax(0,1fr);gap:26px;
      padding:30px 0 4px;border-top:var(--border-width) dashed var(--border-soft)}
.sect__lbl{padding-top:7px}
.sect h2{margin-bottom:14px}
.sect p{font-size:17px;color:var(--text-muted);line-height:1.55;max-width:var(--measure);
        text-wrap:pretty}
.sect p+p{margin-top:14px}
.sect p strong{color:var(--text);font-weight:var(--fw-medium)}

/* Секция «в окне»: тот же материал, другой предмет. */
.pane--case{margin:26px 0}
.pane--case p{font-size:17px;color:var(--text-muted);line-height:1.55;max-width:var(--measure);
              text-wrap:pretty}
.pane--case p+p{margin-top:14px}
.pane--case h2{margin-bottom:14px}

/* ── Опись решений: номер, заголовок, пояснение ──────────────────────
   Не карточки: кликать не по чему, значит рамки не будет (DESIGN.md §8). */

.ledger{display:grid;max-width:100ch;margin-top:4px}
.ledger__row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:17px 0;
             border-top:var(--border-width) dashed var(--border-soft)}
.ledger__row:first-child{border-top:none;padding-top:2px}
.ledger__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
           color:var(--text-faint);padding-top:6px}
.ledger__t{font-size:18.5px;font-weight:var(--fw-medium);letter-spacing:-.015em;
           line-height:1.25;margin-bottom:5px;text-wrap:balance}
.ledger__d{font-size:16.5px;color:var(--text-muted);line-height:1.5;max-width:72ch;
           text-wrap:pretty}

/* ── Ряд окон-шагов: тот же .step из desk.css, но их бывает до семи ── */

.steps--auto{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.steps--auto .step__p{font-size:16px;color:var(--text-muted)}
.steps--auto .step__p strong{color:var(--text);font-weight:var(--fw-medium)}

/* ── Галерея экранов: каждый кадр в своём окне ───────────────────────
   Кадры показываем целиком, без обрезки: это доказательство, а не фон.
   Раскладка колонками сама укладывает разную высоту.                   */

.gal{column-width:296px;column-gap:16px;margin-top:4px}
.gal--wide{column-width:auto;columns:1;max-width:940px}
.shot{break-inside:avoid;margin:0 0 16px;background:var(--surface);
      border:var(--border-width) solid var(--border);border-radius:var(--r-md);
      overflow:hidden;box-shadow:var(--shadow-sm)}
/* Широкий кадр в колонке телефонов занимает всю ширину: иначе он ужимается
   до нечитаемого, а на нём как раз документ или отчёт. */
.shot--wide{column-span:all}
.shot img{display:block;width:100%;height:auto;cursor:zoom-in}
.shot__cap{padding:11px 14px;border-top:var(--border-width) solid var(--border);
           background:var(--surface-soft);font-size:14px;color:var(--text-muted);
           line-height:1.45}
.shot__cap strong{color:var(--text);font-weight:var(--fw-medium)}

/* Экраны, которых ещё нет в кадре: описываем словами, заглушку не рисуем. */
.screenlist{display:grid;gap:0;max-width:88ch}
.screenlist__row{display:grid;grid-template-columns:minmax(0,17ch) minmax(0,1fr);gap:22px;
                 padding:14px 0;border-top:var(--border-width) dashed var(--border-soft)}
.screenlist__row:first-child{border-top:none;padding-top:2px}
.screenlist__k{font-size:16.5px;font-weight:var(--fw-medium);letter-spacing:-.01em}
.screenlist__v{font-size:16.5px;color:var(--text-muted);line-height:1.5;text-wrap:pretty}

/* ── Где посмотреть ─────────────────────────────────────────────────── */

.outro__p{font-size:17px;color:var(--text-muted);line-height:1.55;max-width:var(--measure);
          text-wrap:pretty}
.outro__p+.acts{margin-top:16px}
.acts+.outro__p{margin-top:26px;padding-top:22px;
                border-top:var(--border-width) dashed var(--border-soft)}
.tail{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
      padding:22px 0 0}

/* ── Лайтбокс: на кейсовых страницах desk.css его не знает ──────────── */

.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;
          justify-content:center;background:rgba(29,27,22,.86);padding:24px}
.lightbox.is-open{display:flex}
.lightbox__img{max-width:92vw;max-height:92vh;width:auto;height:auto;object-fit:contain;
               border:var(--border-width) solid var(--border);border-radius:var(--r-md);
               background:var(--surface)}
.lightbox__close{position:absolute;top:18px;right:18px;width:44px;height:44px;cursor:pointer;
                 background:var(--surface);color:var(--text);font-size:22px;line-height:1;
                 border:var(--border-width) solid var(--border);border-radius:var(--r-md);
                 box-shadow:var(--shadow-btn)}
.lightbox__close:hover{background:var(--surface-tint)}

/* ── Адаптив ─────────────────────────────────────────────────────────── */

@media (max-width:980px){
  .chero{grid-template-columns:1fr;gap:26px}
  /* В одну колонку кадр прижимается влево: справа он оставлял пустое поле. */
  .chero__media--phone{margin-left:0;max-width:320px}
  .sect{grid-template-columns:1fr;gap:10px;padding-top:26px}
  .sect__lbl{padding-top:0}
}
@media (max-width:680px){
  .gal{column-width:auto;columns:1}
  .ledger__row{grid-template-columns:1fr;gap:4px}
  .ledger__n{padding-top:0}
  .screenlist__row{grid-template-columns:1fr;gap:2px}
  .spec{grid-template-columns:1fr;gap:6px}
  .spec__k{padding-top:0}
  .chero__win img{height:230px}
  .tail{flex-direction:column;align-items:flex-start}
}