/* Оформление TMS — дизайн-система HT Lab (Atlas), основа взята из кабинета
   «Курсив»: бирюза #02778B для действий и навигации, тёплый #D8631A — только
   для того, что ждёт человека (черновики на разборе, ничьи строки рана),
   светлый фон и белые поверхности. Шрифт Mulish лежит локально.

   TMS — рабочий инструмент: таблицы плотные (строка ~36px), фокус виден
   всегда, цифры табличные — на них держится чтение прогресса рана. */

@font-face {
  font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/mulish-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/mulish-latin.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;
}

/* Токены — блок :root Курсива (static/style.css) целиком, имена те же:
   правило, написанное для одного продукта, читается и в другом. Сверху
   только статусы результата TMS. */
:root {
  color-scheme: light;
  /* поверхности и текст */
  --paper: #F5F8F9; --card: #FFFFFF; --surface-2: #F7FAFB;
  --text: #16232A; --muted: #61717A; --text-3: #97A5AB;
  --line: #E2E9EB; --line-strong: #CBD8DA;
  /* действие — бирюза */
  --ink: #02778B; --ink-deep: #015E6E; --ink-pressed: #014E5C;
  --ink-soft: #E1F0F2; --ink-soft-2: #CCE8EB; --ink-mid: #7FC3CE;
  /* Тёплый — только то, что ждёт человека: черновики на разборе, ничьи строки. */
  --accent: #D8631A; --warm-strong: #B5500F; --warm-tint: #FDEEDC; --warm-tint-2: #F7D6AE;
  --warm-soft: #E58A4C;
  --err: #B93A22; --err-tint: #FCE8E1;
  --ok: #137A46; --ok-tint: #E9F3E4;
  --warn: #B5500F;
  --r-ctl: 8px; --r-card: 12px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(15,40,45,.04), 0 4px 14px -6px rgba(15,40,45,.10);
  --shadow-pop: 0 10px 24px -10px rgba(15,40,45,.22), 0 2px 6px rgba(15,40,45,.06);
  --ring: 0 0 0 3px var(--ink-soft-2);
  --font: "Mulish", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Статусы результата: P пройдено, U не пройдено, B заблокировано,
     S пропущено, N не проверено, T техническая без проверки.
     B — янтарь, а не тёплый: тёплый в семействе значит «ждёт человека»
     (ничья строка), и заблокированная строка не должна с ним сливаться.
     Тон взят у Курсива (#7A5A00 — «отмечено» в его списке отправок).
     S и T холодные нейтральные и различаются между собой: S сплошной,
     T пунктиром/штриховкой. */
  --st-P: var(--ok); --st-P-bg: var(--ok-tint);
  --st-U: var(--err); --st-U-bg: var(--err-tint);
  --st-B: #7A5A00; --st-B-bg: #FBF3D9;
  --st-S: var(--muted); --st-S-bg: #EAEFF1;
  --st-N: var(--text-3); --st-N-bg: var(--surface-2);
  --st-T: var(--muted); --st-T-bg: var(--card);
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--paper); color: var(--text); font: 15px/1.55 var(--font);
  min-height: 100vh; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: #fff; }
a { color: var(--ink); text-underline-offset: 2px; }
a:hover { color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
h1 + .sub { margin-top: 4px; }
h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
h3 { font-size: 15px; font-weight: 800; }
/* Заголовок раздела прямо в потоке страницы — с воздухом сверху, как у
   Курсива; внутри карточек отступы даёт сетка карточки. */
.content > h2 { margin-top: 14px; }
.sub { color: var(--muted); font-size: 13px; font-weight: 600; }
.muted { color: var(--muted); }
.mono, code { font-family: var(--mono); font-size: 12.5px; }
/* Подпись поля или блока — обычный регистр, как у плиток и форм Курсива;
   капс остаётся только шапкам таблиц. */
.label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pre { white-space: pre-wrap; }
.stack { display: grid; gap: 8px; align-content: start; }
.stack-lg { display: grid; gap: 14px; align-content: start; }
.stack.gap-16 { gap: 16px; }
.minw0 { min-width: 0; }
.empty { color: var(--muted); font-size: 13px; padding: 14px 0; }
.empty-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px; color: var(--muted); display: grid; gap: 10px; justify-items: start; }
::placeholder { color: var(--text-3); opacity: 1; }

/* --- оболочка: меню слева, содержимое справа ---
   Меню — nav.side Курсива: белая колонка 236px, знак-квадрат, пункты
   13.5/700 со значками, текущий — бирюзовый тинт с обводкой 1.5px.
   Колонка тянется на всю высоту оболочки, а не окна: иначе на длинной
   странице фон меню обрывался после первого экрана. Липнет к окну
   только содержимое меню (.side-inner). */
.shell { display: flex; min-height: 100vh; }
.icon { width: 18px; height: 18px; flex: none; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
nav.side { width: 236px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line); }
.side-inner { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex;
  flex-direction: column; padding: 18px 12px 16px; }
.side-head { display: flex; align-items: center; gap: 8px; }
nav.side .brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: var(--text); text-decoration: none; padding: 2px 8px 18px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--ink); color: #fff;
  display: grid; place-items: center; font: 800 17px/1 var(--font); letter-spacing: -.02em; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font: 800 15.5px/1.2 var(--font); letter-spacing: -.01em; }
