/* =============================================================================
   design-system.css — the bricks of the interface rulebook, in code.
   Owner-approved 2026-08-07; the rules live in .ai/design-system/RULEBOOK.md and
   this file is their only implementation. Re-dressed 2026-09-25 to the
   configurator design «c5». Since 2026-09-28 it carries no look of its own: the
   colours, the typeface and the sizes come from the theme
   (static/orderly/theme/<name>/, picked by THEME_EXO_2026 — theme/README.md).

   THREE INVARIANTS, all machine-checked by orderly/tests/test_design_system.py:

   1. Only tokens by meaning — var(--bg-*), var(--text-*), var(--border-*), the
      sizes. No hex, no font file, no step of a base scale (--teal-9 and the
      like): those live only in the theme, so a new look is a new theme folder.

   2. Every selector names a ds class — the `.ds` box or a `ds-*` brick. Not one
      bare element selector, not one override of a legacy brick (.button/
      .table-list/.table-form/.status-chip/.page-menu/.sidebar/.messages): a
      screen gets a brick by asking for it by class, never by accident.
      A brick works on any screen, inside a `.ds` box or not (28.09.2026: the
      screens are cleaned one by one). It starts with `:root `, which matches
      every element and weighs one class, as the `.ds ` it replaced did — so the
      2024 element rules of base.html (`a:hover`, `input:focus` …) never beat a
      brick, and nothing changed on the screens built before.

   3. Anything that sets `display` is paired with a [hidden] rule. This is not
      theory: it already broke in production once (see the comment in
      sitebase/templates/sitebase/execution.html) when an author's display:flex
      beat the browser's [hidden] and the red "saving is failing" strip hung
      permanently for the Execution team. The pairing lives at the bottom of
      this file and covers every brick at once.
   ============================================================================= */

/* The type and the ink reach only what the rulebook draws: a full-screen rulebook
   page, or the content block of a rulebook dialog inside the CRM shell. The shell
   itself (sidebar, menus) keeps its own look on every page. `ds-narrow` outside a
   `.ds` box is only a width. */
.ds.ds-full, .ds .ds-narrow {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A full-screen rulebook page (the configurator) owns its background; a page that
   lives inside the CRM shell keeps the shell's. */
.ds.ds-full { margin: 0; background: var(--bg-page); }
.ds.ds-full *, .ds.ds-full *::before, .ds.ds-full *::after { box-sizing: border-box; }
:root .ds-nw { white-space: nowrap; }
:root .ds-muted { color: var(--text-3); }
:root a.ds-a { color: var(--text-accent); text-decoration: none; text-underline-offset: 3px; }
:root a.ds-a:hover { text-decoration-line: underline; }
.ds.ds-full :where(button), .ds.ds-full :where(input), .ds.ds-full :where(select), .ds.ds-full :where(textarea) { font: inherit; color: inherit; }
.ds.ds-full input::placeholder, .ds.ds-full textarea::placeholder { color: var(--text-3); opacity: 1; }
.ds.ds-full input[type=checkbox], .ds.ds-full input[type=radio] { accent-color: var(--bg-accent); width: 15px; height: 15px; margin: 0; flex: none; }

/* digits line up under digits wherever a number is shown */
:root .ds-num, :root .ds-big, :root .ds-kpi-v { font-variant-numeric: tabular-nums lining-nums; }

/* A {% region %} declaration is bookkeeping, not layout: its wrapper must never
   break the grid or the flex row it sits in. */
:root .ds-region { display: contents; }

/* ============ BRICK: top crumbs (full-screen pages) ============ */
:root .ds-crumbs {
    height: 32px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: var(--text-3);
}
:root .ds-crumbs b { color: var(--text); font-weight: 700; letter-spacing: .08em; }
:root .ds-crumbs a { color: var(--text-2); text-decoration: none; }
:root .ds-crumbs a:hover { color: var(--text); }
:root .ds-crumbs .ds-sep { color: var(--border-strong); }

/* ============ BRICK: screen header (title + state + actions) ============ */
:root .ds-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 18px var(--space-6) var(--space-4);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}
:root .ds-head h1 {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--w-semibold);
    margin: 0;
    letter-spacing: -.015em;
    white-space: nowrap;
}
:root .ds-head-links { display: flex; gap: 20px; font-weight: 500; white-space: nowrap; }
:root .ds-head-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); align-self: center; }

/* ============ BRICK: section heading ============
   12px 600 in ordinary letters: capitals read slower, and nothing is below 12px
   (brandbook 28.09.2026; it was 11px capitals). */
:root .ds-cap {
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--w-semibold);
    color: var(--text-3);
}
:root .ds-sect {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--fs-xs);
    font-weight: var(--w-semibold);
    color: var(--text-3);
    margin: var(--space-6) 0 var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border);
}
:root .ds-sect .ds-n { color: var(--text); }

/* ============ BRICK: button ============
   ds-btn is THE action of a screen (filled, one per screen); ds-quiet is every
   other action; ds-plain is a link-like action that must not compete. */
:root .ds-btn {
    height: var(--h-control);
    padding: 0 14px;
    border: 1px solid var(--bg-accent);
    background: var(--bg-accent);
    color: var(--text-on-solid);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .005em;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
:root .ds-btn:hover { background: var(--bg-accent-hover); border-color: var(--bg-accent-hover); }
:root .ds-btn:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--text-on-solid); cursor: not-allowed; }
:root .ds-btn.ds-quiet { background: var(--bg-surface); color: var(--text); border-color: var(--border-control); font-weight: 500; }
:root .ds-btn.ds-quiet:hover { background: var(--bg-surface-3); }
:root .ds-btn.ds-quiet:disabled { color: var(--text-3); background: var(--bg-surface); }
:root .ds-btn.ds-plain { background: transparent; border-color: transparent; color: var(--text-3); font-weight: 400; }
:root .ds-btn.ds-plain:hover { background: var(--bg-surface-3); color: var(--text-2); }
:root .ds-btn.ds-danger { background: var(--bg-surface); color: var(--text-danger); border-color: var(--border-danger); }
/* Filled red is reserved for the ONE destructive action a confirm screen exists to
   ask about. Everywhere else a destructive control uses the outline form above, so
   that a page full of red never trains people to click through it. */
:root .ds-btn.ds-danger-solid { background: var(--bg-danger); border-color: var(--bg-danger); color: var(--text-on-solid); }
:root .ds-btn.ds-danger-solid:hover { background: var(--bg-danger-hover); border-color: var(--bg-danger-hover); }
:root .ds-btn.ds-sm { height: var(--h-control-sm); padding: 0 10px; font-size: var(--fs-sm); }
:root .ds-btn.ds-lg { height: var(--h-control-lg); padding: 0 20px; }
:root .ds-btn.ds-wide { width: 100%; }

/* ============ BRICK: field (label + input + ONE hint) ============
   `ds-label` is the same label on a form that has no ds-field around it. A whole
   Django form is `<div class="ds-form">{{ form.as_div }}</div>`: each field of it is
   a ds-field, its help text the hint, its mistake in red at the field (30.09.2026,
   instead of the 2024 table-form). */
:root .ds-field, :root .ds-form > div { margin-bottom: var(--space-3); }
/* Django writes the help text above the field; the rulebook puts the hint under it */
:root .ds-form > div { display: flex; flex-direction: column; align-items: flex-start; }
:root .ds-form .helptext { order: 1; margin-top: var(--space-1); }
/* a check box stands before its label, on one line */
:root .ds-form > div:has(> input[type=checkbox]) { flex-flow: row wrap; align-items: center; column-gap: var(--space-2); }
:root .ds-form > div:has(> input[type=checkbox]) > input { order: -1; }
:root .ds-form > div:has(> input[type=checkbox]) > label { margin-bottom: 0; }
:root .ds-form > div:has(> input[type=checkbox]) > .helptext,
:root .ds-form > div:has(> input[type=checkbox]) > .errorlist { flex-basis: 100%; }
:root .ds-form fieldset { border: 0; margin: 0; padding: 0; }
:root .ds-field > label, :root .ds-label, :root .ds-form > div > label, :root .ds-form legend {
    display: block;
    font-weight: 500;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    margin-bottom: 6px;
}
:root .ds-in {
    height: var(--h-control);
    width: 100%;
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    padding: 0 10px;
    font: inherit;
    background: var(--bg-surface);
    color: var(--text);
    outline: none;
    font-variant-numeric: tabular-nums lining-nums;
}
:root .ds-in.ds-in-num { text-align: right; }
:root textarea.ds-in { height: auto; min-height: 56px; padding: 7px 10px; resize: vertical; line-height: var(--lh-base); }
:root select.ds-in { padding: 0 6px 0 9px; }
/* the focus ring is 3:1 against the ground (WCAG 2.2); a pale glow was not */
:root .ds-in:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:root .ds-in[readonly], :root .ds-in:disabled { background: var(--bg-surface-2); color: var(--text-2); }
/* The hint is ONE short sentence. Anything longer belongs on the help page. */
:root .ds-hint, :root .ds-form .helptext { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-3); text-wrap: pretty; }
:root .ds-form .errorlist { list-style: none; margin: 0 0 var(--space-1); padding: 0; font-size: var(--fs-sm); color: var(--text-danger); }
:root .ds-src  { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); }

:root .ds-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
:root .ds-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

/* ============ BRICK: action bar ============ */
:root .ds-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin: var(--space-4) 0;
}

/* ============ BRICK: disclosure (the only way to fold rarely needed things) ============ */
:root .ds-disc {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    border: 0;
    background: none;
    padding: var(--space-2) 0;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: var(--text);
    text-align: left;
}
:root .ds-disc::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: rotate(-45deg);
    transition: transform .15s;
    margin: 0 3px;
}
:root .ds-disc[aria-expanded=true]::before { transform: rotate(45deg); }
:root .ds-disc.ds-disc-sm { font-weight: 400; color: var(--text-2); padding: var(--space-1) 0; font-size: var(--fs-sm); }

/* ============ BRICK: card ============ */
:root .ds-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
:root .ds-cardhead {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
}
:root .ds-cardhead .ds-cap { color: var(--text-2); }
:root .ds-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
}
:root .ds-kv dt { color: var(--text-2); }
:root .ds-kv dd { font-weight: 600; margin: 0; }

/* ============ BRICK: table ============
   A row is --h-row and the rule under it: the text line in the middle, the rest
   split above and below (brandbook 34 + 1; theme «classic» keeps c5's 36 + 1). */
