/* ============================================================
   Таблицы, аккордеон и статусы дизайн-системы.
   Взято из проекта Dubrovin_DES_SYS_Refined, styles/components.css,
   2026-08-24 — локальная копия ДС этих компонентов не содержала.
   Не править здесь: правки идут в assets/standalone.css.
   ============================================================ */

/* ---------- Аккордеон (FAQ) ---------- */

/* Раскрытый элемент подсвечивается светло-серым: и строка вопроса, и текст под
   ней — они читаются как один блок. Подложка выходит за поля на 20px, поэтому
   текст остаётся на той же вертикали, что и в закрытом состоянии. */
.dc-faq__item--open .dc-faq__bar,
.dc-faq__item--open .dc-faq__content {
  background: var(--dc-grey-050);
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -20px;
  margin-right: -20px;
}
.dc-faq__item--open .dc-faq__bar { border-bottom-color: transparent; }
.dc-faq__item--open .dc-faq__content { padding-top: 0; padding-bottom: 14px; }
.dc-faq__item--open .dc-faq__content p:first-child { padding-top: 0; }
.dc-faq__item--open .dc-faq__content p:last-child { padding-bottom: 0; }
.dc-faq__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--dc-hairline);
  transition: var(--dc-transition);
  color: var(--dc-black);
  font-size: var(--dc-question-size);
  font-weight: var(--dc-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-decoration: none;
  cursor: pointer;
}
/* Круг на серой подложке становится белым — иначе #f3f3f3 на #fafafa исчезает */
.dc-faq__item--open .dc-faq__circle { background: var(--dc-white); }
.dc-faq__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  min-width: 55px;
  height: 55px;
  border-radius: var(--dc-radius-circle);
  background: var(--dc-grey-100);
}
.dc-faq__content {
  font-size: 16px;
  font-weight: var(--dc-weight-regular);
  line-height: 140%;
  padding-top: 14px;
}
.dc-faq__content p {
  letter-spacing: -0.03em;
  padding: 14px 0;
  font-size: 16px;
  font-weight: var(--dc-weight-regular);
  line-height: 1.6;
}
[data-dc-plane="grey"] .dc-table--zebra tbody tr:nth-child(even),
[data-dc-plane="grey"] .dc-table--zebra tbody tr:nth-child(even) { background: var(--dc-white); }
[data-dc-plane="grey"] .dc-tr--key td,
[data-dc-plane="grey"] .dc-tr--key td { background: var(--dc-white); }
/* На зелёном фоне зелёные точки становятся белыми с чёрным контуром: зелёные
   градации на зелёном не различаются, и статус читается только формой. */
.dc-plate--hov:hover .dc-dot { background: var(--dc-white); border: none; box-shadow: none; }
.dc-plate--hov:hover .dc-dot--name { background: transparent; border: 2px solid var(--dc-black); }
.dc-plate--hov:hover .dc-dot--todo { background: var(--dc-black); }
/* Жёлтковая точка на зелёном остаётся жёлтковой: она не градация зелёного,
   различается на любом фоне и несёт единственное значение — «доупаковать». */
.dc-plate--hov:hover .dc-dot--half { background: var(--dc-yolk); border: none; }
/* То же правило для любой зелёной заливки, не только для ховера: на зелёном фоне
   зелёные градации точки не различаются, поэтому они становятся белыми. */
.dc-plate--accent .dc-dot, .dc-step--accent .dc-dot, .dc-board__panel--accent .dc-dot { background: var(--dc-white); border: none; }
.dc-plate--accent .dc-dot--name, .dc-step--accent .dc-dot--name, .dc-board__panel--accent .dc-dot--name { background: transparent; border: 2px solid var(--dc-black); }
.dc-plate--accent .dc-dot--todo, .dc-step--accent .dc-dot--todo, .dc-board__panel--accent .dc-dot--todo { background: var(--dc-black); }
.dc-plate--accent .dc-dot--half, .dc-step--accent .dc-dot--half, .dc-board__panel--accent .dc-dot--half { background: var(--dc-yolk); border: none; }
/* Вертикальная колонка плашек внутри клетки или панели */

