/* v13 · экраны (все, кроме Скорборда). Подключается ПОСЛЕ ui.css.
   Здесь только сборка экранов из компонентов фундамента (js/screens_ui.js →
   window.sx): режим «Коротко / Подробно», полоса разделов, KPI, карточки
   проблем, таблица v13 для списков, полосы брендов. Токены — app.css. */

/* ── Режим «Коротко / Подробно» ─────────────────────────────────────── */
html.sx-short .sx-detail { display: none !important; }
.sx-more {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--fg-muted); font-size: var(--fs-md); text-align: center;
}
.sx-more[hidden] { display: none; }

/* ── Полоса разделов: якоря слева, режим справа (липнет под шапкой) ── */
.sx-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin: 4px 0 20px; padding: 6px 0;
}
@media (min-width: 1001px) {
  .sx-bar {
    position: sticky; top: var(--top-h, 62px); z-index: 20;
    margin-left: -8px; margin-right: -8px; padding: 8px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 0 0 12px 12px;
  }
}
.sx-bar__nav { min-width: 0; flex: 1 1 auto; display: flex; }
.sx-bar__mode { flex: none; margin-left: auto; }
.sx-bar__title { display: flex; flex-direction: column; gap: 2px; }
.sx-bar__title strong { font-size: var(--fs-xl); letter-spacing: -.02em; }
.sx-bar .sx-tabs, .sx-bar .ln-tabs, .sx-bar .rp-tabs, .sx-bar .tc-tabs {
  margin: 0; max-width: 100%;
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px;
}
.sx-tabs a {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: calc(var(--ctl-h-sm) - 8px); padding: 0 12px; border-radius: 7px;
  color: var(--fg-muted); font-size: var(--fs-md); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease;
}
.sx-tabs a:hover, .sx-tabs a:focus-visible { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sx-tabs a.is-active, .sx-tabs a[aria-current] { color: var(--accent); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.sx-tabs a[hidden] { display: none; }
.sx-tabs a .chip { min-height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
#content > section[id], #content > .sx-section[id], .sx-anchor { scroll-margin-top: 136px; }

/* ── Статус: значок + слово, форма рамки ────────────────────────────── */
.sx-status {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.3; white-space: nowrap;
}
.sx-status svg.ico { width: 13px; height: 13px; }
.sx-status--bad { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.sx-status--warn, .sx-status--ahead { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.sx-status--good { color: var(--good); background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.sx-status--info { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.sx-status--no_data, .sx-status--muted, .sx-status--pending { color: var(--fg-muted); background: transparent; border: 1px dashed var(--line-strong); }

/* ── Обзор: «Главный сигнал» + график ───────────────────────────────── */
.sx-overview {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 18px;
  margin: 0 0 22px; align-items: stretch;
}
.sx-overview--single { grid-template-columns: minmax(0, 1fr); }
.sx-overview > * { min-width: 0; }
.sx-overview .ui-signal { min-height: 100%; }
@media (max-width: 1100px) { .sx-overview { grid-template-columns: minmax(0, 1fr); } }

.sx-card { margin: 0 0 20px; }
.sx-overview .sx-card { margin: 0; }
.sx-chartcard .ui-bars { margin-top: 2px; }
.sx-bars__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.sx-bars__note { font-size: var(--fs-sm); color: var(--fg-muted); }
.sx-na { color: var(--fg-faint); font-weight: var(--fw-regular); font-size: var(--fs-md); }

/* ── KPI-плитки ─────────────────────────────────────────────────────── */
.sx-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px; margin: 0 0 20px;
}
.sx-kpi {
  --brand: var(--accent);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0;
  padding: 14px 16px 13px 18px;
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  text-align: left; font: inherit; overflow: hidden;
}
.sx-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-strong); }
.sx-kpi--bad::before { background: var(--bad); }
.sx-kpi--warn::before { background: var(--warn); }
.sx-kpi--good::before { background: var(--good); }
.sx-kpi--info::before, .sx-kpi--own::before { background: var(--accent); }
.sx-kpi--brand::before { background: var(--brand); }
.sx-kpi.is-missing { border-style: dashed; background: var(--bg-sunken); box-shadow: none; }
.sx-kpi__label {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted);
}
.sx-kpi__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-kpi__src { margin-left: auto; color: var(--fg-faint); width: 14px !important; height: 14px !important; }
.sx-kpi__value {
  font-size: var(--fs-kpi); font-weight: var(--fw-bold); letter-spacing: -.035em; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.sx-kpi.is-missing .sx-kpi__value { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--fg-faint); letter-spacing: 0; }
.sx-kpi__sub { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.4; }
button.sx-kpi { cursor: pointer; transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease; }
button.sx-kpi:hover, button.sx-kpi:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent-line); }
button.sx-kpi:hover .sx-kpi__src, button.sx-kpi:focus-visible .sx-kpi__src { color: var(--accent); }

/* ── Карточка проблемы / разрыва / рекомендации ─────────────────────── */
.sx-issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin: 0 0 18px; }
.sx-issue {
  --tone: var(--line-strong);
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 15px 17px 14px 20px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.sx-issue::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius); background: var(--tone); }
.sx-issue--bad { --tone: var(--bad); }
.sx-issue--warn { --tone: var(--warn); }
.sx-issue--good { --tone: var(--good); }
.sx-issue--info { --tone: var(--accent); }
.sx-issue--no_data { border-style: dashed; background: var(--bg-sunken); box-shadow: none; }
/* A1-36: бейдж статуса — в строке надзаголовка справа, заголовок на всю
   ширину (бейдж занимал ~45 % и зажимал заголовок в 2–3 строки). */
