/* system.css — this system's own look: page frame, components, layout.
   Designed in Shape and approved by Yarik; loaded after foundations.css by every page and mockup.
   Build it only from foundation tokens (var(--…) or calc() of tokens). The accent and density are set
   with data-accent and data-density on <html>. How to design it: ui/rules.md → How to design a system.

   placement-recon: data-accent="ink", data-density regular; address tables compact (brief → Screens). */

/* ---------- page frame: top bar ---------- */
.app-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.app-bar__inner {
  display: flex; align-items: center; gap: var(--space-5);
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-5);
  height: calc(var(--space-7) + var(--space-2));
}
.app-bar__name { font-weight: var(--weight-semibold); color: var(--text); text-decoration: none; white-space: nowrap; }
.app-bar__name:hover { color: var(--text); text-decoration: none; }
.app-nav { display: flex; align-self: stretch; gap: var(--space-1); }
.app-nav a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3);
  color: var(--text-secondary); text-decoration: none; font-weight: var(--weight-medium);
  border-bottom: 2px solid transparent;
}
.app-nav a:hover { color: var(--text); background: var(--bg-subtle); text-decoration: none; }
.app-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.app-bar__user { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.app-bar__role { color: var(--text-muted); }

/* a count next to a nav item or a heading: accent pill, never the only signal */
.count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(var(--space-5) - var(--space-1)); padding: 0 var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.6; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-lg);
}
.count[data-state="warn"] { color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-border); }

/* ---------- source strip: the date of every input, under the bar on every page ---------- */
/* slice 19 (Yarik, 06.11): one banner under the header, each source a tag «Liqvid · 05.11 06:55»; amber only when a read is
   late (D-182 (a)) */
.sources-band { background: var(--bg-subtle); border-bottom: 1px solid var(--border-soft); }
.sources {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.sources__item { white-space: nowrap; padding: 0 var(--space-2); line-height: 1.8; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sources__item[data-state="warn"] { background: var(--warn-soft); border-color: var(--warn-border); }
.sources__item:has(code) { white-space: normal; }  /* D-132 (a): the command that lifts the M-Soft stop wraps, never off the page */
.sources__item code { overflow-wrap: anywhere; }
.sources__item strong { color: var(--text); font-weight: var(--weight-medium); }
.sources__item[data-state="warn"] { color: var(--warn); }
.sources__item[data-state="warn"] strong { color: var(--warn); }
.sources__item[data-state="warn"]::before { content: "! "; font-weight: var(--weight-semibold); }
/* D-68: a РК whose M-Soft period ends before it starts, on its row on «Сверка»: amber, the mark the source line uses */
.period-warn { color: var(--warn); }
.period-warn::before { content: "! "; font-weight: var(--weight-semibold); }

/* ---------- page ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-8); }
.page > .notice { margin-bottom: var(--space-4); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-head h1 { margin: 0; }
.page-head__sub { margin: var(--space-1) 0 0; color: var(--text-muted); }
.page-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.section { margin-top: var(--space-6); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.section__head h2 { margin: 0; font-size: var(--text-lg); }
.section__head p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.section__head--stack { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.section__head--stack p { max-width: 72ch; }
/* rules the reader needs, as a short list in the body colour (fix 3 of 23.10), not a grey paragraph */
.rules { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); max-width: 80ch; font-size: var(--text-sm); color: var(--text); }
.rules li::marker { color: var(--text-secondary); }
/* «Кампании с отклонениями» on «Сверка» (slice 19, Yarik 06.11): the list's rules in the «Как читать» panel of «Экраны», two
   columns of short lines, each with an accent mark, the same text size and gaps as the panel's rows */
.legend--rules .rules { list-style: none; padding: 0; max-width: none; margin: var(--space-2) 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
.legend--rules .rules li { position: relative; padding-left: var(--space-4); }
.legend--rules .rules li::before { content: ""; position: absolute; left: var(--space-1); top: calc(var(--text-sm) * var(--leading-normal) / 2 - var(--space-1) / 2);
  width: var(--space-1); height: var(--space-1); border-radius: var(--radius-sm); background: var(--accent); }
@media (max-width: 720px) { .legend--rules .rules { grid-template-columns: minmax(0, 1fr); } }

/* ---------- key figures: the dashboard strip ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-8) * 2.2), 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi {
  display: grid; gap: var(--space-1); align-content: start;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none;
}
a.kpi:hover { border-color: var(--border-input); box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; }
.kpi__label { font-size: var(--text-sm); color: var(--text-muted); }
.kpi__value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.kpi__note { font-size: var(--text-sm); color: var(--text); }
.kpi__unit { font-size: var(--text-xs); color: var(--text-secondary); }  /* D-183 (a): «конструкции · 215 экранов» under the number */
/* fix 2 of 23.10: «N РК ждут связи» as an amber pill under the %, outside it; the error breakdown one type a line with the
   status badge of the tables and the number right-aligned; the rule in a short hint under them, readable (≥ 4.5:1) */
.kpi__pill { justify-self: start; padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.6;
  color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: var(--radius-lg); white-space: nowrap;
  margin-bottom: calc(var(--space-1) / 2); }  /* the big number's line box ends below its digits: the same gap seen above and below */
/* D-67 (a), 23.10: a card narrower than the pill (eight cards a row on «Сверка», and on paper) stacks it in two lines,
   «47 РК» / «ждут связи», as wide as the longer one; it never runs into the card's padding */
.kpi { container-type: inline-size; }
@container (width < 8.5rem) {
  .kpi__pill { display: grid; padding: var(--space-1) var(--space-2); line-height: var(--leading-tight); }
}
.kpi__items { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.kpi--wide { grid-column: span 2; }  /* «Ошибки»: room for a badge and its number on one line */
.kpi__items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text); }  /* chip left, count right (the Show of slice 13) */
.kpi__items .status { justify-self: start; max-width: 100%; }
.kpi__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); color: var(--text); min-width: calc(var(--space-6)); white-space: nowrap; }
.kpi__hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }
.kpi[data-state="bad"] { border-left: 3px solid var(--bad); }
.kpi[data-state="warn"] { border-left: 3px solid var(--warn); }
.kpi[data-state="bad"] .kpi__value { color: var(--bad); }
.kpi[data-state="warn"] .kpi__value { color: var(--warn); }

