/* Радиусы выведены из шкалы: 8, 12, 999 (4 * 249.75 для чипов).
 * Палитра категорий не обозначает срочность или успешность.
 * Контрасты исходного скина рассчитаны в out/tests/verify.cjs.
 * Текст --fs-ink на color-mix(token 10%, --fs-white):
 * primary 15.46; error 15.35; text 15.05; ink-soft 14.82; slate 15.44.
 * ink на white/panel/primary-050: 17.79 / 16.56 / 15.01.
 * text на white/panel/primary-050: 10.24 / 9.53 / 8.64.
 * primary на white/panel/primary-050: 5.90 / 5.49 / 4.98.
 * white на primary: 5.90; text на accent-2 10% + white: 9.32.
 * Ссылки primary на пяти смесях выше: 5.13 / 5.09 / 4.99 / 4.92 / 5.12;
 * на accent-2 10% + white: 5.37.
 * Другой скин наследуется автоматически, его контраст проверяется отдельно.
 */
.fs-cmp {
  color: var(--fs-text);
  background: var(--fs-white);
  font-family: var(--fs-font);
  font-size: var(--fs-fs-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  margin-block: var(--fs-sp-6);
  padding: var(--fs-sp-4);
  border: 1px solid var(--fs-line);
  border-top: var(--fs-sp-1) solid var(--fs-primary);
  border-radius: var(--fs-sp-3);
  box-shadow: var(--fs-shadow-card);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.fs-cmp, .fs-cmp *, .fs-cmp *::before, .fs-cmp *::after { box-sizing: border-box; }
.fs-cmp [hidden] { display: none !important; }
.fs-cmp :focus-visible { outline: 2px solid var(--fs-primary); outline-offset: 2px; }
.fs-cmp .fs-cmp__title { margin: 0 0 var(--fs-sp-4); color: var(--fs-ink); font-size: var(--fs-fs-h3); font-weight: 700; }
.fs-cmp a { color: var(--fs-primary); text-decoration: underline; }
.fs-cmp .fs-cmp__label { display: block; font-weight: 600; color: var(--fs-ink); margin-bottom: var(--fs-sp-2); }
.fs-cmp .fs-cmp__select, .fs-cmp .fs-cmp__button {
  min-height: 44px;
  max-width: 100%;
  font: inherit;
  color: var(--fs-ink);
  background: var(--fs-white);
  border: 1px solid var(--fs-slate);
  border-radius: var(--fs-sp-2);
  padding: var(--fs-sp-2) var(--fs-sp-3);
}
.fs-cmp .fs-cmp__select { display: block; width: 100%; min-width: 0; }
.fs-cmp .fs-cmp__button { cursor: pointer; white-space: normal; overflow-wrap: break-word; text-align: center; }
.fs-cmp .fs-cmp__button:hover { background: var(--fs-primary-050); }
.fs-cmp .fs-cmp__button[aria-pressed="true"] { color: var(--fs-white); background: var(--fs-primary); border-color: var(--fs-primary); }
.fs-cmp .fs-cmp__switch { display: flex; flex-wrap: wrap; gap: var(--fs-sp-2); margin-bottom: var(--fs-sp-4); }
.fs-cmp .fs-cmp__switch > button { flex: 1 1 0; min-width: 0; }
.fs-cmp .fs-cmp__picker { margin-bottom: var(--fs-sp-4); }
.fs-cmp .fs-cmp__result:not(:empty) { background: var(--fs-primary-050); color: var(--fs-ink); border-radius: var(--fs-sp-3); padding: var(--fs-sp-4); margin-top: var(--fs-sp-3); }
.fs-cmp .fs-cmp__answer-title { font-weight: 700; margin: 0 0 var(--fs-sp-3); }
.fs-cmp .fs-cmp__fields { margin: 0; }
.fs-cmp .fs-cmp__fields dt { font-size: var(--fs-fs-small); font-weight: 600; margin-top: var(--fs-sp-3); }
.fs-cmp .fs-cmp__fields dd { margin: 0; }
.fs-cmp .fs-cmp__table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin-block: var(--fs-sp-3); }
.fs-cmp table { display: block; width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-fs-small); margin: 0; overflow-x: auto; }
.fs-cmp .fs-cmp__table-wrap table { display: table; overflow: visible; }
.fs-cmp img, .fs-cmp svg { max-width: 100%; height: auto; }
.fs-cmp th, .fs-cmp td { padding: var(--fs-sp-3); border: 0; border-bottom: 1px solid var(--fs-line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.fs-cmp th { color: var(--fs-ink); font-weight: 600; }
.fs-cmp thead th { background: var(--fs-panel); }
.fs-cmp tr:nth-child(even) > * { background: var(--fs-panel); }
.fs-cmp tr:hover > *, .fs-cmp tr.fs-cmp__selected > * { background: var(--fs-primary-050); }
.fs-cmp caption { text-align: left; color: var(--fs-ink); padding-block: var(--fs-sp-2); }
.fs-cmp .fs-cmp__progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-sp-3); margin-bottom: var(--fs-sp-4); }
.fs-cmp .fs-cmp__status { color: var(--fs-ink); font-weight: 600; flex: 1 1 100%; margin: 0; }
.fs-cmp progress { flex: 1 1 0; min-width: 0; width: 100%; height: var(--fs-sp-3); appearance: none; border: 0; border-radius: var(--fs-sp-2); background: var(--fs-panel); color: var(--fs-accent-2-600); accent-color: var(--fs-accent-2-600); }
.fs-cmp progress::-webkit-progress-bar { background: var(--fs-panel); border-radius: var(--fs-sp-2); }
.fs-cmp progress::-webkit-progress-value { background: var(--fs-accent-2-600); border-radius: var(--fs-sp-2); }
.fs-cmp progress::-moz-progress-bar { background: var(--fs-accent-2-600); border-radius: var(--fs-sp-2); }
.fs-cmp .fs-cmp__checklist { margin: 0; padding: 0; list-style: none; }
.fs-cmp .fs-cmp__checklist > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--fs-sp-2); align-items: start; padding-block: var(--fs-sp-3); margin: 0; border-bottom: 1px solid var(--fs-line); }
.fs-cmp .fs-cmp__check { width: 44px; height: 44px; margin: 0; accent-color: var(--fs-success); cursor: pointer; }
.fs-cmp .fs-cmp__item-label { min-height: 44px; padding-block: var(--fs-sp-2); cursor: pointer; }
.fs-cmp .fs-cmp__item-content { grid-column: 2; }
.fs-cmp .fs-cmp__done { background: color-mix(in srgb, var(--fs-accent-2) 10%, var(--fs-white)); }
.fs-cmp .fs-cmp__timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--fs-sp-4); }
.fs-cmp .fs-cmp__moment {
  --fs-cmp-tone: var(--fs-slate);
  position: relative;
  padding: var(--fs-sp-4);
  padding-left: var(--fs-sp-6);
  margin: 0;
  color: var(--fs-ink);
  background: color-mix(in srgb, var(--fs-cmp-tone) 10%, var(--fs-white));
  border-left: var(--fs-sp-1) solid var(--fs-cmp-tone);
  border-radius: var(--fs-sp-3);
}
.fs-cmp .fs-cmp__moment::before { content: ''; position: absolute; left: var(--fs-sp-2); top: var(--fs-sp-5); width: var(--fs-sp-3); height: var(--fs-sp-3); border-radius: 50%; background: var(--fs-cmp-tone); }
.fs-cmp .fs-cmp__moment--hours { --fs-cmp-tone: var(--fs-error); }
.fs-cmp .fs-cmp__moment--work { --fs-cmp-tone: var(--fs-primary); }
.fs-cmp .fs-cmp__moment--calendar, .fs-cmp .fs-cmp__moment--days { --fs-cmp-tone: var(--fs-accent-2-600); }
.fs-cmp .fs-cmp__moment--repeat { --fs-cmp-tone: var(--fs-primary-300); }
.fs-cmp .fs-cmp__category, .fs-cmp .fs-cmp__note { font-size: var(--fs-fs-small); }
.fs-cmp .fs-cmp__event { font-weight: 600; margin: var(--fs-sp-2) 0; }
.fs-cmp .fs-cmp__term { display: inline-block; max-width: 100%; padding: var(--fs-sp-2) var(--fs-sp-4); color: var(--fs-ink); background: var(--fs-white); border: 1px solid var(--fs-cmp-tone); border-radius: 1.25em; font-size: var(--fs-fs-lead); font-weight: 700; line-height: 1.5; }
.fs-cmp .fs-cmp__note { margin-top: var(--fs-sp-3); }
.fs-cmp .fs-cmp__variants { display: none; }
.fs-cmp--compare td:first-child, .fs-cmp--compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--fs-white); }
.fs-cmp--compare tr:nth-child(even) > :first-child { background: var(--fs-panel); }
.fs-cmp--compare tr:hover > :first-child { background: var(--fs-primary-050); }
/* Акцент (04.10.2026, владелец: «тускло, внимание рассеивается»; разбор Codex — viz-pilot/accent).
 * Взгляд: заголовок → выбор ситуации → ответ. Зебры нет: серое на сером гасило текст.
 * Невыбранные строки не приглушаем: они остаются текстом статьи (WCAG 4.5:1). */