:root .ds-tblwrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: auto;
    background: var(--bg-surface);
}
:root table.ds-tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
}
:root table.ds-tbl.ds-fixed { table-layout: fixed; }
:root table.ds-tbl th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-surface-2);
    text-align: left;
    font-weight: 500;
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    letter-spacing: .01em;
    color: var(--text-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
:root table.ds-tbl td {
    padding: calc((var(--h-row) - var(--lh-base)) / 2) var(--space-3);
    line-height: var(--lh-base);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums lining-nums;
}
/* the first column lines up with the card title: 16px from the card edge */
:root table.ds-tbl tr > td:first-child, :root table.ds-tbl tr > th:first-child { padding-left: var(--space-4); }
:root table.ds-tbl td.ds-num, :root table.ds-tbl th.ds-num { text-align: right; }
/* a number in any other table cell (the CRM lists): right edge, one line */
:root td.ds-num, :root th.ds-num { text-align: right; white-space: nowrap; }
/* a table whose cells carry long text (a comment, a link): it wraps between words
   (a word breaks only if it cannot fit alone; long URLs take .ds-break) instead of
   being cut, and the row grows from the top */
:root table.ds-tbl.ds-wrap th, :root table.ds-tbl.ds-wrap td { white-space: normal; }
:root table.ds-tbl.ds-wrap td { overflow: visible; text-overflow: clip; overflow-wrap: break-word; vertical-align: top; }
:root table.ds-tbl.ds-wrap td.ds-break { overflow-wrap: anywhere; }
:root table.ds-tbl.ds-wrap td.ds-num, :root table.ds-tbl.ds-wrap th.ds-num { white-space: nowrap; overflow-wrap: normal; }
/* a dense work table (many columns with inputs, «Ведение заказа»): tighter cells and the
   small font, so the whole table fits a 1280 px screen */
:root table.ds-tbl.ds-dense th, :root table.ds-tbl.ds-dense td { padding-left: var(--space-2); padding-right: var(--space-2); font-size: var(--fs-sm); }
:root table.ds-tbl tbody tr.ds-r:hover td { background: var(--bg-row-hover); }
:root table.ds-tbl tbody tr:last-child td { border-bottom: 0; }
:root table.ds-tbl tbody tr.ds-total td { font-weight: 600; background: var(--bg-surface-3); }
:root table.ds-tbl td.ds-sub { color: var(--text-2); }
:root table.ds-tbl td.ds-site { font-weight: 500; }
:root .ds-dash { color: var(--text-3); }
/* quality: a dot, filled for «Ценный», grey for the spares */
:root .ds-q { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; overflow: hidden; vertical-align: bottom; }
:root .ds-q::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }
:root .ds-q.ds-q-res::before { background: var(--border-strong); }
:root .ds-q span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .ds-tag {
    display: inline-block;
    font-size: var(--fs-xs);
    line-height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--bg-surface-3);
    color: var(--text-2);
    border: 1px solid var(--border);
    font-weight: 500;
}
:root .ds-tag.ds-tag-w { background: var(--bg-status-warning); color: var(--text-status-warning); border-color: var(--border-status-warning); }
:root .ds-tag + .ds-tag { margin-left: var(--space-1); }

/* ============ BRICK: metric tile ============ */
:root .ds-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 260px));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}
:root .ds-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}
:root .ds-tile .ds-k { font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--w-semibold); }
:root .ds-tile .ds-v { font-size: var(--fs-kpi); line-height: 1; font-weight: var(--w-semibold); letter-spacing: -.03em; margin-top: var(--space-3); font-variant-numeric: tabular-nums; }
:root .ds-tile .ds-s { font-size: var(--fs-sm); color: var(--text-3); }

/* ============ BRICKS: screen states ============ */
/* Empty: a phrase — what is not there — and the button to the next step (owner,
   28.09.2026: one brick for every empty list; not a dash, not a bare table head).
     <div class="ds-empty"><p>Свободных заказов нет.</p>
       <a class="ds-btn ds-quiet ds-sm" href="…">Открыть закреплённые</a></div> */
:root .ds-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    color: var(--text-2);
}
:root .ds-empty p { margin: 0; }

:root .ds-partial {
    background: var(--bg-warning-soft);
    border-left: 3px solid var(--border-warning);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
}

/* ============ BRICK: screen notice (why an action is unavailable) ============
   One line under the header, in words; the blocked control stays visible and
   disabled, so the person sees what is waiting and why. */
:root .ds-notice {
    padding: var(--space-3) var(--space-6);
    background: var(--bg-warning-soft);
    border-bottom: 1px solid var(--border-warning);
    color: var(--text);
}

/* ============ BRICK: toast (the short message after an action) ============ */
:root .ds-toasts {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 720px;
}
:root .ds-toast {
    background: var(--text);
    color: var(--text-on-solid);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    padding: var(--space-3) var(--space-4);
}
:root .ds-toast.ds-toast-error { background: var(--bg-danger); }

/* ============ BRICK: staging strip (test server only) ============ */
:root .ds-staging {
    background: var(--bg-warning-soft);
    color: var(--text-warning);
    border-bottom: 1px solid var(--border-warning);
    padding: 6px var(--space-4);
    text-align: center;
    font-weight: 600;
    font-size: var(--fs-sm);
}

/* ============ CONFIGURATOR «before»: parameters rail + result ============ */
:root .ds-work { display: grid; grid-template-columns: 420px 1fr; align-items: start; }
:root .ds-rail {
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 20px 20px 28px;
    min-height: 100%;
    align-self: stretch;
    margin: 0;
}
:root .ds-rail > .ds-cap { margin: 0 0 var(--space-2); }
:root .ds-f { display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: 6px 10px; padding: var(--space-1) 0; }
:root .ds-f > label, :root .ds-f > .ds-lbl { color: var(--text-2); }
:root .ds-f.ds-f-wide { grid-template-columns: 96px 1fr; }
:root .ds-f.ds-f-stack { grid-template-columns: 1fr; }
:root .ds-f.ds-f-check { grid-template-columns: 1fr auto; cursor: pointer; color: var(--text); }
:root .ds-f.ds-f-check > span { color: var(--text); }
:root .ds-err-msg { grid-column: 1 / -1; color: var(--text-danger); font-size: var(--fs-sm); line-height: var(--lh-sm); text-align: right; margin-top: -2px; }
:root .ds-f.ds-f-stack .ds-err-msg { text-align: left; }
:root .ds-f.ds-err .ds-in { border-color: var(--border-danger); background: var(--bg-danger-soft); }
:root .ds-hr { height: 1px; background: var(--border); margin: var(--space-3) 0; }
:root .ds-mm { display: grid; grid-template-columns: 1fr 108px 108px; gap: 6px 10px; align-items: center; padding: var(--space-1) 0; }
:root .ds-mm-h { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); text-align: right; padding-right: 11px; }
:root .ds-mm-rl { color: var(--text-2); }
:root .ds-fromtz { grid-column: 2 / 4; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); margin-top: -2px; }
:root .ds-mm .ds-err-msg { grid-column: 2 / 4; text-align: left; }
:root .ds-mm .ds-err-max { text-align: right; }
/* a note under a field: what the screen did or what the PM should know there */
:root .ds-note { grid-column: 1 / -1; color: var(--text-warning); font-size: var(--fs-sm); line-height: var(--lh-sm); }
:root .ds-note .ds-btn { margin-top: var(--space-1); }
:root .ds-note.ds-note-err { color: var(--text-danger); margin-bottom: var(--space-2); }
:root .ds-note-slot { display: contents; }
/* a number that fails its check, marked on the input itself (grid rows hold two) */
:root .ds-in.ds-in-err { border-color: var(--border-danger); background: var(--bg-danger-soft); }
:root .ds-fold { padding: 0 0 var(--space-1); }
:root .ds-fold .ds-f-stack { margin-top: 6px; }
/* «Язык площадки»: groups, «Остальные» with its languages in two columns (part 5) */
:root .ds-lang { display: grid; gap: 4px; }
:root .ds-lang label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
:root .ds-lang summary { cursor: pointer; }
:root .ds-lang summary label { vertical-align: middle; }
:root .ds-lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px;
    margin: 4px 0 0 22px; font-size: var(--fs-sm); }

:root .ds-cfg-main { padding: 20px var(--space-6) var(--space-8); min-width: 0; }
:root .ds-rbar { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: var(--space-4); }
:root .ds-rrow { display: grid; grid-template-columns: 184px 1.1fr 1fr auto; align-items: stretch; }
:root .ds-rrow > div { padding: var(--space-4) var(--space-4) 18px; }
:root .ds-rrow > div + div { border-left: 1px solid var(--border); }
:root .ds-rrow > .ds-span2 { grid-column: span 2; }
:root .ds-rrow > .ds-act { display: flex; align-items: center; grid-column: 4; }
:root .ds-big {
    font-size: var(--fs-big);
    font-weight: var(--w-semibold);
    line-height: 1;
    margin-top: var(--space-3);
    letter-spacing: -.03em;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
:root .ds-calc { font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); visibility: hidden; letter-spacing: 0; }
:root .ds-calc.ds-on { visibility: visible; }
:root .ds-ht { font-size: var(--fs-h2); line-height: 24px; font-weight: 600; color: var(--text-warning); }
:root .ds-ht-text { margin-top: 10px; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
:root .ds-ht.ds-ht-next { margin-top: var(--space-3); font-size: var(--fs-base); line-height: var(--lh-base); }
:root .ds-sug {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--border);
    background: var(--bg-surface-2);
    border-radius: 8px;
    padding: 9px 10px 10px;
}
:root .ds-sug > div { flex: 1; min-width: 0; }
:root .ds-sug b { color: var(--text); font-weight: 600; white-space: nowrap; }
:root .ds-sug .ds-muted { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); margin-top: 2px; }
:root .ds-calm { margin: 0; color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
:root .ds-calm b { color: var(--text-success); font-weight: 600; font-size: var(--fs-base); }
/* the slim bar: a zero-height sticky dock, so it overlays the table instead of
   pushing it; it shows only once the full bar has scrolled out of view */
:root .ds-rmini-dock { position: sticky; top: 0; height: 0; z-index: 6; }
:root .ds-rmini {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-2) 0 var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-bar);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
:root .ds-rmini.ds-on { opacity: 1; transform: none; pointer-events: auto; }
:root .ds-rmini-v { font-size: 22px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -.02em; margin: 0 var(--space-1); font-variant-numeric: tabular-nums; }
:root .ds-rmini-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; padding-left: var(--space-2); border-left: 1px solid var(--border); line-height: 24px; }
:root .ds-rmini-t.ds-warn { color: var(--text-warning); }
:root .ds-rmini-t.ds-ok { color: var(--text-success); }
:root .ds-rmini-t .ds-calm { font-weight: 400; }
:root .ds-rfoot { border-top: 1px solid var(--border); padding: var(--space-1) var(--space-4); }
:root .ds-chk { padding: 2px 0 var(--space-3) 17px; }
:root .ds-chk table { border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
:root .ds-chk td { padding: 3px 0; color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
:root .ds-chk td + td { text-align: right; padding-left: var(--space-12); min-width: 96px; color: var(--text); }
:root .ds-chk tr.ds-sum td { border-top: 1px solid var(--border-strong); font-weight: 600; padding-top: 6px; color: var(--text); }

/* picked sites: fixed column widths as in c5 */
:root .ds-picks col.ds-c-dom { width: 17%; }
:root .ds-picks col.ds-c-q { width: 27%; }
:root .ds-picks col.ds-c-dr, :root .ds-picks col.ds-c-da { width: 6%; }
:root .ds-picks col.ds-c-iks { width: 8%; }
:root .ds-picks col.ds-c-link { width: 10%; }
:root .ds-picks col.ds-c-anc { width: 12%; }

/* ============ CONFIGURATOR «after»: the sites of a locked order (c5, second screen) ============ */
:root .ds-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--bg-status-progress);
    color: var(--text-status-progress);
    font-weight: 500;
    font-size: var(--fs-sm);
    white-space: nowrap;
}
:root .ds-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-status-progress); }
/* the bottom line («Пересобрать базу заказа») must clear the «Сообщить» button that
   floats over the lower right corner, or it cannot be clicked at the end of the page */
