/* Weaver LIMS — дизайн-система «Мягкий современный» (F31): токены, шрифты и компоненты.
   Компоненты используют только токены (переменные) ниже; цвета тем — в трёх блоках: светлая (:root и
   [data-theme=light]), тёмная ([data-theme=dark]) и системная при тёмной теме ОС ([data-theme=system] в
   @media (prefers-color-scheme: dark)). Описание токенов и классов — docs/dev/design-system.md, образцы —
   страница /style-guide. Острова (графики uPlot/Plotly, планшет, редактор кода) читают те же токены. */

/* ---------- 1. Шрифты: Inter (интерфейс) и IBM Plex Mono (последовательности, числа, код), OFL 1.1 ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/inter-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/inter-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/inter-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- 2. Токены, не зависящие от темы ---------- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 19px; --text-2xl: 24px;
  --leading: 1.5; --leading-tight: 1.25;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --control-h: 34px; --control-h-sm: 28px; --control-px: 12px; --control-py: 6px;
  --cell-py: 9px; --cell-px: 12px; --cell-py-compact: 4px; --cell-px-compact: 8px;
  --z-sticky: 2; --z-scrim: 39; --z-drawer: 40; --z-toast: 100; --z-progress: 200;
  --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --drawer-w: 236px; --content-max: 1280px;
}

/* ---------- 3. Цвета светлой темы ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f2f4f8; --surface-3: #e9edf3; --surface-raised: #ffffff;
  --surface-hover: #f5f7fb; --surface-solid: #ffffff;
  --border: #e3e8ef; --border-strong: #c9d1dc;
  --text: #101828; --text-2: #344054; --muted: #5a6474;
  --accent: #4f46e5; --accent-hover: #4338ca; --accent-active: #3730a3; --accent-subtle: #eef2ff; --accent-subtle-text: #3730a3;
  --accent-solid: #4f46e5; --accent-text: #ffffff; --on-accent: #ffffff; --focus: #4f46e5;
  --ok: #13723a; --ok-subtle: #dcfce7; --ok-text: #166534; --ok-border: #a7e3bb;
  --warn: #a3480a; --warn-subtle: #fef3c7; --warn-text: #92400e; --warn-border: #f3d38a;
  --danger: #c81e1e; --danger-subtle: #fee2e2; --danger-text: #991b1b; --danger-border: #f5b5b5; --danger-solid: #c81e1e; --danger-hover: #a81616;
  --info: #0369a1; --info-subtle: #e0f2fe; --info-text: #075985; --info-border: #a9d8f5;
  --neutral-subtle: #eef1f5; --neutral-text: #374151; --neutral-border: #d5dbe4;
  --violet-subtle: #f3e8ff; --violet-text: #6b21a8; --violet-border: #d8b4fe; --pink-subtle: #fce7f3; --pink-text: #9d174d; --pink-border: #f5b3d3;
  --teal-subtle: #ccfbf1; --teal-text: #115e59; --teal-border: #8fdccf; --orange-subtle: #ffedd5; --orange-text: #9a3412; --orange-border: #fbc28e;
  --slate-subtle: #e2e8f0; --slate-text: #334155; --slate-border: #b8c2cf;
  --shadow-1: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .05);
  --shadow-2: 0 1px 2px rgb(16 24 40 / .04), 0 4px 12px rgb(16 24 40 / .07);
  --shadow-3: 0 4px 8px rgb(16 24 40 / .05), 0 18px 44px rgb(16 24 40 / .16);
  --shadow-inset: inset 0 1px 1px rgb(16 24 40 / .04);
  --focus-ring: 0 0 0 3px rgb(79 70 229 / .28);
  --scrim: rgb(15 23 42 / .38);
  /* совместимость со старыми именами (asm32-оформление): модули и острова могут на них ссылаться */
  --glass-border: var(--border); --glass-shadow: var(--shadow-2); --pill: var(--surface); --pill-text: var(--text-2);
  --pill-active: var(--accent-solid); --panel-title: var(--text-2);
  /* планшет <weaver-plate>: пастельные лунки, текст лунки — var(--text) (контраст ≥ 4,5:1) */
  --plate-well: #eef1f6; --plate-empty: transparent;
  --plate-tone-neutral: #e3e7ee; --plate-tone-info: #d6ebfb; --plate-tone-ok: #d3f2dd; --plate-tone-warn: #fbecc4; --plate-tone-danger: #fbd9d9; --plate-tone-accent: #dfe1fb; --plate-tone-violet: #e9d5ff; --plate-tone-pink: #fbcfe8; --plate-tone-teal: #b5f0e4; --plate-tone-orange: #fed7aa; --plate-tone-slate: #cbd5e1;
  --plate-cat-1: #d6e4fd; --plate-cat-2: #d3f2dd; --plate-cat-3: #fbecc4; --plate-cat-4: #f8d7ec; --plate-cat-5: #e4dcfb; --plate-cat-6: #fde0cc; --plate-cat-7: #cff1f4; --plate-cat-8: #e6e9ee;
  /* деревья редактора протоколов: значения и иконки, контраст ≥ 4,5:1 на панели */
  --tree-vol: #8a4b00; --tree-time: #0b6b63; --tree-folder: #8a5a00; --tree-step: #4338ca; --tree-drop: #1d4ed8;
  --tree-clock: #0b6b63; --tree-filter: #6b21a8; --tree-block: #475569;
  --code-accent: #13723a;
}

