/* med-admin: визуальные блоки уроков редакции 2.0 (образец Claude, 23.10.2026; палитра приведена к общей 23.10.2026).
   Только CSS, без собственного JS. Работает вместе с learn.css и dialogues.css. */

.admin-lesson { --ma-green: #286b83; --ma-deep: #0c3043; --ma-soft: #f1f6f8; --ma-line: #dbe7ec; --ma-warm: #fff4e8; --ma-warm-line: #c98a4b; }

/* Сцена смены: время + короткая завязка */
.ma-scene { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: start; margin: 20px 0 26px; padding: 18px 20px; border-radius: 16px; background: var(--ma-soft); border: 1px solid var(--ma-line); }
.ma-scene__time { font: 700 1.05rem/1 var(--sans); color: #fff; background: var(--ma-green); border-radius: 999px; padding: 8px 12px; white-space: nowrap; }
.ma-scene p { margin: 0 !important; overflow-wrap: anywhere; }
.ma-scene__tag { display: block; font: 700 .75rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ma-green); margin-bottom: 4px; }

/* Схема шагов */
.ma-flow { list-style: none; counter-reset: maflow; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 0 !important; margin: 18px 0 26px !important; }
.ma-flow li { counter-increment: maflow; position: relative; margin: 0; padding: 14px 14px 14px 52px; background: #fff; border: 1px solid var(--ma-line); border-radius: 12px; line-height: 1.4; overflow-wrap: break-word; hyphens: auto; }
.ma-flow li::before { content: counter(maflow); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--ma-green); color: #fff; font: 700 .85rem/26px var(--sans); text-align: center; }
.ma-flow b { display: block; color: var(--ma-deep); }
.ma-flow small { display: block; color: #4f6573; font-size: .86rem; margin-top: 3px; }

/* Переписка/разговор пузырями */
.ma-chat { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 24px; padding: 18px; background: #f7fafb; border: 1px solid var(--ma-line); border-radius: 18px; }
.ma-chat__title { margin: 0 0 4px !important; font: 700 .76rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ma-green); }
.ma-msg { max-width: 82%; margin: 0 !important; padding: 10px 14px; border-radius: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ma-msg small { display: block; font: 700 .75rem/1.4 var(--sans); color: #62798a; margin-bottom: 2px; }
.ma-msg--p { align-self: flex-start; background: #fff; border: 1px solid var(--ma-line); border-bottom-left-radius: 4px; }
.ma-msg--a { align-self: flex-end; background: #e2f0f5; border-bottom-right-radius: 4px; }
.ma-msg--a small { color: var(--ma-green); }
.ma-note { align-self: center; margin: 2px 0 !important; font-size: .84rem; color: #4f6573; text-align: center; }

/* «Не так / так»: каждая строка — пара фраз, подписи у каждой ячейки (читается и на телефоне) */
.ma-swap { margin: 16px 0 24px; border: 1px solid var(--ma-line); border-radius: 14px; overflow: hidden; }
.ma-swap__row { display: grid; grid-template-columns: 1fr 1fr; }
.ma-swap__row + .ma-swap__row { border-top: 1px solid var(--ma-line); }
.ma-swap__no, .ma-swap__yes { margin: 0 !important; padding: 12px 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ma-swap__no::before, .ma-swap__yes::before { display: block; font: 700 .75rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.ma-swap__no { background: var(--ma-warm); color: #5b4636; }
.ma-swap__no::before { content: "Не так"; color: #9a5726; }
.ma-swap__yes { background: #fbfdfe; border-left: 1px solid var(--ma-line); }
.ma-swap__yes::before { content: "Так"; color: var(--ma-green); }

/* Карточки-варианты (три подачи, три вопроса) */
.ma-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.ma-card { margin: 0; padding: 16px; background: #fff; border: 1px solid var(--ma-line); border-top: 4px solid var(--ma-green); border-radius: 12px; overflow-wrap: anywhere; }
.ma-card h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--ma-deep); }
.ma-card p { margin: 0 !important; font-size: .98rem; line-height: 1.5; }
.ma-card__q { display: block; margin-top: 8px; font-style: italic; color: #33505f; }

/* Граница роли администратора */
.ma-limit { margin: 18px 0 24px; padding: 14px 16px; border-left: 4px solid var(--ma-warm-line); background: var(--ma-warm); border-radius: 4px 12px 12px 4px; }
.ma-limit p { margin: 0 !important; }
.ma-limit b { color: #7a3f12; }

/* Блок мини-развилок внутри урока */
.admin-lesson [data-decision-lab] .case__opts { display: grid; gap: 8px; margin-top: 10px; }
.admin-lesson [data-decision-lab] .case__opts button { text-align: left; white-space: normal; line-height: 1.45; padding: 11px 14px; border: 1px solid #9dbccb; border-radius: 10px; background: #fff; color: var(--ma-deep); font: inherit; cursor: pointer; }
.admin-lesson [data-decision-lab] .case__opts button:hover:not(:disabled) { background: #f1f7fa; }
.admin-lesson [data-decision-lab] .case__opts button:focus-visible { outline: 3px solid #2f7d98; outline-offset: 2px; }
.admin-lesson [data-decision-lab] .case__opts button.is-right { background: #e2f0f5; border-color: var(--ma-green); font-weight: 600; }
.admin-lesson [data-decision-lab] .case__opts button.is-wrong { background: var(--ma-warm); border-color: var(--ma-warm-line); }
.admin-lesson [data-decision-lab] .case__why { margin-top: 10px !important; color: var(--ma-deep); }
.admin-lesson [data-decision-lab] .case__why.is-bad { color: #7a3f12; }

@media (max-width: 600px) {
  .ma-flow { grid-template-columns: 1fr; gap: 8px; }
  .ma-flow li { padding-top: 11px; padding-bottom: 11px; }
  .ma-scene { grid-template-columns: 1fr; }
  .ma-scene__time { justify-self: start; }
  .ma-msg { max-width: 92%; }
  .ma-swap__row { grid-template-columns: 1fr; }
  .ma-swap__yes { border-left: 0; border-top: 1px dashed var(--ma-line); }
}