:root .ds-body2 { padding: 20px var(--space-6) 72px; }
:root .ds-kpis {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
}
:root .ds-kpi-row { display: flex; align-items: center; gap: 28px; }
:root .ds-kpi-v { font-size: var(--fs-kpi); font-weight: var(--w-semibold); letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
:root .ds-kpi-v small { font-size: 20px; color: var(--text-3); font-weight: 500; letter-spacing: 0; }
:root .ds-kpi-warn .ds-ht { font-size: var(--fs-base); line-height: var(--lh-base); }
:root .ds-kpi-warn .ds-ht-text { margin-top: 2px; }
/* «Сделано» as a bar: a <progress>, so the share needs no inline width */
:root progress.ds-bar { -webkit-appearance: none; appearance: none; display: block; width: 320px; height: 8px; border: 0; border-radius: 4px; background: var(--bg-surface-3); overflow: hidden; }
:root progress.ds-bar::-webkit-progress-bar { background: var(--bg-surface-3); border-radius: 4px; }
:root progress.ds-bar::-webkit-progress-value { background: var(--bg-success); border-radius: 4px; }
:root progress.ds-bar::-moz-progress-bar { background: var(--bg-success); border-radius: 4px; }
:root .ds-tabs { display: flex; align-items: center; gap: var(--space-1); padding: 6px var(--space-2) 0 var(--space-1); border-bottom: 1px solid var(--border); background: var(--bg-surface); }
:root .ds-tab {
    border: 0;
    background: none;
    padding: 10px var(--space-3) 11px;
    cursor: pointer;
    color: var(--text-2);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    white-space: nowrap;
}
:root .ds-tab:hover { color: var(--text); }
:root .ds-tab.ds-on { color: var(--text); border-bottom-color: var(--bg-accent); }
:root .ds-tab .ds-cnt { font-size: var(--fs-xs); line-height: 18px; color: var(--text-3); background: var(--bg-surface-3); padding: 0 7px; border-radius: 9px; font-weight: 500; font-variant-numeric: tabular-nums; }
:root .ds-tabs .ds-search { margin-left: auto; width: 420px; margin-bottom: 6px; font-size: var(--fs-sm); }
:root .ds-tabs .ds-search.ds-off { visibility: hidden; }
:root .ds-pad { padding: 18px var(--space-4) 20px; }
:root .ds-selbar { padding: 10px var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-surface-2); }
:root .ds-selbar-acts { display: flex; align-items: center; gap: var(--space-2); }
:root .ds-selbar-acts > b { font-weight: 500; margin-right: var(--space-2); }
:root .ds-selbar .ds-hint { margin-top: 6px; }
/* the table: c5 widths, 10px cell sides, the checkbox column hugs the site */
:root .ds-after col.ds-c-cb { width: 32px; }
:root .ds-after col.ds-c-dom { width: 150px; }
:root .ds-after col.ds-c-q { width: 258px; }
:root .ds-after col.ds-c-dr, :root .ds-after col.ds-c-da { width: 46px; }
:root .ds-after col.ds-c-iks { width: 64px; }
:root .ds-after col.ds-c-link { width: 84px; }
:root .ds-after col.ds-c-anc { width: 112px; }
:root .ds-after col.ds-c-st { width: 200px; }
:root .ds-after col.ds-c-team { width: 78px; }
:root .ds-after col.ds-c-when { width: 100px; }
:root table.ds-after td, :root table.ds-after th { padding-left: 10px; padding-right: 10px; }
:root table.ds-after tr > td:first-child, :root table.ds-after tr > th:first-child { padding-left: var(--space-4); }
:root table.ds-after .ds-cb { padding-right: 0; text-overflow: clip; }
:root table.ds-after .ds-st { padding-right: 0; }
:root table.ds-after .ds-cb input { vertical-align: middle; }
:root .ds-pill { display: inline-block; font-size: var(--fs-xs); line-height: 20px; padding: 0 var(--space-2); border-radius: 10px; background: var(--bg-surface-3); color: var(--text-2); font-weight: 500; }
:root .ds-pill.ds-pill-done { background: var(--bg-status-success); color: var(--text-status-success); }
:root .ds-pill.ds-pill-w { background: var(--bg-status-warning); color: var(--text-status-warning); }
:root .ds-lnk { color: var(--text-2); text-decoration: none; }
:root .ds-lnk:hover { color: var(--text-accent); }
/* row states: ticked / на замене / удалена из отчёта — a tint for the whole row and
   an edge on the left, so a ticked row is not taken for a done one */
:root table.ds-tbl tbody tr.ds-r.ds-sel td { background: var(--bg-row-selected); }
:root table.ds-tbl tbody tr.ds-r.ds-sel td:first-child { box-shadow: inset 3px 0 0 var(--border-row-selected); }
:root table.ds-tbl tbody tr.ds-r.ds-sel:hover td { background: var(--bg-row-selected-hover); }
:root table.ds-tbl tbody tr.ds-r.ds-repl td { background: var(--bg-row-replace); }
:root table.ds-tbl tbody tr.ds-r.ds-repl:hover td { background: var(--bg-row-replace-hover); }
:root table.ds-tbl tbody tr.ds-r.ds-repl td:first-child { box-shadow: inset 3px 0 0 var(--border-row-replace); }
:root table.ds-tbl tbody tr.ds-r.ds-gone td { background: var(--bg-row-removed); }
:root table.ds-tbl tbody tr.ds-r.ds-gone:hover td { background: var(--bg-row-removed-hover); }
:root table.ds-tbl tbody tr.ds-r.ds-gone td:first-child { box-shadow: inset 3px 0 0 var(--border-row-removed); }
:root table.ds-tbl tr.ds-gone td, :root table.ds-tbl tr.ds-gone .ds-lnk, :root table.ds-tbl tr.ds-gone .ds-pill { color: var(--text-3); }
:root table.ds-tbl tr.ds-gone .ds-lnk { text-decoration: line-through; }
:root .ds-none { display: flex; align-items: center; gap: var(--space-3); color: var(--text-2); }
/* a removed link with «Вернуть» next to it, in one cell */
:root .ds-lk { display: flex; align-items: center; gap: var(--space-2); }
:root .ds-lk .ds-lnk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root .ds-lk .ds-btn { margin: -5px 0; flex: none; }
/* top-up: the spares first (the quickest answer to the team), then new sites */
:root .ds-spares { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); margin: 0 0 var(--space-4); border-bottom: 1px solid var(--border); }
:root .ds-spares-t { margin-top: 6px; }
:root .ds-topup { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
:root .ds-topup label { color: var(--text-2); }
:root .ds-topup .ds-in { width: 88px; }
:root .ds-topup-err { text-align: left; margin-top: 6px; }
:root .ds-topup-full { margin: 0; color: var(--text-2); }
/* the sites a top-up will give, then «Отмена» / «Выдать N сайтов» on the right */
:root .ds-topup-list { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: 8px; }
:root .ds-topup-list .ds-actions { justify-content: flex-end; margin: var(--space-3); }
:root .ds-bottom { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--fs-sm); }
:root .ds-bottom .ds-right { margin-left: auto; }

/* ============ BRICKS FOR THE CRM SCREENS (28.09.2026) ============
   The hand-made styles of the CRM screens, counted and grouped (tests/
   style_ratchet.txt): each brick below replaces a style that repeats on several
   screens. Outside a `.ds` box a brick takes the CRM colours of the theme. */

/* ============ BRICK: callout — a note, a warning, an error on the page ============
   A tinted box with a line all round (brandbook: the thick left edge stays only on
   table rows). The tone says why it is there; no tone is a plain note. */
:root .ds-callout {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-3);
    color: var(--text);
}
:root .ds-callout.ds-callout-info { background: var(--bg-status-info); border-color: var(--border-status-info); }
:root .ds-callout.ds-callout-success { background: var(--bg-status-success); border-color: var(--border-status-success); }
:root .ds-callout.ds-callout-warning { background: var(--bg-warning-soft); border-color: var(--border-warning); }
:root .ds-callout.ds-callout-danger { background: var(--bg-danger-soft); border-color: var(--border-danger); }

/* ============ BRICK: box — a framed block of the page ============
   A card with room inside (ds-card has none and clips); `ds-box-soft` is the grey
   ground of a reference block («Что на этой странице»). Not «ds-panel»: that name
   is a tab panel of the configurator «after» screen, a hook with no look. */
:root .ds-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-3);
}
:root .ds-box.ds-box-soft { background: var(--bg-surface-2); }
/* a screenshot inside a block (a report's picture): never wider than its column */
:root .ds-shot { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
/* a line above the closing part of a block (the ratings under a release note) */
:root .ds-topline { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-3); }

/* ============ BRICK: more — a <details> opened when needed ============
   Put it on the <details>; add ds-box ds-box-soft for a framed one. */
:root .ds-more > summary { cursor: pointer; font-weight: var(--w-semibold); }

/* ============ BRICK: code — text as a machine wrote it (a log, a brief) ============ */
:root .ds-code {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 320px;
    overflow: auto;
}