/* ---------- 4. Цвета тёмной темы (явная и системная — одинаковые) ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116; --surface: #161a21; --surface-2: #1d222b; --surface-3: #252b36; --surface-raised: #1b2029;
  --surface-hover: #1f2530; --surface-solid: #161a21;
  --border: #272d38; --border-strong: #3a4250;
  --text: #e8ebf1; --text-2: #c9cfda; --muted: #9ba4b4;
  --accent: #a5b4fc; --accent-hover: #c7d2fe; --accent-active: #818cf8; --accent-subtle: #23254a; --accent-subtle-text: #c7d2fe;
  --accent-solid: #5b5bd6; --accent-text: #ffffff; --on-accent: #ffffff; --focus: #a5b4fc;
  --ok: #4ade80; --ok-subtle: #14301f; --ok-text: #86efac; --ok-border: #22553a;
  --warn: #fbbf24; --warn-subtle: #33280f; --warn-text: #fcd34d; --warn-border: #5f4a16;
  --danger: #f87171; --danger-subtle: #3a1a1d; --danger-text: #fca5a5; --danger-border: #6b2a2f; --danger-solid: #dc2626; --danger-hover: #b91c1c;
  --info: #38bdf8; --info-subtle: #0f2a3d; --info-text: #7dd3fc; --info-border: #1d4d6b;
  --neutral-subtle: #252b36; --neutral-text: #cbd2dd; --neutral-border: #3a4250;
  --violet-subtle: #2a1b3d; --violet-text: #d8b4fe; --violet-border: #4c2f6b; --pink-subtle: #3a1a2c; --pink-text: #f9a8d4; --pink-border: #6b2a4a;
  --teal-subtle: #0f2f2c; --teal-text: #5eead4; --teal-border: #1f5c55; --orange-subtle: #3a2210; --orange-text: #fdba74; --orange-border: #6b3d1a;
  --slate-subtle: #262c36; --slate-text: #aab6c6; --slate-border: #3f4856;
  --shadow-1: 0 0 0 1px rgb(255 255 255 / .015), 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: inset 0 1px 0 rgb(255 255 255 / .03), 0 4px 16px rgb(0 0 0 / .32);
  --shadow-3: 0 0 0 1px rgb(165 180 252 / .10), 0 16px 48px rgb(0 0 0 / .55), 0 0 32px rgb(91 91 214 / .10);
  --shadow-inset: inset 0 1px 1px rgb(0 0 0 / .25);
  --focus-ring: 0 0 0 3px rgb(165 180 252 / .35);
  --scrim: rgb(0 0 0 / .55);
  --plate-well: #232934; --plate-tone-neutral: #2f3643; --plate-tone-info: #173a55; --plate-tone-ok: #1a4430; --plate-tone-warn: #4a3a12; --plate-tone-danger: #552327; --plate-tone-accent: #2b2d5c; --plate-tone-violet: #3b2757; --plate-tone-pink: #4f2139; --plate-tone-teal: #134a44; --plate-tone-orange: #4d2d12; --plate-tone-slate: #3a4250;
  --plate-cat-1: #1f3764; --plate-cat-2: #1a4430; --plate-cat-3: #4a3a12; --plate-cat-4: #4f2340; --plate-cat-5: #35295e; --plate-cat-6: #56321a; --plate-cat-7: #164650; --plate-cat-8: #2f3643;
  --tree-vol: #f59e0b; --tree-time: #2dd4bf; --tree-folder: #fbbf24; --tree-step: #a5b4fc; --tree-drop: #7dd3fc;
  --tree-clock: #5eead4; --tree-filter: #d8b4fe; --tree-block: #cbd5e1;
  --code-accent: #4ade80;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --bg: #0e1116; --surface: #161a21; --surface-2: #1d222b; --surface-3: #252b36; --surface-raised: #1b2029;
    --surface-hover: #1f2530; --surface-solid: #161a21;
    --border: #272d38; --border-strong: #3a4250;
    --text: #e8ebf1; --text-2: #c9cfda; --muted: #9ba4b4;
    --accent: #a5b4fc; --accent-hover: #c7d2fe; --accent-active: #818cf8; --accent-subtle: #23254a; --accent-subtle-text: #c7d2fe;
    --accent-solid: #5b5bd6; --accent-text: #ffffff; --on-accent: #ffffff; --focus: #a5b4fc;
    --ok: #4ade80; --ok-subtle: #14301f; --ok-text: #86efac; --ok-border: #22553a;
    --warn: #fbbf24; --warn-subtle: #33280f; --warn-text: #fcd34d; --warn-border: #5f4a16;
    --danger: #f87171; --danger-subtle: #3a1a1d; --danger-text: #fca5a5; --danger-border: #6b2a2f; --danger-solid: #dc2626; --danger-hover: #b91c1c;
    --info: #38bdf8; --info-subtle: #0f2a3d; --info-text: #7dd3fc; --info-border: #1d4d6b;
    --neutral-subtle: #252b36; --neutral-text: #cbd2dd; --neutral-border: #3a4250;
    --violet-subtle: #2a1b3d; --violet-text: #d8b4fe; --violet-border: #4c2f6b; --pink-subtle: #3a1a2c; --pink-text: #f9a8d4; --pink-border: #6b2a4a;
    --teal-subtle: #0f2f2c; --teal-text: #5eead4; --teal-border: #1f5c55; --orange-subtle: #3a2210; --orange-text: #fdba74; --orange-border: #6b3d1a;
    --slate-subtle: #262c36; --slate-text: #aab6c6; --slate-border: #3f4856;
    --shadow-1: 0 0 0 1px rgb(255 255 255 / .015), 0 1px 2px rgb(0 0 0 / .35);
    --shadow-2: inset 0 1px 0 rgb(255 255 255 / .03), 0 4px 16px rgb(0 0 0 / .32);
    --shadow-3: 0 0 0 1px rgb(165 180 252 / .10), 0 16px 48px rgb(0 0 0 / .55), 0 0 32px rgb(91 91 214 / .10);
    --shadow-inset: inset 0 1px 1px rgb(0 0 0 / .25);
    --focus-ring: 0 0 0 3px rgb(165 180 252 / .35);
    --scrim: rgb(0 0 0 / .55);
    --plate-well: #232934; --plate-tone-neutral: #2f3643; --plate-tone-info: #173a55; --plate-tone-ok: #1a4430; --plate-tone-warn: #4a3a12; --plate-tone-danger: #552327; --plate-tone-accent: #2b2d5c; --plate-tone-violet: #3b2757; --plate-tone-pink: #4f2139; --plate-tone-teal: #134a44; --plate-tone-orange: #4d2d12; --plate-tone-slate: #3a4250;
    --plate-cat-1: #1f3764; --plate-cat-2: #1a4430; --plate-cat-3: #4a3a12; --plate-cat-4: #4f2340; --plate-cat-5: #35295e; --plate-cat-6: #56321a; --plate-cat-7: #164650; --plate-cat-8: #2f3643;
    --tree-vol: #f59e0b; --tree-time: #2dd4bf; --tree-folder: #fbbf24; --tree-step: #a5b4fc; --tree-drop: #7dd3fc;
    --tree-clock: #5eead4; --tree-filter: #d8b4fe; --tree-block: #cbd5e1;
    --code-accent: #4ade80;
  }
}

/* ---------- 5. База ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading); font-feature-settings: "cv11", "ss01";
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { line-height: var(--leading-tight); letter-spacing: -0.011em; color: var(--text); }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin: var(--space-2) 0 var(--space-5); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: var(--space-2) 0 var(--space-3); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: var(--space-3) 0 var(--space-2); }
h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.card > h2:first-child, .card > h3:first-child, .card > header:first-child h2 { margin-top: 0; }
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent-solid) 26%, transparent); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
:not(pre) > code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0 4px; }
td > code, .draft-table code, .node-table code, .tree code { background: none; border: 0; padding: 0; }
kbd { background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 0 5px; font-size: var(--text-xs); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
small { font-size: var(--text-xs); }
.muted { color: var(--muted); }
.num, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- 6. Оболочка: верхнее меню «таблетками», боковое меню ---------- */
.topbar { display: flex; align-items: center; gap: var(--space-3) var(--space-4); padding: 8px var(--space-4); flex-wrap: wrap;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); font-size: 15px; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.login-logo { display: block; width: 140px; height: auto; margin: 0 auto var(--space-2); }
/* лаборатория пользователя в шапке и на странице входа (SaaS, ADR-0005) */
.lab-name { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-left: 1px solid var(--border); color: var(--muted); font-weight: var(--weight-semibold);
  white-space: nowrap; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
.lab-name img { width: 26px; height: 26px; object-fit: contain; border-radius: var(--radius-xs); }
.login-lab { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-lg); text-align: center; }
.login-lab .login-lab-logo { width: 140px; height: auto; max-height: 140px; object-fit: contain; }
.login-provided { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 0 var(--space-3); color: var(--muted);
  font-size: var(--text-2xs); letter-spacing: .02em; }
.login-provided img { width: 18px; height: 18px; object-fit: contain; opacity: .85; }
.login-provided b { font-weight: var(--weight-semibold); color: var(--text-2); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; padding: 3px; }
.nav a { padding: 5px 12px; border-radius: var(--radius-pill); text-decoration: none; color: var(--text-2); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-subtle-text); font-weight: var(--weight-semibold); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.tools { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.tools select { height: var(--control-h-sm); padding: 2px 28px 2px 10px; font-size: var(--text-sm); border-radius: var(--radius-pill); }
.tools > a { font-weight: var(--weight-medium); text-decoration: none; }
.tools > a:hover { text-decoration: underline; }
.tools button.secondary { height: var(--control-h-sm); padding: 2px 12px; font-size: var(--text-sm); border-radius: var(--radius-pill); }
.tools > .slot { margin: 0; }
.task-counter { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); text-decoration: none; color: inherit; }
.task-counter:hover { text-decoration: underline; }
main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-6); }

.shell { display: flex; align-items: stretch; min-height: calc(100vh - 60px); }
.shell > main { flex: 1; min-width: 0; }
.drawer { flex: 0 0 var(--drawer-w); width: var(--drawer-w); box-sizing: border-box; padding: var(--space-3) var(--space-2); overflow-y: auto;
  transition: margin-left var(--dur) var(--ease), visibility var(--dur); background: var(--surface); border-right: 1px solid var(--border); }
.drawer nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-2); }
.drawer details { border-radius: var(--radius-md); }
.drawer summary { cursor: pointer; padding: 7px 10px; border-radius: var(--radius-md); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text); list-style: none;
  display: flex; align-items: center; gap: 6px; transition: background var(--dur-fast) var(--ease); }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::before { content: "▸"; font-size: 10px; color: var(--muted); transition: transform var(--dur-fast) var(--ease); width: 11px; }