/* ---------- toolbar: day switch and filters above a table ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); }
.toolbar .field { margin: 0; min-width: calc(var(--space-8) * 2.5); }
.toolbar .field--narrow { min-width: calc(var(--space-8) * 2); }
.toolbar__end { margin-left: auto; display: flex; gap: var(--space-2); align-items: flex-end; }
/* the name of a group of buttons, styled as a label (a label names one control) */
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }

/* a segmented switch, e.g. «Сегодня, 15.10» / «Завтра, 16.10» */
.seg { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); }
.seg button { height: var(--control-h); border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--text-secondary); font-weight: var(--weight-medium); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { background: var(--bg-subtle); color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.seg a.btn { height: var(--control-h); border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--text-secondary); font-weight: var(--weight-medium); text-decoration: none; }  /* «Экраны»: the contractor as links (slice 13) */
.seg a.btn + a.btn { border-left: 1px solid var(--border); }
.seg a.btn:hover { background: var(--bg-subtle); color: var(--text); }
.seg a.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.table-wrap--wrap .status { white-space: normal; }
/* «Экраны» (the Show of slice 13): the filters in one row, the «Как читать» panel, the line «Показано N из M» */
.toolbar--row { display: grid; grid-template-columns: minmax(calc(var(--space-8) * 3.2), 1.2fr) auto minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr) auto;
  align-items: end; gap: var(--space-2); margin-bottom: var(--space-2); }