.fs-cmp .fs-table-scroll { margin: 0; }
.fs-cmp thead th { background: var(--fs-primary-050); color: var(--fs-ink); font-weight: 700; border-bottom: 2px solid var(--fs-primary); }
.fs-cmp tr:nth-child(even) > * { background: transparent; }
.fs-cmp--compare tr:nth-child(even) > :first-child { background: var(--fs-white); }
.fs-cmp--compare thead th:first-child { background: var(--fs-primary-050); }
.fs-cmp tbody td:first-child { color: var(--fs-ink); font-weight: 600; }
.fs-cmp tbody td:not(:first-child) { color: var(--fs-ink-soft); }
.fs-cmp td strong, .fs-cmp .fs-cmp__result strong { color: var(--fs-ink); font-weight: 700; }
.fs-cmp--case .fs-cmp__picker { padding: var(--fs-sp-4); background: var(--fs-primary-050); border-radius: var(--fs-sp-3); }
.fs-cmp--case .fs-cmp__select { border: 2px solid var(--fs-primary); font-weight: 600; }
.fs-cmp--case .fs-cmp__result:not(:empty) { background: var(--fs-white); border-left: var(--fs-sp-1) solid var(--fs-primary); }
.fs-cmp--case tr.fs-cmp__selected > * { background: var(--fs-primary-050); }
.fs-cmp--case .fs-cmp__all { display: block; margin: 0 0 var(--fs-sp-3) auto; }
/* Варианты-кнопки вместо выпадающего списка (до шести ситуаций). */
.fs-cmp .fs-cmp__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--fs-sp-2); }
.fs-cmp .fs-cmp__choice {
  display: flex; align-items: center; gap: var(--fs-sp-3); min-height: 52px;
  text-align: left; font-weight: 600; color: var(--fs-ink); background: var(--fs-white);
  border: 1px solid var(--fs-line); border-radius: var(--fs-sp-2); padding: var(--fs-sp-3) var(--fs-sp-4);
  box-shadow: 0 1px 2px rgba(20, 24, 31, .06); transition: border-color .2s ease-out, background-color .2s ease-out;
}
.fs-cmp .fs-cmp__choice::before {
  content: ""; flex: 0 0 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--fs-slate); background: var(--fs-white); box-sizing: border-box;
}
.fs-cmp .fs-cmp__choice:hover { border-color: var(--fs-primary); background: var(--fs-white); }
.fs-cmp .fs-cmp__choice[aria-pressed="true"] { color: var(--fs-ink); background: var(--fs-white); border: 2px solid var(--fs-primary); padding: calc(var(--fs-sp-3) - 1px) calc(var(--fs-sp-4) - 1px); }
.fs-cmp .fs-cmp__choice[aria-pressed="true"]::before { border: 5px solid var(--fs-primary); }
.fs-cmp--case .fs-cmp__choices + .fs-cmp__result:not(:empty) { margin-top: var(--fs-sp-3); }
/* Выбранная кнопка уже называет ситуацию: заголовок ответа только для скринридера. */
.fs-cmp .fs-cmp__choices + .fs-cmp__result .fs-cmp__answer-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fs-cmp .fs-cmp__choices + .fs-cmp__result .fs-cmp__fields dt:first-child { margin-top: 0; }
@media screen and (max-width: 767px) {
  /* Строка ситуации — карточка; подписи столбцов из data-label (ставит caseComponent). */
  .fs-cmp--case .fs-cmp__table-wrap table, .fs-cmp--case .fs-cmp__table-wrap tbody,
  .fs-cmp--case .fs-cmp__table-wrap tr, .fs-cmp--case .fs-cmp__table-wrap td { display: block; width: 100%; }
  .fs-cmp--case .fs-cmp__table-wrap table { min-width: 0; border: 0; }
  .fs-cmp--case .fs-cmp__table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fs-cmp--case .fs-cmp__table-wrap tr { border: 1px solid var(--fs-line); border-radius: var(--fs-sp-2); margin-top: var(--fs-sp-3); overflow: hidden; }
  .fs-cmp--case .fs-cmp__table-wrap td { border: 0; padding: var(--fs-sp-1) var(--fs-sp-3); line-height: 1.55; }
  .fs-cmp--case .fs-cmp__table-wrap td:first-child { padding-top: var(--fs-sp-3); }
  .fs-cmp--case .fs-cmp__table-wrap td:last-child { padding-bottom: var(--fs-sp-3); }
  .fs-cmp--case td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--fs-sp-1); font-size: var(--fs-fs-small); font-weight: 600; color: var(--fs-slate); }
  .fs-cmp--case .fs-cmp__all { width: 100%; }
}
@media (max-width: 767px) {
  .fs-cmp { padding: var(--fs-sp-3); }
  .fs-cmp th, .fs-cmp td { padding: var(--fs-sp-2); }
  .fs-cmp--compare[data-fs-ready] .fs-cmp__variants { display: flex; }
  .fs-cmp--compare[data-fs-ready] .fs-cmp__variants > button { flex: 1 1 auto; }
  .fs-cmp--compare[data-fs-ready] table { display: table; table-layout: fixed; width: 100%; overflow: visible; }
  .fs-cmp--compare[data-fs-ready] .fs-cmp__omit { display: none; }
  .fs-cmp--compare[data-fs-ready] td:first-child, .fs-cmp--compare[data-fs-ready] th:first-child { position: static; width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-cmp *, .fs-cmp *::before, .fs-cmp *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .fs-cmp .fs-cmp__picker, .fs-cmp .fs-cmp__switch, .fs-cmp .fs-cmp__timeline, .fs-cmp .fs-cmp__all { display: none !important; }
  .fs-cmp .fs-cmp__table-wrap[hidden] { display: block !important; overflow: visible; }
  .fs-cmp--compare[data-fs-ready] .fs-cmp__omit { display: table-cell !important; }
}