.drawer details[open] > summary::before { transform: rotate(90deg); }
.drawer summary:hover, .drawer .drawer-single:hover { background: var(--surface-2); }
.drawer summary.active, .drawer .drawer-single.active { color: var(--accent-subtle-text); }
.drawer ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 17px; display: flex; flex-direction: column; gap: 1px; }
.drawer ul a, .drawer .drawer-single { display: block; padding: 6px 10px; border-radius: var(--radius-md); color: var(--text-2); text-decoration: none; font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.drawer .drawer-single { font-weight: var(--weight-semibold); color: var(--text); padding-left: 27px; }
.drawer ul a:hover { background: var(--surface-2); color: var(--text); }
.drawer .drawer-single.active { background: var(--accent-subtle); }
.drawer ul a[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-subtle-text); font-weight: var(--weight-semibold); }
.drawer-toggle { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-md); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.drawer-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
html[data-drawer="closed"] .drawer { margin-left: calc(-1 * var(--drawer-w)); visibility: hidden; }
.drawer-scrim { display: none; }
@media (max-width: 1000px) {
  /* узкий экран: панель поверх страницы, по умолчанию закрыта (открывается кнопкой ☰) */
  .drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); margin-left: calc(-1 * var(--drawer-w)); visibility: hidden; background: var(--surface-raised); box-shadow: var(--shadow-3); }
  html[data-drawer="open-mobile"] .drawer { margin-left: 0; visibility: visible; }
  html[data-drawer="open-mobile"] .drawer-scrim { display: block; position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); }
}

/* ---------- 7. Карточки, панели, раскладки ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-1); }
/* position: relative — блок-контейнер для абсолютных потомков (скрытые подписи .visually-hidden в деревьях и таблицах):
   иначе они отсчитываются от окна и удлиняют страницу рабочего места, которая сама не прокручивается */
.card, .pane > .pane-body, .side-menu { position: relative; }
.card.raised { box-shadow: var(--shadow-2); }
.card.flat { box-shadow: none; background: var(--surface-2); }
.slot { margin-bottom: var(--space-3); }
.login { max-width: 380px; margin: 10vh auto; padding: var(--space-7) var(--space-6); box-shadow: var(--shadow-3); border-radius: var(--radius-xl); }
.login button[type=submit] { width: 100%; margin-top: var(--space-3); height: 38px; }
.actions-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.status-bar { margin-top: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stack label { margin: 0; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); text-align: center;
  color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); }
.empty-state .empty-icon { width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-1); font-size: 20px; }
.empty-state strong { color: var(--text); font-size: var(--text-lg); }
.htmx-request .spinner { display: inline; }
.spinner { display: none; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent-solid), var(--accent)); z-index: var(--z-progress); border-radius: 0 2px 2px 0; }
body.loading .progress { width: 70%; transition: width 2s ease-out; }

/* ---------- 8. Формы ---------- */
label { display: block; margin: var(--space-2) 0 var(--space-1); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-2); }
input, select, button, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--control-py) var(--control-px); }
input, select, textarea { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); box-shadow: var(--shadow-inset); }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select { min-height: var(--control-h); }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--muted)); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent-solid); box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .9; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent-solid); width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0 4px 0 0; vertical-align: -3px; box-shadow: none; cursor: pointer; }
input[type=file] { padding: 5px; font-size: var(--text-sm); background: var(--surface-2); border-style: dashed; }
input[type=file]::file-selector-button { font: inherit; font-weight: var(--weight-medium); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  padding: 3px 10px; margin-right: 8px; cursor: pointer; }
select option { background: var(--surface-solid); color: var(--text); }
textarea { line-height: 1.45; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.field { margin-bottom: var(--space-3); }
.field input, .field select { width: 100%; max-width: 420px; }
.field textarea { width: 100%; max-width: 860px; }
.field small.muted { display: block; margin-top: 3px; font-size: var(--text-xs); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 var(--space-4); }
/* Нормы маршрутов (workflow): карточки разделов в сетке; таблицы прокручиваются внутри карточки */
.norms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-3); }
.norms-grid > * { min-width: 0; margin: 0; }
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--text-xs); margin-top: 3px; font-weight: var(--weight-medium); }
.req { color: var(--danger); }
fieldset[disabled] { opacity: 0.85; }
form > fieldset { border: none; padding: 0; margin: 0; }
form.inline { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; margin: 0; }
input.narrow { width: 7ch; }
.filters { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; margin-bottom: var(--space-3); }
.filters label { margin-top: 0; }
.filters .grow { flex: 1; min-width: 200px; }
.filters .grow input { width: 100%; }
.secret { border-color: var(--warn); }
.secret-row { display: flex; gap: var(--space-2); }
.secret-row input { flex: 1; font-family: var(--font-mono); }
textarea.mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
textarea.mono { font-size: var(--text-xs); width: 100%; }
/* переключатель: <label class="switch"><input type="checkbox">подпись</label> */
.switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: var(--weight-medium); cursor: pointer; color: var(--text); }
.switch input[type=checkbox] { appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 18px; flex: 0 0 32px; margin: 0; border-radius: var(--radius-pill);
  background: var(--surface-3); border: 1px solid var(--border-strong); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); vertical-align: middle; }
.switch input[type=checkbox]::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .25);
  transition: transform var(--dur-fast) var(--ease); }
.switch input[type=checkbox]:checked { background: var(--accent-solid); border-color: var(--accent-solid); }
.switch input[type=checkbox]:checked::after { transform: translateX(14px); background: #fff; }
.switch input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.switch input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
/* сегменты: радиокнопки таблетками */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.segmented label { margin: 0; padding: 3px 12px; cursor: pointer; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-2); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.segmented label:hover { color: var(--text); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font-weight: var(--weight-semibold); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 0; }

/* ---------- 9. Кнопки ---------- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: var(--control-py) 14px; cursor: pointer; text-decoration: none;
  font-weight: var(--weight-medium); line-height: 1.3; background: var(--accent-solid); color: var(--on-accent); border: 1px solid var(--accent-solid); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgb(255 255 255 / .12);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
a.button { border: 1px solid var(--accent-solid); border-radius: var(--radius-md); }
button:hover:not(:disabled), .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
[data-theme="dark"] button:hover:not(:disabled), [data-theme="dark"] .button:hover { background: color-mix(in srgb, var(--accent-solid) 88%, #fff); border-color: color-mix(in srgb, var(--accent-solid) 88%, #fff); }
button:active:not(:disabled), .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.primary { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); }
button.secondary, a.button.secondary, .button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-1); }
button.secondary:hover:not(:disabled), a.button.secondary:hover, .button.secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
button.ghost, .button.ghost { background: transparent; color: var(--text-2); border-color: transparent; box-shadow: none; }
button.ghost:hover:not(:disabled), .button.ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
button.danger, .button.danger { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
button.danger:hover:not(:disabled), .button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }
button.sm, .button.sm { min-height: var(--control-h-sm); padding: 2px 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
button.lg, .button.lg { min-height: 42px; padding: 8px 20px; font-size: var(--text-lg); }
button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { button:active:not(:disabled), .button:active { transform: none; } }

/* ---------- 10. Таблицы ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; }
/* моноширинные цифры — только в числовых ячейках (в Inter tnum расширяет и дефис в названиях вроде «Klebs-F») */
td.num, th.num, td.select, table time, .pager, .widget-counts { font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--cell-py) var(--cell-px); border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--surface-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-2); white-space: normal; }
thead th { position: sticky; top: 0; z-index: 1; border-bottom-color: var(--border-strong); }
thead th:first-child { border-top-left-radius: var(--radius-md); }
thead th:last-child { border-top-right-radius: var(--radius-md); }
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover > td { background: var(--surface-hover); }
tbody tr:last-child > td { border-bottom-color: transparent; }
table.zebra tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
th.num, td.num { text-align: right; }
th.select, td.select { width: 2.2em; }
th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort:hover { color: var(--text); }
th a.sort::after { content: " ↕"; color: var(--muted); font-weight: 400; opacity: .7; }
th[aria-sort="ascending"] a.sort::after { content: " ↑"; color: var(--accent); opacity: 1; }
th[aria-sort="descending"] a.sort::after { content: " ↓"; color: var(--accent); opacity: 1; }
td.empty { text-align: center; padding: var(--space-7) var(--space-4); }
tbody tr:has(input[name=ids]:checked) > td { background: color-mix(in srgb, var(--accent-solid) 9%, var(--surface)); }
tr.current td { background: var(--accent-subtle); font-weight: var(--weight-semibold); }
.table-scroll { overflow-x: auto; border-radius: var(--radius-md); position: relative; } /* relative: скрытые подписи (.visually-hidden) в ячейках не расширяют страницу */
table.compact { font-size: var(--text-sm); width: 100%; }
table.compact th, table.compact td { padding: var(--cell-py-compact) var(--cell-px-compact); }
table.kv { width: auto; }
table.kv th { text-align: left; font-weight: var(--weight-semibold); padding-right: 1.5em; white-space: nowrap; background: transparent; color: var(--muted); position: static; }
table.kv tbody tr:hover > td { background: transparent; }
/* Таблицы документов (упаковка, паспорт): длинные последовательности и названия переносятся — таблица по ширине
   карточки, без горизонтальной прокрутки; поля правки узкие. */