.sx-issue__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 10px; }
.sx-issue__head > .sx-issue__titles { display: contents; }
.sx-issue__head > .sx-status { grid-column: 2; grid-row: 1; align-self: start; }
.sx-issue__head .sx-issue__overline { grid-column: 1; grid-row: 1; align-self: center; }
.sx-issue__head .sx-issue__title, .sx-issue__head .sx-issue__sub { grid-column: 1 / -1; }
.sx-issue__head:not(:has(.sx-issue__overline)) .sx-issue__title { grid-column: 1; grid-row: 1; }
.sx-issue__titles { min-width: 0; }
.sx-issue__overline { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 2px; }
.sx-issue__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -.015em; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.sx-issue__sub { font-size: var(--fs-md); color: var(--fg-muted); margin: 3px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.sx-issue__value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sx-issue__value strong { font-size: var(--fs-kpi); font-weight: var(--fw-bold); letter-spacing: -.03em; color: var(--tone); font-variant-numeric: tabular-nums; }
.sx-issue--no_data .sx-issue__value strong { color: var(--fg-faint); }
.sx-issue__value span { font-size: var(--fs-md); color: var(--fg-muted); font-weight: var(--fw-medium); }
.sx-issue .ui-facts > div { padding: 6px 0; font-size: var(--fs-md); }
.sx-issue__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); }
.sx-issue__steps > li[hidden] { display: none; }
.sx-issue__note { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; line-height: 1.45; }
.sx-issue__foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.sx-issue__more { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-md); }
.sx-issue__more svg.ico { width: 14px; height: 14px; }
/* Волна 7 · A4: «button.btn--link» (app.css) перебивал inline-flex — значок
   прилипал к тексту («Как посчитано📄», «Кто проходит📄»). */
button.sx-issue__more, a.sx-issue__more { display: inline-flex; gap: 5px; }

/* Существующие карточки экранов — тот же язык: цвет-полоса, мягкая тень, подъём. */
.diag-card, .kw-card, .gp-card, .ln-gap { border-radius: var(--radius); }
.diag-card--bad, .kw-card.diag-card--bad, .ln-gap.diag-card--bad { border-left-color: var(--bad); }
.diag-card-wrap .diag-card { flex: 1 1 auto; }
.status { border-radius: 999px; font-weight: var(--fw-bold); }

