/* Portal design system — the single source of visual truth.
 * Specification: docs/BRANDBOOK.md (Summit). Rules: tokens only, no important-flags,
 * no page-specific overrides. Components are prefixed ds-. */

@font-face{font-family:"DS Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter/inter-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter/inter-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter/inter-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter/inter-cyrillic-600-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"DS Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter/inter-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* 1. Tokens ------------------------------------------------------------- */
:root{
  --ds-bg:#eef2f6;
  --ds-surface:#ffffff;
  --ds-surface-soft:#f6f9fc;
  --ds-ink:#1e2c3f;
  --ds-ink-muted:#68788d;
  --ds-ink-faint:#94a3b8;
  --ds-line:#d9e3ef;
  --ds-line-soft:#e8eef5;
  --ds-line-strong:#c4d1e0;
  --ds-brand:#2367c9;
  --ds-brand-hover:#1d58ad;
  --ds-brand-soft:#eaf2fb;
  --ds-accent:#247d86;
  --ds-success:#1f8a5b;--ds-success-soft:#e7f5ee;
  --ds-warning:#b7791f;--ds-warning-soft:#fdf4e3;
  --ds-danger:#c2413b;--ds-danger-soft:#fbeceb;--ds-danger-hover:#a8352f;
  --ds-on-color:#ffffff;
  --ds-sidebar:linear-gradient(180deg,#233852 0%,#1b3049 100%);
  /* 1.5.235 (brandbook 3.117; the owner: «более спокойный стиль цвета для митингов и вебинаров»): the room of a meeting - the ink of
     the menu with less blue in it, the plates of the controls in the white of the menu, the brand only on what is on. */
  --ds-meet-ground:linear-gradient(180deg,#25303e 0%,#1f2835 100%);

  --ds-font:"DS Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;

  --ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;
  --ds-space-5:20px;--ds-space-6:24px;--ds-space-7:32px;--ds-space-8:40px;

  --ds-radius-sm:8px;--ds-radius-md:10px;--ds-radius-lg:14px;--ds-radius-pill:999px;

  /* 1.5.154 (brandbook 2.5, 2.8; the owner: «больше … теней, чтобы было различие между блоками»): the far layer of a card is deeper. */
  --ds-shadow-1:0 1px 2px rgba(30,44,63,.04),0 4px 14px rgba(30,44,63,.06);
  --ds-shadow-2:0 8px 24px rgba(30,44,63,.08);
  --ds-shadow-3:0 20px 48px rgba(30,44,63,.16);
  --ds-focus:0 0 0 3px rgba(35,103,201,.18);
  --ds-shadow-knob:0 1px 2px rgba(30,44,63,.2);
  --ds-backdrop:rgba(30,44,63,.32);

  --ds-ease:cubic-bezier(.2,.7,.2,1);
  --ds-fast:120ms;--ds-base:180ms;--ds-slow:260ms;
  /* Live details (brandbook 2.6): hover lift of clickable tiles, flowing graph links. */
  --ds-lift:-2px;--ds-lift-sm:-1px;--ds-nudge:2px;
  --ds-flow:950ms;--ds-flow-secondary:1050ms;

  --ds-control-h:40px;--ds-control-h-sm:32px;

  /* Charts (1.5.89, brandbook 3.19): the palette of shares in a ring and of series in a chart, in this order; the
     sixth, grey, is «the rest». Chart.js reads these through static/ds_charts.js. */
  --ds-chart-1:var(--ds-brand);--ds-chart-2:var(--ds-accent);--ds-chart-3:#7b61c9;
  --ds-chart-4:#d08a2b;--ds-chart-5:#5f8fcf;--ds-chart-6:var(--ds-ink-faint);

  /* Portal shell (1.5.93, brandbook 3.23): light text and soft plates on the colour of the menu, the colour of every area
     of the portal (the mark of an area in the menu) and the samples of the themes in the theme menu. */
  --ds-side-ink:#c6d5e8;--ds-side-ink-muted:#8fa4bf;
  --ds-side-plate:color-mix(in srgb,var(--ds-on-color) 6%,transparent);
  --ds-side-hover:color-mix(in srgb,var(--ds-on-color) 7%,transparent);
  --ds-side-current:color-mix(in srgb,var(--ds-on-color) 12%,transparent);
  --ds-side-line:color-mix(in srgb,var(--ds-on-color) 10%,transparent);
  --ds-side-raised:#384b60;
  --ds-area-workspace:#4f6cff;--ds-area-sales:#5267f2;--ds-area-partners:#139b89;--ds-area-commercial:#c78013;
  --ds-area-products:#7657d5;--ds-area-operations:#257fb9;--ds-area-presales:#2b9160;--ds-area-analytics:#a64896;
  --ds-area-administration:#64758a;--ds-area-marketing:#d0567a;
  /* 1.5.154 (brandbook 2.8; the owner, 17.10.2026: «если колонка Платиновая она окрашивается в спокойный платиновый, если голд в
     спокойный голд, серебро итд»): the calm colours of the levels of a price - the ink (the word and its mark), the two ends of
     the background (soft and sheen) and the line (the frame of a pill, the edge of a column). Every ink reads at least 5:1 on
     both ends; a theme never changes them, as the colours of the areas (2.7). */
  --ds-tier-omg:#5b3ea8;--ds-tier-omg-soft:#f6f2fe;--ds-tier-omg-sheen:#e6dcfa;--ds-tier-omg-line:#bfa9ee;
  --ds-tier-platinum:#3c5166;--ds-tier-platinum-soft:#f1f4f7;--ds-tier-platinum-sheen:#d8e0e9;--ds-tier-platinum-line:#9fb1c4;
  --ds-tier-gold:#7a5a0a;--ds-tier-gold-soft:#fdf8e8;--ds-tier-gold-sheen:#f5e3ae;--ds-tier-gold-line:#dcbf6e;
  --ds-tier-silver:#545b63;--ds-tier-silver-soft:#f4f5f6;--ds-tier-silver-sheen:#e2e5e8;--ds-tier-silver-line:#b7bdc4;
  --ds-tier-base:#1f5db6;--ds-tier-base-soft:#eef5fe;--ds-tier-base-sheen:#d6e6fb;--ds-tier-base-line:#93bdf0;
  --ds-tier-top:#16665e;--ds-tier-top-soft:#ecf8f5;--ds-tier-top-sheen:#cfeae3;--ds-tier-top-line:#88cbbd;
  --ds-tier-mdp:#82502a;--ds-tier-mdp-soft:#fcf3ec;--ds-tier-mdp-sheen:#f2dccb;--ds-tier-mdp-line:#d7a986;
  /* 1.5.154 (brandbook 2.8; «между сущностями типа колонка, или партнер»): the tone of each kind of a company - the word of its type
     wears it (a badge of the type, the mark before the type in a register). Every ink reads at least 5:1 on its soft colour. */
  --ds-kind-vendor:#2b3a55;--ds-kind-vendor-soft:#eef0f4;--ds-kind-vendor-line:#c9d0dc;
  --ds-kind-agent:#8a5300;--ds-kind-agent-soft:#fdf3e4;--ds-kind-agent-line:#ecd0a2;
  --ds-kind-distributor:#1d62a8;--ds-kind-distributor-soft:#ebf4fc;--ds-kind-distributor-line:#bcd7f1;
  --ds-kind-ka:#6a3fb8;--ds-kind-ka-soft:#f3eefc;--ds-kind-ka-line:#d5c6f1;
  --ds-kind-partner:#0b6584;--ds-kind-partner-soft:#e7f3f8;--ds-kind-partner-line:#a9d3e3;
  --ds-kind-customer:#7a4a5c;--ds-kind-customer-soft:#f8eff3;--ds-kind-customer-line:#e3cbd5;
  /* 1.5.100 (stage 9a, brandbook 2.7): a sample in the theme menu shows the menu and the workspace of its theme (the values
     of static/ds_themes.css), whatever theme is on - before, its workspace took the colours of the current theme. */
  --ds-swatch-rail-clarity:#172b4d;--ds-swatch-work-clarity:#f5f7fc;--ds-swatch-rail-command:#233852;--ds-swatch-work-command:#eef2f6;
  --ds-swatch-rail-compact:#252a33;--ds-swatch-work-compact:#f2f3f5;--ds-swatch-rail-canvas:#1d3f3a;--ds-swatch-work-canvas:#eff4f2;
  --ds-swatch-rail-windows-95:#006262;--ds-swatch-work-windows-95:#c0c0c0;--ds-swatch-rail-windows-311:#000080;
  --ds-swatch-work-windows-311:#dcdcdc;
}
@media (prefers-reduced-motion:reduce){:root{--ds-fast:0ms;--ds-base:0ms;--ds-slow:0ms;--ds-lift:0px;--ds-lift-sm:0px}}
/* The portal shell shows a fixed bottom navigation up to 900 px (64 px + iOS safe area). */
:root{--ds-shell-bottom:0px}
@media (max-width:900px){:root{--ds-shell-bottom:calc(64px + env(safe-area-inset-bottom,0px))}}
/* 1.5.93 (brandbook 3.23): the geometry of the portal shell by window width - the width of the menu, the margins of the
   page and its top and bottom space. Pages stand exactly where they stood in the shell before the design system. */
:root{--ds-side-w:276px;--ds-page-x:clamp(18px,2.1vw,34px);--ds-page-y:18px;--ds-page-end:18px;--ds-topbar-h:62px;--ds-mobilebar-h:62px}
/* 1.5.167: the gap that parts the bar over the page from the menu and from the scrollbar (the island, brandbook 3.23). */
:root{--ds-topbar-gap:8px}
@media (max-width:1680px){:root{--ds-side-w:clamp(220px,14.8vw,240px);--ds-page-x:clamp(12px,1.35vw,20px);--ds-page-y:13px}}
@media (max-width:1380px){:root{--ds-side-w:clamp(202px,15.4vw,216px);--ds-page-x:12px}}
@media (max-width:1180px){:root{--ds-side-w:196px;--ds-page-x:10px}}
@media (max-width:900px){:root{--ds-side-w:min(350px,88vw);--ds-page-x:12px;--ds-page-y:14px;--ds-page-end:calc(var(--ds-shell-bottom) + 24px)}}
@media (max-width:430px){:root{--ds-page-x:9px;--ds-mobilebar-h:60px}}
/* 1.5.107 (brandbook 3.34): the height of the frame of the map of a place. */
:root{--ds-map-height:360px}
@media (max-width:900px){:root{--ds-map-height:280px}}
/* 1.5.154 (brandbook 2.8; the owner, 17.10.2026: «добавь больше красок, тонов, теней, чтобы было различие между блоками … делай
   глазам удобство разделением цветов, фонов, красок, тонов»): every page wears the calm colour of its area of the menu (body
   data-crm-area - crm_visual_area_code: a card of a company is «Компании», a card of a product «Продукты») - the mark before the path of
   the page and before the head of each block, the soft glow of its tiles, the tone of its inner blocks. */
:root{--ds-page-area:var(--ds-area-workspace)}
body[data-crm-area="sales"]{--ds-page-area:var(--ds-area-sales)}
body[data-crm-area="partners"]{--ds-page-area:var(--ds-area-partners)}
body[data-crm-area="commercial"]{--ds-page-area:var(--ds-area-commercial)}
body[data-crm-area="products"]{--ds-page-area:var(--ds-area-products)}
body[data-crm-area="operations"]{--ds-page-area:var(--ds-area-operations)}
body[data-crm-area="presales"]{--ds-page-area:var(--ds-area-presales)}
body:is([data-crm-area="analytics"],[data-crm-area="management-analytics"]){--ds-page-area:var(--ds-area-analytics)}
body[data-crm-area="administration"]{--ds-page-area:var(--ds-area-administration)}
body[data-crm-area="marketing"]{--ds-page-area:var(--ds-area-marketing)}

/* 2. Base ---------------------------------------------------------------
 * Every component selector starts with .ds and sets its full property set. Until 1.5.101 this let it outrank the legacy
 * theme rules (`body.theme-command :is(input,select,textarea)`, button shadows, label flex) without important-flags;
 * 1.5.102 (design stage 9b): the legacy stylesheets are gone - ds.css and the values of the themes (ds_themes.css) draw
 * the whole portal, and not one important-flag is allowed (tools/quality_gate.py). */
.ds{font-family:var(--ds-font);font-size:14px;line-height:21px;color:var(--ds-ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 1.5.92: running text has proportional figures (brandbook 2.2: tabular figures only in tables and sums, each by its own
     rule) - the tabular figures inherited from the legacy body since 1.5.78 also widen the hyphen: «E - mail», «Wi - Fi». */
  font-variant-numeric:lining-nums proportional-nums;font-kerning:normal}
.ds *,.ds *::before,.ds *::after{box-sizing:border-box}
/* 1.5.95 (design stage 7c, brandbook 3.25): the document of Summit (html.ds-document - the portal shell of the design
   system and the pages on their own, base.html) loads no legacy stylesheet (1.5.100: every theme; 1.5.102: none exists). On a computer the page scrolls inside .ds-main
   and the document itself never scrolls (no window scrollbar takes the width of the page); up to 900 px (the phone shell)
   the document scrolls, an anchor stops under the header, and while the menu, the sheet or the search is open the page
   behind it does not move under the finger. iOS does not enlarge the text of a turned phone. A printed page is never clipped. */
html.ds-document{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.ds-document,html.ds-document body{height:100%;min-height:100%;overflow:hidden}
html.ds-document body{margin:0;background:var(--ds-bg);color:var(--ds-ink);font-family:var(--ds-font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
@media (max-width:900px){
  html.ds-document{height:auto;overflow-x:hidden;overflow-y:auto;
    scroll-padding-top:calc(var(--ds-mobilebar-h) + var(--ds-space-3) - 2px + env(safe-area-inset-top,0px))}
  html.ds-document body{height:auto;overflow-x:clip;overflow-y:visible;overscroll-behavior-y:none}
  html.ds-document body:is(.sidebar-open,.mobile-utility-open,.mobile-search-open){overflow:hidden;touch-action:none}
}
/* A printed page flows over as many sheets as it needs (a landscape sheet is wider than 900 px: the rules of a computer
   would clip the document to its first sheet). */
@media print{html.ds-document,html.ds-document body{height:auto;min-height:0;overflow:visible}}
/* What the legacy layer gave every element of a page of Summit and the design system keeps (legacy_residue_probe.py,
   legacy_state_probe.py, legacy_scenario_probe.py). Zero specificity - the place of the old layer: any rule of the design
   system wins. A tap does not flash grey; a button or a field never grows wider than its place, and a long word in a button
   breaks rather than leaving it; a table separates its cells without gaps and clips its rounded corners, a cell starts at
   the top of its row unless its table says otherwise; a checkbox stands on the middle of its line; an entity link that is
   not an anchor (a span with data-entity-intelligence-kind) shows the pointing hand; a link, a button or a field reached
   from the keyboard shows the focus ring of the design system (--ds-focus) unless its component draws its own. Up to 900 px a tap on a link or a
   button never waits for a double tap, a label and a picture never push their row wider than the screen. */
:where(.ds-document),:where(.ds-document) *,:where(.ds-document) *::before,:where(.ds-document) *::after{box-sizing:border-box}
:where(.ds-document) :where(a,button,summary,label,input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(.ds-document) :where(button){max-width:100%;overflow-wrap:anywhere}
:where(.ds-document) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){max-width:100%}
:where(.ds-document) :where(table){border-collapse:separate;border-spacing:0;overflow:clip}
/* 1.5.96 A table clips its content (rounded corners) without becoming a scroller of its own: «hidden» made every table
   one, and the parts of a table pinned to its frame stood still inside it - the header row, the first column and «Итого»
   of the pivot matrix (3.20) and the first column of a wide register (3.11) scrolled away with the rest. */
:where(.ds-document) :where(td,th){vertical-align:top}
:where(.ds-document) :where(input[type=checkbox],input[type=radio]){vertical-align:middle}
:where(.ds-document) .ds [data-entity-intelligence-kind][data-entity-intelligence-id]{cursor:pointer}
:where(.ds-document) :where(button,a,input,select,textarea):where(:focus-visible){outline:none;box-shadow:var(--ds-focus)}
@media (max-width:900px){
  :where(.ds-document) :where(a,button,summary){touch-action:manipulation}
  :where(.ds-document) :where(label){min-width:0}
  :where(.ds-document) :where(img,svg,canvas,video){max-width:100%}
}
.ds :is(h1,h2,h3,p){margin:0;letter-spacing:0;text-transform:none}
.ds h1,.ds .ds-h1{font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.01em;color:var(--ds-ink)}
.ds h2,.ds .ds-h2{font-size:18px;line-height:26px;font-weight:600;color:var(--ds-ink)}
.ds h3,.ds .ds-h3{font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds a{color:var(--ds-brand);text-decoration:none;transition:color var(--ds-fast) var(--ds-ease)}
.ds a:hover{color:var(--ds-brand-hover)}
/* 1.5.96: a phone number never breaks across lines («+7 495 100-10-» / «01» in the meta line of a person on a phone). */
.ds a[href^="tel:"]{white-space:nowrap}
.ds .ds-num{font-variant-numeric:tabular-nums}
.ds .ds-muted{color:var(--ds-ink-muted)}
.ds .ds-nowrap{white-space:nowrap}
.ds .ds-stack{display:flex;flex-direction:column;gap:var(--ds-space-4)}


/* 1.5.220 (the owner, 01.11.2026: «всплывающие окна не реагируют на скроллинг, нельзя ничего промотать вниз»): the page in a frame
   scrolls as a document at every width - on a computer the portal scrolls inside .ds-main and keeps the document still, and .ds-main
   of a frame gave its scroll up (it is as tall as the form): nothing scrolled. The body is as tall as the form, so the frame is fitted
   to it and grows when a section of the form opens; the end of the scroll stays in the frame. */
/* 1.5.241: a page on its own (bare_page - the registration of a webinar, its recording, a certificate, the sign-in) has no
   .ds-main to scroll: the document itself scrolls on a computer too (the owner: «нет скроллинга на лендинге — окно зафиксировано»). */
html.ds-document[data-page-alone]{height:auto;overflow-x:hidden;overflow-y:auto}
html.ds-document[data-page-alone] body{height:auto;min-height:100%;overflow-x:clip;overflow-y:visible}
html.ds-document[data-embed]{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html.ds-document[data-embed] body{height:auto;min-height:0;overflow:visible}
/* a frame has no bottom bar of a phone: the bar of «Сохранить» stands at the bottom of the frame and covers no field at the end */
html.ds-document[data-embed]{--ds-shell-bottom:0px}

/* 3. Buttons ------------------------------------------------------------ */
.ds .ds-btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-space-2);
  width:auto;min-width:0;height:var(--ds-control-h);min-height:0;margin:0;padding:0 var(--ds-space-4);
  border:1px solid transparent;border-radius:var(--ds-radius-md);
  font:600 14px/1 var(--ds-font);letter-spacing:0;text-transform:none;text-shadow:none;white-space:nowrap;
  cursor:pointer;text-decoration:none;user-select:none;box-shadow:none;filter:none;transform:none;
  transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),
    color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-btn:hover{filter:none;transform:none;box-shadow:none}
.ds .ds-btn:active{transform:translateY(1px)}
.ds .ds-btn:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-btn:disabled,.ds .ds-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.ds .ds-btn svg{width:16px;height:16px;flex:0 0 16px}
.ds .ds-btn--sm{height:var(--ds-control-h-sm);padding:0 var(--ds-space-3);font-size:13px}
.ds .ds-btn--icon{width:var(--ds-control-h);padding:0}
.ds .ds-btn--sm.ds-btn--icon{width:var(--ds-control-h-sm)}
.ds .ds-btn--primary{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-btn--primary:hover{background:var(--ds-brand-hover);color:var(--ds-on-color)}
.ds .ds-btn--secondary{background:var(--ds-surface);border-color:var(--ds-line);color:var(--ds-ink)}
.ds .ds-btn--secondary:hover{background:var(--ds-surface-soft);border-color:var(--ds-line-strong);color:var(--ds-ink)}
.ds .ds-btn--ghost{background:transparent;color:var(--ds-ink-muted)}
.ds .ds-btn--ghost:hover{background:var(--ds-surface-soft);color:var(--ds-ink)}
.ds .ds-btn--danger{background:var(--ds-danger);color:var(--ds-on-color)}
.ds .ds-btn--danger:hover{background:var(--ds-danger-hover);color:var(--ds-on-color)}
.ds .ds-btn--danger-ghost{background:transparent;color:var(--ds-danger)}
.ds .ds-btn--danger-ghost:hover{background:var(--ds-danger-soft);color:var(--ds-danger)}
/* Count that opens a hover card (people of a company, projects of a contact): it lifts
   like a tile while hovered or open — "something is linked here" (brandbook 2.6, 3.7). */
.ds .ds-btn--count{font-variant-numeric:tabular-nums}
.ds .ds-btn--count:is(:hover,[aria-expanded="true"]){transform:translateY(var(--ds-lift-sm));box-shadow:var(--ds-shadow-2);
  background:var(--ds-brand-soft);border-color:color-mix(in srgb,var(--ds-brand) 35%,var(--ds-line));color:var(--ds-brand)}
.ds .ds-btn--count:active{transform:none}

/* 4. Fields ------------------------------------------------------------- */
.ds .ds-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-4) var(--ds-space-5);min-width:0}
.ds .ds-field-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 1.5.86: one column of fields in a side card (the order form of the cart). */
.ds .ds-field-grid--1{grid-template-columns:minmax(0,1fr)}
.ds .ds-field--wide{grid-column:1/-1}
.ds .ds-field{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;margin:0;
  font-size:14px;font-weight:400;color:var(--ds-ink)}
.ds .ds-label{display:block;font-size:13px;line-height:18px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-label .ds-required{color:var(--ds-brand);margin-left:4px}
.ds .ds-hint{font-size:12px;line-height:16px;font-weight:400;color:var(--ds-ink-muted)}
.ds .ds-error{font-size:12px;line-height:16px;font-weight:500;color:var(--ds-danger)}
/* 1.5.104 (brandbook 3.32): the refusal of an upload - one line a reason; under the buttons of a photo it takes the width
   of the photo block and never widens it (the column of the photo is as wide as its buttons). */
.ds .ds-error[data-upload-error]>span{display:block}
.ds .ds-avatar-edit>.ds-error{align-self:stretch;contain:inline-size;text-align:center}
/* 1.5.129: the refusal of a card over its table of lines (a registration, a special price) keeps the gap of the card from
   the frame of the table under it - it stood at the very frame. */
.ds .ds-card>.ds-error{display:block;margin:0 0 var(--ds-space-3)}
.ds .ds-control{display:block;width:100%;max-width:100%;min-width:0;height:var(--ds-control-h);min-height:0;margin:0;
  padding:0 var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface);
  font:400 14px/21px var(--ds-font);color:var(--ds-ink);outline:none;box-shadow:none;appearance:none;
  transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-control::placeholder{color:var(--ds-ink-faint);opacity:1}
/* 1.5.85: a hint or value longer than its field ends with «…» instead of a cut letter (a register search on a phone). */
.ds input.ds-control{text-overflow:ellipsis}
.ds .ds-control:hover{border-color:var(--ds-line-strong)}
.ds .ds-control:focus{border-color:var(--ds-brand);box-shadow:var(--ds-focus)}
.ds .ds-control[readonly],.ds .ds-control:disabled{background:var(--ds-surface-soft);color:var(--ds-ink-muted);cursor:not-allowed}
.ds .ds-field--invalid .ds-control{border-color:var(--ds-danger)}
/* Numbers (the portal locale-number widget sets inputmode) align right in tabular figures. */
.ds .ds-control:is([type="number"],[inputmode="decimal"],[inputmode="numeric"]){text-align:right;font-variant-numeric:tabular-nums}
.ds textarea.ds-control{height:auto;min-height:96px;padding:10px var(--ds-space-3);resize:vertical}
.ds select.ds-control{padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2368788d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
/* 1.5.79 The open list of a <select> looks like every other pop-up list of the portal (brandbook 3.2, 3.10):
   radius lg, --ds-shadow-2, 6 px inside, options 36 px (44 on phones) with radius md, hover soft, chosen brand-soft.
   Chromium 135+ draws the list from CSS (appearance: base-select); the real <select> stays in the form (keyboard,
   screen readers, form data). Older browsers keep the system list. */
@supports (appearance:base-select){
  .ds select.ds-control:not([multiple]):not([size]),.ds select.ds-control:not([multiple]):not([size])::picker(select){appearance:base-select}
  .ds select.ds-control:not([multiple]):not([size]){display:flex;align-items:center;white-space:nowrap;overflow:clip;overflow-clip-margin:content-box}
  /* 1.5.88: a chosen value longer than its field (an order with its partner on a phone) fades out before the arrow
     instead of ending on a cut letter; app.js marks such a select (data-value-overflows), a value that fits is drawn as
     before. The veil takes the field's own background (hover, disabled, every theme). */
  .ds select.ds-control[data-value-overflows]:not([multiple]):not([size]){position:relative}
  .ds select.ds-control[data-value-overflows]:not([multiple]):not([size])::after{content:"";position:absolute;top:50%;right:35px;width:32px;height:24px;
    transform:translateY(-50%);background-color:inherit;pointer-events:none;
    -webkit-mask-image:linear-gradient(to right,transparent,currentColor);mask-image:linear-gradient(to right,transparent,currentColor)}
  .ds select.ds-control:not([multiple]):not([size])::picker-icon{display:none}
  .ds select.ds-control::picker(select){min-width:anchor-size(width);max-width:min(420px,calc(100vw - 32px));max-height:min(360px,60vh);
    margin:6px 0;padding:6px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);
    box-shadow:var(--ds-shadow-2);color:var(--ds-ink);overflow:auto;position-try-fallbacks:flip-block}
  .ds select.ds-control:open::picker(select){animation:ds-fade-in var(--ds-base) var(--ds-ease)}
  .ds select.ds-control option{display:flex;align-items:center;gap:var(--ds-space-2);min-height:36px;padding:8px 12px;border-radius:var(--ds-radius-md);
    font:500 14px/20px var(--ds-font);color:var(--ds-ink);white-space:normal;cursor:pointer;
    transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
  .ds select.ds-control option+option{margin-top:2px}
  .ds select.ds-control option:is(:hover,:focus-visible){background:var(--ds-surface-soft);outline:none}
  .ds select.ds-control option:checked{background:var(--ds-brand-soft);color:var(--ds-brand)}
  .ds select.ds-control option::checkmark{display:none}
  .ds select.ds-control option:disabled{color:var(--ds-ink-faint);cursor:not-allowed}
  .ds select.ds-control optgroup{padding:0;font:600 12px/16px var(--ds-font);color:var(--ds-ink-muted)}
  .ds select.ds-control optgroup+optgroup{margin-top:var(--ds-space-2)}
}
@media (max-width:720px){.ds select.ds-control option{min-height:44px}}
/* 1.5.154 (brandbook 2.8): a field of the mode of a price wears the colour of the chosen level - its soft background, the line
   of the level for the frame, the ink of the level for the word; the open list shows the mark of the level before each column. */
.ds select.ds-control[data-tier]{border-color:var(--ds-t-line);background-color:color-mix(in srgb,var(--ds-t-sheen) 40%,var(--ds-t-soft));color:var(--ds-t);font-weight:600}
.ds select.ds-control[data-tier]:hover{border-color:var(--ds-t)}
.ds select.ds-control[data-tier]:focus{border-color:var(--ds-t);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-t-line) 45%,transparent)}
.ds select.ds-control option[data-tier]{color:var(--ds-t)}
.ds select.ds-control option[data-tier]::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--ds-t-line) 0%,var(--ds-t) 100%)}
.ds select.ds-control option[data-tier]:checked{background:var(--ds-t-soft);color:var(--ds-t)}
.ds .ds-input-group{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);min-width:0;margin:0;
  font-size:14px;line-height:21px;font-weight:400;color:var(--ds-ink)}
.ds .ds-input-group>.ds-control{flex:1 1 auto;min-width:0}
/* 1.5.86: a search field with its own «×» (the product search of the order builder) takes the free width like a field. */
.ds .ds-input-group>.ds-search{flex:1 1 auto;min-width:0}
/* 1.5.84: buttons keep their size (the same × on every field, text never touching the edges); only the field shrinks. */
.ds .ds-input-group>.ds-btn{flex:0 0 auto}
/* 1.5.86: a decision - a comment and two buttons (the margin of an order card) - wraps like the decisions of the decision
   centre: the field keeps 220 px and the buttons go under it; on a phone the field takes the whole row. */
.ds .ds-input-group--wrap{flex-wrap:wrap}
.ds .ds-input-group--wrap>.ds-control{flex:1 1 220px}
/* 1.5.175: the field of a company in a wrapping group («Привязать к компании» of a sheet of a client) - as a field. */
.ds .ds-input-group--wrap>.ds-combobox{flex:1 1 220px;min-width:0}
@media (max-width:720px){.ds .ds-input-group--wrap>.ds-control,.ds .ds-input-group--wrap>.ds-combobox{flex-basis:100%}}
.ds .ds-check{display:inline-flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);margin:0;
  font-size:14px;line-height:21px;font-weight:400;color:var(--ds-ink);cursor:pointer}
/* Checkbox and radio: one drawn control everywhere (not the browser default). The corner of a checkbox, like every small
   corner below the radii of the brandbook, follows them (1.5.100: 5 px in Summit, square in a theme of square corners). */
.ds input[type="checkbox"],.ds input[type="radio"]{appearance:none;display:inline-grid;place-content:center;flex:0 0 16px;
  width:16px;height:16px;min-width:16px;min-height:0;max-width:16px;margin:0;padding:0;border:1.5px solid var(--ds-line-strong);
  border-radius:calc(var(--ds-radius-sm) - 3px);background:var(--ds-surface);color:var(--ds-ink);font:400 14px/1 var(--ds-font);accent-color:var(--ds-brand);box-shadow:none;cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds input[type="radio"]{border-radius:50%}
.ds input[type="checkbox"]:hover,.ds input[type="radio"]:hover{border-color:var(--ds-brand)}
.ds input[type="checkbox"]:checked{border-color:var(--ds-brand);
  background:var(--ds-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/12px no-repeat}
.ds input[type="radio"]:checked{border-color:var(--ds-brand);box-shadow:inset 0 0 0 3.5px var(--ds-surface);background:var(--ds-brand)}
.ds input[type="checkbox"]:focus-visible,.ds input[type="radio"]:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds input[type="checkbox"]:disabled,.ds input[type="radio"]:disabled{opacity:.5;cursor:not-allowed}

/* Toggle switch: label.ds-switch > input + .ds-switch__track + .ds-switch__text. The knob is round on a round track and
   square on a square one (1.5.100: a theme of square corners). */
.ds .ds-switch{display:inline-flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);margin:0;cursor:pointer;
  font-size:14px;line-height:21px;font-weight:500;color:var(--ds-ink)}
.ds .ds-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ds .ds-switch__track{position:relative;flex:0 0 36px;width:36px;height:20px;border-radius:var(--ds-radius-pill);background:var(--ds-line-strong);
  transition:background-color var(--ds-base) var(--ds-ease)}
.ds .ds-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:min(50%,var(--ds-radius-pill));background:var(--ds-on-color);
  box-shadow:var(--ds-shadow-knob);transition:transform var(--ds-base) var(--ds-ease)}
.ds .ds-switch input:checked+.ds-switch__track{background:var(--ds-brand)}
.ds .ds-switch input:checked+.ds-switch__track::after{transform:translateX(16px)}
.ds .ds-switch input:focus-visible+.ds-switch__track{box-shadow:var(--ds-focus)}
.ds .ds-switch input:disabled+.ds-switch__track{opacity:.5}

/* Multi-select chips: .ds-chips > label.ds-chip > input + span */
.ds .ds-chips{display:flex;flex-wrap:wrap;gap:var(--ds-space-2)}
.ds .ds-chip{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:0;margin:0;cursor:pointer;
  font-size:13px;line-height:18px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-chip input{position:absolute;opacity:0;pointer-events:none}
.ds .ds-chip span{display:inline-flex;align-items:center;height:32px;padding:0 var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-pill);background:var(--ds-surface);font-size:13px;font-weight:500;color:var(--ds-ink-muted);
  transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-chip:hover span{border-color:var(--ds-line-strong);color:var(--ds-ink)}
.ds .ds-chip input:checked+span{background:var(--ds-brand-soft);border-color:color-mix(in srgb,var(--ds-brand) 35%,var(--ds-line));color:var(--ds-brand)}
.ds .ds-chip input:focus-visible+span{box-shadow:var(--ds-focus)}
.ds .ds-chip input:disabled+span{opacity:.5;cursor:not-allowed}

/* Option cards (checkbox with title and hint): .ds-options > label.ds-option */
.ds .ds-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--ds-space-3)}
.ds .ds-option{display:flex;flex-direction:row;align-items:flex-start;gap:var(--ds-space-3);margin:0;padding:var(--ds-space-3) var(--ds-space-4);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface);cursor:pointer;
  font-size:14px;font-weight:400;color:var(--ds-ink);transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-option:hover{border-color:var(--ds-line-strong)}
.ds .ds-option:has(input:checked){border-color:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line));background:var(--ds-brand-soft)}
.ds .ds-option input{margin-top:2px}
.ds .ds-option__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .ds-option__body b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-option__body small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}

/* 5. Cards, page head, record ------------------------------------------ */
.ds .ds-card{display:block;margin:0;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-1);padding:var(--ds-space-6);min-width:0}
.ds .ds-card+.ds-card{margin-top:var(--ds-space-4)}
/* In a stack the stack gap is the card spacing; no doubled margin. */
.ds .ds-stack>:is(.ds-card,.ds-item)+:is(.ds-card,.ds-item){margin-top:0}
.ds .ds-card__head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ds-space-3);margin:0 0 var(--ds-space-4)}
.ds .ds-card__head p{margin-top:2px;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
/* 1.5.212 (brandbook 3.106): a service card keeps its information but gives no room to decorative emptiness. */
.ds .ds-card--compact{padding:var(--ds-space-4)}
.ds .ds-card--compact>.ds-card__head{margin-bottom:var(--ds-space-3)}
.ds .ds-card__line{margin:var(--ds-space-3) 0 0;font-size:13px;line-height:18px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-subsection{margin-top:var(--ds-space-6);padding-top:var(--ds-space-5);border-top:1px solid var(--ds-line-soft)}
.ds .ds-subsection__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);margin-bottom:var(--ds-space-3)}
/* 1.5.84: the heading wraps, a head button keeps its size (its words never touch the edges). */
.ds :is(.ds-card__head,.ds-subsection__head)>.ds-btn{flex:0 0 auto}
/* The first subsection right under a card head needs no divider of its own. */
.ds .ds-card__head+.ds-subsection{margin-top:0;padding-top:0;border-top:0}
.ds .ds-page-head{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--ds-space-4);margin:0 0 var(--ds-space-5)}
.ds .ds-page-head__title{min-width:0}
.ds .ds-crumbs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
/* 1.5.154 (brandbook 2.8): the mark of the area of the page before its path; a phone has none - the margin of its page is too narrow
   to hang it, and in the line it moved a long path to a second line. */
.ds .ds-crumbs::before{content:"";flex:0 0 auto;align-self:center;width:8px;height:8px;margin-right:2px;border-radius:50%;background:var(--ds-page-area)}
.ds .ds-crumbs a{color:var(--ds-ink-muted)}
.ds .ds-crumbs a:hover{color:var(--ds-brand)}
.ds .ds-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-3);margin-top:var(--ds-space-2);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
/* 1.5.246 (3.128): a small form of the meta line - a state badge and its ghost button side by side («Сообщать мне о новых прайсах») */
.ds .ds-meta__form{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2);margin:0}
.ds .ds-actions{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);flex-wrap:wrap}
.ds .ds-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-5) var(--ds-space-6);margin:0}
.ds .ds-dl--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 1.5.222 (brandbook 3.104): four figures in a row - «Всего в отчёте» of the sell-through overview. */
.ds .ds-dl--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ds .ds-dl>div{min-width:0}
.ds .ds-dl>.ds-dl__wide{grid-column:1/-1}
/* 1.5.215: a text written in lines (the description of a model of the SOHO list: the name, «Скорость:», «Спецификация:»,
   «Особенности:») keeps its lines. */
.ds .ds-text-lines{white-space:pre-line}
.ds .ds-dl dt{margin:0 0 4px;font-size:13px;line-height:18px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-dl dd{margin:0;font-size:14px;line-height:21px;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-dl dd:empty::before,.ds .ds-empty-value::before{content:"—";color:var(--ds-ink-faint)}
/* Multi-line text of a record (request brief, conclusion, notes; 1.5.84): the author's line breaks stay. */
.ds .ds-dl dd.ds-dl__text{white-space:pre-line}
/* Pairs on soft tiles (product logistics and specifications, brandbook 3.11): like .ds-stat, they lift on hover. */
.ds .ds-dl--tiles{gap:var(--ds-space-3)}
.ds .ds-dl--tiles>div{padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-dl--tiles dt{margin-bottom:2px;font-size:12px;line-height:16px}
.ds .ds-dl--dense{gap:var(--ds-space-2)}
.ds .ds-dl--dense>div{padding:var(--ds-space-2) var(--ds-space-3)}
.ds .ds-actionbar{position:sticky;bottom:calc(var(--ds-shell-bottom) + var(--ds-space-3));z-index:20;display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:var(--ds-space-3);margin:var(--ds-space-4) 0 0;padding:var(--ds-space-3) var(--ds-space-4);
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-2)}

/* Avatar with photo actions: .ds-avatar-edit */
.ds .ds-avatar{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;overflow:hidden;
  background:var(--ds-brand-soft);color:var(--ds-brand);font-size:34px;font-weight:600;flex:0 0 auto}
.ds .ds-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ds .ds-avatar-edit{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-3)}
.ds .ds-media-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ds-space-6);align-items:start}

/* Entity chip (link to a related record) */
.ds .ds-entity{display:inline-flex;flex-direction:column;gap:2px;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);color:var(--ds-ink);min-width:0;
  transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-entity:hover{border-color:var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-ink)}
.ds .ds-entity b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-entity small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
/* 1.5.184 (brandbook 3.84): «Чат портала · Написать» - the first way to reach a person on his card; the words of the action in the colour of a link. */
.ds .ds-entity--chat b{display:inline-flex;align-items:center;gap:var(--ds-space-1);color:var(--ds-brand)}
.ds .ds-entity--chat b svg{width:16px;height:16px;flex:0 0 auto}
.ds .ds-entity--chat:hover b{color:var(--ds-brand)}
/* 1.5.154 (brandbook 2.8): a step of a chain and a company of a hierarchy name their kind in its tone, a soft line of it under the chip. */
.ds .ds-entity[data-company-type]{border-bottom-color:var(--ds-k-line,var(--ds-line))}
.ds .ds-entity[data-company-type] small{color:var(--ds-k,var(--ds-ink-muted));font-weight:600}

/* Disclosure: details.ds-disclosure > summary */
.ds .ds-disclosure{margin-top:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface)}
.ds .ds-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);height:44px;padding:0 var(--ds-space-4);
  cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--ds-ink);border-radius:var(--ds-radius-md);
  transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-disclosure>summary::-webkit-details-marker{display:none}
.ds .ds-disclosure>summary:hover{background:var(--ds-surface-soft)}
.ds .ds-disclosure>summary::after{content:"";width:16px;height:16px;flex:0 0 16px;margin-left:auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2368788d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform var(--ds-base) var(--ds-ease)}
.ds .ds-disclosure[open]>summary::after{transform:rotate(180deg)}
.ds .ds-disclosure__body{padding:0 var(--ds-space-4) var(--ds-space-4)}
/* Inside a field grid the grid gap already separates the disclosure. */
.ds .ds-field-grid>.ds-disclosure{margin-top:0}
/* 1.5.116 (brandbook 3.40): groups that open, one under another (the board of the head of sales) - 8 px apart in a ds-stack
   (only the groups: a disclosure of any other stack keeps its own 16 px); the summary is the name of the group with its count
   and, under it, a line of what the group sums (13 muted). */
.ds .ds-stack>.ds-disclosure--group{margin-top:0}
.ds .ds-disclosure--group>summary{height:auto;min-height:56px;padding:var(--ds-space-2) var(--ds-space-4)}
.ds .ds-disclosure__title{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .ds-disclosure__title small{font-size:13px;line-height:18px;font-weight:400;color:var(--ds-ink-muted)}

/* Repeatable item inside a card (commercial profile, address, line): .ds-item */
/* 1.5.154 (brandbook 2.8): an inner block takes a touch of the colour of the area of its page - it stands apart from the card around it. */
.ds .ds-item{margin:0;padding:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:color-mix(in srgb,var(--ds-page-area) 3%,var(--ds-surface-soft))}
.ds .ds-item+.ds-item{margin-top:var(--ds-space-3)}
.ds .ds-item__head{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-3);margin:0 0 var(--ds-space-3)}
.ds .ds-item__head>b{flex:1 1 auto;font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-item__num{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 6px;border-radius:var(--ds-radius-sm);
  background:var(--ds-surface);border:1px solid var(--ds-line);font-size:12px;font-weight:600;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-list-empty{padding:var(--ds-space-3) 0;font-size:13px;color:var(--ds-ink-muted)}

/* Danger zone: a closed disclosure at the very end of an edit page */
.ds .ds-danger-zone{margin-top:var(--ds-space-6);border-color:color-mix(in srgb,var(--ds-danger) 25%,var(--ds-line))}
.ds .ds-danger-zone>summary{color:var(--ds-danger)}

/* Dialog: dialog.ds-dialog > .ds-dialog__head + body + .ds-dialog__actions */
.ds .ds-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);margin:auto;padding:var(--ds-space-6);
  border:0;border-radius:var(--ds-radius-lg);background:var(--ds-surface);color:var(--ds-ink);box-shadow:var(--ds-shadow-3);overflow:auto;overscroll-behavior:contain}
.ds .ds-dialog::backdrop{background:var(--ds-backdrop);backdrop-filter:blur(2px)}
.ds .ds-dialog[open]{animation:ds-dialog-in var(--ds-slow) var(--ds-ease)}
.ds .ds-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-3);margin-bottom:var(--ds-space-3)}
/* 1.5.97 A name in the question of a dialog (a file, a view) moves to the next line whole and breaks only where it does not
   fit a line - the title never leaves the dialog. */
.ds .ds-dialog__head h2{min-width:0;overflow-wrap:anywhere}
.ds .ds-dialog p{font-size:14px;line-height:21px;color:var(--ds-ink-muted)}
.ds .ds-dialog__actions{display:flex;justify-content:flex-end;gap:var(--ds-space-2);margin-top:var(--ds-space-5)}
.ds .ds-dialog--analysis{width:min(1180px,calc(100vw - 32px))}
.ds .ds-table-scroll--analysis{max-height:min(56vh,580px)}
.ds .ds-run-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-2);margin-bottom:var(--ds-space-3)}
.ds .ds-run-summary>.ds-stat{padding:var(--ds-space-2) var(--ds-space-3)}
.ds .ds-run-summary .ds-stat__value{font-size:18px;line-height:24px}
@media (max-width:720px){.ds .ds-run-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 1.5.134: a dialog taller than the screen scrolls inside (1.5.103) and its buttons stay on the screen at its bottom edge - the
   fields pass under them (the surface around the buttons covers them; a dialog that fits the screen looks as before). The dialog
   of a quick company with its type on a phone is the first one taller than the screen. 1.5.136: the inset of a sticky box is
   counted from the inner edge of the dialog (its padding is not the room to stick in) - with 16 px the buttons of every dialog
   stood 16 px above their place and covered the bottom of the field above them; 0 keeps them where they stand, and the surface
   below them covers the padding of a dialog that scrolls. */
.ds .ds-dialog__actions{position:sticky;bottom:0;z-index:2;background:var(--ds-surface);
  box-shadow:0 calc(-1 * var(--ds-space-3)) 0 var(--ds-surface),0 var(--ds-space-6) 0 var(--ds-surface)}
.ds .ds-stack>:is(.ds-dialog__head,.ds-dialog__actions,.ds-link-list){margin:0}
.ds .ds-link-list{display:flex;flex-direction:column;gap:var(--ds-space-2);margin-top:var(--ds-space-4)}
.ds .ds-link-list a{display:flex;flex-direction:column;gap:2px;padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  color:var(--ds-ink);transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-link-list a:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-soft);color:var(--ds-ink)}
.ds .ds-link-list b{font-size:14px;font-weight:600;color:var(--ds-ink)}
.ds .ds-link-list :is(span,small){font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
@keyframes ds-dialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* Dropdown menu: details.ds-menu > summary.ds-btn + .ds-menu__list > .ds-menu__item */
.ds .ds-menu{position:relative;display:inline-block}
.ds .ds-menu>summary{list-style:none}
.ds .ds-menu>summary::-webkit-details-marker{display:none}
.ds .ds-menu__list{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:flex;flex-direction:column;gap:2px;
  min-width:240px;max-width:min(360px,calc(100vw - 32px));padding:6px;background:var(--ds-surface);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-2);animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-menu--start .ds-menu__list{right:auto;left:0}
/* 1.5.104: a list that would leave the window is moved back inside by app.js (16 px from its edge; brandbook 3, «Меню действий»). */
.ds .ds-menu__list[data-menu-shift]{translate:var(--ds-menu-shift) 0}
/* 1.5.104: an open menu near the end of a page on a phone - its last row («Импорт» of the import of reviews) stayed under the
   bar of the shell, the page could not be scrolled further; an invisible strip under the menu, as tall as the bar, lets the
   page bring it up (the bar is 0 px on a computer). */
.ds .ds-menu:not(.ds-menu--up)>.ds-menu__list::after{content:"";position:absolute;top:100%;left:0;width:1px;height:var(--ds-shell-bottom);pointer-events:none}
.ds .ds-menu__item{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;width:100%;min-height:36px;margin:0;
  padding:8px 12px;border:0;border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;cursor:pointer;
  font:500 14px/20px var(--ds-font);color:var(--ds-ink);text-align:left;text-decoration:none;text-transform:none;white-space:normal;
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-menu__item:hover,.ds .ds-menu__item:focus-visible{background:var(--ds-surface-soft);color:var(--ds-ink);outline:none}
/* 1.5.168: a choice that cannot be taken now (a role of «Смотреть портал как» nobody works in) - quiet, its line says why. */
.ds .ds-menu__item:disabled,.ds .ds-menu__item:disabled:hover{opacity:.5;cursor:not-allowed;background:transparent}
.ds .ds-sheet__tile:disabled{opacity:.5;cursor:not-allowed}
.ds .ds-menu__item small{font-size:12px;line-height:16px;font-weight:400;color:var(--ds-ink-muted)}
.ds .ds-menu__item--danger{color:var(--ds-danger)}
.ds .ds-menu__item--danger:hover,.ds .ds-menu__item--danger:focus-visible{background:var(--ds-danger-soft);color:var(--ds-danger)}
/* 1.5.154 (brandbook 3.67): «Выдать на все» - each level of a price as the pill of its colour on the left, the number of lines that
   have its column on the right; «По ценовому уровню» under a line; no column in the lines - a quiet sentence. */
.ds .ds-menu__list--tiers{min-width:256px}
.ds .ds-menu__item--tier{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ds-space-3)}
.ds .ds-menu__item--tier small{flex:0 0 auto;font-variant-numeric:tabular-nums}
.ds .ds-menu__empty{margin:0;padding:8px 12px;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-card>[data-give-all-note]{margin:0 0 var(--ds-space-4)}

/* Search with suggestions: .ds-combobox > .ds-input-group + .ds-combobox__results > .ds-combobox__option */
/* 1.5.225: an open list of a field stands over the bar of the actions of a form (z 20): the field of a person at the end of a form opened under «Отмена / Создать». */
.ds .ds-combobox{position:relative;display:flex;flex-direction:column;gap:var(--ds-space-2);min-width:0}
.ds .ds-combobox__results{position:absolute;top:calc(var(--ds-combobox-field,var(--ds-control-h)) + 4px);left:0;right:0;z-index:25;display:flex;flex-direction:column;gap:2px;
  max-height:320px;overflow:auto;padding:6px;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-2);animation:ds-fade-in var(--ds-base) var(--ds-ease)}
/* 1.5.168: in a dialog the list of a field stands in the flow under the field - the dialog grows and scrolls inside, the dialog
   never cuts the list off (the field of a person of «Смотреть портал как»). */
.ds .ds-dialog .ds-combobox__results{position:static;max-height:240px}
.ds .ds-combobox__option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0;padding:8px 12px;border:0;
  border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;cursor:pointer;text-align:left;font:400 13px/18px var(--ds-font);
  color:var(--ds-ink-muted);transition:background-color var(--ds-fast) var(--ds-ease);min-height:auto;justify-content:normal}
.ds .ds-combobox__option:hover,.ds .ds-combobox__option:focus-visible{background:var(--ds-surface-soft);outline:none}
.ds .ds-combobox__option b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-combobox__option :is(span,small){font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-combobox__status{padding:8px 12px;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-combobox__status--error{color:var(--ds-danger)}
/* 1.5.84 While a search runs, "Ищем…" carries the pulsing dot of the register search (the old spinner, brandbook 2.6). */
.ds .ds-combobox__status--loading{display:flex;align-items:center;gap:var(--ds-space-2)}
.ds .ds-combobox__status--loading::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--ds-brand);
  animation:ds-pulse 900ms var(--ds-ease) infinite alternate}
/* The list opens 4 px under a field of any height: a small field (matrix rows) and the 44 px phone field. */
.ds .ds-combobox:has(.ds-control--sm){--ds-combobox-field:var(--ds-control-h-sm)}
/* A search field inside a combobox has its own clear button: the browser's built-in one is hidden. */
.ds .ds-control[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Keyboard highlight of a suggestion (arrow keys) and an invalid combobox field (1.5.81, project form). */
.ds .ds-combobox__option[aria-selected="true"]{background:var(--ds-brand-soft)}
.ds .ds-combobox__option[aria-selected="true"] b{color:var(--ds-brand)}
/* 1.5.179 (brandbook 3.78): a company found that cannot stand in the field - shown with its reason, not chosen. */
.ds .ds-combobox__option:disabled{cursor:default;opacity:.62}
.ds .ds-combobox__option:disabled:hover{background:transparent}
.ds .ds-field--invalid .ds-combobox .ds-control,.ds .ds-combobox.ds-field--invalid .ds-control{border-color:var(--ds-danger)}
/* A small secondary action under a field: left-aligned, never full width. */
/* 1.5.119 (the owner, 11.10.2026: «неочевидно, что компания уже вставлена и выбрана, кажется, что это просто текст»;
   brandbook 3.9): the chosen record of every picker is a plaque in the place of its field - the soft brand of a chosen
   item, a round mark «✓», the name 14/600 and its line 12 muted; at the right «Открыть карточку» (↗) and «×» (clear). A
   click on the name changes the choice (the field comes back with the name selected). app.js B2B_PICKED builds it. */
.ds .ds-combobox[data-picked]>.ds-input-group{display:none}
.ds .ds-combobox:not([data-picked])>.ds-combobox__picked{display:none}
.ds .ds-combobox__picked{display:flex;align-items:center;gap:var(--ds-space-2);min-width:0;min-height:var(--ds-control-h);padding:3px 3px 3px var(--ds-space-3);
  border:1px solid color-mix(in srgb,var(--ds-brand) 35%,var(--ds-line));border-radius:var(--ds-radius-md);background:var(--ds-brand-soft);
  animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-combobox__mark{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-combobox__mark svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ds .ds-combobox__choice{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1 1 auto;gap:0;min-width:0;min-height:0;margin:0;padding:2px 0;
  border:0;border-radius:var(--ds-radius-sm);background:transparent;box-shadow:none;cursor:pointer;text-align:left;font:inherit;color:var(--ds-ink)}
.ds .ds-combobox__choice b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:break-word;transition:color var(--ds-fast) var(--ds-ease)}
.ds .ds-combobox__choice small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:break-word}
.ds .ds-combobox__choice:hover b{color:var(--ds-brand)}
.ds .ds-combobox__choice:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-combobox__picked>.ds-btn{flex:0 0 auto}
.ds .ds-combobox__picked svg{width:16px;height:16px}
.ds .ds-combobox:has(.ds-control--sm)>.ds-combobox__picked{min-height:var(--ds-control-h-sm);padding:1px 1px 1px var(--ds-space-2)}
.ds .ds-combobox:has(.ds-control--sm) .ds-combobox__choice small{display:none}
/* «Создать …» - the last variant of the list (brandbook 3.9): a line above, the name of the action in the colour of a link. */
/* 1.5.134 (brandbook 3.55): the open list of a field is brought into view above the action bar of the form (app.js, reveal); it
   is the page's content - scrolled, it goes under the sticky action bar and the strip of sections (z-index 15 < 20), as the cards do. */
.ds [data-company-picker-results],.ds [data-model-picker-results]{scroll-margin-top:var(--ds-space-4);scroll-margin-bottom:calc(var(--ds-shell-bottom,0px) + 96px)}
/* 1.5.134 (brandbook 3.55): the chosen company of a filter is one line - the plaque keeps the height of the filters beside it. */
.ds .ds-combobox[data-company-picker-filter] .ds-combobox__choice small{display:none}
.ds .ds-combobox__option--create{margin-top:2px;border-top:1px solid var(--ds-line-soft);border-radius:0 0 var(--ds-radius-md) var(--ds-radius-md)}
.ds .ds-combobox__option--create b{color:var(--ds-brand)}
/* 1.5.219 (brandbook 3.55): the field of a person - «Создать участника» is the first line and never moves (sticky in the list that
   loads 30 people at a time as it scrolls). */
.ds .ds-combobox__option--top{position:sticky;top:-6px;z-index:1;margin:-6px -6px 2px;padding-top:12px;border-top:0;border-bottom:1px solid var(--ds-line-soft);
  border-radius:var(--ds-radius-lg) var(--ds-radius-lg) 0 0;background:var(--ds-surface);text-decoration:none}
.ds [data-person-picker-results]{scroll-margin-top:var(--ds-space-4);scroll-margin-bottom:calc(var(--ds-shell-bottom,0px) + 96px)}
/* 1.5.121 (brandbook 3.43): a picker of several records (the people and the companies of an interaction, our side) - its field
   stays for the next one, the chosen ones are the plaques of 3.9 in a column under it; «×» of a plaque takes it out, «↗» opens
   the card. The name of such a plaque is not a button (nothing to change - another record is one more plaque). The mark of a
   kind of interaction - the 32 px square of the marks of the search panel in the colour of the brand. */
.ds .ds-picklist{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}
.ds .ds-picklist:empty{display:none}
.ds .ds-picklist .ds-combobox__choice{cursor:default}
.ds .ds-picklist .ds-combobox__choice:hover b{color:var(--ds-ink)}
.ds .ds-interaction-mark{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--ds-radius-sm);
  background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-interaction-mark .ds-icon{width:18px;height:18px}
/* A short explanatory note opened from an "i" button (price source). */
/* A menu entry with its own small action (saved view + delete). */
.ds .ds-menu__row{display:flex;align-items:center;gap:var(--ds-space-1)}
.ds .ds-menu__row>.ds-menu__item{flex:1 1 auto;min-width:0}
.ds .ds-menu__row>form{margin:0}
.ds .ds-menu__list--note{width:min(300px,calc(100vw - 32px));padding:var(--ds-space-3);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}

/* Line items of a form (project equipment, 1.5.81; brandbook 3.12): a head row, editable rows, totals.
   Columns: product (grows), quantity, price mode, unit price, line total, remove. On phones every row is a card. */
.ds .ds-lines{display:flex;flex-direction:column;gap:var(--ds-space-2);min-width:0}
.ds .ds-lines__head,.ds .ds-lines__row{display:grid;grid-template-columns:minmax(200px,1fr) 104px 208px 168px 120px 32px;align-items:center;gap:var(--ds-space-3)}
.ds .ds-lines__head{padding:0 var(--ds-space-3);font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-lines__head>span:nth-child(n+2):nth-child(-n+5){text-align:right}
.ds .ds-lines__head>span:nth-child(3){text-align:left}
.ds .ds-lines__body{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-lines__row{padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-lines__cell{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;font-size:14px;line-height:21px;font-weight:400;color:var(--ds-ink)}
.ds .ds-lines__caption{display:none}
.ds .ds-lines__total{align-items:flex-end;text-align:right;font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds .ds-lines__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--ds-space-2) var(--ds-space-6);padding:var(--ds-space-2) var(--ds-space-3) 0;
  font-size:13px;line-height:18px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-lines__foot b{color:var(--ds-ink);font-weight:600}
/* 1.5.135: the lines of a project of a company (its cabinet; brandbook 3.56) - the product and the quantity, the prices are the vendor's. */
@media (min-width:1101px){
  .ds .ds-lines--quantity .ds-lines__head,.ds .ds-lines--quantity .ds-lines__row{grid-template-columns:minmax(200px,1fr) 136px 32px}
}
@media (max-width:1100px){
  .ds .ds-lines__head{display:none}
  .ds .ds-lines__row{grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;padding:var(--ds-space-3)}
  .ds .ds-lines__row>.ds-combobox{grid-column:1/-1}
  .ds .ds-lines__caption{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
}
/* 1.5.153 (the owner, 17.10.2026: «проверь во всех разделах … на ноутбуках и других экранах»): the five columns beside the product
   need 718 px and the field of the product at least 160 px (its column 210) - a frame narrower than 940 px takes the layout of a
   tablet whatever the window (at 1101 px, a laptop at 110 % or a window not full, the line was 50 px wider than the card and pushed
   the page sideways; at 1180 px the field of the product kept 150 px). The same specificity as the rules of the window: a phone
   still wins below. */
.ds .ds-lines{container:ds-lines / inline-size}
@container ds-lines (max-width:939px){
  .ds :where(.ds-lines:not(.ds-lines--quantity)) .ds-lines__head{display:none}
  .ds :where(.ds-lines:not(.ds-lines--quantity)) .ds-lines__row{grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;padding:var(--ds-space-3)}
  .ds :where(.ds-lines:not(.ds-lines--quantity)) .ds-lines__row>.ds-combobox{grid-column:1/-1}
  .ds :where(.ds-lines:not(.ds-lines--quantity)) .ds-lines__caption{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
}
@media (max-width:720px){
  .ds .ds-lines__row{grid-template-columns:minmax(0,1fr) auto}
  .ds .ds-lines__row>.ds-lines__cell{grid-column:1/-1}
  .ds .ds-lines__row>.ds-lines__total{grid-column:1;align-items:flex-start;text-align:left}
  .ds .ds-lines__foot{justify-content:flex-start}
}
/* 1.5.217: a participant of a new project - the person, the role and «×» (brandbook 3.12). */
.ds .ds-lines--people .ds-lines__head,.ds .ds-lines--people .ds-lines__row{grid-template-columns:minmax(220px,1fr) minmax(160px,260px) 32px}
.ds .ds-lines--people .ds-lines__head>span:nth-child(2){text-align:left}
@media (max-width:720px){
  .ds .ds-lines--people .ds-lines__row{grid-template-columns:minmax(0,1fr) auto}
  .ds .ds-lines--people .ds-lines__row>.ds-lines__cell{grid-column:1}
}
/* 1.5.135: a line of the quantity only on a tablet and a phone - the product over the whole line, the quantity and «×» beside it on the next
   (the «×» of a line of prices shares its row with the total; without the total it stood alone under the quantity). */
@media (max-width:1100px){
  .ds .ds-lines--quantity .ds-lines__row{grid-template-columns:minmax(0,1fr) auto}
  .ds .ds-lines--quantity .ds-lines__row>.ds-lines__cell{grid-column:1}
}

/* Read-only list of related records: .ds-list > .ds-list__item (.ds-list__main + .ds-list__side) */
.ds .ds-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;min-width:0}
.ds .ds-list__item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ds-space-3) var(--ds-space-4);
  min-width:0;margin:0;padding:var(--ds-space-3) 0;border-top:1px solid var(--ds-line-soft);color:var(--ds-ink)}
.ds .ds-list__item:first-child{padding-top:0;border-top:0}
.ds .ds-list__item:last-child{padding-bottom:0}
.ds .ds-list__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .ds-list__title{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds a.ds-list__title:hover,.ds a.ds-list__item:hover .ds-list__title{color:var(--ds-brand)}
/* 1.5.85: a meta row flows like text. Its items are its children; the «·» between them is drawn here, after an item and
   glued to its last word by a word joiner (U+2060), so a wrapped row never starts a line with a separator. Templates
   write no <span>·</span>. */
.ds .ds-list__meta{display:block;font-size:13px;line-height:18px;color:var(--ds-ink-muted);overflow-wrap:break-word}
.ds .ds-list__meta>:not(:last-child)::after{content:"\2060·\0020";margin-left:var(--ds-space-2);color:var(--ds-ink-muted);white-space:normal;word-spacing:4px}
/* 1.5.138: an item kept on one line (ds-nowrap) keeps its «·» as well: at the end of a nowrap run Chromium broke before the
   dot in spite of the word joiner (the codes of a product card on a phone: «EAN 6935364000011» / «· ТН ВЭД …»). Its dot is
   drawn without a break; the space after it opens the next item, and the row wraps there. The 4 px of the gap are the
   margin of the dot: the word spacing of that space is not applied (the gap was 4 px narrower than in every other row). */
.ds .ds-list__meta>.ds-nowrap:not(:last-child)::after{content:"\2060·";white-space:nowrap;margin-right:4px}
.ds .ds-list__meta>.ds-nowrap:not(:last-child)+:not(.ds-empty-value)::before{content:"\0020";white-space:normal}
.ds .ds-list__side{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);max-width:100%}
/* 1.5.86: the text of a list entry (an order comment): the author's line breaks stay, long words wrap. */
.ds .ds-list__text{margin-top:2px;font-size:14px;line-height:21px;color:var(--ds-ink);white-space:pre-line;overflow-wrap:break-word}
/* 1.5.85: the text of a row keeps at least 240 px. When the side (a decision form with its buttons) does not fit beside
   it, the side goes under the text - before, the text was squeezed into a column of single letters and the side left the
   card (a price change request on a 760 px screen). Phones already put the side under the text. */
@media (min-width:721px){
  .ds .ds-list__item{flex-wrap:wrap}
  .ds .ds-list__item>:is(.ds-list__main,.ds-list__lead){flex:1 1 240px}
  .ds .ds-list--compact .ds-list__item{flex-wrap:nowrap}
}

/* Key figures: .ds-stats > .ds-stat (label, value, hint); a.ds-stat is a link */
.ds .ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--ds-space-3)}
/* 1.5.154 (brandbook 2.8): a tile glows softly with the colour of the area of its page from its top left corner, its frame takes a
   touch of it and its label a dark tone of it (5:1 at least on the glow); a tile of a state, a level or the current price keeps its own. */
.ds .ds-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--ds-space-3) var(--ds-space-4);
  border:1px solid var(--ds-line);border-color:color-mix(in srgb,var(--ds-page-area) 20%,var(--ds-line));border-radius:var(--ds-radius-md);
  background:radial-gradient(130% 150% at 0% 0%,color-mix(in srgb,var(--ds-page-area) 12%,var(--ds-surface)) 0%,var(--ds-surface) 58%);
  color:var(--ds-ink);--ds-stat-label:color-mix(in srgb,var(--ds-page-area) 55%,var(--ds-ink));
  transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds a.ds-stat:hover{border-color:color-mix(in srgb,var(--ds-page-area) 45%,var(--ds-line));color:var(--ds-ink)}
.ds .ds-stat__label{font-size:12px;line-height:16px;font-weight:500;color:var(--ds-stat-label,var(--ds-ink-muted))}
.ds .ds-stat__value{font-size:22px;line-height:28px;font-weight:700;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds .ds-stat__hint{font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
/* 1.5.98: a phrase that moves to the next line whole and breaks inside (at its spaces) only when it does not fit a line of its
   own - the parts of the hint of a logistics tile («1 отгрузка за 14 дней ·» / «2 отгрузки за 30 дней»; on 360 px also
   «1 отгрузка» / «за 14 дней ·»). */
.ds .ds-unit{display:inline-block;max-width:100%}
/* Rows of sums (1.5.84): around 1100 px a tile is narrower than «7 394 700,00», so the values of such a row follow the
   tile width there (all tiles of the row alike, never above 22 px); wider tiles and phones keep 22 px. */
.ds .ds-stats--sums>.ds-stat{container-type:inline-size}
.ds .ds-stats--sums .ds-stat__value:not(.ds-stat__value--text){font-size:clamp(16px,15.2cqi,22px)}
/* 1.5.172 (the owner, 20.10.2026: «умести на 100 % монитора всё в один ряд и сделай так же гибким»): the ladder of the prices of a
   product - one tile per column, its second currency a line of the tile; the tiles stand in one row while each is at least 96 px
   (the five columns of a Consumer model in the card at 1440, eight of SMB on a wide monitor) and wrap where they do not; the
   figure follows the width of its tile. */
.ds .ds-stats--ladder{grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));gap:var(--ds-space-2)}
.ds .ds-stats--ladder>.ds-stat{padding:var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-3)}
/* the name of a column on one line; the figure never breaks (its groups are held by no-break spaces) and follows the width of
   the tile down to 16 px - a four-figure price whose currency does not fit puts «USD» under the figure, never past the frame;
   the second currency and the reason of a missing price are quiet lines under it that wrap; a name never ends in «…» (no
   ellipsis in a tile - brandbook 3.7) */
.ds .ds-stats--ladder .ds-stat__label{font-size:clamp(11px,13cqi,12px);white-space:nowrap}
.ds .ds-stats--ladder .ds-stat__value:not(.ds-stat__value--text){font-size:clamp(16px,19cqi,22px)}
.ds .ds-stats--ladder .ds-stat__of{font-size:11px;white-space:nowrap}
.ds .ds-stats--ladder .ds-stat__hint{font-size:11px}
/* 1.5.172: a row that cannot hold every tile breaks evenly - five tiles 3 + 2, eight 4 + 4, never 4 + 1 (the laptop of 1280 px);
   the card holding the ladder is its container, a tile is at least 95 px with its gap. */
.ds :has(>.ds-stats--ladder){container-type:inline-size}
.ds .ds-stats--ladder:is([data-price-count="4"],[data-price-count="5"],[data-price-count="6"],[data-price-count="7"],[data-price-count="8"]){grid-template-columns:repeat(var(--ds-ladder-cols),minmax(0,1fr))}
.ds .ds-stats--ladder[data-price-count="4"]{--ds-ladder-cols:4}
.ds .ds-stats--ladder[data-price-count="5"]{--ds-ladder-cols:5}
.ds .ds-stats--ladder[data-price-count="6"]{--ds-ladder-cols:6}
.ds .ds-stats--ladder[data-price-count="7"]{--ds-ladder-cols:7}
.ds .ds-stats--ladder[data-price-count="8"]{--ds-ladder-cols:8}
@container (max-width:815px){.ds .ds-stats--ladder:is([data-price-count="7"],[data-price-count="8"]){--ds-ladder-cols:4}}
@container (max-width:609px){.ds .ds-stats--ladder[data-price-count="6"]{--ds-ladder-cols:3}}
@container (max-width:506px){.ds .ds-stats--ladder[data-price-count="5"]{--ds-ladder-cols:3}}
@container (max-width:403px){.ds .ds-stats--ladder:is([data-price-count="4"],[data-price-count="7"],[data-price-count="8"]){--ds-ladder-cols:2}}
@container (max-width:300px){.ds .ds-stats--ladder:is([data-price-count="5"],[data-price-count="6"]){--ds-ladder-cols:2}}
/* A record name as the hint (1.5.84): at most two lines, the full text in the title tooltip. */
.ds .ds-stat__hint--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}

/* Interactive hierarchy graph (brandbook 3.9): .ds-graph > .ds-graph__frame (toolbar + viewport).
   app.js lays the people out and passes zoom-dependent sizes as --hierarchy-* custom properties;
   every colour, radius and shadow here is a design token. */
.ds .ds-graph{min-width:0}
.ds .ds-graph__frame{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
.ds .ds-graph__toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-2);margin:0}
.ds .ds-graph__zoom{display:inline-block;min-width:48px;font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink-muted);
  text-align:center;font-variant-numeric:tabular-nums}
.ds .ds-graph__viewport{position:relative;height:560px;min-width:0;overflow:hidden;border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  background:var(--ds-surface-soft);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;contain:layout paint;isolation:isolate}
.ds .ds-graph__viewport--panning{cursor:grabbing}
.ds .ds-graph__stage{position:absolute;inset:0}
.ds .ds-graph__edges{position:absolute;inset:0;overflow:visible;pointer-events:none}
.ds .ds-graph__edge{fill:none;stroke:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line-strong));stroke-width:2;stroke-linecap:round;
  stroke-dasharray:10 8;animation:ds-graph-flow var(--ds-flow) linear infinite;
  transition:opacity var(--ds-base) var(--ds-ease),stroke var(--ds-base) var(--ds-ease)}
.ds .ds-graph__edge--secondary{stroke-dasharray:5 9;animation-name:ds-graph-flow-secondary;animation-duration:var(--ds-flow-secondary)}
.ds .ds-graph__edge--focus{stroke:var(--ds-brand)}
.ds .ds-graph__edge--muted{opacity:.2;animation:none}
/* The path runs from the manager to the report, so a negative offset flows along it. */
@keyframes ds-graph-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-18}}
@keyframes ds-graph-flow-secondary{from{stroke-dashoffset:0}to{stroke-dashoffset:-14}}
@media (prefers-reduced-motion:reduce){.ds .ds-graph__edge{animation:none}}
.ds .ds-graph__arrow{fill:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line-strong))}
/* The word of a link of a map (1.5.120: «поставляет», «продаёт») beside its line, on the colour of the frame. */
.ds .ds-graph__label{font-size:var(--hierarchy-meta-size,12px);font-weight:500;fill:var(--ds-ink-muted);paint-order:stroke;
  stroke:var(--ds-surface-soft);stroke-width:4px;stroke-linejoin:round;transition:opacity var(--ds-base) var(--ds-ease)}
.ds .ds-graph__label--muted{opacity:.2}
.ds .ds-graph__node{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--hierarchy-node-gap,10px);
  width:var(--hierarchy-node-width,176px);margin:0;padding:0;text-align:center;cursor:pointer;outline:none;
  transition:opacity var(--ds-base) var(--ds-ease)}
.ds .ds-graph__avatar{display:grid;place-items:center;flex:0 0 auto;width:var(--hierarchy-avatar-size,74px);height:var(--hierarchy-avatar-size,74px);
  overflow:hidden;border:1px solid var(--ds-line);border-radius:50%;background:var(--ds-brand-soft);color:var(--ds-brand);
  font-size:var(--hierarchy-avatar-font-size,28px);line-height:1;font-weight:600;box-shadow:var(--ds-shadow-1);
  transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-graph__avatar img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* 1.5.120: the mark of a node of a map (a company, a project, a branch, a record) grows with its circle. */
.ds .ds-graph__avatar .ds-icon{width:46%;height:46%}
.ds .ds-graph__copy .ds-graph__figure{font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds .ds-graph__node:hover .ds-graph__avatar{border-color:var(--ds-line-strong);box-shadow:var(--ds-shadow-2);transform:translateY(var(--ds-lift))}
.ds .ds-graph__node:focus-visible .ds-graph__avatar{box-shadow:var(--ds-focus)}
.ds .ds-graph__node--self .ds-graph__avatar{width:var(--hierarchy-self-avatar-size,84px);height:var(--hierarchy-self-avatar-size,84px);
  border:2px solid var(--ds-brand);box-shadow:0 0 0 4px var(--ds-brand-soft)}
.ds .ds-graph__node--self:hover .ds-graph__avatar{border-color:var(--ds-brand);box-shadow:0 0 0 4px var(--ds-brand-soft),var(--ds-shadow-2)}
/* 1.5.151: the person of the card stands out in the hierarchy again (the owner, 16.10.2026: «почему ты в иерархии убрал пометку
   (был кружочек …) которая помечает конкретного пользователя»): the graph up to 1.5.75 had a ring around the circle and a dot of
   the brand at its top right, 1.5.76 kept only the thin border. The ring and the dot grow and shrink with the graph (the size of
   the circle of the person, --hierarchy-self-avatar-size); the dot stands on the ring, at the top right, never smaller than 10 px
   (on a phone the circle of a big tree is 30 px - a dot of its size was all white edge). */
.ds .ds-graph__node--self::before{content:"";position:absolute;z-index:-1;top:calc(var(--hierarchy-self-avatar-size,84px) * -.11);
  left:50%;width:calc(var(--hierarchy-self-avatar-size,84px) * 1.22);height:calc(var(--hierarchy-self-avatar-size,84px) * 1.22);
  transform:translateX(-50%);border:max(2px,calc(var(--hierarchy-self-avatar-size,84px) * .024)) solid color-mix(in srgb,var(--ds-brand) 56%,var(--ds-surface));
  border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 calc(var(--hierarchy-self-avatar-size,84px) * .06) color-mix(in srgb,var(--ds-brand) 10%,transparent),
    0 calc(var(--hierarchy-self-avatar-size,84px) * .14) calc(var(--hierarchy-self-avatar-size,84px) * .36) color-mix(in srgb,var(--ds-brand) 22%,transparent)}
.ds .ds-graph__node--self::after{--ds-self-dot:max(10px,calc(var(--hierarchy-self-avatar-size,84px) * .17));content:"";position:absolute;
  top:calc(var(--hierarchy-self-avatar-size,84px) * .069 - var(--ds-self-dot) / 2);
  left:calc(50% + var(--hierarchy-self-avatar-size,84px) * .431 - var(--ds-self-dot) / 2);width:var(--ds-self-dot);height:var(--ds-self-dot);
  border:max(2px,calc(var(--hierarchy-self-avatar-size,84px) * .024)) solid var(--ds-surface);border-radius:50%;
  background:var(--ds-brand);box-shadow:var(--ds-shadow-1);pointer-events:none}
.ds .ds-graph__copy{display:flex;flex-direction:column;gap:2px;max-width:100%;min-width:0}
.ds .ds-graph__copy b{font-size:var(--hierarchy-name-size,15px);line-height:1.25;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-graph__node--self .ds-graph__copy b{font-size:var(--hierarchy-self-name-size,17px);font-weight:700}
.ds .ds-graph__copy span{font-size:var(--hierarchy-meta-size,12px);line-height:1.3;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-graph__node--muted{opacity:.25}
.ds .ds-graph__node--dragging{z-index:5;cursor:grabbing}
.ds .ds-graph__node--dragging .ds-graph__avatar{box-shadow:var(--ds-shadow-2);transform:scale(1.04)}
/* 1.5.96: the note of a graph without links stands at the bottom of the frame - centred, it lay across the only node, the
   person itself («Связи руководитель / подчинённый пока не указаны.» through the circle). */
.ds .ds-graph__empty{position:absolute;inset:auto 0 0;display:grid;place-items:center;padding:var(--ds-space-6);text-align:center;
  font-size:14px;color:var(--ds-ink-muted);pointer-events:none}
/* Full screen: app.js moves the frame into its own .ds host at the body. */
.ds .ds-graph__frame--fullscreen{position:fixed;inset:0;z-index:30000;padding:var(--ds-space-4);background:var(--ds-bg);
  animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-graph__frame--fullscreen .ds-graph__viewport{flex:1 1 auto;height:auto;background:var(--ds-surface)}
.ds .ds-graph__frame--fullscreen .ds-graph__label{stroke:var(--ds-surface)}
/* 1.5.120: a map of relations (brandbook 3.15) - its frame takes the height of the screen under the head of the page. */
.ds .ds-graph--map .ds-graph__viewport{height:clamp(560px,calc(100dvh - 260px),1100px)}
/* A long name of a project or a company stands in three lines at most (all of it in the name of the node, aria-label). */
.ds .ds-graph--map .ds-graph__copy b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Layout helpers: main + side, equal columns, tile grid */
/* Pair (brandbook 3.9): a compact list on the left and a large widget on the right (5 : 7) — people and their
   hierarchy graph in the company card. Both columns start with an h3 head at the same height; one column from 1100 px. */
.ds .ds-pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--ds-space-6);align-items:start;min-width:0}
.ds .ds-pair>*{min-width:0}
.ds .ds-pair__side{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.ds .ds-pair :is(.ds-pair__side,.ds-pair__main)>.ds-subsection__head{min-height:32px;margin-bottom:0}
.ds .ds-pair__main>.ds-subsection__head{margin-bottom:var(--ds-space-3)}
/* Compact list (people next to the graph): badges under the name, only the row menu on the right. */
.ds .ds-list--compact .ds-list__item{align-items:flex-start;padding:var(--ds-space-3) 0}
/* 1.5.137 (brandbook 3.4): a key and its badges (the brands of a company and their price levels, «Покупает по», the rights of
   the stock) - one row at any width: the key wraps in its place, the badges stay on the right. The rule of 240 px put
   «TOP-реселлер RDP» under «TP-LINK» in the narrow card «Бренды / Уровень цен» with room for both. */
.ds .ds-list--keys .ds-list__item{flex-direction:row;flex-wrap:nowrap;align-items:center}
.ds .ds-list--keys .ds-list__item>.ds-list__main{flex:1 1 auto}
.ds .ds-list--keys .ds-list__side{flex-wrap:nowrap}
.ds .ds-list--compact .ds-list__meta{font-size:12px;line-height:16px}
.ds .ds-list__badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ds .ds-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:var(--ds-space-4);align-items:start;min-width:0}
.ds .ds-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--ds-space-4);align-items:start;min-width:0}
/* Exactly two columns (portfolio and analytics blocks, 1.5.81); one column below 900 px. */
.ds .ds-columns--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ds-space-6);row-gap:var(--ds-space-6)}
/* 1.5.110 (brandbook 3.9): the cards of one row at one height - a pair of data cards that stand side by side as one whole. */
.ds .ds-columns--even{align-items:stretch}
/* Two columns where the second holds a table (a ranking beside its comparison, the Board Pack): the table gets three
   fifths, so a region name stays on one line. */
.ds .ds-columns--2-3{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
@media (max-width:900px){.ds .ds-columns--2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.ds .ds-columns--2-3{grid-template-columns:minmax(0,1fr)}}
.ds .ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--ds-space-3);min-width:0}
.ds :is(.ds-split,.ds-columns,.ds-grid,.ds-pair,.ds-operations-grid,.ds-activity-grid)>:is(.ds-card,.ds-item)+:is(.ds-card,.ds-item){margin-top:0}
/* 1.5.213 (brandbook 3.107): four compact controls in one row; the long collection journal gets the full row below. */
.ds .ds-operations-grid{display:grid;grid-template-columns:minmax(215px,.95fr) minmax(280px,1.2fr) minmax(210px,.85fr) minmax(230px,1fr);gap:var(--ds-space-3);align-items:stretch;min-width:0}
.ds .ds-operations-grid>*{min-width:0}
.ds .ds-activity-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:var(--ds-space-3);align-items:start;min-width:0}
.ds .ds-activity-grid>*{min-width:0}
.ds .ds-form-line{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);flex-wrap:wrap;min-width:0}
.ds .ds-actions--compact{gap:var(--ds-space-1);margin-top:var(--ds-space-3)}
.ds .ds-stack--compact{gap:var(--ds-space-3)}
.ds .ds-list--clipped{max-height:430px;overflow:auto;overscroll-behavior:contain}
.ds [data-home-events-card] .ds-list--clipped{max-height:250px}
.ds .ds-list-tools{display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);margin-bottom:var(--ds-space-2);min-width:0}
.ds .ds-list-tools .ds-actions{margin:0}
.ds .ds-list-tools form{display:contents}
.ds .ds-price-analytics .ds-chart{height:200px}
.ds .ds-operations-grid+.ds-activity-grid{margin-top:var(--ds-space-3)}
.ds .ds-operations-grid+[data-price-watch-activity]{margin-top:var(--ds-space-3)}
.ds .ds-activity-grid+*{margin-top:var(--ds-space-4)}
@media (max-width:1080px){
  .ds .ds-operations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){.ds .ds-activity-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .ds .ds-operations-grid{grid-template-columns:minmax(0,1fr)}
  .ds .ds-operations-grid>:last-child{grid-column:auto}
  .ds .ds-form-line{align-items:flex-start}
}

/* Progress: <progress class="ds-progress" value max> (no inline styles) */
.ds .ds-progress{display:block;width:100%;height:6px;margin:var(--ds-space-2) 0 0;border:0;border-radius:var(--ds-radius-pill);
  background:var(--ds-line-soft);color:var(--ds-brand);overflow:hidden;appearance:none}
.ds .ds-progress::-webkit-progress-bar{background:var(--ds-line-soft);border-radius:var(--ds-radius-pill)}
.ds .ds-progress::-webkit-progress-value{background:var(--ds-brand);border-radius:var(--ds-radius-pill);transition:width var(--ds-base) var(--ds-ease)}
.ds .ds-progress::-moz-progress-bar{background:var(--ds-brand);border-radius:var(--ds-radius-pill)}

/* Chain of related records: .ds-chain > .ds-entity + .ds-chain__sep */
.ds .ds-chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2);min-width:0}
.ds .ds-chain__sep{font-size:14px;line-height:20px;color:var(--ds-ink-faint)}
.ds .ds-entity--current{border-color:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line));background:var(--ds-brand-soft)}

/* Small avatar for rows; list row with a leading avatar */
.ds .ds-avatar--sm{width:40px;height:40px;font-size:16px}
.ds .ds-list__lead{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);min-width:0}

/* Empty state */
.ds .ds-empty{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-6);
  text-align:center;color:var(--ds-ink-muted);font-size:14px}

/* 6. Tabs, badges, alerts ---------------------------------------------- */
.ds .ds-tabs{display:flex;gap:var(--ds-space-1);margin:0 0 var(--ds-space-4);padding:var(--ds-space-1);
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-1);overflow-x:auto;scrollbar-width:none}
.ds .ds-tabs a{display:inline-flex;align-items:center;gap:var(--ds-space-2);height:36px;padding:0 var(--ds-space-3);border-radius:var(--ds-radius-md);
  font-size:14px;font-weight:600;color:var(--ds-ink-muted);white-space:nowrap;
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-tabs a:hover{background:var(--ds-surface-soft);color:var(--ds-ink);transform:translateY(var(--ds-lift-sm))}
.ds .ds-tabs a:active{transform:none}
.ds .ds-tabs a[aria-current]{background:var(--ds-brand-soft);color:var(--ds-brand)}
/* 1.5.153 (brandbook 3.10; the owner, 17.10.2026: on a laptop at 100 % everything after «Договоры поставки» of the company card went
   beyond the edge of the screen - «сделай так чтобы они не уезжали а гибко сжимались равномерно»): on a computer a strip that does not
   fit (app.js marks it) shares its width evenly - every tab gives up width in proportion to its own, its label wraps onto two lines
   (ds-tabs--fit); a strip that does not fit even so goes on to a second row (ds-tabs--rows). On a phone it scrolls sideways. */
@media (min-width:721px){
  .ds .ds-tabs--fit{gap:2px}
  .ds .ds-tabs--fit a{flex:1 1 auto;min-width:min-content;justify-content:center;height:auto;min-height:36px;padding:4px var(--ds-space-2);
    font-size:13px;line-height:16px;text-align:center;white-space:normal}
  /* Even rows: a grid of as many columns as app.js counts (--ds-tabs-per-row) - the tabs of every row stand in the same columns. */
  .ds .ds-tabs--rows{display:grid;grid-template-columns:repeat(var(--ds-tabs-per-row,7),minmax(min-content,1fr));overflow-x:visible}
}
/* 1.5.110 (brandbook 3.12): the strip of the sections of a card stays in view while the card scrolls - under the top bar
   of a computer, under the header of a phone - and the section being read is marked (aria-current). No script moves it. */
/* On a computer the card scrolls inside .ds-main, whose padding the sticky offset counts from: the strip stands 8 px under the bar.
   The second shadow is a band of the page background over the 8 px between the bar and the strip: the card scrolling under the
   strip does not show through that gap (the free space above the strip in the flow is 20 px, the band takes 16). */
.ds .ds-tabs[data-section-strip]{position:sticky;top:calc(var(--ds-topbar-h) + var(--ds-space-2) - var(--ds-page-y));z-index:20;
  box-shadow:var(--ds-shadow-1),0 calc(-1 * var(--ds-space-2)) 0 var(--ds-space-2) var(--ds-bg)}
.ds .ds-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--ds-radius-pill);
  border:1px solid color-mix(in srgb,currentColor 18%,transparent);
  font-size:12px;line-height:16px;font-weight:600;background:var(--ds-surface-soft);color:var(--ds-ink-muted);white-space:nowrap}
.ds .ds-badge--success{background:var(--ds-success-soft);color:var(--ds-success)}
.ds .ds-badge--warning{background:var(--ds-warning-soft);color:var(--ds-warning)}
.ds .ds-badge--danger{background:var(--ds-danger-soft);color:var(--ds-danger)}
.ds .ds-badge--brand{background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-badge--count{height:20px;min-width:20px;padding:0 6px;justify-content:center}
/* 1.5.154 (brandbook 2.8): the level of a price wears its colour wherever it stands. data-tier on any element gives its children
   the colours of the level (--ds-t, --ds-t-soft, --ds-t-sheen, --ds-t-line); the pill ds-tier, a column of a table and a field of
   the mode of a price read them. The word is always there - the colour helps the eye, it never replaces the word. */
.ds [data-tier="omg"]{--ds-t:var(--ds-tier-omg);--ds-t-soft:var(--ds-tier-omg-soft);--ds-t-sheen:var(--ds-tier-omg-sheen);--ds-t-line:var(--ds-tier-omg-line)}
.ds [data-tier="platinum"]{--ds-t:var(--ds-tier-platinum);--ds-t-soft:var(--ds-tier-platinum-soft);--ds-t-sheen:var(--ds-tier-platinum-sheen);--ds-t-line:var(--ds-tier-platinum-line)}
.ds [data-tier="gold"]{--ds-t:var(--ds-tier-gold);--ds-t-soft:var(--ds-tier-gold-soft);--ds-t-sheen:var(--ds-tier-gold-sheen);--ds-t-line:var(--ds-tier-gold-line)}
.ds [data-tier="silver"]{--ds-t:var(--ds-tier-silver);--ds-t-soft:var(--ds-tier-silver-soft);--ds-t-sheen:var(--ds-tier-silver-sheen);--ds-t-line:var(--ds-tier-silver-line)}
.ds [data-tier="base"]{--ds-t:var(--ds-tier-base);--ds-t-soft:var(--ds-tier-base-soft);--ds-t-sheen:var(--ds-tier-base-sheen);--ds-t-line:var(--ds-tier-base-line)}
.ds [data-tier="top"]{--ds-t:var(--ds-tier-top);--ds-t-soft:var(--ds-tier-top-soft);--ds-t-sheen:var(--ds-tier-top-sheen);--ds-t-line:var(--ds-tier-top-line)}
.ds [data-tier="mdp"]{--ds-t:var(--ds-tier-mdp);--ds-t-soft:var(--ds-tier-mdp-soft);--ds-t-sheen:var(--ds-tier-mdp-sheen);--ds-t-line:var(--ds-tier-mdp-line)}
/* The pill of a level: a soft sheen from the light end to the deeper one, a fine light edge on top, a mark of the metal. */
.ds .ds-tier{display:inline-flex;align-items:center;gap:6px;height:22px;max-width:100%;padding:0 10px 0 8px;border-radius:var(--ds-radius-pill);
  border:1px solid var(--ds-t-line,var(--ds-line));
  background:linear-gradient(135deg,var(--ds-t-soft,var(--ds-surface-soft)) 0%,var(--ds-t-sheen,var(--ds-surface-soft)) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ds-on-color) 72%,transparent);
  color:var(--ds-t,var(--ds-ink-muted));font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;vertical-align:middle}
/* 1.5.219 (brandbook 2.8): a price and its source on one line - the pill of the level (or the words of the source) before the number,
   both on the middle line of the row; on a phone the pill goes over the number when they do not fit. */
.ds .ds-price-with{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 10px;max-width:100%}
.ds .ds-price-with__source{display:inline-flex;align-items:center;min-width:0}
.ds .ds-price-with__source .ds-meta{font-size:12px;line-height:16px;white-space:nowrap}
.ds .ds-price-with__value{white-space:nowrap}
.ds .ds-tier::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--ds-t-line,var(--ds-line-strong)) 0%,var(--ds-t,var(--ds-ink-muted)) 100%)}
/* 1.5.154 (brandbook 2.8): the kind of a company wears its tone (data-company-type="<type>") - the badge of the type in the head of a card,
   a cabinet, a form and the quick view; in a register the type keeps the ink of the text and takes the mark of its tone (ds-kind). */
.ds [data-company-type="Vendor"]{--ds-k:var(--ds-kind-vendor);--ds-k-soft:var(--ds-kind-vendor-soft);--ds-k-line:var(--ds-kind-vendor-line)}
.ds [data-company-type="Agent"]{--ds-k:var(--ds-kind-agent);--ds-k-soft:var(--ds-kind-agent-soft);--ds-k-line:var(--ds-kind-agent-line)}
.ds [data-company-type="Distributor"]{--ds-k:var(--ds-kind-distributor);--ds-k-soft:var(--ds-kind-distributor-soft);--ds-k-line:var(--ds-kind-distributor-line)}
.ds [data-company-type="KA"]{--ds-k:var(--ds-kind-ka);--ds-k-soft:var(--ds-kind-ka-soft);--ds-k-line:var(--ds-kind-ka-line)}
.ds [data-company-type="Partner"]{--ds-k:var(--ds-kind-partner);--ds-k-soft:var(--ds-kind-partner-soft);--ds-k-line:var(--ds-kind-partner-line)}
.ds [data-company-type="EndCustomer"]{--ds-k:var(--ds-kind-customer);--ds-k-soft:var(--ds-kind-customer-soft);--ds-k-line:var(--ds-kind-customer-line)}
.ds .ds-badge[data-company-type]{border-color:var(--ds-k-line,var(--ds-line));background:var(--ds-k-soft,var(--ds-surface-soft));color:var(--ds-k,var(--ds-ink-muted))}
.ds .ds-kind{padding-left:15px;
  background:radial-gradient(circle at 5.5px 50%,var(--ds-k,var(--ds-ink-faint)) 0 4px,var(--ds-k-soft,transparent) 4.4px 5.5px,transparent 5.9px) no-repeat}
/* The mark is the background of the start of the first line (an inline box keeps its padding on the first line only): it never
   stands apart from the first word and only the first line is shorter - a flex box narrowed every line and a type of three words took
   three lines of a register instead of two («Партнёр / второго / уровня»), a mark of its own (::before) stood alone over «Дистрибьютор». */
.ds .ds-alert{display:flex;align-items:flex-start;gap:var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);
  border-radius:var(--ds-radius-lg);font-size:14px;background:var(--ds-brand-soft);color:var(--ds-ink);
  animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-alert--success{background:var(--ds-success-soft)}
.ds .ds-alert--warning{background:var(--ds-warning-soft)}
.ds .ds-alert--danger{background:var(--ds-danger-soft)}
/* 1.5.224 (brandbook 3.109): a button of an alert («Обычный вид» of «Глазами менеджера») stands at its end, on its line. */
.ds .ds-alert>span{flex:1 1 auto;min-width:0}
.ds .ds-alert__action{flex:0 0 auto;margin:-4px 0 -4px auto}
@media (max-width:640px){.ds .ds-alert:has(.ds-alert__action){flex-wrap:wrap}.ds .ds-alert__action{margin:0}}
@keyframes ds-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 7. Tables ------------------------------------------------------------- */
.ds .ds-toolbar{display:flex;align-items:center;gap:var(--ds-space-2);margin:0 0 var(--ds-space-4);flex-wrap:wrap}
.ds .ds-toolbar .ds-grow{flex:1 1 240px}
.ds .ds-table-wrap{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-1);overflow:auto}
/* 1.5.127: a line straight in the frame of a register (an empty register, «Показаны первые …») keeps the padding of its bar. */
.ds .ds-table-wrap>:is(.ds-list-empty,p.ds-meta){margin:0;padding:var(--ds-space-3) var(--ds-space-4)}
.ds .ds-table{width:100%;margin:0;border:0;border-radius:0;box-shadow:none;border-collapse:separate;border-spacing:0;font-size:14px;background:transparent}
/* 1.5.134 (the owner, 14.10.2026: «заголовки модель и количество слишком близко к полям … прилипать заголовки так близко к краю
   неестественно»): the head and the cells of every table sit on the middle line of their row with air above and under the text,
   as in the registers (.ds-table--fit). Since 1.5.95 the base rule of the document (vertical-align:top) and the padding 0 glued
   the text of every table without --fit to the top line: the head of «Оборудование», the lines of an order, its shipments. */
.ds .ds-table th{position:sticky;top:0;height:40px;padding:var(--ds-space-2) var(--ds-space-4);background:var(--ds-surface-soft);
  font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted);text-align:left;text-transform:none;letter-spacing:0;
  border:0;border-bottom:1px solid var(--ds-line);box-shadow:none;white-space:nowrap;vertical-align:middle}
.ds .ds-table td{height:44px;padding:var(--ds-space-2) var(--ds-space-4);border:0;border-bottom:1px solid var(--ds-line-soft);color:var(--ds-ink);background:transparent;vertical-align:middle}
.ds .ds-table tr:last-child td{border-bottom:0}
.ds .ds-table tbody tr{transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-table tbody tr:hover td{background:var(--ds-surface-soft)}
.ds .ds-table :is(td,th).ds-num{text-align:right;font-variant-numeric:tabular-nums}
/* 1.5.96: the header of a number column and the second lines of a number cell are words («Кол-во», «50 мастер-боксов»):
   proportional figures - the tabular ones widened the hyphen («Кол - во»). The figure of the cell stays tabular. */
.ds .ds-table th.ds-num,.ds .ds-table td.ds-num .ds-table__sub{font-variant-numeric:lining-nums proportional-nums}
.ds .ds-table td.ds-center,.ds .ds-table th.ds-center{text-align:center}
/* Total row (1.5.86, the lines of the order builder): a line above it; the words «Итого» and the sum are <b>. */
.ds .ds-table tfoot td{border-top:1px solid var(--ds-line);font-weight:400}
.ds .ds-table tfoot b{font-weight:700}

/* Register table (brandbook 3.7): many semantic columns fitted to the viewport by
   app.js (data-fit-directory-register); headers and values wrap instead of overflowing. */
.ds .ds-table--fit th{white-space:normal;padding:var(--ds-space-2) var(--ds-space-3);vertical-align:middle}
.ds .ds-table--fit td{height:52px;padding:var(--ds-space-2) var(--ds-space-3);vertical-align:middle;overflow-wrap:break-word}
/* 1.5.111 (brandbook 3.7): a badge of a register is one pill on one line, as everywhere - the fit of the columns (app.js)
   measures it whole, so its column is never narrower than its longest badge (until 1.5.110 it wrapped into a tall two-line
   pill: «Логистика / запланирована»). */
.ds .ds-table td a:not(.ds-btn){color:var(--ds-ink)}
.ds .ds-table td a:not(.ds-btn):hover{color:var(--ds-brand)}
/* 1.5.111: a word of a title never breaks in the middle in a table laid out by its content (the Board Pack: «Новосибирская»
   split at 1100 px) - break-word keeps the longest word in the minimum of its column, anywhere did not. */
.ds .ds-table__title{font-weight:600;overflow-wrap:break-word}
/* 1.5.80 Title line of a register row: the name, then light facts on the same line (revision «V1», a 6G badge). */
.ds .ds-table__line{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--ds-space-2);min-width:0}
.ds .ds-table__tag{font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 1.5.111: the second line keeps its words too («Дистрибьютор» split in the column of companies of the extra access of a new
   user, beside short names) - break-word, as the title. */
.ds .ds-table__sub{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:break-word}
.ds .ds-table__sub a:not(.ds-btn){color:var(--ds-ink-muted)}
.ds .ds-table tbody{transition:opacity var(--ds-base) var(--ds-ease)}
.ds .ds-table tbody.is-loading{opacity:.55}
/* 1.5.119: a live register (app.js, data-live-register) - the parts that follow the filters fade while the page is on its
   way, like the rows of the register of companies. */
.ds [data-live-results]{transition:opacity var(--ds-base) var(--ds-ease)}
.ds [data-live-results][aria-busy="true"]{opacity:.55}
.ds .ds-table-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-3);
  padding:var(--ds-space-4);border-bottom:1px solid var(--ds-line)}
/* 1.5.153: a wide register scrolls inside its frame under its bar - the bar (the title, «‹ ›», «Порядок колонок») stays where it is
   (it went away to the left with the columns at the first «›»). A sticky bar is a layer of its own: it stands over the sticky cells of
   its table (z-index 1-3), so the menus of the bar («Экспорт» of the pivot) open over the table, not under its head. */
.ds .ds-table-wrap>.ds-table-bar{position:sticky;left:0;z-index:4}
.ds .ds-table-bar__title{display:flex;align-items:center;gap:var(--ds-space-2);min-width:0}
/* 1.5.154 / 1.5.215 (brandbook 2.8; the owner, 29.10.2026: «не нравится фиолетовый кружок перед названием заголовка - он как-то
   слишком неаккуратно висит к границе … чтобы оно не было так неуклюже привязано к заголовку»): the head of a block and the title
   of a register begin with the page-area mark - a short rounded bar of the colour of the area, the height of the capital letters,
   standing in the line of the heading 10 px before its first word (no more a dot hanging in the padding beside the border of the
   card). It is inline: a long heading wraps its words after it, the bar stays on the first line. */
.ds :is(.ds-card>.ds-card__head,.ds-table-bar>.ds-table-bar__title) h2::before{content:"";display:inline-block;width:4px;height:14px;
  margin-right:10px;border-radius:999px;vertical-align:-1px;
  background:linear-gradient(180deg,var(--ds-page-area),color-mix(in srgb,var(--ds-page-area) 55%,var(--ds-surface)))}
/* 1.5.153: the title takes the free space of its line - what follows it (a badge, a button, «‹ ›», the sign «Порядок колонок») stands
   together at the right. With two children space-between did it; the sign came as a third child, and «Умный поиск», «Все заказы»,
   «Воронка продаж» stood in the middle of the bar (the pixel comparison with 1.5.152). */
.ds .ds-table-bar>.ds-table-bar__title{margin-right:auto}
.ds .ds-badges{display:flex;flex-wrap:wrap;gap:var(--ds-space-1)}
.ds .ds-table-bar .ds-badges{min-width:0}
.ds .ds-table-bar .ds-badge{height:auto;min-height:22px;padding-top:2px;padding-bottom:2px;white-space:normal}

/* Bulk actions over selected rows: .ds-bulkbar (count, action, its panel, button) */
.ds .ds-bulkbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);
  padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line);background:var(--ds-surface-soft)}
.ds .ds-bulkbar>.ds-control,.ds .ds-bulkbar>.ds-combobox{flex:0 1 260px}
.ds .ds-bulkbar__count{display:inline-flex;align-items:center;gap:var(--ds-space-2);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}

/* Filter bar above a register: search spans two cells, actions sit in the last cell. 1.5.87: the cells come in pairs
   (2, 4, 6 or 8 columns), so a filter of two cells (.ds-filters__wide) never leaves a hole at the end of a row. */
.ds .ds-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr) minmax(172px,1fr));gap:var(--ds-space-2);min-width:0;margin:0}
.ds .ds-filters>.ds-search{grid-column:span 2}
/* 1.5.87: every option of a filter fits its field. A filter with long words (execution statuses, service types, districts)
   or with names (companies, people) takes two cells - the whole row on a phone - so a status picked later never goes
   under the arrow («В порту перегрузки», «Производство запланировано»). */
.ds .ds-filters>.ds-filters__wide{grid-column:span 2}
.ds .ds-filters__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);grid-column:-2/-1}
.ds .ds-search{position:relative;display:block;min-width:0;margin:0;font-size:14px;line-height:21px;font-weight:400;color:var(--ds-ink)}
.ds .ds-search>svg{position:absolute;top:50%;left:12px;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--ds-ink-faint);
  stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.ds .ds-search>.ds-control{padding-left:36px;padding-right:32px}
.ds .ds-search__state{position:absolute;top:50%;right:14px;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--ds-brand);opacity:0;transition:opacity var(--ds-base) var(--ds-ease);pointer-events:none}
.ds .ds-search__state.is-loading{opacity:1;animation:ds-pulse 900ms var(--ds-ease) infinite alternate}
.ds .ds-search__state.is-error{opacity:1;background:var(--ds-danger)}
@keyframes ds-pulse{from{opacity:.25}to{opacity:1}}

/* Pagination: range, pages, page size */
.ds .ds-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-3);
  font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-pagination b{font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums}
/* 1.5.215 (the owner, 29.10.2026: «блок цены продавцов … приведи в аккуратный порядок с точки зрения брендбука и отступов»): the pages
   of a register inside its frame (the price watch) keep the padding of the bar of the register and a soft line above them - «1–8 из 8»
   stood glued to the bottom and the left border of the frame. */
.ds .ds-table-wrap>.ds-pagination{position:sticky;left:0;padding:var(--ds-space-3) var(--ds-space-4);border-top:1px solid var(--ds-line-soft)}
.ds .ds-pagination__pages,.ds .ds-pagination__size{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1)}
.ds .ds-pagination__sizes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1)}
.ds .ds-pagination__sizes form{display:contents}
.ds .ds-pagination .ds-btn{min-width:var(--ds-control-h-sm);font-variant-numeric:tabular-nums}
.ds .ds-pagination .ds-btn[aria-current]{background:var(--ds-brand-soft);color:var(--ds-brand);cursor:default}
.ds .ds-pagination__gap{padding:0 var(--ds-space-1);color:var(--ds-ink-faint)}

/* 1.5.153 (brandbook 3.7): the person's own order of the columns of a register (app.js, column_order.py). On a computer the header
   of a column is a hand - the column is dragged by it. «Порядок колонок» in the bar of the register - the way without a mouse.
   1.5.158 (the owner, 18.10.2026: «я захватываю и тяну и оно визуально передвигается плавненько и красиво … а ты сделал … просто
   показывает синюю полосу куда оно встанет»): the column itself lifts - a card with its header and the cells that are seen, the deep
   shadow and the corners of the theme - and follows the pointer along the register; the other columns slide aside (--ds-slow,
   --ds-ease) and open a soft slot where it lands; released, the card glides into the slot. The slot and the slide are transforms of
   the cells (app.js sets the width of the lifted column and the place of the slot as --ds-col-gap and --ds-col-slot on the table):
   the layout of the register never changes while a column is carried, so nothing around it moves. 1.5.159: the way without a mouse is
   the grip in «Колонки» (below); the sign «Порядок колонок» is gone. */
@media (min-width:721px){
  .ds .ds-table[data-column-order]>thead>tr:first-child>th{cursor:grab;user-select:none}
  /* 1.5.215 (the owner, 29.10.2026: «столбцы во всех местах … где их можно перетаскивать мышкой были все-таки раздельны тонкими
     линиями (кант) и чтобы углы были закругленными как в момент перетаскивания … чтобы было понятны границы этого столбца»): the
     head of every column a person can carry is a soft rounded tile of its own - the corners of the lifted column, 3 px of air
     between the tiles - and a thin line of the column runs down the rows from the gap between two heads. The band of the head is
     the surface of the register drawn inside the head (a ring of inset shadows, so no column grows wider than its words); the
     heads keep their sticky place over the rows. */
  .ds .ds-table[data-column-order]>thead>tr>th{--ds-th-ring:inset 3px 0 0 var(--ds-surface),inset -3px 0 0 var(--ds-surface),
    inset 0 4px 0 var(--ds-surface),inset 0 -4px 0 var(--ds-surface);
    border-radius:calc(var(--ds-radius-md) + 3px);border-bottom-color:transparent;box-shadow:var(--ds-th-ring)}
  .ds .ds-table[data-column-order]>thead>tr>th[data-tier]{box-shadow:var(--ds-th-ring),inset 0 7px 0 var(--ds-t-line)}
  .ds .ds-table[data-column-order]>tbody>tr>td+td{border-left:1px solid color-mix(in srgb,var(--ds-line-soft) 80%,transparent)}
  .ds .ds-table[data-column-order]>tbody>tr:first-child>td{border-top:1px solid var(--ds-line-soft)}
}
.ds .ds-shell.ds-col-dragging *,.ds .ds-shell.ds-col-dragging .ds-table[data-column-order]>thead>tr:first-child>th{cursor:grabbing;user-select:none}
.ds .ds-table.is-col-sorting>:is(thead,tbody,tfoot)>tr>:is(th,td){transition:transform var(--ds-slow) var(--ds-ease)}
.ds .ds-table.is-col-sorting .is-col-shift-l{transform:translateX(calc(var(--ds-col-gap,0px) * -1))}
.ds .ds-table.is-col-sorting .is-col-shift-r{transform:translateX(var(--ds-col-gap,0px))}
/* The slot: the cells of the lifted column stay in their rows (the lines of the rows go on), empty and softly tinted. */
.ds .ds-table.is-col-sorting .is-col-slot{transform:translateX(var(--ds-col-slot,0px));color:transparent;
  background-color:color-mix(in srgb,var(--ds-brand) 6%,transparent)}
.ds .ds-table.is-col-sorting th.is-col-slot{background-color:color-mix(in srgb,var(--ds-brand) 10%,var(--ds-surface-soft))}
.ds .ds-table.is-col-sorting .is-col-slot>*{visibility:hidden}
/* The lifted column: its own table of one column (the header and the rows that are seen, the same classes and heights) in a card. */
.ds .ds-colgrab{position:fixed;top:0;left:0;z-index:3600;overflow:hidden;border-radius:var(--ds-radius-md);background:var(--ds-surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ds-brand) 28%,transparent),var(--ds-shadow-2),var(--ds-shadow-3);pointer-events:none;
  will-change:transform;transition:box-shadow var(--ds-base) var(--ds-ease),opacity var(--ds-fast) var(--ds-ease);
  animation:ds-colgrab-lift var(--ds-base) var(--ds-ease)}
@keyframes ds-colgrab-lift{from{box-shadow:0 0 0 1px var(--ds-line),var(--ds-shadow-1),var(--ds-shadow-1)}}
.ds .ds-colgrab>.ds-table{table-layout:fixed;width:100%}
.ds .ds-colgrab>.ds-table th{position:relative;z-index:1;background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-colgrab>.ds-table>tbody{position:relative}
.ds .ds-colgrab .ds-colgrab__pad{display:none}
/* A column taller than the window fades into the card at its bottom instead of being cut (a veil of the colour of the card - a mask
   on the card cut its shadow too). */
.ds .ds-colgrab.is-cut::after{content:"";position:absolute;right:0;bottom:0;left:0;z-index:2;height:40px;
  background:linear-gradient(to bottom,transparent,var(--ds-surface))}
/* Released (or put back with Esc): the card glides into the slot and settles, then fades over the column in its place. */
.ds .ds-colgrab.is-settling{transition:transform var(--ds-slow) var(--ds-ease),box-shadow var(--ds-slow) var(--ds-ease),opacity var(--ds-fast) var(--ds-ease);
  box-shadow:0 0 0 1px var(--ds-line),var(--ds-shadow-1),var(--ds-shadow-1)}
.ds .ds-colgrab.is-gone{opacity:0}
/* 1.5.159 (brandbook 3.7; the owner, 18.10.2026: «а куда делось мелкое менюшка в которой выбираешь какие вообще колонки
   отображать? верни уже и сделай аккуратной и красивой … везде»): «Колонки» in the bar of every register - a quiet button with the
   sign and the word that stands in the line of the title (26 px) without raising it, and a panel over the page (app.js places it
   under its button, inside the window: the frame of a register clips what goes beyond it). Until it is placed it is not shown. */
.ds .ds-table-bar>.ds-colmenu{margin:-3px 0}
.ds .ds-colmenu>summary .ds-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.ds .ds-colmenu[open]:not([data-colmenu-placed])>.ds-menu__list{visibility:hidden}
.ds .ds-colmenu[data-colmenu-placed]>.ds-menu__list{position:fixed;top:var(--ds-colmenu-top,0px);left:var(--ds-colmenu-left,0px);right:auto;
  z-index:1100}
.ds .ds-colmenu>.ds-menu__list{display:flex;flex-direction:column;width:min(340px,calc(100vw - 32px));max-height:var(--ds-colmenu-room,none)}
.ds .ds-colmenu>.ds-menu__list>:is(.ds-colmenu__list,.ds-colmenu__groups){flex:0 1 auto;min-height:0}
.ds .ds-colmenu .ds-menu__head{margin-bottom:var(--ds-space-1)}
.ds .ds-colmenu__count{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds .ds-colmenu .ds-hint{margin:0 0 var(--ds-space-3)}
/* A line: the grip, the flag and the words; a hidden column - its words quiet; a part of its cells - a line under it. */
.ds .ds-colmenu__list{position:relative;display:flex;flex-direction:column;gap:2px;max-height:min(440px,58vh);margin:0;padding:0;
  overflow:auto;overscroll-behavior:contain;list-style:none}
.ds .ds-colmenu__item{position:relative;border-radius:var(--ds-radius-md);background:var(--ds-surface)}
.ds .ds-colmenu__row{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:2px;min-height:36px;
  padding:0 var(--ds-space-2) 0 2px;border-radius:var(--ds-radius-md);transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-colmenu__row--plain{grid-template-columns:minmax(0,1fr);padding-left:var(--ds-space-2)}
.ds .ds-colmenu__item:hover>.ds-colmenu__row{background:var(--ds-surface-soft)}
.ds .ds-colmenu__row>.ds-check{width:100%;min-height:36px;font-size:14px;line-height:20px}
.ds .ds-colmenu__row>.ds-check>span{min-width:0;overflow-wrap:break-word;transition:color var(--ds-fast) var(--ds-ease)}
.ds .ds-colmenu__item.is-off>.ds-colmenu__row>.ds-check>span{color:var(--ds-ink-muted)}
.ds .ds-colmenu__grip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:28px;padding:0;border:0;
  border-radius:var(--ds-radius-sm);background:transparent;color:var(--ds-ink-faint);cursor:grab;touch-action:none;
  transition:color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-colmenu__grip svg{width:14px;height:14px;fill:currentColor}
.ds .ds-colmenu__item:hover .ds-colmenu__grip,.ds .ds-colmenu__grip:hover{color:var(--ds-ink-muted)}
.ds .ds-colmenu__grip:hover{background:var(--ds-surface)}
.ds .ds-colmenu__grip:focus-visible{outline:none;color:var(--ds-brand);box-shadow:var(--ds-focus)}
.ds .ds-colmenu__parts{display:flex;flex-direction:column;padding:0 var(--ds-space-2) 4px 58px}
.ds .ds-colmenu__parts>.ds-check{min-height:30px;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
/* The carried line lifts like the card of a column (1.5.158) and follows the pointer; the others slide aside to open its place. */
.ds .ds-colmenu__list.is-sorting>.ds-colmenu__item{transition:transform var(--ds-slow) var(--ds-ease)}
.ds .ds-colmenu__list.is-sorting>.ds-colmenu__item.is-lifted{z-index:2;transition:box-shadow var(--ds-base) var(--ds-ease);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ds-brand) 28%,transparent),var(--ds-shadow-2),var(--ds-shadow-3)}
.ds .ds-colmenu__list.is-sorting>.ds-colmenu__item.is-lifted>.ds-colmenu__row{background:var(--ds-surface)}
.ds .ds-colmenu__item.is-lifted .ds-colmenu__grip{cursor:grabbing;color:var(--ds-brand)}
.ds .ds-colmenu__list.is-sorting>.is-shift-up{transform:translateY(calc(var(--ds-colmenu-gap,0px) * -1))}
.ds .ds-colmenu__list.is-sorting>.is-shift-down{transform:translateY(var(--ds-colmenu-gap,0px))}
.ds .ds-colmenu__list.is-sorting>.ds-colmenu__item.is-settling{transition:transform var(--ds-slow) var(--ds-ease),box-shadow var(--ds-slow) var(--ds-ease);
  box-shadow:0 0 0 1px var(--ds-line),var(--ds-shadow-1)}
/* The catalogue: its columns by groups, without grips (its columns are decided by the server; the order - its headers). */
.ds .ds-colmenu__groups{display:flex;flex-direction:column;gap:var(--ds-space-3);max-height:min(440px,58vh);overflow:auto;
  overscroll-behavior:contain}
.ds .ds-colmenu__groups .ds-menu__group h3{margin:0 0 2px var(--ds-space-2)}
/* 1.5.167: a group is as tall as its lines - the panel has one scroller, the groups (a list of a group was a box of its own with a
   second scrollbar inside the first; the wheel stuck in it and the last price columns were out of reach). */
.ds .ds-colmenu__groups .ds-colmenu__list{max-height:none;overflow:visible}
@media (max-width:720px){
  /* A phone: the sign alone (its word stays for a screen reader and in the title of the button) - a touch target of 44 px in the
     corner of the bar, on the line of the title, 16 px from the edge like the title from the other; the title and the other things
     of the bar keep their room beside it and wrap as they did, so the bar does not grow and the sign is never alone on a line. */
  .ds .ds-table-bar:has(>.ds-colmenu){padding-right:calc(var(--ds-space-4) + 32px)}
  .ds .ds-table-bar:has(>.ds-colmenu):not(.ds-table-wrap>.ds-table-bar){position:relative}
  .ds .ds-table-bar>.ds-colmenu{position:absolute;top:calc(var(--ds-space-4) - 9px);right:2px;margin:0}
  .ds .ds-colmenu>summary{width:44px;padding:0;justify-content:center}
  .ds .ds-colmenu>summary>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ds .ds-colmenu__grip{display:none}
  .ds .ds-colmenu__row{grid-template-columns:minmax(0,1fr);padding-left:var(--ds-space-2)}
  .ds .ds-colmenu__parts{padding-left:38px}
}
/* A person with a saved choice of columns: a register is not shown until app.js has put the choice on it (data-column-order) - no
   column flashes; a script that did not answer leaves the register as it is after 1.2 s. */
.ds .ds-table:is([data-fit-directory-register],[data-column-order-register]):not([data-column-order]):where(html[data-cols-saved] *){visibility:hidden;
  animation:ds-cols-reveal 0s linear 1.2s forwards}
@keyframes ds-cols-reveal{to{visibility:visible}}

/* Menu panel: a ds-menu that holds a small form (column picker, saved view) */
.ds .ds-menu__list--panel{display:block;width:min(460px,calc(100vw - 32px));max-width:none;padding:var(--ds-space-4)}
.ds .ds-menu__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);margin:0 0 var(--ds-space-3)}
.ds .ds-menu__head b{font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds .ds-menu__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--ds-space-2);margin-top:var(--ds-space-4);
  padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line-soft)}
.ds .ds-menu__sep{height:1px;margin:6px 0;background:var(--ds-line-soft)}
.ds .ds-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-1) var(--ds-space-4);
  max-height:min(360px,50vh);overflow:auto;overscroll-behavior:contain}
.ds .ds-checks>.ds-check{min-height:32px}

/* Hover card over a register value (people of a company, projects of a contact).
   Built by app.js at the body: div.ds > .ds-popover (head, body with ds-list, foot). */
.ds .ds-popover{position:fixed;z-index:3500;display:flex;flex-direction:column;width:360px;max-width:calc(100vw - 24px);
  max-height:min(480px,calc(100vh - 24px));background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-2);overflow:hidden;animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-popover--text{display:none;width:max-content;max-width:min(560px,calc(100vw - 28px));padding:var(--ds-space-3) var(--ds-space-4);
  font:400 13px/20px var(--ds-font);color:var(--ds-ink);white-space:pre-line;overflow-wrap:anywhere;pointer-events:none}
.ds .ds-popover--text.visible{display:block}
/* 1.5.172: the card of a chart never takes the pointer - on a narrow screen it stands over the canvas beside the pointer, took
   it, the canvas lost it and the card hid itself (it blinked on a phone). */
.ds .ds-popover--chart{pointer-events:none}
.ds .ds-popover__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-3);
  padding:var(--ds-space-4) var(--ds-space-4) var(--ds-space-3);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-popover__head small{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-popover__head b{display:block;font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-popover__body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--ds-space-3) var(--ds-space-4)}
.ds .ds-popover__body>*+*{margin-top:var(--ds-space-3)}
.ds .ds-popover__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-2);
  padding:var(--ds-space-3) var(--ds-space-4);border-top:1px solid var(--ds-line-soft);font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-popover__state{padding:var(--ds-space-4);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-popover__state--error{color:var(--ds-danger)}
.ds .ds-popover a.ds-list__item{color:var(--ds-ink)}
.ds .ds-popover a.ds-list__item[aria-expanded="true"] .ds-list__title{color:var(--ds-brand)}
.ds .ds-popover .ds-dl{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-3)}

/* On phones a .ds-table--stack row becomes a card: every cell shows its data-label
   left and its value right; a cell without data-label (the title) spans the card. */
@media (max-width:720px){
  .ds .ds-table--stack thead{display:none}
  .ds .ds-table--stack,.ds .ds-table--stack tbody,.ds .ds-table--stack td{display:block;width:100%}
  .ds .ds-table--stack tr{display:flex;flex-direction:column;width:100%;padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line-soft)}
  .ds .ds-table--stack tr:last-child{border-bottom:0}
  .ds .ds-table--stack td{display:grid;grid-template-columns:minmax(96px,40%) minmax(0,1fr);align-items:baseline;column-gap:var(--ds-space-3);
    height:auto;padding:4px 0;border:0;text-align:right}
  .ds .ds-table--stack td::before{content:attr(data-label);grid-column:1;grid-row:1/span 9;font-size:12px;line-height:20px;font-weight:500;color:var(--ds-ink-muted);text-align:left}
  .ds .ds-table--stack td>*{grid-column:2;justify-self:end}
  .ds .ds-table--stack td:first-child{font-weight:600}
  /* 1.5.86: only the title of a phone card is bold - its second line stays a quiet 12 px line (the date of an order). */
  .ds .ds-table--stack td:first-child .ds-table__sub{font-weight:400}
  /* 1.5.88: a clamped note under a value (the note of a supply) aligns right like every other line of the value. */
  .ds .ds-table--stack td[data-label] .ds-table__clamp{text-align:right}
  .ds .ds-table--stack td:not([data-label]){grid-template-columns:minmax(0,1fr);text-align:left}
  .ds .ds-table--stack td:not([data-label])::before{content:none}
  .ds .ds-table--stack td:not([data-label])>*{grid-column:1;justify-self:stretch}
  /* 1.5.137: a badge beside the title of a row (a new model of a price list) keeps its width - it was stretched to the row. */
  .ds .ds-table--stack td:not([data-label])>.ds-badge{justify-self:start}
  .ds .ds-table--stack td.ds-table__extra{display:none}
  .ds .ds-table--wide :is(th,td):first-child{position:static;box-shadow:none}
  .ds .ds-table--stack td.ds-table__select{order:9}
  .ds .ds-table--stack td.ds-table__action{order:10;padding-top:var(--ds-space-2)}
  .ds .ds-table--stack td.ds-table__action>*{grid-column:1;justify-self:end}
  .ds .ds-table-wrap:has(.ds-table--stack){overflow:visible}
  .ds .ds-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds .ds-filters__actions{grid-column:1/-1}
  .ds .ds-pagination{justify-content:center}
  .ds .ds-pagination .ds-btn{min-width:44px}
  .ds .ds-checks{grid-template-columns:minmax(0,1fr)}
  .ds .ds-bulkbar>.ds-control,.ds .ds-bulkbar>.ds-combobox,.ds .ds-bulkbar>.ds-btn{flex:1 1 100%}
}
/* 1.5.98: a phone narrower than the phone of the brandbook (360 px) - two filters in a row left an option longer than half a
   row under the arrow («По обновлению», «Превышена практическая вместимость»); below 380 px a filter takes the whole row. */
@media (max-width:379px){.ds .ds-filters{grid-template-columns:minmax(0,1fr)}.ds .ds-filters>:is(.ds-search,.ds-filters__wide,.ds-filters__actions){grid-column:auto}}
/* 1.5.153 (the owner, 17.10.2026: «колонки уходят за поля броузера … проверь во всех разделах … не только на больших мониторах но и
   на ноутбуках»): a table of a card (ds-table--stack, not a register) that cannot hold its columns in its frame on a computer stands
   as the cards of a phone (data-stacked, app.js) instead of scrolling sideways - at 1280 px the related orders of a distributor
   needed 654 px of columns (a number, the badge «Логистика запланирована», a project, a sum) in a card of 630. The rules of the
   phone above, for a table app.js marked. */
.ds .ds-table--stack[data-stacked] thead{display:none}
.ds .ds-table--stack[data-stacked],.ds .ds-table--stack[data-stacked] tbody,.ds .ds-table--stack[data-stacked] td{display:block;width:100%}
.ds .ds-table--stack[data-stacked] tr{display:flex;flex-direction:column;width:100%;padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-table--stack[data-stacked] tr:last-child{border-bottom:0}
.ds .ds-table--stack[data-stacked] td{display:grid;grid-template-columns:minmax(96px,40%) minmax(0,1fr);align-items:baseline;column-gap:var(--ds-space-3);
  height:auto;padding:4px 0;border:0;text-align:right}
.ds .ds-table--stack[data-stacked] td::before{content:attr(data-label);grid-column:1;grid-row:1/span 9;font-size:12px;line-height:20px;font-weight:500;color:var(--ds-ink-muted);text-align:left}
.ds .ds-table--stack[data-stacked] td>*{grid-column:2;justify-self:end}
.ds .ds-table--stack[data-stacked] td:first-child{font-weight:600}
.ds .ds-table--stack[data-stacked] td:first-child .ds-table__sub{font-weight:400}
.ds .ds-table--stack[data-stacked] td[data-label] .ds-table__clamp{text-align:right}
.ds .ds-table--stack[data-stacked] td:not([data-label]){grid-template-columns:minmax(0,1fr);text-align:left}
.ds .ds-table--stack[data-stacked] td:not([data-label])::before{content:none}
.ds .ds-table--stack[data-stacked] td:not([data-label])>*{grid-column:1;justify-self:stretch}
.ds .ds-table--stack[data-stacked] td:not([data-label])>.ds-badge{justify-self:start}
.ds .ds-table--stack[data-stacked] td.ds-table__extra{display:none}
.ds .ds-table--stack[data-stacked] td.ds-table__select{order:9}
.ds .ds-table--stack[data-stacked] td.ds-table__action{order:10;padding-top:var(--ds-space-2)}
.ds .ds-table--stack[data-stacked] td.ds-table__action>*{grid-column:1;justify-self:end}
.ds .ds-table-wrap:has(>.ds-table--stack[data-stacked]){overflow:visible}
/* An editor of lines (the lines of an order, the products of an opportunity) is stacked by the window below 1100 px; between 1100 and
   the width its fields need (the seven columns of «Работа с заказом» needed 980 px in a frame of 818 at 1101 px) app.js stacks it - the
   rules of the editor of lines of a phone, for a table app.js marked. */
.ds .ds-table--lines[data-stacked] td{align-items:center}
.ds .ds-table--lines[data-stacked] td.ds-table__action{padding-top:var(--ds-space-2)}
.ds .ds-table--lines[data-stacked] td.ds-table__action>*{justify-self:end}
.ds .ds-table--lines[data-stacked] td>.ds-control--sm{width:min(100%,280px)}
.ds .ds-table--lines[data-stacked] td:has(>.ds-stack){grid-template-columns:minmax(0,1fr);row-gap:var(--ds-space-1)}
.ds .ds-table--lines[data-stacked] td:has(>.ds-stack)::before{grid-row:1}
.ds .ds-table--lines[data-stacked] td:has(>.ds-stack)>.ds-stack{grid-column:1;grid-row:2;justify-self:stretch}
.ds .ds-table--lines[data-stacked] tbody tr[data-line-state="shortage"]{background:color-mix(in srgb,var(--ds-warning-soft) 55%,transparent)}
.ds .ds-table--lines[data-stacked] tbody tr[data-line-state="shortage"] td{background:transparent}
.ds .ds-table--lines[data-stacked] tbody tr[data-line-state="future"]{box-shadow:inset 3px 0 0 var(--ds-success)}
.ds .ds-table--lines[data-stacked] tbody tr[data-line-state="future"] td:first-child{box-shadow:none}
.ds .ds-table--lines[data-stacked] tfoot{display:block;width:100%}
.ds .ds-table--lines[data-stacked] tfoot tr{border-top:1px solid var(--ds-line)}
.ds .ds-table--lines[data-stacked] tfoot td{border-top:0}

/* 9. Products (brandbook 3.11): thumbnail, gallery, compare tray and matrix, reviews ------ */
.ds .ds-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ds .ds-actions--end{justify-content:flex-end}
.ds .ds-control--sm{height:var(--ds-control-h-sm);padding:0 var(--ds-space-2);font-size:13px}
.ds select.ds-control--sm{padding-right:32px;background-position:right 8px center}
.ds .ds-control--qty{width:64px;flex:0 0 64px;text-align:right;font-variant-numeric:tabular-nums}
/* 1.5.129: a quantity field of a numeric cell stands under its header at the right edge, as the numbers of the column (it
   stood at the left edge of the cell in the lines of a registration, a transit and a special price). */
.ds .ds-table td.ds-num>.ds-control--qty{display:block;margin-left:auto}
/* File field: the native picker button drawn as a secondary small button. */
.ds .ds-file{height:var(--ds-control-h);padding:var(--ds-space-1) var(--ds-space-2);line-height:30px;cursor:pointer}
.ds .ds-file::file-selector-button{height:30px;margin:0 var(--ds-space-3) 0 0;padding:0 var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);
  background:var(--ds-surface-soft);color:var(--ds-ink);font:600 13px/1 var(--ds-font);cursor:pointer;transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease)}
.ds .ds-file:hover::file-selector-button{border-color:var(--ds-line-strong);background:var(--ds-surface)}
/* Key figure with a text value, "of N" suffix, the current/effective figure. */
.ds .ds-stat__value--text{font-size:16px;line-height:24px;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:lining-nums proportional-nums}
.ds .ds-stat__of{font-size:13px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-stat--current{border-color:color-mix(in srgb,var(--ds-brand) 35%,var(--ds-line));background:var(--ds-brand-soft);--ds-stat-label:var(--ds-ink-muted)}
/* 1.5.154 (brandbook 2.8): a tile of a level of a price - the soft sheen of its level, its line for the frame, its ink for the label. */
.ds .ds-stat[data-tier]{border-color:var(--ds-t-line);background:linear-gradient(135deg,var(--ds-t-soft) 0%,color-mix(in srgb,var(--ds-t-sheen) 55%,var(--ds-t-soft)) 100%)}
.ds .ds-stat[data-tier] .ds-stat__label{color:var(--ds-t);font-weight:600}
.ds .ds-stat .ds-progress{margin-top:var(--ds-space-2)}
/* Product thumbnail: a soft square with the picture contained (never cropped). */
.ds .ds-thumb{display:inline-grid;place-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;margin:0;padding:2px;overflow:hidden;
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface);color:var(--ds-ink-muted);
  font:600 12px/1 var(--ds-font);text-transform:none}
.ds .ds-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.ds .ds-thumb--lg{width:72px;height:72px}
.ds .ds-thumb--button{width:56px;height:56px;min-height:0;min-width:0;justify-content:center;cursor:pointer;box-shadow:none;transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-thumb--button:hover{border-color:var(--ds-line-strong)}
.ds .ds-thumb--button:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-thumb--current{border-color:var(--ds-brand);box-shadow:0 0 0 2px var(--ds-brand-soft)}
/* Gallery of a product card: the main picture and thumbnails; app.js adds the hover preview. */
.ds .ds-gallery{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
.ds .ds-gallery__stage{display:grid;place-items:center;aspect-ratio:4/3;max-height:380px;padding:var(--ds-space-4);border:1px solid var(--ds-line-soft);
  border-radius:var(--ds-radius-md);background:var(--ds-surface);overflow:hidden}
.ds .ds-gallery__main{display:block;max-width:100%;max-height:340px;object-fit:contain}
.ds .ds-gallery__stage--empty{aspect-ratio:auto;height:160px;font-size:18px;font-weight:600;color:var(--ds-ink-faint);background:var(--ds-surface-soft)}
.ds .ds-gallery__thumbs{display:flex;flex-wrap:wrap;gap:var(--ds-space-2)}
.ds .ds-image-preview{position:fixed;z-index:3600;padding:var(--ds-space-2);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-3);opacity:0;transform:translateY(5px) scale(.975);pointer-events:none;
  transition:opacity var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease)}
.ds .ds-image-preview:not(.is-mounted){display:none}
.ds .ds-image-preview.is-visible{opacity:1;transform:none}
.ds .ds-image-preview img{display:block;width:100%;height:100%;object-fit:contain}
/* 1.5.95 (design stage 7c): the photo of a person (contacts register, people of a company card) opens in the same preview:
   a square photo, the name under it (the dark legacy card lived in the legacy stylesheet). */
.ds .ds-image-preview--person{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-image-preview--person img{flex:none;height:auto;aspect-ratio:1/1;border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-image-preview__name{flex:0 0 auto;padding:0 var(--ds-space-1) var(--ds-space-1);font-size:13px;line-height:18px;font-weight:600;
  color:var(--ds-ink);overflow-wrap:break-word}
/* A checkbox that looks like a secondary button (Compare on a product card). */
.ds .ds-check--button{height:var(--ds-control-h);padding:0 var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface);font-weight:600;transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease)}
.ds .ds-check--button:hover{background:var(--ds-surface-soft);border-color:var(--ds-line-strong)}
.ds .ds-check--button:has(input:checked){background:var(--ds-brand-soft);border-color:color-mix(in srgb,var(--ds-brand) 35%,var(--ds-line));color:var(--ds-brand)}
/* 1.5.96 An unavailable choice-button (a fifth product for the comparison) is the disabled button of 3.1: half opacity, no
   hover, the reason in its title. */
.ds .ds-check--button:has(input:disabled),.ds .ds-check--button:has(input:disabled):hover{opacity:.5;cursor:not-allowed;background:var(--ds-surface);border-color:var(--ds-line)}
.ds .ds-check--button input:disabled{opacity:1}
/* Sticky purchase bar of a record (product card): summary left, quantity and the main action right. */
.ds .ds-actionbar__summary{display:flex;flex-direction:column;gap:2px;min-width:0}
/* 1.5.96: the bar names a record («TL-SG-X1074», a plan, a shipment) in words - proportional figures (brandbook 2.2: the
   tabular ones widened every hyphen, «TL - SG - X1074»); a sum of the bar is ds-num. */
.ds .ds-actionbar__summary b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-actionbar__summary span{font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-actionbar .ds-input-group .ds-label{white-space:nowrap}
/* Register cells: highlighted (effective price) column, two-line clamp with the full value on hover. */
.ds .ds-table :is(th,td).ds-table__accent{background:color-mix(in srgb,var(--ds-brand-soft) 70%,transparent)}
.ds .ds-table th.ds-table__accent{color:var(--ds-brand)}
.ds .ds-table tbody tr:hover td.ds-table__accent{background:var(--ds-brand-soft)}
/* 1.5.154 (brandbook 2.8): a column of a level of a price wears the calm colour of its level - the head in the sheen of the level
   with its edge on top, the cells in its soft colour, a row under the pointer one tone deeper; the column a viewer buys at
   (ds-table__accent) - the deeper tone and the ink of the level. On a phone (a row as a card) the line is not painted: the label of
   the line wears the mark of the level. */
.ds .ds-table th[data-tier]{color:var(--ds-t);background:linear-gradient(180deg,var(--ds-t-soft) 0%,var(--ds-t-sheen) 100%);
  box-shadow:inset 0 3px 0 var(--ds-t-line);border-bottom-color:var(--ds-t-line)}
.ds .ds-table th[data-tier] .ds-table__sub{color:var(--ds-t)}
.ds .ds-table td[data-tier]{background:color-mix(in srgb,var(--ds-t-soft) 88%,transparent)}
.ds .ds-table tbody tr:hover td[data-tier]{background:color-mix(in srgb,var(--ds-t-sheen) 45%,var(--ds-t-soft))}
.ds .ds-table td[data-tier].ds-table__accent{background:color-mix(in srgb,var(--ds-t-sheen) 60%,var(--ds-t-soft));color:var(--ds-t);font-weight:600}
@media (max-width:720px){
  .ds .ds-table--stack td[data-tier],.ds .ds-table--stack tbody tr:hover td[data-tier]{background:transparent}
  .ds .ds-table--stack td[data-tier]::before{padding-left:14px;color:var(--ds-t);font-weight:600;
    background:radial-gradient(circle at 4px 50%,var(--ds-t) 0 3.5px,transparent 4px) no-repeat}
  .ds .ds-table--stack td[data-tier]>*{color:var(--ds-t)}
}
.ds .ds-table__clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;font:400 13px/18px var(--ds-font);color:var(--ds-ink);text-align:left;text-transform:none;cursor:help}
.ds .ds-table__clamp:focus-visible{outline:none;border-radius:var(--ds-radius-sm);box-shadow:var(--ds-focus)}
/* 1.5.111: the two clamped lines (a next step of a register, a description of a line) keep their words whole: the longest word is
   in the minimum of the column - by content (break-word) and in the fit of a register (measured unclamped). Until 1.5.110
   «радиообследование» and «Двухдиапазонный» broke in the middle. */
.ds .ds-table__clamp{overflow-wrap:break-word}
.ds .ds-table[data-fit-measuring] .ds-table__clamp{display:block;overflow:visible}
.ds .ds-table td .ds-badges{margin-top:4px}
/* 1.5.111: pairs inside a cell of a register stand in two columns only while each column holds 140 px, else in one - two
   columns of a 212 px cell broke «резервирование» at 1100 px. A phone keeps its one column (the rule of 720 px). */
@media (min-width:721px){.ds .ds-table td .ds-dl{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
/* Numbers never break inside a fitted register; a wide matrix keeps its first column (the model) in place. */
.ds .ds-table--fit :is(td,th).ds-num{overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
/* While app.js measures column minimums (1.5.81) no word may break inside: the minimum is the longest word. */
.ds .ds-table[data-fit-measuring] :is(th,td,th *,td *){overflow-wrap:normal;word-break:normal}
/* 1.5.97: an e-mail keeps its break after «@» while measuring - the minimum of its column is its longer part, not the whole
   address (which squeezed «Проекты: 35» of the register of companies into two lines). */
.ds .ds-table[data-fit-measuring] .ds-email{overflow-wrap:anywhere}
/* 1.5.88: while measuring, the buttons of a row keep their size and stand from the left, so the action column is measured
   as their sum (squeezed into a 1 px column - the old button rule caps them at 100 % - and pushed to the right edge they
   overflowed to the left, where scrollWidth does not look: «Принять на склад ×» of a supply got 13 px less than it needs
   at 1100 px). */
.ds .ds-table[data-fit-measuring] .ds-table__action .ds-actions{justify-content:flex-start}
.ds .ds-table[data-fit-measuring] .ds-table__action .ds-btn{flex-shrink:0;max-width:none}
/* 1.5.91: a button inside its own form (a recovery request: «Ссылка сброса», «Закрыть запрос») - the form is the item of
   the row and kept shrinking to 0 while measuring, so the column got the sum without those buttons and they overflowed. */
.ds .ds-table[data-fit-measuring] .ds-table__action .ds-actions>*{flex-shrink:0}
.ds .ds-table--fit th.ds-num{white-space:normal}
.ds .ds-table--fit th.ds-num .ds-table__sub{white-space:nowrap}
/* 1.5.111: the second line of a number cell marked --wrap turns between its parts (after «·», before a word), each part whole
   (ds-nowrap) - the column needs its widest part, not the whole line. */
.ds .ds-table td.ds-num .ds-table__sub--wrap{white-space:normal}
.ds .ds-table--wide :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--ds-surface)}
.ds .ds-table--wide thead th:first-child{z-index:3;background:var(--ds-surface-soft)}
.ds .ds-table--wide tbody tr:hover td:first-child{background:var(--ds-surface-soft)}
.ds .ds-table--wide[data-fit-scrolls] :is(th,td):first-child{border-right:1px solid var(--ds-line)}
.ds .ds-table--wide .ds-list__lead{gap:var(--ds-space-2)}
/* 1.5.79 Content-sized matrix (brandbook 3.11, catalogue): every column is exactly as wide as its content (model,
   cart, prices, compare), headers stay on one line plus the small currency line, and all free width goes to the
   growing column .ds-table__grow (description). Too wide for the screen — the matrix scrolls inside its frame. */
@media (min-width:721px){
  .ds .ds-table--content{table-layout:auto}
  .ds .ds-table--content :is(th,td){width:1%;white-space:nowrap}
  .ds .ds-table--content th.ds-num{white-space:nowrap}
  .ds .ds-table--content :is(th,td).ds-table__grow{width:auto;min-width:0;white-space:normal}
  .ds .ds-table--content td.ds-table__grow .ds-table__clamp{min-width:12em}
  .ds .ds-table--content :is(th,td).ds-num{padding-left:var(--ds-space-2);padding-right:var(--ds-space-2)}
  .ds .ds-table--content td:not(.ds-table__grow) :is(.ds-list__lead,.ds-list__main){min-width:max-content}
}
/* 1.5.153 (the owner, 17.10.2026, on a laptop: «раздел продукты снова колонки уходят за поля броузера - ему не хватает место»; at
   1280 px the catalogue showed one price of ten - the model, the cart, the category and the description took 912 px of a frame of
   1037): the prices come first. A matrix wider than its frame folds its secondary columns (app.js data-fit-folded) - first the
   line, the category, the packing, the volume and the data (1; the category then stands under the model), then the description
   (2) - and scrolls inside its frame only when the model, the cart and the prices still do not fit (‹ › in its bar). */
.ds .ds-table [data-fold-show]{display:none}
.ds .ds-table[data-fit-folded] [data-fold-show]{display:block;contain:inline-size;white-space:normal}
.ds .ds-table[data-fit-folded] .ds-list__lead>.ds-list__main:has(>[data-fold-show]){flex:1 1 auto}
.ds .ds-table[data-fit-folded="1"] [data-fold="1"],.ds .ds-table[data-fit-folded="2"] :is([data-fold],.ds-table__grow){display:none}
/* Folded, the header of a price wraps between its words («Merlion» / «закупка»): the column is as wide as its prices. */
.ds .ds-table--content[data-fit-folded] th.ds-num{white-space:normal}
/* 1.5.215: folded to its prices (2), the description is gone - the model, which now carries the category, takes the free width,
   so no price column grows wider than its prices (an empty stripe of 10 px in each of seven prices of the SOHO list at 1440). */
.ds .ds-table--content[data-fit-folded="2"] :is(th,td)[data-fold-grow]{width:auto;white-space:normal}
.ds .ds-table-bar>.ds-table-bar__scroll{display:flex;gap:var(--ds-space-1);margin:-3px 0}
/* 1.5.219 (the owner, 31.10.2026: «не маленькими кнопочками, а … подлиннее, чтобы их было удобно нажимать с разбегу»): the buttons
   that move a wide register or the board sideways are long - an arrow and a word, 112 px at least. */
.ds .ds-scrollbtn{min-width:112px;gap:var(--ds-space-2);justify-content:center}
.ds .ds-scrollbtn>span[aria-hidden]{font-size:18px;line-height:1;margin-top:-2px}
/* 1.5.219 (the owner: «скроллинг, который управляется сверху … можно сделать?»): a register or a board wider than its frame has a
   second scroll bar over it (app.js: B2B_TOP_SCROLL) - it moves the same frame, the one under the table moves it too. */
.ds .ds-topscroll{overflow-x:auto;overflow-y:hidden;height:14px;scrollbar-width:thin;scrollbar-color:var(--ds-line-strong) transparent}
.ds .ds-topscroll>div{height:1px}
.ds .ds-topscroll[hidden]{display:none}
.ds .ds-table-wrap>.ds-topscroll{position:sticky;left:0;z-index:4;background:var(--ds-surface);border-bottom:1px solid var(--ds-line-soft)}
@media (max-width:720px){.ds .ds-topscroll{display:none}}
.ds .ds-table-bar>.ds-table-bar__scroll[hidden]{display:none}
/* Comparison matrix: labels in a sticky first column; a matrix may scroll sideways inside its frame. */
.ds .ds-table--matrix{min-width:560px;table-layout:fixed}
.ds .ds-table--matrix:has(thead th:nth-child(4)){min-width:740px}
.ds .ds-table--matrix:has(thead th:nth-child(5)){min-width:920px}
.ds .ds-table--matrix:has(thead th:nth-child(6)){min-width:1100px}
.ds .ds-table--matrix:has(thead th:nth-child(7)){min-width:1280px}
.ds .ds-table--matrix th,.ds .ds-table--matrix td{height:auto;padding:var(--ds-space-3) var(--ds-space-4);white-space:normal;vertical-align:top;overflow-wrap:anywhere}
.ds .ds-table--matrix thead th{vertical-align:bottom;background:var(--ds-surface)}
.ds .ds-table--matrix :is(thead th,tbody th):first-child{position:sticky;left:0;z-index:2;width:200px;background:var(--ds-surface-soft)}
.ds .ds-table--matrix tbody th:first-child{background:var(--ds-surface);color:var(--ds-ink-muted);font-weight:500;font-size:13px}
.ds .ds-table__group th{padding:var(--ds-space-2) var(--ds-space-4);background:var(--ds-surface-soft);font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-table--matrix .ds-table__group th:first-child{background:var(--ds-surface-soft)}
.ds .ds-matrix-product{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.ds .ds-matrix-product .ds-control{width:100%}
/* Column constructor with groups of options. */
.ds .ds-menu__groups{display:flex;flex-direction:column;gap:var(--ds-space-4);max-height:min(420px,56vh);overflow:auto;overscroll-behavior:contain}
.ds .ds-menu__group h3{margin:0 0 var(--ds-space-2);font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-menu__groups .ds-checks{max-height:none;overflow:visible}
/* Compare tray: a floating bar at the bottom while products are selected. */
.ds .ds-tray{position:fixed;left:0;right:0;bottom:calc(var(--ds-shell-bottom) + var(--ds-space-4));z-index:45;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-3);
  width:max-content;max-width:calc(100vw - 32px);margin:0 auto;padding:var(--ds-space-3) var(--ds-space-4);background:var(--ds-surface);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-2);animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-actionbar~.ds-tray{bottom:calc(var(--ds-shell-bottom) + 92px)}
.ds .ds-tray__summary{display:flex;align-items:center;gap:var(--ds-space-2);font-size:14px;font-weight:600;color:var(--ds-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ds .ds-tray__summary .ds-badge{gap:0}
.ds .ds-tray__items{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);min-width:0}
.ds .ds-tray__item{display:inline-flex;align-items:center;gap:var(--ds-space-1);min-height:32px;padding:0 2px 0 var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);font-size:13px;line-height:18px;color:var(--ds-ink)}
.ds .ds-tray__item b{font-weight:600}
.ds .ds-tray__item small{margin-left:4px;font-size:12px;color:var(--ds-ink-muted)}
.ds .ds-tray__item .ds-btn{border-radius:var(--ds-radius-pill)}
/* Review analytics: rating bars and a sparkline. */
.ds .ds-bars{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-bars__row{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:var(--ds-space-2);font-size:13px;color:var(--ds-ink-muted)}
.ds .ds-bars__row .ds-progress{margin:0}
.ds .ds-bars__row b{text-align:right;color:var(--ds-ink);font-weight:600;font-variant-numeric:tabular-nums}
/* Bars with word labels (project portfolio, 1.5.81): label column, bar, count; a row may be a filter link. */
.ds .ds-bars--labels .ds-bars__row{grid-template-columns:minmax(0,12em) minmax(48px,1fr) minmax(2.5em,auto);color:var(--ds-ink)}
.ds .ds-bars--labels .ds-bars__row>span{overflow-wrap:anywhere}
.ds a.ds-bars__row{margin:0 calc(-1 * var(--ds-space-2));padding:var(--ds-space-1) var(--ds-space-2);border-radius:var(--ds-radius-md);
  text-decoration:none;transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds a.ds-bars__row:hover{background:var(--ds-surface-soft);color:var(--ds-brand)}
.ds a.ds-bars__row:focus-visible{outline:none;box-shadow:var(--ds-focus)}
/* 1.5.89 (brandbook 3.19): a ranking of sums - orders by status on the dashboard; distributors, regions, BU, managers and
   the growth and decline of sell-through. The rows share their columns (subgrid): every bar starts and ends on one line
   whatever the name, the status badge or the sum, and a share or a change to last year (small) stands under the sum; a
   name may carry its category on a second line (small).
   In a wide card: name | bar | sum, the name wraps inside its column (at most 44 % of the width). .ds-bars--stacked (a
   ranking in a narrow card) and every ranking on a phone: the name and the sum on one line (the sum on the first line of a
   name with a category), the bar under the name and the share under the sum; a row without a share draws its bar across
   the row. */
.ds .ds-bars--table{display:grid;grid-template-columns:fit-content(44%) minmax(48px,1fr) max-content;column-gap:var(--ds-space-3);row-gap:var(--ds-space-2)}
.ds .ds-bars--table .ds-bars__row{grid-column:1/-1;grid-template-columns:subgrid;column-gap:var(--ds-space-3);row-gap:var(--ds-space-1);color:var(--ds-ink)}
.ds .ds-bars--table .ds-bars__row>:first-child{min-width:0;overflow-wrap:anywhere;justify-self:start}
.ds .ds-bars--table .ds-bars__row>:first-child small{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-bars--table .ds-bars__row>b{white-space:nowrap;font-variant-numeric:tabular-nums}
.ds .ds-bars--table .ds-bars__row>small{grid-column:3;font-size:12px;line-height:16px;font-weight:500;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--ds-ink-muted)}
.ds .ds-bars--table .ds-bars__row>small[data-trend="up"]{color:var(--ds-success)}
.ds .ds-bars--table .ds-bars__row>small[data-trend="down"]{color:var(--ds-danger)}
.ds .ds-bars--stacked{grid-template-columns:minmax(0,1fr) max-content;row-gap:var(--ds-space-3)}
.ds .ds-bars--stacked .ds-bars__row>b{grid-column:2;grid-row:1;align-self:start}
.ds .ds-bars--stacked .ds-bars__row>.ds-progress{grid-column:1;grid-row:2}
.ds .ds-bars--stacked .ds-bars__row>small{grid-column:2;grid-row:2}
.ds .ds-bars--stacked .ds-bars__row:not(:has(>small))>.ds-progress{grid-column:1/-1}
@media (max-width:720px){
  .ds .ds-bars--table{grid-template-columns:minmax(0,1fr) max-content;row-gap:var(--ds-space-3)}
  .ds .ds-bars--table .ds-bars__row>b{grid-column:2;grid-row:1;align-self:start}
  .ds .ds-bars--table .ds-bars__row>.ds-progress{grid-column:1;grid-row:2}
  .ds .ds-bars--table .ds-bars__row>small{grid-column:2;grid-row:2}
  .ds .ds-bars--table .ds-bars__row:not(:has(>small))>.ds-progress{grid-column:1/-1}
}
/* 1.5.89 (brandbook 3.19): a chart of the design system - Chart.js draws into the canvas of .ds-chart at the height of
   the box (static/ds_charts.js); a ring is narrower and its names, sums and shares stand under it as .ds-legend. */
.ds .ds-chart{position:relative;height:280px;min-width:0}
.ds .ds-chart canvas{display:block;max-width:100%}
.ds .ds-chart--ring{height:200px;max-width:240px;margin:0 auto}
.ds .ds-legend{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:var(--ds-space-4) 0 0;padding:0;list-style:none}
.ds .ds-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) max-content;align-items:start;column-gap:var(--ds-space-2);
  margin:0;padding:0;font-size:13px;line-height:18px;color:var(--ds-ink)}
.ds .ds-legend li>span{min-width:0;overflow-wrap:anywhere}
.ds .ds-legend i{width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--ds-chart-6)}
.ds .ds-legend i[data-color="1"]{background:var(--ds-chart-1)}
.ds .ds-legend i[data-color="2"]{background:var(--ds-chart-2)}
.ds .ds-legend i[data-color="3"]{background:var(--ds-chart-3)}
.ds .ds-legend i[data-color="4"]{background:var(--ds-chart-4)}
.ds .ds-legend i[data-color="5"]{background:var(--ds-chart-5)}
.ds .ds-legend b{font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ds .ds-legend b small{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
/* 1.5.153 (brandbook 3.19): a legend whose lines open what they count (the ring «По видам» of the interactions) - the line is
   the link, as the slice of the ring is. */
.ds .ds-legend--links li{display:block}
.ds .ds-legend--links a{display:grid;grid-template-columns:10px minmax(0,1fr) max-content;align-items:start;column-gap:var(--ds-space-2);
  margin:0 calc(-1 * var(--ds-space-2));padding:2px var(--ds-space-2);border-radius:var(--ds-radius-sm);color:inherit;text-decoration:none;
  transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-legend--links a span{transition:color var(--ds-fast) var(--ds-ease)}
.ds .ds-legend--links a:hover{background:var(--ds-surface-soft)}
.ds .ds-legend--links a:hover span{color:var(--ds-brand)}
.ds .ds-legend--links a:focus-visible{outline:none;box-shadow:var(--ds-focus)}
/* 1.5.173 (brandbook 3.62): the dot of a series - the colour of its line on a chart, in a chip that switches the line, in the
   line of its summary and in the meta of its changes; a sixth series and further take the colours again with a dashed line,
   their dot is a ring. A chip switched off keeps the ring of its colour. */
.ds .ds-series-dot{display:inline-block;flex:none;width:10px;height:10px;margin-right:var(--ds-space-2);border-radius:50%;
  background:var(--ds-series,var(--ds-chart-6));box-shadow:inset 0 0 0 2px var(--ds-series,var(--ds-chart-6));vertical-align:-1px;
  transition:background var(--ds-fast) var(--ds-ease)}
.ds .ds-series-dot[data-color="1"]{--ds-series:var(--ds-chart-1)}
.ds .ds-series-dot[data-color="2"]{--ds-series:var(--ds-chart-2)}
.ds .ds-series-dot[data-color="3"]{--ds-series:var(--ds-chart-3)}
.ds .ds-series-dot[data-color="4"]{--ds-series:var(--ds-chart-4)}
.ds .ds-series-dot[data-color="5"]{--ds-series:var(--ds-chart-5)}
.ds .ds-series-dot[data-pattern="2"],.ds .ds-chip input:not(:checked)+span .ds-series-dot{background:transparent}
.ds [data-ds-chart-scope]>.ds-chips{margin-bottom:var(--ds-space-1)}
.ds [data-ds-chart-scope]>.ds-chart{margin-top:var(--ds-space-3)}
@media (max-width:720px){.ds .ds-chart{height:220px}}
/* Compact stat tiles inside a card (health distribution) and a stat that asks for attention. */
.ds .ds-stats--compact{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.ds .ds-stat--warning{border-color:var(--ds-warning-soft);background:var(--ds-warning-soft);--ds-stat-label:var(--ds-ink-muted)}
.ds .ds-stat--warning .ds-stat__value{color:var(--ds-warning)}
.ds .ds-sparkline{display:block;width:100%;height:64px;margin:0 0 var(--ds-space-2)}
.ds .ds-sparkline polyline{fill:none;stroke:var(--ds-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* A customer review: soft item with author, meta and stars; the search target is ringed and pulses twice. */
.ds .ds-review{display:flex;flex-direction:column;gap:var(--ds-space-3);padding:var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface);scroll-margin-top:96px;transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-review--rating-only{padding-top:var(--ds-space-3);padding-bottom:var(--ds-space-3);background:var(--ds-surface-soft)}
.ds .ds-review__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-3)}
.ds .ds-review__rating{flex:0 0 auto;font-size:16px;line-height:20px;letter-spacing:1px;color:var(--ds-warning)}
.ds .ds-review--contains-target{border-color:color-mix(in srgb,var(--ds-brand) 30%,var(--ds-line))}
.ds .ds-review--target{border-color:var(--ds-brand);box-shadow:var(--ds-focus);outline:none}
.ds .ds-review--pulse{animation:ds-target-pulse 720ms var(--ds-ease) 2}
@keyframes ds-target-pulse{0%,100%{box-shadow:var(--ds-focus)}50%{box-shadow:0 0 0 8px var(--ds-brand-soft)}}
@media (prefers-reduced-motion:reduce){.ds .ds-review--pulse{animation:none}}
.ds .ds-review__reply p{margin-top:var(--ds-space-1);font-size:14px;line-height:21px;color:var(--ds-ink)}
.ds .ds-code{margin:0;padding:var(--ds-space-3);border-radius:var(--ds-radius-sm);background:var(--ds-surface-soft);color:var(--ds-ink);
  font:400 12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}
.ds .ds-list__side .ds-input-group{flex-wrap:wrap;justify-content:flex-end}
.ds .ds-list__side .ds-input-group>.ds-control{flex:1 1 180px;min-width:160px}
.ds .ds-disclosure>summary .ds-badge{margin-left:var(--ds-space-2)}
@media (max-width:720px){
  .ds .ds-tray{left:var(--ds-space-4);right:var(--ds-space-4);width:auto;max-width:none;flex-wrap:nowrap;justify-content:space-between;padding:var(--ds-space-2) var(--ds-space-3)}
  .ds .ds-tray__items{display:none}
  .ds .ds-tray .ds-actions{flex-wrap:nowrap}
  .ds .ds-actionbar:has(.ds-actionbar__summary){flex-wrap:wrap}
  .ds .ds-actionbar:has(.ds-actionbar__summary) .ds-actions{flex:1 1 100%;flex-wrap:nowrap}
  .ds .ds-actionbar .ds-actions .ds-btn{flex:1 1 auto}
  .ds .ds-control--sm{height:44px;min-height:44px}
  .ds .ds-thumb--button{width:52px;height:52px}
  .ds .ds-review__head{flex-direction:column}
}

/* Photo editor (brandbook 3.11, product edit): .ds-media-grid > article.ds-media[data-media-id]. States are
   attributes set by product_media_editor.js: data-primary, data-pending-delete, data-dragging, data-drop-target. */
.ds .ds-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:var(--ds-space-4);margin-bottom:var(--ds-space-3)}
.ds .ds-media{display:flex;flex-direction:column;min-width:0;border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface-soft);overflow:hidden}
.ds .ds-media[data-primary]{border-color:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line))}
.ds .ds-media[data-dragging]{opacity:.6}
.ds .ds-media[data-drop-target]{border-color:var(--ds-brand);box-shadow:var(--ds-focus)}
.ds .ds-media__preview{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ds-surface);border-bottom:1px solid var(--ds-line-soft);
  transition:opacity var(--ds-fast) var(--ds-ease)}
.ds .ds-media[data-pending-delete] .ds-media__preview{opacity:.35}
.ds .ds-media__open{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;margin:0;padding:var(--ds-space-3);border:0;border-radius:0;
  background:transparent;box-shadow:none;font:400 13px/18px var(--ds-font);color:var(--ds-ink);cursor:zoom-in}
.ds .ds-media__open:focus-visible{outline:none;box-shadow:inset var(--ds-focus)}
.ds .ds-media__open img{display:block;width:100%;height:100%;object-fit:contain}
.ds .ds-media__badge{position:absolute;left:var(--ds-space-2);top:var(--ds-space-2)}
.ds .ds-media:not([data-primary]) .ds-media__badge{display:none}
.ds .ds-media__position{position:absolute;right:var(--ds-space-2);top:var(--ds-space-2);display:grid;place-items:center;min-width:24px;height:24px;
  padding:0 6px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);background:var(--ds-surface);
  font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-media__body{display:flex;flex-direction:column;gap:var(--ds-space-2);padding:var(--ds-space-3)}
.ds .ds-media__name{overflow:hidden;font-size:12px;line-height:16px;color:var(--ds-ink-muted);text-overflow:ellipsis;white-space:nowrap}
.ds .ds-media__row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);min-width:0}
.ds .ds-media__row .ds-control--sm{flex:1 1 auto;width:auto;min-width:64px}
.ds .ds-media__drag{cursor:grab}
.ds .ds-media[data-pending-delete] [data-media-delete]{background:var(--ds-danger-soft)}
/* Photo preview dialog: the picture fits the screen, arrows and the counter below. */
.ds .ds-dialog--media{width:min(920px,calc(100vw - 32px))}
.ds .ds-dialog__image{display:block;width:100%;max-height:min(70vh,640px);margin:var(--ds-space-3) 0;object-fit:contain;border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-dialog--media .ds-dialog__actions{justify-content:center;align-items:center}

/* Project card (1.5.82, brandbook 3.12) --------------------------------------------------------------- */
/* A folded page block: a card whose head is the summary (h2-sized title, one-line meta, chevron). */
.ds .ds-fold{border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);box-shadow:var(--ds-shadow-1);min-width:0}
.ds .ds-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);min-height:64px;padding:var(--ds-space-4) var(--ds-space-6);
  cursor:pointer;list-style:none;border-radius:var(--ds-radius-lg);transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-fold>summary::-webkit-details-marker{display:none}
.ds .ds-fold>summary:hover{background:var(--ds-surface-soft)}
.ds .ds-fold>summary:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-fold>summary::after{content:"";width:20px;height:20px;flex:0 0 20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2368788d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform var(--ds-base) var(--ds-ease)}
.ds .ds-fold[open]>summary::after{transform:rotate(180deg)}
.ds .ds-fold[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.ds .ds-fold__title{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .ds-fold__title b{font-size:18px;line-height:26px;font-weight:600;color:var(--ds-ink)}
.ds .ds-fold__title small{font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-fold__body{padding:0 var(--ds-space-6) var(--ds-space-6);animation:ds-fold-in var(--ds-base) var(--ds-ease)}
@keyframes ds-fold-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ds .ds-columns>.ds-subsection{margin-top:0}
.ds .ds-columns>.ds-disclosure{margin-top:0}
/* A group of fields (forecast scenario): no browser frame; the legend reads as a small heading. */
.ds fieldset.ds-field-grid{min-width:0;margin:0;padding:0;border:0}
.ds fieldset.ds-field-grid>legend{margin:0 0 var(--ds-space-2);padding:0;font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-stack--sm{gap:var(--ds-space-2)}
.ds .ds-subsection__head h3{display:flex;align-items:center;gap:var(--ds-space-2);margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds .ds-subsection>*+*{margin-top:var(--ds-space-3)}
.ds .ds-subsection>.ds-subsection__head+*{margin-top:0}
/* Readiness checklist: a round mark, done - soft green with a tick. */
.ds .ds-checklist{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:0;padding:0;list-style:none;font-size:14px;line-height:21px;color:var(--ds-ink-muted)}
.ds .ds-checklist li{display:flex;align-items:center;gap:var(--ds-space-3)}
.ds .ds-checklist li[data-done]{color:var(--ds-ink)}
.ds .ds-checklist__mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;border:1.5px solid var(--ds-line-strong);
  border-radius:var(--ds-radius-pill);font-size:12px;font-weight:700;line-height:1}
.ds .ds-checklist li[data-done] .ds-checklist__mark{border-color:var(--ds-success-soft);background:var(--ds-success-soft);color:var(--ds-success)}
/* History timeline: date, title, meta on a thin line with soft dots. */
.ds .ds-timeline{position:relative;display:flex;flex-direction:column;gap:var(--ds-space-3);margin:0;padding:0 0 0 var(--ds-space-5);list-style:none}
.ds .ds-timeline::before{content:"";position:absolute;top:6px;bottom:6px;left:5px;width:1px;background:var(--ds-line)}
.ds .ds-timeline li{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .ds-timeline li::before{content:"";position:absolute;top:5px;left:calc(-1 * var(--ds-space-5) + 1px);width:9px;height:9px;border:2px solid var(--ds-surface);border-radius:var(--ds-radius-pill);background:var(--ds-line-strong)}
.ds .ds-timeline li[data-state="good"]::before,.ds .ds-timeline li[data-state="done"]::before{background:var(--ds-success)}
.ds .ds-timeline li[data-state="risk"]::before{background:var(--ds-danger)}
.ds .ds-timeline li[data-state="attention"]::before{background:var(--ds-warning)}
.ds .ds-timeline time{font-size:12px;line-height:16px;color:var(--ds-ink-faint);font-variant-numeric:tabular-nums}
.ds .ds-timeline b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-timeline li.ds-list-empty::before{display:none}
.ds .ds-timeline .ds-meta{margin:0;font-size:12px;line-height:16px}
/* 1.5.115 (brandbook 3.39): the unified timeline of a card - the filter by kind in a row that scrolls sideways and fades at
   its end (as the filters of the search panel); the text of an event (a post of the room, the message of an order event) in
   three lines at most - the whole text is in its record. */
.ds .ds-feed__filters{display:flex;flex-direction:row;gap:var(--ds-space-1);margin:0 0 var(--ds-space-4);padding:0 var(--ds-space-6) 0 0;
  overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,var(--ds-ink) calc(100% - var(--ds-space-6)),transparent)}
.ds .ds-feed__filters::-webkit-scrollbar{display:none}
.ds .ds-feed .ds-list__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* Project timeline (Gantt): label column, track with a soft grid, rounded bar; app.js places bars and axis ticks. */
.ds .ds-gantt{overflow-x:auto;min-width:0}
.ds .ds-gantt__axis{position:relative;height:24px;margin-left:calc(160px + var(--ds-space-3));min-width:360px;border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-gantt__axis span{position:absolute;bottom:4px;transform:translateX(-50%);font-size:11px;line-height:14px;color:var(--ds-ink-muted);white-space:nowrap}
.ds .ds-gantt__axis span:first-child{transform:none}
.ds .ds-gantt__axis span:last-child{transform:translateX(-100%)}
.ds .ds-gantt__rows{display:flex;flex-direction:column;gap:var(--ds-space-1);min-width:calc(360px + 160px + var(--ds-space-3))}
.ds [data-gantt-zoom-level="compact"] .ds-gantt__rows{min-width:420px}
.ds [data-gantt-zoom-level="wide"] .ds-gantt__rows{min-width:960px}
.ds [data-gantt-zoom-level="wide"] .ds-gantt__axis{min-width:800px}
.ds .ds-gantt__row{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:var(--ds-space-3);min-height:40px}
.ds .ds-gantt__label{display:flex;flex-direction:column;min-width:0}
.ds .ds-gantt__label b{font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-gantt__label small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-gantt__track{position:relative;height:20px;border-radius:var(--ds-radius-sm);background:repeating-linear-gradient(90deg,var(--ds-surface-soft) 0,var(--ds-surface-soft) calc(10% - 1px),var(--ds-line-soft) calc(10% - 1px),var(--ds-line-soft) 10%)}
.ds .ds-gantt__track i{position:absolute;top:4px;bottom:4px;left:var(--gantt-left,0%);width:var(--gantt-width,5%);min-width:6px;border-radius:var(--ds-radius-pill);background:var(--ds-brand);
  transition:left var(--ds-base) var(--ds-ease),width var(--ds-base) var(--ds-ease)}
.ds .ds-gantt__row[data-status="completed"] .ds-gantt__track i{background:var(--ds-success)}
.ds .ds-gantt__row[data-status="blocked"] .ds-gantt__track i{background:var(--ds-danger)}
.ds .ds-gantt__row[data-status="cancelled"] .ds-gantt__track i{background:var(--ds-ink-faint)}
.ds .ds-gantt__row[data-overdue] .ds-gantt__track i{box-shadow:0 0 0 2px var(--ds-danger-soft)}
/* Snapshot chart: weighted pipeline as a bar, health as a dot coloured by state. */
.ds .ds-snapshots{display:flex;align-items:flex-end;gap:var(--ds-space-2);height:200px;overflow-x:auto;padding:var(--ds-space-3) var(--ds-space-2) 28px;
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-snapshots__column{position:relative;display:flex;align-items:flex-end;justify-content:center;flex:0 0 36px;height:100%}
.ds .ds-snapshots__column i{width:16px;height:var(--pipeline-height,10%);border-radius:var(--ds-radius-sm) var(--ds-radius-sm) calc(var(--ds-radius-sm) - 6px) calc(var(--ds-radius-sm) - 6px);background:color-mix(in srgb,var(--ds-brand) 45%,var(--ds-surface))}
.ds .ds-snapshots__column span{position:absolute;left:50%;bottom:var(--health-height,50%);width:10px;height:10px;border:2px solid var(--ds-surface);border-radius:var(--ds-radius-pill);background:var(--ds-warning);transform:translate(-50%,50%)}
.ds .ds-snapshots__column[data-health-state="good"] span{background:var(--ds-success)}
.ds .ds-snapshots__column[data-health-state="risk"] span{background:var(--ds-danger)}
.ds .ds-snapshots__column small{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:11px;line-height:14px;color:var(--ds-ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* File type tag in a document row, and a button that reads as a link (document preview). */
.ds .ds-filetype{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface-soft);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ds-ink-muted)}
.ds .ds-link{display:inline;min-height:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;text-align:left;color:var(--ds-ink);cursor:pointer}
.ds .ds-link:hover{color:var(--ds-brand)}
.ds .ds-link:focus-visible{outline:none;border-radius:var(--ds-radius-sm);box-shadow:var(--ds-focus)}
.ds .ds-list__side>form{margin:0}
/* The document preview panel (project_usability.js) lives in its own .ds host at body level. */
.ds .ds-popover--file{position:fixed;z-index:2200;display:flex;flex-direction:column;gap:var(--ds-space-3);width:min(724px,calc(100vw - 24px));padding:var(--ds-space-3)}
.ds .ds-popover--file>header,.ds .ds-popover--file>footer{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3);min-height:40px}
.ds .ds-popover--file>header>strong{min-width:0;font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-popover--file>img{display:block;width:100%;height:min(700px,calc(100dvh - 160px));object-fit:contain;border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-popover--file>p{margin:0;font-size:14px;line-height:21px;color:var(--ds-ink-muted)}
@media (max-width:720px){
  .ds .ds-fold>summary{padding:var(--ds-space-4)}
  .ds .ds-fold__body{padding:0 var(--ds-space-4) var(--ds-space-4)}
  .ds .ds-gantt__row{grid-template-columns:144px minmax(0,1fr)}
  .ds .ds-gantt__axis{margin-left:calc(144px + var(--ds-space-3))}
}
@media (prefers-reduced-motion:reduce){.ds .ds-fold__body{animation:none}}

/* 10. Sales (brandbook 3.13, 1.5.83): stage path of an opportunity, pipeline board, a danger stat tile. */
.ds .ds-stat--danger{border-color:var(--ds-danger-soft);background:var(--ds-danger-soft);--ds-stat-label:var(--ds-ink-muted)}
.ds .ds-stat--danger .ds-stat__value{color:var(--ds-danger)}
/* Stage path: every stage is a button of its own small form; passed stages soft blue, the current one filled. */
.ds .ds-steps{display:flex;flex-wrap:wrap;gap:var(--ds-space-1);margin:0;padding:var(--ds-space-1);list-style:none;
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);box-shadow:var(--ds-shadow-1)}
/* 1.5.153 (the owner, 17.10.2026: «проверь во всех разделах … не только на больших мониторах но и на ноутбуках»): a stage is never
   narrower than its longest word - at 1280 px «Квалификация» broke into «Квалификаци» / «я» in a stage of 111 px. The stage holds
   104 px and its words (the text breaks only between words), the stages share the rest and wrap to a next row when they do not fit. */
.ds .ds-steps>li{display:flex;flex:1 1 0;min-width:auto;margin:0;padding:0}
.ds .ds-steps form{display:flex;flex:1 1 auto;margin:0}
.ds .ds-steps__step{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:104px;min-height:36px;height:auto;margin:0;padding:var(--ds-space-1) var(--ds-space-2);
  border:0;border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;font:inherit;font-size:13px;line-height:18px;font-weight:600;
  color:var(--ds-ink-muted);text-align:center;overflow-wrap:break-word;cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-steps__step:hover{background:var(--ds-surface-soft);color:var(--ds-ink);transform:translateY(var(--ds-lift-sm))}
.ds .ds-steps__step:active{transform:none}
.ds .ds-steps__step:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-steps__step[data-state="done"]{background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-steps__step[aria-current="step"]{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-steps__step[aria-current="step"]:hover{background:var(--ds-brand-hover);color:var(--ds-on-color)}
.ds .ds-steps__step[aria-current="step"][data-tone="success"]{background:var(--ds-success)}
.ds .ds-steps__step[aria-current="step"][data-tone="danger"]{background:var(--ds-danger)}
/* Pipeline board: stage lanes side by side, scrolled inside the board (‹ › when they do not fit); cards lift (2.6). */
.ds .ds-board{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
.ds .ds-board__controls{display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-board.is-static .ds-board__controls{display:none}
.ds .ds-board__lanes{display:flex;align-items:flex-start;gap:var(--ds-space-3);min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding:var(--ds-space-1) var(--ds-space-1) var(--ds-space-3);scrollbar-width:thin}
.ds .ds-board__lane{display:flex;flex-direction:column;gap:var(--ds-space-3);flex:0 0 280px;min-width:0;padding:var(--ds-space-3);
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-lg);background:var(--ds-surface-soft);scroll-snap-align:start}
.ds .ds-board__head{display:flex;flex-direction:column;gap:2px;padding:0 var(--ds-space-1)}
.ds .ds-board__head h3{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds .ds-board__sum{font-size:18px;line-height:24px;font-weight:700;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds .ds-board__head small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-board__cards{display:flex;flex-direction:column;gap:var(--ds-space-2);min-width:0}
.ds .ds-board__card{display:flex;flex-direction:column;gap:var(--ds-space-1);min-width:0;padding:var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-md);background:var(--ds-surface);box-shadow:var(--ds-shadow-1);color:var(--ds-ink);text-decoration:none}
.ds .ds-board__card:hover{border-color:var(--ds-line-strong);color:var(--ds-ink)}
.ds .ds-board__card:focus-visible{outline:none}
.ds .ds-board__title{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:break-word}
.ds .ds-board__card:hover .ds-board__title{color:var(--ds-brand)}
/* 1.5.88: the card open next to its list (the chosen task) keeps a soft brand background, as the current tile. */
.ds .ds-board__card[aria-current="true"]{border-color:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line));background:var(--ds-brand-soft)}
.ds .ds-board__card .ds-meta{margin:0;gap:var(--ds-space-2);font-size:12px;line-height:16px}
.ds .ds-board__amount{font-size:15px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums}
.ds .ds-board__next{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:var(--ds-space-1) 0 0;padding-top:var(--ds-space-2);
  border-top:1px solid var(--ds-line-soft);font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-board__lane>.ds-list-empty{padding:var(--ds-space-3) var(--ds-space-1)}
/* 1.5.145 (brandbook 3.66): a deal moves on «Воронка» - the card is dragged to another stage or to «Выиграно» / «Проиграно» (the lanes
   of the outcome stand last, the colour of their head - success, danger), the lane under the card is marked; «Перенести» opens a
   dialog of the stages (the keyboard and the phone). The title of a card is its link. */
.ds .ds-board__card[draggable="true"]{cursor:grab}
.ds .ds-board__card.is-dragging{opacity:.5}
.ds .ds-board__lane.is-drop-target{border-color:var(--ds-brand);background:var(--ds-brand-soft)}
/* «Выиграно» и «Проиграно» — two zones under the board, the width of the board (the lanes of the stages scroll sideways and the
   last ones stood out of reach); while a card is dragged they stick to the bottom of the window. */
/* 1.5.219: «Выиграно» и «Проиграно» are lanes of the board too (their cards stay in view after the drop); the zones under the board
   show only while a card is dragged - laid over the bottom of the window across the width of the board (app.js sets
   --ds-board-left and --ds-board-width), they take no room and the page does not move. */
.ds .ds-board__outcomes{position:fixed;left:var(--ds-board-left,16px);width:var(--ds-board-width,auto);bottom:calc(var(--ds-shell-bottom) + var(--ds-space-4));
  z-index:30;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-3);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease),visibility 0s linear var(--ds-base)}
.ds .ds-board.is-dragging .ds-board__outcomes{opacity:1;visibility:visible;transform:none;transition:opacity var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease)}
.ds .ds-board.is-dragging .ds-board__outcome{box-shadow:var(--ds-shadow-3)}
.ds .ds-board__lane--closed[data-tone="success"]{border-color:color-mix(in srgb,var(--ds-success) 28%,var(--ds-line-soft));background:color-mix(in srgb,var(--ds-success-soft) 60%,var(--ds-surface-soft))}
.ds .ds-board__lane--closed[data-tone="danger"]{border-color:color-mix(in srgb,var(--ds-danger) 24%,var(--ds-line-soft));background:color-mix(in srgb,var(--ds-danger-soft) 55%,var(--ds-surface-soft))}
.ds .ds-board__lane--closed[data-tone="success"] .ds-board__head h3>span:first-child{color:var(--ds-success)}
.ds .ds-board__lane--closed[data-tone="danger"] .ds-board__head h3>span:first-child{color:var(--ds-danger)}
.ds .ds-board__lane--closed[data-tone="success"].is-drop-target{border-color:var(--ds-success);background:var(--ds-success-soft)}
.ds .ds-board__lane--closed[data-tone="danger"].is-drop-target{border-color:var(--ds-danger);background:var(--ds-danger-soft)}
.ds .ds-board__cards>.ds-btn{align-self:center}
.ds .ds-board__outcome{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--ds-space-3) var(--ds-space-4);
  border:1px dashed var(--ds-line-strong);border-radius:var(--ds-radius-lg);background:var(--ds-surface);font-size:12px;line-height:16px;
  color:var(--ds-ink-muted);transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-board__outcome b{font-size:15px;line-height:22px;font-weight:600}
.ds .ds-board__outcome[data-tone="success"] b{color:var(--ds-success)}
.ds .ds-board__outcome[data-tone="danger"] b{color:var(--ds-danger)}
.ds .ds-board__outcome[data-tone="success"].is-drop-target{border-style:solid;border-color:var(--ds-success);background:var(--ds-success-soft)}
.ds .ds-board__outcome[data-tone="danger"].is-drop-target{border-style:solid;border-color:var(--ds-danger);background:var(--ds-danger-soft)}
.ds a.ds-board__title{text-decoration:none}
.ds a.ds-board__title:focus-visible{outline:none;border-radius:var(--ds-radius-sm);box-shadow:var(--ds-focus)}
.ds .ds-board__foot{display:flex;justify-content:flex-end;margin-top:var(--ds-space-1)}
/* Editable product lines of an opportunity: small fields inside the register cells. */
.ds .ds-table td>.ds-control--sm{width:100%;min-width:64px}
/* 1.5.84 Cells of editable rows sit on the row's middle line (the legacy td rule set top): a title, a 32 px field and a
   button line up. 1.5.134: every table does (section 7); a row of fields keeps its height - 4 px above and under a field
   (a register of fields, --fit, keeps its own 8 px: «Остатки и ATP»). */
.ds .ds-table--lines:not(.ds-table--fit) td{padding-top:var(--ds-space-1);padding-bottom:var(--ds-space-1)}
.ds .ds-table td>.ds-actions{flex-wrap:nowrap}
/* Editable lines (opportunity products, brandbook 3.13): seven columns with fields do not fit below 1100 px,
   so there every row is already the phone card (label left, field right). */
@media (max-width:1100px){
  .ds .ds-table--lines thead{display:none}
  .ds .ds-table--lines,.ds .ds-table--lines tbody,.ds .ds-table--lines td{display:block;width:100%}
  .ds .ds-table--lines tr{display:flex;flex-direction:column;width:100%;padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line-soft)}
  .ds .ds-table--lines tr:last-child{border-bottom:0}
  .ds .ds-table--lines td{display:grid;grid-template-columns:minmax(96px,40%) minmax(0,1fr);align-items:center;column-gap:var(--ds-space-3);
    height:auto;padding:4px 0;border:0;text-align:right}
  .ds .ds-table--lines td::before{content:attr(data-label);grid-column:1;grid-row:1/span 9;font-size:12px;line-height:20px;font-weight:500;color:var(--ds-ink-muted);text-align:left}
  .ds .ds-table--lines td>*{grid-column:2;justify-self:end}
  .ds .ds-table--lines td:not([data-label]){grid-template-columns:minmax(0,1fr);text-align:left}
  .ds .ds-table--lines td:not([data-label])::before{content:none}
  .ds .ds-table--lines td:not([data-label])>*{grid-column:1;justify-self:stretch}
  .ds .ds-table--lines td.ds-table__action{padding-top:var(--ds-space-2)}
  .ds .ds-table--lines td.ds-table__action>*{justify-self:end}
  .ds .ds-table--lines td>.ds-control--sm{width:min(100%,280px)}
  /* 1.5.140 (brandbook 3.61): a cell of two fields one above the other (the column of a special price and its price) - the
     label above, the fields the whole width of the card: «Колонка Platinum» is not cut in the half of a narrow row. */
  .ds .ds-table--lines td:has(>.ds-stack){grid-template-columns:minmax(0,1fr);row-gap:var(--ds-space-1)}
  .ds .ds-table--lines td:has(>.ds-stack)::before{grid-row:1}
  .ds .ds-table--lines td:has(>.ds-stack)>.ds-stack{grid-column:1;grid-row:2;justify-self:stretch}
  .ds .ds-table-wrap:has(.ds-table--lines){overflow:visible}
}
@media (max-width:720px){
  .ds .ds-steps>li{flex:1 1 calc(33.333% - var(--ds-space-1));min-width:0}
  .ds .ds-steps__step{min-width:0;min-height:44px;overflow-wrap:anywhere}
  /* On phones the lanes stack: no sideways scrolling of the page or the board. */
  .ds .ds-board__lanes{flex-direction:column;align-items:stretch;overflow:visible;padding:0}
  .ds .ds-board__lane{flex:1 1 auto}
}
/* 1.5.153: a phone narrower than 380 px (360) - three stages in a row are 104 px and «Квалификация» needs 113; two in a row. */
@media (max-width:379px){.ds .ds-steps>li{flex-basis:calc(50% - var(--ds-space-1))}}

/* 11. Presales request (brandbook 3.14, 1.5.84): the RFI answer matrix. Every requirement is a ds-item: the head
   (ID, requirement, status badge), a meta line, then the answer (grows) and two narrow columns — model and status,
   comment and confidence. From 1100 px the answer takes the full row; on phones one column. */
/* A subsection inside a stack keeps the usual 24 px above its divider (the stack gap counts). */
.ds .ds-stack>.ds-subsection{margin-top:var(--ds-space-2)}
.ds .ds-answers{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
.ds .ds-answers>.ds-item+.ds-item{margin-top:0}
.ds .ds-answer .ds-item__head{align-items:flex-start;margin-bottom:var(--ds-space-1)}
.ds .ds-answer .ds-item__head>b{overflow-wrap:anywhere}
.ds .ds-answer__meta{margin:0 0 var(--ds-space-3);font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-answer__grid{display:grid;grid-template-columns:minmax(0,1fr) 232px 232px;gap:var(--ds-space-3) var(--ds-space-4);align-items:start;min-width:0}
.ds .ds-answer__grid .ds-label{font-size:12px;line-height:16px}
.ds .ds-answer__grid textarea.ds-control{min-height:96px}
.ds .ds-answer__confidence{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-answer__confidence b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds .ds-answer__confidence .ds-progress{margin:2px 0 4px}
.ds .ds-answer__confidence>span{overflow-wrap:anywhere}
@media (max-width:1100px){
  .ds .ds-answer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds .ds-answer__grid>:first-child{grid-column:1/-1}
}
@media (max-width:720px){.ds .ds-answer__grid{grid-template-columns:minmax(0,1fr)}}

/* 12. Sales screens (brandbook 3.15, 1.5.85): the workspace, activities, cockpit, decision centre, plans, forecast, graph.
   Eight figures of a day stand in two even rows of four (never six plus two); two per row below 1100 px. */
.ds .ds-stats--quad{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.ds .ds-stats--quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 1.5.89 (brandbook 3.19): six figures (sell-through) stand in one row of six, in two rows of three below 1300 px and in
   three rows of two on a phone - never five plus one. */
.ds .ds-stats--six{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1300px){.ds .ds-stats--six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.ds .ds-stats--six{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* An activity type as a round glyph in front of a queue row (call, meeting, letter …), the size of a row avatar. */
.ds .ds-avatar--glyph{font-size:18px;font-weight:400;line-height:1}
/* Decision rows (decision centre): what is decided on top, the decision with its comment under it, full width. */
.ds .ds-list--decisions .ds-list__item{flex-direction:column;align-items:stretch;gap:var(--ds-space-3)}
.ds .ds-list--decisions .ds-list__item>:is(.ds-list__main,.ds-list__lead){flex:0 1 auto}
.ds .ds-list--decisions .ds-list__side{justify-content:flex-start}
/* The comment of a decision keeps room for its words: where the field and both buttons do not fit (a phone), the field
   takes the row and the buttons go under it. */
.ds .ds-list--decisions .ds-input-group{flex-wrap:wrap}
.ds .ds-list--decisions .ds-input-group>.ds-control{flex:1 1 220px}
@media (max-width:720px){.ds .ds-list--decisions .ds-input-group>.ds-control{flex-basis:100%}}
/* A score or priority number in front of a row keeps one width, so the titles of the rows line up (risks; routing rules
   with priorities 10 … 900 - ds-list--priority; numbered steps 1 … 9 keep their own size). */
.ds .ds-list__lead>.ds-badge--count{min-width:32px}
.ds .ds-list--priority .ds-list__lead>.ds-item__num{min-width:40px}
/* A disclosure inside a table cell (the factors of a forecast): a quiet text summary with its chevron, no frame. */
.ds .ds-disclosure--inline{margin:0;border:0;border-radius:0;background:transparent}
.ds .ds-disclosure--inline>summary{justify-content:flex-start;gap:var(--ds-space-2);height:auto;min-height:32px;padding:0;
  font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink);border-radius:var(--ds-radius-sm)}
.ds .ds-disclosure--inline>summary:hover{background:transparent;color:var(--ds-brand)}
.ds .ds-disclosure--inline>summary:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-disclosure--inline>summary::after{margin-left:0}
.ds .ds-disclosure--inline .ds-disclosure__body{padding:var(--ds-space-2) 0 0}
/* Factors behind a confidence: a signed weight and the reason in words. */
.ds .ds-factors{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--ds-space-2);padding:0;list-style:none}
.ds .ds-factors li{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px var(--ds-space-2);font-size:12px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-factors .ds-badge{flex:0 0 auto;min-width:36px}
/* In a narrow cell (a 760 px screen) the reason goes under its weight instead of leaving the cell. */
.ds .ds-factors li>span:not(.ds-badge){flex:1 1 120px;min-width:0;overflow-wrap:break-word}

/* 13. Orders (brandbook 3.16, 1.5.86): the product pick cards of the order builder, the row flash and states of its
   lines, and a container fill over capacity. */
/* Found products: a scrolled list of pick cards (the builder loads more at the end of the list). */
.ds .ds-picks{display:flex;flex-direction:column;gap:var(--ds-space-2);max-height:560px;margin-top:var(--ds-space-3);padding:2px 4px 4px 2px;
  overflow:auto;overscroll-behavior:contain}
.ds .ds-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ds-space-2) var(--ds-space-4);
  padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-pick__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds .ds-pick__title{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-pick__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;line-height:18px;color:var(--ds-ink);
  overflow-wrap:break-word}
.ds .ds-pick .ds-list__meta{font-size:12px;line-height:16px}
.ds .ds-pick__side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.ds .ds-pick__price{font-size:15px;line-height:20px;font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums}
/* A line that is added or grows flashes softly (the builder since 1.3). */
.ds .ds-table tbody tr.ds-row-flash td{animation:ds-row-flash 700ms var(--ds-ease)}
@keyframes ds-row-flash{from{background:var(--ds-brand-soft)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.ds .ds-table tbody tr.ds-row-flash td{animation:none}}
/* A line short of stock is tinted, a line covered by an inbound supply carries a green edge. */
.ds .ds-table tbody tr[data-line-state="shortage"] td{background:color-mix(in srgb,var(--ds-warning-soft) 55%,transparent)}
.ds .ds-table tbody tr[data-line-state="future"] td:first-child{box-shadow:inset 3px 0 0 var(--ds-success)}
/* Container fill over capacity. */
.ds .ds-progress[data-over]{color:var(--ds-danger)}
.ds .ds-progress[data-over]::-webkit-progress-value{background:var(--ds-danger)}
.ds .ds-progress[data-over]::-moz-progress-bar{background:var(--ds-danger)}
/* 1.5.88: above the usable capacity of a container but within the nominal one - a warning, as its badge. */
.ds .ds-progress[data-over="warning"]{color:var(--ds-warning)}
.ds .ds-progress[data-over="warning"]::-webkit-progress-value{background:var(--ds-warning)}
.ds .ds-progress[data-over="warning"]::-moz-progress-bar{background:var(--ds-warning)}
/* 1.5.156: the tone of a bar is the tone of the state badge beside it (the plan and the fact: a month or a plan reached or ahead -
   success, behind - warning); without a tone the bar is the brand's. */
.ds .ds-progress[data-tone="success"]{color:var(--ds-success)}
.ds .ds-progress[data-tone="success"]::-webkit-progress-value{background:var(--ds-success)}
.ds .ds-progress[data-tone="success"]::-moz-progress-bar{background:var(--ds-success)}
.ds .ds-progress[data-tone="warning"]{color:var(--ds-warning)}
.ds .ds-progress[data-tone="warning"]::-webkit-progress-value{background:var(--ds-warning)}
.ds .ds-progress[data-tone="warning"]::-moz-progress-bar{background:var(--ds-warning)}
/* The row opened below or above its register (an import of the PO journal) keeps a soft brand background. */
.ds .ds-table tbody tr[aria-current="true"] td,.ds .ds-table tbody tr[aria-current="true"]:hover td{background:var(--ds-brand-soft)}
/* Tiles of saved records (order templates): .ds-grid--wide > .ds-item.ds-tile - head, pairs, and the actions at the
   bottom, level across the row. */
.ds .ds-grid--wide{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--ds-space-4)}
.ds .ds-tile{display:flex;flex-direction:column;gap:var(--ds-space-4);min-width:0}
.ds .ds-tile>.ds-item__head{margin:0;align-items:flex-start}
.ds .ds-tile>.ds-item__head>b{overflow-wrap:anywhere}
.ds .ds-tile>.ds-actions{margin-top:auto}
@media (max-width:720px){
  .ds .ds-pick{grid-template-columns:minmax(0,1fr)}
  .ds .ds-pick__side{align-items:stretch;text-align:left}
  .ds .ds-picks{max-height:480px}
  /* A stacked row is a card: the chosen one is tinted as a whole, not cell by cell inside its padding. */
  .ds .ds-table--stack tbody tr[aria-current="true"]{background:var(--ds-brand-soft)}
  .ds .ds-table--stack tbody tr[aria-current="true"] td,.ds .ds-table--stack tbody tr[aria-current="true"]:hover td{background:transparent}
  /* The states of a builder line mark the whole card of the line (the edge and the tint would hug the text of a cell). */
  .ds .ds-table--lines tbody tr[data-line-state="shortage"]{background:color-mix(in srgb,var(--ds-warning-soft) 55%,transparent)}
  .ds .ds-table--lines tbody tr[data-line-state="shortage"] td{background:transparent}
  .ds .ds-table--lines tbody tr[data-line-state="future"]{box-shadow:inset 3px 0 0 var(--ds-success)}
  .ds .ds-table--lines tbody tr[data-line-state="future"] td:first-child{box-shadow:none}
  /* The total row is a card too: the line above it spans the card. */
  .ds .ds-table--lines tfoot{display:block;width:100%}
  .ds .ds-table--lines tfoot tr{border-top:1px solid var(--ds-line)}
  .ds .ds-table--lines tfoot td{border-top:0}
}

/* 14. Logistics (brandbook 3.17, 1.5.87): the milestone plan of a shipment as a timeline with its states on the right, a
   list entry with a body under its row (a document with its files and forms), inline disclosures side by side, the
   readiness line of the document checklist. */
/* 1.5.153: the side (the kind and the state of an event) goes under the text when both do not fit beside each other - at 1101 px
   the text of the timeline of a company kept 111 px and broke «дистрибьютором» in the middle. */
.ds .ds-timeline__row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-2) var(--ds-space-4);min-width:0}
.ds .ds-timeline__main{display:flex;flex-direction:column;gap:2px;flex:1 1 240px;min-width:0}
.ds .ds-timeline__side{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);max-width:100%}
.ds .ds-timeline--steps{gap:var(--ds-space-4)}
.ds .ds-timeline--steps>li>.ds-disclosure--inline{margin-top:var(--ds-space-1)}
.ds .ds-timeline .ds-list__text{margin-top:0}
/* A list entry with a body: the row (main | side), and under it the whole width - the files of a document, its forms,
   the decision on an exception. On a wide screen the side keeps to the top of a text of several lines. */
.ds .ds-list__body{display:flex;flex-direction:column;gap:var(--ds-space-3);flex:1 1 100%;min-width:0}
@media (min-width:721px){.ds .ds-list__item:has(>.ds-list__body){align-items:flex-start}}
.ds .ds-list--files{padding:var(--ds-space-2) var(--ds-space-4);border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-list--files .ds-list__item{padding:var(--ds-space-2) 0}
.ds .ds-list--files .ds-list__item:first-child{padding-top:0}
.ds .ds-list--files .ds-list__item:last-child{padding-bottom:0}
/* Inline disclosures side by side («Загрузить файл», «Решение по документу»); an open one takes its own row. */
.ds .ds-inline-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--ds-space-1) var(--ds-space-5);min-width:0}
.ds .ds-inline-actions>.ds-disclosure[open]{flex:1 1 100%}
/* A readiness line: the words and the count, then the bar. */
.ds .ds-meter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-4);font-size:14px;line-height:21px;color:var(--ds-ink-muted)}
.ds .ds-meter b{color:var(--ds-ink);font-weight:600}
.ds .ds-meter>.ds-progress{flex:1 1 200px}
/* 1.5.88: meters one under another (the usable and the nominal capacity of a container) share their columns - labels,
   values and bars start on one line; on a phone each bar goes under its label and value, and the value stands under its
   label in every meter (a longer label does not wrap one meter and leave the other on one line). */
.ds .ds-meters{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);align-items:center;gap:var(--ds-space-3) var(--ds-space-4)}
.ds .ds-meters>.ds-meter{display:contents}
.ds .ds-meters .ds-progress{margin:0}
@media (max-width:720px){
  .ds .ds-meters{grid-template-columns:minmax(0,1fr) max-content;row-gap:var(--ds-space-2)}
  .ds .ds-meters>.ds-meter>span:first-child>b{display:block}
  .ds .ds-meters .ds-progress{grid-column:1/-1;margin-bottom:var(--ds-space-2)}
}
/* A cost item: an item block whose parts (head, description, figures, forms) stand in a column with even air. */
.ds .ds-item--stack{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
.ds .ds-item--stack>.ds-item__head{margin:0}
.ds .ds-item__text{margin:0;font-size:14px;line-height:21px;color:var(--ds-ink);overflow-wrap:break-word}
/* Links in a timeline title (a shipment) read as text and turn blue on hover, like register titles. */
.ds .ds-timeline b a{color:var(--ds-ink)}
.ds .ds-timeline b a:hover{color:var(--ds-brand)}
/* The meta row of a timeline entry (place, new ETA, author; «·» drawn by .ds-list__meta) is as small as the author line
   of the order history. */
.ds .ds-timeline>li>.ds-list__meta{font-size:12px;line-height:16px}
/* 1.5.88: a container plan line that is not whole master cartons (it blocks «Готов» and the commit) - the soft warning
   of a builder line short of stock. */
.ds .ds-table tbody tr[data-line-state="partial"] td{background:color-mix(in srgb,var(--ds-warning-soft) 55%,transparent)}
@media (max-width:720px){
  .ds .ds-table--stack tbody tr[data-line-state="partial"]{background:color-mix(in srgb,var(--ds-warning-soft) 55%,transparent)}
  .ds .ds-table--stack tbody tr[data-line-state="partial"] td{background:transparent}
}
/* A switch in a row of fields (ds-switch--field) sits on the line of the controls, not of the labels; a switch on a row
   of its own (the product form) keeps its own height. */
.ds .ds-field-grid>.ds-switch--field{align-self:end;min-height:var(--ds-control-h)}
@media (max-width:720px){
  .ds .ds-timeline__row{flex-direction:column;align-items:stretch}
  .ds .ds-timeline__main{flex:0 1 auto}
  .ds .ds-timeline__side{justify-content:flex-start}
  /* A file keeps its download button on its right on phones too. */
  .ds .ds-list--files .ds-list__item{flex-direction:row;align-items:center}
}

/* Hover lift (brandbook 2.6, owner's decision 24.09.2026): EVERY tile and item card rises by --ds-lift and casts
   --ds-shadow-2 while the pointer is over it — clickable or not: stat tiles, price, logistics and specification
   tiles, related records, repeated items, option cards, thumbnails, reviews, link lists, avatar links. Page
   blocks (.ds-card) are containers and stay put. Focus from the keyboard lifts links the same way; pressing
   puts the tile back. Declared after every component so that its transition covers them all. */
.ds :is(.ds-stat,.ds-entity,.ds-item,.ds-option,.ds-thumb,.ds-review,.ds-media,.ds-dl--tiles>div,.ds-link-list a,a.ds-avatar,.ds-board__card,.ds-pick){
  transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease),
    box-shadow var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds :is(.ds-stat,.ds-entity,.ds-item,.ds-option,.ds-thumb,.ds-review,.ds-media,.ds-dl--tiles>div,.ds-link-list a,a.ds-avatar,.ds-board__card,.ds-pick):hover,
.ds :is(a.ds-stat,a.ds-entity,.ds-link-list a,a.ds-avatar,a.ds-thumb,button.ds-thumb,a.ds-board__card):focus-visible{transform:translateY(var(--ds-lift));box-shadow:var(--ds-shadow-2)}
.ds :is(a.ds-stat,a.ds-entity,.ds-link-list a,a.ds-avatar,a.ds-thumb,button.ds-thumb,a.ds-board__card):focus-visible{outline:none;box-shadow:var(--ds-shadow-2),var(--ds-focus)}
.ds :is(a.ds-stat,a.ds-entity,.ds-link-list a,a.ds-avatar,a.ds-thumb,button.ds-thumb,.ds-option,a.ds-board__card):active{transform:none}
/* Rings of the current thumbnail and of the found review stay visible under the lift shadow. */
.ds .ds-thumb--current:hover{box-shadow:var(--ds-shadow-2),0 0 0 2px var(--ds-brand-soft)}
.ds .ds-review--target:hover{box-shadow:var(--ds-shadow-2),var(--ds-focus)}

/* hidden always wins: every ds component sets display, which would otherwise
   override the hidden attribute (the 1.5.69 always-visible duplicate warning).
   The id in :not() lifts specificity above any class-based component rule. */
.ds [hidden]:not(#ds-hidden-guard){display:none}

@media (max-width:1100px){.ds .ds-split,.ds .ds-pair{grid-template-columns:minmax(0,1fr)}}

/* 15. Sell-through explorer, imports and Board Pack (brandbook 3.20, 1.5.90) --------------------------------------- */
/* The layout of a pivot: the fields of the Weekly report as pills in two groups (the search filters them), under them four
   drop zones in a row and the row options. A field is a quiet pill like ds-chip (a hover and a pressed state, no lift);
   a zone takes the soft brand colour while a field is dragged over it; a field in a zone is a token (grip, name, «×»,
   under it the member filter or «как считать»). */
.ds .ds-pivot{display:flex;flex-direction:column;gap:var(--ds-space-5);min-width:0}
.ds .ds-pivot__fields{display:flex;flex-direction:column;gap:var(--ds-space-4);min-width:0}
.ds .ds-pivot__fields>.ds-search{max-width:320px}
.ds .ds-pivot__lists{display:flex;flex-direction:column;gap:var(--ds-space-4);min-width:0}
.ds .ds-pivot__group h3{margin:0 0 var(--ds-space-2);font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-pivot__list{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-space-2)}
.ds .ds-pivot__field{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ds-space-2);width:auto;max-width:100%;min-height:32px;margin:0;
  padding:var(--ds-space-1) var(--ds-space-3);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);box-shadow:none;
  font:inherit;font-size:13px;line-height:18px;font-weight:500;color:var(--ds-ink);text-align:left;text-transform:none;letter-spacing:0;cursor:grab;
  transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-pivot__field:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-soft);color:var(--ds-ink);transform:none;box-shadow:none}
.ds .ds-pivot__field:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-pivot__field[aria-pressed="true"]{border-color:var(--ds-brand-soft);background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-pivot__glyph{flex:0 0 12px;font-weight:700;text-align:center;color:var(--ds-ink-faint)}
.ds .ds-pivot__field[data-kind="metric"] .ds-pivot__glyph,.ds .ds-pivot__field[aria-pressed="true"] .ds-pivot__glyph{color:var(--ds-brand)}
.ds .ds-pivot__field .ds-pivot__name{min-width:0;overflow-wrap:anywhere}
.ds .ds-pivot__zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-4);align-content:start;min-width:0}
.ds .ds-pivot__zone{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0;padding:var(--ds-space-4);background:var(--ds-surface-soft);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-pivot__zone[data-over]{border-color:var(--ds-brand);background:var(--ds-brand-soft);box-shadow:var(--ds-focus)}
.ds .ds-pivot__zone-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--ds-space-1) var(--ds-space-3)}
.ds .ds-pivot__zone-head h3{font-size:14px;line-height:20px}
.ds .ds-pivot__zone-body{display:flex;flex-direction:column;gap:var(--ds-space-2);min-height:76px}
.ds .ds-pivot__zone-body:empty::after{content:attr(data-empty);display:flex;align-items:center;justify-content:center;min-height:76px;padding:var(--ds-space-3);
  border:1px dashed var(--ds-line-strong);border-radius:var(--ds-radius-md);font-size:13px;line-height:18px;color:var(--ds-ink-muted);text-align:center}
.ds .ds-pivot__options{grid-column:1/-1;max-width:960px}
.ds .ds-pivot__token{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"grip name remove" "setting setting setting";align-items:center;
  gap:var(--ds-space-1) var(--ds-space-2);padding:var(--ds-space-1) var(--ds-space-1) var(--ds-space-2) var(--ds-space-3);background:var(--ds-surface);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-1);cursor:grab;animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-pivot__grip{grid-area:grip;width:8px;height:14px;background:radial-gradient(circle,var(--ds-ink-faint) 1.2px,transparent 1.6px) 0 0/4px 4.67px}
/* The grip of a field is also its menu (a phone, the keyboard): «В фильтры», «В колонки», «В строки», «Выше», «Ниже». The dots
   stay 8 x 14, the target around them is 20 x 28; the dots take the brand colour under the pointer and while it is open. */
.ds .ds-pivot__move{grid-area:grip;display:block}
.ds .ds-pivot__move>summary.ds-pivot__grip{box-sizing:content-box;display:block;margin:-7px -6px;padding:7px 6px;border-radius:var(--ds-radius-sm);
  background-origin:content-box;background-clip:content-box;cursor:pointer;transition:box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-pivot__move>summary.ds-pivot__grip:hover,.ds .ds-pivot__move[open]>summary.ds-pivot__grip{background-image:radial-gradient(circle,var(--ds-brand) 1.2px,transparent 1.6px)}
.ds .ds-pivot__move>summary.ds-pivot__grip:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-pivot__token>.ds-pivot__name{grid-area:name;min-width:0;font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-pivot__token>.ds-pivot__remove{grid-area:remove}
.ds .ds-pivot__token>:is(.ds-pivot__filter,.ds-pivot__calc){grid-area:setting;width:100%;min-width:0}
.ds .ds-pivot__filter{justify-content:flex-start;max-width:none;height:auto;min-height:32px;padding:var(--ds-space-1) var(--ds-space-2);font-weight:500;line-height:18px;
  color:var(--ds-ink-muted);text-align:left;white-space:normal}
.ds .ds-pivot__filter span{min-width:0;overflow-wrap:anywhere}
.ds .ds-pivot__filter svg{flex:0 0 14px;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ds .ds-pivot__filter[data-active]{background:var(--ds-brand-soft);color:var(--ds-brand)}
/* What the pivot shows, the member filter of a field (a dialog), the pivot as a matrix: row labels fixed while it scrolls
   in its frame, the header rows fixed on top, the «Итого» column and row on the soft surface. */
.ds .ds-pivot__context{display:flex;flex-direction:column;gap:var(--ds-space-2);padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-pivot__slice{display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-5);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-pivot__slice b{font-weight:600;color:var(--ds-ink)}
.ds .ds-dialog--wide{width:min(640px,calc(100vw - 32px))}
.ds .ds-pivot__summary{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-pivot__members{display:flex;flex-direction:column;max-height:min(340px,40vh);overflow:auto;overscroll-behavior:contain;padding:var(--ds-space-1);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md)}
.ds .ds-pivot__member{display:grid;flex-direction:row;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--ds-space-3);min-height:36px;margin:0;
  padding:var(--ds-space-1) var(--ds-space-3);border-radius:var(--ds-radius-sm);font-size:14px;line-height:20px;font-weight:400;color:var(--ds-ink);cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-pivot__member:hover{background:var(--ds-surface-soft)}
.ds .ds-pivot__member span{min-width:0;overflow-wrap:anywhere}
.ds .ds-pivot__member small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-pivot__members>:is(.ds-pivot__state,.ds-error,.ds-hint){padding:var(--ds-space-4) var(--ds-space-3)}
.ds .ds-pivot__state{font-size:13px;line-height:18px;color:var(--ds-ink-muted);text-align:center}
.ds .ds-table-scroll{max-height:560px;overflow:auto;overscroll-behavior:contain;border-radius:0 0 var(--ds-radius-lg) var(--ds-radius-lg)}
/* The frame of a matrix that scrolls inside (.ds-table-scroll) does not clip: the «Экспорт» menu of its bar opens over the page. */
.ds .ds-table-wrap:has(>.ds-table-scroll){overflow:visible}
.ds .ds-table--pivot{width:max-content;min-width:100%;table-layout:auto}
.ds .ds-table--pivot :is(th,td){white-space:nowrap}
.ds .ds-table--pivot td{height:auto;min-height:44px;padding:var(--ds-space-2) var(--ds-space-4);vertical-align:top}
.ds .ds-table--pivot .ds-pivot__label{max-width:280px;white-space:normal;overflow-wrap:anywhere;text-align:left}
.ds .ds-table--pivot tbody td:first-child,.ds .ds-table--pivot tfoot th:first-child{position:sticky;left:0;z-index:1;background:var(--ds-surface)}
.ds .ds-table--pivot thead tr:first-child th:first-child{left:0;z-index:3}
.ds .ds-table--pivot thead tr+tr th{top:40px}
.ds .ds-table--pivot tbody tr:hover td:first-child{background:var(--ds-surface-soft)}
.ds .ds-table--pivot .ds-pivot__total{background:var(--ds-surface-soft);font-weight:600}
.ds .ds-table--pivot tfoot :is(th,td){position:sticky;top:auto;bottom:0;height:48px;padding:0 var(--ds-space-4);background:var(--ds-surface-soft);border-top:1px solid var(--ds-line);
  border-bottom:0;font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);text-align:right;vertical-align:middle}
.ds .ds-table--pivot tfoot th:first-child{z-index:2;background:var(--ds-surface-soft);text-align:left}
.ds .ds-table [data-trend="up"]{color:var(--ds-success)}
.ds .ds-table [data-trend="down"]{color:var(--ds-danger)}
/* A choice among a few visual variants (the type of a chart): a grid of quiet buttons with a line icon, the chosen one
   in the soft brand colour (aria-pressed). */
/* 1.5.153: two in a row while each holds the icon and a word of eleven letters (152 px), otherwise one in a row - at 1280 px the
   column of 142 px broke «С накоплением» into «накоплени» / «ем». The text breaks only between words. */
.ds .ds-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(152px,calc((100% - var(--ds-space-2)) / 2)),1fr));gap:var(--ds-space-2)}
.ds .ds-choice{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ds-space-2);min-width:0;max-width:none;min-height:40px;margin:0;
  padding:var(--ds-space-2) var(--ds-space-3);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);box-shadow:none;
  font:inherit;font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink);text-align:left;text-transform:none;letter-spacing:0;cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-choice svg{flex:0 0 22px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ds-ink-muted);
  transition:color var(--ds-fast) var(--ds-ease)}
.ds .ds-choice span{min-width:0;overflow-wrap:break-word}
.ds .ds-choice:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-soft);color:var(--ds-ink);transform:none;box-shadow:none}
.ds .ds-choice:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-choice[aria-pressed="true"]{border-color:var(--ds-brand);background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-choice[aria-pressed="true"] svg{color:var(--ds-brand)}
.ds .ds-chart--tall{height:420px}
/* A report of pages (the Board Pack): on the screen every page is a card with its head (title, subtitle, the brands) and
   foot (the report and the page number); printed, every page is a landscape A4 sheet - static/ds_print.css, loaded only
   by report pages. */
.ds .ds-report{display:flex;flex-direction:column;gap:var(--ds-space-6)}
.ds .ds-report__page{display:flex;flex-direction:column;gap:var(--ds-space-5);min-width:0}
.ds .ds-report__head{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-4);padding-bottom:var(--ds-space-4);
  border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-report__head p{margin-top:2px;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-report__brand{flex:0 0 auto;font-size:12px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--ds-ink-muted);white-space:nowrap}
.ds .ds-report__block{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
/* A small table of a report (the comparison with last year): sized by its content - the figures keep their width, the
   first column takes what is left and wraps. Not a register: no fitted widths that would stay on a printed sheet. */
.ds .ds-table--report{table-layout:auto}
.ds .ds-table--report :is(th,td){padding:0 var(--ds-space-3);white-space:nowrap;vertical-align:middle}
.ds .ds-table--report :is(th,td):first-child{width:100%;padding-left:var(--ds-space-4);white-space:normal;overflow-wrap:break-word}
/* 1.5.111: on a narrower screen the cells of a report come closer (8 px): the regions of the Board Pack keep their names whole
   («Нижегородская» broke in the middle at 1100 px) and the table still fits its half of the page. A phone stacks the
   report into cards (3.7) and keeps their padding. */
@media (min-width:721px) and (max-width:1200px){.ds .ds-table--report :is(th,td):not(:first-child){padding:0 var(--ds-space-2)}}
.ds .ds-report__block h3{font-size:15px;line-height:22px}
.ds .ds-report__foot{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:var(--ds-space-2) var(--ds-space-4);margin-top:auto;
  padding-top:var(--ds-space-4);border-top:1px solid var(--ds-line-soft);font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
@media (max-width:1100px){
  .ds .ds-pivot__zones{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .ds .ds-pivot__zones{grid-template-columns:minmax(0,1fr)}
  .ds .ds-pivot__fields>.ds-search{max-width:none}
  .ds .ds-pivot__field{min-height:40px}
  .ds .ds-choice{min-height:44px}
  .ds .ds-chart--tall{height:300px}
  .ds .ds-report__head{flex-direction:column;gap:var(--ds-space-1)}
  .ds .ds-table--pivot .ds-pivot__label{max-width:160px}
}

/* 1.5.91 (design stage 6c): administration. Quick profiles of rights - the choices wrap in a row of their own width. */
.ds .ds-choices--wrap{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
/* A quick profile the company type cannot hold (an L2 partner does not order) stays visible but quiet. */
.ds .ds-choice:disabled,.ds .ds-choice:disabled:hover{opacity:.5;cursor:not-allowed;background:var(--ds-surface);border-color:var(--ds-line)}
/* A live indicator (the audit journal updates itself): a green dot that pulses softly, grey on pause, red without a
   connection. The old console had the pulse (1.8 s) - kept, still under reduced motion. */
.ds .ds-live{display:inline-flex;align-items:center;gap:var(--ds-space-2);min-height:var(--ds-control-h);min-width:0;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-live__dot{flex:0 0 10px;width:10px;height:10px;border-radius:var(--ds-radius-pill);background:var(--ds-success);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ds-success) 16%,transparent);animation:ds-live-pulse 1800ms var(--ds-ease) infinite}
.ds .ds-live[data-state="paused"] .ds-live__dot{background:var(--ds-ink-faint);box-shadow:none;animation:none}
.ds .ds-live[data-state="error"] .ds-live__dot{background:var(--ds-danger);box-shadow:0 0 0 4px var(--ds-danger-soft);animation:none}
@keyframes ds-live-pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--ds-success) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.ds .ds-live__dot{animation:none}}
/* The journal as a history: a security record has a brand dot; a record that arrives live flashes softly (the old
   console faded it in 2.4 s); the details of a record open under it. */
.ds .ds-timeline li[data-state="brand"]::before{background:var(--ds-brand)}
.ds .ds-timeline--log{gap:var(--ds-space-4)}
.ds .ds-timeline--log>li{border-radius:var(--ds-radius-md)}
.ds .ds-timeline--log>li.ds-row-flash{animation:ds-log-flash 2400ms var(--ds-ease)}
@keyframes ds-log-flash{from{background:var(--ds-brand-soft);box-shadow:0 0 0 var(--ds-space-2) var(--ds-brand-soft)}to{background:transparent;box-shadow:0 0 0 var(--ds-space-2) transparent}}
@media (prefers-reduced-motion:reduce){.ds .ds-timeline--log>li.ds-row-flash{animation:none}}
.ds .ds-timeline--log .ds-disclosure--inline{margin-top:var(--ds-space-1)}
.ds .ds-timeline--log .ds-code{max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
/* 1.5.244 (brandbook 3.126): the output of an installation («Обновление портала») - a long log read to its end: taller, the
   last lines in view (portal_update.js keeps it scrolled down while it grows). */
.ds .ds-code--tall{max-height:min(70vh,640px)}
/* On a phone card the buttons of a row (a recovery request: «Ссылка сброса», «Временный пароль», «Закрыть запрос») wrap
   to the right edge when they do not fit one line - a register row keeps them on one line only on wide screens. */
@media (max-width:720px){.ds .ds-table--stack td.ds-table__action>.ds-actions{flex-wrap:wrap;justify-content:flex-end}}
/* A one-time value (a temporary password, a reset link) is read and handed over: ink, not the quiet colour of a read-only
   field, with the letters a little apart so «l», «1» and «I» differ. */
.ds .ds-control--secret[readonly]{color:var(--ds-ink);cursor:text;letter-spacing:.04em}
/* 1.5.241: a link to copy (the personal link of a webinar, the link of the guests, of a calendar) reads as text, not as a field
   that is closed: the whole of it is chosen at the first press, «Копировать» beside it. */
.ds .ds-control--link[readonly]{background:var(--ds-surface);color:var(--ds-ink);cursor:text}

/* 16. Sign-in card (brandbook 3.22, 1.5.92, design stage 6d): sign-in, password recovery, a new password by a one-time
   link, an invitation and a forced change of a temporary password stand on their own - no portal menu. The card sits in
   the middle of the soft workspace colour with a gentle brand glow on top; its band carries the approved TP-Link |
   MERCUSYS lockup on the colour of the portal menu; under it the title, one lead, the messages of the page and the form
   with one full-width main button; the foot holds the links of the page and the interface language. */
.ds .ds-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;
  padding:var(--ds-space-8) var(--ds-space-4);
  background:radial-gradient(1200px 520px at 50% -12%,var(--ds-brand-soft),transparent 72%),var(--ds-bg)}
.ds .ds-auth__card{width:min(440px,100%);min-width:0;overflow:hidden;background:var(--ds-surface);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-2);animation:ds-dialog-in var(--ds-slow) var(--ds-ease)}
.ds .ds-auth__brand{display:flex;align-items:center;justify-content:center;min-height:96px;padding:var(--ds-space-5) var(--ds-space-6);
  background:var(--ds-sidebar)}
.ds .ds-auth__body{display:flex;flex-direction:column;gap:var(--ds-space-5);padding:var(--ds-space-7) var(--ds-space-7) var(--ds-space-6)}
.ds .ds-auth__title{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-auth__title p{font-size:14px;line-height:21px;color:var(--ds-ink-muted)}
.ds .ds-auth__body>.ds-entity{align-self:flex-start;max-width:100%}
/* 1.5.96 An e-mail (macro w.email) breaks only after «@», never at a hyphen or a dot of the domain. 1.5.97: one word of
   unbreakable parts - it moves to the next line whole and breaks after «@» only when it does not fit a line of its own (a part
   longer than 32 characters is printed in pieces after its dots, w.email and B2B_EMAIL). The «·» of a meta row after an
   e-mail is drawn inside its last part: after an inline block and at a last-resort break Chromium tore it off to the start of
   the next line; the item keeps only the space after the dot. */
.ds .ds-email{overflow-wrap:anywhere}
.ds .ds-email>span{white-space:nowrap}
.ds .ds-list__meta>:not(:last-child):has(>.ds-email:last-child)::after{content:"\0020";margin-left:0}
.ds .ds-list__meta>:not(:last-child)>.ds-email:last-child>span:last-child::after{content:"\2060·";margin-left:var(--ds-space-2);color:var(--ds-ink-muted)}
.ds .ds-auth__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-3) var(--ds-space-4);
  padding:var(--ds-space-4) var(--ds-space-7);border-top:1px solid var(--ds-line-soft);background:var(--ds-surface-soft)}
.ds .ds-auth__links{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-4);min-width:0;font-size:14px;line-height:20px;font-weight:600}
/* The approved lockup of the brands (the portal menu shows the same): TP-Link, a thin line, MERCUSYS with «B2B PORTAL».
   1.5.119 (the owner, 11.10.2026): both wordmarks stand on one line - the bottom of the letters of MERCUSYS on the base of the
   letters of «tp-link» (not on the centre of the TP-Link image, whose sign and «p» go below the letters): the lockup stands
   on its bottom, and the column of MERCUSYS is lifted by the part of the TP-Link image under the base of its letters (41 of its
   166 rows) less the part of the MERCUSYS image under its letters (7 of 127) - in every size of the lockup, from the heights of
   the same size (computer, phone, the plate of the menu). */
.ds .ds-lockup{display:inline-flex;flex-direction:row;align-items:flex-end;gap:var(--ds-space-4);min-width:0}
.ds .ds-lockup img{display:block;max-width:none;width:auto;margin:0;border:0}
.ds .ds-lockup__tplink{height:44px}
.ds .ds-lockup__divider{flex:0 0 1px;width:1px;height:32px;align-self:center;background:color-mix(in srgb,var(--ds-on-color) 40%,transparent)}
.ds .ds-lockup__mercusys{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:calc(44px * 41 / 166 - 15px * 7 / 127)}
.ds .ds-lockup__mercusys img{height:15px}
.ds .ds-lockup__mercusys small{font-size:10px;line-height:12px;font-weight:700;letter-spacing:.08em;color:color-mix(in srgb,var(--ds-on-color) 72%,transparent)}
/* The main button of a card that holds only a form of one column takes the whole width (the sign-in card). */
.ds .ds-btn--block{display:flex;width:100%}
/* Small tabs: a choice of two or three short words (the interface language of the sign-in card). */
.ds .ds-tabs--sm{margin:0;padding:2px;border-radius:var(--ds-radius-md);box-shadow:none}
.ds .ds-tabs--sm a{height:28px;padding:0 var(--ds-space-3);border-radius:var(--ds-radius-sm);font-size:13px}
/* A message of a page closes by its «×» and fades out (app.js marks it data-closing). */
.ds .ds-alert__close{display:inline-grid;place-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;min-height:0;margin:-4px -6px -4px auto;padding:0;
  border:0;border-radius:var(--ds-radius-sm);background:transparent;box-shadow:none;font:400 18px/1 var(--ds-font);color:var(--ds-ink-muted);cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-alert__close:hover{background:color-mix(in srgb,var(--ds-ink) 8%,transparent);color:var(--ds-ink);transform:none}
.ds .ds-alert__close:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-alert[data-closing]{opacity:0;transform:translateY(-4px);transition:opacity var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease)}
/* 1.5.155 (brandbook 3.68): the sign-in by a code. The field of a code - large tabular digits with a spacing, in the middle (six
   digits, or a backup code «ABCDE-FGHIJ»), the same height on a phone; the link under the form of the sign-in card («Войти
   запасным кодом»). */
.ds .ds-control.ds-control--code{height:52px;font-size:24px;line-height:32px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.32em;
  text-align:center;text-indent:.32em}
.ds .ds-control.ds-control--code-backup{font-size:20px;letter-spacing:.12em;text-indent:.12em;text-transform:uppercase}
.ds .ds-control--code::placeholder{color:var(--ds-ink-faint);opacity:1}
.ds .ds-auth__alt{align-self:center;font-size:14px;line-height:20px;font-weight:600}
/* The QR code of an authenticator app: the dark modules of the ink on the surface (dark on light in every theme - the camera of a
   phone needs it) in the frame of a card with a soft shadow; the key for typing by hand under it. */
.ds .ds-qr{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-4);min-width:0}
.ds .ds-qr__frame{display:block;width:200px;max-width:100%;padding:var(--ds-space-2);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-1)}
.ds .ds-qr__code{display:block;width:100%;height:auto}
.ds .ds-qr__zone{fill:var(--ds-surface)}
.ds .ds-qr__dark{fill:var(--ds-ink)}
.ds .ds-qr>.ds-alert,.ds .ds-qr__key{align-self:stretch}
/* The key for typing by hand: monospaced groups of four in a soft plate of the colour of the area (they wrap in the narrow sign-in
   card - a field cut «MNP5 OKVM 72EU N6W5 FB…»), «Копировать» beside it while both fit. */
.ds .ds-qr__secret{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-md);background:color-mix(in srgb,var(--ds-page-area) 5%,var(--ds-surface-soft))}
.ds .ds-qr__secret code{flex:1 1 15em;min-width:0;font:600 14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;
  color:var(--ds-ink);overflow-wrap:anywhere}
/* The backup codes: two columns of codes in soft plates of the colour of the area, monospaced (the alphabet has no 0 and no 1). */
.ds .ds-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-2);margin:0;padding:0;list-style:none}
.ds .ds-codes__code{padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-sm);
  background:color-mix(in srgb,var(--ds-page-area) 5%,var(--ds-surface-soft));text-align:center;
  font:600 15px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--ds-ink);white-space:nowrap}
/* The device of a session: a computer or a phone in a circle of the colour of the area, the words and «Это устройство» beside it (in
   one row on a phone too - the card of a row put the mark alone over the words). */
.ds .ds-device-row{display:flex;align-items:center;gap:var(--ds-space-3);min-width:0}
.ds .ds-device-row__text{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);min-width:0}
.ds .ds-device{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;
  background:color-mix(in srgb,var(--ds-page-area) 12%,var(--ds-surface));color:color-mix(in srgb,var(--ds-page-area) 70%,var(--ds-ink))}
.ds .ds-device .ds-icon{width:18px;height:18px}
@media (max-width:720px){
  .ds .ds-auth{justify-content:flex-start;padding:var(--ds-space-6) var(--ds-space-4)}
  .ds .ds-auth__brand{min-height:80px;padding:var(--ds-space-4)}
  .ds .ds-auth__body{padding:var(--ds-space-6) var(--ds-space-5) var(--ds-space-5)}
  .ds .ds-auth__foot{padding:var(--ds-space-3) var(--ds-space-5)}
  .ds .ds-lockup{gap:var(--ds-space-3)}
  .ds .ds-lockup__tplink{height:38px}
  .ds .ds-lockup__divider{height:28px}
  .ds .ds-lockup__mercusys{margin-bottom:calc(38px * 41 / 166 - 13px * 7 / 127)}
  .ds .ds-lockup__mercusys img{height:13px}
  .ds .ds-tabs--sm a{height:36px}
  .ds .ds-alert__close{flex-basis:36px;width:36px;height:36px;margin:-8px -10px -8px auto}
}

/* 17. The workspace of the portal (brandbook 3.22, 1.5.92): the areas with their modules. An area is a card whose head
   carries the illustration of the area (the only colour of the page that tells the areas apart), a list of its modules
   and a foot with their count and «Открыть раздел»; the core business flow is a row of soft steps. */
.ds .ds-area{display:flex;flex-direction:column;gap:var(--ds-space-4);min-width:0}
.ds .ds-area__head{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--ds-space-4);min-width:0}
.ds .ds-area__head>div{min-width:0}
.ds .ds-area__head p{margin-top:2px;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-area__art{display:block;flex:0 0 auto;width:96px;height:auto;max-width:none;margin:0;border-radius:var(--ds-radius-md)}
.ds .ds-area__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-3);margin-top:auto;
  padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line-soft);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-page-head__art{display:block;flex:0 0 auto;width:132px;height:auto;max-width:none;margin:0;border-radius:var(--ds-radius-lg)}
.ds .ds-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) 0;margin:0;padding:0;list-style:none}
.ds .ds-flow>li{display:inline-flex;align-items:center;margin:0;padding:0}
.ds .ds-flow>li>span{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);font-size:13px;line-height:18px;font-weight:500;color:var(--ds-ink)}
.ds .ds-flow>li:not(:last-child)::after{content:"→";margin:0 var(--ds-space-2);color:var(--ds-ink-faint)}
@media (max-width:720px){
  .ds .ds-area__art{width:72px}
  .ds .ds-page-head__art{display:none}
}

/* 18. Portal shell (brandbook 3.23, 1.5.93, design stage 7a): what surrounds every page in the reference theme (Summit) -
   the menu on the left, the bar over the page, the messages of the portal and the guide of a page; on a phone the header,
   the tab bar, the menu as a drawer and the sheet of language and settings. Pages stand where they stood: the page scrolls
   in .ds-main under the bar (on a computer) with the same margins and top space as before (tokens of section 1).
   The other themes keep the shell they had (owner's decision 23.09.2026). */
.ds .ds-shell{position:relative;display:block;min-height:100vh;margin:0;padding:0;background:var(--ds-bg);color:var(--ds-ink)}
.ds .ds-icon{display:block;flex:0 0 auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ds .ds-skip{position:fixed;top:var(--ds-space-2);left:var(--ds-space-2);z-index:1600;padding:var(--ds-space-2) var(--ds-space-4);border-radius:var(--ds-radius-md);
  background:var(--ds-brand);font-size:14px;font-weight:600;color:var(--ds-on-color);transform:translateY(-200%);
  transition:transform var(--ds-fast) var(--ds-ease)}
.ds .ds-skip:focus{transform:none;color:var(--ds-on-color);outline:none;box-shadow:var(--ds-focus)}
/* The page scrolls inside .ds-main on a computer; the place of its scrollbar is kept even when a page is short, so a page
   never moves sideways when it grows. */
.ds .ds-main{position:relative;display:block;height:100vh;height:100svh;margin:0 0 0 var(--ds-side-w);
  padding:var(--ds-page-y) var(--ds-page-x) var(--ds-page-end);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;scroll-padding-top:calc(var(--ds-topbar-h) + var(--ds-space-3) - 2px);outline:none}
.ds .ds-main::before{content:"";display:block;height:calc(var(--ds-topbar-h) + var(--ds-space-3) - 2px)}

/* The menu: the approved lockup on a soft plate, the brand contour, «Главная» and «Разделы», the areas of the portal with
   their modules, «Архив и разработка» (administrators), the card of the person and the version of the portal. */
.ds .ds-side{position:fixed;top:0;bottom:0;left:0;z-index:1200;display:flex;flex-direction:column;gap:var(--ds-space-3);
  width:var(--ds-side-w);margin:0;padding:var(--ds-space-3) 10px var(--ds-space-2);
  background:var(--ds-sidebar);color:var(--ds-side-ink);overflow:hidden}
.ds .ds-side__top{display:flex;flex-direction:row;align-items:stretch;gap:var(--ds-space-2);flex:0 0 auto;min-width:0}
.ds .ds-side__brand{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;min-height:64px;
  padding:var(--ds-space-3);border-radius:var(--ds-radius-lg);background:var(--ds-side-plate);container-type:inline-size;
  text-decoration:none;transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-side__brand:hover{background:var(--ds-side-hover)}
.ds .ds-side__brand:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ds-side-ink-muted)}
/* The lockup follows the width of its plate (container units) - never cut, as large as the plate allows. */
.ds .ds-lockup--fit{gap:3.5cqi}
.ds .ds-lockup--fit .ds-lockup__tplink{height:15cqi}
.ds .ds-lockup--fit .ds-lockup__divider{height:11cqi}
.ds .ds-lockup--fit .ds-lockup__mercusys{gap:1.6cqi;margin-bottom:calc(15cqi * 41 / 166 - 5cqi * 7 / 127)}
.ds .ds-lockup--fit .ds-lockup__mercusys img{height:5cqi}
.ds .ds-lockup--fit .ds-lockup__mercusys small{font-size:clamp(7px,3.6cqi,10px);line-height:1.2}
.ds .ds-side__scope{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:0;margin:0;padding:0 2px}
.ds .ds-side__caption{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ds-side-ink-muted)}
.ds .ds-side__brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:2px;border-radius:var(--ds-radius-md);background:var(--ds-side-plate)}
.ds .ds-side__brands a{display:flex;align-items:center;justify-content:center;min-width:0;height:32px;padding:0 var(--ds-space-1);border-radius:var(--ds-radius-sm);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;white-space:nowrap;color:var(--ds-side-ink);
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-side__brands a:hover{background:var(--ds-side-hover);color:var(--ds-on-color)}
.ds .ds-side__brands a[aria-current]{background:var(--ds-brand);color:var(--ds-on-color);box-shadow:var(--ds-shadow-1)}
.ds .ds-side__brands a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ds-side-ink-muted)}
/* The list scrolls without a scrollbar (a scrollbar would take the width of the names); a soft fade at its bottom edge shows
   that there is more. */
.ds .ds-side__nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;margin:0 calc(-1 * var(--ds-space-1));padding:0 var(--ds-space-1) var(--ds-space-3);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  mask-image:linear-gradient(to bottom,var(--ds-ink) calc(100% - var(--ds-space-3)),transparent)}
.ds .ds-side__row{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:0}
.ds .ds-side__link{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);min-width:0;min-height:36px;margin:0;padding:6px;
  border:0;border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;cursor:pointer;list-style:none;
  font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;text-align:left;text-decoration:none;text-transform:none;color:var(--ds-side-ink);
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-side__link::-webkit-details-marker{display:none}
.ds .ds-side__link::marker{content:""}
.ds .ds-side__link:hover{background:var(--ds-side-hover);color:var(--ds-on-color)}
.ds .ds-side__link[aria-current]{background:var(--ds-side-current);color:var(--ds-on-color)}
.ds .ds-side__link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ds-side-ink-muted)}
.ds .ds-side__link--home{min-height:40px;font-size:14px;line-height:20px}
.ds .ds-side__link--child{min-height:32px;padding-top:var(--ds-space-1);padding-bottom:var(--ds-space-1);font-weight:500}
.ds .ds-side__link--sub{padding-left:calc(6px + var(--ds-space-3))}
.ds .ds-side__text{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.ds .ds-side__icon{display:inline-grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:calc(var(--ds-radius-sm) - 1px);
  background:var(--ds-side-plate);color:var(--ds-side-ink)}
.ds .ds-side__icon .ds-icon{width:14px;height:14px}
/* An area's mark sits on a square of the area's colour, soft; the open area shows it full. */
.ds .ds-side__icon--area{background:color-mix(in srgb,var(--ds-area) 34%,transparent);color:color-mix(in srgb,var(--ds-area) 25%,var(--ds-on-color))}
.ds .ds-side__group[open]>summary .ds-side__icon--area{background:var(--ds-area);color:var(--ds-on-color)}
.ds .ds-side__icon--workspace{--ds-area:var(--ds-area-workspace)}
.ds .ds-side__icon--sales{--ds-area:var(--ds-area-sales)}
.ds .ds-side__icon--partners{--ds-area:var(--ds-area-partners)}
.ds .ds-side__icon--commercial{--ds-area:var(--ds-area-commercial)}
.ds .ds-side__icon--products{--ds-area:var(--ds-area-products)}
.ds .ds-side__icon--operations{--ds-area:var(--ds-area-operations)}
.ds .ds-side__icon--presales{--ds-area:var(--ds-area-presales)}
.ds .ds-side__icon--analytics,.ds .ds-side__icon--management-analytics{--ds-area:var(--ds-area-analytics)}
.ds .ds-side__icon--administration{--ds-area:var(--ds-area-administration)}
.ds .ds-side__icon--marketing{--ds-area:var(--ds-area-marketing)}
.ds .ds-side__chevron{flex:0 0 12px;width:12px;height:12px;margin-left:calc(-1 * var(--ds-space-1));color:var(--ds-side-ink-muted);transition:transform var(--ds-base) var(--ds-ease)}
.ds .ds-side__group{display:block;min-width:0;margin:0}
.ds .ds-side__group[open]>summary .ds-side__chevron{transform:rotate(180deg)}
.ds .ds-side__children{display:flex;flex-direction:column;gap:1px;margin:2px 0 var(--ds-space-2);padding:0;animation:ds-fold-in var(--ds-base) var(--ds-ease)}
/* A module keeps the column of the area's mark: its text starts under the name of the area. A module in development has a
   dot and a badge of its state, the cart its number of lines. */
.ds .ds-side__dot{position:relative;flex:0 0 22px;width:22px;height:8px}
.ds .ds-side__dot::after{content:"";position:absolute;top:1px;left:8px;width:6px;height:6px;border-radius:50%;background:transparent}
/* The person's menu opens upwards: its arrow points up until it is open. */
.ds .ds-side__user .ds-side__chevron{transform:rotate(180deg)}
.ds .ds-side__user[open] .ds-side__chevron{transform:none}
.ds .ds-side__dot--foundation::after{background:var(--ds-warning)}
.ds .ds-side__dot--planned::after{background:var(--ds-side-ink-muted)}
/* The state of a module in development reads under its name (a badge beside it squeezed the name in a narrow menu). */
.ds .ds-side__state{display:block;font-size:11px;line-height:15px;font-weight:500;color:var(--ds-side-ink-muted)}
.ds .ds-side__badge{display:inline-grid;place-items:center;flex:0 0 auto;min-width:20px;height:18px;padding:0 6px;border-radius:var(--ds-radius-pill);
  background:var(--ds-side-current);font-size:11px;line-height:1;font-weight:700;color:var(--ds-on-color);font-variant-numeric:tabular-nums}
.ds .ds-side__rule{display:block;flex:0 0 auto;height:1px;margin:var(--ds-space-2) var(--ds-space-2);border:0;background:var(--ds-side-line)}
/* «×» of an administrator: appears on the row under the pointer or in focus, left of an area's arrow; tinted with the
   colour of an error and a little larger under the pointer (the motion of the legacy shell, brandbook 2.6). */
.ds .ds-side__hideform{position:absolute;top:6px;right:6px;z-index:1;display:block;margin:0;padding:0;pointer-events:none}
.ds .ds-side__row--area>.ds-side__hideform{right:22px}
.ds .ds-side__link--child~.ds-side__hideform{top:4px}
.ds .ds-side__hide{display:inline-grid;place-items:center;justify-content:center;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:0;border:0;
  border-radius:var(--ds-radius-sm);background:var(--ds-side-raised);box-shadow:none;cursor:pointer;
  font-family:inherit;font-size:16px;line-height:1;font-weight:400;color:var(--ds-side-ink);opacity:0;transform:scale(.92);pointer-events:none;
  transition:opacity var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-side__hide .ds-icon{width:14px;height:14px}
/* A module row shows it while hovered or in focus; an area row only while its own head is (not while a module of the open
   area is under the pointer). The invisible «×» lets clicks through to the row. */
.ds .ds-side__row:not(.ds-side__row--area):is(:hover,:focus-within)>.ds-side__hideform .ds-side__hide,
.ds .ds-side__row--area:has(>.ds-side__group>summary:is(:hover,:focus-visible))>.ds-side__hideform .ds-side__hide,
.ds .ds-side__hideform:is(:hover,:focus-within) .ds-side__hide{opacity:1;transform:none;pointer-events:auto}
.ds .ds-side__row .ds-side__hide:hover{background:var(--ds-danger);color:var(--ds-on-color);transform:scale(1.04)}
.ds .ds-side__hide:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ds-side-ink-muted)}
/* 1.5.181 (brandbook 3.81) «Порядок разделов меню»: an area is carried by its head - pressed and moved up or down it lifts (a raised
   plate with a shadow), the areas between move aside smoothly, the released one settles into its place; the order is the person's.
   The rows move by transforms only - the layout of the menu never changes while an area is carried. */
.ds .ds-side__nav.is-menu-sorting{user-select:none;-webkit-user-select:none}
.ds .ds-side__nav.is-menu-sorting .ds-side__row--area{transition:transform var(--ds-slow) var(--ds-ease)}
.ds .ds-side__nav.is-menu-sorting .ds-side__row--area.is-menu-lift{z-index:3;transition:box-shadow var(--ds-base) var(--ds-ease);
  border-radius:var(--ds-radius-md);background:var(--ds-side-raised);box-shadow:var(--ds-shadow-3);cursor:grabbing}
.ds .ds-side__nav.is-menu-sorting .ds-side__row--area.is-menu-lift>.ds-side__group>summary{cursor:grabbing}
.ds .ds-side__nav.is-menu-settling .ds-side__row--area{transition:none}
.ds .ds-side__nav.is-menu-sorting [data-menu-item].is-menu-lift{position:relative;z-index:4;border-radius:var(--ds-radius-md);
  background:var(--ds-side-raised);box-shadow:var(--ds-shadow-3);transition:box-shadow var(--ds-base) var(--ds-ease)}
.ds .ds-side__nav.is-menu-sorting [data-menu-item].is-menu-lift>a{cursor:grabbing}
.ds .ds-side__nav.is-menu-sorting .ds-side__hideform{visibility:hidden}
.ds .ds-side__row--area.is-menu-target>.ds-side__group>summary{background:var(--ds-side-hover);transition:background var(--ds-base) var(--ds-ease)}
.ds .ds-side__link--reset{width:100%;margin:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ds-side-ink-muted)}
.ds .ds-side__link--reset[hidden]{display:none}
.ds .ds-side__archive{display:block;min-width:0;margin:0}
.ds .ds-side__archive>summary .ds-side__badge{margin-left:auto}
.ds .ds-side__archive-body{display:flex;flex-direction:column;gap:1px;margin:2px 0 var(--ds-space-2);animation:ds-fold-in var(--ds-base) var(--ds-ease)}
.ds .ds-side__group-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);margin:6px 0 2px;padding:0 6px 0 36px;
  font-size:12px;line-height:16px;font-weight:600;color:var(--ds-side-ink-muted)}
.ds .ds-side__item{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);min-width:0;min-height:36px;margin:0;padding:var(--ds-space-1) 6px;
  border-radius:var(--ds-radius-md);font-size:13px;line-height:18px;font-weight:500;color:var(--ds-side-ink)}
.ds .ds-side__item>span:not([class]){display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds .ds-side__item small{font-size:11px;line-height:15px;font-weight:500;color:var(--ds-side-ink-muted)}
.ds .ds-side__item form{display:block;flex:0 0 auto;margin:0}
.ds .ds-side__restore{display:inline-grid;place-items:center;justify-content:center;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:0;border:0;
  border-radius:var(--ds-radius-sm);background:var(--ds-side-plate);box-shadow:none;cursor:pointer;color:var(--ds-side-ink);
  font-family:inherit;font-size:14px;line-height:1;font-weight:400;
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-side__restore .ds-icon{width:14px;height:14px}
.ds .ds-side__restore:hover{background:var(--ds-brand);color:var(--ds-on-color);transform:scale(1.04)}
.ds .ds-side__restore:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ds-side-ink-muted)}
.ds .ds-side__manage{display:block;margin:var(--ds-space-1) 0 0;padding:6px 6px 6px 36px;border-radius:var(--ds-radius-md);
  font-size:13px;line-height:18px;font-weight:600;color:var(--ds-side-ink)}
.ds .ds-side__manage:hover{background:var(--ds-side-hover);color:var(--ds-on-color)}
.ds .ds-side__empty{margin:0;padding:6px 6px 6px 36px;font-size:12px;line-height:16px;color:var(--ds-side-ink-muted)}
.ds .ds-side__user{display:block;flex:0 0 auto;width:100%;min-width:0}
.ds .ds-side__user>summary{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;min-height:52px;margin:0;
  padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-2);border-radius:var(--ds-radius-lg);
  background:var(--ds-side-plate);cursor:pointer;color:var(--ds-side-ink);transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-side__user>summary:hover,.ds .ds-side__user[open]>summary{background:var(--ds-side-hover)}
.ds .ds-side__user>summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ds-side-ink-muted)}
.ds .ds-side__avatar{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;
  background:var(--ds-side-current);color:var(--ds-on-color)}
.ds .ds-side__avatar .ds-icon{width:18px;height:18px}
.ds .ds-side__who{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds .ds-side__who b{font-size:13px;line-height:18px;font-weight:600;color:var(--ds-on-color);overflow-wrap:anywhere}
.ds .ds-side__who small{font-size:12px;line-height:16px;font-weight:400;color:var(--ds-side-ink-muted)}
.ds .ds-side__who .ds-side__login{color:var(--ds-on-color);opacity:.78}  /* which account: its login, 1.5.190 */
.ds .ds-menu--up>.ds-menu__list{top:auto;bottom:calc(100% + 6px);left:0;right:0;min-width:0;max-width:none}
.ds .ds-menu__item>.ds-icon{width:18px;height:18px;color:var(--ds-ink-muted)}
.ds .ds-menu__list>:is(a,button).ds-menu__item:has(>.ds-icon){flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ds-space-3)}
/* A narrow menu (a window up to 1380 px, the menu 196-216 px): rows a pixel smaller and closer to the edge, so that the
   names of the areas keep whole words («Администрирование»). */
@media (min-width:901px) and (max-width:1380px){
  .ds .ds-side{padding-left:var(--ds-space-2);padding-right:var(--ds-space-2)}
  .ds .ds-side__link{padding-left:var(--ds-space-1);padding-right:var(--ds-space-1);font-size:12px;line-height:17px}
  .ds .ds-side__link--home{font-size:13px;line-height:18px}
  .ds .ds-side__link--sub{padding-left:calc(var(--ds-space-1) + var(--ds-space-3))}
  .ds .ds-side__item{padding-left:var(--ds-space-1);padding-right:var(--ds-space-1);font-size:12px;line-height:17px}
  .ds .ds-side__group-caption{padding-left:34px}
  .ds :is(.ds-side__manage,.ds-side__empty){padding-left:34px}
  .ds .ds-side__row--area>.ds-side__hideform{right:18px}
  .ds .ds-side__hideform{right:4px}
}
@media (min-width:901px) and (max-width:1180px){
  .ds .ds-side__link{gap:6px}
  .ds .ds-side__chevron{margin-left:-2px}
}
.ds .ds-side__version{display:block;flex:0 0 auto;padding:0 var(--ds-space-1);font-size:11px;line-height:16px;font-weight:400;color:var(--ds-side-ink-muted)}

/* The bar over the page: the search field of the whole portal and the square buttons of the person's tools. */
.ds .ds-topbar{position:fixed;top:0;left:var(--ds-side-w);right:0;z-index:1200;display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);
  height:var(--ds-topbar-h);margin:0;padding:0 var(--ds-page-x);border-bottom:1px solid var(--ds-line);
  background:color-mix(in srgb,var(--ds-surface-soft) 94%,transparent);box-shadow:var(--ds-shadow-1);backdrop-filter:blur(10px)}
/* 1.5.153 (the owner, 17.10.2026): the bar ends where the scrollbar of the page begins (app.js measures it: --ds-scrollbar-w) and
   its right end is rounded - the scrollbar is whole from the top of the window; where scrollbars float over the page, as before. */
.ds .ds-shell[data-scrollbar-gutter] .ds-topbar{right:var(--ds-scrollbar-w,0px);border-right:1px solid var(--ds-line);
  border-bottom-right-radius:var(--ds-radius-lg)}
/* 1.5.167 (the owner, 19.10.2026: «если уж верхний блок с правого края аккуратно загибается перед линией скроллинга, то и левую часть
   тоже можно аккуратно оторвать от левого меню и сделать симметрично слева - типа как островок у эпла … на всем сайте»): on a computer
   the bar is an island - the same gap (--ds-topbar-gap) from the menu on the left and from the scrollbar (or the edge of the window) on
   the right, both lower corners rounded, a line all round but the top; the page passes under it in the gaps. */
@media (min-width:901px){
  .ds .ds-topbar{left:calc(var(--ds-side-w) + var(--ds-topbar-gap));right:var(--ds-topbar-gap);border:1px solid var(--ds-line);border-top:0;
    border-radius:0 0 var(--ds-radius-lg) var(--ds-radius-lg)}
  .ds .ds-shell[data-scrollbar-gutter] .ds-topbar{right:calc(var(--ds-scrollbar-w,0px) + var(--ds-topbar-gap))}
}
.ds .ds-topbar__search{position:relative;display:block;flex:1 1 auto;min-width:0}
.ds .ds-topbar__form{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);height:var(--ds-control-h);margin:0;
  padding:0 var(--ds-space-1) 0 var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-1);color:var(--ds-ink-muted);
  transition:border-color var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-topbar__form:hover{border-color:var(--ds-line-strong)}
.ds .ds-topbar__form:focus-within{border-color:var(--ds-brand);box-shadow:var(--ds-focus)}
.ds .ds-topbar__form>.ds-icon{width:18px;height:18px}
.ds .ds-topbar__input{display:block;flex:1 1 auto;width:auto;min-width:0;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;outline:none;appearance:none;font:400 14px/21px var(--ds-font);color:var(--ds-ink);text-overflow:ellipsis}
.ds .ds-topbar__input::placeholder{color:var(--ds-ink-faint);opacity:1}
.ds .ds-topbar__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ds .ds-topbar__input:focus{border:0;box-shadow:none;outline:none}
.ds :is(.ds-topbar__clear,.ds-topbar__close,.ds-side__close,.ds-sheet__close){place-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;
  min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:var(--ds-radius-pill);background:transparent;box-shadow:none;cursor:pointer;
  font-family:inherit;font-size:14px;line-height:1;font-weight:400;
  color:var(--ds-ink-muted);transform:none;transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds :is(.ds-topbar__clear,.ds-topbar__close,.ds-sheet__close):hover{background:var(--ds-surface-soft);color:var(--ds-ink)}
.ds :is(.ds-topbar__clear,.ds-topbar__close,.ds-side__close,.ds-sheet__close):focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds :is(.ds-topbar__clear,.ds-topbar__close,.ds-sheet__close) .ds-icon{width:18px;height:18px}
.ds :is(.ds-topbar__clear,.ds-sheet__close){display:inline-grid}
.ds .ds-topbar__input:placeholder-shown~.ds-topbar__clear{display:none}
.ds .ds-topbar__close{display:none}
.ds .ds-topbar__actions{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);flex:0 0 auto}
.ds .ds-topbar__btn{position:relative;display:inline-grid;place-items:center;justify-content:center;width:var(--ds-control-h);height:var(--ds-control-h);min-width:0;min-height:0;
  margin:0;padding:0;border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface);box-shadow:none;
  font-family:inherit;font-size:13px;line-height:1;font-weight:600;letter-spacing:0;text-decoration:none;text-transform:none;color:var(--ds-ink-muted);cursor:pointer;list-style:none;
  transition:transform var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),
    background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-topbar__btn::-webkit-details-marker{display:none}
.ds .ds-topbar__btn::marker{content:""}
.ds .ds-topbar__btn:hover,.ds .ds-menu[open]>.ds-topbar__btn{transform:translateY(var(--ds-lift));border-color:var(--ds-line-strong);box-shadow:var(--ds-shadow-2);color:var(--ds-ink)}
.ds .ds-topbar__btn:active{transform:none}
.ds .ds-topbar__btn:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-topbar__btn:is([aria-current],[aria-pressed="true"]){border-color:color-mix(in srgb,var(--ds-brand) 30%,var(--ds-line));background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-topbar__btn--text{width:auto;min-width:var(--ds-control-h);padding:0 var(--ds-space-3);grid-auto-flow:column;gap:6px}
.ds .ds-topbar__btn--text .ds-icon{width:16px;height:16px;stroke-width:3}
/* 1.5.160 (brandbook 3.71): «Смотреть портал как» of a debugger - a quiet button with the sign in its own role; acting in a role, a pill
   of the colour of a warning with the words of the role on every page (on a phone - a dot of that colour on «Язык и настройки»): the
   person always sees whose eyes it looks through. */
.ds .ds-topbar__btn[data-debug-pill]{width:auto;min-width:var(--ds-control-h);padding:0 var(--ds-space-3);grid-auto-flow:column;gap:6px;
  border-color:color-mix(in srgb,var(--ds-warning) 35%,var(--ds-line));background:var(--ds-warning-soft);color:var(--ds-warning);font-weight:600;
  white-space:nowrap}
.ds .ds-topbar__btn[data-debug-pill]:hover,.ds .ds-menu[open]>.ds-topbar__btn[data-debug-pill]{border-color:color-mix(in srgb,var(--ds-warning) 55%,var(--ds-line));
  color:var(--ds-warning)}
.ds .ds-topbar__btn[data-debug-pill] .ds-icon{width:18px;height:18px;stroke-width:1.8}
.ds .ds-topbar__btn[data-debug-acting]::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;
  background:var(--ds-warning);box-shadow:0 0 0 2px var(--ds-surface)}
.ds .ds-menu__list--debug{width:min(340px,calc(100vw - 32px));max-width:none;max-height:min(640px,calc(100vh - 96px));overflow:auto;
  overscroll-behavior:contain}
.ds .ds-menu__list--debug .ds-menu__group{margin-top:var(--ds-space-2)}
.ds .ds-menu__list--debug .ds-menu__group h3{margin:0 0 2px var(--ds-space-3)}
.ds .ds-topbar__count{position:absolute;top:-7px;right:-7px;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border:2px solid var(--ds-surface-soft);border-radius:var(--ds-radius-pill);background:var(--ds-danger);
  font-size:11px;line-height:1;font-weight:700;color:var(--ds-on-color);font-variant-numeric:tabular-nums}
.ds .ds-topbar__menu{flex:0 0 auto}
.ds .ds-topbar__menu>.ds-menu__list{top:calc(100% + 8px)}
/* The menu of themes: a sample, the name and the description of every theme; the chosen one has «✓». */
.ds .ds-menu__list--themes{width:min(400px,calc(100vw - 32px));max-width:none}
.ds .ds-menu__item--choice{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ds-space-3)}
.ds .ds-menu__copy{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.ds .ds-menu__copy b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-menu__copy small{font-size:12px;line-height:16px;font-weight:400;color:var(--ds-ink-muted)}
.ds .ds-menu__copy small:empty{display:none}
.ds .ds-menu__check{flex:0 0 18px;width:18px;height:18px;color:var(--ds-brand);opacity:0}
/* The short code of a choice (RU / EN) on a small soft plate. */
.ds .ds-menu__code{display:inline-grid;place-items:center;flex:0 0 32px;height:24px;border-radius:var(--ds-radius-sm);background:var(--ds-surface-soft);
  font-size:12px;line-height:1;font-weight:700;letter-spacing:.02em;color:var(--ds-ink-muted)}
.ds .ds-menu__item--choice[aria-checked="true"]{background:var(--ds-brand-soft)}
.ds .ds-menu__item--choice[aria-checked="true"] .ds-menu__check{opacity:1}
.ds .ds-menu__item--choice[aria-checked="true"] .ds-menu__code{background:var(--ds-surface);color:var(--ds-brand)}
.ds .ds-swatch{display:block;flex:0 0 auto;width:28px;height:20px;border:1px solid var(--ds-line);border-radius:6px;
  background:linear-gradient(90deg,var(--ds-swatch-rail) 0 38%,var(--ds-swatch-work) 38% 100%)}
.ds .ds-swatch--clarity{--ds-swatch-rail:var(--ds-swatch-rail-clarity);--ds-swatch-work:var(--ds-swatch-work-clarity)}
.ds .ds-swatch--command{--ds-swatch-rail:var(--ds-swatch-rail-command);--ds-swatch-work:var(--ds-swatch-work-command)}
.ds .ds-swatch--compact{--ds-swatch-rail:var(--ds-swatch-rail-compact);--ds-swatch-work:var(--ds-swatch-work-compact)}
.ds .ds-swatch--canvas{--ds-swatch-rail:var(--ds-swatch-rail-canvas);--ds-swatch-work:var(--ds-swatch-work-canvas)}
.ds .ds-swatch--windows-95{--ds-swatch-rail:var(--ds-swatch-rail-windows-95);--ds-swatch-work:var(--ds-swatch-work-windows-95);border-radius:0}
.ds .ds-swatch--windows-311{--ds-swatch-rail:var(--ds-swatch-rail-windows-311);--ds-swatch-work:var(--ds-swatch-work-windows-311);border-radius:0}
.ds .ds-topbar__btn .ds-swatch{width:22px;height:16px}

/* Messages of the portal: over the page, in its flow under the guide - they cover nothing (the buttons of the page head, the
   start of a page on a phone). */
.ds .ds-messages{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:0 0 var(--ds-space-4);padding:0}
.ds .ds-messages>.ds-alert{border:1px solid color-mix(in srgb,var(--ds-ink) 6%,transparent)}
.ds .ds-messages>.ds-alert>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
/* The guide of a page (help mode): over the page, on the soft brand colour. */
.ds .ds-guide{display:flex;flex-direction:row;align-items:flex-start;gap:var(--ds-space-3);margin:0 0 var(--ds-space-4);padding:var(--ds-space-4);
  border:1px solid color-mix(in srgb,var(--ds-brand) 18%,var(--ds-line));border-radius:var(--ds-radius-lg);background:var(--ds-brand-soft);
  animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-guide__icon{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-guide__icon .ds-icon{width:18px;height:18px}
.ds .ds-guide__copy{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.ds .ds-guide__copy small{font-size:12px;line-height:16px;font-weight:600;color:var(--ds-brand)}
.ds .ds-guide__copy b{font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds .ds-guide__copy p{font-size:13px;line-height:19px;color:var(--ds-ink-muted)}

/* Phone shell: hidden on a computer. */
.ds :is(.ds-mobilebar,.ds-tabbar,.ds-sheet,.ds-side__close){display:none}
.ds .ds-shell-backdrop{position:fixed;inset:0;z-index:1350;display:block;margin:0;padding:0;border:0;background:var(--ds-backdrop);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--ds-slow) var(--ds-ease),visibility 0s linear var(--ds-slow)}
.ds .ds-shell-backdrop--sheet{z-index:1450;opacity:1;visibility:visible;pointer-events:auto;animation:ds-backdrop-in var(--ds-slow) var(--ds-ease)}
@keyframes ds-backdrop-in{from{opacity:0}to{opacity:1}}

@media (max-width:900px){
  .ds .ds-main{height:auto;min-height:100vh;margin:0;padding:calc(var(--ds-mobilebar-h) + var(--ds-page-y)) var(--ds-page-x) var(--ds-page-end);
    overflow:visible;overscroll-behavior:auto;scrollbar-gutter:auto;scroll-padding-top:0}
  .ds .ds-main::before{content:none}
  .ds .ds-tabs[data-section-strip]{top:calc(var(--ds-mobilebar-h) + var(--ds-space-2))}
  .ds .ds-mobilebar{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);
    height:var(--ds-mobilebar-h);margin:0;padding:0 var(--ds-page-x);border-bottom:1px solid var(--ds-line);
    background:color-mix(in srgb,var(--ds-surface) 94%,transparent);box-shadow:var(--ds-shadow-1);backdrop-filter:blur(10px)}
  .ds .ds-mobilebar__menu{display:inline-grid;place-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:0;min-height:0;margin:0;padding:0;
    border:0;border-radius:var(--ds-radius-md);background:var(--ds-brand);box-shadow:none;cursor:pointer;color:var(--ds-on-color);
    font-family:inherit;font-size:14px;line-height:1;font-weight:600;
    transition:background-color var(--ds-fast) var(--ds-ease)}
  .ds .ds-mobilebar__menu:hover{background:var(--ds-brand-hover)}
  .ds .ds-mobilebar__menu:focus-visible{outline:none;box-shadow:var(--ds-focus)}
  .ds .ds-mobilebar__title{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;text-decoration:none}
  .ds .ds-mobilebar__title b{font-size:14px;line-height:18px;font-weight:700;color:var(--ds-ink)}
  .ds .ds-mobilebar__title small{font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
  .ds .ds-mobilebar__actions{display:flex;flex-direction:row;align-items:center;gap:6px;flex:0 0 auto}
  .ds .ds-mobilebar .ds-topbar__count{border-color:var(--ds-surface)}
  /* The tab bar: «Главная», «Разделы», «Поиск», «Задачи», «Меню». */
  .ds .ds-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ds-space-1);
    height:var(--ds-shell-bottom);margin:0;padding:var(--ds-space-1) var(--ds-space-2) calc(var(--ds-space-1) + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--ds-line);background:color-mix(in srgb,var(--ds-surface) 96%,transparent);backdrop-filter:blur(10px)}
  .ds .ds-tabbar__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:100%;min-height:0;
    margin:0;padding:0;border:0;border-radius:var(--ds-radius-md);background:transparent;box-shadow:none;cursor:pointer;
    font-family:inherit;font-size:11px;line-height:14px;font-weight:600;letter-spacing:0;text-decoration:none;text-transform:none;color:var(--ds-ink-muted);
    transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
  .ds .ds-tabbar__item .ds-icon{width:22px;height:22px}
  .ds .ds-tabbar__item[aria-current]{background:var(--ds-brand-soft);color:var(--ds-brand)}
  .ds .ds-tabbar__item:focus-visible{outline:none;box-shadow:var(--ds-focus)}
  .ds .ds-tabbar__item .ds-topbar__count{top:2px;right:calc(50% - 26px);border-color:var(--ds-surface)}
  /* The menu as a drawer from the left; the shadow of the closed drawer never shows at the edge of the page. */
  .ds .ds-side{z-index:1400;width:var(--ds-side-w);padding-top:calc(var(--ds-space-3) + env(safe-area-inset-top,0px));
    transform:translateX(-100%);visibility:hidden;box-shadow:none;
    transition:transform var(--ds-slow) var(--ds-ease),visibility 0s linear var(--ds-slow),box-shadow var(--ds-slow) var(--ds-ease)}
  .ds .ds-shell[data-drawer-open] .ds-side{transform:none;visibility:visible;box-shadow:var(--ds-shadow-3);
    transition:transform var(--ds-slow) var(--ds-ease),visibility 0s,box-shadow var(--ds-slow) var(--ds-ease)}
  .ds .ds-shell[data-drawer-open] .ds-shell-backdrop:not(.ds-shell-backdrop--sheet){opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity var(--ds-slow) var(--ds-ease),visibility 0s}
  .ds .ds-side__close{display:inline-grid;flex:0 0 44px;width:44px;height:auto;min-height:44px;border-radius:var(--ds-radius-lg);
    background:var(--ds-side-plate);color:var(--ds-side-ink)}
  .ds .ds-side__close:hover{background:var(--ds-side-hover);color:var(--ds-on-color)}
  .ds .ds-side__close .ds-icon{width:20px;height:20px}
  .ds .ds-side__link{min-height:40px}
  .ds .ds-side__link--child{min-height:36px}
  /* The search of the portal opens over the header, the whole width; «×» closes it. */
  .ds .ds-topbar{display:none}
  .ds .ds-shell[data-search-open] .ds-topbar{position:fixed;inset:0;z-index:1250;display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-space-2);
    height:auto;padding:calc(var(--ds-space-2) + env(safe-area-inset-top,0px)) var(--ds-page-x) calc(var(--ds-space-2) + env(safe-area-inset-bottom,0px));
    border:0;background:color-mix(in srgb,var(--ds-bg) 97%,transparent);box-shadow:none}
  .ds .ds-shell[data-search-open] .ds-topbar__actions{display:none}
  .ds .ds-shell[data-search-open] .ds-topbar__search{display:flex;flex-direction:column;gap:var(--ds-space-2);flex:1 1 auto;min-height:0}
  .ds .ds-topbar__form{height:52px;padding:0 6px 0 var(--ds-space-4);box-shadow:var(--ds-shadow-2)}
  .ds .ds-topbar__input{font-size:16px}
  .ds .ds-shell[data-search-open] .ds-topbar__close{display:inline-grid;flex-basis:40px;width:40px;height:40px;background:var(--ds-surface-soft)}
  /* The sheet of language and settings from the bottom. */
  .ds .ds-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:flex;flex-direction:column;max-height:calc(100dvh - 48px);margin:0;
    padding:0 0 env(safe-area-inset-bottom,0px);border-radius:var(--ds-radius-lg) var(--ds-radius-lg) 0 0;background:var(--ds-surface);
    box-shadow:var(--ds-shadow-3);transform:translateY(100%);visibility:hidden;
    transition:transform var(--ds-slow) var(--ds-ease),visibility 0s linear var(--ds-slow)}
  .ds .ds-shell[data-sheet-open] .ds-sheet{transform:none;visibility:visible;transition:transform var(--ds-slow) var(--ds-ease),visibility 0s}
  .ds .ds-sheet__handle{display:block;flex:0 0 auto;width:40px;height:4px;margin:var(--ds-space-2) auto 0;border-radius:var(--ds-radius-pill);background:var(--ds-line-strong)}
  .ds .ds-sheet__head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ds-space-3);flex:0 0 auto;
    padding:var(--ds-space-2) var(--ds-space-4) var(--ds-space-3)}
  .ds .ds-sheet__head b{font-size:18px;line-height:26px;font-weight:600;color:var(--ds-ink)}
  .ds .ds-sheet__close{flex-basis:40px;width:40px;height:40px;background:var(--ds-surface-soft)}
  .ds .ds-sheet__scroll{display:flex;flex-direction:column;gap:var(--ds-space-4);flex:1 1 auto;min-height:0;padding:0 var(--ds-space-4) var(--ds-space-4);
    overflow-y:auto;overscroll-behavior:contain}
  .ds .ds-sheet__user{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);padding:var(--ds-space-3);border:1px solid var(--ds-line);
    border-radius:var(--ds-radius-lg);background:var(--ds-surface-soft)}
  .ds .ds-sheet__avatar{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--ds-brand-soft);color:var(--ds-brand)}
  .ds .ds-sheet__avatar .ds-icon{width:22px;height:22px}
  .ds .ds-sheet__user>span:last-child{display:flex;flex-direction:column;min-width:0}
  .ds .ds-sheet__user b{font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
  .ds .ds-sheet__user span span{font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
  .ds .ds-sheet__user small{font-size:12px;line-height:16px;color:var(--ds-ink-faint)}
  .ds .ds-sheet__section{display:flex;flex-direction:column;gap:var(--ds-space-2);min-width:0}
  .ds .ds-sheet__caption{font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink-muted)}
  .ds .ds-sheet__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-2)}
  .ds .ds-sheet__tiles--list{grid-template-columns:minmax(0,1fr)}
  .ds .ds-sheet__tile{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;min-height:48px;padding:var(--ds-space-2) var(--ds-space-3);
    border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface);
    font-size:14px;line-height:20px;font-weight:500;color:var(--ds-ink);text-decoration:none;
    transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
  .ds .ds-sheet__tile:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-soft);color:var(--ds-ink)}
  .ds .ds-sheet__tile>span:not([class]){flex:1 1 auto;min-width:0}
  .ds .ds-sheet__tile[aria-current]{border-color:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line));background:var(--ds-brand-soft);color:var(--ds-brand)}
  .ds .ds-sheet__tile[aria-current] .ds-menu__code{background:var(--ds-surface);color:var(--ds-brand)}
  .ds .ds-sheet__tile[aria-current] .ds-menu__check{opacity:1}
  .ds button.ds-sheet__tile{width:100%;font-family:inherit;text-align:left;cursor:pointer}
  .ds button.ds-sheet__row{width:100%;margin:0;border-right:0;border-bottom:0;border-left:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
  .ds button.ds-sheet__row:first-child{border-top:0}
  .ds .ds-sheet__row[hidden]{display:none}
  .ds .ds-sheet__list{display:flex;flex-direction:column;margin:0;padding:0;border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);overflow:hidden}
  .ds .ds-sheet__row{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);min-height:56px;padding:var(--ds-space-2) var(--ds-space-3);
    font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);text-decoration:none;transition:background-color var(--ds-fast) var(--ds-ease)}
  .ds .ds-sheet__row+.ds-sheet__row{border-top:1px solid var(--ds-line-soft)}
  .ds .ds-sheet__row:hover{background:var(--ds-surface-soft);color:var(--ds-ink)}
  .ds .ds-sheet__row>span:not([class]){display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
  .ds .ds-sheet__row small{font-size:12px;line-height:16px;font-weight:400;color:var(--ds-ink-muted)}
  .ds .ds-sheet__row>.ds-icon:last-child{width:16px;height:16px;color:var(--ds-ink-faint)}
  .ds .ds-sheet__icon{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);color:var(--ds-ink-muted)}
  .ds .ds-sheet__icon .ds-icon{width:18px;height:18px}
  .ds .ds-sheet__version{display:block;text-align:center;font-size:11px;line-height:16px;color:var(--ds-ink-muted)}
  /* 1.5.182: «Кто онлайн» is the fifth button of the bar - the brand of the title keeps its word whole (it never breaks at its
     hyphen), and on a narrow phone the buttons stand closer and the language button is the language alone (its sheet says the
     rest), so the title keeps its place. */
  .ds .ds-mobilebar__title b{white-space:nowrap}
}
@media (max-width:400px){
  .ds .ds-mobilebar{gap:6px}
  .ds .ds-mobilebar__actions{gap:2px}
  .ds .ds-mobilebar .ds-topbar__btn--text{padding:0 var(--ds-space-2)}
  .ds .ds-mobilebar .ds-topbar__btn--text .ds-icon{display:none}
}
/* A printed page is the page alone: the shell is not printed, the page is not a scrolling box (a report prints all its
   sheets, static/ds_print.css). */
@media print{
  .ds :is(.ds-side,.ds-topbar,.ds-mobilebar,.ds-tabbar,.ds-messages,.ds-sheet,.ds-shell-backdrop,.ds-skip){display:none}
  .ds .ds-main{position:static;height:auto;min-height:0;margin:0;padding:0;overflow:visible;scrollbar-gutter:auto}
  .ds .ds-main::before{content:none}
  .ds .ds-shell{position:static;min-height:0;background:none}
}
/* A device without a pointer that hovers (a phone, a tablet): an administrator's «×» stands visible beside the row. */
@media (hover:none){
  .ds .ds-side__row:has(>.ds-side__hideform){padding-right:30px}
  .ds .ds-side__row--area>.ds-side__hideform,.ds .ds-side__hideform{right:0}
  .ds .ds-side__hide{opacity:1;transform:none;pointer-events:auto;background:var(--ds-side-plate)}
}

/* 19. Global search and quick view (brandbook 3.24, 1.5.94, design stage 7b): the result panel under the search pill of the
   bar over the page (on a phone under the search over the header) and the card of a record that opens by pointing at its
   link. app.js builds both from the design system in Summit; the words come from the server (search_words.py,
   intelligence_web.py). The panel itself scrolls (app.js loads the next results at its end): its head with the filters and
   its foot stay in place. Motions of the old panel kept: a row slides by --ds-nudge and takes the brand tint, the best match
   rises, the loading mark turns. */
.ds .ds-search-panel{position:absolute;top:calc(100% + var(--ds-space-2));left:0;right:0;z-index:1;display:flex;flex-direction:column;
  max-height:min(640px,calc(100svh - var(--ds-topbar-h) - var(--ds-space-6)));margin:0;overflow:auto;overscroll-behavior:contain;
  scroll-padding:96px 0 64px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);
  box-shadow:var(--ds-shadow-2);color:var(--ds-ink);animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-search-panel__top{position:sticky;top:0;z-index:2;flex:0 0 auto;border-bottom:1px solid var(--ds-line-soft);background:var(--ds-surface)}
.ds .ds-search-panel__head{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--ds-space-3);
  padding:var(--ds-space-3) var(--ds-space-4) var(--ds-space-2);font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-search-panel__head>span{font-weight:600;color:var(--ds-ink)}
.ds .ds-search-panel__head>small{font-size:12px;line-height:16px;text-align:right}
/* The row scrolls sideways without a scrollbar; a soft fade at its end shows that there are more kinds (the last one ends
   clear of the fade: the row's end padding is as wide). */
.ds .ds-search-panel__filters{display:flex;flex-direction:row;gap:var(--ds-space-1);padding:0 var(--ds-space-6) var(--ds-space-2) var(--ds-space-3);
  overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,var(--ds-ink) calc(100% - var(--ds-space-6)),transparent)}
.ds .ds-search-panel__filters::-webkit-scrollbar{display:none}
.ds .ds-search-panel__filters:empty{display:none}
/* 1.5.115 (brandbook 3.39): the filter by kind of the unified timeline of a card is the same button as the filter of the search panel. */
.ds :is(.ds-search-panel__filter,.ds-feed__filter){display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;height:28px;margin:0;
  padding:0 var(--ds-space-2) 0 var(--ds-space-3);border:0;border-radius:var(--ds-radius-sm);background:transparent;color:var(--ds-ink-muted);
  font-family:inherit;font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds :is(.ds-search-panel__filter,.ds-feed__filter):hover{background:var(--ds-surface-soft);color:var(--ds-ink);transform:translateY(var(--ds-lift-sm))}
.ds :is(.ds-search-panel__filter,.ds-feed__filter):active{transform:none}
.ds :is(.ds-search-panel__filter,.ds-feed__filter):focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds :is(.ds-search-panel__filter,.ds-feed__filter)[aria-pressed="true"]{background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds :is(.ds-search-panel__filter,.ds-feed__filter)[aria-pressed="true"] .ds-badge--count{background:var(--ds-surface);color:var(--ds-brand)}
.ds .ds-search-panel__caption{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ds-ink-muted)}
.ds .ds-search-panel__focus{display:flex;flex-direction:column;gap:var(--ds-space-2);flex:0 0 auto;padding:var(--ds-space-3) var(--ds-space-3) var(--ds-space-1)}
.ds .ds-search-panel__focus>.ds-search-panel__caption{padding:0 var(--ds-space-1)}
.ds .ds-search-panel__best{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);padding:var(--ds-space-3);
  border:1px solid color-mix(in srgb,var(--ds-brand) 35%,var(--ds-line));border-radius:var(--ds-radius-md);background:var(--ds-brand-soft);
  color:var(--ds-ink);text-decoration:none;
  transition:transform var(--ds-fast) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease)}
.ds .ds-search-panel__best:is(:hover,[aria-selected="true"]){border-color:var(--ds-brand);box-shadow:var(--ds-shadow-2);transform:translateY(var(--ds-lift-sm))}
.ds .ds-search-panel__best:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-search-panel__best>.ds-list__main{flex:1 1 auto}
.ds .ds-search-panel__best .ds-list__title{font-size:15px;line-height:22px}
.ds .ds-search-panel__best:is(:hover,[aria-selected="true"]) .ds-list__title{color:var(--ds-brand)}
.ds .ds-search-panel__go{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--ds-brand)}
.ds .ds-search-panel__go .ds-icon{width:18px;height:18px}
.ds .ds-search-panel__related{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);padding:0 var(--ds-space-1)}
.ds .ds-search-panel__results{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;padding:var(--ds-space-2)}
.ds .ds-search-panel__results:empty{display:none}
.ds .ds-search-panel__results>.ds-search-panel__row{justify-content:space-between;width:100%;margin:0;padding:var(--ds-space-2) var(--ds-space-3);
  border:0;border-radius:var(--ds-radius-md);background:transparent;color:var(--ds-ink);font-family:inherit;font-size:14px;line-height:20px;
  text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-search-panel__results>.ds-search-panel__row:is(:hover,[aria-selected="true"]){background:var(--ds-brand-soft);transform:translateX(var(--ds-nudge))}
.ds .ds-search-panel__results>.ds-search-panel__row:is(:hover,[aria-selected="true"]) .ds-list__title{color:var(--ds-brand)}
.ds .ds-search-panel__results>.ds-search-panel__row:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-search-panel__row>.ds-list__lead{align-items:flex-start}
/* A row of one line (a recent query) stands in the middle of its mark; a result of two lines starts at its top. */
.ds .ds-search-panel__row>.ds-list__lead>.ds-list__title{align-self:center}
.ds .ds-search-panel__icon{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--ds-radius-sm);
  background:var(--ds-surface-soft);color:var(--ds-ink-muted);transition:background-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-search-panel__icon .ds-icon{width:18px;height:18px}
.ds .ds-search-panel__row:is(:hover,[aria-selected="true"]) .ds-search-panel__icon,.ds .ds-search-panel__best .ds-search-panel__icon{background:var(--ds-surface);color:var(--ds-brand)}
.ds .ds-search-panel__row .ds-list__meta{font-size:12px;line-height:16px}
.ds .ds-search-panel__row>.ds-list__side{align-self:center}
.ds .ds-search-panel__recent{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ds-space-3);
  padding:0 0 var(--ds-space-1) var(--ds-space-3)}
.ds .ds-search-panel__state{padding:var(--ds-space-4) var(--ds-space-3);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-search-panel__state--loading{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2)}
.ds .ds-search-panel__state--loading::before{content:"";flex:0 0 auto;width:14px;height:14px;border:2px solid var(--ds-line);
  border-top-color:var(--ds-brand);border-radius:50%;animation:ds-spin 800ms linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.ds .ds-search-panel__foot{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:var(--ds-space-3);flex:0 0 auto;margin-top:auto;padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-4);
  border-top:1px solid var(--ds-line-soft);background:var(--ds-surface);font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
/* The card of a record (company, contact, product, project) at a link: div.ds > .ds-popover--quick at the body. */
.ds .ds-popover--quick{width:380px;max-height:min(620px,calc(100vh - 24px))}
.ds .ds-popover--quick>.ds-popover__head{align-items:flex-start}
.ds .ds-quick__media{display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:48px;overflow:hidden;border:1px solid var(--ds-line-soft);
  border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);color:var(--ds-ink-muted);font-size:18px;line-height:24px;font-weight:600}
.ds .ds-quick__media img{display:block;width:100%;height:100%;object-fit:cover}
.ds .ds-quick__media--product{background:var(--ds-surface)}
.ds .ds-quick__media--product img{object-fit:contain;padding:var(--ds-space-1)}
.ds .ds-quick__media .ds-icon{width:22px;height:22px}
.ds .ds-quick__title{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.ds .ds-quick__title>span:not(.ds-badge){font-size:13px;line-height:18px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-quick__title>.ds-badge{align-self:flex-start;margin-top:var(--ds-space-1)}
.ds .ds-popover--quick .ds-dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-3) var(--ds-space-4)}
.ds .ds-quick__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--ds-space-2)}
.ds .ds-quick__stats .ds-stat{padding:var(--ds-space-2) var(--ds-space-3)}
.ds .ds-quick__stats .ds-stat__value{font-size:15px;line-height:22px;overflow-wrap:anywhere}
@media (max-width:900px){
  .ds .ds-shell[data-search-open] .ds-search-panel{position:static;flex:1 1 auto;min-height:0;max-height:none;box-shadow:var(--ds-shadow-1)}
  .ds .ds-search-panel__head>small{display:none}
}
@media (max-width:720px){
  /* A phone puts the side of a row under its text: the state stands at the text, not in the middle. */
  .ds .ds-search-panel__row>.ds-list__side{align-self:flex-start;justify-content:flex-start;padding-left:calc(32px + var(--ds-space-3))}
}
@media (prefers-reduced-motion:reduce){
  :root{--ds-nudge:0px}
  .ds .ds-search-panel__state--loading::before{animation:none}
}

/* 20. The map of a place (brandbook 3.34, 1.5.107): the map of Yandex by the address of a record, opened by «Показать карту»
   (app.js, B2B_MAPS). A card the width of the cards above it (on a phone - right under the geography); the frame is a soft
   field of dots with the pin of the place in its middle and the state in words until the map answers («Загружаем карту…»
   with the ring of the search, «Карта Яндекса сейчас недоступна» - instead of the error page of the browser); the map shows
   itself softly. The head of the card is the head of every card: «Место реализации», the address under it, «Открыть в Яндекс
   Картах» on the right. */
.ds .ds-columns>.ds-map{grid-column:1/-1}
.ds .ds-map{animation:ds-fold-in var(--ds-base) var(--ds-ease);scroll-margin-bottom:calc(var(--ds-shell-bottom) + var(--ds-space-3))}
.ds .ds-map__frame{position:relative;height:var(--ds-map-height);overflow:hidden;border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-md);background-color:var(--ds-surface-soft);
  background-image:radial-gradient(circle,var(--ds-line) 1.2px,transparent 1.7px);background-size:22px 22px;background-position:center}
.ds .ds-map__state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--ds-space-3);margin:0;padding:var(--ds-space-4);font-size:13px;line-height:18px;color:var(--ds-ink-muted);text-align:center}
.ds .ds-map__pin{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:var(--ds-surface);box-shadow:var(--ds-shadow-1);color:var(--ds-brand);transition:color var(--ds-base) var(--ds-ease)}
.ds .ds-map__pin .ds-icon{width:24px;height:24px}
.ds .ds-map[data-map-status="unavailable"] .ds-map__pin{color:var(--ds-ink-faint)}
.ds .ds-map[data-map-status="loading"] [data-map-words]{display:flex;align-items:center;gap:var(--ds-space-2)}
.ds .ds-map[data-map-status="loading"] [data-map-words]::before{content:"";flex:0 0 auto;width:14px;height:14px;
  border:2px solid var(--ds-line);border-top-color:var(--ds-brand);border-radius:50%;animation:ds-spin 800ms linear infinite}
.ds .ds-map__view{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;opacity:0;
  transition:opacity var(--ds-slow) var(--ds-ease)}
.ds .ds-map__view.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){.ds .ds-map{animation:none}.ds .ds-map[data-map-status="loading"] [data-map-words]::before{animation:none}}

/* 21. A document of the portal (brandbook 3.42, 1.5.118): a commercial proposal and a specification - one structure on the
   card of the proposal, in its print (ds_print.css, A4 portrait), in DOCX and on the page of the link. On the screen a sheet:
   the surface of a card with its line and soft shadow, the width of A4 and its quiet margins. The letterhead of the supplier
   above a thin line, the title (h2 - an h1 of 26 px pushed the number of a proposal off a phone; the page of the link holds
   the same words in an h1 for a screen reader; the number never breaks)
   with the date and the validity under it, pairs of a label and a value, the
   table with thin lines (its head on the soft surface, the figures tabular on the right), the totals under it - the last one
   bold on the soft surface -, the amount in words, the terms, the manager; a specification ends with two lines to sign. On
   a phone the pairs stand one under another and the table becomes a list of rows; a print is never the phone. */
.ds .ds-dl--1{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-3)}
/* A column of actions of their own width (the status of a proposal): one under another, from the left. */
.ds .ds-stack--start{align-items:flex-start}
.ds .ds-doc{display:flex;flex-direction:column;gap:var(--ds-space-5);width:100%;max-width:820px;min-width:0;margin-inline:auto;
  padding:var(--ds-space-8) 48px;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
  box-shadow:var(--ds-shadow-1);font-size:14px;line-height:21px;color:var(--ds-ink)}
.ds .ds-doc__letterhead{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--ds-space-4);border-bottom:1px solid var(--ds-line-soft);
  font-size:12px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-doc__letterhead b{font-size:15px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds .ds-doc__title{display:flex;flex-direction:column;gap:var(--ds-space-1)}
.ds .ds-doc__title p{margin:0;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-doc__pairs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ds-space-1);margin:0}
.ds .ds-doc__pairs>div{display:grid;grid-template-columns:minmax(128px,30%) minmax(0,1fr);gap:var(--ds-space-4);min-width:0}
.ds .ds-doc__pairs dt{margin:0;color:var(--ds-ink-muted)}
.ds .ds-doc__pairs dd{margin:0;white-space:pre-line;overflow-wrap:break-word}
.ds .ds-doc :is(.ds-doc__intro,.ds-doc__words,.ds-doc__note){margin:0}
.ds .ds-doc__note{white-space:pre-line}
/* The table scrolls in its own frame only when a long word of a model does not fit (never the page sideways). */
.ds .ds-doc__table-wrap{min-width:0;overflow-x:auto}
.ds .ds-doc__table{width:100%;border-collapse:collapse;font-size:13px;line-height:19px}
.ds .ds-doc__table :is(th,td){padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);vertical-align:top;text-align:left}
.ds .ds-doc__table thead th{background:var(--ds-surface-soft);font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-doc__table thead th.ds-doc__cell--right{white-space:nowrap}
.ds .ds-doc__table .ds-doc__cell--right{text-align:right}
.ds .ds-doc__table .ds-doc__cell--center{text-align:center}
.ds .ds-doc__table td.ds-num{white-space:nowrap}
.ds .ds-doc__table .ds-doc__model{font-weight:600;overflow-wrap:break-word}
.ds .ds-doc__table .ds-doc__description{overflow-wrap:break-word}
.ds .ds-doc__table tfoot :is(th,td){font-weight:400;text-align:right}
.ds .ds-doc__table tfoot td{white-space:nowrap}
.ds .ds-doc__table .ds-doc__grand :is(th,td){font-weight:700;background:var(--ds-surface-soft)}
.ds .ds-doc__contact{display:flex;flex-direction:column;gap:2px;margin:0;color:var(--ds-ink-muted)}
.ds .ds-doc__signatures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-7);margin-top:var(--ds-space-6)}
.ds .ds-doc__signatures>div{display:flex;flex-direction:column;gap:var(--ds-space-7)}
.ds .ds-doc__signatures span:first-child{color:var(--ds-ink-muted)}
.ds .ds-doc__sign{display:block;height:1px;background:var(--ds-ink-faint)}
/* The page of the link (/kp/<token>): the band of the portal with the lockup of the brands, the actions of the document on
   the right above it, the sheet; nothing of the portal around it. */
.ds .ds-public{display:flex;flex-direction:column;gap:var(--ds-space-5);min-height:100vh;min-height:100svh;padding:0 var(--ds-space-4) var(--ds-space-8);
  background:radial-gradient(1200px 520px at 50% -12%,var(--ds-brand-soft),transparent 72%),var(--ds-bg)}
.ds .ds-public__band{display:flex;align-items:center;justify-content:center;min-height:80px;margin:0 calc(var(--ds-space-4) * -1);
  padding:var(--ds-space-4);background:var(--ds-sidebar)}
.ds .ds-public__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);width:100%;max-width:820px;margin-inline:auto}
.ds .ds-public__state{display:flex;flex-direction:column;gap:var(--ds-space-3);width:min(560px,100%);margin-inline:auto}
.ds .ds-public__state p{margin:0;color:var(--ds-ink-muted)}
.ds .ds-public__state>.ds-entity{align-self:flex-start}
@media screen and (max-width:720px){
  .ds .ds-doc{gap:var(--ds-space-4);padding:var(--ds-space-5) var(--ds-space-4);border-radius:var(--ds-radius-md)}
  .ds .ds-doc__pairs{gap:var(--ds-space-2)}
  .ds .ds-doc__pairs>div{grid-template-columns:minmax(0,1fr);gap:0}
  .ds .ds-doc__table,.ds .ds-doc__table :is(tbody,tfoot,tr,td){display:block}
  .ds .ds-doc__table thead{display:none}
  .ds .ds-doc__table tbody tr{display:flex;flex-direction:column;gap:2px;padding:var(--ds-space-3) 0;border-bottom:1px solid var(--ds-line-soft)}
  .ds .ds-doc__table td{padding:0;border:0;text-align:left}
  .ds .ds-doc__table tbody td.ds-num{display:flex;justify-content:space-between;gap:var(--ds-space-3);white-space:normal}
  .ds .ds-doc__table tbody td.ds-num::before{content:attr(data-label);color:var(--ds-ink-muted)}
  .ds .ds-doc__table tbody td.ds-num:first-child{display:none}
  .ds .ds-doc__table tfoot tr{display:flex;justify-content:space-between;gap:var(--ds-space-3);padding:var(--ds-space-2) 0}
  .ds .ds-doc__table tfoot :is(th,td){display:block;padding:0;border:0;background:none}
  .ds .ds-doc__signatures{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-6)}
}

/* 22. The change of a price (brandbook 3.62, 1.5.141): «+3,2 %» with its sign - a price that went up in the colour of danger
   (the buyer pays more), down in the colour of success; the same price - the muted ink. Tabular figures, never broken. */
.ds .ds-delta{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ds-ink-muted)}
.ds .ds-delta[data-delta="up"]{color:var(--ds-danger)}
.ds .ds-delta[data-delta="down"]{color:var(--ds-success)}
/* 1.5.143 (brandbook 3.64): a gain - the growth of a revenue: up is good (the colour of success), down - of danger. */
.ds .ds-delta--gain[data-delta="up"]{color:var(--ds-success)}
.ds .ds-delta--gain[data-delta="down"]{color:var(--ds-danger)}

/* 8. Responsive --------------------------------------------------------- */
@media (max-width:720px){
  .ds .ds-field-grid,.ds .ds-field-grid--3,.ds .ds-dl,.ds .ds-dl--3{grid-template-columns:minmax(0,1fr)}
  .ds .ds-dl--4{grid-template-columns:minmax(0,1fr)}
  .ds .ds-dl--tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 1.5.87: tiles with long values (an order number, a status badge, a company) stand one per row on a phone. */
  .ds .ds-dl--tiles.ds-dl--long{grid-template-columns:minmax(0,1fr)}
  .ds .ds-page-head{flex-direction:column;align-items:stretch}
  .ds .ds-card{padding:var(--ds-space-4)}
  .ds .ds-crumbs::before{display:none}
  .ds .ds-media-row{grid-template-columns:minmax(0,1fr)}
  .ds .ds-actionbar .ds-btn{flex:1 1 auto}
  .ds .ds-control{font-size:16px}
  /* Touch targets: every button and one-line control is 44 px on phones. */
  .ds .ds-btn,.ds .ds-btn--sm,.ds .ds-control{height:44px;min-height:44px}
  .ds .ds-combobox,.ds .ds-combobox:has(.ds-control--sm){--ds-combobox-field:44px}
  .ds .ds-btn--icon,.ds .ds-btn--sm.ds-btn--icon{width:44px}
  .ds textarea.ds-control{height:auto;min-height:96px}
  .ds .ds-list__item{flex-direction:column;align-items:stretch}
  .ds .ds-list__side{justify-content:flex-start}
  .ds .ds-list--compact .ds-list__item{flex-direction:row;align-items:flex-start}
  /* Navigation rows (a title and a chevron) stay on one line on phones. */
  .ds .ds-list--nav .ds-list__item{flex-direction:row;align-items:center}
  /* 1.5.85: a navigation row whose side shows a status badge puts the badge under the text on phones and keeps the
     chevron on the right, so the title and its meta keep the width of the row (a long «Шаг просрочен · 11.09.2026»
     squeezed them into a narrow column). */
  /* 1.5.116: the amount of a row (ds-list__amount - a deal of the board of the head of sales) goes under the text the same way. */
  .ds .ds-list--nav .ds-list__item:has(>.ds-list__side>:is(.ds-badge,.ds-list__amount)){display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--ds-space-2) var(--ds-space-3);align-items:center}
  .ds .ds-list--nav .ds-list__item>.ds-list__side:has(>:is(.ds-badge,.ds-list__amount)){display:contents}
  .ds .ds-list--nav .ds-list__side>:is(.ds-badge,.ds-list__amount){grid-column:1;justify-self:start}
  .ds .ds-list--nav .ds-list__side:has(>:is(.ds-badge,.ds-list__amount))>:not(.ds-badge,.ds-list__amount){grid-column:2;grid-row:1/span 2}
  /* 1.5.85: a decision form under a row (price change requests) reads like the decision centre on a phone: the comment
     takes the row, the buttons follow it from the left. */
  .ds .ds-list__side .ds-input-group{justify-content:flex-start}
  .ds .ds-list__side .ds-input-group>.ds-control{flex-basis:100%}
  .ds .ds-menu__item{min-height:44px}
  /* 1.5.95: the kinds of the search results are buttons too - 44 px under the finger (until 1.5.94 the legacy layer
     stretched every button: 44 px up to 900 px, 34 px on a computer, over the 28 px of the brandbook). */
  .ds :is(.ds-search-panel__filter,.ds-feed__filter){height:44px}
  /* The page head stacks on phones: its menus open under the whole action row, full width,
     so a wide panel (columns, saved views) never leaves the screen. */
  .ds .ds-page-head .ds-actions{position:relative}
  .ds .ds-page-head .ds-menu{position:static}
  .ds .ds-page-head .ds-menu__list{left:0;right:0;width:auto;max-width:none}
  .ds .ds-split{grid-template-columns:minmax(0,1fr)}
  .ds .ds-graph__viewport{height:440px}
  .ds .ds-graph--map .ds-graph__viewport{height:clamp(440px,calc(100dvh - 220px),760px)}
  /* The title keeps at least ~11em; only when that and the actions do not fit, the actions wrap below. */
  .ds .ds-card__head{flex-wrap:wrap}
  .ds .ds-card__head>:first-child{flex:1 1 0;min-width:11em}
  /* 1.5.157: the head of a subsection with a state badge wraps only when the title at its own width and the badge do not fit in one
     line («Путь к статусу TOP-реселлер · TP-LINK» and its state - the badge goes under the title instead of squeezing it into a column
     of single words); a head with actions or a hint stays as it was («Коммерческие условия» and its button, «Шкала проекта» and its
     zoom, «Линейки» and its hint). */
  .ds .ds-subsection__head:has(>.ds-badge){flex-wrap:wrap}
  .ds .ds-subsection__head:has(>.ds-badge)>:first-child{flex:1 1 auto}
  /* Item head: number and title on the first row, switches and actions below. */
  .ds .ds-item__head>b{flex:1 1 60%}
  .ds .ds-item__head>.ds-switch{flex:1 1 auto}
}
/* 1.5.163 (brandbook 3.73): serial numbers - monospaced tags in a soft plate under the model of a line of a shipment; «×» removes
   one behind its dialog. The quick input of them is monospaced too (ds-control--mono, a textarea). */
.ds .ds-serials{display:flex;flex-wrap:wrap;gap:var(--ds-space-1);margin-top:var(--ds-space-1)}
.ds .ds-serial{display:inline-flex;align-items:center;gap:2px;min-height:28px;padding:0 var(--ds-space-1) 0 var(--ds-space-2);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-sm);background:var(--ds-surface-soft);color:var(--ds-ink);font:500 12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;white-space:nowrap}
.ds .ds-serial:not(:has(.ds-serial__remove)){padding-right:var(--ds-space-2)}
.ds .ds-serial__remove{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0;padding:0;border:0;border-radius:var(--ds-radius-sm);
  background:transparent;color:var(--ds-ink-muted);font:inherit;cursor:pointer;transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-serial__remove:hover{background:var(--ds-danger-soft);color:var(--ds-danger)}
.ds .ds-serial__remove:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-control--mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
/* 1.5.178 (brandbook 3.77): the specification of a product - the table of a section as on the source (pdinfo). The name columns
   and «Details»; a branch is a cell merged down over its leaves (bold, the deeper tone), a leaf is a name merged right to the
   last name column (the soft tone) and its value (the brand tint). Thin lines between the cells; the text keeps the line breaks
   of the source. The table scrolls inside its frame when it is wider; the head stays on top. A row only the vendor's people see
   has a warm bar on its left; a row the search found is lit; a row of a comparison whose values differ - the values in warm. */
.ds .ds-spec-table-wrap{border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);overflow:auto;
  max-height:min(78vh,1100px);box-shadow:var(--ds-shadow-1)}
.ds .ds-spec{width:100%;min-width:640px;margin:0;border-collapse:collapse;font-size:13px;line-height:1.45;color:var(--ds-ink)}
.ds .ds-spec th,.ds .ds-spec td{padding:6px 10px;border:1px solid var(--ds-line);text-align:left;vertical-align:middle;
  white-space:pre-line;overflow-wrap:break-word}
.ds .ds-spec thead th{position:sticky;top:0;z-index:1;height:auto;background:var(--ds-surface-soft);font-weight:600;color:var(--ds-ink);
  box-shadow:0 1px 0 var(--ds-line)}
.ds .ds-spec__group{background:color-mix(in srgb,var(--ds-ink) 7%,var(--ds-surface));font-weight:600;min-width:6em}
.ds .ds-spec__label{background:var(--ds-surface-soft);min-width:12em}
.ds .ds-spec__value{background:color-mix(in srgb,var(--ds-brand) 6%,var(--ds-surface));min-width:14em}
.ds .ds-spec__value:empty::before{content:"—";color:var(--ds-ink-faint)}
.ds .ds-spec__label--internal,.ds .ds-spec__group--internal{box-shadow:inset 3px 0 0 var(--ds-warning)}
.ds .ds-spec tr.is-spec-hit>td{background:var(--ds-warning-soft);transition:background var(--ds-fast) var(--ds-ease)}
.ds .ds-spec tr.ds-spec__differs>td.ds-spec__value{background:color-mix(in srgb,var(--ds-warning) 16%,var(--ds-surface))}
.ds .ds-spec-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);margin:0}
.ds .ds-spec-tools .ds-search{flex:1 1 260px;max-width:420px}
.ds .ds-spec-panel[hidden]{display:none}
@media (max-width:900px){
  .ds .ds-spec{font-size:12px;min-width:560px}
  .ds .ds-spec th,.ds .ds-spec td{padding:5px 8px}
  .ds .ds-spec__label{min-width:9em}
  .ds .ds-spec__value{min-width:10em}
  .ds .ds-spec-tools .ds-search{max-width:none}
}

/* 1.5.180 (brandbook 3.79) «Закреплённый заказ»: the order of a product card is a small card pinned under the bar over the page at its
   right end - the field of master boxes and «В корзину» - not a strip across the bottom of the screen; it stays while the page
   scrolls, under the menus of the bar (z-index below the bar's). The folded specification opens with the motion of a fold. */
.ds .ds-orderpin{position:fixed;z-index:1100;top:calc(var(--ds-topbar-h) + var(--ds-space-2));right:var(--ds-topbar-gap);
  display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);margin:0;padding:6px 6px 6px var(--ds-space-3);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface);box-shadow:var(--ds-shadow-2);
  animation:ds-fade-in var(--ds-base) var(--ds-ease)}
.ds .ds-shell[data-scrollbar-gutter] .ds-orderpin{right:calc(var(--ds-scrollbar-w,0px) + var(--ds-topbar-gap))}
.ds .ds-orderpin__qty{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);margin:0}
.ds .ds-orderpin__label{font-size:12px;line-height:16px;color:var(--ds-ink-muted);white-space:nowrap}
/* 1.5.185: the pieces beside the master boxes - «× 10 =» quiet between the two fields; the pieces field is a little wider (100 000). */
.ds .ds-orderpin__times{font-size:12px;line-height:16px;color:var(--ds-ink-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ds .ds-orderpin__pcs{width:88px;flex-basis:88px}
.ds .ds-spec-body{animation:ds-fold-in var(--ds-base) var(--ds-ease)}
.ds .ds-card--folded>.ds-card__head{margin-bottom:0}
@media (max-width:900px){
  /* On a phone the page has no room beside its title: the order takes its own line at the right end above the head of the page and
     sticks under the bar of the phone when the page scrolls - it never lies on the title. */
  .ds .ds-orderpin{position:sticky;top:calc(var(--ds-mobilebar-h) + var(--ds-space-2));right:auto;width:max-content;max-width:100%;
    margin:0 0 var(--ds-space-3) auto}
}
@media (max-width:480px){
  /* 1.5.185: with the pieces beside them the master boxes keep the line of a phone - the word «Мастер-боксы» goes into the field's own
     name (read aloud, shown as its tip), «[1] × 10 = [10] шт.» says the rest. */
  .ds .ds-orderpin[data-orderpin-pack] .ds-orderpin__qty:first-of-type .ds-orderpin__label{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ds .ds-orderpin[data-orderpin-pack]{gap:6px;padding-left:var(--ds-space-2)}
  .ds .ds-orderpin__pcs{width:72px;flex-basis:72px}
}

/* 1.5.180 (brandbook 3.80) «Упаковка и логистика»: one block, the values in compact groups (the device, its box, the master box, the
   codes) - a soft panel per group, a label on the left and the value on the right, one thin line between the rows; an empty value is
   not a row. Two groups abreast, one on a phone. */
.ds .ds-kvgroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--ds-space-3);margin:0}
.ds .ds-kvgroup{min-width:0;padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);transition:box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-kvgroup:hover{box-shadow:var(--ds-shadow-1)}
.ds .ds-kvgroup__title{margin:0 0 2px;font-size:12px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-kvgroup dl{margin:0}
.ds .ds-kvgroup dl>div{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--ds-space-2);padding:3px 0;
  border-top:1px solid var(--ds-line)}
.ds .ds-kvgroup dl>div:first-child{border-top:0}
.ds .ds-kvgroup dt{margin:0;font-size:12px;line-height:18px;color:var(--ds-ink-muted);white-space:nowrap}
.ds .ds-kvgroup dd{margin:0;min-width:0;font-size:13px;line-height:18px;color:var(--ds-ink);text-align:right}
@media (max-width:900px){
  .ds .ds-kvgroups{grid-template-columns:minmax(0,1fr)}
}

/* 1.5.182 (brandbook 3.82): «Кто онлайн» and the mini-chat - a panel under the bar over the page at its right end (on a phone - the
   whole screen under the bar). Bubbles: one's own - the soft brand, the other's - the soft surface; a new one fades in. */
.ds .ds-topbar__count--online{top:auto;bottom:-6px;right:-7px;background:var(--ds-success)}
.ds .ds-chat{position:fixed;z-index:1200;top:calc(var(--ds-topbar-h) + var(--ds-space-2));right:var(--ds-topbar-gap);display:flex;flex-direction:column;
  width:min(380px,calc(100vw - 2 * var(--ds-space-4)));height:min(560px,calc(100vh - var(--ds-topbar-h) - var(--ds-space-6)));
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);box-shadow:var(--ds-shadow-3);overflow:hidden;
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top right;transition:opacity var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease)}
.ds .ds-chat[hidden]{display:none}
.ds .ds-chat.is-open{opacity:1;transform:none}
.ds .ds-chat__head{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);min-height:56px;padding:var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-4);
  border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-chat__head [data-chat-back]:not([hidden])~.ds-chat__title{padding-left:0}
.ds .ds-chat__peer{flex:0 0 auto}
.ds .ds-chat__peer[hidden]{display:none}
.ds .ds-chat__title{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds .ds-chat__title b{font-size:15px;line-height:20px;font-weight:600;color:var(--ds-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.ds .ds-chat__title small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.ds .ds-chat__title small:empty{display:none}
.ds .ds-chat__people{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ds-space-2)}
.ds .ds-chat__people[hidden]{display:none}
/* 1.5.184 (brandbook 3.84): the offer of the notifications under the people - while they are off on this device. */
.ds .ds-chat__push{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-2);flex:0 0 auto;padding:var(--ds-space-3) var(--ds-space-4);
  border-top:1px solid var(--ds-line-soft);background:var(--ds-surface-soft);font-size:13px;line-height:19px;color:var(--ds-ink-muted)}
.ds .ds-chat__push[hidden],.ds .ds-chat__people[hidden]+.ds-chat__push{display:none}
.ds .ds-chat__group+.ds-chat__group{margin-top:var(--ds-space-3)}
.ds .ds-chat__group h3{margin:var(--ds-space-1) var(--ds-space-2) var(--ds-space-1);font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-chat__person{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);width:100%;min-height:52px;margin:0;padding:var(--ds-space-2);
  border:0;border-radius:var(--ds-radius-md);background:none;font:inherit;text-align:left;color:var(--ds-ink);cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__person:hover,.ds .ds-chat__person:focus-visible{background:var(--ds-surface-soft);outline:none}
.ds .ds-chat__who{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds .ds-chat__who b{font-size:14px;line-height:19px;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.ds .ds-chat__who small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.ds .ds-chat__side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.ds .ds-chat__side small{font-size:11px;line-height:14px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-chat__unread{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--ds-radius-pill);background:var(--ds-danger);
  font-size:11px;line-height:1;font-weight:700;color:var(--ds-on-color);font-variant-numeric:tabular-nums}
.ds .ds-chat__avatar{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:var(--ds-radius-pill);
  background:var(--ds-brand-soft);color:var(--ds-brand);font-size:13px;line-height:1;font-weight:600}
/* 1.5.190: a photo fills exactly its avatar whatever its proportions - the chat, the card of a person, the graph of people, the
   quick view (the owner, 22.10.2026: a tall photo made an oval and moved the head of the conversation; elsewhere a tall photo
   was 96×336 in a 96×96 frame - its middle cut by the frame). The circle of the chat is not clipped itself: the mark «в сети»
   stands on its edge. */
.ds .ds-chat__avatar img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.ds .ds-avatar,.ds .ds-graph__avatar,.ds .ds-quick__media{position:relative}
.ds .ds-chat__avatar img,.ds .ds-avatar img,.ds .ds-graph__avatar img,.ds .ds-quick__media img{position:absolute;inset:0}
.ds .ds-chat__avatar.is-online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:2px solid var(--ds-surface);
  border-radius:var(--ds-radius-pill);background:var(--ds-success)}
.ds .ds-chat__empty{margin:var(--ds-space-4) var(--ds-space-3);font-size:13px;line-height:19px;color:var(--ds-ink-muted);text-align:center}
.ds .ds-chat__thread{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ds .ds-chat__thread[hidden]{display:none}
.ds .ds-chat__messages{display:flex;flex-direction:column;gap:var(--ds-space-2);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--ds-space-3) var(--ds-space-3) var(--ds-space-2);background:var(--ds-bg)}
.ds .ds-chat__msg{display:flex;flex-direction:column;align-self:flex-start;gap:4px;max-width:82%;padding:var(--ds-space-2) var(--ds-space-3);
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-lg);border-bottom-left-radius:var(--ds-radius-sm);background:var(--ds-surface)}
.ds .ds-chat__msg--mine{align-self:flex-end;border-color:transparent;border-radius:var(--ds-radius-lg);border-bottom-right-radius:var(--ds-radius-sm);background:var(--ds-brand-soft)}
.ds .ds-chat__msg.is-new{animation:ds-chat-in var(--ds-slow) var(--ds-ease)}
@keyframes ds-chat-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ds .ds-chat__body{margin:0;font-size:14px;line-height:20px;color:var(--ds-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ds .ds-chat__at{display:inline-flex;flex-direction:row;align-items:center;gap:3px;align-self:flex-end;font-size:11px;line-height:14px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums;cursor:default}
/* 1.5.183 (brandbook 3.83): the marks of one's own message and the days of a conversation. */
.ds .ds-chat__tick{display:inline-flex;flex:0 0 auto;width:16px;height:14px;color:var(--ds-ink-muted)}
.ds .ds-chat__tick .ds-icon{width:16px;height:14px;stroke-width:2}
.ds .ds-chat__tick--read{color:var(--ds-brand)}
.ds .ds-chat__tick--failed{color:var(--ds-danger)}
.ds .ds-chat__tick--sending .ds-icon{stroke-width:1.8}
.ds .ds-chat__tick.is-new{animation:ds-chat-in var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__who small .ds-chat__tick{vertical-align:-3px}
.ds .ds-chat__day{display:flex;justify-content:center;margin:var(--ds-space-2) 0 var(--ds-space-1)}
.ds .ds-chat__day span{padding:2px var(--ds-space-3);border-radius:var(--ds-radius-pill);background:var(--ds-surface);border:1px solid var(--ds-line);
  font-size:11px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-chat__msg.is-failed{border:1px solid var(--ds-danger)}
.ds .ds-chat__failed{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--ds-space-2);font-size:12px;line-height:16px;color:var(--ds-danger)}
.ds .ds-chat__retry{margin:0;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ds-brand);cursor:pointer}
.ds .ds-chat__retry:hover,.ds .ds-chat__retry:focus-visible{text-decoration:underline;outline:none}
.ds .ds-chat__body--unreadable{font-style:italic;color:var(--ds-ink-muted)}
.ds .ds-chat__picture{display:block;overflow:hidden;border-radius:var(--ds-radius-md)}
.ds .ds-chat__picture img{display:block;max-width:100%;max-height:220px;object-fit:contain}
/* 1.5.203 (brandbook 3.100): a picture and a video keep their place before they are loaded - the width and the proportion come with
   the message (chat.js sets --ds-chat-w and --ds-chat-r); the bubble is at most 82 % of the conversation (cqw of the list). */
.ds .ds-chat__messages{container-type:inline-size}
.ds .ds-chat__picture img[data-chat-shaped]{width:min(var(--ds-chat-w),calc(220px * var(--ds-chat-r)),calc(82cqw - 2 * var(--ds-space-3) - 2px));
  height:auto;aspect-ratio:var(--ds-chat-r)}
.ds .ds-chat__video{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}
.ds .ds-chat__video video{display:block;width:min(360px,calc(82cqw - 2 * var(--ds-space-3) - 2px));max-width:100%;aspect-ratio:16/9;
  border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);object-fit:contain}
.ds .ds-chat__video video[data-chat-shaped]{width:min(var(--ds-chat-w),360px,calc(320px * var(--ds-chat-r)),calc(82cqw - 2 * var(--ds-space-3) - 2px));
  aspect-ratio:var(--ds-chat-r)}
.ds .ds-chat__video--loop video{cursor:pointer}
.ds .ds-chat__video.is-file .ds-chat__video-file{padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface)}
.ds .ds-chat__video-file{display:flex;align-items:baseline;gap:var(--ds-space-2);min-width:0;max-width:100%;color:var(--ds-ink-muted);text-decoration:none;
  font-size:12px;line-height:16px}
.ds .ds-chat__video-file span{min-width:0;overflow-wrap:anywhere;color:var(--ds-brand)}
.ds .ds-chat__video-file small{flex:0 0 auto;font-size:12px;font-variant-numeric:tabular-nums}
.ds .ds-chat__video-file:hover span,.ds .ds-chat__video-file:focus-visible span{text-decoration:underline}
.ds .ds-chat__video-file:focus-visible{outline:none;box-shadow:var(--ds-focus);border-radius:var(--ds-radius-sm)}
.ds .ds-chat-archive[hidden]{display:none}
.ds .ds-chat__compose{display:flex;flex-direction:row;align-items:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-2);
  border-top:1px solid var(--ds-line-soft);background:var(--ds-surface)}
.ds .ds-chat__attach{cursor:pointer}
.ds .ds-chat__text{flex:1 1 auto;min-width:0;min-height:var(--ds-control-h-sm);max-height:120px;margin:0;padding:6px var(--ds-space-3);resize:none;
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface);font:inherit;font-size:14px;line-height:20px;color:var(--ds-ink)}
.ds .ds-chat__text:focus{outline:none;border-color:var(--ds-brand);box-shadow:0 0 0 3px var(--ds-focus)}
/* 1.5.191 (brandbook 3.90): the tray of the files waiting to go - over the field; a picture by its small copy, a file by its mark. */
.ds .ds-chat__tray{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-2) 0;background:var(--ds-surface)}
.ds .ds-chat__tray[hidden]{display:none}
.ds .ds-chat__clip{position:relative;display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);flex:1 1 220px;min-width:0;max-width:320px;
  padding:var(--ds-space-1) var(--ds-space-1) var(--ds-space-1) var(--ds-space-1);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);
  animation:ds-chat-clip-in var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__clip>img,.ds .ds-chat__clip-mark{flex:0 0 auto;width:40px;height:40px;border-radius:var(--ds-radius-sm);object-fit:cover;background:var(--ds-surface)}
.ds .ds-chat__clip-mark{display:inline-flex;align-items:center;justify-content:center;color:var(--ds-brand);border:1px solid var(--ds-line-soft)}
.ds .ds-chat__clip-mark .ds-icon{width:20px;height:20px}
.ds .ds-chat__clip-copy{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.ds .ds-chat__clip-copy b{font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.ds .ds-chat__clip-copy small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-chat__clip-off{flex:0 0 auto}
@keyframes ds-chat-clip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ds .ds-chat__clip{animation:none}}
.ds .ds-chat__also{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-2) 0 var(--ds-space-3);
  font-size:12px;line-height:16px;color:var(--ds-ink-muted);background:var(--ds-surface)}
.ds .ds-chat__also[hidden]{display:none}
.ds .ds-chat__also>.ds-icon{flex:0 0 auto;width:18px;height:18px;color:var(--ds-brand)}
.ds .ds-chat__also>span{flex:1 1 180px;min-width:0}
/* a drop of files on the conversation: the zone over it says what will happen */
.ds .ds-chat__thread{position:relative}
.ds .ds-chat__drop{position:absolute;inset:var(--ds-space-2);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-space-2);
  padding:var(--ds-space-4);border:2px dashed var(--ds-brand);border-radius:var(--ds-radius-lg);background:color-mix(in srgb,var(--ds-surface) 92%,transparent);
  color:var(--ds-brand);text-align:center;pointer-events:none;animation:ds-chat-clip-in var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__drop[hidden]{display:none}
.ds .ds-chat__drop .ds-icon{width:28px;height:28px}
.ds .ds-chat__drop b{font-size:14px;line-height:20px;font-weight:600}
.ds .ds-chat__sending{padding:0 var(--ds-space-3) var(--ds-space-2);background:var(--ds-surface)}
.ds .ds-chat__sending[hidden]{display:none}
.ds .ds-chat__sending small{display:block;font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-chat__file{display:flex;flex-direction:column;gap:2px;min-width:160px;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-md);background:var(--ds-surface);color:var(--ds-ink);text-decoration:none;transition:border-color var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__file:hover,.ds .ds-chat__file:focus-visible{border-color:var(--ds-brand);background:var(--ds-surface-soft);outline:none}
.ds .ds-chat__file b{font-size:13px;line-height:18px;font-weight:600;color:var(--ds-brand);overflow-wrap:anywhere}
.ds .ds-chat__file small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-chat__error{margin:0;padding:0 var(--ds-space-3) var(--ds-space-2);font-size:12px;line-height:16px;color:var(--ds-danger);background:var(--ds-surface)}
.ds .ds-chat__error[hidden]{display:none}
.ds .ds-chat__limit .ds-error{display:block;padding:0 var(--ds-space-3) var(--ds-space-2);background:var(--ds-surface)}
.ds .ds-chat__limit .ds-error[hidden]{display:none}
.ds .ds-chat-archive{max-height:420px;margin-top:var(--ds-space-3);border-radius:var(--ds-radius-md)}
.ds .ds-chat-online{color:var(--ds-success);font-weight:600}
@media (prefers-reduced-motion: reduce){.ds .ds-chat,.ds .ds-chat__msg.is-new{transition:none;animation:none}}
@media (max-width:900px){
  .ds .ds-chat{top:var(--ds-mobilebar-h);right:0;left:0;bottom:var(--ds-shell-bottom);width:auto;height:auto;border-radius:0;border-width:1px 0}
  /* 1.5.194: 16 px, as every field on a phone - a field under 16 px makes iPhone Safari zoom the page on focus and leave it zoomed
     (the owner 22.10.2026: the conversation, the bar and the menu went past both edges of the screen). */
  .ds .ds-chat__text{min-height:44px;padding-top:10px;padding-bottom:10px;font-size:16px;line-height:22px}
  /* 1.5.194: the keyboard is up - the conversation fills the part of the screen that is seen (chat.js measures it), over the bars. */
  .ds .ds-chat.is-keyboard{position:fixed;top:var(--ds-chat-top,0px);right:0;bottom:var(--ds-chat-bottom,0px);left:0;z-index:1300;width:auto;
    height:auto;min-height:0;border-width:0;border-radius:0;opacity:1;transform:none;transition:none}
}

/* 1.5.187 (brandbook 3.87) «Поиск по своим сообщениям» and «Сообщения»: the field of the search under the head of the chat (people,
   words, files, pictures - only one's own conversations); a found word is marked softly; the message the search led to is ringed in
   the brand until the next search. «Сообщения» - the same chat on a page: on a computer two columns (the people and the search on the
   left, the conversation on the right, «Выберите разговор…» while none is open), on a phone the column of the panel inside the page. */
.ds .ds-chat__search{flex:0 0 auto;padding:var(--ds-space-2) var(--ds-space-2) 0}
.ds .ds-chat__search[hidden]{display:none}
.ds .ds-chat__mark{padding:0 1px;border-radius:3px;background:var(--ds-brand-soft);color:var(--ds-ink);font-weight:600}
.ds .ds-chat__hit .ds-chat__who small{-webkit-line-clamp:3}
.ds .ds-chat__hit-thumb{display:block;width:40px;height:40px;border-radius:var(--ds-radius-sm);object-fit:cover;background:var(--ds-surface-soft)}
.ds .ds-chat__more{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-2);margin:var(--ds-space-3) 0 var(--ds-space-2)}
.ds .ds-chat__more small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-chat__msg.is-found{box-shadow:0 0 0 2px var(--ds-brand);animation:ds-chat-in var(--ds-slow) var(--ds-ease)}
.ds .ds-side__count{display:inline-grid;place-items:center;flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ds-radius-pill);
  background:var(--ds-danger);font-size:11px;line-height:1;font-weight:700;color:var(--ds-on-color);font-variant-numeric:tabular-nums}
.ds .ds-side__count[hidden]{display:none}
.ds .ds-chat--page{position:relative;z-index:auto;top:auto;right:auto;width:auto;height:calc(100vh - var(--ds-topbar-h) - 150px);min-height:480px;
  opacity:1;transform:none;box-shadow:var(--ds-shadow-1);transition:none}
.ds .ds-chat__blank{display:none}
@media (min-width:901px){
  .ds .ds-chat--page{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"search head" "people thread" "push thread"}
  .ds .ds-chat--page>.ds-chat__head{grid-area:head}
  .ds .ds-chat--page>.ds-chat__search{grid-area:search;padding-bottom:var(--ds-space-2);border-right:1px solid var(--ds-line)}
  .ds .ds-chat--page>.ds-chat__people{grid-area:people;border-right:1px solid var(--ds-line)}
  .ds .ds-chat--page>.ds-chat__push{grid-area:push;border-right:1px solid var(--ds-line)}
  .ds .ds-chat--page>.ds-chat__thread{grid-area:thread}
  .ds .ds-chat--page>.ds-chat__blank{grid-area:head / head / thread / thread;display:flex;align-items:center;justify-content:center;margin:0;
    padding:var(--ds-space-6);font-size:14px;line-height:21px;color:var(--ds-ink-muted);text-align:center}
  .ds .ds-chat--page>.ds-chat__blank[hidden]{display:none}
  .ds .ds-chat--page:has(.ds-chat__thread[hidden])>.ds-chat__head{visibility:hidden}
}
@media (max-width:900px){
  .ds .ds-chat--page{top:auto;right:auto;left:auto;bottom:auto;height:calc(100dvh - var(--ds-mobilebar-h) - var(--ds-shell-bottom) - 110px);min-height:420px;
    border-radius:var(--ds-radius-lg);border-width:1px}
  .ds .ds-chat--page:has(.ds-chat__thread[hidden])>.ds-chat__head{display:none}  /* the page says «Сообщения» once, in its head */
}

/* 1.5.190 (brandbook 3.89) groups, «Мои заметки», «Избранное»: the search and «Новая группа» in one row; the pinned rows of the notes
   and of the stars over the people (their own marks - a bookmark, a star - never a face); a group - its initials on the colour of
   the brand; in a group the name of who wrote over his words and the marks of the group as quiet lines in the middle; the star of a
   message beside its time - seen on a hover (always on a touch screen), coloured when it is on; a new group, the people added to
   one and «О группе» stand in the panel in place of the people (on a page - in place of the conversation). */
.ds .ds-chat__search{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2)}
.ds .ds-chat__search .ds-search{flex:1 1 auto;min-width:0}
.ds .ds-chat__group--pinned{padding-bottom:var(--ds-space-2);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-chat__avatar--group{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-chat__avatar--notes,.ds .ds-chat__avatar--stars{background:var(--ds-surface-soft);color:var(--ds-brand);border:1px solid var(--ds-line)}
.ds .ds-chat__avatar--stars{color:var(--ds-warning)}
/* 1.5.192 (brandbook 3.91): the broadcasts of the portal - its own mark, a title over the words, «Открыть» for its link; the
   conversation is read only - the line stands where the field was. */
.ds .ds-chat__avatar--news{background:color-mix(in srgb,var(--ds-brand) 12%,var(--ds-surface));color:var(--ds-brand);border:1px solid color-mix(in srgb,var(--ds-brand) 24%,var(--ds-surface))}
.ds .ds-chat__news{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-1);min-width:0}
.ds .ds-chat__news-title{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-chat__news .ds-chat__body{margin:0}
.ds .ds-chat__news-link{margin-top:var(--ds-space-1)}
.ds .ds-chat__news-line{margin:0;padding:var(--ds-space-3);border-top:1px solid var(--ds-line-soft);background:var(--ds-surface);
  font-size:13px;line-height:19px;color:var(--ds-ink-muted);text-align:center}
.ds .ds-chat__news-line[hidden]{display:none}
.ds .ds-chat__compose[hidden]{display:none}
.ds .ds-chat__avatar .ds-icon{width:18px;height:18px}
.ds .ds-chat__count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);
  border:1px solid var(--ds-line);font-size:11px;line-height:1;font-weight:600;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-chat__author{font-size:12px;line-height:16px;font-weight:600;color:var(--ds-brand);overflow-wrap:anywhere}
.ds .ds-chat__event{display:flex;justify-content:center;margin:var(--ds-space-1) 0}
.ds .ds-chat__event span{max-width:90%;padding:2px var(--ds-space-3);border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);
  font-size:12px;line-height:17px;color:var(--ds-ink-muted);text-align:center;overflow-wrap:anywhere}
.ds .ds-chat__star{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px 0 0;padding:0;border:0;border-radius:var(--ds-radius-sm);
  background:none;color:var(--ds-ink-muted);cursor:pointer;opacity:0;transition:opacity var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__star .ds-icon{width:14px;height:14px}
.ds .ds-chat__msg:hover .ds-chat__star,.ds .ds-chat__star:focus-visible,.ds .ds-chat__star.is-on{opacity:1}
.ds .ds-chat__star:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-chat__star.is-on{color:var(--ds-warning)}
.ds .ds-chat__star.is-on .ds-icon{fill:currentColor}
@media (hover:none){.ds .ds-chat__star{opacity:.55}.ds .ds-chat__star.is-on{opacity:1}}
/* «Ответить»: the button beside the star (the same quiet mark that shows on the hover), the quote of the answered message in the
   bubble (a line of the brand on the left, who wrote it, its first words in two lines; a click goes to it) and the message being
   answered over the field (its «×» takes it away). */
.ds .ds-chat__reply{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px 0 0;padding:0;border:0;border-radius:var(--ds-radius-sm);
  background:none;color:var(--ds-ink-muted);cursor:pointer;opacity:0;transition:opacity var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__reply .ds-icon{width:14px;height:14px}
.ds .ds-chat__msg:hover .ds-chat__reply,.ds .ds-chat__reply:focus-visible{opacity:1}
.ds .ds-chat__reply:hover{color:var(--ds-brand)}
.ds .ds-chat__reply:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
@media (hover:none){.ds .ds-chat__reply{opacity:.55}}
/* 1.5.202 (brandbook 3.99): the reactions under a message. «Реакция» - the quiet mark beside «Ответить» (the same as it, on the
   hover); the row of the reactions in the bubble - a pill per reaction: the emoji and how many put it, one's own one in the colour of
   the brand; the picker - a soft card of the twelve reactions in two rows of six under the bubble, on its side, each grows a little under the pointer. */
.ds .ds-chat__react{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px 0 0;padding:0;border:0;border-radius:var(--ds-radius-sm);
  background:none;color:var(--ds-ink-muted);cursor:pointer;opacity:0;transition:opacity var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__react .ds-icon{width:14px;height:14px}
.ds .ds-chat__msg:hover .ds-chat__react,.ds .ds-chat__react:focus-visible{opacity:1}
.ds .ds-chat__react:hover{color:var(--ds-brand)}
.ds .ds-chat__react:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
@media (hover:none){.ds .ds-chat__react{opacity:.55}}
.ds .ds-chat__reactions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}
.ds .ds-chat__reactions[hidden]{display:none}
.ds .ds-chat__reactions.is-changed{animation:ds-chat-pop var(--ds-slow) var(--ds-ease)}
@keyframes ds-chat-pop{0%{transform:scale(.92);opacity:.6}60%{transform:scale(1.04)}100%{transform:none;opacity:1}}
.ds .ds-chat__reaction{display:inline-flex;flex-direction:row;align-items:center;gap:4px;height:24px;margin:0;padding:0 8px 0 6px;
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-pill);background:var(--ds-surface);color:var(--ds-ink);cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease),border-color var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__reaction:hover{border-color:var(--ds-line);background:var(--ds-surface-soft)}
.ds .ds-chat__reaction:active{transform:scale(.94)}
.ds .ds-chat__reaction:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-chat__reaction.is-mine{border-color:color-mix(in srgb, var(--ds-brand) 45%, transparent);background:color-mix(in srgb, var(--ds-brand) 12%, var(--ds-surface));color:var(--ds-brand)}
.ds .ds-chat__reaction-emoji{font-size:15px;line-height:1}
.ds .ds-chat__reaction-count{font-size:12px;line-height:16px;font-weight:600;font-variant-numeric:tabular-nums}
.ds .ds-chat__picker{display:grid;grid-template-columns:repeat(6,32px);align-self:flex-start;gap:2px;max-width:100%;padding:4px;
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-lg);background:var(--ds-surface);box-shadow:var(--ds-shadow-2);
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__picker--mine{align-self:flex-end;transform-origin:top right}
.ds .ds-chat__picker.is-open{opacity:1;transform:none}
.ds .ds-chat__pick{display:inline-grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--ds-radius-md);
  background:none;font-size:20px;line-height:1;cursor:pointer;transition:transform var(--ds-fast) var(--ds-ease),background var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__pick:hover{background:var(--ds-surface-soft);transform:scale(1.18)}
.ds .ds-chat__pick:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-chat__pick.is-mine{background:color-mix(in srgb, var(--ds-brand) 14%, var(--ds-surface))}
@media (hover:none){.ds .ds-chat__picker{grid-template-columns:repeat(6,40px)}.ds .ds-chat__pick{width:40px;height:40px;font-size:22px}}
@media (prefers-reduced-motion: reduce){.ds .ds-chat__reactions.is-changed{animation:none}.ds .ds-chat__picker,.ds .ds-chat__pick,.ds .ds-chat__reaction{transition:none}}
.ds .ds-chat__quote{display:flex;flex-direction:column;align-items:stretch;gap:1px;width:100%;min-width:0;margin:0;padding:4px 8px 4px 10px;
  border:0;border-left:3px solid var(--ds-brand);border-radius:var(--ds-radius-sm);background:color-mix(in srgb, var(--ds-brand) 8%, var(--ds-surface));
  font:inherit;text-align:left;color:var(--ds-ink);cursor:pointer;transition:background var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__msg--mine .ds-chat__quote{background:color-mix(in srgb, var(--ds-brand) 12%, var(--ds-surface))}
.ds .ds-chat__quote:hover{background:color-mix(in srgb, var(--ds-brand) 16%, var(--ds-surface))}
.ds .ds-chat__quote:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-chat__quote b{font-size:12px;line-height:16px;font-weight:600;color:var(--ds-brand);overflow-wrap:anywhere}
.ds .ds-chat__quote span{font-size:12px;line-height:16px;color:var(--ds-ink-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere}
.ds .ds-chat__quote.is-gone{cursor:default;border-left-color:var(--ds-line)}
.ds .ds-chat__quote.is-gone span{font-style:italic}
.ds .ds-chat__replying{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-2) 0 var(--ds-space-3)}
.ds .ds-chat__replying[hidden]{display:none}
.ds .ds-chat__replying>.ds-icon{flex:0 0 auto;width:18px;height:18px;color:var(--ds-brand)}
.ds .ds-chat__replying-copy{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding-left:var(--ds-space-2);border-left:3px solid var(--ds-brand)}
.ds .ds-chat__replying-copy b{font-size:12px;line-height:16px;font-weight:600;color:var(--ds-brand);overflow-wrap:anywhere}
.ds .ds-chat__replying-copy small{font-size:12px;line-height:16px;color:var(--ds-ink-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;
  overflow:hidden;overflow-wrap:anywhere}
.ds .ds-chat__pane{display:flex;flex-direction:column;gap:var(--ds-space-3);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--ds-space-3) var(--ds-space-4)}
.ds .ds-chat__pane[hidden]{display:none}
.ds .ds-chat__pane-head{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ds-space-2);
  margin:0 0 var(--ds-space-1);padding:0 var(--ds-space-2)}
.ds .ds-chat__pane-head b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-chat__chosen{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-space-2)}
.ds .ds-chat__chosen:empty{display:none}
.ds .ds-chat__chip{display:inline-flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);max-width:100%;padding:2px 2px 2px 2px;
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);font-size:13px;line-height:18px;color:var(--ds-ink)}
.ds .ds-chat__chip .ds-chat__avatar{width:24px;height:24px;font-size:10px}
.ds .ds-chat__chip>span:not(.ds-chat__avatar){min-width:0;overflow-wrap:anywhere}
.ds .ds-chat__chip-off{display:inline-grid;place-items:center;flex:0 0 auto;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:var(--ds-radius-pill);
  background:none;color:var(--ds-ink-muted);cursor:pointer;transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__chip-off:hover,.ds .ds-chat__chip-off:focus-visible{background:var(--ds-surface);color:var(--ds-danger);outline:none}
.ds .ds-chat__chip-off .ds-icon{width:14px;height:14px}
.ds .ds-chat__found .ds-chat__person{min-height:48px}
.ds .ds-chat__actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:var(--ds-space-2)}
.ds .ds-chat__pane .ds-chat__error{padding:0;background:none}
.ds .ds-chat__info-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--ds-space-2)}
.ds .ds-chat__rename{flex:1 1 100%}
.ds .ds-chat__rename .ds-control{width:100%}
.ds .ds-chat__members{display:flex;flex-direction:column;gap:2px}
.ds .ds-chat__member{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);min-height:52px;padding:var(--ds-space-2);border-radius:var(--ds-radius-md)}
.ds .ds-chat__confirm{display:flex;flex-direction:column;gap:var(--ds-space-2);padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface-soft)}
.ds .ds-chat__confirm[hidden]{display:none}
.ds .ds-chat__confirm p{margin:0;font-size:13px;line-height:19px;color:var(--ds-ink)}
.ds .ds-chat__login{font-size:12px;font-weight:400;color:var(--ds-ink-muted)}  /* the login of one of two namesakes */
/* 1.5.205 (brandbook 3.102; the owner showed the menu of Telegram, 24.10.2026): the menu of a message. The conversation goes soft
   under a frosted layer; over it - the reactions in a pill, the message itself, under it a frosted card: when it was changed and who
   read it, then «Ответить» … «Удалить» (the colour of danger), a line, «Выбрать». The dialogs of a removal and of «Переслать» stand
   in the middle of the same layer; the pinned messages - a bar over the conversation; «Выбрать» - a ring on the chosen bubbles and a
   bar in place of the field. */
.ds .ds-chat__thread{position:relative}
.ds .ds-chat__layer{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--ds-space-3);background:color-mix(in srgb,var(--ds-bg) 62%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__layer[hidden]{display:none}
.ds .ds-chat__layer.is-open{opacity:1}
.ds .ds-chat__stack{display:flex;flex-direction:column;align-items:flex-start;justify-content:safe center;gap:var(--ds-space-2);min-height:100%;
  transform:scale(.97);transform-origin:center;transition:transform var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__stack--mine{align-items:flex-end}
.ds .ds-chat__layer.is-open .ds-chat__stack,.ds .ds-chat__layer.is-open>.ds-chat__sheet,.ds .ds-chat__layer.is-open>.ds-chat__menu{transform:none}
.ds .ds-chat__layer--center{justify-content:safe center;align-items:center}
.ds .ds-chat__layer--head{align-items:flex-end}
.ds .ds-chat__strip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;max-width:100%;padding:4px 6px;
  border-radius:var(--ds-radius-pill);background:color-mix(in srgb,var(--ds-surface) 92%,transparent);box-shadow:var(--ds-shadow-2)}
.ds .ds-chat__strip.is-all{flex-wrap:wrap;justify-content:center;border-radius:var(--ds-radius-lg)}
.ds .ds-chat__strip-pick{display:inline-grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:var(--ds-radius-pill);
  background:none;font-size:26px;line-height:1;cursor:pointer;transition:transform var(--ds-fast) var(--ds-ease),background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__strip-pick:hover,.ds .ds-chat__strip-pick:focus-visible{transform:scale(1.18);outline:none}
.ds .ds-chat__strip-pick:focus-visible{box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-chat__strip-pick.is-mine{background:var(--ds-brand-soft)}
.ds .ds-chat__strip-all{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;margin:0 0 0 2px;padding:0;border:0;border-radius:var(--ds-radius-pill);
  background:var(--ds-brand-soft);color:var(--ds-brand);cursor:pointer;transition:transform var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__strip-all .ds-icon{width:20px;height:20px}
.ds .ds-chat__strip-all[aria-expanded="true"]{transform:rotate(180deg)}
.ds .ds-chat__strip-all:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-chat__lifted{max-width:min(82%,520px);box-shadow:var(--ds-shadow-2);pointer-events:none}
.ds .ds-chat__menu{display:flex;flex-direction:column;width:min(280px,100%);padding:var(--ds-space-1) 0;border-radius:var(--ds-radius-lg);
  background:color-mix(in srgb,var(--ds-surface) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--ds-shadow-3);
  transform:scale(.97);transform-origin:top center;transition:transform var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__menu-about{display:flex;flex-direction:column;padding-bottom:var(--ds-space-1);border-bottom:1px solid var(--ds-line)}
.ds .ds-chat__menu-about[hidden]{display:none}
.ds .ds-chat__menu-line{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);width:100%;min-height:40px;margin:0;padding:0 var(--ds-space-4);
  border:0;background:none;font:inherit;font-size:13px;line-height:18px;color:var(--ds-ink-muted);text-align:left}
.ds .ds-chat__menu-line .ds-icon{flex:0 0 auto;width:18px;height:18px}
.ds .ds-chat__menu-line>span:not(.ds-chat__faces){flex:1 1 auto;min-width:0}
.ds button.ds-chat__menu-seen{cursor:pointer;color:var(--ds-ink);font-size:14px}
.ds button.ds-chat__menu-seen:disabled{cursor:default;color:var(--ds-ink-muted)}
.ds button.ds-chat__menu-seen:hover:not(:disabled),.ds button.ds-chat__menu-seen:focus-visible{background:var(--ds-surface-soft);outline:none}
.ds .ds-chat__faces{display:inline-flex;flex-direction:row;flex:0 0 auto}
.ds .ds-chat__faces .ds-chat__avatar{width:24px;height:24px;min-width:24px;font-size:10px;border:2px solid var(--ds-surface)}
.ds .ds-chat__faces .ds-chat__avatar+.ds-chat__avatar{margin-left:-8px}
.ds .ds-chat__menu-names{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;padding:0 var(--ds-space-4) var(--ds-space-2)}
.ds .ds-chat__menu-names[hidden]{display:none}
.ds .ds-chat__menu-name{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);font-size:13px;line-height:18px;color:var(--ds-ink)}
.ds .ds-chat__menu-name .ds-chat__avatar{width:24px;height:24px;min-width:24px;font-size:10px}
.ds .ds-chat__menu-items{display:flex;flex-direction:column;padding:var(--ds-space-1) 0}
.ds .ds-chat__menu-items--tail{border-top:1px solid var(--ds-line)}
.ds .ds-chat__menu-item{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-3);width:100%;min-height:44px;margin:0;padding:0 var(--ds-space-4);
  border:0;background:none;font:inherit;font-size:15px;line-height:20px;color:var(--ds-ink);text-align:left;cursor:pointer;
  transition:background-color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__menu-item .ds-icon{flex:0 0 auto;width:20px;height:20px;color:var(--ds-ink-muted)}
.ds .ds-chat__menu-item:hover,.ds .ds-chat__menu-item:focus-visible{background:var(--ds-surface-soft);outline:none}
.ds .ds-chat__menu-item.is-danger,.ds .ds-chat__menu-item.is-danger .ds-icon{color:var(--ds-danger)}
.ds .ds-chat__menu-item.is-danger:hover,.ds .ds-chat__menu-item.is-danger:focus-visible{background:var(--ds-danger-soft)}
.ds .ds-chat__menu--head{transform-origin:top right}
.ds .ds-chat__sheet{display:flex;flex-direction:column;gap:var(--ds-space-3);width:min(360px,100%);padding:var(--ds-space-4);border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-3);transform:scale(.97);transition:transform var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__sheet h3{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--ds-ink)}
.ds .ds-chat__sheet p{margin:0;font-size:13px;line-height:19px;color:var(--ds-ink-muted)}
.ds .ds-chat__sheet .ds-chat__error{color:var(--ds-danger)}
.ds .ds-chat__sheet--list .ds-chat__found{max-height:min(320px,50vh);overflow-y:auto;overscroll-behavior:contain;margin:0 calc(-1 * var(--ds-space-2))}
.ds .ds-chat__toast{position:absolute;left:50%;bottom:72px;z-index:6;max-width:calc(100% - 2 * var(--ds-space-4));padding:var(--ds-space-2) var(--ds-space-4);
  border-radius:var(--ds-radius-pill);background:var(--ds-ink);color:var(--ds-surface);font-size:13px;line-height:18px;transform:translateX(-50%);
  box-shadow:var(--ds-shadow-2);animation:ds-chat-in var(--ds-slow) var(--ds-ease);transition:opacity var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__toast.is-gone{opacity:0}
.ds .ds-chat__copybuf{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.ds .ds-chat__more-btn{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 2px 0 0;padding:0;border:0;border-radius:var(--ds-radius-sm);
  background:none;color:var(--ds-ink-muted);cursor:pointer;opacity:0;transition:opacity var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-chat__more-btn .ds-icon{width:14px;height:14px;stroke-width:2.6}
.ds .ds-chat__msg:hover .ds-chat__more-btn,.ds .ds-chat__more-btn:focus-visible{opacity:1}
.ds .ds-chat__more-btn:hover{color:var(--ds-brand)}
.ds .ds-chat__more-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
@media (hover:none){.ds .ds-chat__more-btn{opacity:.55}}
.ds .ds-chat__edited{margin-right:2px}
.ds .ds-chat__pinmark{display:inline-flex;color:var(--ds-brand)}
.ds .ds-chat__pinmark .ds-icon{width:12px;height:12px}
.ds .ds-chat__forwarded{font-size:12px;line-height:16px;font-weight:600;color:var(--ds-brand);overflow-wrap:anywhere}
.ds .ds-chat__msg.is-changed-msg{animation:ds-chat-in var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__msg.is-leaving,.ds .ds-chat__event.is-leaving{opacity:0;transform:scale(.96);transition:opacity var(--ds-slow) var(--ds-ease),transform var(--ds-slow) var(--ds-ease)}
.ds .ds-chat__msg.is-choosable{position:relative;cursor:pointer;user-select:none}
.ds .ds-chat.is-selecting .ds-chat__msg .ds-chat__at button{visibility:hidden}  /* «Выбрать»: a click chooses, the quiet buttons rest */
.ds .ds-chat__menu:focus{outline:none}
.ds .ds-chat__msg.is-chosen{box-shadow:0 0 0 2px var(--ds-brand);background:color-mix(in srgb,var(--ds-brand) 10%,var(--ds-surface))}
.ds .ds-chat__msg--mine.is-chosen{background:color-mix(in srgb,var(--ds-brand) 22%,var(--ds-surface))}
.ds .ds-chat__selectbar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-2);
  border-top:1px solid var(--ds-line-soft);background:var(--ds-surface)}
.ds .ds-chat__selectbar[hidden]{display:none}
.ds .ds-chat__selectbar b{flex:1 1 auto;font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.ds .ds-chat__pins{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-1);padding:var(--ds-space-1) var(--ds-space-1) var(--ds-space-1) var(--ds-space-3);
  border-bottom:1px solid var(--ds-line-soft);background:var(--ds-surface)}
.ds .ds-chat__pins[hidden]{display:none}
.ds .ds-chat__pins-go{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);flex:1 1 auto;min-width:0;margin:0;padding:var(--ds-space-1) 0;
  border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.ds .ds-chat__pins-go>.ds-icon{flex:0 0 auto;width:18px;height:18px;color:var(--ds-brand)}
.ds .ds-chat__pins-copy{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding-left:var(--ds-space-2);border-left:3px solid var(--ds-brand)}
.ds .ds-chat__pins-copy b{font-size:12px;line-height:16px;font-weight:600;color:var(--ds-brand)}
.ds .ds-chat__pins-copy small{font-size:13px;line-height:18px;color:var(--ds-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
.ds .ds-chat__pins-go:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus);border-radius:var(--ds-radius-sm)}
.ds .ds-chat__replying.is-editing>.ds-icon{color:var(--ds-warning)}
.ds .ds-chat__replying.is-editing .ds-chat__replying-copy{border-left-color:var(--ds-warning)}
.ds .ds-chat__rights{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:0 var(--ds-space-2) var(--ds-space-2);padding:var(--ds-space-3);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-chat__rights>b{font-size:13px;line-height:18px;font-weight:600;color:var(--ds-ink)}
.ds .ds-chat__give{align-self:flex-start}
@media (hover:none){.ds .ds-chat__menu-item{min-height:48px}}
@media (prefers-reduced-motion: reduce){.ds .ds-chat__layer,.ds .ds-chat__stack,.ds .ds-chat__menu,.ds .ds-chat__sheet,.ds .ds-chat__strip-pick,.ds .ds-chat__strip-all,.ds .ds-chat__msg.is-leaving{transition:none}.ds .ds-chat__toast,.ds .ds-chat__msg.is-changed-msg{animation:none}}
@media (min-width:901px){
  .ds .ds-chat--page>.ds-chat__pane{grid-area:thread}
  .ds .ds-chat--page.is-pane:has(.ds-chat__thread[hidden])>.ds-chat__head{visibility:visible}  /* the pane says what it is */
}
@media (max-width:900px){
  .ds .ds-chat--page.is-pane:has(.ds-chat__thread[hidden])>.ds-chat__head{display:flex}
  .ds .ds-chat__pane .ds-control{min-height:44px}
}

/* 1.5.188 (brandbook 3.88) «Файлообменник»: the bar of the upload under the form; the ready link - a field with «Копировать» in one
   line (on a phone the button under the field); the name of a file on the page of its link breaks anywhere rather than overflow. */
.ds .ds-file-share__progress{display:flex;flex-direction:column;gap:var(--ds-space-1);margin-top:var(--ds-space-3)}
.ds .ds-file-share__progress[hidden],.ds .ds-file-share__done[hidden]{display:none}
.ds .ds-file-share__progress small,.ds .ds-file-share__done small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-file-share__done{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-2);margin-top:var(--ds-space-4);padding-top:var(--ds-space-4);
  border-top:1px solid var(--ds-line-soft)}
.ds .ds-file-share__link{display:flex;flex-direction:row;gap:var(--ds-space-2);width:100%}
.ds .ds-file-share__link .ds-control{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums}
.ds .ds-file-share__link .ds-btn{flex:0 0 auto}
.ds .ds-file-share__name{overflow-wrap:anywhere}
@media (max-width:600px){.ds .ds-file-share__link{flex-direction:column}}

/* 1.5.192 (brandbook 3.91): a broadcast of the portal as its people see it - the preview of «Новая рассылка» and its card: the mark
   of the portal, from whom, the title, the words as they were written, «Открыть» for its link. */
.ds .ds-broadcast{display:flex;flex-direction:row;align-items:flex-start;gap:var(--ds-space-3);padding:var(--ds-space-4);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-lg);background:var(--ds-surface-soft)}
.ds .ds-broadcast__mark{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:color-mix(in srgb,var(--ds-brand) 12%,var(--ds-surface));color:var(--ds-brand);border:1px solid color-mix(in srgb,var(--ds-brand) 24%,var(--ds-surface))}
.ds .ds-broadcast__mark .ds-icon{width:20px;height:20px}
.ds .ds-broadcast__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-1);flex:1 1 auto;min-width:0}
.ds .ds-broadcast__from{font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-broadcast__from b{font-weight:600;color:var(--ds-ink)}
.ds .ds-broadcast__title{margin:var(--ds-space-1) 0 0;font-size:16px;line-height:22px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-broadcast__text{margin:0;font-size:14px;line-height:21px;color:var(--ds-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ds .ds-broadcast__link{margin-top:var(--ds-space-2)}

/* 1.5.195 (brandbook 3.93) «Быстрый ввод»: three tiles (a business card, a voice note, a visit) - a mark in a soft circle of the brand,
   the title and its line; on a phone one under another with the mark on the left. The frame of a picture (ds-shot), the recorder
   (ds-recorder: the round button, the time, the note playing), the place (ds-place: the mark, the words, «Открыть в Яндекс Картах»),
   the picture of a business card in the card of a person (ds-bizcard), a voice note in the card of an interaction (ds-voice). */
.ds .ds-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-space-4)}
.ds .ds-quick__tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-2);min-width:0;padding:var(--ds-space-5);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface);box-shadow:var(--ds-shadow-1);color:var(--ds-ink);
  text-decoration:none;transition:border-color var(--ds-base) var(--ds-ease),box-shadow var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease)}
.ds .ds-quick__tile:hover{border-color:color-mix(in srgb,var(--ds-brand) 40%,var(--ds-line));box-shadow:var(--ds-shadow-2);transform:translateY(-1px)}
.ds .ds-quick__tile:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-quick__mark{display:inline-grid;place-items:center;flex:0 0 auto;width:48px;height:48px;margin-bottom:var(--ds-space-1);
  border-radius:var(--ds-radius-pill);background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-quick__mark .ds-icon{width:24px;height:24px}
.ds .ds-quick__tile b{font-size:16px;line-height:22px;font-weight:600}
.ds .ds-quick__tile small{font-size:13px;line-height:19px;color:var(--ds-ink-muted)}
.ds .ds-shot{position:relative;display:grid;place-items:center;min-height:200px;padding:var(--ds-space-3);border:1px dashed var(--ds-line-strong);
  border-radius:var(--ds-radius-lg);background:var(--ds-surface-soft);cursor:pointer;overflow:hidden;
  transition:border-color var(--ds-base) var(--ds-ease),background var(--ds-base) var(--ds-ease)}
.ds .ds-shot:hover,.ds .ds-shot:focus-within{border-color:var(--ds-brand);background:color-mix(in srgb,var(--ds-brand) 5%,var(--ds-surface-soft))}
.ds .ds-shot:focus-within{box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-shot__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ds .ds-shot__empty{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-1);text-align:center;color:var(--ds-ink-muted);pointer-events:none}
.ds .ds-shot__empty[hidden],.ds .ds-shot img[hidden]{display:none}
.ds .ds-shot__empty .ds-icon{width:36px;height:36px;color:var(--ds-brand)}
.ds .ds-shot__empty b{font-size:15px;line-height:21px;font-weight:600;color:var(--ds-ink)}
.ds .ds-shot__empty small{font-size:12px;line-height:16px}
.ds .ds-shot img{display:block;max-width:100%;max-height:360px;border-radius:var(--ds-radius-md);object-fit:contain;pointer-events:none}
.ds .ds-shot.is-taken{border-style:solid}
.ds .ds-recorder{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-3) var(--ds-space-4);padding:var(--ds-space-4);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);background:var(--ds-surface-soft)}
.ds .ds-recorder--invalid{border-color:var(--ds-danger)}
.ds .ds-recorder__button{display:inline-grid;place-items:center;flex:0 0 auto;width:64px;height:64px;margin:0;padding:0;border:0;
  border-radius:var(--ds-radius-pill);background:var(--ds-brand);color:var(--ds-on-color);box-shadow:var(--ds-shadow-2);cursor:pointer;
  transition:background var(--ds-base) var(--ds-ease),transform var(--ds-base) var(--ds-ease)}
.ds .ds-recorder__button:hover{transform:scale(1.04)}
.ds .ds-recorder__button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-recorder__button .ds-icon{width:28px;height:28px}
.ds .ds-recorder.is-recording .ds-recorder__button{background:var(--ds-danger);animation:ds-pulse 900ms var(--ds-ease) infinite alternate}
.ds .ds-recorder__copy{display:flex;flex-direction:column;gap:2px;flex:1 1 140px;min-width:0}
.ds .ds-recorder__copy b{font-size:15px;line-height:21px;font-weight:600;color:var(--ds-ink)}
.ds .ds-recorder__copy small{font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-recorder audio{flex:1 1 100%;width:100%;height:40px}
.ds .ds-recorder audio[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ds .ds-recorder.is-recording .ds-recorder__button{animation:none}.ds .ds-quick__tile:hover{transform:none}}
.ds .ds-place{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ds-space-3)}
.ds .ds-place__mark{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--ds-radius-pill);
  background:var(--ds-surface-soft);color:var(--ds-ink-muted);border:1px solid var(--ds-line)}
.ds .ds-place.is-found .ds-place__mark,.ds [data-interaction-place] .ds-place__mark{background:var(--ds-brand-soft);color:var(--ds-brand);border-color:transparent}
.ds .ds-place.is-busy .ds-place__mark{animation:ds-pulse 900ms var(--ds-ease) infinite alternate}
.ds .ds-place__mark .ds-icon{width:20px;height:20px}
.ds .ds-place__copy{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.ds .ds-place__copy b{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-place__copy small{font-size:13px;line-height:18px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums}
.ds .ds-place [hidden]{display:none}
.ds .ds-bizcard{display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-1);max-width:220px;color:var(--ds-ink-muted);text-decoration:none}
.ds .ds-bizcard img{display:block;width:100%;max-height:140px;object-fit:contain;border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);
  background:var(--ds-surface-soft);transition:border-color var(--ds-base) var(--ds-ease),box-shadow var(--ds-base) var(--ds-ease)}
.ds .ds-bizcard:hover img{border-color:var(--ds-brand);box-shadow:var(--ds-shadow-2)}
.ds .ds-bizcard:focus-visible{outline:none}
.ds .ds-bizcard:focus-visible img{box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-bizcard small{font-size:12px;line-height:16px}
.ds .ds-bizcard--wide{max-width:480px}
.ds .ds-bizcard--wide img{max-height:320px}
.ds .ds-voice{display:flex;flex-direction:column;gap:var(--ds-space-1)}
.ds .ds-voice audio{width:100%;max-width:520px;height:40px}
.ds .ds-voice small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
@media (max-width:720px){
  .ds .ds-quick{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-3)}
  .ds .ds-quick__tile{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--ds-space-3);row-gap:2px;align-items:center;padding:var(--ds-space-4)}
  .ds .ds-quick__mark{grid-row:span 2;margin:0}
  .ds .ds-quick__tile b,.ds .ds-quick__tile small{grid-column:2}
  .ds .ds-place .ds-btn{flex:1 1 100%}
}
/* 1.5.206 (brandbook 3.103, «Цены у продавцов»): the price of our product at a shop against the RRP of the day - one chip: below the
   RRP - the colour of danger on its soft ground, above - the colour of success, at the RRP - plain, not in stock or older than the
   days set - muted. A link chip opens the page the portal read. «ds-shopflag» - a short word of danger in a line of text («без
   договора», «опустил первым», «ниже РРЦ у 3»). */
.ds .ds-shopprice{display:inline-flex;flex-direction:column;align-items:flex-end;gap:0;padding:2px 8px;border-radius:var(--ds-radius-sm);
  color:var(--ds-ink);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:20px;
  transition:background-color var(--ds-base) var(--ds-ease),box-shadow var(--ds-base) var(--ds-ease)}
.ds .ds-shopprice[data-verdict="below"]{background:var(--ds-danger-soft);color:var(--ds-danger);font-weight:600}
.ds .ds-shopprice[data-verdict="above"]{background:var(--ds-success-soft);color:var(--ds-success)}
.ds .ds-shopprice[data-verdict="out"],.ds .ds-shopprice[data-verdict="none"],.ds .ds-shopprice[data-verdict="stale"]{color:var(--ds-ink-muted)}
.ds a.ds-shopprice:hover{box-shadow:inset 0 0 0 1px currentColor}
.ds a.ds-shopprice:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ds-focus)}
.ds .ds-shopprice__sub{font-size:11px;line-height:14px;font-weight:400;opacity:.85}
.ds .ds-hint .ds-shopprice{margin-right:var(--ds-space-2)}
.ds .ds-shopflag{color:var(--ds-danger);font-weight:600}

/* 1.5.219 (brandbook 3.10; the owner, 31.10.2026: «при создании каких-то данных внутри проекта надо делать всплывающее окно которое
   открывает то же самое что и отдельное … без перегрузки проекта»): a form of the portal in a dialog of another page. The dialog
   (ds-dialog--frame) holds a frame with the page of the form (?embed=1, embed_dialog.py): as wide as a form, as tall as the form up
   to 82 % of the window - a longer form scrolls inside, its bar of «Сохранить» stays at the bottom. The page in the frame
   (html[data-embed]) has no menu nor bars and no title of its own - the title is the head of the dialog. */
.ds .ds-dialog--frame{width:min(1040px,calc(100vw - 32px));padding:var(--ds-space-4) var(--ds-space-4) 0;overflow:hidden}
.ds .ds-dialog--frame>.ds-dialog__head{margin:0 0 var(--ds-space-2);padding:0 var(--ds-space-2)}
.ds .ds-dialog__frame{position:relative;margin:0 calc(-1 * var(--ds-space-4));border-top:1px solid var(--ds-line-soft)}
.ds .ds-dialog__frame>iframe{display:block;width:100%;height:min(560px,70vh);border:0;background:var(--ds-bg);
  transition:height var(--ds-base) var(--ds-ease)}
.ds .ds-dialog__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ds-ink-muted);
  background:var(--ds-bg)}
.ds .ds-dialog__loading[hidden]{display:none}
.ds .ds-embed .ds-main{height:auto;min-height:0;margin:0;padding:var(--ds-space-4) var(--ds-space-4) var(--ds-space-5);overflow:visible}
.ds .ds-embed .ds-main::before{content:none}
.ds .ds-embed .ds-page-head__title{display:none}
.ds .ds-embed .ds-page-head:not(:has(.ds-actions>*)){display:none}
.ds .ds-embed [data-section-strip]{top:0}
/* a section brought up to date in place after the dialog (app.js: B2B_EMBED.refresh) glows softly for a moment */
.ds .is-refreshed{animation:ds-refreshed 1.6s var(--ds-ease)}
@keyframes ds-refreshed{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-brand) 26%,transparent)}100%{box-shadow:var(--ds-shadow-1)}}
@media (prefers-reduced-motion:reduce){.ds .is-refreshed{animation:none}}
@media (max-width:560px){
  .ds .ds-dialog--frame{width:100vw;max-width:100vw;max-height:100svh;height:100svh;margin:0;border-radius:0}
  .ds .ds-dialog__frame>iframe{height:calc(100svh - 64px)}
}

/* 1.5.219 (brandbook 3.12): «Участники, этапы и история» of a project card. «Люди проекта» - a table grouped by company (the group
   row names the company and its kind), the cell of the remove button keeps to its button; «История проекта» - a compact list, a line
   an event: when (one width), what, who. */
.ds .ds-intel>.ds-subsection:first-child{margin-top:0;padding-top:0;border-top:0}
.ds .ds-intel>.ds-columns,.ds .ds-intel>.ds-subsection+.ds-subsection{margin-top:var(--ds-space-2)}
.ds .ds-table--people td.ds-table__action{width:48px;text-align:right}
.ds .ds-table__group-kind{font-weight:400;color:var(--ds-ink-muted)}
.ds .ds-history{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ds .ds-history__item{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,auto);align-items:baseline;column-gap:var(--ds-space-4);padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-history__item:last-child{border-bottom:0}
.ds .ds-history__when{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds .ds-history__what{font-size:14px;line-height:20px;font-weight:600;color:var(--ds-ink);overflow-wrap:break-word}
.ds .ds-history__who{font-size:12px;line-height:16px;color:var(--ds-ink-muted);text-align:right;overflow-wrap:break-word}
@media (max-width:720px){
  .ds .ds-history__item{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .ds .ds-history__who{text-align:left}
}
/* 1.5.219 (brandbook 3.10): «Квота» of a project - a dialog wide enough for its table of eight columns. */
.ds .ds-dialog--quota{width:min(1120px,calc(100vw - 32px))}
.ds .ds-dl--quota{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.ds .ds-dl--quota{grid-template-columns:repeat(2,minmax(0,1fr))}.ds .ds-dl--quota>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.ds .ds-dialog--quota .ds-dialog__actions{flex-wrap:wrap}.ds .ds-dialog--quota .ds-dialog__actions>.ds-btn--primary{flex:1 1 100%;order:-1}}
/* the pill of a level stands in a column of numbers: its words in proportional figures (brandbook 2.8) */
.ds .ds-price-with__source{font-variant-numeric:lining-nums proportional-nums}
/* 1.5.219 (brandbook 3.12): «Похожие проекты» - the score of a similar project as a square of its tone on the left (the number and
   its word), the signs that counted as a short list under the title, the risks as badges on the right. */
.ds .ds-similar{align-items:flex-start}
.ds .ds-similar__score{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 76px;min-height:56px;padding:var(--ds-space-2);
  border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);border:1px solid var(--ds-line-soft);text-align:center}
.ds .ds-similar__score b{font-size:20px;line-height:24px;font-weight:700;color:var(--ds-ink)}
.ds .ds-similar__score small{font-size:11px;line-height:14px;color:var(--ds-ink-muted)}
.ds .ds-similar__score[data-tone="danger"]{background:var(--ds-danger-soft);border-color:color-mix(in srgb,var(--ds-danger) 30%,transparent)}
.ds .ds-similar__score[data-tone="danger"] b,.ds .ds-similar__score[data-tone="danger"] small{color:var(--ds-danger)}
.ds .ds-similar__score[data-tone="warning"]{background:var(--ds-warning-soft);border-color:color-mix(in srgb,var(--ds-warning) 30%,transparent)}
.ds .ds-similar__score[data-tone="warning"] b,.ds .ds-similar__score[data-tone="warning"] small{color:var(--ds-warning)}
.ds .ds-similar__score[data-tone="brand"]{background:var(--ds-brand-soft);border-color:color-mix(in srgb,var(--ds-brand) 30%,transparent)}
.ds .ds-similar__score[data-tone="brand"] b,.ds .ds-similar__score[data-tone="brand"] small{color:var(--ds-brand)}
.ds .ds-similar__signs{display:flex;flex-wrap:wrap;gap:6px;margin:var(--ds-space-2) 0 0;padding:0;list-style:none}
.ds .ds-similar__signs li{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:3px 10px;border-radius:var(--ds-radius-pill);
  background:var(--ds-surface-soft);border:1px solid var(--ds-line-soft);font-size:12px;line-height:16px;color:var(--ds-ink)}
.ds .ds-similar__signs li small{color:var(--ds-ink-muted);overflow-wrap:anywhere}
/* 1.5.225 (brandbook 3.110) «Встречи». The lines of the people of a new meeting - a person and «×». The room of a meeting is a
   page on its own on the colour of the menu (--ds-sidebar): the bar with the subject and the time, «Проверка перед входом» (the
   preview of the camera in a rounded frame, the microphone and the camera as round controls, «Войти во встречу»), the stage of tiles
   (an even grid; «Докладчик» or a shown screen - one big tile and a strip of small ones), the panel on the right (the chat, the
   people, the waiting room) and the controls at the bottom (round, the pressed one in the brand, «Выйти» and «Завершить для всех»
   in the colour of danger). The one who speaks - a ring of the brand round his tile. */
.ds .ds-lines--single .ds-lines__row{grid-template-columns:minmax(0,1fr) 32px}
@container ds-lines (max-width:720px){.ds .ds-lines--single .ds-lines__row{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.ds .ds-meet-linkrow td{padding-top:0}
.ds .ds-meet-linkrow .ds-hint{display:block;margin-top:var(--ds-space-1)}
.ds .ds-public__kind{align-self:flex-start}
.ds .ds-meet-guest__name{margin:0;color:var(--ds-ink)}
.ds .ds-meet-wait{display:flex;align-items:center;gap:var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);
  background:var(--ds-brand-soft);border:1px solid color-mix(in srgb,var(--ds-brand) 24%,transparent)}
.ds .ds-meet-wait b{display:block;color:var(--ds-ink)}
.ds .ds-meet-wait p{margin:2px 0 0;font-size:13px;line-height:18px}
.ds .ds-meet-wait__ring{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ds-brand) 25%,transparent);
  border-top-color:var(--ds-brand);animation:ds-meet-spin 1s linear infinite}
@keyframes ds-meet-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ds .ds-meet-wait__ring{animation:none}}

.ds .ds-meet{--ds-meet-ink:var(--ds-side-ink);--ds-meet-muted:var(--ds-side-ink-muted);--ds-meet-plate:var(--ds-side-plate);
  --ds-meet-raised:color-mix(in srgb,var(--ds-on-color) 9%,transparent);--ds-meet-raised-hover:color-mix(in srgb,var(--ds-on-color) 15%,transparent);
  --ds-meet-line:color-mix(in srgb,var(--ds-on-color) 7%,transparent);
  /* 1.5.235 (brandbook 3.117): the size of the controls is the person's choice («Размер» in the bar) - compact by default */
  --ds-meet-btn:36px;--ds-meet-glyph:18px;--ds-meet-btn-sm:28px;--ds-meet-glyph-sm:16px;--ds-meet-bar-h:48px;--ds-meet-label:11px;
  position:relative;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;
  background:var(--ds-meet-ground);color:var(--ds-meet-ink)}
.ds .ds-meet[data-meet-density="regular"]{--ds-meet-btn:40px;--ds-meet-glyph:20px;--ds-meet-btn-sm:30px;--ds-meet-glyph-sm:17px;--ds-meet-bar-h:54px}
.ds .ds-meet[data-meet-density="large"]{--ds-meet-btn:46px;--ds-meet-glyph:22px;--ds-meet-btn-sm:34px;--ds-meet-glyph-sm:18px;--ds-meet-bar-h:60px;--ds-meet-label:12px}
.ds .ds-meet__bar{display:flex;align-items:center;gap:var(--ds-space-3);min-height:var(--ds-meet-bar-h);padding:var(--ds-space-1) var(--ds-space-4);
  border-bottom:1px solid var(--ds-meet-line)}
.ds .ds-meet__brand img{display:block;height:20px;width:auto}
.ds .ds-meet__title{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.ds .ds-meet__title .ds-meet__heading{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--ds-meet-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word}
.ds .ds-meet__when{display:flex;gap:var(--ds-space-3);font-size:12px;line-height:16px;color:var(--ds-meet-muted);font-variant-numeric:tabular-nums}
.ds .ds-meet__bar-actions{display:flex;gap:var(--ds-space-2)}
.ds .ds-meet__bar-actions[hidden],.ds .ds-meet__body[hidden],.ds .ds-meet__controls[hidden],.ds .ds-meet__prejoin[hidden],.ds .ds-meet__note[hidden],
.ds .ds-meet__side[hidden],.ds .ds-meet__pane[hidden],.ds .ds-meet__toast[hidden]{display:none}

.ds .ds-meet__control{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;min-width:64px;
  padding:var(--ds-space-1) var(--ds-space-2) 4px;border:0;border-radius:var(--ds-radius-md);background:transparent;color:var(--ds-meet-ink);
  font:inherit;cursor:pointer;transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__control:hover{background:var(--ds-meet-plate)}
.ds .ds-meet__control:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds .ds-meet__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ds-meet-btn);height:var(--ds-meet-btn);border-radius:50%;
  background:var(--ds-meet-raised);transition:background var(--ds-fast) var(--ds-ease),width var(--ds-base) var(--ds-ease),height var(--ds-base) var(--ds-ease)}
.ds .ds-meet__icon .ds-icon{width:var(--ds-meet-glyph);height:var(--ds-meet-glyph)}
.ds .ds-meet__control:hover .ds-meet__icon{background:var(--ds-meet-raised-hover)}
.ds .ds-meet__icon--off{display:none}
.ds .ds-meet__control.is-off .ds-meet__icon:not(.ds-meet__icon--off):has(+.ds-meet__icon--off){display:none}
.ds .ds-meet__control.is-off .ds-meet__icon--off{display:inline-flex;background:var(--ds-danger);color:var(--ds-on-color)}
.ds .ds-meet__control[aria-pressed="true"]:is([data-meet-control="screen"],[data-meet-control="chat"],[data-meet-control="people"],[data-meet-control="lobby"]) .ds-meet__icon{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__label{font-size:var(--ds-meet-label);line-height:14px;color:var(--ds-meet-muted);white-space:nowrap}
/* compact: the words of the controls are their tips (title) - the bar is one thin row of circles */
.ds .ds-meet:not([data-meet-density="regular"]):not([data-meet-density="large"]) .ds-meet__control .ds-meet__label{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ds .ds-meet:not([data-meet-density="regular"]):not([data-meet-density="large"]) .ds-meet__control{min-width:0;padding:var(--ds-space-1)}
.ds .ds-meet:not([data-meet-density="regular"]):not([data-meet-density="large"]) .ds-meet__control--small{padding:2px}
.ds .ds-meet__count{position:absolute;top:2px;right:12px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--ds-radius-pill);background:var(--ds-danger);
  color:var(--ds-on-color);font-size:11px;line-height:18px;font-weight:700;text-align:center}
.ds .ds-meet__count[hidden]{display:none}
.ds .ds-meet__control--small{flex-direction:row;min-width:0;padding:2px 10px 2px 2px;gap:var(--ds-space-2)}
.ds .ds-meet__control--small .ds-meet__icon{width:var(--ds-meet-btn-sm);height:var(--ds-meet-btn-sm);background:transparent}
.ds .ds-meet__control--small .ds-meet__icon .ds-icon{width:var(--ds-meet-glyph-sm);height:var(--ds-meet-glyph-sm)}
.ds .ds-meet__control--small[aria-pressed="true"]{background:var(--ds-meet-plate)}
.ds .ds-meet__control--small[aria-pressed="true"] .ds-meet__icon{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__control--leave .ds-meet__icon{color:var(--ds-danger-soft)}
.ds .ds-meet__control--leave:hover .ds-meet__icon{background:color-mix(in srgb,var(--ds-danger) 55%,transparent);color:var(--ds-on-color)}
.ds .ds-meet__control--end .ds-meet__icon{background:color-mix(in srgb,var(--ds-danger) 85%,transparent);color:var(--ds-on-color)}
.ds .ds-meet__control--end:hover .ds-meet__icon{background:var(--ds-danger-hover)}

.ds .ds-meet__prejoin{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr);align-items:center;gap:var(--ds-space-7);flex:1 1 auto;
  width:min(1080px,100%);margin:0 auto;padding:var(--ds-space-6) var(--ds-space-5)}
.ds .ds-meet__preview{position:relative;aspect-ratio:16/9;border-radius:var(--ds-radius-lg);overflow:hidden;background:var(--ds-meet-plate);box-shadow:var(--ds-shadow-3)}
.ds .ds-meet__preview video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.ds .ds-meet__prejoin-side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-3)}
.ds .ds-meet__heading--big{margin:0;font-size:22px;line-height:28px;font-weight:600;color:var(--ds-meet-ink)}
.ds .ds-meet__me{margin:0;color:var(--ds-meet-muted)}
.ds .ds-meet__prejoin-controls{display:flex;gap:var(--ds-space-2)}
.ds .ds-meet__join{min-width:220px}
.ds .ds-meet__hint{margin:0;font-size:13px;line-height:18px;color:var(--ds-meet-muted)}
.ds .ds-meet__avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:auto;width:96px;height:96px;border-radius:50%;
  background:var(--ds-brand);color:var(--ds-on-color);font-size:40px;line-height:1;font-weight:600}
.ds .ds-meet__avatar[hidden]{display:none}

.ds .ds-meet__body{display:flex;flex:1 1 auto;min-height:0}
.ds .ds-meet__stage{--ds-meet-rail:24%;position:relative;flex:1 1 auto;min-width:0;min-height:0;display:flex;padding:var(--ds-space-4);overflow:hidden}
.ds .ds-meet__grid{flex:1 1 auto;min-width:0;display:grid;gap:var(--ds-space-3);align-content:center;overflow:auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(240px,calc((100% - 3 * var(--ds-space-3)) / 4))),1fr))}
.ds .ds-meet__grid[hidden],.ds .ds-meet__focus[hidden],.ds .ds-meet__start-audio[hidden]{display:none}
.ds .ds-meet__stage[data-alone="true"] .ds-meet__grid{grid-template-columns:minmax(0,960px);justify-content:center}
.ds .ds-meet__tile{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--ds-radius-lg);overflow:hidden;background:var(--ds-meet-plate);
  box-shadow:inset 0 0 0 1px var(--ds-meet-line);transition:box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--ds-slow) var(--ds-ease)}
.ds .ds-meet__tile.has-video video{opacity:1}
.ds .ds-meet__tile.has-video .ds-meet__avatar{display:none}
.ds .ds-meet__tile--screen video{object-fit:contain;background:var(--ds-sidebar)}
.ds .ds-meet__tile.is-speaking{box-shadow:inset 0 0 0 3px var(--ds-brand)}
.ds .ds-meet__name{position:absolute;left:var(--ds-space-2);bottom:var(--ds-space-2);z-index:1;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 16px);
  padding:3px 10px;border-radius:var(--ds-radius-pill);background:color-mix(in srgb,var(--ds-sidebar) 72%,transparent);color:var(--ds-meet-ink);
  font-size:12px;line-height:18px;overflow:hidden;overflow-wrap:anywhere}
.ds .ds-meet__muted{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--ds-danger)}
.ds .ds-meet__muted[hidden]{display:none}
.ds .ds-meet__tile.is-mirrored video{transform:scaleX(-1)}
.ds .ds-meet__tile[draggable="true"]{cursor:grab}
.ds .ds-meet__tile.is-dragged{opacity:.45}
.ds .ds-meet__tile:is(.is-drop-before,.is-drop-after,.is-drop-main){box-shadow:inset 0 0 0 3px var(--ds-brand)}
.ds .ds-meet__pin{position:absolute;top:var(--ds-space-2);right:var(--ds-space-2);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ds-sidebar) 72%,transparent);color:var(--ds-meet-ink);cursor:pointer;opacity:0;
  transition:opacity var(--ds-fast) var(--ds-ease),background var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__pin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ds .ds-meet__tile:hover .ds-meet__pin,.ds .ds-meet__pin:focus-visible,.ds .ds-meet__pin[aria-pressed="true"]{opacity:1}
.ds .ds-meet__pin:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds .ds-meet__pin[aria-pressed="true"]{background:var(--ds-brand);color:var(--ds-on-color)}
@media (hover:none){.ds .ds-meet__pin{opacity:1}}
.ds .ds-meet__focus{flex:1 1 auto;min-width:0;min-height:0;display:flex}
.ds .ds-meet__stage[data-rail="bottom"] .ds-meet__focus{flex-direction:column}
.ds .ds-meet__main{flex:1 1 auto;min-width:0;min-height:0;display:flex}
.ds .ds-meet__main .ds-meet__tile{flex:1 1 auto;min-width:0;aspect-ratio:auto}
.ds .ds-meet__main .ds-meet__tile video{object-fit:contain;background:var(--ds-sidebar)}
.ds .ds-meet__split{position:relative;flex:0 0 var(--ds-space-4);cursor:col-resize;touch-action:none;outline:none}
.ds .ds-meet__split::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:56px;transform:translate(-50%,-50%);border-radius:var(--ds-radius-pill);
  background:var(--ds-meet-line);transition:background var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__split:hover::after,.ds .ds-meet__split:focus-visible::after,.ds .ds-meet__stage.is-resizing .ds-meet__split::after{background:var(--ds-brand)}
.ds .ds-meet__stage[data-rail="bottom"] .ds-meet__split{cursor:row-resize}
.ds .ds-meet__stage[data-rail="bottom"] .ds-meet__split::after{width:56px;height:4px}
.ds .ds-meet__rail{flex:0 0 var(--ds-meet-rail);min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--ds-space-3);overflow:auto}
.ds .ds-meet__rail .ds-meet__tile{flex:0 0 auto}
.ds .ds-meet__stage[data-rail="bottom"] .ds-meet__rail{flex-direction:row;overflow-x:auto;overflow-y:hidden}
.ds .ds-meet__stage[data-rail="bottom"] .ds-meet__rail .ds-meet__tile{height:100%}
.ds .ds-meet__rail .ds-meet__avatar{width:56px;height:56px;font-size:22px}
.ds .ds-meet__stage.is-resizing{user-select:none}
.ds .ds-meet__stage.is-resizing .ds-meet__tile{pointer-events:none}
.ds .ds-meet__alone{position:absolute;left:50%;bottom:var(--ds-space-2);transform:translateX(-50%);max-width:calc(100% - 2 * var(--ds-space-4));margin:0;
  padding:4px var(--ds-space-3);border-radius:var(--ds-radius-pill);background:var(--ds-meet-plate);text-align:center;font-size:13px;line-height:18px;color:var(--ds-meet-muted)}
/* 1.5.235: the words «Пока вы одни» stand under the picture, not over it - the stage keeps a strip for them */
.ds .ds-meet__stage[data-alone="true"]{padding-bottom:calc(var(--ds-space-4) + 34px)}
@media (max-width:720px){.ds .ds-meet__alone{border-radius:var(--ds-radius-md);font-size:12px;line-height:16px}}
.ds .ds-meet__start-audio{position:absolute;top:var(--ds-space-4);left:50%;z-index:3;display:inline-flex;align-items:center;gap:var(--ds-space-2);transform:translateX(-50%);
  max-width:calc(100% - 32px);padding:6px 18px 6px 6px;border:0;border-radius:var(--ds-radius-pill);background:var(--ds-surface);color:var(--ds-ink);
  box-shadow:var(--ds-shadow-3);font:inherit;font-weight:600;cursor:pointer}
.ds .ds-meet__start-audio .ds-meet__icon{flex:0 0 auto;width:36px;height:36px;background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__start-audio:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds .ds-meet__level{width:min(280px,100%);height:6px;border-radius:var(--ds-radius-pill);background:var(--ds-meet-raised);overflow:hidden}
.ds .ds-meet__level span{display:block;height:100%;background:var(--ds-success);transform:scaleX(0);transform-origin:left center;transition:transform 80ms linear}
.ds .ds-meet__level--light{width:100%;background:var(--ds-surface-soft);box-shadow:inset 0 0 0 1px var(--ds-line-soft)}
.ds .ds-meet-settings{width:min(680px,calc(100vw - 32px))}
.ds .ds-meet-settings__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-5)}
.ds .ds-meet-settings__group{display:flex;flex-direction:column;gap:var(--ds-space-3);min-width:0}
.ds .ds-meet-settings__group h3{margin:0;font-size:15px;line-height:20px;font-weight:600;color:var(--ds-ink)}
.ds .ds-meet-settings__level{display:flex;flex-direction:column;gap:6px}
.ds .ds-meet-settings [hidden]{display:none}

.ds .ds-meet__side{display:flex;flex-direction:column;flex:0 0 360px;min-height:0;margin:var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) 0;
  border-radius:var(--ds-radius-lg);background:var(--ds-surface);color:var(--ds-ink);box-shadow:var(--ds-shadow-3);overflow:hidden}
.ds .ds-meet__side-head{display:flex;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-meet__tabs{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto;min-width:0}
.ds .ds-meet__tabs button{flex:0 0 auto;padding:6px 12px;border:0;border-radius:var(--ds-radius-pill);background:transparent;color:var(--ds-ink-muted);font:inherit;font-size:13px;cursor:pointer}
.ds .ds-meet__tabs button[aria-selected="true"]{background:var(--ds-brand-soft);color:var(--ds-brand);font-weight:600}
.ds .ds-meet__tabs b:empty{display:none}
.ds .ds-meet__pane{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ds .ds-meet__messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--ds-space-3);display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-meet__message{align-self:flex-start;max-width:88%;padding:6px 12px;border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);border:1px solid var(--ds-line-soft)}
.ds .ds-meet__message.is-mine{align-self:flex-end;background:var(--ds-brand-soft);border-color:color-mix(in srgb,var(--ds-brand) 20%,transparent)}
.ds .ds-meet__message small{display:block;font-size:11px;line-height:14px;color:var(--ds-ink-muted)}
.ds .ds-meet__message p{margin:2px 0 0;font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
.ds .ds-meet__empty{margin:auto 0;padding:var(--ds-space-4);text-align:center;font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-meet__compose{display:flex;align-items:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-3);border-top:1px solid var(--ds-line-soft)}
.ds .ds-meet__compose textarea{flex:1 1 auto;min-height:40px;max-height:120px;resize:none}
.ds .ds-meet__people{list-style:none;margin:0;padding:var(--ds-space-2) var(--ds-space-3);overflow-y:auto;display:flex;flex-direction:column}
.ds .ds-meet__person{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-meet__person:last-child{border-bottom:0}
.ds .ds-meet__person b{font-weight:600;font-size:14px;line-height:20px;overflow-wrap:anywhere}
.ds .ds-meet__person small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
/* 1.5.241 (brandbook 3.123): who leads sees the connection of each person under the name - amber when it is poor or the person
   cannot enter (the reason in words: the path, the losses, the delay) */
.ds .ds-meet__person:has(.ds-meet__net){flex-wrap:wrap}
.ds .ds-meet__net{flex:1 0 100%;font-variant-numeric:tabular-nums}
.ds .ds-meet__person small.ds-meet__net.is-poor{color:var(--ds-warning)}
.ds .ds-meet-net .ds-table-wrap{margin-top:var(--ds-space-2)}

.ds .ds-meet__controls{display:flex;align-items:center;justify-content:center;gap:var(--ds-space-1);padding:var(--ds-space-2) var(--ds-space-4);
  border-top:1px solid var(--ds-meet-line)}
.ds .ds-meet__gap{flex:0 0 var(--ds-space-6)}
.ds .ds-meet__note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-space-3);flex:1 1 auto;padding:var(--ds-space-6);text-align:center}
.ds .ds-meet__note p{margin:0;max-width:520px;color:var(--ds-meet-muted)}
.ds .ds-meet__toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));padding:var(--ds-space-2) var(--ds-space-4);
  border-radius:var(--ds-radius-pill);background:var(--ds-surface);color:var(--ds-ink);box-shadow:var(--ds-shadow-3);font-size:14px;line-height:20px;text-align:center}
@media (max-width:900px){
  .ds .ds-meet__prejoin{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-4);padding:var(--ds-space-4);overflow-y:auto;align-content:start}
  .ds .ds-meet__bar{padding:var(--ds-space-2) var(--ds-space-4)}
  .ds .ds-meet__brand,.ds .ds-meet__bar-actions .ds-meet__label{display:none}
  .ds .ds-meet__side{position:absolute;inset:60px 0 auto 0;bottom:calc(84px + env(safe-area-inset-bottom));z-index:2;margin:0 var(--ds-space-2);flex-basis:auto}
  .ds .ds-meet__stage{padding:var(--ds-space-2)}
  .ds .ds-meet__grid{gap:var(--ds-space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
  .ds .ds-meet__rail{gap:var(--ds-space-2)}
  .ds .ds-meet__rail .ds-meet__name{display:none}
  .ds .ds-meet__rail .ds-meet__avatar{width:36px;height:36px;font-size:16px}
  .ds .ds-meet-settings__body{grid-template-columns:minmax(0,1fr)}
  .ds .ds-meet__bar-actions [data-meet-rail-place]{display:none}
  .ds .ds-meet__controls{gap:0;padding:var(--ds-space-2) var(--ds-space-1) calc(var(--ds-space-2) + env(safe-area-inset-bottom));overflow-x:auto;justify-content:flex-start}
  .ds .ds-meet__control{min-width:0;padding:2px}
  .ds .ds-meet__controls .ds-meet__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ds .ds-meet__controls{justify-content:space-between}
  .ds .ds-meet__count{right:-2px}
  .ds .ds-meet__gap{flex:0 0 var(--ds-space-1)}
  .ds .ds-meet__compose textarea{font-size:16px}
}
/* 1.5.227 (brandbook 3.110). The connection of a person - three bars in the label of his tile (green, amber, red; grey while it is
   measured); «Связь» in «Настройки» - lines of figures. A file in the chat - a card with its name and size, a picture above it; the
   chat pane lights up when a file is dragged over it. «Указка» and «Маркер» - a group of round tools at the top of a big shown
   screen, the marks drawn on a canvas over the picture in the colours of the people. «Презентация» - the turning of the slides at the
   bottom of the big tile. «Окно поверх» - the people one under another in a small window of their own with three controls. «Запись»
   - a red ring while it goes. The controls of a computer only (the presentation, the window over, the recording) are not on a phone. */
.ds .ds-meet{--ds-meet-mark-1:var(--ds-chart-4);--ds-meet-mark-2:var(--ds-brand);--ds-meet-mark-3:var(--ds-chart-3);--ds-meet-mark-4:var(--ds-danger);
  --ds-meet-slide-ground:var(--ds-on-color);--ds-meet-rec-ground:var(--ds-ink);--ds-meet-rec-plate:var(--ds-side-raised);--ds-meet-rec-shade:var(--ds-backdrop)}
.ds .ds-meet__signal{display:inline-flex;flex:0 0 auto;margin-left:2px;color:var(--ds-meet-muted)}
.ds .ds-meet__signal svg{width:14px;height:14px;fill:currentColor}
.ds .ds-meet__signal svg rect{opacity:.3;transition:opacity var(--ds-base) var(--ds-ease)}
.ds .ds-meet__signal[data-meet-signal="excellent"]{color:var(--ds-success)}
.ds .ds-meet__signal[data-meet-signal="good"]{color:var(--ds-success)}
.ds .ds-meet__signal[data-meet-signal="poor"]{color:var(--ds-warning)}
.ds .ds-meet__signal[data-meet-signal="lost"]{color:var(--ds-danger)}
.ds .ds-meet__signal[data-meet-signal="excellent"] svg rect,.ds .ds-meet__signal[data-meet-signal="good"] svg rect:nth-child(-n+2),
.ds .ds-meet__signal[data-meet-signal="poor"] svg rect:first-child,.ds .ds-meet__signal[data-meet-signal="lost"] svg rect:first-child{opacity:1}
.ds .ds-meet-settings__group--wide{grid-column:1/-1}
.ds .ds-meet-stats{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px var(--ds-space-4);margin:0;font-size:13px;line-height:18px}
.ds .ds-meet-stats dt{color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-meet-stats dd{margin:0;color:var(--ds-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.ds .ds-meet__message a{color:var(--ds-brand);overflow-wrap:anywhere}
.ds .ds-meet__picture{display:block;margin-top:6px;border-radius:var(--ds-radius-sm);overflow:hidden;background:var(--ds-surface)}
.ds .ds-meet__picture img{display:block;max-width:100%;max-height:220px;margin:0 auto;object-fit:contain}
.ds .ds-meet__file{display:flex;flex-direction:column;margin-top:6px;padding:6px 10px;border-radius:var(--ds-radius-sm);background:var(--ds-surface);
  border:1px solid var(--ds-line-soft);color:var(--ds-ink);text-decoration:none;transition:border-color var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__file:hover{border-color:var(--ds-brand)}
.ds .ds-meet__file b{font-size:13px;line-height:18px;font-weight:600;overflow-wrap:anywhere}
.ds .ds-meet__file small{font-size:11px;line-height:14px;color:var(--ds-ink-muted)}
.ds .ds-meet__pane.is-drop{box-shadow:inset 0 0 0 2px var(--ds-brand);background:var(--ds-brand-soft)}

.ds .ds-meet__marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ds .ds-meet__stage.is-drawing .ds-meet__main .ds-meet__tile--screen{cursor:crosshair}
.ds .ds-meet__stage[data-tool="pointer"] .ds-meet__main .ds-meet__tile--screen{cursor:none}
.ds .ds-meet__stage.is-drawing .ds-meet__main .ds-meet__pin{display:none}
.ds .ds-meet__draw,.ds .ds-meet__slides{position:absolute;z-index:2;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--ds-radius-pill);
  background:color-mix(in srgb,var(--ds-ink) 78%,transparent);box-shadow:var(--ds-shadow-2)}
.ds .ds-meet__draw{top:calc(var(--ds-space-4) + var(--ds-space-2));left:calc(var(--ds-space-4) + var(--ds-space-2))}
.ds .ds-meet__slides{left:50%;bottom:calc(var(--ds-space-4) + var(--ds-space-3));transform:translateX(-50%)}
.ds .ds-meet__stage[data-rail="right"].is-focus .ds-meet__slides{left:calc((100% - var(--ds-meet-rail)) / 2)}
.ds .ds-meet__draw[hidden],.ds .ds-meet__slides[hidden]{display:none}
.ds .ds-meet__tool{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 0;border:0;border-radius:var(--ds-radius-pill);background:transparent;
  color:var(--ds-meet-ink);font:inherit;font-size:13px;cursor:pointer;transition:background var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__tool .ds-meet__icon{width:36px;height:36px;background:transparent}
.ds .ds-meet__tool .ds-meet__icon .ds-icon{width:18px;height:18px}
.ds .ds-meet__tool:hover{background:var(--ds-meet-plate)}
.ds .ds-meet__tool:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds .ds-meet__tool[aria-pressed="true"]{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__tool-label{white-space:nowrap}
.ds .ds-meet__tool--stop{padding:0 14px}
.ds .ds-meet__slides .ds-meet__tool{padding:0}
.ds .ds-meet__slides .ds-meet__tool--stop{padding:0 14px}
.ds .ds-meet__slides-count{min-width:72px;text-align:center;font-size:13px;line-height:18px;color:var(--ds-meet-ink);font-variant-numeric:tabular-nums}
.ds .ds-meet__control[aria-pressed="true"]:is([data-meet-control="slides"],[data-meet-control="pip"]) .ds-meet__icon{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__control--record[aria-pressed="true"] .ds-meet__icon{background:var(--ds-danger);color:var(--ds-on-color);animation:ds-meet-record 1.6s var(--ds-ease) infinite}
@keyframes ds-meet-record{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ds-danger) 28%,transparent)}}
@media (prefers-reduced-motion:reduce){.ds .ds-meet__control--record[aria-pressed="true"] .ds-meet__icon{animation:none}}

.ds .ds-meet--pip{height:100vh;padding:var(--ds-space-2);gap:var(--ds-space-2)}
.ds .ds-meet__pip-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ds-space-2);overflow-y:auto}
.ds .ds-meet__pip-stage .ds-meet__tile{flex:0 0 auto}
.ds .ds-meet__pip-stage .ds-meet__pin{display:none}
.ds .ds-meet__pip-stage .ds-meet__avatar{width:48px;height:48px;font-size:20px}
.ds .ds-meet__pip-controls{display:flex;justify-content:center;gap:var(--ds-space-1)}
.ds .ds-meet__pip-controls .ds-meet__control{min-width:0;padding:2px 6px}
.ds .ds-meet__pip-controls .ds-meet__label{display:none}
.ds .ds-meet__pip-controls .ds-meet__icon{width:40px;height:40px}

.ds .ds-meet__who{display:flex;flex-direction:column;min-width:0}
/* 1.5.228: the state of a meeting in one line - the badge, then «· 45 минут» quietly */
/* 1.5.228 (brandbook 3.111): a line of a person of a webinar - the person, the role, «×»; the role only for a webinar */
.ds .ds-lines--role .ds-lines__row{grid-template-columns:minmax(0,1fr) minmax(140px,180px) 32px}
.ds [data-meeting-kind="meeting"] .ds-lines--role .ds-lines__row{grid-template-columns:minmax(0,1fr) 32px}
.ds [data-meeting-kind="meeting"] [data-meeting-webinar-only]{display:none}
@container ds-lines (max-width:720px){.ds .ds-lines--role .ds-lines__row{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .ds .ds-lines--role [data-meeting-webinar-only]{grid-column:1/-1}}
.ds .ds-meet-questions__answer{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--ds-ink);white-space:pre-wrap}
.ds .ds-meet-status{display:inline-flex;align-items:center;gap:var(--ds-space-2);white-space:nowrap}
.ds .ds-meet-status__minutes{font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-meet-status__minutes::before{content:"·";margin-right:var(--ds-space-2)}
.ds .ds-meet-facts{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ds .ds-meet-recordings{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:var(--ds-space-4)}
.ds .ds-meet-recording{margin:0;display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-meet-recording__video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--ds-radius-md);background:var(--ds-ink)}
.ds .ds-meet-recording__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-2);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-meet-recording__meta b{color:var(--ds-ink);font-weight:600}
@media (max-width:720px){.ds .ds-meet__control--desk{display:none}}
/* 1.5.228 (brandbook 3.111) «Вебинары». A viewer sees no microphone, camera, screen, presentation, window over and recording until
   he is on the stage; «Рука» - a viewer only, «Со сцены» - a viewer on the stage; «Начать эфир» - who leads. «В эфире» - a pill of
   danger with a dot in the bar, «Закулисье» - quiet. The curtain of the viewers before the air - the mark of the air in a circle of
   the brand and the words in the middle of the stage. The reactions float up from the bottom right and fade (no movement when the
   person asked for less). The chat: a reply quotes its message with a line of the brand; the reactions are small pills; the
   actions of a message come on hover (always on a touch screen); a pinned message stands on top. The questions: the votes in a
   pill at the left, «Мне тоже» pressed - the brand. */
.ds .ds-meet[data-kind="webinar"][data-stage="off"] :is([data-meet-controls],[data-meet-pip]) :is([data-meet-control="mic"],[data-meet-control="cam"],[data-meet-control="screen"],[data-meet-control="region"],[data-meet-control="slides"],[data-meet-control="pip"],[data-meet-control="record"]){display:none}
.ds .ds-meet:is([data-role="organizer"],[data-role="speaker"],[data-role="moderator"]) :is([data-meet-control="hand"],[data-meet-control="stage_leave"]){display:none}
.ds .ds-meet[data-stage="on"] [data-meet-control="hand"],.ds .ds-meet[data-stage="off"] [data-meet-control="stage_leave"]{display:none}
.ds .ds-meet__control[aria-pressed="true"]:is([data-meet-control="hand"],[data-meet-control="questions"],[data-meet-control="react"]) .ds-meet__icon{background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__control--air .ds-meet__icon{background:var(--ds-success);color:var(--ds-on-color)}
.ds .ds-meet__control--air.is-on .ds-meet__icon{background:var(--ds-danger)}
.ds .ds-meet__air{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--ds-radius-pill);background:var(--ds-meet-plate);
  color:var(--ds-meet-muted);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.ds .ds-meet__air.is-on{background:var(--ds-danger);color:var(--ds-on-color)}
.ds .ds-meet__air.is-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ds-on-color);animation:ds-meet-blink 1.6s var(--ds-ease) infinite}
.ds .ds-meet__air[hidden]{display:none}
@keyframes ds-meet-blink{50%{opacity:.35}}
.ds .ds-meet__wait-air{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-space-3);
  padding:var(--ds-space-6);text-align:center;background:var(--ds-sidebar)}
.ds .ds-meet__wait-air[hidden]{display:none}
.ds .ds-meet__wait-air .ds-meet__icon{width:72px;height:72px;background:var(--ds-brand);color:var(--ds-on-color)}
.ds .ds-meet__wait-air .ds-meet__icon .ds-icon{width:34px;height:34px}
.ds .ds-meet__wait-air p{margin:0;max-width:520px;color:var(--ds-meet-muted)}
.ds .ds-meet__floats{position:absolute;right:var(--ds-space-6);bottom:var(--ds-space-4);z-index:3;width:120px;height:60%;pointer-events:none}
.ds .ds-meet__float{position:absolute;bottom:0;left:var(--ds-meet-float-x,0);font-size:30px;line-height:1;animation:ds-meet-float 2.5s var(--ds-ease) forwards}
@keyframes ds-meet-float{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-20px) scale(1)}100%{transform:translateY(-280px) scale(1.1);opacity:0}}
.ds .ds-meet__tray{position:absolute;left:50%;bottom:96px;z-index:4;display:flex;gap:4px;padding:6px;transform:translateX(-50%);border-radius:var(--ds-radius-pill);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-3)}
.ds .ds-meet__tray[hidden]{display:none}
.ds .ds-meet__emoji{width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;cursor:pointer;
  transition:background var(--ds-fast) var(--ds-ease),transform var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__emoji:hover{background:var(--ds-surface-soft);transform:translateY(var(--ds-lift))}
.ds .ds-meet__emoji:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ds .ds-meet__float{animation-duration:.01s}.ds .ds-meet__air.is-on::before{animation:none}}

.ds .ds-meet__pane-tools{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-4);padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line-soft);
  background:var(--ds-surface-soft)}
.ds .ds-meet__pinned{display:flex;flex-direction:column;gap:2px;margin:var(--ds-space-2) var(--ds-space-3) 0;padding:6px 12px;border-radius:var(--ds-radius-md);
  background:var(--ds-brand-soft);font-size:13px;line-height:18px}
.ds .ds-meet__pinned[hidden],.ds .ds-meet__reply[hidden],.ds .ds-meet__closed[hidden]{display:none}
.ds .ds-meet__pinned b{font-size:11px;line-height:14px;color:var(--ds-brand)}
.ds .ds-meet__pinned span{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ds .ds-meet__message.is-staff-only{border-style:dashed}
.ds .ds-meet__message.is-deleted{opacity:.7}
.ds .ds-meet__deleted{font-style:italic;color:var(--ds-ink-muted)}
.ds .ds-meet__quote{margin:4px 0 0;padding:2px 0 2px 8px;border-left:3px solid var(--ds-brand);font-size:12px;line-height:16px;color:var(--ds-ink-muted);overflow-wrap:anywhere}
.ds .ds-meet__quote b{color:var(--ds-ink);font-weight:600}
.ds .ds-meet__reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ds .ds-meet__msg-action{min-height:24px;padding:0 8px;border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-pill);background:var(--ds-surface);
  color:var(--ds-ink-muted);font:inherit;font-size:12px;line-height:22px;cursor:pointer;transition:border-color var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__msg-action:hover{border-color:var(--ds-brand);color:var(--ds-brand)}
.ds .ds-meet__msg-action:focus-visible{outline:2px solid var(--ds-focus);outline-offset:1px}
.ds .ds-meet__msg-action.is-mine{border-color:var(--ds-brand);background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-meet__msg-action.is-danger:hover{border-color:var(--ds-danger);color:var(--ds-danger)}
.ds .ds-meet__msg-actions{display:none;flex-wrap:wrap;gap:4px;margin-top:6px}
.ds .ds-meet__message:is(:hover,:focus-within) .ds-meet__msg-actions,.ds .ds-meet__msg-actions.is-shown{display:flex}
@media (hover:none){.ds .ds-meet__msg-actions{display:flex}}
.ds .ds-meet__closed{margin:0 var(--ds-space-3);padding:6px 12px;border-radius:var(--ds-radius-md);background:var(--ds-warning-soft);color:var(--ds-ink);font-size:13px;line-height:18px}
.ds .ds-meet__reply{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);margin:0 var(--ds-space-3);padding:4px 4px 4px 10px;
  border-left:3px solid var(--ds-brand);background:var(--ds-surface-soft);font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-meet__reply span{min-width:0;overflow-wrap:anywhere}
.ds .ds-meet__compose-switch{margin:var(--ds-space-2) var(--ds-space-3) 0}
.ds .ds-meet__compose--question{flex-direction:column;align-items:stretch}
.ds .ds-meet__compose--question textarea{min-height:64px}
.ds .ds-meet__ask-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2)}
.ds .ds-meet__ask-row>.ds-btn:only-child{margin-left:auto}
.ds .ds-meet__ask-row [hidden]{display:none}
.ds .ds-meet__questions{list-style:none;margin:0;padding:var(--ds-space-3);flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-meet__question{display:flex;gap:var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-md);background:var(--ds-surface)}
.ds .ds-meet__question.is-answered{background:var(--ds-success-soft)}
.ds .ds-meet__question.is-pending{border-style:dashed}
.ds .ds-meet__question.is-dismissed{opacity:.6}
.ds .ds-meet__question-main{flex:1 1 auto;min-width:0}
.ds .ds-meet__question-main p{margin:0;font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
.ds .ds-meet__question-main small{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-meet__answer{margin-top:6px;padding-left:8px;border-left:3px solid var(--ds-success);font-size:13px;line-height:18px}
.ds .ds-meet__answer-form{display:flex;flex-direction:column;gap:var(--ds-space-2);margin-top:var(--ds-space-2)}
.ds .ds-meet__vote{flex:0 0 56px;align-self:flex-start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:6px 4px;border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-md);background:var(--ds-surface);color:var(--ds-ink);font:inherit;cursor:pointer;transition:border-color var(--ds-fast) var(--ds-ease),background var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__vote b{font-size:16px;line-height:20px}
.ds .ds-meet__vote small{font-size:10px;line-height:12px;color:var(--ds-ink-muted);white-space:nowrap}
.ds .ds-meet__vote:hover:not(:disabled){border-color:var(--ds-brand)}
.ds .ds-meet__vote[aria-pressed="true"]{border-color:var(--ds-brand);background:var(--ds-brand-soft);color:var(--ds-brand)}
.ds .ds-meet__vote:disabled{cursor:default;opacity:.6}
.ds .ds-meet__vote:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds .ds-meet__people-actions{display:flex;padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-meet__people-actions .ds-btn{flex:1 1 auto}
.ds .ds-meet__hands{padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-meet__hands-head{margin:0 0 4px;font-size:12px;line-height:16px;font-weight:600;color:var(--ds-ink-muted)}
.ds .ds-meet__hands .ds-meet__empty{margin:0;padding:var(--ds-space-2) 0;text-align:left}
/* 1.5.229 (brandbook 3.111): a poll - a card with its question, the answers as rows (a radio or a box, the words, «45 % · 9» and a
   bar of the brand that grows smoothly), «Ответить»; over the stage of a viewer it pops up at the bottom left on the white of the
   panel with «×». The button of an action - the primary button of the design system over the stage at the bottom left. Who leads makes
   them in «Новый опрос» and «Кнопка для зрителей» (folds over the list). The results on the card - the same rows with a meter. */
.ds .ds-meet__pane-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ds-space-2);padding:var(--ds-space-3)}
.ds .ds-meet__maker{border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft);padding:var(--ds-space-2)}
.ds .ds-meet__maker>summary{list-style:none;cursor:pointer}
.ds .ds-meet__maker>summary::-webkit-details-marker{display:none}
.ds .ds-meet__maker-form{display:flex;flex-direction:column;gap:var(--ds-space-2);margin-top:var(--ds-space-2)}
.ds .ds-meet__options{display:flex;flex-direction:column;gap:6px}
.ds .ds-meet__polls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-meet__poll{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line-soft);
  border-radius:var(--ds-radius-md);background:var(--ds-surface);color:var(--ds-ink)}
.ds .ds-meet__poll.is-closed{background:var(--ds-surface-soft)}
.ds .ds-meet__poll-question{margin:0;padding-right:var(--ds-space-6);font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.ds .ds-meet__poll>small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-meet__poll-form{display:flex;flex-direction:column;gap:6px}
.ds .ds-meet__poll-form>.ds-btn{align-self:flex-start}
.ds .ds-meet__poll-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px var(--ds-space-2);padding:6px 8px;
  border:1px solid var(--ds-line-soft);border-radius:var(--ds-radius-sm);cursor:pointer;transition:border-color var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__poll-option:hover{border-color:var(--ds-brand)}
.ds .ds-meet__poll-option.is-mine{border-color:var(--ds-brand);background:var(--ds-brand-soft)}
.ds .ds-meet__poll-option input{margin:0;accent-color:var(--ds-brand)}
.ds .ds-meet__poll-option:not(:has(input)) .ds-meet__bar-text{grid-column:1/3}
.ds .ds-meet__bar-text{font-size:13px;line-height:18px;overflow-wrap:anywhere}
.ds .ds-meet__bar-value{font-size:12px;line-height:16px;color:var(--ds-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds .ds-meet__poll-bar{grid-column:1/-1;height:6px;border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);overflow:hidden}
.ds .ds-meet__poll-bar>span{display:block;height:100%;border-radius:inherit;background:var(--ds-brand);transition:width var(--ds-slow) var(--ds-ease)}
.ds .ds-meet__poll-done{font-size:12px;line-height:16px;color:var(--ds-success)}
.ds .ds-meet__poll-close{position:absolute;top:4px;right:4px}
.ds .ds-meet__overlay{position:absolute;left:calc(var(--ds-space-4) + var(--ds-space-2));bottom:calc(var(--ds-space-4) + var(--ds-space-2));z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-2);max-width:min(360px,calc(100% - 32px));pointer-events:none}
.ds .ds-meet__overlay>*{pointer-events:auto}
.ds .ds-meet__poll-pop{width:100%;box-shadow:var(--ds-shadow-3);border-radius:var(--ds-radius-md)}
.ds .ds-meet__poll-pop[hidden],.ds .ds-meet__cta[hidden]{display:none}
.ds .ds-meet__ctas{display:flex;flex-direction:column}
.ds .ds-meet__presets{display:flex;flex-wrap:wrap;gap:4px}
.ds .ds-meet__cta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-2);padding:6px 0;border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-meet__cta-row b{font-size:13px;line-height:18px}
.ds .ds-meet__cta-row small{display:block;font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-meet__cta-row.is-active b{color:var(--ds-brand)}
.ds .ds-meet-poll-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:var(--ds-space-4)}
.ds .ds-meet-poll-result{display:flex;flex-direction:column;gap:6px}
.ds .ds-meet-poll-result__question{margin:0;font-size:14px;line-height:20px}
.ds .ds-meet__bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--ds-space-2);align-items:center}
.ds .ds-meet__meter{grid-column:1/-1;width:100%;height:6px;border:0;border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft);appearance:none}
.ds .ds-meet__meter::-webkit-meter-bar{height:6px;border:0;border-radius:var(--ds-radius-pill);background:var(--ds-surface-soft)}
.ds .ds-meet__meter::-webkit-meter-optimum-value{border-radius:var(--ds-radius-pill);background:var(--ds-brand)}
.ds .ds-meet__meter::-moz-meter-bar{border-radius:var(--ds-radius-pill);background:var(--ds-brand)}
/* 1.5.230 (brandbook 3.112). «В углу» - the main over the whole stage and one person in a window with the big shadow, moved by
   dragging, resized by the brand corner at its bottom right; «Только главное» - the main alone. «Область» - a dialog with the picture
   of the screen on the colour of the ink and the area drawn round in the brand. */
.ds .ds-meet__focus{position:relative}
.ds .ds-meet__stage:is([data-layout="corner"],[data-layout="solo"]) :is(.ds-meet__rail,.ds-meet__split){display:none}
.ds .ds-meet__corner{position:absolute;left:var(--ds-meet-corner-x,74%);top:var(--ds-meet-corner-y,70%);z-index:2;width:var(--ds-meet-corner-w,24%);aspect-ratio:16/9;
  border-radius:var(--ds-radius-lg);overflow:hidden;box-shadow:var(--ds-shadow-3);cursor:grab;touch-action:none;transition:box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__corner[hidden]{display:none}
.ds .ds-meet__corner.is-moving{cursor:grabbing;box-shadow:0 0 0 3px var(--ds-brand),var(--ds-shadow-3)}
.ds .ds-meet__corner .ds-meet__tile{width:100%;height:100%;aspect-ratio:auto}
.ds .ds-meet__corner .ds-meet__avatar{width:48px;height:48px;font-size:20px}
.ds .ds-meet__corner-size{position:absolute;right:4px;bottom:4px;z-index:2;width:18px;height:18px;border-radius:var(--ds-radius-sm);
  background:color-mix(in srgb,var(--ds-brand) 80%,transparent);cursor:nwse-resize;outline:none}
.ds .ds-meet__corner-size:focus-visible{box-shadow:var(--ds-focus)}
.ds .ds-meet-region{width:min(960px,calc(100vw - 32px))}
.ds .ds-meet-region__frame{position:relative;aspect-ratio:16/9;border-radius:var(--ds-radius-md);background:var(--ds-ink);overflow:hidden;cursor:crosshair;touch-action:none}
.ds .ds-meet-region__frame video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ds .ds-meet-region__box{position:absolute;left:var(--ds-meet-region-x,10%);top:var(--ds-meet-region-y,10%);width:var(--ds-meet-region-w,80%);height:var(--ds-meet-region-h,80%);
  border:2px solid var(--ds-brand);border-radius:var(--ds-radius-sm);background:color-mix(in srgb,var(--ds-brand) 14%,transparent);pointer-events:none}
/* On a phone the bar of the room keeps the name of the meeting readable: «В эфире» is its blinking dot alone (the words stay for a
   screen reader and in the hint), the gaps are smaller; «В углу» and «Вид для зрителей» are of a computer. */
@media (max-width:720px){
  .ds .ds-meet__bar{gap:var(--ds-space-2)}
  .ds .ds-meet__air.is-on{font-size:0;gap:0;padding:8px}
}
/* A message of the room stands over the bar of the slides or of the area, never on it. */
.ds .ds-meet:has(.ds-meet__slides:not([hidden])) .ds-meet__toast{bottom:164px}
/* 1.5.231 (brandbook 3.113). The page of a recording on the server (only LiveKit Egress opens it, 1920x1080): the stage of the room
   on the colour of the room, the tiles placed by meeting_recorder.js (the place and the size - four variables of each tile), the
   tile glides to its new place when the layout changes; the window of «В углу» with the big shadow; the names on a dark pill; who
   speaks - the ring of the brand. Nobody on the stage yet - the name of the meeting in the middle. */
.ds .ds-meet-rec{--ds-meet-ink:var(--ds-side-ink);--ds-meet-muted:var(--ds-side-ink-muted);position:fixed;inset:0;overflow:hidden;background:var(--ds-sidebar);color:var(--ds-meet-ink)}
.ds .ds-meet-rec__stage{position:absolute;inset:0}
.ds .ds-meet-rec__sound{display:none}
.ds .ds-meet-rec__tile{position:absolute;left:var(--ds-rec-x,0);top:var(--ds-rec-y,0);width:var(--ds-rec-w,0);height:var(--ds-rec-h,0);overflow:hidden;
  border-radius:var(--ds-radius-lg);background:var(--ds-side-plate);box-shadow:inset 0 0 0 1px var(--ds-side-line);
  transition:left var(--ds-slow) var(--ds-ease),top var(--ds-slow) var(--ds-ease),width var(--ds-slow) var(--ds-ease),height var(--ds-slow) var(--ds-ease),box-shadow var(--ds-fast) var(--ds-ease)}
.ds .ds-meet-rec__tile[hidden]{display:none}
.ds .ds-meet-rec__tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--ds-slow) var(--ds-ease)}
.ds .ds-meet-rec__tile.has-video video{opacity:1}
.ds .ds-meet-rec__tile:is(.is-main,.ds-meet-rec__tile--screen) video{object-fit:contain}
.ds .ds-meet-rec__tile.is-corner{z-index:1;box-shadow:var(--ds-shadow-3)}
.ds .ds-meet-rec__tile.is-speaking{box-shadow:inset 0 0 0 4px var(--ds-brand)}
.ds .ds-meet-rec__avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:auto;width:120px;height:120px;border-radius:50%;
  background:var(--ds-brand);color:var(--ds-on-color);font-size:48px;line-height:1;font-weight:600}
.ds .ds-meet-rec__tile.has-video .ds-meet-rec__avatar{display:none}
.ds .ds-meet-rec__name{position:absolute;left:var(--ds-space-3);bottom:var(--ds-space-3);z-index:1;max-width:calc(100% - 24px);padding:4px 14px;border-radius:var(--ds-radius-pill);
  background:color-mix(in srgb,var(--ds-sidebar) 72%,transparent);color:var(--ds-meet-ink);font-size:18px;line-height:26px;overflow-wrap:anywhere}
.ds .ds-meet-rec__wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-space-2);
  color:var(--ds-meet-muted);font-size:22px;text-align:center}
.ds .ds-meet-rec__wait[hidden]{display:none}
.ds .ds-meet-rec__wait p{margin:0}
.ds .ds-meet-rec__title{color:var(--ds-meet-ink);font-size:36px;line-height:44px;font-weight:600}
/* 1.5.231 (brandbook 3.113). The player of a recording on the card: the video and, beside it (under it on a phone), «Главы» and
   «Чат» - the lines of the time line: the time in the brand, the words; the line of the moment played - on the soft brand, the chat
   still to come - pale. A recording on the server that goes now or failed - a plate in place of the video. */
.ds .ds-meet-recording--wide{grid-column:1/-1}
.ds .ds-meet-player{display:block;min-width:0}
.ds .ds-meet-player--side{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:var(--ds-space-4);align-items:start}
.ds .ds-meet-player__side{display:flex;flex-direction:column;gap:var(--ds-space-2);min-width:0}
.ds .ds-meet-player__side .ds-tabs{align-self:flex-start}
.ds .ds-meet-player__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;max-height:min(420px,50vh);overflow-y:auto;overscroll-behavior:contain}
.ds .ds-meet-player__list[hidden]{display:none}
.ds .ds-meet-player__line{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--ds-space-2);width:100%;padding:6px var(--ds-space-2);border:0;
  border-radius:var(--ds-radius-sm);background:transparent;color:var(--ds-ink);font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer;
  overflow-wrap:anywhere;transition:background var(--ds-fast) var(--ds-ease),opacity var(--ds-fast) var(--ds-ease)}
.ds .ds-meet-player__line:hover{background:var(--ds-surface-soft)}
.ds .ds-meet-player__line:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.ds .ds-meet-player__line.is-current{background:var(--ds-brand-soft)}
.ds .ds-meet-player__line.is-later{opacity:.5}
.ds .ds-meet-player__line b{font-weight:600}
.ds .ds-meet-player__clock{color:var(--ds-brand);font-variant-numeric:tabular-nums;font-weight:600}
.ds .ds-meet-recording__plate{display:flex;align-items:center;gap:var(--ds-space-2);padding:var(--ds-space-4);border-radius:var(--ds-radius-md);
  background:var(--ds-surface-soft);color:var(--ds-ink);font-size:14px;line-height:20px}
.ds .ds-meet-recording__plate--failed{background:var(--ds-danger-soft)}
.ds .ds-meet-recording__dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--ds-danger);animation:ds-meet-blink 1.6s var(--ds-ease) infinite}
@media (prefers-reduced-motion:reduce){.ds .ds-meet-recording__dot{animation:none}}
@media (max-width:900px){.ds .ds-meet-player--side{grid-template-columns:minmax(0,1fr)}}
/* 1.5.232 (brandbook 3.114). The page of registration of a webinar (ds-public): the cover - the badge, the title (the h1 of the portal), the
   time in bold with the time of the browser beside it, «Зарегистрироваться»; below - the blocks of the webinar (cards) and, beside
   them on the right (under them on a phone), the form in a card that stays in sight while the page scrolls. The field of the trap
   for the bots is out of sight; registered - a round brand tick, the link, «Войти в вебинар», «В календарь». */
.ds .ds-landing__cover{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-3);width:min(1080px,100%);margin:var(--ds-space-5) auto 0}
.ds .ds-landing__cover h1{margin:0;color:var(--ds-ink);overflow-wrap:break-word;max-width:100%}
.ds .ds-landing__when{margin:0;font-size:16px;line-height:24px;color:var(--ds-ink-muted)}
.ds .ds-landing__when b{color:var(--ds-ink);font-weight:600}
.ds .ds-landing__local{display:block;font-size:14px;line-height:20px}
.ds .ds-landing__local[hidden]{display:none}
.ds .ds-landing__over{margin:0;color:var(--ds-ink-muted)}
.ds .ds-landing__body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--ds-space-5);align-items:start;width:min(1080px,100%);margin-inline:auto}
.ds .ds-landing__about{display:flex;flex-direction:column;gap:var(--ds-space-4);min-width:0}
.ds .ds-landing__block h2,.ds .ds-landing__form h2{margin:0 0 var(--ds-space-3);font-size:18px;line-height:26px;font-weight:600;color:var(--ds-ink)}
.ds .ds-landing__block p{margin:0 0 var(--ds-space-2);font-size:15px;line-height:24px;color:var(--ds-ink);overflow-wrap:break-word}
.ds .ds-landing__block p:last-child{margin-bottom:0}
.ds .ds-landing__program{margin:0;padding-left:var(--ds-space-5);display:flex;flex-direction:column;gap:var(--ds-space-2);font-size:15px;line-height:24px;color:var(--ds-ink)}
.ds .ds-landing__program li::marker{color:var(--ds-brand);font-weight:600}
.ds .ds-landing__speakers{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--ds-space-4)}
.ds .ds-landing__speakers li{display:flex;align-items:center;gap:var(--ds-space-3);min-width:0}
.ds .ds-landing__speakers b{display:block;font-weight:600;color:var(--ds-ink);overflow-wrap:break-word}
.ds .ds-landing__speakers small{display:block;font-size:13px;line-height:18px;color:var(--ds-ink-muted);overflow-wrap:break-word}
.ds .ds-landing__avatar{flex:0 0 48px;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:var(--ds-brand-soft);color:var(--ds-brand);font-size:17px;font-weight:600}
.ds .ds-landing__form{position:sticky;top:var(--ds-space-5)}
.ds .ds-landing__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ds .ds-landing__done{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.ds .ds-landing__done p{margin:0;color:var(--ds-ink-muted)}
.ds .ds-landing__tick{display:inline-flex;width:44px;height:44px;border-radius:50%;background:var(--ds-success-soft);position:relative}
.ds .ds-landing__tick::after{content:"";position:absolute;left:15px;top:11px;width:10px;height:18px;border:solid var(--ds-success);border-width:0 3px 3px 0;transform:rotate(45deg)}
@media (max-width:900px){
  .ds .ds-landing__body{grid-template-columns:minmax(0,1fr)}
  .ds .ds-landing__form{position:static}
}
.ds .ds-landing{gap:var(--ds-space-5)}
.ds .ds-landing__preview{width:min(1080px,100%);margin:var(--ds-space-4) auto 0}
.ds .ds-meet-landing{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.ds .ds-meet-landing>.ds-card__head{margin-bottom:0}
.ds .ds-meet-landing>.ds-disclosure{margin-top:0}
/* 1.5.233 (brandbook 3.115). The cover of the page of registration - the picture of the organizer over the whole width of the page,
   rounded, at most 320 px high; waiting for the confirmation - the round tick turns into a soft amber clock face; the recording for
   the viewers - the player of the card in a card of the page. */
.ds .ds-landing__image{display:block;width:100%;max-height:320px;object-fit:cover;border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-1)}
.ds .ds-landing__tick--wait{background:var(--ds-warning-soft);box-shadow:inset 0 0 0 3px var(--ds-warning)}
.ds .ds-landing__tick--wait::after{left:20px;top:11px;width:9px;height:12px;border-color:var(--ds-warning);border-width:0 0 3px 3px;border-radius:0 0 0 2px;transform:none}
.ds .ds-meet-cover{display:block;width:100%;max-height:140px;object-fit:cover;border-radius:var(--ds-radius-md)}
.ds .ds-landing__watch{width:min(1080px,100%);margin-inline:auto}
.ds .ds-landing__watch h2{margin:0 0 var(--ds-space-2);color:var(--ds-ink)}
.ds .ds-meet-after{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ds-space-3)}
.ds .ds-meet-after .ds-field{flex:1 1 260px;min-width:0}
/* 1.5.234 (brandbook 3.116). The report of a webinar: the tiles of the facts above the bars of the funnel (the bars of the poll
   results), a signal of the sell-through as a badge with its words under it. */
.ds .ds-meet-report{display:flex;flex-direction:column;gap:var(--ds-space-5)}
.ds .ds-meet-report__funnel{display:flex;flex-direction:column;gap:var(--ds-space-3);max-width:720px}
.ds .ds-meet-report__signal{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ds .ds-meet-report__signal + .ds-meet-report__signal{margin-top:var(--ds-space-2)}
/* 1.5.235 (brandbook 3.117). «Размер» in the bar of the room: three squares of three sizes - the person chooses how big the controls
   are (compact - circles only, the words in the tips; regular and large - the words under the circles); the choice is kept in his
   browser. */
.ds .ds-meet__density{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--ds-radius-pill);background:var(--ds-meet-plate)}
.ds .ds-meet__density button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ds-meet-muted);cursor:pointer;transition:background var(--ds-fast) var(--ds-ease),color var(--ds-fast) var(--ds-ease)}
.ds .ds-meet__density button:hover{background:var(--ds-meet-raised);color:var(--ds-meet-ink)}
.ds .ds-meet__density button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:1px}
.ds .ds-meet__density button[aria-pressed="true"]{background:var(--ds-meet-raised-hover);color:var(--ds-meet-ink)}
.ds .ds-meet__density-mark{display:block;border:1.6px solid currentColor;border-radius:3px}
.ds .ds-meet__density-mark--s{width:8px;height:8px}
.ds .ds-meet__density-mark--m{width:11px;height:11px}
.ds .ds-meet__density-mark--l{width:14px;height:14px;border-radius:4px}
@media (max-width:720px){.ds .ds-meet__density{display:none}}
/* 1.5.235 (brandbook 3.117). The registers of «Встречи» and «Вебинары»: the tabs in the bar of the register, the companies that came
   as links in a line, the outcome as badges in a line. */
.ds .ds-meet-companies{display:flex;flex-wrap:wrap;gap:2px var(--ds-space-2);font-size:13px;line-height:18px}
.ds .ds-meet-companies > *:not(:last-child)::after{content:",";color:var(--ds-ink-muted)}
.ds .ds-meet-outcome{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);font-size:13px;line-height:18px}
.ds .ds-meet-register .ds-table__sub .ds-badge{vertical-align:baseline}
.ds .ds-meet-rooms{margin-bottom:var(--ds-space-5)}
.ds .ds-meet-register-bar>.ds-table-bar__title{margin-right:0}
.ds .ds-meet-register-bar>.ds-tabs{margin-right:auto}
/* 1.5.236 (brandbook 3.118). A test: «Тест — отметить верные ответы» in «Новый опрос» shows a small check «Верный» at each answer; a
   prepared poll («Подготовить») is dashed until «Запустить»; a right answer told - green, the verdict of the person under the answers. */
.ds .ds-meet__option{display:flex;align-items:center;gap:var(--ds-space-2)}
.ds .ds-meet__option .ds-control{flex:1 1 auto;min-width:0}
.ds .ds-meet__correct{display:none;align-items:center;gap:4px;flex:0 0 auto;font-size:12px;line-height:16px;color:var(--ds-ink-muted);cursor:pointer}
.ds .ds-meet__correct input{margin:0;accent-color:var(--ds-success)}
.ds .ds-meet__maker-form[data-poll-test="on"] .ds-meet__correct{display:inline-flex}
.ds .ds-meet__poll.is-ready{border-style:dashed}
.ds .ds-meet__poll-option.is-correct{border-color:var(--ds-success);background:var(--ds-success-soft)}
.ds .ds-meet__poll-verdict{font-size:12px;line-height:16px;font-weight:600}
.ds .ds-meet__poll-verdict.is-right{color:var(--ds-success)}
.ds .ds-meet__poll-verdict.is-wrong{color:var(--ds-danger)}
/* 1.5.236 (brandbook 3.118). The certificate of a participant - an A4 landscape sheet on the page (the proportion of the sheet): the
   band of the colour of the menu with the lockup and the number, the name big, the webinar in quotes, the facts in a row, two
   signatures over thin lines. «Печать» over it; the print is the sheet alone (ds_print.css). */
.ds .ds-certificate-page{align-items:center;padding-top:var(--ds-space-6)}
.ds .ds-certificate-page__bar{display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-space-3);width:min(1080px,100%)}
.ds .ds-certificate{display:flex;flex-direction:column;width:min(1080px,100%);aspect-ratio:297/210;overflow:hidden;border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);box-shadow:var(--ds-shadow-3);color:var(--ds-ink)}
.ds .ds-certificate__band{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);padding:var(--ds-space-5) var(--ds-space-7);
  background:var(--ds-sidebar);color:var(--ds-side-ink)}
.ds .ds-certificate__number{font-size:13px;line-height:18px;font-variant-numeric:tabular-nums;color:var(--ds-side-ink-muted)}
.ds .ds-certificate__body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-space-2);flex:1 1 auto;
  padding:var(--ds-space-6) var(--ds-space-8);text-align:center}
.ds .ds-certificate__kicker{margin:0;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-brand)}
.ds .ds-certificate__name{margin:var(--ds-space-2) 0 0;font-size:40px;line-height:48px;font-weight:700;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-certificate__company{margin:0;font-size:16px;line-height:22px;color:var(--ds-ink-muted)}
.ds .ds-certificate__text{margin:var(--ds-space-4) 0 0;font-size:16px;line-height:22px;color:var(--ds-ink-muted)}
.ds .ds-certificate__title{margin:0;max-width:760px;font-size:24px;line-height:32px;font-weight:600;color:var(--ds-ink);overflow-wrap:anywhere}
.ds .ds-certificate__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ds-space-3) var(--ds-space-7);margin:var(--ds-space-5) 0 0}
.ds .ds-certificate__facts div{display:flex;flex-direction:column;gap:2px}
.ds .ds-certificate__facts dt{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
.ds .ds-certificate__facts dd{margin:0;font-size:15px;line-height:20px;font-weight:600}
.ds .ds-certificate__foot{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-8);padding:0 var(--ds-space-8) var(--ds-space-7)}
.ds .ds-certificate__foot div{display:flex;flex-direction:column;gap:4px;padding-top:var(--ds-space-2);border-top:1px solid var(--ds-line)}
.ds .ds-certificate__sign{font-size:15px;line-height:20px;font-weight:600}
.ds .ds-certificate__foot small{font-size:12px;line-height:16px;color:var(--ds-ink-muted)}
@media (max-width:720px){
  .ds .ds-certificate{aspect-ratio:auto}
  .ds .ds-certificate__band{padding:var(--ds-space-4)}
  .ds .ds-certificate__number{display:none}
  .ds .ds-certificate__body{padding:var(--ds-space-6) var(--ds-space-4)}
  .ds .ds-certificate__name{font-size:28px;line-height:34px}
  .ds .ds-certificate__title{font-size:19px;line-height:26px}
  .ds .ds-certificate__foot{grid-template-columns:1fr;gap:var(--ds-space-4);padding:0 var(--ds-space-4) var(--ds-space-5)}
  .ds .ds-certificate-page__bar{flex-direction:column;align-items:stretch}
}
/* 1.5.236 (brandbook 3.118). «Повтор вебинара …» on the card of a repeat - a soft plate of the brand: what it repeats (a link),
   the invitations sent, «Пригласить зарегистрированных на прошлый · N». */
.ds .ds-meet-again{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-2) var(--ds-space-4);
  padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);background:var(--ds-brand-soft);font-size:14px;line-height:20px}
/* 1.5.237 (brandbook 3.119). «Трансляция наружу»: in the bar of the room «Трансляция · YouTube» - the pill of the air that goes (the
   red of a recording that goes); on the card - three lines of a platform, the address of its server and its key, the streams that
   went in a list. «Календарь» of the registers - the link and three lines of how to subscribe. */
.ds .ds-meet__streaming{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--ds-radius-pill);
  background:var(--ds-danger);color:var(--ds-on-color);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.ds .ds-meet__streaming::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ds-on-color);animation:ds-meet-blink 1.6s var(--ds-ease) infinite}
.ds .ds-meet__streaming[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ds .ds-meet__streaming::before{animation:none}}
.ds .ds-meet__control--stream[aria-pressed="true"] .ds-meet__icon{background:var(--ds-danger);color:var(--ds-on-color)}
.ds .ds-meet-stream{scroll-margin-top:96px}
.ds .ds-meet-calendar{width:min(560px,calc(100vw - 32px))}
.ds .ds-meet-stream__form{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.ds .ds-meet-stream__row{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(160px,260px);gap:var(--ds-space-3)}
.ds .ds-meet-stream__list{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:var(--ds-space-4) 0 0;padding:var(--ds-space-3) 0 0;
  border-top:1px solid var(--ds-line-soft);list-style:none;font-size:14px;line-height:20px}
.ds .ds-meet-stream__list li{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-3)}
@media (max-width:720px){.ds .ds-meet-stream__row{grid-template-columns:1fr;padding-bottom:var(--ds-space-3);border-bottom:1px solid var(--ds-line-soft)}}
/* the words over the fields once, over the first line (a phone keeps them over each line) */
@media (min-width:721px){.ds .ds-meet-stream__row + .ds-meet-stream__row .ds-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.ds .ds-meet-calendar__how{display:flex;flex-direction:column;gap:6px;margin:var(--ds-space-4) 0 0;padding:0 0 0 var(--ds-space-5);font-size:13px;line-height:19px;
  color:var(--ds-ink-muted)}
.ds .ds-meet-calendar__how b{color:var(--ds-ink);font-weight:600}
/* 1.5.238 (brandbook 3.120): the autowebinar - the recording on the stage as the air, the script of its polls and buttons */
.ds .ds-meet__auto{position:absolute;inset:var(--ds-space-4);z-index:2;width:calc(100% - 2*var(--ds-space-4));height:calc(100% - 2*var(--ds-space-4));
  object-fit:contain;border-radius:var(--ds-radius-lg);background:var(--ds-meet-plate)}
.ds .ds-meet__auto[hidden]{display:none}
.ds .ds-meet__stage[data-auto="on"] .ds-meet__grid,.ds .ds-meet__stage[data-auto="on"] .ds-meet__focus{visibility:hidden}
@media (max-width:720px){.ds .ds-meet__auto{inset:var(--ds-space-2);width:calc(100% - 2*var(--ds-space-2));height:calc(100% - 2*var(--ds-space-2))}}
.ds .ds-meet-auto{scroll-margin-top:96px}
.ds .ds-meet-auto__form{display:flex;flex-direction:column;gap:var(--ds-space-2)}
.ds .ds-meet-auto__title{margin:0 0 var(--ds-space-1);color:var(--ds-ink);font-weight:600}
.ds .ds-meet-auto__row{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);padding:var(--ds-space-2) 0;
  border-bottom:1px solid var(--ds-line-soft)}
.ds .ds-meet-auto__what{display:flex;align-items:center;gap:var(--ds-space-3);min-width:0}
.ds .ds-meet-auto__what>span:last-child{min-width:0;overflow-wrap:anywhere}
.ds .ds-meet-auto__minute{display:flex;flex:0 0 auto;align-items:center;gap:var(--ds-space-2)}
.ds .ds-meet-auto__minute .ds-control{width:96px}
/* 1.5.239 (brandbook 3.121): the transcript of a recording - its state under the player */
.ds .ds-meet-transcript{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2)}
/* 1.5.240 (brandbook 3.122): «Итоги встречи» under the recording - a draft of the model on the server */
.ds .ds-meet-summary{display:flex;flex-direction:column;gap:var(--ds-space-3);margin:var(--ds-space-4) 0 0;padding:var(--ds-space-4);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-surface-soft)}
.ds .ds-meet-summary__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3)}
.ds .ds-meet-summary__head h3{margin:0}
.ds .ds-meet-summary__head .ds-btn{margin-left:auto}
.ds .ds-meet-summary__text{margin:0;color:var(--ds-ink);line-height:22px}
.ds .ds-meet-summary__lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-space-4)}
.ds .ds-meet-summary__list h4{margin:0 0 var(--ds-space-2);font-size:13px;line-height:18px;color:var(--ds-ink-muted)}
.ds .ds-meet-summary__list ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 0 0 var(--ds-space-4);line-height:20px}
.ds .ds-meet-summary__list p{margin:0}
@media (max-width:720px){.ds .ds-meet-summary__lists{grid-template-columns:1fr}}