table.doc-table td.wrap { overflow-wrap: anywhere; }
table.doc-table td.wrap code { word-break: break-all; }
table.doc-table th { hyphens: auto; }
table.doc-table input { width: 5.5em; max-width: 100%; padding: 4px 6px; min-height: 0; }
td.smiles { font-family: var(--font-mono); font-size: var(--text-xs); max-width: 24em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table[data-contacts] input, table[data-contacts] select { width: 100%; min-width: 120px; }
td.row-actions { width: 1%; white-space: nowrap; text-align: right; }
td.row-actions a.button, td.row-actions button { min-height: var(--control-h-sm); padding: 2px 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); margin: 0 0 0 4px; }
td.row-actions [data-tone="danger"] { color: var(--danger); }
td.row-actions [data-tone="danger"]:hover { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.bulk-bar { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-md); background: var(--accent-subtle); }
.bulk-bar[hidden] { display: none; }
.bulk-bar p.muted { margin: 2px 0 0; font-size: var(--text-xs); }
.pager { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); font-size: var(--text-sm); flex-wrap: wrap; }
.pager a { display: inline-flex; align-items: center; min-height: var(--control-h-sm); padding: 2px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: var(--weight-medium); box-shadow: var(--shadow-1); }
.pager a:hover { background: var(--surface-2); color: var(--text); }
.pager > span:not(.muted) { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sticky-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); padding: var(--space-2) 0;
  border-top: 1px solid var(--border); z-index: var(--z-sticky); }

/* ---------- 11. Бейджи и статусы: пастельные «чипы» по оттенку ---------- */
.badge, .route-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: var(--radius-pill); border: 1px solid var(--neutral-border); font-size: var(--text-xs);
  font-weight: var(--weight-medium); line-height: 1.6; background: var(--neutral-subtle); color: var(--neutral-text); vertical-align: 1px; }
p.badge { display: flex; width: fit-content; max-width: 100%; white-space: normal; border-radius: var(--radius-md); margin: 4px 0; }
.badge[hidden] { display: none; }
/* статус (подпись перечисления) не переносится; предупреждения (data-severity) — переносятся */
.badge[data-tone], .badge[data-state], .badge[data-status] { white-space: nowrap; }
:is(.badge, .route-chip)[data-tone="ok"], .badge[data-state="active"], .badge[data-status="completed"], .badge[data-status="shipped"], .badge[data-severity="ok"] {
  background: var(--ok-subtle); color: var(--ok-text); border-color: var(--ok-border); }
:is(.badge, .route-chip)[data-tone="info"], .badge[data-status="in_production"], .badge[data-severity="info"], .badge[data-severity="hint"] {
  background: var(--info-subtle); color: var(--info-text); border-color: var(--info-border); }
:is(.badge, .route-chip)[data-tone="warn"], .badge[data-state="disabled"], .badge[data-state="dependency_missing"], .badge[data-severity="warning"], .badge[data-status="warning"] {
  background: var(--warn-subtle); color: var(--warn-text); border-color: var(--warn-border); }
:is(.badge, .route-chip)[data-tone="danger"], .badge[data-state="failed"], .badge[data-state="incompatible"], .badge[data-status="cancelled"], .badge[data-severity="error"] {
  background: var(--danger-subtle); color: var(--danger-text); border-color: var(--danger-border); }
/* оттенки этапов (статусы лунки, этапы маршрута, F41): каждый этап — свой цвет */
:is(.badge, .route-chip)[data-tone="violet"] { background: var(--violet-subtle); color: var(--violet-text); border-color: var(--violet-border); }
:is(.badge, .route-chip)[data-tone="pink"] { background: var(--pink-subtle); color: var(--pink-text); border-color: var(--pink-border); }
:is(.badge, .route-chip)[data-tone="teal"] { background: var(--teal-subtle); color: var(--teal-text); border-color: var(--teal-border); }
:is(.badge, .route-chip)[data-tone="orange"] { background: var(--orange-subtle); color: var(--orange-text); border-color: var(--orange-border); }
:is(.badge, .route-chip)[data-tone="slate"] { background: var(--slate-subtle); color: var(--slate-text); border-color: var(--slate-border); }
:is(.badge, .route-chip)[data-tone="accent"] { background: var(--accent-subtle); color: var(--accent-subtle-text); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
:is(.badge, .route-chip)[data-tone="neutral"] { background: var(--neutral-subtle); color: var(--neutral-text); border-color: var(--neutral-border); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
/* Маршрут лунки (WF3, components/route.html): этапы-чипы по порядку; текущий — рамка акцента, следующий — пунктир */
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.route li { display: inline-flex; align-items: center; gap: 4px; }
.route li + li::before { content: "→" / ""; color: var(--muted); font-size: var(--text-xs); }
.route li[data-step="current"] .route-chip { border-color: var(--accent-solid); box-shadow: 0 0 0 1px var(--accent-solid); font-weight: var(--weight-semibold); }
.route li[data-step="next"] .route-chip { border-style: dashed; border-color: var(--accent); }
.route.compact { gap: 2px; min-width: 22rem; }
.route + .table-scroll { margin-top: var(--space-3); }
.route.compact .route-chip { padding: 0 6px; }
.warn-text { color: var(--warn); }

/* ---------- 12. Сообщения: ошибки, уведомления, всплывающие ---------- */
.alert, .notice { display: block; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid; font-size: var(--text-md); line-height: 1.45; }
.alert { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-subtle); }
.notice { border-color: var(--ok-border); color: var(--ok-text); background: var(--ok-subtle); }
.notice[data-tone="info"], .alert[data-tone="info"] { border-color: var(--info-border); color: var(--info-text); background: var(--info-subtle); }
.notice[data-tone="warn"], .alert[data-tone="warn"] { border-color: var(--warn-border); color: var(--warn-text); background: var(--warn-subtle); }
.alert a, .notice a { color: inherit; font-weight: var(--weight-semibold); }
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); max-width: min(420px, calc(100vw - 32px)); }
.toast { position: relative; padding: 11px 16px 11px 18px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow-3); overflow: hidden; animation: toast-in var(--dur-slow) var(--ease); }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ok); }
.toast[data-level="info"]::before { background: var(--info); }
.toast[data-level="warn"]::before { background: var(--warn); }
.toast[data-level="danger"]::before { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- 13. Диалоги ---------- */
.dialog { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); color: var(--text); padding: var(--space-5) var(--space-6);
  min-width: min(420px, calc(100vw - 32px)); max-width: min(760px, calc(100vw - 32px)); box-shadow: var(--shadow-3); }
