/* Оболочка служебных страниц v2 — облик по канону info.theraki.ru поверх ПРОДОВОЙ раскладки public-editorial.
   Раскладка и размеры — из прода (контракт: docs/redesign/v2/shell/PARITY.md): шапка navigation.tsx, подвал site-footer.tsx,
   каркас franchise/rakomat/restaurant-page.tsx, стили 50-porcelain-pages.css + a0-shell-wave1.css. Меняются материал, шрифты,
   линии, мотивы, движение. Токены (цвета, шрифты, кривая, степпер) — из ../menu/menu.css, его не правим.
   Правила движения: текст и кнопки на месте с 0 мс; анимируем только transform / opacity / clip-path; reduced-motion — статика. */
@import url("../menu/menu.css");
@import url("fan.css");   /* веер «Разделы» и его кнопка — отдельным файлом: его подключает и главная-фреска */

:root {
  --sh-w: min(1240px, 100% - 80px);       /* .public-editorial__hero-inner / .nav-shell / .site-footer__inner */
  --sh-card: 0 22px 54px rgba(23, 49, 61, .06);
  --sh-radius: 18px;
}
@media (max-width: 1023px) { :root { --sh-w: calc(100% - 32px); } }

body.sh { overflow-x: clip; }
:where(.sh) a { color: inherit; }
.sh-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 999px; background: var(--gzhel-deep); color: #fff; text-decoration: none; }
.sh-skip:focus { top: 12px; }

/* ═════════════ Шапка (navigation.tsx) ═════════════ */
.sh-top { position: fixed; inset: 0 0 auto; z-index: 60; padding-top: 12px; pointer-events: none; }
.sh-top.is-static { position: relative; padding-top: 0; }
.sh-bar { position: relative; pointer-events: auto; width: var(--sh-w); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 22px; min-height: 56px; padding: 0 8px 0 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 -1px 0 var(--hair); }
/* «прокручено» (scrollY > 28, как в проде): рамка-кромка и тень живут на отдельном слое — меняется только его opacity */
.sh-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--rim), 0 16px 40px rgba(23, 49, 61, .10);
  opacity: 0; transition: opacity .22s var(--soft); pointer-events: none; }
.sh-top[data-scrolled="true"] .sh-bar::before { opacity: 1; }

/* логотип-картинка вместо набранного «The Raki» (просьба владельцев 02.10): зона пальца 44 px, знак 40 px на ПК / 34 px на телефоне */
.sh-brand { display: inline-flex; align-items: center; height: 44px; color: var(--ink); text-decoration: none; }
.sh-logo { display: block; height: 48px; width: auto; }   /* логотип с подписью «Вкусности для гурманов...» (пользователь 03.10) */
.sh-logo--rakomat { height: 36px; }   /* плашка «РАКОМАТ» шире знака The Raki: 36 px по высоте ≈ 145 px */

.sh-links { position: relative; justify-self: center; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
/* обычный регистр без моно-разрядки, как на ракоматах (одобрены владелицей 02.10; #46 «капсы — не капсом») */
.sh-link { position: relative; display: inline-flex; padding: 10px 3px 12px; font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none;
  color: var(--muted); text-decoration: none; }
.sh-link::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--gzhel);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s var(--soft); }
.sh-link[aria-current="page"] { color: var(--gzhel-deep); }
.sh-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .sh-link:hover { color: var(--ink); } .sh-link:hover::after { transform: scaleX(1); } }

.sh-acts { display: inline-flex; align-items: center; gap: 10px; justify-self: end; }
.sh-act { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid var(--hair); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none;
  font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none; transition: transform .16s var(--soft); }
.sh-act svg { width: 18px; height: 18px; flex: none; color: var(--gzhel-deep); }
.sh-act:active { transform: scale(.96); }
.sh-act[data-loading] { visibility: hidden; }
.sh-act[data-signed-in] { color: var(--gzhel-deep); }
.sh-act-label { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cart { border-radius: 999px; border-color: rgba(43, 125, 164, .34); background: rgba(43, 125, 164, .06); }
.sh-sections { width: 40px; padding: 0; }
.sh-count { min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--red); color: #fff;
  font: 600 11px/1 var(--mono); letter-spacing: 0; }
@media (hover: hover) { .sh-act:hover { border-color: rgba(43, 125, 164, .5); } }