/* ============ BRICK: chip — the state of a thing (brandbook, TRANSITION.md §4) ============
   Six tones by meaning: grey new, closed or cancelled · blue in work · green done ·
   amber waits for an action · light blue waits for an event · red only an error or a
   danger — overdue (owner, 28.09.2026). The text is the state in words, never a status
   number; an order's plaque comes from the status_chip filter. */
:root .ds-chip {
    display: inline-flex;
    align-items: center;
    height: var(--h-chip);
    padding: 0 var(--space-2);
    border: 1px solid var(--border-status-neutral);
    border-radius: var(--radius);
    background: var(--bg-status-neutral);
    color: var(--text-status-neutral);
    font-size: var(--fs-xs);
    line-height: var(--lh-xs);
    font-weight: var(--w-medium);
    white-space: nowrap;
    vertical-align: middle;
}
:root .ds-chip.ds-chip-progress { background: var(--bg-status-progress); border-color: var(--border-status-progress); color: var(--text-status-progress); }
:root .ds-chip.ds-chip-success { background: var(--bg-status-success); border-color: var(--border-status-success); color: var(--text-status-success); }
:root .ds-chip.ds-chip-warning { background: var(--bg-status-warning); border-color: var(--border-status-warning); color: var(--text-status-warning); }
:root .ds-chip.ds-chip-info { background: var(--bg-status-info); border-color: var(--border-status-info); color: var(--text-status-info); }
:root .ds-chip.ds-chip-danger { background: var(--bg-status-danger); border-color: var(--border-status-danger); color: var(--text-status-danger); }
/* in a dense table a long plaque wraps onto a second line (owner, 30.09.2026) */
:root table.ds-tbl.ds-dense .ds-chip { white-space: normal; height: auto; min-height: var(--h-chip); }

/* a cell or a row tinted by its state (how fresh a site's numbers are); the legend
   square next to a word repeats the tint */
:root .ds-tint-success, :root tr.ds-tint-success > td { background: var(--bg-status-success); }
:root .ds-tint-warning, :root tr.ds-tint-warning > td { background: var(--bg-warning-soft); }
:root .ds-tint-danger, :root tr.ds-tint-danger > td { background: var(--bg-danger-soft); }
:root .ds-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--border); border-radius: 2px; vertical-align: -1px; margin-right: var(--space-1); }

/* ============ BRICK: breakdown — one sum and its parts (RULEBOOK §9) ============
   Under the name of the thing; columns always «for what · fact · to pay · sum»; no
   prose in the rows — the rule of the sum is said once, in the screen's hint. */
:root table.ds-breakdown { margin: var(--space-1) 0 0; border-collapse: collapse; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-2); }
:root table.ds-breakdown td { padding: 0 var(--space-2) 0 0; border: 0; white-space: nowrap; }
:root table.ds-breakdown td.ds-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* a smaller metric tile, for a row of sums (payouts) */
:root .ds-tile.ds-sm { padding: var(--space-3) var(--space-4); }
:root .ds-tile.ds-sm .ds-v { font-size: var(--fs-title); letter-spacing: -.015em; margin-top: var(--space-1); }

/* ============ BRICK: meter — a share drawn as a bar ============
   A native <progress value max>, so the share needs no inline width (ds-bar is the
   fixed «Сделано» bar of the configurator). Grey: a number is not an action; the
   tone says good / watch / too much. */
:root progress.ds-meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--radius-sm); background: var(--bg-surface-3); overflow: hidden; }
:root progress.ds-meter::-webkit-progress-bar { background: var(--bg-surface-3); border-radius: var(--radius-sm); }
:root progress.ds-meter::-webkit-progress-value { background: var(--text-3); border-radius: var(--radius-sm); }
:root progress.ds-meter::-moz-progress-bar { background: var(--text-3); border-radius: var(--radius-sm); }
:root progress.ds-meter.ds-meter-success::-webkit-progress-value { background: var(--bg-success); }
:root progress.ds-meter.ds-meter-success::-moz-progress-bar { background: var(--bg-success); }
:root progress.ds-meter.ds-meter-warning::-webkit-progress-value { background: var(--border-warning); }
:root progress.ds-meter.ds-meter-warning::-moz-progress-bar { background: var(--border-warning); }
:root progress.ds-meter.ds-meter-danger::-webkit-progress-value { background: var(--bg-danger); }
:root progress.ds-meter.ds-meter-danger::-moz-progress-bar { background: var(--bg-danger); }

/* ============ BRICK: numbers over a period, with their change (2026-10-07) ============
   «Как мы показываем данные» (owner-approved mockup kwork-design/final, «Статистика кворков»).
   - ds-delta: the change right after a number, small; ds-good / ds-bad — better / worse
     (not more / less), grey without either. The number before it is in the title (hover).
   - ds-glabel: one line over a group of numbers («За период»); ds-tilegroups: the groups of
     tiles side by side (a wide one and a narrow one); ds-unit: a small unit after a big number.
   - ds-fchips: one row of filters, a ds-fchip each with its grey count; ds-on — chosen.
   - table.ds-kw: a list whose row opens the row under it (ds-toggle, the row after it
     ds-kw-det); a title on one line cut with «…», a grey second line (ds-kw-meta); ds-kw-sep —
     the line before the second group of columns; ds-kw-dim — a row of grey numbers. On a
     phone the rows become cards: the numbers under the title, each with its column's name
     (data-label), no sideways scroll; an opened card shows each number before (ds-kw-was).
   - ds-bullet: the way to a goal — a bar with a tick at the goal (SVG 0–100).
   - ds-charts / ds-chart: small charts in a row sharing the days axis; the SVG box is
     280×64, the server draws the points; the axis starts at 0 (ds-chart-top — its top
     number). ds-chart-line — this period, ds-chart-was — the period before (dashed),
     ds-chart-bar — pieces by day, ds-chart-mark — one event (dashed, named once in ds-legend). */
:root .ds-delta { font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--text-3); letter-spacing: 0; white-space: nowrap; }
:root .ds-delta.ds-good { color: var(--text-success); }
:root .ds-delta.ds-bad { color: var(--text-danger); }
:root .ds-unit { font-size: .55em; font-weight: var(--w-medium); color: var(--text-3); margin-left: 2px; letter-spacing: 0; }
:root .ds-glabel { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 6px 2px; }
:root .ds-tilegroups { display: grid; grid-template-columns: 4fr 1fr; gap: var(--space-5); margin: var(--space-4) 0; }
:root .ds-tilegroups .ds-tiles { margin: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
:root .ds-tilegroups .ds-v { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
:root .ds-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
:root .ds-fchip { display: inline-flex; align-items: center; gap: 6px; height: var(--h-control-sm); padding: 0 11px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg-surface); color: var(--text); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
:root .ds-fchip .ds-cnt { color: var(--text-3); }
:root .ds-fchip .ds-cnt.ds-text-danger { color: var(--text-danger); font-weight: var(--w-semibold); }
:root .ds-fchip.ds-on { background: var(--bg-status-success); border-color: var(--border-status-success); color: var(--text-status-success); font-weight: var(--w-semibold); }
:root .ds-fchips .ds-reset { font-size: var(--fs-sm); color: var(--text-accent); text-decoration: underline; margin-left: var(--space-1); }
:root .ds-kwcard { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-surface); }
:root .ds-kwcard .ds-tblwrap { border: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
:root table.ds-tbl.ds-kw { table-layout: fixed; }
:root table.ds-kw col.ds-kw-c0 { width: 36px; }
:root table.ds-kw col.ds-kw-cn { width: 120px; }
:root table.ds-kw td.ds-num { padding-left: var(--space-1); text-overflow: clip; }
:root table.ds-kw thead tr:last-child th { white-space: normal; vertical-align: bottom; }
:root table.ds-kw thead tr.ds-kw-g th { white-space: normal; position: static; background: var(--bg-surface); border-bottom: 0; font-weight: 400; color: var(--text-3); }
:root table.ds-kw thead tr.ds-kw-g th.ds-kw-gl { border-bottom: 1px solid var(--border); }
:root table.ds-kw .ds-kw-sep { border-left: 1px solid var(--border); }
:root table.ds-kw th.ds-kw-sort { color: var(--text); font-weight: var(--w-semibold); }
:root table.ds-kw td.ds-kw-chev { padding-right: 0; color: var(--text-3); }
:root table.ds-kw .ds-kw-chev span { display: inline-block; }
:root table.ds-kw tr.ds-toggle[aria-expanded="true"] .ds-kw-chev span { color: var(--text); transform: rotate(90deg); }
:root table.ds-kw tr.ds-toggle[aria-expanded="true"] td { background: var(--bg-surface-2); border-bottom-color: transparent; }
:root .ds-kw-title { font-weight: var(--w-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .ds-kw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
:root .ds-kw-meta > * + *::before { content: "·"; margin-right: var(--space-2); color: var(--text-3); }
:root .ds-kw-mk-outsider { color: var(--text-danger); }
:root .ds-kw-n { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: var(--space-2); }
:root .ds-kw-n .ds-delta { min-width: 48px; text-align: right; }
:root table.ds-kw tr.ds-kw-dim td, :root table.ds-kw tr.ds-kw-dim .ds-kw-title { color: var(--text-3); font-weight: 400; }
:root table.ds-kw tr.ds-kw-det td { padding: 2px var(--space-3) var(--space-5) 48px; background: var(--bg-surface-2); white-space: normal; overflow: visible; }
:root .ds-kw-ctx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
:root .ds-kw-ctx p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
:root .ds-bullet { flex: none; display: inline-block; width: 40px; height: 8px; vertical-align: middle; overflow: visible; }
:root .ds-bullet.ds-wide { width: 140px; }
:root .ds-bullet .ds-bullet-bg { fill: var(--bg-surface-3); }
:root .ds-bullet .ds-bullet-now { fill: var(--text-success); }
:root .ds-bullet .ds-bullet-goal { stroke: var(--text); stroke-width: 2; }
:root .ds-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-xs); color: var(--text-3); }
:root .ds-legend span::before { content: ""; display: inline-block; width: 18px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--text-success); }
:root .ds-legend .ds-lg-was::before { border-top: 1.5px dashed var(--text-3); }
:root .ds-legend .ds-lg-mark::before { width: 0; height: 12px; border-top: 0; border-left: 1px dashed var(--text); }
:root .ds-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5) var(--space-8); }
:root .ds-chart-hd { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
:root .ds-chart-hd > :first-child { color: var(--text-2); margin-right: auto; }
:root .ds-chart-hd b { font-weight: var(--w-semibold); }
:root .ds-kw-was { display: none; color: var(--text-3); font-size: var(--fs-xs); }
:root .ds-chart-plot { position: relative; height: 96px; }
:root .ds-chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
:root .ds-chart-top { position: absolute; left: 0; top: -10px; font-size: 11px; line-height: 14px; color: var(--text-3); background: var(--bg-surface-2); padding-right: 3px; }
:root .ds-chart-empty { position: absolute; left: 0; right: 0; top: 38px; text-align: center; font-size: var(--fs-xs); color: var(--text-2); }
:root .ds-chart .ds-chart-base { stroke: var(--border-strong); }
:root .ds-chart .ds-chart-line { fill: none; stroke: var(--text-success); stroke-width: 2; stroke-linejoin: round; }
:root .ds-chart .ds-chart-was { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
:root .ds-chart .ds-chart-bar { fill: var(--text-success); }
:root .ds-chart .ds-chart-mark { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 2; }
:root .ds-chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: var(--space-1); }
:root .ds-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); color: var(--text-2); border-top: 1px solid var(--border); }
:root table.ds-tbl tbody tr.ds-toggle { cursor: pointer; }
:root a.ds-tab { text-decoration: none; }
@media (max-width: 768px) {
    :root .ds-tilegroups { grid-template-columns: 1fr; gap: var(--space-3); }
    :root .ds-tilegroups .ds-tiles { grid-template-columns: 1fr 1fr; }
    :root .ds-fchips { flex-wrap: nowrap; overflow-x: auto; }
    :root .ds-kwcard .ds-tblwrap { overflow: visible; }
    :root table.ds-kw, :root table.ds-kw tbody { display: block; }
    :root table.ds-kw thead { display: none; }
    :root table.ds-kw tr.ds-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
    :root table.ds-kw tr.ds-toggle td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; overflow: visible; white-space: normal; }
    :root table.ds-kw tr.ds-toggle td.ds-kw-chev { display: none; }
    :root table.ds-kw tr.ds-toggle td:nth-child(2) { grid-column: 1 / -1; }
    :root table.ds-kw .ds-kw-title { white-space: normal; }
    :root table.ds-kw .ds-kw-meta { flex-wrap: wrap; white-space: normal; }
    :root table.ds-kw tr.ds-toggle td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; line-height: 14px; color: var(--text-3); }
    :root table.ds-kw .ds-kw-n { flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--space-1); }
    :root table.ds-kw .ds-kw-n .ds-delta { min-width: 0; }
    :root table.ds-kw tr.ds-kw-det:not([hidden]) { display: block; border-bottom: 1px solid var(--border); }
    :root table.ds-kw tr.ds-kw-det td { display: block; padding: var(--space-1) var(--space-4) var(--space-4); }
    :root .ds-chart-hd { flex-wrap: wrap; }
    :root table.ds-kw tr.ds-toggle[aria-expanded="true"] .ds-kw-was { display: block; flex-basis: 100%; }
}