.dialog[open] { animation: dialog-in var(--dur) var(--ease); }
.dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
.dialog h2 { margin-top: 0; font-size: var(--text-xl); }
.dialog ul { max-height: 40vh; overflow: auto; }
.dialog .actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-bottom: 0; margin-top: var(--space-4); }
.dialog .actions.start { justify-content: flex-start; margin-top: 6px; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.dialog:has(.marks-dialog) { max-width: min(760px, calc(100vw - 32px)); width: 90vw; }
.grid-scroll { max-height: 52vh; overflow: auto; }
.grid-scroll thead th { position: sticky; top: 0; background: var(--surface-raised); z-index: 1; }
.grid-scroll td input { width: 100%; margin: 0; }
.structure-editor-dialog { max-width: min(1100px, calc(100vw - 32px)); width: 90vw; }
.structure-editor-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.structure-editor-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.structure-editor-form .actions-row { justify-content: flex-end; }
.dialog-diff { max-height: 50vh; overflow: auto; }
.dialog .issues { max-height: 20vh; overflow: auto; }

/* ---------- 14. Вкладки ---------- */
.tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; padding: 3px; margin-bottom: var(--space-4); flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); }
.tabs a { padding: 5px 14px; text-decoration: none; color: var(--text-2); border-radius: var(--radius-md); font-weight: var(--weight-medium); font-size: var(--text-sm); border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tabs a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tabs a[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: var(--weight-semibold); box-shadow: var(--shadow-1); border-color: var(--border); }

/* ---------- 15. Интерактивный планшет <weaver-plate>: мягкие скруглённые лунки ---------- */
weaver-plate { display: block; }
weaver-plate[upgraded] .plate-fallback { display: none; }
.plate-fallback td, .plate-fallback th { text-align: center; font-size: var(--text-xs); padding: 4px; }
.plate-toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.plate-toolbar label { display: flex; gap: 6px; align-items: center; margin: 0; }
.plate-toolbar button { min-height: var(--control-h-sm); padding: 2px 12px; font-size: var(--text-sm); }
.plate-count { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.plate-grid { width: 100%; height: auto; display: block; user-select: none; touch-action: none; outline: none; }
.plate-grid:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-md); }
.plate-grid text { fill: var(--text); font: 11px var(--font-sans); pointer-events: none; }
.plate-grid .plate-pos { fill: var(--muted); font-size: 9px; font-family: var(--font-mono); }
.plate-grid .plate-label { font-size: 10.5px; font-weight: var(--weight-semibold); }
.plate-head rect, rect.plate-head { fill: var(--surface-2); cursor: pointer; rx: 7px; transition: fill var(--dur-fast) var(--ease); }
.plate-head text { fill: var(--text-2); font-weight: var(--weight-semibold); }
.plate-head:hover rect, rect.plate-head:hover { fill: var(--accent-subtle); }
.plate-well rect { stroke: var(--border-strong); stroke-width: 1; cursor: pointer; rx: 10px; transition: stroke var(--dur-fast) var(--ease); }
.plate-well.empty rect { stroke: var(--border); stroke-dasharray: 3 3; }
.plate-well:hover rect { stroke: var(--accent); stroke-width: 1.5; }
.plate-well.selected rect { stroke: var(--accent-solid); stroke-width: 3; }
[data-theme="dark"] .plate-well.selected rect { stroke: var(--accent); }
.plate-well.focused rect { stroke: var(--text); stroke-width: 2; stroke-dasharray: 4 2; }
.plate-well.move-target rect { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 5 3; fill-opacity: .6; }
.plate-well.move-invalid rect { stroke: var(--danger); stroke-width: 3; stroke-dasharray: 5 3; }
.plate-grid.moving, .plate-grid.moving .plate-well rect { cursor: grabbing; }
weaver-plate[data-move-url] .plate-well.selected:not(.empty) rect { cursor: grab; }
.plate-well.selected.focused rect { stroke: var(--focus); stroke-width: 3; stroke-dasharray: none; }
.plate-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.plate-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.plate-legend-item i { width: 14px; height: 14px; border-radius: 5px; border: 1px solid var(--border-strong); display: inline-block; }

/* ---------- 16. Протоколы: скрипт с номерами строк, diff, деревья ---------- */
.script-text { width: 100%; font: 13px/1.5 var(--font-mono); }
weaver-script-editor { display: block; margin-bottom: 10px; }
weaver-script-editor .cm-editor { max-height: 620px; border: 1px solid var(--border); }
weaver-script-editor .cm-editor .cm-scroller { font-family: var(--font-mono); }
.script { max-height: 520px; overflow: auto; font: 13px/1.5 var(--font-mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 0; }
.script-line { display: flex; gap: var(--space-3); padding: 0 10px; white-space: pre; }
.script-line .ln { color: var(--muted); min-width: 4ch; text-align: right; user-select: none; }
.script-line.has-issue { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.script-line:target { background: color-mix(in srgb, var(--focus) 20%, transparent); }
.script-line .issue { color: var(--warn); font-family: var(--font-sans); white-space: normal; }
.script-line .issue[data-severity="error"] { color: var(--danger); }
pre.diff { max-height: 360px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); }
pre.diff .add { color: var(--ok); } pre.diff .del { color: var(--danger); }
pre.json { max-width: 520px; max-height: 240px; overflow: auto; font-size: var(--text-xs); background: var(--surface-2); border: 1px solid var(--border); padding: 6px 8px; border-radius: var(--radius-sm); }
details { margin: 2px 0; }
details > summary { cursor: pointer; }
.tree-child { margin-left: 18px; }

/* ---------- 17. Заказы, администрирование, справочники ---------- */
.intake { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
.intake textarea { width: 100%; }
.intake label { display: block; margin-bottom: 4px; }
.draft-table input { width: 100%; min-width: 100px; }
.draft-table input.seq { min-width: 280px; font-family: var(--font-mono); }
.draft-table select { width: 110px; }
.draft-table select[name=purification] { width: 175px; }
.draft-table th, .draft-table td { padding-left: 6px; padding-right: 6px; }
.draft-table .select { width: 1%; }
.draft-table td[data-errors] { min-width: 200px; font-size: var(--text-sm); }
.draft-table input.narrow { width: 7ch; min-width: 7ch; }
.draft-table tr[data-invalid] > td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.permissions { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-3); }
.permissions fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0; background: var(--surface-2); }
.permissions label.perm { display: block; margin: 4px 0; font-weight: var(--weight-regular); color: var(--text); }
dl.calc { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dl.calc dt { color: var(--muted); } dl.calc dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.group-picker-head { margin: 8px 0 6px; }
.scheme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; max-height: 320px;
  overflow: auto; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.scheme-picker label { display: flex; align-items: baseline; gap: 6px; font-weight: 400; margin: 0; min-width: 0; color: var(--text); }
.scheme-picker label span { overflow-wrap: anywhere; }
.scheme-picker label[hidden] { display: none; }
[data-no-chain] a { display: inline-block; margin-top: 4px; font-weight: var(--weight-semibold); }

/* ---------- 18. Графики <weaver-chart> (uPlot) ---------- */
weaver-chart { display: block; margin: var(--space-2) 0; }
weaver-chart .chart-tools { display: flex; justify-content: flex-end; gap: var(--space-2); }
weaver-chart .uplot, weaver-chart .u-legend { color: var(--text); font-family: var(--font-sans); }
weaver-chart .u-legend { font-size: var(--text-sm); }
/* легенда uPlot — таблица: без оформления таблиц страницы */
weaver-chart .u-legend th, weaver-chart .u-legend td { background: transparent; border: 0; position: static; padding: 2px 4px; color: inherit; }
weaver-chart .u-legend tr:hover > td { background: transparent; }
weaver-chart .u-legend .u-marker { border-radius: 3px; }
weaver-chart .u-select { background: color-mix(in srgb, var(--focus) 20%, transparent); }

/* ---------- 19. Главная: виджеты модулей ---------- */
.dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.dashboard > .slot > .card, .dashboard > .slot > .widget { margin: 0; height: 100%; }
.widget h2 { font-size: var(--text-lg); margin-top: 0; }
.widget h2 a { color: inherit; text-decoration: none; }
.widget h2 a:hover { color: var(--accent); }
.widget-counts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.widget-counts a { text-decoration: none; color: inherit; }
.widget progress { width: 100%; height: 6px; accent-color: var(--accent-solid); }

/* ---------- 20. Справка ---------- */
.help { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: var(--space-4); align-items: start; }
.help-toc { position: sticky; top: var(--space-3); }
.help-toc h2 { font-size: var(--text-md); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.help-toc ol { padding-left: 1.2em; } .help-toc li { margin: 4px 0; }
.help-toc a { text-decoration: none; color: var(--text-2); }
.help-toc a:hover { color: var(--accent); }
.help-toc a[aria-current="page"] { font-weight: var(--weight-bold); color: var(--accent-subtle-text); }
.help-body { max-width: 860px; line-height: 1.65; }
.help-body code, .help-section code { background: var(--surface-2); padding: 0 4px; border-radius: var(--radius-xs); }
.help-section { break-before: page; max-width: 860px; line-height: 1.65; }
.help-cover { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 760px) { .help { grid-template-columns: 1fr; } .help-toc { position: static; } }

/* ---------- 21. Рабочие места: левое меню раздела + панели на всю высоту окна ---------- */
main.workspace-main { max-width: none; padding: var(--space-4) var(--space-5) var(--space-5); }
.workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4); height: calc(100vh - 110px); min-height: 520px; }
.side-menu { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2); overflow-y: auto; }
.side-menu h2 { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); margin: 4px 10px 6px; }
.side-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--text-2); text-decoration: none; font-weight: var(--weight-medium);
  border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.side-menu a:hover { background: var(--surface-2); color: var(--text); }
