/* ==========================================================================
   Site shell — direction A «Меню сверху» (2026-09-17)
   ==========================================================================
   Markup: templates/core/shell/*.html. Behaviour: static/core/js/site-shell.js.
   Tokens and components: ui-kit.css (load it first). Guarded by
   core/tests/test_site_shell.py.

   The sticky contract, same idea as the header it replaces:
   * <header class="header-main sh-header"> is the sticky element and it sticks
     at top: 0, section bar or not, so BOTH bars stay pinned — which is what
     the approved kit draws (.an-gn top 0 + .an-ln top 48 on desktop, .an-pn
     top 0 + .an-lnm top 48 on the phone). It used to stick at minus the global
     bar's height, borrowing apple.com's roll-away; on a phone that took the
     menu button off screen, and the menu button is the ONLY navigation there,
     so scrolling a listing left the visitor with no way out of it.
   * site-shell.js writes the pinned height into --app-header-h, which every
     sticky sidebar on the site already reads. It is the whole header now
     (48 + 52 desktop, 48 + 44 phone, 48 with no section bar), because the
     whole header is what stays. Never hard-code 48 or 52 in a page stylesheet.
   * .header-main keeps its name: law-reader.css and counterparty.css hide
     header.header-main for print, law_version_compare.html for its full-screen
     diff.
   * The menu, the search panel and the popovers are position:fixed siblings of
     the header, so opening one never depends on where the header has stuck.
   ========================================================================== */