/* ============ BRICK: pager — «Страница N из M» and its links ============ */
:root .ds-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 768px) {
    :root .ds-pager { justify-content: center; }
}

/* ============ BRICK: the numbers on top of an overview («Новые сайты» of the main admin) ============ */
/* four numbers in a row, two on a phone; the first may be big (ds-big), the rest ds-stat-v */
:root .ds-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); max-width: 1100px; }
:root .ds-stat-v { font-size: var(--fs-title); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    :root .ds-stats { grid-template-columns: 1fr 1fr; }
}
/* a column of a sortable table head: the words stay as in any head, the link is the click */
:root table.ds-tbl th a.ds-th-sort { color: inherit; text-decoration: none; }
:root .ds-w640 { max-width: 640px; }
:root .ds-w900 { max-width: 900px; }

/* ============ BRICKS: a line of things, columns ============ */
/* things in one line that wrap on a narrow screen (a filter, a form, a summary) */
:root .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
:root .ds-row.ds-row-loose { gap: var(--space-2) var(--space-4); }
:root .ds-row.ds-row-between { justify-content: space-between; }
/* blocks side by side that stack on a narrow screen (a form next to its reference) */
:root .ds-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-6); }
:root .ds-cols > * { flex: 1 1 320px; min-width: 0; }
/* a form that sits inside a line of text or a table cell */
:root .ds-inline { display: inline; }

/* Return-for-rework panel (2026-09-26): the reason block on the project manager
   and Execution screens, plus the return forms. Amber when it asks for action,
   plain (`ds-ret-calm`) for a form. Placed on legacy CRM pages inside a `.ds` box. */
:root .ds-ret { background: var(--bg-warning-soft); border: 1px solid var(--border-warning); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-3); max-width: 760px; color: var(--text); font-size: var(--fs-base); line-height: var(--lh-base); }
:root .ds-ret.ds-ret-calm { background: var(--bg-surface); border-color: var(--border); }
:root .ds-ret-h { display: block; font-weight: 600; margin-bottom: var(--space-1); }
:root .ds-ret-t { white-space: pre-wrap; overflow-wrap: anywhere; }
:root .ds-ret-m { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); }
:root .ds-ret .ds-hint { margin-bottom: var(--space-2); }
:root .ds-ret .ds-err-msg { text-align: left; margin-top: var(--space-1); }
:root .ds-ret .ds-btn { margin-top: var(--space-2); }

/* ============ BRICK: page header — one on every CRM screen (owner, 28.09.2026) ============
   Drawn by orderly/base_header.html, filled by the screen through its blocks (the
   approved mockup «header-menu»). Row 0: «← Заказы» — the way one level up — on the
   left, «Как работает этот экран» on the right; the row is not there when both are
   missing. Row 1: the title and the state plaque; the actions on the right, THE action
   (ds-btn, filled) the last one; when the room runs out they wrap below, still on the
   right. Then the tabs of a list and its filter line. One line under the header. */
:root .ds-ph { padding: var(--space-5) var(--space-6) 0; border-bottom: 1px solid var(--border); background: var(--bg-page); }
:root .ds-ph-menu { width: auto; padding: 0 var(--space-3); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
:root .ds-ph-r0 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 6px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
:root .ds-ph-r0:not(:has(a)) { display: none; }
:root .ds-ph-r0 a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
:root .ds-ph-r0 a:hover { color: var(--text-accent-hover); }
:root .ds-ph-help { margin-left: auto; }
/* «(откроется в новой вкладке)» — the screen has a field with typed text */
:root .ds-ph-note { color: var(--text-3); }
:root .ds-ph-r1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: 14px; }
:root .ds-ph:has(.ds-tabs) .ds-ph-r1 { padding-bottom: 6px; }
:root .ds-ph-title { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-semibold); }
:root .ds-ph-acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
:root .ds-ph .ds-tabs { background: transparent; padding-left: 0; margin-top: var(--space-2); }
:root .ds-ph .ds-tab { text-decoration: none; }
:root .ds-ph-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 10px 0 12px; }
:root .ds-ph-filters:not(:has(select)):not(:has(button)):not(:has(a)):not(:has(input:not([type=hidden]))) { display: none; }
:root .ds-ph-filters label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
:root .ds-ph-filters select { width: auto; height: var(--h-control-sm); padding: 0 6px; font-size: var(--fs-sm); }
@media (max-width: 768px) {
    :root .ds-ph { padding: var(--space-2) var(--space-2) 0; }
}

/* ============ BRICK: «Ещё ▾» — the rare actions of a page header ============
   The more_menu filter (templatetags/custom_filters.py) folds two actions or more into
   it; a single one stays a button — a menu of one item only hides it. The items are
   written as ordinary `ds-btn ds-quiet ds-sm` and become menu lines here. Never the
   main action, never an everyday one. design-system.js closes it on a click outside
   and on Esc. */