.side-menu a[aria-current="page"] { background: var(--accent-subtle); color: var(--accent-subtle-text); font-weight: var(--weight-semibold); border-color: color-mix(in srgb, var(--accent) 18%, transparent); }
.side-menu .icon { width: 20px; text-align: center; opacity: .9; }
.side-menu hr { border: 0; border-top: 1px solid var(--border); margin: 8px 6px; }
.side-menu .side-item { display: flex; align-items: center; border-radius: var(--radius-md); }
.side-menu .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-menu a[aria-current="page"] .badge, .side-menu a[aria-current="page"] .muted { color: var(--accent-subtle-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.side-menu a[aria-current="page"] .badge { background: var(--surface); }
.side-menu > * { flex-shrink: 0; }
.work-area { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; }
.work-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
.work-head .title { flex: 1; min-width: 220px; }
.work-head .title small { display: block; font-size: var(--text-2xs); color: var(--muted); font-weight: var(--weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.work-head .title b { font-family: var(--font-mono); font-weight: var(--weight-medium); color: var(--code-accent); font-size: var(--text-md); }
.work-head .support-field { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.work-head .support-field input { width: 6ch; padding: 2px 6px; font-family: var(--font-mono); text-align: right; }
.work-head .picker select { min-width: 220px; }
.toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 3px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.toolbar button, .toolbar a.tool, .toolbar label.tool { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: var(--text); box-shadow: none;
  min-height: 30px; padding: 4px 11px; border-radius: var(--radius-sm); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; margin: 0;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.toolbar button:hover:not(:disabled), .toolbar a.tool:hover, .toolbar label.tool:hover { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-1); }
.toolbar .sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.tool[data-tone="ok"], .toolbar button[data-tone="ok"], .toolbar button[data-tone="ok"]:hover:not(:disabled), .toolbar a.tool[data-tone="ok"]:hover { color: var(--ok-text); }
.tool[data-tone="info"], .toolbar button[data-tone="info"], .toolbar button[data-tone="info"]:hover:not(:disabled), .toolbar a.tool[data-tone="info"]:hover { color: var(--info-text); }
.tool[data-tone="warn"], .toolbar button[data-tone="warn"], .toolbar button[data-tone="warn"]:hover:not(:disabled), .toolbar a.tool[data-tone="warn"]:hover { color: var(--warn-text); }
.tool[data-tone="danger"], .toolbar button[data-tone="danger"], .toolbar button[data-tone="danger"]:hover:not(:disabled), .toolbar a.tool[data-tone="danger"]:hover { color: var(--danger-text); }
/* панель действий над таблицей списка */
.toolbar.page-toolbar { display: inline-flex; margin-bottom: var(--space-3); }
.panes { display: flex; gap: 0; flex: 1; min-height: 0; }
.pane { display: flex; flex-direction: column; min-width: 120px; min-height: 0; overflow: hidden; padding: 0; margin: 0; }
.pane > header { padding: var(--space-3) var(--space-4) var(--space-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pane > header h2 { margin: 0; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: var(--weight-semibold); flex: 1; }
.pane > .pane-body { flex: 1; overflow: auto; padding: 4px var(--space-4) var(--space-4); min-height: 0; }
.pane.grow { flex: 1; }
.pane-body table { width: 100%; font-size: var(--text-sm); }
.pane > header .icon-button { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); min-height: 26px; padding: 1px 8px; margin: 0; font-size: var(--text-md);
  cursor: pointer; box-shadow: none; }
.pane > header .icon-button:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.splitter { width: 12px; flex: 0 0 12px; cursor: col-resize; position: relative; }
.splitter::after { content: ""; position: absolute; left: 5px; top: 35%; bottom: 35%; width: 2px; border-radius: 2px; background: var(--border-strong); transition: background var(--dur-fast) var(--ease), top var(--dur) var(--ease), bottom var(--dur) var(--ease); }
.splitter:hover::after, .splitter.dragging::after { background: var(--accent); top: 20%; bottom: 20%; }
.pane-stack { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.pane-stack > .pane { flex: 1; }
.pane-list { list-style: none; margin: 0; padding: 0; }
.pane-list li a { display: flex; gap: var(--space-2); align-items: baseline; padding: 7px 10px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.pane-list li a:hover { background: var(--surface-2); }
.pane-list li a[aria-current="true"] { background: var(--accent-subtle); color: var(--accent-subtle-text); font-weight: var(--weight-semibold); }
.pane-list li a.inactive { color: var(--muted); font-style: italic; }
.pane-list .kind { margin-left: auto; font-size: var(--text-xs); color: var(--muted); }
.pane-list .meta { margin-left: auto; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.pane-list li a span:first-child { overflow-wrap: anywhere; }
.fields { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--space-2) 14px; align-items: center; max-width: 760px; }
.fields label { margin: 0 0 4px; font-size: var(--text-xs); color: var(--muted); }
.fields input, .fields textarea { width: 100%; }
.fields > span:nth-child(odd), .fields > label { font-size: var(--text-xs); color: var(--muted); }
.panel-sub { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); font-weight: var(--weight-semibold); margin: 14px 0 6px; display: flex; gap: var(--space-2); align-items: baseline; }
.panel-sub:first-child { margin-top: 0; }
/* панели рабочих мест: видимая полоса прокрутки (содержимое ниже края не теряется из виду) */
.side-menu, .pane > .pane-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; scrollbar-gutter: stable; }
.side-menu::-webkit-scrollbar, .pane > .pane-body::-webkit-scrollbar { width: 8px; }
.side-menu::-webkit-scrollbar-thumb, .pane > .pane-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 8px; }
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr; height: auto; }
  .side-menu { flex-direction: row; flex-wrap: wrap; }
  .panes { flex-direction: column; }
  .pane { min-height: 320px; width: auto !important; }
  .splitter { display: none; }
  .fields { grid-template-columns: 1fr; }
}
/* Рабочее место «во весь экран» (редактор протоколов, как asm32): страница не прокручивается, высоту делят
   верхнее меню и рабочее место (меню бывает в одну или две строки), у каждой панели своя прокрутка */
@media (min-height: 560px) and (min-width: 1001px) {
  body:has(main.workspace-main.fit) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(main.workspace-main.fit) > .shell { flex: 1; min-height: 0; }
  /* margin: 0 и ширина 100%: иначе общее правило main { margin: 0 auto } во flex-контейнере сжимает рабочее
     место до содержимого и ставит его по центру (пустой список протоколов — узкая колонка посередине) */
  main.workspace-main.fit { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; width: 100%; box-sizing: border-box; }
  main.workspace-main.fit > .workspace { flex: 1; height: auto; min-height: 0; }
}

/* ---------- 22. Деревья (<weaver-tree>, protocols/_tree.html и деревья на <details>) ---------- */
.tree { list-style: none; margin: 0; padding: 0; font-size: var(--text-md); }
.tree ul { list-style: none; margin: 0; padding-left: 16px; border-left: 1px dashed var(--border-strong); }
.tree details > summary { cursor: pointer; padding: 3px 4px; border-radius: var(--radius-sm); list-style: none; display: flex; gap: 6px; align-items: baseline; }
.tree details > summary::-webkit-details-marker { display: none; }
.tree details > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.tree details[open] > summary::before { content: "▾"; }
.tree summary:hover, .tree .leaf:hover { background: var(--surface-2); }
.tree .leaf { display: flex; gap: 6px; padding: 3px 4px 3px 17px; border-radius: var(--radius-sm); align-items: baseline; }
.tree a.goto { color: var(--text); text-decoration: none; }
.tree a.goto:hover { color: var(--accent); }
.tree .value { margin-left: auto; font-weight: var(--weight-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree .kind { font-size: var(--text-2xs); color: var(--muted); }
.tree .value.vol, .panel-sub .value.vol { color: var(--tree-vol); }
.tree .value.time, .panel-sub .value.time { color: var(--tree-time); }
weaver-tree { display: block; }
weaver-tree .tree-tools { display: flex; gap: 4px; justify-content: flex-end; margin: -4px 0 2px; }
weaver-tree .tree-tools button { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: var(--text-sm); line-height: 1; min-height: 24px; padding: 3px 6px;
  border-radius: var(--radius-sm); margin: 0; cursor: pointer; box-shadow: none; }
weaver-tree .tree-tools button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.tree [role="treeitem"] { outline: none; }
.tree [role="treeitem"]:focus-visible > .tree-row { box-shadow: inset 0 0 0 2px var(--focus); }
.tree .tree-row { display: flex; gap: 6px; align-items: center; padding: 2px 6px; border-radius: var(--radius-sm); cursor: default; min-width: 0; transition: background var(--dur-fast) var(--ease); }
.tree .tree-row:hover { background: var(--surface-2); }
.tree .tree-row.is-current { background: var(--accent-subtle); }
.tree .tree-row .goto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.tree .twisty { width: 12px; flex: 0 0 12px; color: var(--muted); font-size: 11px; text-align: center; cursor: pointer; }
.tree [aria-expanded="false"] > .tree-row .twisty::before { content: "▸"; }
.tree [aria-expanded="true"] > .tree-row .twisty::before { content: "▾"; }
.tree [aria-expanded] > .tree-row { cursor: pointer; }
.tree .ti { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.tree .ti[data-icon="folder"], .tree .ti[data-icon="sigma"] { color: var(--tree-folder); }
.tree .ti[data-icon="step"], .tree .ti[data-icon="column"] { color: var(--tree-step); }
.tree .ti[data-icon="flask"], .tree .ti[data-icon="drop"] { color: var(--tree-drop); }
.tree .ti[data-icon="clock"], .tree .ti[data-icon="repeat"] { color: var(--tree-clock); }
.tree .ti[data-icon="filter"] { color: var(--tree-filter); }
.tree .ti[data-icon="block"] { color: var(--tree-block); }
.tree .tree-edit { background: transparent; border: 1px solid transparent; color: var(--muted); min-height: 0; padding: 0 6px; margin: 0; border-radius: var(--radius-sm); font-size: var(--text-sm);
  line-height: 1.4; cursor: pointer; box-shadow: none; }
.tree .tree-row:hover .tree-edit, .tree .tree-edit:focus { border-color: var(--border); color: var(--text); }
.tree .tree-edit:hover:not(:disabled) { background: var(--surface); color: var(--accent); border-color: var(--border-strong); }
.tree .value + .tree-edit { margin-left: 2px; }
.tree .tree-row > .goto + .tree-edit { margin-left: auto; }
.issues-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.issues-list li { display: flex; gap: var(--space-2); padding: 3px 8px; border-left: 3px solid var(--warn); margin: 3px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--warn) 7%, transparent); }
.issues-list li[data-severity="error"] { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.issues-list li[data-severity="hint"] { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 7%, transparent); }
.issues-list a.goto { white-space: nowrap; color: var(--text); }

/* ---------- 23. Диалоги правки узлов деревьев, блоков PB и карты модификаций ---------- */
.dialog:has(.node-dialog) { max-width: min(1040px, calc(100vw - 32px)); }
.node-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 8px 0; }
.node-tools .field { margin: 0; }
.node-tools .inline { display: inline-flex; gap: 6px; align-items: center; }
.node-table-wrap { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.node-table { width: 100%; font-size: var(--text-sm); }
.node-table code { white-space: nowrap; }
.node-table td.nowrap { white-space: nowrap; }
.node-table input { width: 7em; margin: 0; min-height: 28px; padding: 3px 8px; }
.node-table .field-error { display: block; color: var(--danger); font-size: var(--text-xs); }
[data-pb-dialog] .field-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
[data-pb-dialog] fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; }
[data-pb-dialog] fieldset label { display: flex; gap: 8px; align-items: center; font-weight: normal; margin: 4px 0; }
[data-pb-dialog] fieldset input { width: auto; margin: 0; }
.dialog:has(.modmap-dialog) { max-width: min(1040px, calc(100vw - 32px)); }
.modmap-table select, .modmap-table input { margin: 0; }
.modmap-table input[name^="symbol-"] { width: 9em; }
.modmap-table .field-warn { display: block; color: var(--warn); font-size: var(--text-xs); }
.modmap-table button.icon-only { min-height: 26px; padding: 2px 8px; margin: 0; }
.modmap-table tr[data-added] > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.modmap-warnings { border: 1px solid var(--warn-border); background: var(--warn-subtle); color: var(--warn-text); border-radius: var(--radius-md); padding: 4px 12px; margin: 8px 0; }
.modmap-warnings ul { margin: 4px 0; padding-left: 18px; max-height: none; }
.modmap-picker { margin-top: 12px; }
.modmap-dialog .node-table-wrap { max-height: 38vh; }
.dialog .modmap-results { list-style: none; padding: 0; margin: 4px 0; max-height: 26vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.modmap-results li { padding: 4px 10px; }
.modmap-results li + li { border-top: 1px solid var(--border); }
.modmap-results label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-weight: normal; margin: 0; cursor: pointer; color: var(--text); }
.modmap-results input { width: auto; margin: 0; }
.modmap-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
[data-modmap-view="compact"] { display: inline; }
.editor-pane weaver-script-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; height: auto; margin: 0; }
.editor-pane weaver-script-editor .cm-editor { flex: 1; min-height: 0; height: auto; max-height: none; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.editor-pane weaver-script-editor .cm-scroller { overflow: auto; }

/* ---------- 24. LC-MS: рабочее место записи (лунки | карта Plotly с профилем масс и TIC | автоанализ) ---------- */
.lcms-workspace { grid-template-columns: 290px minmax(0, 1fr); }
/* левое меню LC-MS — ещё и панель управления: загрузка, параметры, запуск анализа */
.side-form { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 10px; margin: 0; }
.side-form label { margin: 4px 0 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted); }
.side-form select, .side-form input[type=file], .side-form textarea { width: 100%; font-size: var(--text-sm); }
.side-form button { margin-top: 6px; width: 100%; }
.side-form small { font-size: var(--text-2xs); line-height: 1.35; overflow-wrap: anywhere; }
.side-form .side-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side-form + .side-form { border-top: 1px dashed var(--border-strong); }
.side-form .htmx-indicator { display: none; font-size: var(--text-xs); }
.side-form.htmx-request .htmx-indicator { display: block; opacity: 1; }
.side-form textarea[data-missing] { outline: 2px solid var(--warn); outline-offset: 1px; }
.lcms-workspace .side-menu { gap: 2px; }
.lcms-workspace .side-menu a, .lcms-workspace .side-menu .side-item { padding: 6px 10px; font-size: var(--text-sm); font-weight: var(--weight-medium); gap: 8px; }
.lcms-workspace .side-menu .icon { width: 30px; font-size: var(--text-2xs); font-weight: var(--weight-bold); font-family: var(--font-mono); }
.plot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; font-size: var(--text-sm); }
.plot-controls button { min-height: 30px; padding: 4px 12px; }
.lcms-plots { display: block; }
.lcms-plots[aria-busy="true"] { opacity: .6; transition: opacity var(--dur) var(--ease); }
.lcms-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 6px; }
.lcms-map-row .lcms-tic { grid-column: 1; }
.lcms-map, .lcms-profile { height: max(320px, calc(100vh - 500px)); min-width: 0; }
.lcms-tic { height: 180px; }
@media (max-width: 1000px) { .lcms-map-row { grid-template-columns: 1fr; } .lcms-profile { height: 200px; order: 3; } }
/* LC-MS: панели растягиваются по содержимому, прокручивается вся страница — все кнопки видны */
.lcms-workspace { height: auto; min-height: calc(100vh - 110px); }
.lcms-workspace .side-menu { overflow: visible; }
.lcms-workspace .panes { flex: 1 0 auto; }
.lcms-workspace .pane { overflow: visible; }
.lcms-workspace .pane > .pane-body { overflow: visible; flex: 1 0 auto; }
/* LC-MS «Быстрый анализ» */
.quick-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.quick-form .wide { grid-column: span 2; }
.quick-form input, .quick-form select { width: 100%; }