/* ── Таблица v13 для списков экранов ────────────────────────────────── */
.sx-tablecard {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; margin: 0 0 16px; min-width: 0;
}
.sx-tablecard--flat { box-shadow: none; }
.sx-toolbar { border-bottom: 0; }
.sx-toolbar + .ui-tablewrap { border-top: 1px solid var(--line); }
.sx-tablecard > .ui-tablewrap:first-child { border-top: 0; }
.sx-tablewrap { min-height: 0; max-height: min(620px, calc(100vh - 220px)); }
table.ui-table.sx-table { --row-h: 44px; }
table.ui-table.sx-table--compact { --row-h: 38px; font-size: var(--fs-md); }
table.ui-table.sx-table td { padding: 6px 12px; }
table.ui-table.sx-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ui-table.sx-table td.is-pinned { min-width: 160px; max-width: 320px; }
table.ui-table.sx-table thead th { white-space: nowrap; }
table.ui-table.sx-table thead th small { white-space: normal; }
table.ui-table.sx-table td.wrap { white-space: normal; min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
table.ui-table.sx-table td.url {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.ui-table.sx-table td.is-missing .sx-na { font-size: var(--fs-sm); }
table.ui-table.sx-table td.is-missing { background: var(--bg-row); }
table.ui-table.sx-table td.nowrap { white-space: nowrap; }
table.ui-table.sx-table td.nowrap .ln-velocity { flex-direction: column; align-items: flex-start; gap: 0; white-space: nowrap; }
table.ui-table.sx-table td.types { min-width: 240px; }
table.ui-table.sx-table td .ln-types { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
table.ui-table.sx-table tbody tr.is-own > td.is-pinned { box-shadow: inset 4px 0 var(--accent), 6px 0 12px rgba(20, 46, 78, .05); }
table.ui-table.sx-table tbody tr.sx-table__empty td { padding: 20px 14px; color: var(--fg-muted); text-align: center; background: var(--bg-card); }
.sx-rank { display: block; font-size: var(--fs-xs); color: var(--fg-muted); font-weight: var(--fw-medium); margin-top: 2px; }
.sx-cellbtn {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 6px; margin: -3px -6px; border: 0; border-radius: 6px; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
}
.sx-cellbtn--num { font-weight: var(--fw-bold); }
.sx-cellbtn:hover, .sx-cellbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.sx-tablefoot { font-size: var(--fs-sm); }
.sx-tablefoot__count { font-weight: var(--fw-medium); color: var(--fg-muted); }
.sx-tablefoot__note { color: var(--fg-faint); }
.sx-tablefoot__more:not(:empty) { display: inline-flex; margin-left: 12px; vertical-align: middle; }  /* G2-13 */
/* Старые таблицы экранов (table.sb) — закреплённая первая колонка и наша строка. */
table.sb th.sb__namecell, table.sb td.sb__namecell { position: sticky; left: 0; z-index: 1; }
table.sb thead th.sb__namecell { z-index: 3; }
table.sb td.num, table.sb th.num { font-variant-numeric: tabular-nums; }

/* ── Полосы разрыва по направлениям («Диагноз») ─────────────────────── */
.sx-gapbars { display: grid; gap: 2px; }
.sx-gapbar {
  --tone: var(--line-strong);
  display: grid; grid-template-columns: minmax(132px, 1.1fr) minmax(70px, 1.5fr) 74px minmax(0, 150px);
  align-items: center; gap: 10px; width: 100%; min-height: 34px;
  padding: 3px 8px; border: 1px solid transparent; border-radius: 8px; background: none;
  font: inherit; color: var(--fg); text-align: left;
}
button.sx-gapbar { cursor: pointer; transition: background-color var(--dur) ease, border-color var(--dur) ease; }
button.sx-gapbar:hover, button.sx-gapbar:focus-visible { background: var(--bg-hover); border-color: var(--line-strong); }
.sx-gapbar--bad { --tone: var(--bad); }
.sx-gapbar--warn { --tone: var(--warn); }
.sx-gapbar--good { --tone: var(--good); }
/* «Нет данных» / нейтральные строки: число — читаемым серым (было
   --line-strong, 1,5:1), полоса — нейтральная. */
.sx-gapbar--no_data, .sx-gapbar--muted, .sx-gapbar--info { --tone: var(--fg-muted); }
/* A1-22: подпись направления целиком — перенос в 2 строки вместо многоточия. */
.sx-gapbar__label { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-gapbar__track { height: 9px; border-radius: 5px; background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sx-gapbar__fill { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.sx-gapbar__num { text-align: right; font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tone); }
.sx-gapbar.is-missing .sx-gapbar__num { color: var(--fg-faint); font-weight: var(--fw-regular); }
.sx-gapbar__word { justify-self: start; min-width: 0; max-width: 100%; display: grid; gap: 2px; justify-items: start; }
.sx-gapbar__word .sx-status { font-size: var(--fs-xs); padding: 2px 7px 2px 5px; max-width: 100%; white-space: normal; }
/* B8-09: «данных мало» — второй строкой серым, не внутри бейджа. */
.sx-gapbar__note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.2; }
.sx-gapbar__note svg.ico { width: 12px; height: 12px; flex: none; }
/* B6-04: малое отставание — видимая полоска (≥ 3 px), у лидера полосы нет;
   шкала «% к лидеру» подписана один раз под списком. */
.sx-gapbar__fill { min-width: 3px; }
.sx-gapbar.is-zero .sx-gapbar__track { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--good); }
.sx-gapbar--scale { min-height: 0; padding-top: 0; padding-bottom: 0; }
.sx-gapbar__scale { position: relative; display: block; height: 16px; container-type: inline-size; font-size: var(--fs-2xs); color: var(--fg-muted);
  border-top: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; }
.sx-gapbar__scale > span { position: absolute; top: 2px; white-space: nowrap; }
.sx-gapbar__scale > .is-first { left: 0; }
.sx-gapbar__scale > .is-mid { left: 50%; transform: translateX(-50%); }
.sx-gapbar__scale > .is-last { right: 0; }
@container (max-width: 170px) { .sx-gapbar__scale > .is-mid { display: none; } }
.ui-signal .sx-next { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.sx-next__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted); }
.sx-next__list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) {
  /* Волна 7 · A4: подпись плитки KPI на телефоне — в две строки, без «КРИТИЧНЫХ СОБ…». */
  .sx-kpi__label { align-items: flex-start; letter-spacing: .04em; }
  .sx-kpi__label > span { white-space: normal; hyphens: auto; overflow-wrap: break-word; }
  .sx-gapbar { grid-template-columns: minmax(80px, 1fr) minmax(40px, 1fr) 64px; }
  .sx-gapbar__word { display: none; }
  .sx-gapbar__scale > .is-mid { display: none; }
}

/* ── Панель деталей ─────────────────────────────────────────────────── */
.sx-drawer .ui-facts dd { overflow-wrap: anywhere; max-width: 60%; }
.sx-drawer__note { margin-top: 16px; font-size: var(--fs-md); color: var(--fg-muted); }
.sx-drawer ul { margin: 0; padding-left: 18px; font-size: var(--fs-md); line-height: 1.5; }

/* ── Шапки разделов экранов: одна иерархия ───────────────────────────── */
.ln-head, .rp-head, .tc-head, .kw-head, .gp-head, .pl-head { flex-wrap: wrap; }
.ln-head h2, .rp-head h2, .tc-head h2, .kw-head h2, .gp-head h2, .pl-head h2 { font-size: var(--fs-xl); letter-spacing: -.02em; }
.ln-head .faint, .rp-head .faint, .tc-head .faint, .kw-head .faint, .gp-head .faint { font-size: var(--fs-md); }
.sx-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.sx-sechead h2 { font-size: var(--fs-xl); letter-spacing: -.02em; margin: 3px 0 0; }
.sx-sechead p { margin: 3px 0 0; font-size: var(--fs-md); color: var(--fg-muted); }

/* ── Формы, мастер, загрузка: спокойно и просторно ──────────────────── */
ol.steps {
  display: flex; gap: 0; padding: 0; margin: 6px 0 24px; list-style: none; counter-reset: step;
  overflow-x: auto; scrollbar-width: thin;
}
ol.steps > li {
  position: relative; flex: 1 1 0; min-width: 118px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0 6px; border: 0; background: none; border-radius: 0;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-muted); text-align: center; line-height: 1.3;
}
ol.steps > li::before {
  content: counter(step); counter-increment: step;
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-card); color: var(--fg-muted);
  border: 2px solid var(--line-strong);
  font-size: var(--fs-md); font-weight: var(--fw-heavy);
  box-shadow: 0 0 0 4px var(--bg);
}
ol.steps > li::after {
  content: ""; position: absolute; top: 15px; left: calc(-50% + 15px); right: calc(50% + 15px);
  height: 2px; background: var(--line-strong);
}
ol.steps > li:first-child::after { display: none; }
ol.steps > li[data-state="now"] { color: var(--fg); font-weight: var(--fw-bold); }
ol.steps > li[data-state="now"]::before { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] ol.steps > li[data-state="now"]::before { color: #0d1420; }
ol.steps > li[data-state="done"] { color: var(--good); }
/* Пройденный шаг — галочка (SVG-линия того же набора), а не только цвет. */
ol.steps > li[data-state="done"]::before {
  content: ""; border-color: var(--good);
  background: var(--good-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137450' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
:root[data-theme="dark"] ol.steps > li[data-state="done"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd0a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
ol.steps > li[data-state="done"]::after, ol.steps > li[data-state="now"]::after { background: var(--good); }
ol.steps > li button, ol.steps > li a { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
ol.steps > li button:hover, ol.steps > li a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 720px) {
  ol.steps > li { min-width: 78px; font-size: var(--fs-sm); }
}
/* Волна 7 · A4: степпер в одну линию (import.css даёт flex-wrap — на 390 px
   пятый шаг мастера уезжал на вторую строку с «висящей» линией слева). */
ol.steps { flex-wrap: nowrap; }
@media (max-width: 480px) {
  ol.steps > li { min-width: 0; padding: 0 2px; font-size: var(--fs-xs); hyphens: auto; }
}

.field__hint, .hint { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.45; }
.field__error { font-size: var(--fs-md); color: var(--bad); font-weight: var(--fw-medium); display: flex; align-items: center; gap: 5px; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-soft) !important;
}

/* ── Вход ───────────────────────────────────────────────────────────── */
main.page.auth {
  min-height: 100vh; max-width: none; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 12%, transparent) 0, transparent 42%),
    radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--accent) 8%, transparent) 0, transparent 40%),
    var(--bg);
}
.auth__brand { display: flex; align-items: center; gap: 11px; }
.auth__brand .brand__text { font-size: var(--fs-xl); }
.auth__card {
  width: min(420px, 100%); padding: 28px 28px 22px !important;
  border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-menu) !important;
}
.auth__card h1 { font-size: var(--fs-kpi); letter-spacing: -.03em; margin: 0 0 6px; }
.auth__lead { color: var(--fg-muted); font-size: var(--fs-base); line-height: 1.5; margin: 0 0 20px; }
.auth__submit { width: 100%; justify-content: center; min-height: 42px; font-size: var(--fs-base); }
.auth__links { justify-content: center; margin-top: 12px; }
#login-msg { width: min(420px, 100%); }
#login-msg:empty { display: none; }