:root .ds-menu { position: relative; }
:root .ds-menu > summary { list-style: none; }
:root .ds-menu > summary::-webkit-details-marker { display: none; }
:root .ds-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: 20;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: var(--space-1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
:root .ds-menu-list .ds-btn { width: 100%; justify-content: flex-start; border-color: transparent; background: transparent; }
:root .ds-menu-list .ds-btn:hover { background: var(--bg-surface-3); }

/* ============ BRICK: confirm dialog — instead of confirm() (design-system.js) ============
   Only for money and what cannot be undone. The text says what and how many; the
   buttons name the action. The yes button is red only for a dangerous action — the one
   place of the site where a button is red (owner, 28.09.2026). */
:root .ds-dialog {
    margin: auto;  /* in the middle of the screen: base.html's reset «* { margin: 0 }» takes the browser's own */
    width: min(480px, calc(100% - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    color: var(--text);
    box-shadow: var(--shadow-pop);
}
:root .ds-dialog::backdrop { background: var(--bg-overlay); }
:root .ds-dialog-box { padding: var(--space-5) var(--space-6); }
:root .ds-dialog-text { margin: 0 0 var(--space-5); font-size: var(--fs-base); line-height: var(--lh-base); white-space: pre-line; }
:root .ds-dialog-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
/* a radio or check box on one line with its words (base.html gives every input the 32px of a field) */
:root .ds-choice input { height: auto; padding: 0; margin: 0 var(--space-2) 0 0; vertical-align: middle; }
/* a window with a form and pictures in it (mini-tutorial of «Новые сайты», 16.10.2026) */
:root .ds-dialog.ds-dialog-wide { width: min(660px, calc(100% - 32px)); }
/* screenshots attached in a form, three in a row, each with «Убрать снимок N» under it */
:root .ds-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
:root .ds-thumbs img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* «Как сделать ссылку» (owner-approved 16.10.2026): the window as wide as its mock-up; the example
   page the system marked with frames — its top, framed; a recording before it plays — a dark 16:9
   box with «Смотреть видео · 2:41» */
:root .ds-dialog.ds-dialog-xl { width: min(760px, calc(100% - 32px)); }
:root .ds-sample { display: block; width: 100%; max-height: 320px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: var(--radius); }
:root .ds-video { display: flex; align-items: center; justify-content: center; max-width: 420px; aspect-ratio: 16 / 9; background: var(--bg-toast); border-radius: var(--radius); }
:root .ds-video video { display: block; width: 100%; height: 100%; border-radius: var(--radius); }

/* ============ BRICK: the left menu's frame (owner, 28.09.2026; mockup header-menu) ============
   aside.sidebar keeps its 2024 look (base.html); ds-nav adds the fixed width with long
   items wrapping, the marked item of the open screen, and the foot: «Документация»,
   the user in three lines, «ru · en». */
:root .ds-nav { display: flex; flex-direction: column; width: var(--w-sidebar); min-width: var(--w-sidebar); white-space: normal; }
:root .ds-nav li.ds-nav-on { background: var(--bg-nav-hover); box-shadow: inset 3px 0 0 var(--border-nav-active); }
:root .ds-nav-foot { margin-top: auto; padding-top: var(--space-3); }
:root .ds-nav-help { border-top: 1px solid var(--border-nav); padding: var(--space-2) 0; }
:root .ds-nav-help a { display: block; padding: 0.45rem 0.6rem; }
:root .ds-nav-user { border-top: 1px solid var(--border-nav); padding: var(--space-3) 0.6rem 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-nav-2); }
:root .ds-nav-user p { margin-top: 3px; }
:root .ds-nav-who { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); color: var(--text-nav); }
:root .ds-nav-who b { font-size: var(--fs-base); }
:root .ds-nav-out, :root .ds-nav-out:hover, :root .ds-nav-out:active { padding: 0; border: 0; background: none; box-shadow: none; transform: none; color: var(--text-nav-2); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; }
:root .ds-nav-out:hover { color: var(--text-nav); }
:root .ds-nav-warn { color: var(--text-nav-warning); font-weight: var(--w-semibold); }
:root .ds-nav-lang { padding: var(--space-2) 0.6rem 0; font-size: var(--fs-xs); color: var(--text-nav-2); }
:root .ds-nav-lang b { color: var(--text-nav); }

/* ============ BRICK: the documentation section (orderly/docs.html, 28.09.2026) ============
   The table of contents of the reader's role on the left with the search, the page on
   the right. The page is markdown turned into bare tags, so its prose is styled here,
   under ds-doc-text: headings, lists, tables, a quote. One column on a phone. */
:root .ds-doc { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: var(--space-8); align-items: start; }
:root .ds-doc-toc { position: sticky; top: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
:root .ds-doc-toc h2 { margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--w-semibold); color: var(--text-3); }
:root .ds-doc-toc ul { list-style: none; margin: 0; padding: 0; }
:root .ds-doc-toc li a { display: block; padding: 5px var(--space-2); border-radius: var(--radius); color: var(--text); text-decoration: none; }
:root .ds-doc-toc li a:hover { background: var(--bg-surface-3); }
:root .ds-doc-toc li a.ds-on { background: var(--bg-surface-3); font-weight: var(--w-semibold); }
:root .ds-doc-search { display: flex; gap: var(--space-2); }
:root .ds-doc-search input { flex: 1; min-width: 0; height: var(--h-control-sm); font-size: var(--fs-sm); }
:root .ds-doc-text { font-size: var(--fs-base); line-height: var(--lh-base); overflow-wrap: break-word; }
:root .ds-doc-text h2 { margin: var(--space-6) 0 var(--space-2); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-semibold); }
:root .ds-doc-text h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-base); font-weight: var(--w-semibold); }
:root .ds-doc-text > :first-child { margin-top: 0; }
:root .ds-doc-text p { margin: 0 0 var(--space-3); }
:root .ds-doc-text ul, :root .ds-doc-text ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
:root .ds-doc-text ul > li, :root .ds-rich ul > li { list-style: disc; }
:root .ds-doc-text ol > li, :root .ds-rich ol > li { list-style: decimal; }
:root .ds-doc-text li { margin-bottom: var(--space-1); }
:root .ds-doc-text table { border-collapse: collapse; margin: 0 0 var(--space-4); width: 100%; }
:root .ds-doc-text th, :root .ds-doc-text td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
:root .ds-doc-text th { background: var(--bg-surface-2); font-weight: var(--w-semibold); }
:root .ds-doc-text blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4); border-left: 3px solid var(--border-strong); color: var(--text-2); }
:root .ds-doc-text code { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--bg-surface-2); font-size: var(--fs-sm); }
:root .ds-doc-text pre { overflow-x: auto; padding: var(--space-3); background: var(--bg-surface-2); border-radius: var(--radius); margin: 0 0 var(--space-3); }
:root .ds-doc-text pre code { padding: 0; background: none; }
:root .ds-doc-text a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
:root .ds-doc-found { list-style: none; padding: 0; }
:root .ds-doc-found p { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
:root .ds-doc-back { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--border); }
@media (max-width: 768px) {
    :root .ds-doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    :root .ds-doc-toc { position: static; }
}

/* ============ BRICK: phone cards — an order list on a narrow screen ============
   MOBILE_LIST_CARDS (owner, 05.10.2026, variant «только списки»): the shell carries
   .ds-mcards, a list table carries .ds-cards. Below 769 px every row is a card of
   «column — value» lines (the column from the cell's data-label), so nothing scrolls
   sideways; a number of the head (Sales «Сумма» and its total) stays above the cards.
   The room at the page foot for «Сообщить» is the shell's (base.html). */
@media (max-width: 768px) {
    :root .ds-mcards .ds-tblwrap:has(> table.ds-cards) { border: 0; border-radius: 0; background: transparent; overflow: visible; }
    :root .ds-mcards table.ds-tbl.ds-cards, :root .ds-mcards table.ds-tbl.ds-cards tbody { display: block; background: transparent; }
    :root .ds-mcards table.ds-tbl.ds-cards thead, :root .ds-mcards table.ds-tbl.ds-cards thead tr { display: flex; justify-content: flex-end; }
    :root .ds-mcards table.ds-tbl.ds-cards thead th { display: none; }
    :root .ds-mcards table.ds-tbl.ds-cards thead th.ds-num { display: block; position: static; background: transparent; border: 0; padding: 0 0 var(--space-2); font-size: var(--fs-sm); }
    :root .ds-mcards table.ds-tbl.ds-cards tbody tr.ds-r { display: block; margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-surface); }
    :root .ds-mcards table.ds-tbl.ds-cards tbody tr.ds-r:hover { background: var(--bg-row-hover); }
    :root .ds-mcards table.ds-tbl.ds-cards tbody tr.ds-r.ds-tint-success { background: var(--bg-status-success); }
    :root .ds-mcards table.ds-tbl.ds-cards tbody tr.ds-r td { display: flex; align-items: baseline; gap: var(--space-3); padding: 3px 0; border: 0; background: transparent; white-space: normal; overflow: visible; text-align: left; overflow-wrap: anywhere; }
    :root .ds-mcards table.ds-tbl.ds-cards tbody tr.ds-r td::before { content: attr(data-label); flex: 0 0 112px; color: var(--text-2); font-size: var(--fs-sm); }
    :root .ds-mcards table.ds-tbl.ds-cards tbody tr.ds-r td:first-child { font-weight: 600; }
}

/* ============ Utilities ============
   Last among the bricks, so on one element a utility wins over a brick's own
   margin. A step not listed here is rounded to the nearest one. */
:root .ds-list { list-style: disc; padding-left: 20px; margin-bottom: var(--space-3); }
:root .ds-list li { margin-bottom: var(--space-1); }
:root .ds-list li:last-child { margin-bottom: 0; }

:root .ds-m0 { margin: 0; }
:root .ds-mt1 { margin-top: var(--space-1); }
:root .ds-mt2 { margin-top: var(--space-2); }
:root .ds-mt3 { margin-top: var(--space-3); }
:root .ds-mt4 { margin-top: var(--space-4); }
:root .ds-mt6 { margin-top: var(--space-6); }
:root .ds-mt8 { margin-top: var(--space-8); }
:root .ds-mb1 { margin-bottom: var(--space-1); }
:root .ds-mb2 { margin-bottom: var(--space-2); }
:root .ds-mb3 { margin-bottom: var(--space-3); }
:root .ds-mb4 { margin-bottom: var(--space-4); }
:root .ds-mb6 { margin-bottom: var(--space-6); }
:root .ds-ml2 { margin-left: var(--space-2); }
/* the item that goes to the end of its line */
:root .ds-push { margin-left: auto; }
/* widths: a form column, a block of text or a panel, the widest block of a page */
:root .ds-w100 { width: 100%; }
:root .ds-narrow { max-width: 560px; }
:root .ds-mid { max-width: 760px; }
:root .ds-broad { max-width: 1100px; }
/* text: the second ink (ds-muted is the third), the tones, smaller, weight */
:root .ds-text-2 { color: var(--text-2); }
:root .ds-text-danger { color: var(--text-danger); }
:root .ds-text-warning { color: var(--text-warning); }
:root .ds-text-success { color: var(--text-success); }
:root .ds-small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
:root .ds-mono { font-family: var(--font-mono); }
:root .ds-bold { font-weight: var(--w-semibold); }
:root .ds-regular { font-weight: var(--w-regular); }
/* text as the person typed it: line breaks kept, a long link broken */
:root .ds-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* text typed in the editor (ТЗ, reports): the page reset takes list markers away (the
   editor draws its own), the markers above give them back. A Tab in a list is ql-indent-N
   on a flat list: it moves in and, in a numbered list, takes no number from the lines
   around it — one Tab reads «a.», two «i.», as in the editor. Deeper Tabs (never typed on
   prod) sit and count as two. */
:root .ds-rich ul, :root .ds-rich ol { padding-left: var(--space-6); }
:root .ds-rich ol > li { counter-reset: ds-rich-1 ds-rich-2; }
:root .ds-rich ol > li[class*="ql-indent-"] { counter-reset: none; counter-increment: list-item 0 ds-rich-2; }
:root .ds-rich ol > li.ql-indent-1 { counter-reset: ds-rich-2; counter-increment: list-item 0 ds-rich-1; }
:root .ds-rich ol > li[class*="ql-indent-"]::marker { content: counter(ds-rich-2, lower-roman) ". "; }
:root .ds-rich ol > li.ql-indent-1::marker { content: counter(ds-rich-1, lower-alpha) ". "; }
:root .ds-rich [class*="ql-indent-"] { margin-left: calc(2 * var(--space-6)); }
:root .ds-rich .ql-indent-1 { margin-left: var(--space-6); }
:root .ds-break { overflow-wrap: anywhere; }

/* ============ BRICK: the order copy (orders_form.html, ORDER_COPY, 04.10.2026) ============
   «проверьте» after a ТЗ line that is usually changed — a line attribute of the editor,
   never saved — a file of the ТЗ left out of the copy, and the two tables of the check
   screen with one width of «Что». */
