/* ============================================================================
   lesson-ui.css — общий UI-словарь уроков (стадия-4 Ц11, Вариант B).
   Единый callout-компонент вместо разнобоя .hint/.danger-hint/.ok-hint/.banner
   (security-семья) и .pitfall/.rule (teaching-семья).
   Подключается одним <link> в каждом уроке. Тема-агностичен (светлая база + тёмная
   по prefers-color-scheme), значения выверены в Ц11.
   namespace --cl-* НАМЕРЕННО отделён от Ц11-токенов статусов/кнопок (--ok-*/--danger-*
   /--warn-* остаются за урочными компонентами: статусы, диаграммы, чеклисты, бейджи).
   Законно-разное (интерактив .addr/.status/.badge; схемы .cmp/.flow/.edge-card) НЕ входит.
   ============================================================================ */
:root{
  --cl-info-bg:#eef4fb;   --cl-info-line:#cfe0f5; --cl-info-fg:#2c5582;  --cl-info-strong:#1a3f66;
  --cl-warn-bg:#fdf1dd;   --cl-warn-line:#e0b35f; --cl-warn-fg:#845400;  --cl-warn-strong:#633f00;
  --cl-danger-bg:#fdecec; --cl-danger-line:#f0b4b4; --cl-danger-fg:#8a2020; --cl-danger-strong:#6e1515;
  --cl-ok-bg:#e6f6ec;     --cl-ok-line:#7bbd97;   --cl-ok-fg:#1f6e42;    --cl-ok-strong:#0f5e33;
  --cl-code-bg:#eef1f6;
}
@media (prefers-color-scheme: dark){
  :root{
    --cl-info-bg:#10233b;   --cl-info-line:#1f3a5f; --cl-info-fg:#bcd5f5;  --cl-info-strong:#dcebff;
    --cl-warn-bg:#2a1f10;   --cl-warn-line:#5a4420; --cl-warn-fg:#ffd591;  --cl-warn-strong:#ffe3ad;
    --cl-danger-bg:#2b1315; --cl-danger-line:#5f2222; --cl-danger-fg:#ffc9c9; --cl-danger-strong:#ffdede;
    --cl-ok-bg:#12261a;     --cl-ok-line:#2f6b47;   --cl-ok-fg:#bdeccf;    --cl-ok-strong:#dcffe8;
    --cl-code-bg:#0f1319;
  }
}

/* База callout: геометрия общая, цвет — от модификатора семантики. */
.callout{border:1px solid;border-radius:10px;padding:10px 13px;
  font-size:13.5px;line-height:1.5;margin:14px 0}
.callout > :first-child{margin-top:0}
.callout > :last-child{margin-bottom:0}
.callout code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--cl-code-bg);border-radius:5px;padding:1px 6px;font-size:.92em}

.callout--info{background:var(--cl-info-bg);border-color:var(--cl-info-line);color:var(--cl-info-fg)}
.callout--info b,.callout--info strong{color:var(--cl-info-strong)}
.callout--warn{background:var(--cl-warn-bg);border-color:var(--cl-warn-line);color:var(--cl-warn-fg)}
.callout--warn b,.callout--warn strong{color:var(--cl-warn-strong)}
.callout--danger{background:var(--cl-danger-bg);border-color:var(--cl-danger-line);color:var(--cl-danger-fg)}
.callout--danger b,.callout--danger strong{color:var(--cl-danger-strong)}
.callout--ok{background:var(--cl-ok-bg);border-color:var(--cl-ok-line);color:var(--cl-ok-fg)}
.callout--ok b,.callout--ok strong{color:var(--cl-ok-strong)}