nav.side .brand small { display: block; color: var(--text-3); font: 600 11.5px/1.3 var(--font);
  margin-top: 1px; white-space: nowrap; }
.side-toggle, .side-switch { display: none; }
nav.side .items { display: flex; flex-direction: column; gap: 2px; }
nav.side .items a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--muted);
  text-decoration: none; border-radius: 9px; border: 1.5px solid transparent; font: 700 13.5px/1.3 var(--font); }
nav.side .items a .icon { color: var(--text-3); }
nav.side .items a:hover { background: var(--surface-2); color: var(--text); }
nav.side .items a.active { background: var(--ink-soft); border-color: var(--ink); color: var(--ink-deep); }
nav.side .items a.active .icon { color: var(--ink-deep); }
/* Счётчик — сплошной тёплый: черновики ждут человека. */
nav.side .items .n { min-width: 22px; text-align: center; margin-left: auto; font: 800 11px/1.7 var(--font);
  background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; }
nav.side .foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.foot-name { color: var(--muted); font-size: 12.5px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signout { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-ctl);
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer;
  font: 700 12.5px var(--font); }
.signout .icon { width: 16px; height: 16px; }
.signout:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
/* Содержимое — до 1220px, как main Курсива; списки кейсов и ран — во всю
   ширину: там таблица и карточка строки рядом. */
.content { flex: 1; min-width: 0; max-width: 1220px; padding: 26px 40px 64px; display: grid; gap: 16px;
  align-content: start; }