.ui2 .sh-header {
  --sh-gn-h: 48px;
  --sh-ln-h: 52px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
@media (max-width: 1023.98px) {
  .ui2 .sh-header { --sh-ln-h: 44px; }
}

.ui2 .sh-skip { position: absolute; left: 12px; top: -100px; z-index: 1100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 15px; text-decoration: none; }
.ui2 .sh-skip:focus { top: 8px; color: #fff; }

/* ------------------------------------------------------- global bar */
.ui2 .sh-gn {
  height: var(--sh-gn-h);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ui2 .sh-header.has-bar .sh-gn { border-bottom-color: transparent; }
.ui2 .sh-gn-in { display: flex; align-items: center; height: 100%; }
.ui2 .sh-logo { display: flex; align-items: center; flex: none; width: 220px; height: 100%; color: var(--logo); }
.ui2 .sh-logo > svg { display: block; width: 78px; height: 20px; fill: currentColor; }

.ui2 .sh-links { flex: 1; display: flex; justify-content: center; gap: 40px; }
.ui2 .sh-links > a { position: relative; display: flex; align-items: center; height: var(--sh-gn-h); color: rgba(29, 29, 31, 0.8); font-size: 13px; letter-spacing: -0.1px; white-space: nowrap; text-decoration: none; transition: color 0.2s; }
.ui2 .sh-links > a:hover { color: var(--ink); }
.ui2 .sh-links > a[aria-current] { color: var(--ink); font-weight: 500; }

.ui2 .sh-tools { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: 220px; }
.ui2 .sh-tool { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; margin: 0; padding: 0 4px; border: 0; border-radius: 16px; background: transparent; color: rgba(29, 29, 31, 0.8); font: inherit; font-size: 13px; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: color 0.2s, background-color 0.2s; }
.ui2 .sh-tool:hover, .ui2 .sh-tool[aria-expanded="true"] { color: var(--ink); }
.ui2 .sh-tool .ui-ic { width: 17px; height: 17px; }
.ui2 .sh-av { width: 28px; height: 28px; font-size: 12px; }
.ui2 .sh-menu-btn { display: none; }

.ui2 .sh-anchor { position: relative; }
@media (min-width: 1024px) {
  .ui2 .sh-phone { display: none !important; }
}

@media (max-width: 1023.98px) {
  .ui2 .sh-gn-in { width: auto; margin: 0; padding: 0 8px 0 20px; }
  .ui2 .sh-logo { width: auto; margin-right: auto; }
  .ui2 .sh-logo > svg { width: 71px; height: 18px; }
  .ui2 .sh-links, .ui2 .sh-desk { display: none !important; }
  .ui2 .sh-tools { width: auto; gap: 0; }
  .ui2 .sh-tool { width: 44px; height: 44px; border-radius: 50%; padding: 0; }
  .ui2 .sh-tool:active { background: rgba(118, 118, 128, 0.12); }
  .ui2 .sh-tool .ui-ic { width: 22px; height: 22px; }
  .ui2 .sh-menu-btn { display: inline-flex; }
}

/* ------------------------------------------------------ section bar */
.ui2 .sh-ln {
  position: relative;
  height: var(--sh-ln-h);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ui2 .sh-ln-in { display: flex; align-items: center; gap: 22px; height: 100%; }
.ui2 .sh-ln-t { display: inline-flex; align-items: center; gap: 5px; margin: 0 auto 0 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 21px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ui2 .sh-ln-t:hover { color: var(--ink); }
.ui2 .sh-ln-t .ui-ic { display: none; width: 13px; height: 13px; stroke-width: 2.6; color: var(--ink2); transition: transform 0.2s; }
.ui2 .sh-ln-links { display: flex; align-items: center; gap: 22px; }
.ui2 .sh-ln-links > a { position: relative; display: inline-flex; align-items: center; color: rgba(29, 29, 31, 0.8); font-size: 13px; white-space: nowrap; text-decoration: none; transition: color 0.2s; }
.ui2 .sh-ln-links > a:hover { color: var(--ink); }
.ui2 .sh-ln-links > a[aria-current] { color: var(--ink); }
.ui2 .sh-ln-links > a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink); }
.ui2 .sh-ln-cta { flex: none; }
/* On the page the pill leads to, it is where you are, not something to press:
   it goes quiet so that page's own filled button stays the only one. */
.ui2 .sh-ln-cta[aria-current] { background: var(--fill2); color: var(--ink); }
.ui2 .sh-ln-cta[aria-current]:hover { background: var(--fill3); color: var(--ink); }
/* A page whose own main action is a filled button sets body class
   sh-cta-quiet (in its body_class block), so the bar's pill steps back and the
   page keeps one filled button. */
body.ui2.sh-cta-quiet .sh-ln-cta { background: var(--fill2); color: var(--ink); }
body.ui2.sh-cta-quiet .sh-ln-cta:hover { background: var(--fill3); color: var(--ink); }

@media (max-width: 1023.98px) {
  .ui2 .sh-ln { border-top: 1px solid rgba(0, 0, 0, 0.06); }
  .ui2 .sh-ln-in { width: auto; margin: 0; padding: 0 20px; gap: 12px; }
  .ui2 .sh-ln-t { height: var(--sh-ln-h); font-size: 17px; letter-spacing: -0.2px; }
  .ui2 .sh-ln-t .ui-ic { display: block; }
  .ui2 .sh-ln.is-open .sh-ln-t .ui-ic { transform: rotate(180deg); }
  /* On a phone the section's links drop down under the bar. */
  .ui2 .sh-ln-links {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px 14px; background: #fff;
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.25);
  }
  .ui2 .sh-ln.is-open .sh-ln-links { display: flex; }
  .ui2 .sh-ln-links > a { height: 44px; font-size: 17px; color: var(--ink); }
  .ui2 .sh-ln-links > a + a { border-top: 1px solid var(--fill2); }
  .ui2 .sh-ln-links > a[aria-current] { font-weight: 600; }
  .ui2 .sh-ln-links > a[aria-current]::after { display: none; }
  /* 44px of touch target around the 28px pill without changing its look. */
  .ui2 .sh-ln-cta { position: relative; }
  .ui2 .sh-ln-cta::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; margin-top: -22px; }
}

/* --------------------------------------------------------- popovers */
.ui2 .sh-pop { position: fixed; z-index: 1060; }
.ui2 .sh-pop[hidden] { display: none; }
.ui2 .sh-pop form { margin: 0; }
.ui2 .sh-pop-name { margin: 0; padding: 8px 10px 6px; font-size: 13px; font-weight: 600; color: var(--ink); max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui2 .sh-pop-role { display: block; font-size: 12px; font-weight: 400; color: var(--ink3); }

/* ------------------------------------------------ phone full-screen menu */
.ui2 .sh-menu { position: fixed; inset: 0; z-index: 1070; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: #fff; opacity: 1; transition: opacity 0.2s ease; }
.ui2 .sh-menu[hidden] { display: none; }
.ui2 .sh-menu-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 20px; }
.ui2 .sh-menu-top .sh-logo { width: auto; }
.ui2 .sh-menu-top .sh-logo > svg { width: 71px; height: 18px; }
.ui2 .sh-menu-body { padding: 24px 40px 48px; }
.ui2 .sh-menu-big { margin: 0; padding: 0; list-style: none; }
.ui2 .sh-menu-big li + li { margin-top: 18px; }
.ui2 .sh-menu-big a { display: block; color: var(--ink); font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.ui2 .sh-menu-big a[aria-current] { color: var(--brand); }
.ui2 .sh-menu-sep { height: 1px; margin: 32px 0 12px; background: var(--hair); }
.ui2 .sh-menu-small { margin: 0; padding: 0; list-style: none; }
.ui2 .sh-menu-small :is(a, button) { display: flex; align-items: center; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 17px; text-align: left; text-decoration: none; cursor: pointer; }
.ui2 .sh-menu-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 20px; }
.ui2 .sh-menu-lang form { margin: 0; }
.ui2 .sh-menu-lang button { height: 44px; padding: 0; border: 0; background: none; color: var(--ink3); font: inherit; font-size: 15px; cursor: pointer; }
.ui2 .sh-menu-lang button[aria-current] { color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) {
  .ui2 .sh-menu { display: none !important; }
}
@media (max-width: 380px) {
  .ui2 .sh-menu-body { padding-inline: 24px; }
}

/* -------------------------------------------------------- search panel */
.ui2 .sh-search { position: fixed; inset: 0; z-index: 1065; }
.ui2 .sh-search[hidden] { display: none; }
.ui2 .sh-search-scrim { position: absolute; inset: 0; background: rgba(232, 232, 237, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ui2 .sh-search-panel { position: relative; background: #fff; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.25); }
.ui2 .sh-search-in { width: min(680px, 100% - 2 * var(--ui-gutter)); margin: 0 auto; padding: 22px 0 30px; }
.ui2 .sh-search-row { display: flex; align-items: center; gap: 10px; }
.ui2 .sh-search-field { flex: 1; height: 52px; border-radius: 14px; font-size: 19px; }
.ui2 .sh-search-field > .ui-ic { width: 19px; height: 19px; }
.ui2 .sh-search-field input::-webkit-search-cancel-button { display: none; }
.ui2 .sh-search-scope { margin-top: 14px; }
.ui2 .sh-search-h { margin: 26px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink3); }
.ui2 .sh-search-links { margin: 0; padding: 0; list-style: none; }
.ui2 .sh-search-links :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.ui2 .sh-search-links :is(a, button):hover { color: var(--brand); }
.ui2 .sh-search-links .ui-ic { width: 14px; height: 14px; stroke-width: 2.4; color: var(--ink3); }
@media (max-width: 1023.98px) {
  .ui2 .sh-search-panel { position: absolute; inset: 0; overflow-y: auto; box-shadow: none; }
  .ui2 .sh-search-in { width: auto; padding: 8px 20px 32px; }
  .ui2 .sh-search-field { height: 44px; border-radius: 12px; font-size: 17px; }
  .ui2 .sh-search-links :is(a, button) { height: 48px; font-size: 17px; }
  .ui2 .sh-search-links li + li { border-top: 1px solid var(--fill2); }
}

/* ----------------------------------------------------------- page body */
.ui2 .sh-main:focus { outline: none; }

/* style.css sets html, body { overflow-x: hidden } below 992px. With both set,
   body stops propagating overflow to the viewport and becomes a scroll
   container of its own — one that never scrolls, because it grows with its
   content — and a sticky element sticks to that, i.e. never. `clip` still cuts
   sideways overflow but creates no scroll container, so the header pins on
   phones too. */
@media (max-width: 991.98px) {
  html:has(> body.ui2), body.ui2 { overflow-x: clip; overflow-y: visible; }
}

/* Old full-bleed blocks cancel the 50px body padding that .ui2 removes
   (ui-kit.css). Until their pages are redesigned they sit flush instead. */
.ui2 .block.block-list,
.ui2 .block-filters {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* -------------------------------------------------------------- footer */
.ui2 .sh-foot { margin-top: 0; padding: 0; background: var(--fill); color: var(--ink2); font-size: 12px; line-height: 1.5; }
.ui2 .sh-foot .ui-wrap { padding: 36px 0 28px; }
.ui2 .sh-fcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ui2 .sh-fh { margin: 0 0 8px; color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.ui2 .sh-foot ul { margin: 0; padding: 0; list-style: none; }
.ui2 .sh-foot li + li { margin-top: 6px; }
.ui2 .sh-foot a { color: var(--ink2); text-decoration: none; }
.ui2 .sh-foot a:hover { color: var(--ink); text-decoration: underline; }
.ui2 .sh-fbot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ui2 .sh-fbot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ui2 .sh-flang { display: flex; align-items: center; gap: 12px; }
.ui2 .sh-flang form { margin: 0; }
.ui2 .sh-flang button { padding: 0; border: 0; background: none; color: var(--ink2); font: inherit; cursor: pointer; }
.ui2 .sh-flang button:hover { color: var(--ink); text-decoration: underline; }
.ui2 .sh-flang button[aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 733.98px) {
  .ui2 .sh-foot .ui-wrap { padding: 28px 0 40px; }
  .ui2 .sh-fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .ui2 .sh-foot a { display: inline-block; padding: 3px 0; }
  .ui2 .sh-fbot { flex-direction: column; align-items: flex-start; margin-top: 22px; }
}

/* style.css paints every Bootstrap modal backdrop a purple gradient. The
   redesign dims with plain black, as the AI sheet does (v2/ai-chat.css). */
.ui2 .modal-backdrop.show { background: #000; opacity: 0.42; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The move-up button belongs to the old palette; the new shell does without it
   rather than recolouring a control nobody asked for. */
.ui2 .move-up { display: none !important; }

@media print {
  .ui2 .sh-header, .ui2 .sh-foot, .ui2 .sh-menu, .ui2 .sh-search, .ui2 .sh-pop { display: none !important; }
}