/* Общая шапка (look/header.js): хаб (data-mode="enhance") и мини-сайты (data-mode="page").
   Имена цветов — из look/tokens.css (§F.1) с запасными значениями, чтобы шапка жила и без него.
   На хабе меняются только меню и новые элементы: его собственные стили шапки остаются. */
.wl-h, .wl-sheet, .wl-crumbrow {
  --h-ink: var(--ink, #0c111b); --h-ink2: var(--ink-2, #4a5263); --h-ink3: var(--ink-3, #8b93a3); --h-blue: var(--blue, #285ff5);
  --h-glass: var(--glass, rgba(255,255,255,.66)); --h-edge: rgba(255,255,255,.75); --h-pop: rgba(255,255,255,.97); --h-hover: rgba(40,95,245,.08);
  --h-line: var(--line, rgba(12,17,27,.12)); --h-paper: var(--paper-2, #f6f7f9); --h-ease: var(--ease-ui, cubic-bezier(.2,.7,.1,1));
  font-family: var(--font, 'Geist', 'Helvetica Neue', Arial, sans-serif);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wl-h[data-mode="page"], :root:not([data-theme="light"]) .wl-sheet, :root:not([data-theme="light"]) .wl-crumbrow {
    --h-ink: var(--ink, #e9eef7); --h-ink2: var(--ink-2, #b4bdcc); --h-ink3: var(--ink-3, #7d879a); --h-glass: rgba(21,26,34,.66); --h-edge: rgba(255,255,255,.09);
    --h-pop: rgba(21,26,34,.98); --h-hover: rgba(111,148,255,.14); --h-line: var(--line, rgba(233,238,247,.14)); --h-paper: var(--paper-2, #151a22);
  }
}
:root[data-theme="dark"] .wl-h[data-mode="page"], :root[data-theme="dark"] .wl-sheet, :root[data-theme="dark"] .wl-crumbrow {
  --h-ink: var(--ink, #e9eef7); --h-ink2: var(--ink-2, #b4bdcc); --h-ink3: var(--ink-3, #7d879a); --h-glass: rgba(21,26,34,.66); --h-edge: rgba(255,255,255,.09);
  --h-pop: rgba(21,26,34,.98); --h-hover: rgba(111,148,255,.14); --h-line: var(--line, rgba(233,238,247,.14)); --h-paper: var(--paper-2, #151a22);
}
/* над ночной сценой — то же стекло, светлый текст */
.wl-h[data-surface="night"], [data-surface="night"] .wl-crumbrow {
  --h-ink: var(--ink-night, #e9eef7); --h-ink2: var(--ink-night, #e9eef7); --h-ink3: var(--mute-night, #8a96ad);
  --h-glass: var(--glass-night, rgba(10,15,26,.62)); --h-edge: rgba(255,255,255,.1); --h-hover: rgba(111,148,255,.16); --h-line: rgba(233,238,247,.12);
  --h-pop: rgba(12,17,28,.97); --h-paper: var(--night-1, #0a0f1a);
}
.wl-h *, .wl-sheet *, .wl-crumbrow * { box-sizing: border-box; }
.wl-h :focus-visible, .wl-sheet :focus-visible, .wl-crumbrow :focus-visible { outline: 2px solid var(--h-blue); outline-offset: 2px; border-radius: 12px; }

/* ——— полоса шапки на мини-сайтах ——— */
.wl-h[data-mode="page"] { position: sticky; top: 0; z-index: 50; height: 64px; color: var(--h-ink); transition: background-color .24s var(--h-ease), box-shadow .24s var(--h-ease); }
.wl-h[data-mode="page"].is-scrolled { background: var(--h-glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--h-line); }
.wl-bar { height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 28px; }
.wl-h[data-mode="page"] .mark { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font: 750 23px/1 var(--font, sans-serif); letter-spacing: -.035em; color: var(--h-ink); text-decoration: none; flex: none; }
.wl-h[data-mode="page"] .mark i, .wl-sheet .mark i { font-style: normal; font: 750 15px/1 var(--font, sans-serif); color: #fff; background: var(--h-blue); padding: 5px 8px 6px; border-radius: 8px; transform: translateY(1px); }
.wl-sheet .mark { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font: 750 21px/1 var(--font, sans-serif); letter-spacing: -.035em; color: var(--h-ink); text-decoration: none; }

/* хлебная крошка: в полосе на широком экране, отдельной строкой под ней — уже */
.wl-crumbs ol, .wl-crumbrow ol { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font: 520 13px/1.2 var(--font, sans-serif); color: var(--h-ink3); white-space: nowrap; }
.wl-crumbs li + li::before, .wl-crumbrow li + li::before { content: '›'; padding: 0 7px; color: var(--h-ink3); }
.wl-crumbs a, .wl-crumbrow a { color: var(--h-ink2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.wl-crumbs a:hover, .wl-crumbrow a:hover { color: var(--h-blue); }
.wl-crumbs [aria-current], .wl-crumbrow [aria-current] { color: var(--h-ink); font-weight: 600; }
.wl-bar > .wl-crumbs { display: none; min-width: 0; }
.wl-crumbrow { display: block; padding: 0 28px; margin-top: -4px; color: var(--h-ink); overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1360px) { .wl-bar > .wl-crumbs { display: block; } .wl-crumbrow { display: none; } }

/* ——— меню ——— */
.wl-nav { display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--h-glass); border: 1px solid var(--h-edge); box-shadow: 0 10px 30px -14px rgba(12,17,27,.22); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.wl-h[data-mode="page"] .wl-nav { margin-left: auto; }
.wl-nav a, .wl-nav button { appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 520 14px/1 var(--font, sans-serif); color: var(--h-ink2); text-decoration: none; transition: background-color .18s var(--h-ease), color .18s var(--h-ease); }
.wl-nav a:hover, .wl-nav button:hover, .wl-nav button[aria-expanded="true"] { background: var(--h-hover); color: var(--h-ink); }
.wl-nav a[aria-current] { color: var(--h-ink); font-weight: 600; }
.wl-caret { flex: none; transition: transform .2s var(--h-ease); }
[aria-expanded="true"] > .wl-caret { transform: rotate(180deg); }

.wl-right { display: flex; align-items: center; gap: 8px; position: relative; flex: none; }
.wl-h[data-mode="page"] .wl-nav + .wl-right { margin-left: 0; }
.wl-pill { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 560 14px/1 var(--font, sans-serif); text-decoration: none; border: 1px solid var(--h-edge); cursor: pointer; white-space: nowrap; color: var(--h-ink);
  background: var(--h-glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 10px 30px -14px rgba(12,17,27,.25); }
.wl-pill--blue { background: var(--h-blue); color: #fff; border-color: transparent; box-shadow: 0 12px 30px -12px rgba(40,95,245,.6); }
.wl-pill--blue:hover { background: var(--blue-2, #3a6dff); }
.wl-mono { font: 500 12px/1 var(--mono, 'Geist Mono', ui-monospace, Menlo, monospace); color: var(--h-ink3); font-variant-numeric: tabular-nums; }
.wl-adv-st { font: 500 12px/1 var(--mono, ui-monospace, monospace); color: var(--h-ink3); margin-left: -4px; }
.wl-dot, .wl-st.open::before, .wl-desk.open::before { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green, #22c375); box-shadow: 0 0 0 3px rgba(34,195,117,.2); flex: none; }
.wl-dot[hidden] { display: none; }
.wl-book-s { display: none; }
.wl-burger { display: none; appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--h-edge); background: var(--h-glass); color: var(--h-ink); cursor: pointer; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* выпадающие панели */
.wl-pop { position: absolute; z-index: 60; pointer-events: auto; color: var(--h-ink); background: var(--h-pop); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border: 1px solid var(--h-edge); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(12,17,27,.45), 0 1px 0 rgba(255,255,255,.6) inset; }
.wl-pop[hidden] { display: none; }
.wl-pop.on { animation: wl-pop-in .22s var(--h-ease) both; }
@keyframes wl-pop-in { from { opacity: 0; transform: translate(var(--pop-x, 0), -6px); } to { opacity: 1; transform: translate(var(--pop-x, 0), 0); } }
.wl-mega { --pop-x: -50%; left: 50%; top: calc(100% - 2px); transform: translateX(-50%); width: min(1040px, calc(100vw - 56px)); display: grid; grid-template-columns: 1.5fr 1fr; gap: 6px; padding: 10px; }
.wl-h--hub .wl-mega { top: calc(100% - 14px); }
.wl-mega-col { min-width: 0; }
.wl-mega-col + .wl-mega-col { border-left: 1px solid var(--h-line); padding-left: 6px; }
.wl-mega ul, .wl-advmenu ul, .wl-sheet ul { list-style: none; margin: 0; padding: 0; }
.wl-mega-h, .wl-pop-h { margin: 0; padding: 12px 12px 6px; font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink3); }
.wl-mk { display: grid; grid-template-columns: minmax(6.5em, 8.5em) 1fr auto; column-gap: 12px; row-gap: 3px; align-items: baseline; min-height: 44px; padding: 10px 12px; border-radius: 14px; color: var(--h-ink); text-decoration: none; transition: background-color .16s var(--h-ease); }
.wl-mk:hover, .wl-mk:focus-visible { background: var(--h-hover); }
.wl-mk[aria-current] { box-shadow: inset 3px 0 0 var(--h-blue); }
.wl-mk b { font: 600 15px/1.25 var(--font, sans-serif); letter-spacing: -.01em; }
.wl-mk-f { font: 430 13.5px/1.35 var(--font, sans-serif); color: var(--h-ink2); font-variant-numeric: tabular-nums; }
.wl-st { grid-column: 2; display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1.3 var(--mono, ui-monospace, monospace); color: var(--h-ink3); font-variant-numeric: tabular-nums; }
.wl-st:empty { display: none; }
.wl-mk--city { grid-template-columns: minmax(6.5em, 8em) 1fr auto; align-items: center; }
/* кружок-стрелка строки: он же loop-band источника M1 (виток начинается из меню) */
.wl-mk-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--h-ink3); transition: background-color .16s var(--h-ease), color .16s var(--h-ease); }
.wl-mk--city .wl-mk-go { grid-row: auto; }
.wl-mk:hover .wl-mk-go, .wl-mk:focus-visible .wl-mk-go { background: var(--h-blue); color: #fff; }
.wl-mk[aria-current] .wl-mk-go { color: var(--h-blue); }
.wl-mega-more { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 0; padding: 0 12px; border-radius: 14px; font: 560 14px/1 var(--font, sans-serif); color: var(--h-blue); text-decoration: none; }
.wl-mega-more:hover { background: var(--h-hover); }
.wl-advwrap { position: relative; }
.wl-advmenu { right: 0; top: calc(100% + 8px); width: 360px; padding: 8px; }
.wl-mk--s { grid-template-columns: 1fr auto; }
.wl-mk--s .wl-st { grid-column: auto; }
.wl-desk { display: block; margin: 0 4px 6px; padding: 10px 10px; border-radius: 12px; background: var(--h-hover); font: 500 12px/1.4 var(--mono, ui-monospace, monospace); color: var(--h-ink2); font-variant-numeric: tabular-nums; }

/* хаб: строки над меню истории (#menu) */
.wl-hubrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--blue, #285ff5); text-decoration: none; font: 600 14px/1.2 var(--font, sans-serif); }
.wl-hubrow:hover { background: rgba(40,95,245,.08); }
.wl-hubrow--hint { color: var(--ink, #0c111b); font-weight: 540; }
.wl-hubrow--hint span { font: 500 12px/1 var(--mono, ui-monospace, monospace); color: var(--blue, #285ff5); }

/* ——— телефон: знак · Book · ☰; меню — лист на всю высоту ——— */
.wl-sheet { position: fixed; inset: 0; z-index: 70; background: rgba(12,17,27,.28); color: var(--h-ink); }
.wl-sheet[hidden] { display: none; }
.wl-sheet-in { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--h-paper); padding: 0 16px calc(24px + env(safe-area-inset-bottom)); opacity: 0; transform: translateY(10px); transition: opacity .22s var(--h-ease), transform .22s var(--h-ease); outline: none; }
.wl-sheet.on .wl-sheet-in { opacity: 1; transform: none; }
.wl-sheet-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 52px; margin: 0 -16px; padding: 0 16px; background: var(--h-paper); }
.wl-sheet-x { appearance: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--h-line); background: transparent; color: var(--h-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wl-crumbs--sheet { margin: 2px 0 6px; }
.wl-desk--sheet { margin: 0 0 8px; }
/* one running line (a flex row split the status and the call window into two wrapped columns) */
.wl-desk.open::before { content: ''; margin-right: 8px; vertical-align: 1px; }
.wl-sheet-book { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 2px 0 10px; padding: 0 18px 0 20px; border-radius: 999px; background: var(--h-blue); color: #fff; font: 600 16px/1 var(--font, sans-serif); letter-spacing: -.01em; text-decoration: none; }
.wl-sheet-book:active { transform: scale(.98); }
.wl-sheet-mk .wl-mega-col + .wl-mega-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--h-line); margin-top: 8px; padding-top: 4px; }
.wl-sheet-mk .wl-mk { grid-template-columns: 1fr auto; padding: 11px 4px; }
.wl-sheet-mk .wl-mk > b, .wl-sheet-mk .wl-mk-f, .wl-sheet-mk .wl-st { grid-column: 1; }
.wl-sheet-mk .wl-mk-go { grid-column: 2; grid-row: 1 / span 3; }
.wl-sheet-mk .wl-mk--city .wl-mk-go { grid-row: 1 / span 2; }
.wl-sheet-mk .wl-mega-h { padding-left: 4px; }
.wl-sheet-mk .wl-mega-more { padding: 0 4px; }
.wl-sheet-nav { border-top: 1px solid var(--h-line); margin-top: 8px !important; padding-top: 4px !important; }
.wl-sheet-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; font: 560 16px/1 var(--font, sans-serif); color: var(--h-ink); text-decoration: none; }
html.wl-sheet-open { overflow: hidden; }

@media (max-width: 860px) {
  .wl-h[data-mode="page"], .wl-h[data-mode="page"] .wl-bar { height: 52px; }
  .wl-bar { padding: 0 16px; gap: 8px; }
  .wl-h[data-mode="page"] .mark { margin-right: auto; font-size: 21px; }
  .wl-h .wl-nav, .wl-h .wl-advwrap { display: none; }
  .wl-burger { display: inline-flex; }
  .wl-h[data-mode="page"] .wl-book { padding: 0 14px; }
  .wl-h[data-mode="page"] .wl-book-l { display: none; }
  .wl-h[data-mode="page"] .wl-book-s { display: inline; }
  .wl-crumbrow { padding: 0 16px; margin-top: 0; }
  .wl-h--hub .wl-burger { pointer-events: auto; }
}
@media (max-width: 1279px) { .wl-adv-st { display: none; } }

/* ——— motion: page transitions (§B.3, §F.5 M1/M3; WP9; transition.js). Needed in <head> of both pages. ——— */
@view-transition { navigation: auto; }
[data-vt="loop-band"]:not([data-vt-source], [data-vt-source] *) { view-transition-name: loop-band; }
[data-vt="market-title"]:not([data-vt-source], [data-vt-source] *) { view-transition-name: market-title; }
/* M1 twist: UI out 0–120 ms onto --night-0; old band rotateX 0→90° (skew 12°) to the new box 120–600; new band −90°→0 and
   the page 600–900; market-title morphs 300–900. Home/fade/passport: 300 ms crossfade. */
:root:not(:active-view-transition-type(home, passport, fade))::view-transition { background: var(--night-0, #05070c); }
::view-transition-old(root) { animation: wl-fade-out .12s linear both; }
::view-transition-new(root) { animation: wl-fade-in .3s var(--ease-ui, cubic-bezier(.2,.7,.1,1)) .6s both; }
::view-transition-group(loop-band) { animation-duration: .48s; animation-delay: .12s; animation-timing-function: var(--ease-cam, cubic-bezier(.65,0,.35,1)); }
::view-transition-image-pair(loop-band) { isolation: auto; }
::view-transition-old(loop-band), ::view-transition-new(loop-band) { height: 100%; mix-blend-mode: normal; transform-origin: 50% 50%; backface-visibility: hidden; }
::view-transition-old(loop-band) { animation: wl-twist-out .48s var(--ease-cam, cubic-bezier(.65,0,.35,1)) .12s both; }
::view-transition-new(loop-band) { animation: wl-twist-in .3s var(--ease-ui, cubic-bezier(.2,.7,.1,1)) .6s both; }
::view-transition-group(market-title) { animation-duration: .6s; animation-delay: .3s; animation-timing-function: var(--ease-cam, cubic-bezier(.65,0,.35,1)); }
::view-transition-old(market-title) { animation: wl-fade-out .3s linear .3s both; }
::view-transition-new(market-title) { animation: wl-fade-in .36s linear .42s both; }
@keyframes wl-twist-out { to { transform: perspective(700px) rotateX(90deg) rotateY(12deg); } }
@keyframes wl-twist-in { from { transform: perspective(700px) rotateX(-90deg) rotateY(-12deg); } }
@keyframes wl-fade-out { to { opacity: 0; } }
@keyframes wl-fade-in { from { opacity: 0; } }
:active-view-transition-type(home, fade)::view-transition-old(root), :active-view-transition-type(home, fade, passport)::view-transition-old(*) { animation: wl-fade-out .3s var(--ease-ui, ease) both; }
:active-view-transition-type(home, fade)::view-transition-new(root), :active-view-transition-type(home, fade, passport)::view-transition-new(*) { animation: wl-fade-in .3s var(--ease-ui, ease) both; }
:active-view-transition-type(home, fade, passport)::view-transition-group(*) { animation-delay: 0s; animation-duration: .3s; animation-timing-function: var(--ease-ui, ease); }
/* M3 passport: the live new strip shows at once (loopbar.js morphs it); the old one fades */
:active-view-transition-type(passport)::view-transition-new(loop-band) { animation: none; }
:active-view-transition-type(passport)::view-transition-old(loop-band) { animation: wl-fade-out .18s var(--ease-ui, ease) both; }
@media (prefers-reduced-motion: reduce) {
  :root::view-transition { background: none; }
  [data-vt], .wl-loop { view-transition-name: none !important; } /* one plain 200 ms crossfade, no morphing boxes */
  ::view-transition-group(*) { animation: none !important; }
  ::view-transition-old(*) { animation: wl-fade-out .2s both !important; }
  ::view-transition-new(*) { animation: wl-fade-in .2s both !important; }
  .wl-pop.on { animation: none; }
  .wl-sheet-in, .wl-caret, .wl-h[data-mode="page"] { transition: none; }
}