:root .ds-copy-spec [data-check] { background: var(--bg-warning-soft); }
:root .ds-copy-spec [data-check]::after {
    content: attr(data-check);
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid var(--border-status-warning);
    border-radius: var(--radius);
    background: var(--bg-status-warning);
    color: var(--text-status-warning);
    font-size: var(--fs-sm);
    font-weight: var(--w-regular);
}
:root .ds-copy-spec [data-old] { background: var(--bg-danger-soft); }
:root .ds-copy-spec [data-old]::after {
    content: attr(data-old);
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid var(--border-status-danger);
    border-radius: var(--radius);
    background: var(--bg-status-danger);
    color: var(--text-status-danger);
    font-size: var(--fs-sm);
    font-weight: var(--w-regular);
}
:root .ds-copy-drop { margin: 0 var(--space-1) 0 0; vertical-align: middle; }
:root .ds-copy-check td:first-child, :root .ds-copy-check th:first-child { width: 34%; }
:root .ds-copy-file:has(.ds-copy-drop:checked) .ds-copy-on,
:root .ds-copy-file:not(:has(.ds-copy-drop:checked)) .ds-copy-off { display: none; }

/* ============ BRICK: the team choice (projects_form.html, TEAM_CHOICE, 13.10.2026) ============
   A row of the teams' table is the choice (ds-sel), «Шанс успеть» a short bar and its
   number, the labels at the row's end; the fields under the table side by side. */
