/* The stand's shell (zn_shell.py): one app bar and one navigation rail around the portal and every module, so the stand
   reads as one application (deploy/README.md, «Общее меню»). The canonical copy is the portal's; the modules keep
   byte-identical copies. The shell is drawn over pages with their own styles, so its rules set every property they rely
   on and use the brandbook's values (services/docs/zarubezhneft-brandbook-web.md) directly, not the page's tokens: only
   the face follows the page — the brand face where the page has loaded it (fonts.css sets --font and --display),
   Roboto Flex in the accent width otherwise. */

@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-latin.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-latin-ext.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-cyrillic.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "ZN Text"; src: url("fonts/RobotoFlex-vietnamese.woff2") format("woff2");
  font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root { --zn-bar-h: 60px; --zn-top: 63px; --zn-rail-w: 248px; --zn-rail-min: 64px; }

.zn-bar, .zn-rail {
  font-family: var(--font, "ZN Text", Arial, sans-serif); font-stretch: var(--display, 90%); font-size: 14px;
  font-weight: 400; line-height: 1.4; letter-spacing: normal; text-transform: none; color: #3D4757;
  -webkit-font-smoothing: antialiased; }
.zn-bar *, .zn-rail *, .zn-bar *::before, .zn-rail *::before, .zn-bar *::after, .zn-rail *::after { box-sizing: border-box; }
.zn-bar a, .zn-rail a { text-decoration: none; }
.zn-bar a:hover, .zn-rail a:hover { text-decoration: none; }
.zn-icon { flex: none; display: block; }

/* ——— app bar and the brand line ——— */
.zn-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: var(--zn-bar-h);
  margin: 0; padding: 0 20px 0 14px; background: #FFFFFF; box-sizing: border-box; }