/* ── Мелочи экранов ─────────────────────────────────────────────────── */
.sx-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.sx-muted { color: var(--fg-muted); font-size: var(--fs-md); }
.sx-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-sm); color: var(--fg-muted); margin: 0 0 18px; }
.sx-legend > span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .sx-card .ui-cardhead, .sx-chartcard .ui-cardhead { flex-wrap: wrap; }
  .sx-card .ui-cardhead__actions { width: 100%; }
  .sx-kpis, .ln-tiles, .rp-tiles, .tc-tiles, .gp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sx-kpi, .ln-tile, .rp-tile, .tc-tile, .gp-tile { padding: 11px 12px 10px 14px; }
  .ln-tile__val, .rp-tile__val, .tc-tile__val { font-size: var(--fs-kpi); }
  .sx-bar { margin-bottom: 14px; }
  .sx-bar__mode { margin-left: 0; }
  .sx-kpi__value { font-size: var(--fs-kpi); }
  .sx-tablecard { border-radius: var(--radius); }
  table.ui-table.sx-table td.is-pinned { min-width: 120px; max-width: 200px; }
  .auth__card { padding: 22px 18px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  button.sx-kpi:hover, button.sx-kpi:focus-visible { transform: none; }
  .sx-tabs a, .sx-gapbar { transition: none; }
}
@media print {
  .sx-bar, .sx-more { display: none !important; }
  html.sx-short .sx-detail { display: block !important; }
}