@media (max-width: 1199px) { .sh-bar { grid-template-columns: auto minmax(0, 1fr); } .sh-links { display: none; } }
@media (max-width: 767px) {
  .sh-top { padding-top: 8px; }
  .sh-bar { gap: 10px; min-height: 56px; padding: 0 7px 0 14px; }
  .sh-logo { height: 44px; }
  .sh-acts { gap: 7px; }
  .sh-act { width: 42px; min-height: 42px; padding: 0; gap: 0; border-radius: 12px; }
  .sh-act::before { content: ""; position: absolute; inset: -3px; }       /* палец: 48 px зоны при 42 px знака */
  .sh-act-label { display: none; }
  .sh-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 9.5px; }
  .sh-act[data-signed-in]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gzhel); }
}

button.sh-act { cursor: pointer; }

/* ← Главная · Меню — в проде в разметке каждой страницы, видно только без общей шапки (режим chrome=own) */
.sh-controls { display: none; width: var(--sh-w); margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 0 0; align-items: center; justify-content: space-between; }
body[data-chrome="own"] .sh-controls { display: flex; }
.sh-back, .sh-menu-link { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; min-width: 44px; font: italic 500 20px/1 var(--serif); color: var(--gzhel-deep); text-decoration: none; }

/* ═════════════ Каркас public-editorial ═════════════ */
.sh-main { min-height: 100vh; }                    /* .public-editorial { min-height: 100vh } */
.sh-hero { padding: 116px 0 40px; }                 /* a0-shell-wave1: 116 / 40 */
body[data-chrome="own"] .sh-hero { padding-top: 24px; }
.sh-hero-grid { width: var(--sh-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
@media (min-width: 1280px) {
  .sh-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(320px, .78fr); grid-template-rows: auto auto; column-gap: 40px; row-gap: 0; }
  .sh-hero-grid > .sh-copy { grid-column: 1; grid-row: 1; }
  .sh-hero-grid > .sh-card { grid-column: 2; grid-row: 1 / span 2; }
  .sh-hero-grid > .sh-postcard { grid-column: 1; grid-row: 2; margin-top: 28px; }
}

.sh-copy { display: grid; gap: 18px; max-width: 760px; padding-top: 8px; }
.sh-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gzhel-deep); }
/* волосок надбровия — линия info: тянется слева один раз (scaleX), текст при этом неподвижен */
.sh-eyebrow::after { content: ""; flex: 0 0 44px; height: 1px; background: var(--gzhel-light); transform-origin: 0 50%; }
.sh-title { margin: 0; font: italic 500 clamp(4rem, 6vw, 6.2rem)/.98 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.sh-lead { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.72; color: var(--muted); }
@media (max-width: 1023px) { .sh-title { font-size: clamp(3rem, 12vw, 4.3rem); } }

/* Справка (sidecard) — белый лист с гжель-кромкой, как плитки меню v2; подтёк узора прода снят: узор — в линиях, не обоями */
.sh-card { display: grid; gap: 22px; padding: 28px; border: 1px solid var(--rim); border-radius: var(--sh-radius); background: #fff; box-shadow: var(--sh-card); }
.sh-card-eyebrow { margin: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gzhel-deep); }
.sh-card-title { margin: -8px 0 0; font: italic 500 clamp(2rem, 3vw, 2.9rem)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.sh-card-copy { margin: -6px 0 0; max-width: 38ch; font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* строка ключ-значение (.panel-row / .detail-row) */
.sh-rows { display: grid; gap: 14px; margin: 0; }
.sh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.sh-row:first-child { padding-top: 0; border-top: 0; }
.sh-row dt { font-size: 15px; line-height: 1.4; color: var(--muted); }
.sh-row dd { margin: 0; text-align: right; font: 500 21px/1.2 var(--serif); color: var(--ink); }
.sh-row dd a { text-decoration: underline; text-decoration-color: var(--gzhel-light); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { .sh-row dd a:hover { text-decoration-color: var(--gzhel-deep); } }
.sh-row dd .sep { color: var(--gzhel-light); }

.sh-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1023px) {
  .sh-card { padding: 24px; }
  .sh-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sh-row dd { text-align: left; }
  .sh-actions { flex-direction: column; align-items: stretch; }
  .sh-actions .sh-btn { width: 100%; }
}

/* кнопки: одна эмаль (глубокий гжель) + вторичная с волоском. На входе не анимируются; нажатие — только transform */
.sh-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .12s var(--soft); }
.sh-btn:active { transform: scale(.97); }
.sh-btn--primary { background: var(--gzhel-deep); color: #fff; }
.sh-btn--secondary { background: #fff; color: var(--gzhel-deep); box-shadow: inset 0 0 0 1px var(--hair); }
@media (hover: hover) { .sh-btn--primary:hover { background: var(--gzhel); } .sh-btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--gzhel-light); } }
.sh-btn:disabled, .sh-btn[aria-disabled="true"] { cursor: default; transform: none; background: color-mix(in srgb, var(--gzhel-deep) 12%, #fff); color: var(--gzhel-deep); }

/* Открытка-фреска (page-window.tsx): кадр 4:3, ширина min(100%, 560); марка раздела — круглая тарелка, как в меню v2 */
.sh-postcard { position: relative; width: min(100%, 560px); margin: 8px 0 0; }   /* a0-shell-wave1 ~176: 8 px сверху; ≥1280 — 28 */
.sh-postcard-frame { position: relative; border-radius: 16px; overflow: hidden; background: var(--mist); }
.sh-postcard-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rim); pointer-events: none; }
.sh-postcard img.art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; }
.sh-stamp { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--rim), 0 6px 16px rgba(23, 49, 61, .14);
  display: grid; place-items: center; }