.zn-stripe { position: sticky; top: var(--zn-bar-h); z-index: 39; height: 3px;
  background: linear-gradient(90deg, #00326E 0%, #005591 18%, #0078AF 36%, #0A8F2D 58%, #4BAF46 74%, #9BC855 88%, #CEE1A5 100%); }
.zn-fold { all: unset; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px;
  color: #3D4757; cursor: pointer; }
.zn-fold:hover { background: #EEF1F5; color: #00326E; }
.zn-bar :focus-visible, .zn-rail :focus-visible { outline: 2px solid #0078AF; outline-offset: 2px; }
.zn-brand { display: flex; align-items: center; gap: 9px; flex: none; color: #00326E; font-size: 17px; white-space: nowrap; }
.zn-brand:hover { color: #00326E; }
/* Placeholder for the official logo from the brand kit. */
.zn-brand__mark { width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(from 200deg, #00326E, #0078AF, #4BAF46, #9BC855, #00326E); }
.zn-brand b { font-weight: 600; }
.zn-bar__module { padding-left: 14px; border-left: 1px solid #D9DEE5; color: #3D4757; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zn-bar__grow { flex: 1; }
.zn-bar__tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zn-bar__tools:empty { display: none; }
.zn-bar__ver { flex: none; font-size: 11px; color: #6D6D6D; border: 1px solid #D9DEE5; border-radius: 10px; padding: 1px 8px; }
.zn-bar__exit-form { display: contents; }
.zn-bar__exit { all: unset; display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px 6px 10px;
  border: 1px solid #D9DEE5; border-radius: 8px; background: #FFFFFF; color: #00326E; font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgb(0 25 70 / 0.04); }
.zn-bar__exit:hover { background: #F7F9FB; border-color: #C5CDD8; color: #00326E; }

/* ——— the module's header under the bar, as the country profile's (its mockup: .gs-topbar, .gs-countries) ——— */
.zn-head { position: sticky; top: var(--zn-top); z-index: 30; display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 16px; background: #FFFFFF; border-bottom: 1px solid #E8ECF1;
  font-family: var(--font, "ZN Text", Arial, sans-serif); font-stretch: var(--display, 90%); font-size: 13px;
  line-height: 1.4; color: #000000; }
.zn-head *, .zn-head *::before, .zn-head *::after { box-sizing: border-box; }
.zn-head__country { flex: none; font-size: 26px; font-weight: 700; line-height: 1.2; color: #00326E; white-space: nowrap; }
.zn-countries { display: flex; align-items: center; flex: none; gap: 2px; padding: 3px; border: 1px solid #D9DEE5;
  border-radius: 8px; background: #F7F9FB; }
.zn-country { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 1px solid transparent;
  border-radius: 8px; line-height: 1; white-space: nowrap; }
.zn-country.is-active { border-color: #D9DEE5; background: #FFFFFF; font-weight: 700;
  box-shadow: 0 1px 2px rgb(0 25 70 / 0.06); }
.zn-country.is-soon { cursor: help; }
.zn-country.is-soon .zn-flag { opacity: 0.45; }
.zn-flag { display: block; width: 24px; height: 16px; border-radius: 1px; }
.zn-head__tools { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }

/* ——— the frame: the rail and the page ——— */
.zn-frame { display: flex; align-items: stretch; min-height: calc(100vh - var(--zn-top)); }
.zn-main { flex: 1; min-width: 0; }
.zn-rail { position: sticky; top: var(--zn-top); z-index: 20; display: flex; flex-direction: column; gap: 2px; flex: none;
  width: var(--zn-rail-w); height: calc(100vh - var(--zn-top)); overflow-x: hidden; overflow-y: auto; margin: 0;
  padding: 14px 10px 24px; background: #FFFFFF; border-right: 1px solid #E8ECF1; }
.zn-rail__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: #3D4757;
  white-space: nowrap; }
.zn-rail__item:hover { background: #EEF1F5; color: #00326E; }
/* The current page: the portal, or a module without a current section of its own. */
.zn-rail__item.is-current, .zn-rail__item.is-current:hover { background: #00326E; color: #FFFFFF; font-weight: 600; }
/* The current module, open on one of its sections. */
.zn-rail__item.is-open { color: #00326E; font-weight: 600; }
.zn-rail__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zn-rail__group { margin: 16px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #6D6D6D;
  white-space: nowrap; }
.zn-rail__sub { position: relative; display: flex; flex-direction: column; gap: 1px; margin: 2px 0 8px; }
.zn-rail__sub:empty { display: none; }
.zn-rail__sub::before { content: ""; position: absolute; left: 21px; top: 4px; bottom: 4px; width: 1px; background: #E8ECF1; }
.zn-rail__sub a { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 40px; border-radius: 8px; color: #3D4757;
  font-size: 13.5px; }
.zn-rail__sub a:hover { background: #EEF1F5; color: #00326E; }
.zn-rail__sub a.is-current, .zn-rail__sub a.is-current:hover { background: #00326E; color: #FFFFFF; font-weight: 500; }
.zn-rail__subgroup { padding: 10px 10px 3px 40px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6D6D6D; white-space: nowrap; }
.zn-rail__count { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #00326E;
  background: #EEF1F5; border-radius: 10px; padding: 0 7px; }
.zn-rail__sub a.is-current .zn-rail__count { background: rgb(255 255 255 / 0.18); color: #FFFFFF; }
/* Service pages of the modules: apart from them, at the bottom of the rail. */
.zn-rail__service { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; }
.zn-rail__service .zn-rail__group { margin-top: 4px; padding-top: 14px; border-top: 1px solid #E8ECF1; }
.zn-scrim { display: none; }

/* ——— the folded rail: icons only, the title in a tip ——— */
@media (min-width: 861px) {
  .zn-min .zn-rail { width: var(--zn-rail-min); overflow: visible; padding-left: 8px; padding-right: 8px; }
  .zn-min .zn-rail__label, .zn-min .zn-rail__group, .zn-min .zn-rail__sub { display: none; }
  .zn-min .zn-rail__item { justify-content: center; padding: 10px 0; position: relative; }
  /* Folded, the open module has no sections to show: it is the current page. */
  .zn-min .zn-rail__item.is-open { background: #00326E; color: #FFFFFF; }
  .zn-min .zn-rail__item:hover::after { content: attr(data-zn-tip); position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%); z-index: 50; padding: 7px 10px; border-radius: 8px; background: #001946; color: #FFFFFF;
    font-size: 12px; font-weight: 400; white-space: nowrap; box-shadow: 0 8px 24px rgb(0 25 70 / 0.25); pointer-events: none; }
  .zn-min .zn-rail__group + .zn-rail__item { margin-top: 12px; }
  .zn-min .zn-rail__service { border-top: 1px solid #E8ECF1; }
}

/* ——— a narrow screen: the rail slides in over the page ——— */
@media (max-width: 860px) {
  .zn-bar { gap: 10px; padding: 0 12px 0 8px; }
  .zn-rail { position: fixed; left: 0; top: var(--zn-top); bottom: 0; height: auto; z-index: 45; transform: translateX(-100%);
    transition: transform 0.2s ease; box-shadow: none; }
  .zn-open .zn-rail { transform: none; box-shadow: 0 12px 40px rgb(0 25 70 / 0.25); }
  .zn-open .zn-scrim { display: block; position: fixed; inset: var(--zn-top) 0 0 0; z-index: 44; background: rgb(0 25 70 / 0.25); }
  .zn-bar__ver { display: none; }
}
@media (max-width: 640px) {
  .zn-head { flex-wrap: wrap; height: auto; padding: 10px 16px; position: static; }
  .zn-head__tools { width: 100%; margin-left: 0; }
  /* The module's name is in the rail; the bar keeps room for the module's tools. */
  .zn-brand__name, .zn-bar__module, .zn-bar__exit span { display: none; }
  .zn-bar__exit { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .zn-rail { transition: none; } }
@media print { .zn-bar, .zn-stripe, .zn-rail, .zn-scrim { display: none; } }