/* ── «Техника»: список «кто проходит» в панели ─────────────────────── */
.sx-checklist { display: grid; gap: 2px; }
.sx-checklist__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
table.sb thead th .ui-brand { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

/* Таблицы-списки «Репутации» и «AI»: текст слева, числа справа (у table.sb
   по умолчанию всё справа — это правило скорборда). */
table.sb.rp-table th, table.sb.rp-table td { text-align: left; }
table.sb.rp-table th.num, table.sb.rp-table td.rp-num, table.sb.rp-table td.num { text-align: right; }
table.sb.rp-table td.rp-title { white-space: normal; min-width: 220px; }
/* Остальные table.sb экранов (не скорборд): тот же принцип. */
table.sb th, table.sb td { text-align: left; }
table.sb th.num, table.sb td.num, table.sb .rp-num, table.sb td.kw-pos { text-align: right; }

/* Раскрывающиеся блоки: шеврон из набора иконок вместо системного «▶». */
.appmain details > summary { list-style: none; cursor: pointer; }
.appmain details > summary::-webkit-details-marker { display: none; }
.appmain details:not(.howto):not(.pgroup):not(.pgroup-more) > summary::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) ease;
}
.appmain details[open]:not(.howto):not(.pgroup):not(.pgroup-more) > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .appmain details > summary::before { transition: none; } }