.toolbar--row .field { min-width: 0; }
.toolbar--row .field label, .toolbar--row .field__label { font-size: var(--text-xs); line-height: var(--leading-tight); }
.toolbar--row select, .toolbar--row input { width: 100%; min-width: 0; }
.toolbar--row button { height: var(--control-h); }
.shown-line { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
/* «Экраны»: the nine columns share the width and their contents wrap, so nothing needs a sideways scroll from 1024 px; every
   chip of «Состояние» starts at the cell's edge, the screens under a construction are indented in «Конструкция · экран» (Yarik, 01.11) */
.table-wrap--screens table { table-layout: fixed; width: 100%; }
.table-wrap--screens th, .table-wrap--screens td { white-space: normal; overflow-wrap: anywhere; }
.table-wrap--screens .status { white-space: normal; max-width: 100%; }
.table-wrap--screens .code { white-space: normal; }
.table-wrap--screens .c-state { width: 11%; } .table-wrap--screens .c-code { width: 10%; } .table-wrap--screens .c-place { width: 15%; }
.table-wrap--screens .c-cab { width: 10%; } .table-wrap--screens .c-last { width: 11%; }
.table-wrap--screens .c-rolik { width: 9%; } .table-wrap--screens .c-plays { width: 7%; } .table-wrap--screens .c-disk { width: 7%; } .table-wrap--screens .c-sold { width: 12%; }
/* slice 16: the plays of the last 7 days on «Экран», one line of days */
.plays-week { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); }
.plays-week li { display: inline-flex; gap: var(--space-2); align-items: baseline; font-variant-numeric: tabular-nums; }
.plays-week__day { color: var(--text-secondary); }
.plays-week strong[data-state="warn"] { color: var(--warn); }
.field--check { justify-content: flex-end; } .field--check .check { white-space: nowrap; }
.legend { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.legend > summary { cursor: pointer; font-weight: var(--weight-medium); color: var(--text-secondary); }
.legend__rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.legend__rows dt, .legend__rows dd { margin: 0; }  /* a list: each state's chip, and its description to the right (Yarik, 01.11) */
.legend__rows .status { justify-self: start; }
.legend__last { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 1100px) { .toolbar--row { grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-8) * 2), 1fr)); } }
@media print { [data-tab-panel][hidden] { display: block !important; } .legend { display: none; } .legend--rules { display: block; } .legend--rules > summary { display: none; } .legend--rules::details-content { content-visibility: visible; display: contents; } }  /* «Экран»: «В расписании, экран не показывает» twice in a half-width panel (slice 13) */
/* The contractor tabs of «Сверка» and «РК» (B-1): «Все» · «Liqvid» · «Visiobox», the chosen one underlined in the accent */
.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border); margin: var(--space-4) 0; }
.tabs a { padding: var(--space-2) 0; color: var(--text-secondary); text-decoration: none; font-weight: var(--weight-medium); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

/* ---------- tables of this system ---------- */
.table-wrap--tall { max-height: calc(var(--space-8) * 9); }
/* «Связано автоматически»: long cabinet names and file names («260917_RIIL_1080x1920_20s_VUZ.mp4») wrap inside their cells, so
   the table fits its box at 1280 px; the campaign number and the button stay whole (23.10) */
.table-wrap--auto td { overflow-wrap: anywhere; }
.table-wrap--auto td.code, .table-wrap--auto td.actions { overflow-wrap: normal; }
.table-wrap--auto td:nth-child(3), .table-wrap--auto td:nth-child(4) { min-width: calc(var(--space-8) * 3.5); }
td .line { display: block; }
td .sub { display: block; font-size: var(--text-sm); color: var(--text-muted); }
td .summary { display: block; font-size: var(--text-sm); color: var(--text-secondary); }
/* «какие»: the linked campaigns a «Нет размещения» row counts instead of naming (fix 5 of 23.10) */
.what-more > summary { display: inline; cursor: pointer; font-size: var(--text-sm); color: var(--accent-strong); }
td .history { display: block; font-size: var(--text-sm); color: var(--text-muted); }
td.actions { text-align: right; white-space: nowrap; }
td.actions .stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
tr.is-link { cursor: pointer; }
/* «Сверка» shows two rows of a РК with the same statuses and folds the rest behind «… ещё N»; print shows every row */
tr.more { display: none; }
.chips__note { margin: var(--space-2) 0; }
.fold__note { padding: 0 var(--space-4); }
/* each list of «Расхождения» exports on its own (slice 17): the button on the list's heading, at its right, centred on the text and
   visible with the list closed (Yarik, 05.11: inside the open list it ran into the border). A flex heading has no browser
   triangle, so it draws its own, turned down when open. */
.fold > summary.fold__head { display: flex; align-items: center; gap: var(--space-3); list-style: none; padding-top: var(--space-2); padding-bottom: var(--space-2); min-height: calc(var(--control-h) + var(--space-2) * 2); }
.fold > summary.fold__head::-webkit-details-marker { display: none; }
.fold > summary.fold__head::before { content: ""; flex: none; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.fold[open] > summary.fold__head::before { transform: rotate(90deg); }
.fold__head .fold__title { min-width: 0; }
.fold__head .btn { flex: none; margin-left: auto; }
.code { font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; }
/* «В кабинете»: a Visiobox construction can carry several six-digit campaigns, so the list wraps between them */
td .sub.code { white-space: normal; }

/* % соответствия: number plus a thin meter; the number carries the meaning */
.meter { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.meter__bar { width: calc(var(--space-8) + var(--space-4)); height: var(--space-1); background: var(--neutral-soft); border-radius: var(--radius-sm); overflow: hidden; }
.meter__bar > span { display: block; height: 100%; background: var(--ok); }
.meter[data-state="warn"] .meter__bar > span { background: var(--warn); }
.meter[data-state="bad"] .meter__bar > span { background: var(--bad); }

/* rows that are fine fold away under the problems */
.fold { margin-top: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fold > summary { padding: var(--space-3) var(--space-4); cursor: pointer; color: var(--text-secondary); font-weight: var(--weight-medium); }
.fold > summary:hover { color: var(--text); }
.fold[open] > summary { border-bottom: 1px solid var(--border-soft); }
.fold > .table-wrap { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* an empty list says so and says what to do next */
.empty { padding: var(--space-6) var(--space-5); text-align: center; color: var(--text-secondary); background: var(--bg-surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.empty strong { display: block; margin-bottom: var(--space-1); color: var(--text); }

/* ---------- panels and cards ---------- */
.panel { padding: var(--space-4) var(--space-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.panel + .panel { margin-top: var(--space-3); }
.panel h3 { margin-bottom: var(--space-2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-2 > .panel + .panel { margin-top: 0; }
.app-bar__user form { margin: 0; }
/* «Журнал загрузок»: short columns stay on one line, the result wraps */
.log td.short { white-space: nowrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; color: var(--text); }

/* a Liqvid campaign waiting for a link */
.camp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-5); }
.camp__title { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; font-size: var(--text-lg); }
.camp__meta { font-size: var(--text-sm); color: var(--text-muted); }
.camp__title .code { font-size: inherit; font-weight: var(--weight-semibold); }
.camp__actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
.cand { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); grid-column: 1 / -1; }
.cand li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.cand li:hover { background: var(--bg-subtle); }
.cand__overlap { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.camp__wide { grid-column: 1 / -1; margin: 0; }
.camp { scroll-margin-top: calc(var(--space-7) + var(--space-2) + var(--space-4)); }  /* a refused card, opened at #c-…, stays clear of the sticky top bar */
.camp__other { max-width: calc(var(--space-8) * 4); }
.inline-form { display: inline; }

/* linked campaigns on a РК page: a summary, then every campaign in a small table behind a toggle (fix 1 of 23.10); the two
   panels of the row keep their own height, so «План M-Soft» never stretches beside a long list */
.grid-2--top { align-items: start; }
.links-summary { margin: 0; font-weight: var(--weight-medium); }
.links-how { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.links-fold { margin-bottom: var(--space-3); }
.links-fold > summary { cursor: pointer; color: var(--accent-strong); font-weight: var(--weight-medium); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.table-wrap--links { max-height: calc(var(--space-8) * 5); }
.table-wrap--links table { table-layout: fixed; font-size: var(--text-sm); }
.table-wrap--links td { vertical-align: top; overflow-wrap: break-word; }
.table-wrap--links th { white-space: normal; }
.table-wrap--links th:nth-child(1) { width: 16%; }
.table-wrap--links th:nth-child(2) { width: 14%; }
.table-wrap--links th:nth-child(3) { width: 28%; }
.table-wrap--links th:nth-child(4) { width: 20%; }
.table-wrap--links td .code, .table-wrap--links td.code { white-space: normal; }
.links-note { margin: var(--space-2) 0 0; color: var(--text-secondary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); min-height: calc(var(--control-h) - var(--space-2)); font-size: var(--text-sm); background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-sm); }

/* ---------- screens (slice 13, 2026-10-29): «Экраны» and «Экран» ---------- */
/* a construction's group row heads its screens; the screens under it are indented */
tr.group > td { background: var(--bg-subtle); font-weight: var(--weight-medium); }
tr.group .sub { font-weight: var(--weight-regular); }
td.indent { padding-left: calc(var(--cell-px) + var(--space-4)); }
.flag { font-size: var(--text-sm); color: var(--text-secondary); }
/* the 7-day hour grid: one row a day, 24 hours, the working hours shaded; every cell has a symbol, never colour alone */
.hours { display: grid; grid-template-columns: max-content repeat(24, minmax(0, 1fr)) max-content; gap: calc(var(--space-1) / 2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.hours__head { color: var(--text-muted); text-align: center; }
.hours__day { padding-right: var(--space-2); color: var(--text-secondary); white-space: nowrap; align-self: center; }
.hours__sum { padding-left: var(--space-2); color: var(--text); text-align: right; white-space: nowrap; align-self: center; }
.hours__cell { display: grid; place-items: center; min-height: var(--space-5); border-radius: var(--radius-sm); color: var(--text-muted); border: 1px solid transparent; }
.hours__cell[data-work] { border-color: var(--border-input); background: var(--bg-subtle); }
.hours__cell[data-work][data-state="ok"] { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok); }
.hours__cell[data-work][data-state="bad"] { background: var(--bad-soft); border-color: var(--bad-border); color: var(--bad); }
.hours__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.hours__legend .hours__cell { display: inline-grid; width: var(--space-5); margin-right: var(--space-1); }

/* ---------- upload ---------- */
.drop {
  display: grid; gap: var(--space-2); justify-items: start;
  padding: var(--space-4); background: var(--bg-subtle);
  border: 1px dashed var(--border-input); border-radius: var(--radius-md);
}
.drop input[type="file"] { font: inherit; font-size: var(--text-sm); }
.drop .field { margin: 0; }
.drop .about { margin: 0; }
/* «Загрузки» (slice 19): one spacing for every panel — a form under its facts, a notice or a line in a panel, its «Подробнее» */
.upload-form { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.upload-form .notice, .upload-form .field { margin: 0; }
.upload-form__submit { margin: 0; }
.panel__notice { margin: var(--space-3) 0; }
.panel__line { margin: var(--space-2) 0 0; }
.panel__lead { margin: 0; }
.panel__about { margin: var(--space-1) 0 var(--space-2); }

/* ---------- dialog ---------- */
.scrim { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: var(--space-5); background: color-mix(in srgb, var(--gray-900) 32%, transparent); }
.dialog { width: min(100%, calc(var(--space-8) * 9)); max-height: 100%; overflow: auto; padding: var(--space-5); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.dialog h2 { font-size: var(--text-lg); }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
dialog.dialog { border: 0; color: var(--text); }
dialog.dialog::backdrop { background: color-mix(in srgb, var(--gray-900) 32%, transparent); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* ---------- sign-in ---------- */
.signin { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); }
.signin .panel { width: min(100%, calc(var(--space-8) * 6)); padding: var(--space-6); }
.signin h1 { font-size: var(--text-xl); }

/* ---------- slice 19 (Yarik's review of 06.11): short visible text, the rest behind «Подробнее» ---------- */
/* «Подробнее»: a native toggle holding the sentences a page used to show in full; no rule is removed, it moves here */
.about { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 80ch; }
.about > summary { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; list-style: none;
  color: var(--accent-strong); font-weight: var(--weight-medium); }
.about > summary::-webkit-details-marker { display: none; }
.about > summary::after { content: ""; width: 0; height: 0; border-top: 4px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.about[open] > summary::after { transform: rotate(180deg); }
.about[open] > summary { margin-bottom: var(--space-1); }
.about p, .about ul { margin: 0 0 var(--space-1); }
.about ul { padding-left: var(--space-5); }
.page-head .about { margin-top: var(--space-1); }
/* a block's caption: one line under the block it explains, its full text in «Подробнее» beside it («Экран») */
.caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.caption > .about { margin: 0; flex-basis: 100%; }
.caption > .about:not([open]) { flex-basis: auto; }
/* an empty list inside a fold, padded as the fold's heading is: the same on every list of «Расхождения» */
.fold__empty { margin: 0; padding: var(--space-3) var(--space-4); color: var(--text-secondary); }

/* the filters of «Экраны» and «Сверка» as one card above the table: one grid, five equal columns on both pages, labels on one
   line above their controls, equal gaps; «Применить» (or «Сбросить фильтры») ends the last row */
.filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: var(--space-3) var(--space-4);
  padding: var(--space-4); margin: 0 0 var(--space-3); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.filters .field { margin: 0; min-width: 0; display: grid; gap: var(--space-1); align-content: start; }  /* labels on one line at the top, so an error under a control never moves the row */
.filters .field > label, .filters .field > .field__label { font-size: var(--text-sm); line-height: var(--leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filters select, .filters input:not([type="checkbox"]) { width: 100%; min-width: 0; height: var(--control-h); }
.filters .field--wide { grid-column: span 2; }
.filters .seg { display: flex; width: 100%; box-sizing: border-box; height: var(--control-h); }  /* its border inside the control height, so its label lines up */
.filters .seg > * { height: 100%; }
.filters .seg > * { flex: 1 1 0; justify-content: center; text-align: center; white-space: nowrap; padding-left: var(--space-2); padding-right: var(--space-2); }
.filters .field--check .check { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); margin: 0; }
.filters .filters__end { display: flex; justify-content: flex-end; gap: var(--space-2); grid-column: -2 / -1;
  margin-top: calc(var(--text-sm) * var(--leading-tight) + var(--space-1)); }  /* one label line down: on the controls' line */
.filters .filters__end > * { height: var(--control-h); }
.filters .field__error { white-space: normal; }
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .filters { grid-template-columns: minmax(0, 1fr); } .filters .field--wide, .filters .filters__end { grid-column: auto; } }

/* «Новые кампании»: a card's second line, its one-line hint, and the «Проверить ролики» toggle */
.camp__line2 { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.camp__hint { margin: 0; font-size: var(--text-sm); color: var(--text); }
.camp__media { max-width: none; }  /* «Проверить ролики»: the «Подробнее» toggle, holding the ролик box */
.camp__media[open] > summary { margin-bottom: var(--space-2); }
.camp__temp { margin: 0; }
.camp__temp, .camp__hint, .camp__temp .check { max-width: none; }
.caption > .camp__title { margin: 0; }
.camp__more { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); }
.camp__more > details { margin: 0; }
.camp__more > details[open] { flex-basis: 100%; }  /* an open toggle takes the card's width; closed, the two sit on one line */

/* ---------- small screens: nothing breaks at 1024px ---------- */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .app-bar__inner, .sources, .page { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ---------- phones: the top bar wraps, the views get their own line ---------- */
@media (max-width: 720px) {
  .app-bar__inner { flex-wrap: wrap; height: auto; gap: 0 var(--space-3); padding-top: var(--space-2); }
  .app-bar__user { min-width: 0; }
  .app-bar__user > span { overflow: hidden; text-overflow: ellipsis; }
  .app-nav { order: 3; flex: 1 0 100%; height: calc(var(--space-6) + var(--space-2)); overflow-x: auto; margin: 0 calc(var(--space-3) * -1); }
  .app-nav a { white-space: nowrap; }
  .sources__item { white-space: normal; }  /* «Visiobox: 15.10, 06:10 · 6 кабинетов» is wider than a phone (2026-10-29) */
  .log td.short { white-space: normal; }
  .log td.result { min-width: calc(var(--space-8) * 3); }
  .toolbar .field { min-width: 0; max-width: 100%; }
  .seg { display: flex; flex-wrap: wrap; }
  .seg button { flex: 1 1 auto; }
  .seg button + button { border-left: 0; }
  .cand li { grid-template-columns: auto minmax(0, 1fr); }
  .cand__overlap { grid-column: 2; white-space: normal; }
  .camp { grid-template-columns: minmax(0, 1fr); }
  .camp__actions { flex-wrap: wrap; justify-content: flex-start; }
  .dialog .field-row { grid-template-columns: minmax(0, 1fr); }
  .dialog input[type="date"] { width: 100%; min-width: 0; }
}

/* ---------- print: the deviation list on paper ---------- */
/* «Краткий отчёт» (R-21): one A4 sheet across, its «По РК» table small enough to fit: the 16 count columns carry their
   names upright, so a column is as wide as its numbers */
.print-a4 { page: a4-landscape; }
@page a4-landscape { size: A4 landscape; margin: 12mm; }
.table-wrap--narrow { max-width: calc(var(--space-8) * 16); }
tbody tr:last-child th[scope="row"] { border-bottom: 0; }  /* a row header ends its table as its cells do */
.table-wrap--report th.vert { vertical-align: bottom; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.table-wrap--report th.vert > span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; }
.table-wrap--report td:nth-child(2) { min-width: calc(var(--space-8) * 3.5); }
.table-wrap--report td:nth-child(4) { white-space: nowrap; }

/* «Сверка», «РК» and «Краткий отчёт» fit from 1024 px, as «Экраны» does (D-121 (a), Yarik 01.11): below 1280 px the headers,
   chips and codes of their tables may wrap, long words break inside their cell, and the cells pad less; numbers stay whole */
@media (max-width: 1279px) {
  .table-wrap th, .table-wrap .status, .table-wrap .code, .table-wrap td .sub.code { white-space: normal; }
  .table-wrap td { overflow-wrap: anywhere; }
  .table-wrap td.num, .table-wrap td.actions { overflow-wrap: normal; }
  .table-wrap th, .table-wrap td { padding-left: var(--space-2); padding-right: var(--space-2); }
  .table-wrap--report td:nth-child(2) { min-width: calc(var(--space-8) * 2.5); }
  .table-wrap--report th, .table-wrap--report td { padding-left: var(--space-1); padding-right: var(--space-1); }
  .table-wrap--auto td:nth-child(3), .table-wrap--auto td:nth-child(4) { min-width: calc(var(--space-8) * 2.5); }
}

@media print {
  .about > summary { display: none; }
  .about::details-content { content-visibility: visible; display: contents; }  /* the rules print in full, open or not */
  .app-bar, .toolbar, .filters, .scrim, .page-head__actions, td.actions, th.actions { display: none !important; }
  .table-wrap--report table { font-size: 8pt; }
  .table-wrap--report th, .table-wrap--report td { padding: 2px 4px; }
  .sources { padding: 0 0 var(--space-2); color: var(--text); }
  .page { padding: 0; max-width: none; }
  .kpi { border: 1px solid var(--text); }
  .kpi__value, .kpi[data-state] .kpi__value, .kpi__pill { color: var(--text); }
  .kpi__pill { background: none; border-color: var(--text); }
  .fold > summary, .fold > summary.fold__head { display: none; }
  .fold:not([open]) { display: none; }
  .table-wrap--tall, .table-wrap--links { max-height: none; }
  /* «Кампании этого РК» prints its whole table, open or not; the toggle and the link button stay off paper */
  .grid-2--top { grid-template-columns: minmax(0, 1fr); }  /* the campaigns table at full width on paper */
  .links-fold > summary, .what-more > summary { display: none; }
  .what-more::details-content { content-visibility: visible; display: contents; }
  .links-fold::details-content { content-visibility: visible; display: contents; }
  #links .btn { display: none; }
  .meter__bar { display: none; }
  tr.more { display: table-row; }
  tr.more-line { display: none; }
  .hours__cell { border-color: var(--text) !important; }  /* the shading may not print: the working hours keep a frame */
  .hours__cell:not([data-work]) { border-color: transparent !important; }
}