/*
  Стили экрана «Совет директоров». Вынесены из <style> страницы 27.08.2026
  (веб-дизайнер, блок A плана): свой стиль внутри разметки — это своя
  дизайн-система на одной странице. Ни одного нового цвета и шрифта, только
  токены design-tokens.css. Общее место для того, что нужно другим экранам, —
  components.css: туда в тот же день уехал свёрнутый раздел .fold-section.
*/
  /* Цифра месяца: план → факт → прогноз в одном ряду, один порядок мысли. */
  .ceo-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-6) 0 var(--space-4); }
  .ceo-num-label { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); margin-bottom: 4px; }
  .ceo-num-value { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-variant-numeric: tabular-nums; color: var(--color-text); }
  .ceo-num-value.is-goal { color: var(--color-accent); }
  .ceo-num-note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }

  .ceo-verdict { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--leading-base); }
  .ceo-verdict--ok { background: rgba(26, 157, 108, .10); color: var(--color-success); }
  .ceo-verdict--warn { background: rgba(208, 65, 58, .10); color: var(--color-danger); }
  .ceo-verdict--mute { background: rgba(107, 115, 130, .10); color: var(--color-muted); }

  /* Лестница подчинения: подчинённый смещён вправо и связан линией. */
  /* 09.09.2026: было var(--space-5) — токена --space-5 в системе нет (design-tokens.css
     держит 1,2,3,4,6,8...), из-за опечатки вся padding-декларация становилась
     невалидной и схлопывалась в 0 — текст карточек начинался прямо от края,
     без единого пикселя отступа слева. Тот же класс беды уже чинили в layout.css
     под .pulse-block 2026-08-06 — там правильный сосед тоже --space-6. */
  .ceo-role { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-3); }
  .ceo-role--sub { margin-left: var(--space-8); border-left: 3px solid rgba(47, 111, 237, .25); }
  .ceo-role-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  .ceo-role-title { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-md); margin: 0; }
  .ceo-role-boss { font-size: var(--text-xs); color: var(--color-muted); }
  .ceo-zone { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-muted); margin: var(--space-2) 0 var(--space-3); }
  .ceo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
  .ceo-order { font-size: var(--text-sm); line-height: var(--leading-base); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgba(47, 111, 237, .05); }
  .ceo-order b { font-family: var(--font-heading); font-weight: 600; }
  .ceo-order-why { color: var(--color-muted); font-size: var(--text-xs); display: block; margin-top: 4px; }

  .pill { font-size: var(--text-xs); line-height: var(--leading-xs); padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
  .pill--ok { background: rgba(26, 157, 108, .12); color: var(--color-success); }
  .pill--warn { background: rgba(208, 65, 58, .12); color: var(--color-danger); }
  .pill--mute { background: rgba(107, 115, 130, .12); color: var(--color-muted); }
  .pill--accent { background: rgba(47, 111, 237, .12); color: var(--color-accent); }

  /* Мировая практика: спокойный блок, который читается, а не кричит. */
  .ceo-canon {
    font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-text);
    background: rgba(47, 111, 237, .04); border-left: 3px solid rgba(47, 111, 237, .35);
    border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  }
  /* Канон должности — материал для чтения, а не ответ дня: на виду строка,
     текст приходит по клику. Тринадцать должностей × абзац канона давали
     4 749 px одной лестницы (правка 27.08.2026, прогрессивное раскрытие). */
  .ceo-canon-label {
    display: block; font-size: var(--text-xs); line-height: var(--leading-xs);
    color: var(--color-accent); margin-bottom: 4px; letter-spacing: .01em;
    cursor: pointer; list-style: none;
  }
  .ceo-canon-label::-webkit-details-marker { display: none; }
  .ceo-canon > summary::before { content: "▸ "; }
  .ceo-canon[open] > summary::before { content: "▾ "; }
  .ceo-canon[open] > summary { margin-bottom: var(--space-2); }
  .ceo-conflict { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  .ceo-conflict:last-child { border-bottom: none; padding-bottom: 0; }
  .ceo-conflict-title { font-family: var(--font-heading); font-size: var(--text-md); margin-bottom: var(--space-3); }
  .ceo-conflict-side { font-size: var(--text-sm); line-height: var(--leading-base); margin-bottom: var(--space-2); }
  .ceo-conflict-label {
    display: inline-block; font-size: var(--text-xs); line-height: var(--leading-xs);
    padding: 2px 8px; border-radius: var(--radius-sm); margin-right: var(--space-2);
  }
  .ceo-conflict-label--canon { background: rgba(47, 111, 237, .12); color: var(--color-accent); }
  .ceo-conflict-label--hers { background: rgba(107, 115, 130, .12); color: var(--color-muted); }
  .ceo-conflict-price { font-size: var(--text-sm); line-height: var(--leading-base); margin-top: var(--space-2); }
  .ceo-conflict-decided {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin-top: var(--space-3);
  }
  .btn-sm { padding: 6px 14px; font-size: var(--text-sm); }

  .ceo-principle { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  .ceo-principle:last-child { border-bottom: none; padding-bottom: 0; }
  .ceo-principle-title { font-family: var(--font-heading); font-size: var(--text-md); margin-bottom: 4px; }
  .ceo-principle-body { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-text); }
  .ceo-principle-ours { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-muted); margin-top: 4px; }

  .ceo-detail { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-muted); }
  .ceo-detail summary { cursor: pointer; color: var(--color-accent); font-size: var(--text-xs); }
  .ceo-detail ul { margin: var(--space-2) 0 0; padding-left: 18px; }
  /* Пунктам списка не хватало своего отступа — они шли вплотную друг к другу,
     один общий padding-left слева и ни просвета между строками (Анна поймала
     09.09.2026 на только что заработавшем списке «что уйдёт в работу»: «текст
     пошёл всё слеплено»). У соседних экранов такой отступ есть
     (hypotheses.css .hyp-findings li, reports.css .clicks-notes li) — здесь
     не завели вместе с остальными правилами .ceo-detail. */
  .ceo-detail li { margin-bottom: var(--space-2); }
  .ceo-detail li:last-child { margin-bottom: 0; }

  /* Три плоских списка на этом экране («без вас не решается», «работа без
     хозяина», «не проверено») несли одну и ту же беду — она же расписана у
     .ceo-detail li выше — плюс были заданы style="" по три раза одинаково.
     Сведены в один класс: и отступ между строками, и конец копипасты. */
  .ceo-flat-list { margin: 0; padding-left: 18px; font-size: var(--text-sm); line-height: var(--leading-base); }
  .ceo-flat-list li { margin-bottom: var(--space-2); }
  .ceo-flat-list li:last-child { margin-bottom: 0; }
  .ceo-flat-list--muted { color: var(--color-muted); }

  @media (max-width: 720px) {
    .ceo-numbers { grid-template-columns: 1fr 1fr; }
    .ceo-role--sub { margin-left: var(--space-4); }
  }

  /* План месяца: за счёт чего берётся цифра. Ни одного нового цвета — только
     токены; красным горит ровно одно место, неразложенная часть плана. */
  .mp-origin { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--color-text);
    background: rgba(47, 111, 237, .04); border-left: 3px solid rgba(47, 111, 237, .35);
    border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
  .mp-quote { color: var(--color-muted); margin-top: var(--space-2); }

  .mp-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
  .mp-source { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
  .mp-source-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
  .mp-source-what { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-md); }
  .mp-source-sum { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-md);
    font-variant-numeric: tabular-nums; color: var(--color-success); white-space: nowrap; }
  .mp-source-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
    margin-top: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-muted); }
  .mp-question { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: rgba(208, 65, 58, .06); font-size: var(--text-sm); line-height: var(--leading-base); }

  .mp-gap { border: 1px solid rgba(208, 65, 58, .35); border-radius: var(--radius-md);
    padding: var(--space-4); margin-bottom: var(--space-4); }
  .mp-gap-title { font-family: var(--font-heading); font-size: var(--text-md); line-height: var(--leading-md);
    color: var(--color-danger); margin-bottom: var(--space-3); }
  .mp-gap-option + .mp-gap-option { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

  /* Пояснение под заголовком раздела — один вид на весь экран.
     Заведено 27.08.2026 вместо трёх одинаковых style="…" в разметке. */
  .ceo-note {
    font-size: var(--text-sm); line-height: var(--leading-base);
    color: var(--color-muted); margin: 0 0 var(--space-4);
  }
  .ceo-note:last-of-type { margin-bottom: var(--space-4); }

  /* Общая для всей команды причина молчания — одной строкой над лестницей. */
  .ceo-team-note { margin-bottom: var(--space-4); }