/* «Проекты»: поиск — компонент ui.searchField (значок из набора). */
.projsearch.ui-search::before { display: none; }
.projtools.ui-toolbar { padding: 0; margin: 0 0 14px; }
.projtools .ui-search { max-width: 420px; }

/* «Словарь»: указатель якорями и сетка карточек вместо одной длинной ленты. */
.gl-toolbar { padding: 0; margin: 0 0 12px; }
.gl-count { font-size: var(--fs-md); color: var(--fg-muted); }
.gl-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.gl-index a {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-muted); text-decoration: none;
}
.gl-index a:hover, .gl-index a:focus-visible { color: var(--accent); border-color: var(--accent-line); }
.gl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 12px; align-items: start; }
.gl-term { padding: 14px 18px !important; margin: 0 !important; scroll-margin-top: 90px; }
.gl-term h3 { font-size: var(--fs-lg); margin: 0 0 6px; }
.gl-term p { margin: 3px 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-muted); }
.gl-term p b { color: var(--fg); }
.gl-term:target { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.admin-search.ui-toolbar { padding: 0; margin: 10px 0 6px; }
.admin-search .ui-search { max-width: 380px; }
/* Волна 7 · A4: карточки учётной записи — общий радиус 14 (v13: 17 — только пара обзора и график). */
.account__session, .account__card { border-radius: var(--radius); }
.sx-signal--empty .ui-signal__value { font-size: var(--fs-kpi); letter-spacing: -.02em; color: var(--fg-muted); }

/* ── v13 · широкий экран: формы и списки в две колонки ─────────────── */
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
.adm-col { min-width: 0; }
@media (min-width: 1500px) {
  .adm-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .adm-grid--single { grid-template-columns: minmax(0, 1fr); }
}
.ex-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "saved" "compose" "about"; gap: 14px; align-items: start; }
.ex-grid > .card { margin: 0 !important; min-width: 0; }
.ex-area-saved { grid-area: saved; } .ex-area-compose { grid-area: compose; } .ex-area-about { grid-area: about; }
@media (min-width: 1400px) {
  .ex-grid { grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); grid-template-areas: "compose saved" "compose about"; grid-template-rows: auto 1fr; }
}
/* Мастер: поля ввода — читаемой ширины, карточка во всю ширину. */
.appmain .card textarea.control, .appmain .field textarea { max-width: 960px; }
#adm-teams td:last-child, #adm-users td:last-child { white-space: nowrap; }
/* Интеграция волны 4: длинный статус в плитке KPI («1 предупреждение
   (Венесуэла) на других рынках») переносится, а не режется краем карточки. */
.sx-kpi .sx-status { flex: 0 1 auto; max-width: 100%; white-space: normal; height: auto; line-height: 1.3; align-items: flex-start; }
.sx-kpi .sx-status svg.ico { flex: none; margin-top: 2px; }

/* Волна 13 · H2-05: Safari на iPhone/iPad при фокусе в поле со шрифтом меньше
   16 px сам увеличивает страницу (и не возвращает масштаб) — поиск, фильтры,
   поля мастера и входа «прыгали» при каждом касании. Только iOS/iPadOS
   (-webkit-touch-callout есть лишь там) и только при сенсорном вводе:
   на компьютере и Android размеры полей прежние. */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select, textarea { font-size: var(--fs-ios-input, 16px) !important; }
  }
}