/* ---------- 25. Страница образцов стиля (/style-guide) ---------- */
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); font-size: var(--text-xs); }
.sg-swatch > span { display: block; height: 44px; border-bottom: 1px solid var(--border); }
.sg-swatch code { display: block; padding: 6px 8px 0; background: none; border: 0; color: var(--text); font-weight: var(--weight-medium); }
.sg-swatch small { display: block; padding: 0 8px 6px; color: var(--muted); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 var(--space-4); }
.sg-type > * { margin: 4px 0; }
.sg-type .sg-meta { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); margin-left: var(--space-2); font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
.sg-boxes { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.sg-box { width: 72px; height: 56px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: var(--text-2xs); color: var(--muted); }
.sg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.sg-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.sg-toc a { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text-2);
  font-size: var(--text-sm); box-shadow: var(--shadow-1); }
.sg-toc a:hover { color: var(--text); background: var(--surface-2); }

/* ---------- 26. Адаптивность и печать ---------- */
@media (max-width: 700px) {
  main { padding: var(--space-3); }
  th, td { padding: 6px; }
  .topbar { padding: 8px var(--space-3); gap: var(--space-2); }
  .tools select { max-width: 9.5em; }
  .dashboard { grid-template-columns: 1fr; }
  .card { padding: var(--space-4); border-radius: var(--radius-md); }
  .quick-form .wide { grid-column: auto; }
  h1 { font-size: var(--text-xl); }
}
@media print {
  .topbar, .no-print, #toasts, .progress { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .card { box-shadow: none; border-color: #ccc; }
  .drawer, .drawer-toggle, .drawer-scrim { display: none !important; }
}