body.screen-cases .content, body.screen-runs .content { max-width: none; }
.page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.page-head > :first-child { min-width: 0; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-head .actions form { display: contents; }

/* --- карточки и раскладки --- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.split { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 16px; align-items: start; }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.split-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.split-run { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .split, .split-2, .split-run { grid-template-columns: minmax(0, 1fr); } }

/* --- кнопки и поля ---
   .btn — `button.ghost` Курсива, .btn.primary — `button.act`: рамка 1.5px,
   700, текст по центру, нажатие темнее наведения. Скругление 8px, не
   пилюля: пилюли — фильтры и метки. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-strong);
  background: var(--card); color: var(--ink-deep); font: 700 13.5px/1.3 var(--font);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s; }
.btn:hover { border-color: var(--ink); background: var(--ink-soft); color: var(--ink-deep); }
.btn:active { background: var(--ink-soft-2); }
.btn.primary { padding: 7px 15px; background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-deep); border-color: var(--ink-deep); color: #fff; }
.btn.primary:active { background: var(--ink-pressed); border-color: var(--ink-pressed); }
.btn.danger { color: var(--err); border-color: var(--line); }
.btn.danger:hover { border-color: var(--err); background: transparent; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.sm, .tbl .btn { padding: 4px 12px; font-size: 12px; }
button.link { background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; font-weight: 600; }
label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* Галочка или радио с подписью — в строку, подпись обычным текстом. */
label.flag { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  font-weight: 400; color: var(--text); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea {
  border: 1.5px solid var(--line); border-radius: var(--r-ctl); padding: 7px 10px; background: var(--card);
  color: var(--text); font: 14px/1.4 var(--font); min-width: 0; max-width: 100%; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }
textarea { resize: vertical; min-height: 64px; }
textarea.mono { font: 13px/1.5 var(--mono); }
fieldset { border: 0; padding: 0; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.form-row .grow { flex: 1 1 220px; }
/* Сообщения — `.alert` Курсива: 14/600, черта слева. */
.error, .notice { padding: 10px 14px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600;
  border-left: 3px solid currentColor; }
.error { color: var(--err); background: var(--err-tint); }
.notice { color: var(--ok); background: var(--ok-tint); }

/* --- таблицы ---
   Шапка — тихая подпись на белом, как в Курсиве; плотность ячеек своя
   (7×10): TMS — рабочие списки по сотне строк. */
.tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.tbl th { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); background: var(--card); border-bottom-color: var(--line-strong);
  white-space: nowrap; position: sticky; top: 0; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tr.selected, .tbl tr.current { background: var(--ink-soft); }
.tbl td.code { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--muted); }
.tbl td.code a { text-decoration: none; font-weight: 700; }
.tbl td.code a:hover { text-decoration: underline; }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl td.acts { white-space: nowrap; }
.tbl td.acts form { display: inline; }
.tbl tr.quick td { background: var(--surface-2); }
.tbl tr.quick input { width: 100%; }
.tbl tr.group td { font-weight: 700; color: var(--muted); background: var(--surface-2); }

/* --- метки ---
   .stamp — метка состояния Курсива: контурная по умолчанию, заливку
   получает то, что требует действия. .badge — мелкая метка в строке. */
.stamp { display: inline-flex; align-items: center; gap: 5px; font: 700 11.5px/1 var(--font);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.stamp.ink { background: var(--ink-soft); color: var(--ink-deep); border-color: var(--ink-soft-2); }
.stamp.warm { background: var(--warm-tint); color: var(--warm-strong); border-color: var(--warm-tint-2); }
.stamp.filled { background: var(--accent); color: #fff; border-color: transparent; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.badge.warm { background: var(--warm-tint); color: var(--warm-strong); border-color: var(--warm-tint-2); }
.st { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 12px; }
.st-P { color: var(--st-P); background: var(--st-P-bg); }
.st-U { color: var(--st-U); background: var(--st-U-bg); }
.st-B { color: var(--st-B); background: var(--st-B-bg); }
.st-S { color: var(--st-S); background: var(--st-S-bg); }
.st-N { color: var(--st-N); background: var(--st-N-bg); border: 1px solid var(--line); }
.st-T { color: var(--st-T); background: var(--st-T-bg); border: 1px dashed var(--line-strong); }

/* --- плитки Главной: подпись обычным регистром, число цветом текста;
   тёплая плитка — только когда что-то ждёт человека. --- */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 14px 16px; min-height: 84px; color: var(--text); text-decoration: none; }
a.tile:hover { border-color: var(--ink-soft-2); color: var(--text); }
.tile.warn { border-color: var(--warm-tint-2);
  background: linear-gradient(180deg, var(--warm-tint) 0%, var(--card) 70%); }
.tile.warn .tile-num { color: var(--warm-strong); }
.tile small { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--muted); margin-bottom: 6px; }
.tile-num { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.tile-break { color: var(--text-3); font-size: 12px; font-weight: 600; margin-top: 4px; }

/* --- фильтры-пилюли и постраничность (Курсив) --- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .filter { display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 12px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted);
  text-decoration: none; }
.filters .filter-name { font: 700 12.5px var(--font); }
.filters .filter-num { font: 800 13px var(--font); color: var(--text); }
.filters .filter:hover { border-color: var(--line-strong); color: var(--text); }
.filters .filter.on { border-color: var(--ink); background: var(--ink-soft); color: var(--ink-deep); }
.filters .filter.on .filter-num { color: var(--ink-deep); }
.pager { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; }
.pg { color: var(--ink); text-decoration: none; font-weight: 700; }
.pg:hover { text-decoration: underline; }
.pg-cur { color: var(--muted); }

/* --- полоса прогресса --- */
.progress { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); }
.progress span { display: block; height: 100%; }
.progress .p-P { background: var(--st-P); } .progress .p-U { background: var(--st-U); }
.progress .p-B { background: #C99A1E; }
/* S — сплошной холодный серый, T — штриховка: в полосе их надо различать. */
.progress .p-S { background: var(--text-3); }
.progress .p-T { background: repeating-linear-gradient(45deg, var(--line-strong) 0 3px, var(--card) 3px 6px); }
/* Причины провала — доли, а не ошибки: бирюза средняя, без красного. */
.progress .p-reason { background: var(--ink-mid); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--muted); }

/* --- дерево разделов --- */
.tree { display: grid; gap: 1px; font-size: 13.5px; }
.tree a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none; }
.tree a:hover { background: var(--surface-2); }
.tree a.on { background: var(--ink-soft); color: var(--ink-deep); font-weight: 650; }
.tree .lvl-2 { padding-left: 20px; } .tree .lvl-3 { padding-left: 34px; }

/* --- лента попыток --- */
.feed { display: grid; gap: 8px; }
.feed .item { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
.feed .meta { font-size: 12px; color: var(--muted); }
kbd { font-family: var(--mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 4px; background: var(--card); color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; }

/* --- вход: классы Курсива (.auth-main, .auth-brand, .auth, .auth-form) --- */
body.auth-page { display: flex; }
.auth-main { margin: auto; padding: 40px 16px; width: 100%; max-width: 420px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 800 19px var(--font); color: var(--text); margin-bottom: 18px; letter-spacing: -.01em; }
.auth { max-width: 380px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 30px 30px 32px; }
.auth h1 { font-size: 22px; margin: 0 0 4px; }
.auth .sub { margin: 0 0 18px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form input:not([type=hidden]) { font-size: 15px; padding: 10px 12px; }
.auth-form .btn.primary { padding: 10px 16px; margin-top: 4px; font-size: 14px; }
.auth-error { color: var(--err); background: var(--err-tint); border-left: 3px solid var(--err);
  border-radius: var(--r-ctl); padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin: 0 0 14px; }

/* --- ран: список строк и карточка строки --- */
/* Список строк — своя прокрутка по высоте, колонки фиксированы: длинное
   название режется многоточием, а не уезжает вбок посреди слова. */
.run-list { max-height: 70vh; overflow: auto; }
#run-items { table-layout: fixed; }
#run-items .c-st { width: 46px; } #run-items .c-code { width: 104px; } #run-items .c-who { width: 112px; }
#run-items td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#run-items td.item-name a { color: var(--text); text-decoration: none; }
#run-items td.item-name a:hover { color: var(--ink-deep); text-decoration: underline; }
#run-items tr.current td.item-name a { color: var(--ink-deep); font-weight: 700; }
#run-items td.who { color: var(--muted); font-size: 13px; }
.item-card { display: grid; gap: 14px; }
.item-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-code { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }
a.item-code { color: var(--ink-deep); }
.item-check { font-size: 15.5px; font-weight: 600; }
ol.steps { padding-left: 22px; display: grid; gap: 4px; }
ul.plain-list { padding-left: 18px; }
.reason-panel { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-ctl);
  background: var(--err-tint); }
/* Кнопки статуса: контур и текст цветом статуса, наведение — его тинт.
   Заливки нет: пять залитых кнопок читались бы пятью тревогами. */
.status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.st-btn { padding-left: 8px; gap: 8px; }
.st-btn .st { min-width: 20px; height: 20px; font-size: 11.5px; }
.st-btn-P { border-color: var(--st-P); color: var(--st-P); }
.st-btn-P:hover { border-color: var(--st-P); background: var(--st-P-bg); color: var(--st-P); }
.st-btn-U { border-color: var(--st-U); color: var(--st-U); }
.st-btn-U:hover { border-color: var(--st-U); background: var(--st-U-bg); color: var(--st-U); }
.st-btn-B { border-color: #C99A1E; color: var(--st-B); }
.st-btn-B:hover { border-color: var(--st-B); background: var(--st-B-bg); color: var(--st-B); }
.st-btn-S { color: var(--st-S); }
.st-btn-S:hover { border-color: var(--muted); background: var(--st-S-bg); color: var(--text); }
.st-btn-take { margin-left: auto; color: var(--muted); border-style: dashed; }
.st-btn-take kbd { margin: 0; }
@media (max-width: 760px) {
  .st-btn-take { margin-left: 0; }
  #run-items .c-code { width: 84px; } #run-items .c-who { width: 76px; }
}

/* --- отчёты --- */
.progress.bar { display: inline-flex; vertical-align: middle; width: min(160px, 36vw); }
.tbl td.bar-cell { width: 55%; vertical-align: middle; }
.scroll-x { overflow-x: auto; }
.small { font-size: 12.5px; }
.wrap { overflow-wrap: anywhere; }
.page-head .actions > select, .page-head .actions > form > select { min-width: 0; flex: 1 1 200px; }
.page-head .actions { min-width: 0; max-width: 100%; }

/* --- кейсы, черновики, раны --- */
#cases-table .c-check { width: 34px; } #cases-table .c-code { width: 104px; }
#cases-table .c-title { width: 38%; } #cases-table .c-exp { width: 26%; }
.paste-actions { margin-top: 8px; align-items: center; }
.bulk-form { align-items: center; }
.bulk-form > select, .bulk-form > input { flex: 1 1 150px; }
.task-link { font-family: var(--font); text-decoration: none; }
.task-link:hover { text-decoration: underline; }
.tbl .col-progress { width: 34%; }
.form-card { max-width: 980px; }

/* --- карточка задачи --- */
.task-key { font-size: 13.5px; font-weight: 800; margin-bottom: 4px; letter-spacing: .01em; }
.task-key a { text-decoration: none; }
.task-key a:hover { text-decoration: underline; }
.task-card { display: grid; gap: 14px; max-width: 880px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.meta-text { font-size: 13px; color: var(--muted); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }

/* --- описание задачи Jira (HTML после allowlist в jira_html) ---
   Заголовки описания мельче h1 страницы и h2 «Кейсы задачи»: это текст
   задачи, а не разделы TMS. Ширина строки — для чтения, не на весь экран. */
.jira-desc { max-width: 80ch; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.jira-desc > :first-child { margin-top: 0; }
.jira-desc > :last-child { margin-bottom: 0; }
/* Jira оборачивает описание в div-ы: первый заголовок может быть вложенным. */
.jira-desc :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.jira-desc p, .jira-desc ul, .jira-desc ol, .jira-desc pre, .jira-desc blockquote,
.jira-desc table { margin: 0 0 10px; }
.jira-desc h1, .jira-desc h2, .jira-desc h3, .jira-desc h4 { margin: 18px 0 6px; line-height: 1.3;
  letter-spacing: 0; color: var(--text); }
.jira-desc h1 { font-size: 16.5px; font-weight: 700; }
.jira-desc h2 { font-size: 15.5px; font-weight: 700; }
.jira-desc h3 { font-size: 14.5px; font-weight: 650; }
.jira-desc h4 { font-size: 14px; font-weight: 650; color: var(--muted); }
.jira-desc ul, .jira-desc ol { padding-left: 22px; }
.jira-desc li { margin: 2px 0; }
.jira-desc li > ul, .jira-desc li > ol { margin: 2px 0 0; }
.jira-desc tt, .jira-desc code { font-family: var(--mono); font-size: 12.5px; padding: 1px 4px;
  border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.jira-desc pre { font-family: var(--mono); font-size: 12.5px; padding: 10px 12px; overflow-x: auto;
  white-space: pre; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.jira-desc pre code, .jira-desc pre tt { padding: 0; border: 0; background: none; }
.jira-desc blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.jira-desc img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px;
  vertical-align: top; }
.jira-desc table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.jira-desc th, .jira-desc td { border: 1px solid var(--line-strong); padding: 4px 8px; text-align: left;
  vertical-align: top; }
.jira-desc th { background: var(--surface-2); font-weight: 650; }
.jira-desc-raw { white-space: pre-wrap; }

/* --- узкий экран ---
   Меню складывается в липкую полосу сверху: знак и имя слева, кнопка
   меню справа, пункты и «Выйти» раскрываются под ней (схема Курсива,
   style.css «узкий экран»). Порог 900px: с колонкой 236px уже тесно. */
@media (max-width: 900px) {
  .shell { display: block; }
  nav.side { position: sticky; top: 0; z-index: 30; width: auto; border-right: none;
    border-bottom: 1px solid var(--line); }
  .side-inner { position: static; height: auto; overflow: visible; padding: 8px 12px; }
  nav.side .brand { padding: 2px 4px; }
  nav.side .brand small { display: none; }
  .brand-mark { width: 30px; height: 30px; font-size: 16px; }
  .side-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 11px; border: 1.5px solid var(--line); background: var(--card); color: var(--text);
    cursor: pointer; flex: none; }
  .side-toggle .icon-close { display: none; }
  .side-switch:checked ~ .side-head .icon-open { display: none; }
  .side-switch:checked ~ .side-head .icon-close { display: block; }
  nav.side .items, nav.side .foot { display: none; }
  .side-switch:checked ~ .items { display: flex; padding: 8px 0 6px; }
  .side-switch:checked ~ .foot { display: flex; padding: 10px 4px 4px; margin-top: 0; }
  .content { padding: 18px 16px 48px; }
}
@media (max-width: 760px) {
  h1 { font-size: 22px; }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { min-height: 0; padding: 12px 14px; }
  .tile-num { font-size: 24px; }
  /* Подсказки клавиш на телефоне не нужны: клавиатуры нет. */
  .hint { display: none; }
  .form-row > input[name=q] { flex: 1 1 100%; }
}