/* ---------- Статус-точка ---------- */
/* Четыре состояния в трёх цветах системы. Точка стоит перед заголовком. */

.dc-status, .dc .dc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--dc-gap-sm);
  font-size: 11px;
  font-weight: var(--dc-weight-semibold);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dc-grey-500);
}
.dc-dot {
  box-sizing: border-box;
  width: 10px;
  min-width: 10px;
  height: 10px;
  border-radius: var(--dc-radius-circle);
  background: var(--dc-green);
  display: inline-block;
}
.dc-plate__title .dc-dot { flex: 0 0 auto; position: relative; top: -1px; }
.dc-dot--half { background: var(--dc-yolk); }
/* доупаковать */
.dc-dot--name { background: transparent; border: 2px solid var(--dc-black); }
/* назвать */
.dc-dot--todo { background: var(--dc-black); }
/* собрать */
/* Пятой ступени нет. Если сущности не существует и она не в планах — её
   не показывают вовсе, а не помечают отдельной точкой. */

/* ---------- Таблица ---------- */

.dc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dc-font-sans);
  font-size: 16px;
  font-weight: var(--dc-weight-regular);
  line-height: 1.45;
  color: var(--dc-ink);
  text-align: left;
}
.dc-table th {
  padding: 12px var(--dc-cell-padding);
  border-bottom: var(--dc-rule-strong) solid var(--dc-black);
  font-size: 11px;
  font-weight: var(--dc-weight-bold);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dc-black);
  vertical-align: bottom;
  white-space: nowrap;
}
.dc-table td {
  padding: 14px var(--dc-cell-padding);
  border-bottom: var(--dc-rule) solid var(--dc-grey-200);
  vertical-align: top;
}
.dc-table th:first-child, .dc-table td:first-child { padding-left: 0; }
.dc-table th:last-child, .dc-table td:last-child { padding-right: 0; }
.dc-table tfoot td {
  border-bottom: none;
  border-top: var(--dc-rule-strong) solid var(--dc-black);
  font-weight: var(--dc-weight-semibold);
  color: var(--dc-black);
}
/* Первая колонка — название строки, всегда чёрная и полужирная */
.dc-table--labels tbody td:first-child {
  font-weight: var(--dc-weight-semibold);
  color: var(--dc-black);
}
/* Подложка через строку — для длинных таблиц */
.dc-table--zebra tbody tr:nth-child(even) { background: var(--dc-grey-050); }
.dc-table--zebra td:first-child { padding-left: var(--dc-cell-padding); }
.dc-table--zebra th:first-child { padding-left: var(--dc-cell-padding); }
.dc-table--compact td { padding-top: 8px; padding-bottom: 8px; }
.dc-table--compact th { padding-top: 8px; padding-bottom: 8px; }
.dc-td--num {
  font-family: var(--dc-font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--dc-black);
  text-align: right;
  white-space: nowrap;
}
.dc-td--muted { color: var(--dc-grey-400); }
.dc-td--key { background: var(--dc-green); color: var(--dc-black); font-weight: var(--dc-weight-semibold); }
.dc-tr--key td { background: var(--dc-grey-100); color: var(--dc-black); }
.dc-list li .dc-dot { margin-right: 8px; position: relative; top: -1px; }
.dc-table--stack thead { display: none; }
.dc-table--stack td { display: block; padding-left: 0; }
.dc-filter__item[aria-pressed="true"] .dc-dot {background:var(--dc-white);border:none}
.dc-filter__item[aria-pressed="true"] .dc-dot--name {background:transparent;border:2px solid var(--dc-white)}
.dc-filter__item[aria-pressed="true"] .dc-dot--half {background:var(--dc-yolk)}
.dc-step__title .dc-dot {flex:0 0 auto;position:relative;top:-1px}