/* --- конструктор шаблонов <weaver-template-editor> (F7b) --- */
/* Панели острова следуют теме (UI-034); холст макета — всегда светлый, как печатный PDF (UI-035). */
.template-editor { display: block; }
.template-editor-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-bottom: 12px; }
.template-editor-field { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.template-editor-field select, .template-editor-field input { min-width: 6em; }
.template-editor-add { display: flex; gap: 8px; }
.template-editor-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.template-editor-canvas-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--surface-2); }
.template-editor-canvas { position: relative; background: #ffffff; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.template-editor-box { position: absolute; cursor: move; border: 1px dashed rgba(31, 95, 191, .5); padding: 1px 3px; white-space: pre; color: #000; background: rgba(255, 255, 255, .01); user-select: none; }
.template-editor-box.selected { border: 2px solid var(--accent); background: rgba(31, 95, 191, .08); z-index: 5; }
.template-editor-box-image { padding: 0; border-style: solid; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.template-editor-box-table { border-style: solid; background: rgba(255, 255, 255, .6); overflow: hidden; }
.template-editor-table-head { display: flex; font-size: 10px; font-weight: 600; border-bottom: 1px solid #000; background: #eee; }
.template-editor-table-head span { padding: 2px 3px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #ccc; }
.template-editor-panel { flex: 1 1 260px; min-width: 240px; }
.template-editor-properties { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.template-editor-properties label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.template-editor-check { flex-direction: row !important; align-items: center; gap: 6px !important; }
.template-editor-columns { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.template-editor-column-row { display: grid; grid-template-columns: 1.2fr 1.2fr .6fr 1.4fr .6fr auto auto auto; gap: 4px; align-items: center; }
.template-editor-formula-result { font-size: 12px; white-space: nowrap; }
.template-editor-formula-error { color: var(--danger); }
@media (max-width: 900px) { .template-editor-column-row { grid-template-columns: 1fr; } }
/* F32: этикетки, штрихкоды/QR, масштаб просмотра */
.template-editor-canvas-sizer { position: relative; }
.template-editor-canvas { transform-origin: 0 0; }
.template-editor-box-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
/* текстовое поле — без рамки и полей, чтобы позиция на холсте совпадала с печатью; границу рисует outline */
.template-editor-box-field { border: 0; padding: 0; outline: 1px dashed rgba(31, 95, 191, .5); outline-offset: 2px; }
.template-editor-box-field.selected { border: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
.template-editor-frame { position: absolute; border-style: solid; pointer-events: none; }
.template-editor-box-barcode { padding: 0; border-style: solid; display: flex; align-items: center; justify-content: center; overflow: visible; }
.template-editor-box-barcode img { position: absolute; left: 0; top: 0; pointer-events: none; }
.template-editor-barcode-placeholder { font-size: 18px; color: #555; }
.template-editor-box-error { border: 2px solid #c62828 !important; background: rgba(198, 40, 40, .08); }
.template-editor-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.template-editor-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.template-editor-panel-title { font-size: 15px; margin: 0 0 8px; }
.template-editor-hint { font-size: 12px; margin: 0; }
.template-editor-sheet { margin: 0 0 12px; }
.template-editor-sheet summary { cursor: pointer; font-weight: 600; }
.template-editor-sheet-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.template-editor-sheet-grid input { width: 8em; }

/* Карточка протокола: кнопки выбора версии — крупная цель для мыши (F34) */
.versions-table td:first-child { width: 1%; white-space: nowrap; }
.versions-table .version-button { display: inline-flex; align-items: center; justify-content: center; min-width: 7.5rem; min-height: 32px;
  padding: var(--space-1) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--text); font-weight: var(--weight-medium); text-decoration: none; }
.versions-table .version-button:hover { border-color: var(--accent); color: var(--accent); }
.versions-table .version-button[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Список с левой панелью кнопок-фильтров (заказы: фильтр по статусу, как в asm32) (F35) */
.list-with-menu { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.list-with-menu > .side-menu { position: sticky; top: var(--space-4); }
.list-main { min-width: 0; }
.status-menu a .grow { flex: 1; }
.status-menu a .count { min-width: 2.2em; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; font-variant-numeric: tabular-nums; }
.status-menu a[aria-current="page"] .count { background: var(--surface); }
.status-menu .icon[data-tone="accent"] { color: var(--accent); }
.status-menu .icon[data-tone="info"] { color: var(--info); }
.status-menu .icon[data-tone="ok"] { color: var(--ok); }
.status-menu .icon[data-tone="warn"] { color: var(--warn); }
.status-menu .icon[data-tone="danger"] { color: var(--danger); }
@media (max-width: 760px) {
  .list-with-menu { grid-template-columns: minmax(0, 1fr); }
  .list-with-menu > .side-menu { position: static; flex-direction: row; flex-wrap: wrap; }
  .status-menu h2, .status-menu hr { display: none; }
}
/* Настройки расчёта клик-химии (F45): разделы с пояснениями по протоколу */
.click-settings { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0 0 var(--space-3); min-width: 0; }
.click-settings legend { font-weight: var(--weight-semibold); padding: 0 var(--space-1); }
.settings-steps { width: auto; margin: var(--space-2) 0; }
.settings-steps input { width: 8rem; }
.settings-steps thead th { position: static; }

/* оператор: тариф лаборатории в строке таблицы */
.operator-plan { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.operator-plan select { width: auto; }
.operator-plan label { display: inline-flex; gap: .25rem; align-items: center; margin: 0; white-space: nowrap; }