.sh-stamp img { width: 66%; height: 66%; object-fit: contain; }
@media (max-width: 767px) { .sh-postcard { width: 100%; } .sh-stamp { width: 46px; height: 46px; top: 10px; right: 10px; } }

/* Шов мудборда: волна с точками — единственный декоративный разделитель на экране (вместо .motif-seam прода) */
.sh-seam { width: var(--sh-w); height: 18px; margin: 0 auto; overflow: hidden; }
.sh-wv { height: 18px; overflow: hidden; }
.sh-wv svg { display: block; height: 18px; width: auto; }

/* Рабочая часть (workbench) и секции-тарелки */
.sh-bench { padding: 24px 0 120px; }
.sh-bench-inner { width: var(--sh-w); margin: 0 auto; }
.sh-content { display: grid; gap: 14px; }
@media (min-width: 1024px) { .sh-content--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 34px; align-items: start; } }
.sh-section { padding: 30px 32px 34px; border: 1px solid var(--rim); border-radius: var(--sh-radius); background: #fff; box-shadow: var(--sh-card); }
.sh-section--quiet { background: #f7fafc; border-color: var(--hair); box-shadow: none; }
.sh-section-head { margin: 0 0 20px; }
.sh-section-head h2 { margin: 8px 0 0; font: italic 500 clamp(2rem, 3vw, 2.8rem)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.sh-section-copy { margin: 0; max-width: 60ch; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.sh-section-copy + * { margin-top: 20px; }
@media (max-width: 1023px) { .sh-section { padding: 24px; } }

/* ═════════════ Форма заявки (booking-form.tsx) ═════════════ */
.sh-form { display: grid; gap: 16px; }
.sh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .sh-form-grid { grid-template-columns: minmax(0, 1fr); } }
.sh-field { display: grid; gap: 8px; align-content: start; }
.sh-field-label { font: 500 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.sh-input { appearance: none; width: 100%; min-height: 52px; padding: 14px 18px; border: 1px solid var(--hair); border-radius: 14px; background: #fff; color: var(--ink);
  font: 400 16px/1.3 var(--sans); }
.sh-input::placeholder { color: rgba(23, 49, 61, .45); }
.sh-input:focus { outline: none; border-color: var(--gzhel); box-shadow: 0 0 0 3px rgba(43, 125, 164, .14); }
/* ошибка проверки — как в проде (booking-form.tsx): только текст над кнопкой, поля не подсвечиваются */
.sh-input:disabled { background: #f7fafc; color: var(--muted); }
textarea.sh-input { min-height: 96px; resize: vertical; line-height: 1.5; }
.sh-field .step { align-self: start; }
.sh-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.sh-note a { text-decoration: underline; text-decoration-color: var(--gzhel-light); text-underline-offset: 3px; }
.sh-note--danger { color: var(--red); }
.sh-note--ok { display: flex; align-items: center; gap: 10px; color: var(--gzhel-deep); font-weight: 600; }
.sh-note--ok svg { width: 20px; height: 20px; flex: none; }

/* ═════════════ Пустое состояние (404, .cream-page) ═════════════ */
/* .cream-page (15-cta-editorial ~270–362): поля clamp(24px, 6vw, 96px), лист 780, gap clamp(32px, 5vh, 56px), лид 56ch, кнопки в ряд с переносом */
.sh-empty { width: min(780px, 100% - 2 * clamp(24px, 6vw, 96px)); margin: 0 auto; padding: clamp(96px, 12vh, 144px) 0 clamp(64px, 10vh, 120px); display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(32px, 5vh, 56px); }
.sh-empty .sh-title { font-size: clamp(48px, 6.5vw, 96px); }
.sh-empty .sh-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
.sh-empty .sh-actions .sh-btn { width: auto; padding: 0 26px; }
.sh-empty-lead { margin: 0; max-width: 56ch; font: 400 clamp(20px, 2vw, 26px)/1.45 var(--serif); color: var(--ink); }

/* ═════════════ Подвал (site-footer.tsx) ═════════════ */
.sh-foot { padding: 0 24px 28px; background: #fff; }
.sh-foot-wave { max-width: 1240px; height: 18px; margin: 0 auto 56px; overflow: hidden; }
.sh-foot-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.sh-foot-brand { max-width: 280px; }
/* логотип в подвале, как в шапке (просьба пользователя 02.10: «лого нет нигде») */
.sh-foot .sh-foot-logo { height: 44px; }
.sh-foot-tag { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sh-foot-cols { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.sh-foot-col { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.sh-foot-label { margin-bottom: 2px; font: 600 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.sh-foot-col a, .sh-foot-val { width: fit-content; font-size: 14px; line-height: 1.5; color: var(--ink); text-decoration: none; }
/* тап-зона 44 px на таче при прежнем виде: отступ + отрицательное поле (QA волны 3: было 21 px) */
@media (pointer: coarse) { .sh-foot-col a { min-width: 44px; padding-block: 11.5px; margin-block: -11.5px; background-origin: content-box; background-position: 0 calc(100% - 11.5px); } }
.sh-foot-col a { background: linear-gradient(var(--gzhel), var(--gzhel)) 0 100% / 100% 1px no-repeat; background-size: 0 1px; }
@media (hover: hover) { .sh-foot-col a:hover { background-size: 100% 1px; } }
.sh-foot-base { max-width: 1200px; margin: 40px auto 0;   /* прод: .site-footer__baseline 1200, лежит вне __inner (1240) */ padding-top: 20px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 16px;
  font: 400 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
body[data-footer="off"] .sh-foot { display: none; }
@media (max-width: 767px) { body[data-chrome-phone="own"] .sh-top, body[data-chrome-phone="own"] .sh-foot { display: none; } }
@media (max-width: 640px) { .sh-foot { padding: 0 16px 24px; } .sh-foot-inner { gap: 32px; } .sh-foot-cols { gap: 24px 40px; } .sh-foot-wave { margin-bottom: 44px; } }

/* ═════════════ Движение (только декоративные слои) ═════════════ */
@keyframes sh-stitch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sh-hair { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sh-stamp { from { transform: rotate(-14deg) scale(0); } to { transform: none; } }
.sh-eyebrow::after { animation: sh-hair .35s var(--soft) .12s backwards; }
[data-motion="ready"]:is(.sh-seam, .sh-foot-wave) > .sh-wv { clip-path: inset(0 100% 0 0); }
[data-motion="in"]:is(.sh-seam, .sh-foot-wave) > .sh-wv { animation: sh-stitch .94s steps(24) both; }
.sh-stamp[data-motion="ready"] { transform: scale(0); }
.sh-stamp[data-motion="in"] { animation: sh-stamp .52s var(--soft) both; }
/* статика только по ?rm (02.10: анимации всем) */
html.rm .sh-eyebrow::after { animation: none; }
html.rm [data-motion]:is(.sh-seam, .sh-foot-wave) > .sh-wv { clip-path: none; animation: none; }
html.rm .sh-stamp[data-motion] { transform: none; animation: none; }
/* 03.10: лёгкий гжель-узор фона на всех страницах, как одобренный на ракоматах (владелица #11, #81, #89; пользователь: «паттерн лёгкий») */
body.sh:not(.rk) { background-color: #fff; background-image: linear-gradient(rgba(245, 250, 253, .9), rgba(245, 250, 253, .9)), url("pub/ornaments/pattern-tile.webp"); background-size: auto, 640px 640px; }
@media (min-width: 1024px) { body.sh:not(.rk) { background-size: auto, 900px 900px; } }