:root table.ds-tbl.ds-teams tbody tr { cursor: pointer; }
:root table.ds-tbl.ds-teams th { background: var(--bg-surface); }
:root table.ds-tbl.ds-teams td { vertical-align: middle; }
:root table.ds-tbl.ds-teams tbody tr.ds-r.ds-sel td { background: var(--bg-row-picked); }
:root table.ds-tbl.ds-teams tbody tr.ds-r.ds-sel:hover td { background: var(--bg-row-picked-hover); }
:root table.ds-tbl.ds-teams tbody tr.ds-r:has(input:focus-visible) td:first-child { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
:root .ds-teams label { cursor: pointer; }
/* the row is the choice: the radio stays for the keyboard, unseen */
:root .ds-teams input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
:root .ds-teams tr.ds-sel .ds-team { font-weight: 600; }
:root .ds-chance { display: inline-flex; align-items: center; gap: var(--space-2); }
:root .ds-chance progress.ds-meter { width: 90px; }
:root .ds-chance progress.ds-meter.ds-meter-success::-webkit-progress-value { background: var(--bg-meter-good); }
:root .ds-chance progress.ds-meter.ds-meter-success::-moz-progress-bar { background: var(--bg-meter-good); }
:root .ds-chance progress.ds-meter.ds-meter-warning::-webkit-progress-value { background: var(--bg-meter-mid); }
:root .ds-chance progress.ds-meter.ds-meter-warning::-moz-progress-bar { background: var(--bg-meter-mid); }
:root .ds-chance progress.ds-meter.ds-meter-danger::-webkit-progress-value { background: var(--bg-meter-bad); }
:root .ds-chance progress.ds-meter.ds-meter-danger::-moz-progress-bar { background: var(--bg-meter-bad); }
:root table.ds-tbl.ds-teams td:last-child { white-space: normal; }
:root .ds-teams .ds-chip { margin: 2px 0 2px var(--space-1); }
/* the first label is the chip, the other labels and why a row is not first: small grey lines */
:root .ds-teams .ds-tc-note { color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-sm); }
/* the order's size, DR and deadline right under the title, no line across the page */
:root .ds-ph:has(.ds-ph-sub) { border-bottom: 0; }
:root .ds-ph:has(.ds-ph-sub) .ds-ph-r1 { padding-bottom: 2px; }
:root .ds-ph-sub { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
:root .ds-teamfoot { align-items: flex-start; }
:root .ds-teamfoot .ds-f { width: 190px; }
:root .ds-teamfoot .ds-f:has(select) { width: 280px; }
/* the button stands on the line of the fields, not of their labels */
:root .ds-teamfoot .ds-actions { padding-top: calc(var(--lh-sm) + 6px + var(--space-1)); }
/* the brief: a short editor that grows with the text, in a thin frame */
:root .ds-tz .ql-editor { min-height: 96px; max-height: 480px; overflow-y: auto; font-size: var(--fs-base); line-height: 1.6; }
:root .ds-tz.ql-container, :root .ds-field:has(.ds-tz) .ql-toolbar { border-color: var(--border); }
:root .ds-field:has(.ds-tz) .ql-toolbar { padding: 4px 8px; }
:root .ds-filepick { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
:root .ds-filepick input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root .ds-filepick label.ds-btn:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* the date as 16.10.2026 and the browser's calendar behind a button */
:root .ds-date-wrap { position: relative; display: flex; align-items: center; }
:root .ds-date-wrap .ds-in { padding-right: 36px; }
:root .ds-date-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; padding: 6px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; border-radius: var(--radius); }
:root .ds-date-btn:hover { background: var(--bg-surface-3); }
:root .ds-date-cal { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
/* a phone: each team a card of two lines — name and «Успеет к», the chance and one label */
@media (max-width: 600px) {
    :root table.ds-tbl.ds-teams thead { display: none; }
    :root table.ds-tbl.ds-teams, :root table.ds-tbl.ds-teams tbody { display: block; }
    :root table.ds-tbl.ds-teams tbody tr.ds-r { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
    :root table.ds-tbl.ds-teams tbody tr.ds-r td:nth-child(4), :root table.ds-tbl.ds-teams tbody tr.ds-r td:last-child { text-align: right; }
    :root table.ds-tbl.ds-teams tbody tr.ds-r td:nth-child(5) { white-space: nowrap; }
    :root .ds-teams .ds-chip { white-space: normal; height: auto; min-height: var(--h-chip); text-align: left; }
    :root table.ds-tbl.ds-teams tbody tr.ds-r:last-child { border-bottom: 0; }
    :root table.ds-tbl.ds-teams tbody tr.ds-r td { display: block; padding: 0; border: 0; background: transparent; white-space: normal; }
    :root table.ds-tbl.ds-teams tbody tr.ds-r.ds-sel { background: var(--bg-row-picked); box-shadow: inset 3px 0 0 var(--border-row-selected); }
    :root table.ds-tbl.ds-teams tbody tr.ds-r td:nth-child(2), :root table.ds-tbl.ds-teams tbody tr.ds-r td:nth-child(3) { display: none; }
    :root table.ds-tbl.ds-teams tbody tr.ds-r td:nth-child(4)::before { content: attr(data-label) " "; color: var(--text-2); }
    :root table.ds-tbl.ds-teams tbody tr.ds-r td:first-child { box-shadow: none; }
    :root .ds-teamfoot .ds-f { width: 100%; }
    :root .ds-teamfoot .ds-actions { padding-top: 0; }
}

/* ============ BRICK: the builder summary (2026-10-13, flag DASHBOARD_BUILDER) ============
   Mockups dashboard_live and edit (owner, 13.10.2026). ds-dash — the summary: its line
   (ds-dash-top: «Сводка», when it was counted, the buttons) over a Gridstack grid
   (ds-dash-grid). ds-w — one widget: title and period (ds-w-h), the body (ds-w-b) with a big
   number (ds-w-k, ds-unit), a line under it (ds-w-s), a chart (ds-w-chart), bars with a goal
   tick (ds-w-meters — their columns, ds-w-meter — one row), a table (ds-w-tbl; ds-w-wide — a column a phone leaves out), the
   colours of a chart with today's numbers (ds-w-legend), a note on the data (ds-w-note), grey
   bars while it counts (ds-skel). ds-dash-edit — the customise mode: dashed outline, «Настроить» /
   «Убрать» in a row at the foot of every widget (ds-w-tools), the corner to resize, the place a
   widget will land. */
:root .ds-dash { margin-top: var(--space-6); }
:root .ds-dash-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
:root .ds-dash-h { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-semibold); margin: 0; }
:root .ds-dash-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--fs-sm); color: var(--text-3); }
:root .ds-dash-meta > span:empty { display: none; }
:root .ds-dash-help { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
/* the home page under the builder: «Сводка» is the one heading — the header keeps a phone's menu button */
:root .ds-ph.ds-ph-bare { padding-bottom: 0; border-bottom: 0; }
@media (min-width: 769px) { :root .ds-ph.ds-ph-bare { padding-top: 0; } }
:root .ds-dash-err { position: sticky; top: var(--space-2); z-index: 5; margin-bottom: var(--space-3); }
:root .ds-dash-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
:root .ds-dash-grid { margin: 0 calc(-1 * var(--space-2)); }
:root .ds-w { container-type: inline-size; position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
:root .ds-w-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
:root .ds-w-t { flex: 1 1 auto; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--w-semibold); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
:root .ds-w-m { flex: none; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
:root .ds-w-b { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-height: 0; overflow: auto; }
:root .ds-w-b > * { flex-shrink: 0; }
:root .ds-w-k { font-size: 28px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .ds-w-k .ds-unit { font-size: 15px; margin-left: var(--space-1); }
:root .ds-w-k.ds-bad { color: var(--text-danger); }
:root .ds-w-s { font-size: var(--fs-sm); color: var(--text-3); }
:root .ds-w-s b { color: var(--text); font-weight: var(--w-semibold); }
:root .ds-w-bit { white-space: nowrap; }
:root .ds-w-seg { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
:root .ds-w-seg > i { display: block; }
:root .ds-w-b > .ds-w-spark { flex: 0 1 36px; height: 36px; min-height: 20px; margin-top: auto; }
:root .ds-w-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
:root .ds-w-spark path { fill: none; stroke: var(--chart-1); stroke-width: 1.6; stroke-linejoin: round; }
:root .ds-w-chart { flex: 1; min-height: 90px; }
/* name, bar and number in one line, the same columns in every row; the rows share the widget's height */
:root .ds-w-meters { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, max-content) minmax(48px, 1fr) auto; grid-auto-rows: minmax(40px, 1fr); column-gap: var(--space-3); }
:root .ds-w-meter { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
:root .ds-w-meter:last-child { border-bottom: 0; }
:root .ds-w-meter > :first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .ds-w-meter > :last-child { text-align: right; font-weight: var(--w-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .ds-w-track { position: relative; height: 6px; border-radius: 3px; background: var(--chart-grid); }
:root .ds-w-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--chart-1); }
:root .ds-w-track > i.ds-w-zero { background: transparent; }
:root .ds-w-track > i.ds-w-warn { background: var(--chart-3); }
:root .ds-w-track > i.ds-w-bad { background: var(--bg-danger); }
:root .ds-w-track > em { position: absolute; top: -4px; width: 2px; height: 14px; border-radius: 1px; background: var(--text-2); }
:root .ds-w-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
:root .ds-w-tbl th { font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--text-3); text-align: left; padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
:root .ds-w-tbl td { height: var(--h-row); padding: 0 var(--space-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
:root .ds-w-tbl tr:last-child td { border-bottom: 0; }
:root .ds-w-tbl th:first-child, :root .ds-w-tbl td:first-child { padding-left: 0; font-weight: var(--w-semibold); }
:root .ds-w-tbl .ds-num { text-align: right; padding-right: 0; }
:root .ds-w-tbl .ds-bad { color: var(--text-danger); font-weight: var(--w-semibold); }
:root .ds-w-tbl .ds-warn { color: var(--text-warning); font-weight: var(--w-semibold); }
:root .ds-w-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
/* the colours of the stages (as on «Заказы в работе по этапам») and of «срок прошёл / сегодня–завтра» */
:root :where(.ds-w-dot, .ds-w-seg > i) { background: var(--chart-5); }
:root .ds-w-sales-new { background: var(--chart-6); }
:root .ds-w-executors { background: var(--chart-1); }
:root .ds-w-pm-check { background: var(--chart-2); }
:root .ds-w-ready, :root .ds-w-soon { background: var(--chart-3); }
:root .ds-w-indexing { background: var(--chart-4); }
:root .ds-w-past { background: var(--bg-danger); }
:root .ds-w-legend { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); font-size: var(--fs-xs); line-height: 16px; color: var(--text-2); }
:root .ds-w-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* the stages under a number in two columns (mock dashboard_live), so the tile stays low; a tile too
   narrow for them keeps them in a row that wraps */
:root .ds-w-seg + .ds-w-legend { column-gap: var(--space-3); }
:root .ds-w-seg + .ds-w-legend span { gap: 4px; }
:root .ds-w-seg + .ds-w-legend i { width: 8px; height: 8px; border-radius: 2px; }
@container (min-width: 216px) { :root .ds-w-seg + .ds-w-legend:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--space-2); } }
:root .ds-w-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
:root .ds-w-legend b { color: var(--text); font-weight: var(--w-semibold); }
:root .ds-w-note { font-size: var(--fs-sm); color: var(--text-2); }
:root .ds-w-err { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: var(--space-3); border-radius: var(--radius); background: var(--bg-surface-2); font-size: var(--fs-sm); color: var(--text-danger); text-align: center; }
:root .ds-skel { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--bg-surface-3); }
:root .ds-skel.ds-skel-k { height: 28px; width: 45%; }
:root .ds-w-tools { display: none; flex: none; gap: 6px; padding-top: var(--space-3); border-top: 1px dashed var(--border-strong); }
/* customise mode (mock edit): «Настроить» and «Убрать» always in sight, in a row at the widget's foot */
:root .ds-dash-edit .ds-w-tools { display: flex; }
/* a table the row of buttons cuts fades out instead of ending in half a row */
:root .ds-dash-edit .ds-w-b:has(> .ds-w-tbl) { mask-image: linear-gradient(to bottom, black calc(100% - 32px), transparent); }
:root .ds-dash-edit .ds-w { outline: 1px dashed var(--border-strong); outline-offset: 3px; cursor: grab; }
:root .ds-dash-hole { position: absolute; padding: 8px; pointer-events: none; }
:root .ds-dash-hole > span { display: flex; align-items: center; justify-content: center; height: 100%; border: 2px dashed color-mix(in srgb, var(--bg-accent) 45%, transparent); border-radius: var(--radius-card); background: var(--bg-accent-soft); color: var(--bg-accent); font-size: var(--fs-sm); font-weight: var(--w-semibold); }
:root .ds-dash-edit .ds-w-m { visibility: hidden; }
:root .ds-dash-grid .grid-stack-placeholder > .placeholder-content { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--bg-surface-2); color: var(--text-accent); font-weight: var(--w-semibold); }
:root .ds-dash-grid .grid-stack-item > .ui-resizable-se { width: 14px; height: 14px; right: 14px; bottom: 14px; transform: none; background: none; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); border-radius: 0 0 3px 0; }
/* a narrow widget: closer, so a name is cut as late as possible (the whole name is its hint) */
@container (max-width: 320px) { :root .ds-w-meters { column-gap: var(--space-2); } }
/* a phone: widgets one under another in the desktop order, each as tall as its content;
   the summary is arranged on a computer (the places are kept in 12 columns) */
@media (max-width: 760px) {
    :root .ds-dash-acts { display: none; }
    :root .ds-dash-grid.grid-stack { display: flex; flex-direction: column; gap: var(--space-3); height: auto !important; min-height: 0 !important; margin: 0; }
    :root .ds-dash-grid > .grid-stack-item { position: static !important; width: auto !important; height: auto !important; }
    :root .ds-dash-grid > .grid-stack-item > .grid-stack-item-content { position: static; overflow: visible; }
    :root .ds-dash-grid .ds-w-b { overflow: visible; }
    :root .ds-dash-grid .ds-w-chart { flex: none; height: 200px; }
    :root .ds-dash-grid .ds-w-wide { display: none; }
}
/* The «Новый виджет» window (2026-10-13, part Ч5; mockups new and types): the catalog on the
   left (ds-wdlg-cat: search, tabs, ds-wdlg-li — a metric, chosen = aria-pressed), the settings
   in the middle (ds-wdlg-views — the five view tiles, ds-wdlg-seg — «Кто видит»), the widget
   as it will look on the right (ds-wdlg-pv), the buttons at the foot. */
:root .ds-wdlg { margin: auto; width: min(1200px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-pop); }
:root .ds-wdlg::backdrop { background: var(--bg-overlay); }
:root .ds-wdlg-box { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 50px); }
:root .ds-wdlg-head, :root .ds-wdlg-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
:root .ds-wdlg-head { justify-content: space-between; border-bottom: 1px solid var(--border); }
:root .ds-wdlg-foot { justify-content: flex-end; padding-block: var(--space-3); border-top: 1px solid var(--border); }
:root .ds-wdlg-h { margin: 0; font-size: var(--fs-h2); font-weight: var(--w-semibold); }
:root .ds-wdlg-cat { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; overflow: auto; padding: var(--space-4); border-right: 1px solid var(--border); background: var(--bg-surface-2); }
:root .ds-wdlg-cat > * { flex: none; }
/* base.html gives every button the look of the main action: these are choices, not actions */
:root .ds-wdlg-li, :root .ds-wdlg-view, :root .ds-wdlg-tabs .ds-fchip { box-shadow: none; transform: none; transition: none; }
:root .ds-wdlg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
:root .ds-wdlg-tabs .ds-fchip { font: inherit; font-size: var(--fs-sm); cursor: pointer; }
:root .ds-wdlg-tabs .ds-fchip:not(.ds-on):hover, :root .ds-wdlg-view:not([aria-disabled="true"]):not([aria-pressed="true"]):hover { background: var(--bg-surface-3); }
:root .ds-wdlg-tabs .ds-fchip.ds-on, :root .ds-wdlg-tabs .ds-fchip.ds-on:hover { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-solid); }
/* the lists of the window drawn as the mock's fields: one arrow of ours, room for the longest choice */
:root .ds-wdlg .ds-row2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
:root .ds-wdlg select.ds-in { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A8275' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; text-overflow: ellipsis; }
:root .ds-wdlg-li { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
:root .ds-wdlg-li:hover { background: var(--bg-surface-3); }
:root .ds-wdlg-li[aria-pressed="true"] { background: var(--bg-accent-soft); box-shadow: inset 0 0 0 1px var(--border-row-selected); }
:root .ds-wdlg-li b { font-weight: var(--w-semibold); }
:root .ds-wdlg-li .ds-tag { margin-left: var(--space-2); vertical-align: 1px; }
:root .ds-wdlg-li > span { font-size: var(--fs-sm); color: var(--text-3); }
:root .ds-wdlg-cfg { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: var(--space-6); min-height: 0; overflow: auto; padding: var(--space-5); }
:root .ds-wdlg-set { min-width: 0; margin: 0 0 var(--space-3); padding: 0; border: 0; }
:root .ds-wdlg-views { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
:root .ds-wdlg-view { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 6px; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--w-semibold); cursor: pointer; }
:root .ds-wdlg-view svg { width: 40px; height: 24px; }
/* chosen (mock new): mint, the icon and the word in teal; not available: white, a pale icon */
:root .ds-wdlg-view[aria-pressed="true"], :root .ds-wdlg-view[aria-pressed="true"]:hover { border-color: var(--bg-accent); box-shadow: inset 0 0 0 1px var(--bg-accent); background: var(--bg-accent-soft); color: var(--bg-accent); }
:root .ds-wdlg-view[aria-disabled="true"], :root .ds-wdlg-view[aria-disabled="true"]:hover { color: var(--text-3); background: var(--bg-surface); cursor: not-allowed; }
:root .ds-wdlg-view[aria-disabled="true"] svg { opacity: .3; }
:root .ds-wdlg-seg { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--radius); overflow: hidden; }
:root .ds-wdlg-seg label { position: relative; cursor: pointer; }
:root .ds-wdlg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root .ds-wdlg-seg span { display: block; padding: 7px 12px; font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--text-2); }
:root .ds-wdlg-seg label + label span { border-left: 1px solid var(--border-control); }
:root .ds-wdlg-seg input:checked + span { background: var(--bg-accent); color: var(--text-on-solid); }
:root .ds-wdlg-seg input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
:root .ds-wdlg-err { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--text-danger); }
:root .ds-wdlg .ds-in[aria-invalid="true"] { border-color: var(--border-danger); background: var(--bg-danger-soft); }
:root .ds-wdlg-pv { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); background: var(--bg-page); }
:root .ds-wdlg-pv-l { font-size: var(--fs-xs); font-weight: var(--w-semibold); color: var(--text-3); }
:root .ds-wdlg-pv .ds-w { min-height: 240px; }
:root .ds-wdlg-pv .ds-w-chart { min-height: 180px; }
@media (max-width: 1100px) {
    :root .ds-wdlg-cfg { grid-template-columns: minmax(0, 1fr); }
}

/* ============ INVARIANT 3: the [hidden] pairing ============
   Every brick above that sets `display` is overridden here when the element
   carries [hidden]. Without this a brick's display:flex silently beats the
   browser default and a hidden warning becomes a permanently visible one —
   which is exactly the production incident this rule exists to prevent.
   It covers a brick inside a `.ds` box and a `ds-*` brick used on its own.
   Keep this block LAST so it wins on equal specificity, and never remove it. */
.ds [hidden], [hidden][class^="ds-"], [hidden][class*=" ds-"] { display: none !important; }