/* Компоненты урока (правки 545, 546) — общие для уроков геометрии и алгебры (web/guide.js). Вид — как в старом
   приложении и по паспорту: плоско, без теней; плашки и фоны нейтральные; сиреневый — только акцент (текущая вкладка,
   главная кнопка, выбранный вариант до проверки); зелёный — только «верно / решено / пройдено»; неверно — тёплый.
   Текст урока — --fs-read / --lh-read, строка не длиннее --content-measure. */
.guide-strip { display: grid; gap: 26px; }
.guide-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; scroll-margin-top: 150px; min-width: 0; }
.guide-hero { background: transparent; border: 0; padding: 0; }
.guide-block-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.guide-block-heading h2 { font-size: var(--fs-block-title); line-height: var(--lh-heading); letter-spacing: -0.01em; font-weight: var(--fw-block-title); margin: 0; }
.guide-number { display: grid; place-items: center; flex: 0 0 auto; min-width: 34px; height: 30px; padding: 0 10px; background: var(--surface2); color: var(--ink2); border: 1px solid var(--line); border-radius: var(--r-pill); font-weight: var(--fw-strong); }
.guide-block h3 { font-size: var(--fs-read); line-height: 1.45; font-weight: var(--fw-strong); margin: 0 0 14px; }
.guide-block p { margin: 12px 0; }
.guide-block p, .guide-block li { max-width: var(--content-measure); }
.guide-purpose, .guide-lead { font-size: var(--fs-read); line-height: var(--lh-read); }
.guide-format, .guide-small, .guide-pending, .guide-pause { color: var(--ink2); font-size: var(--fs-14); }
.guide-small { display: block; font-weight: 450; margin-bottom: 6px; }
.guide-pause { margin: -6px 0 12px; }
.guide-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; margin: 16px 0; background: var(--surface); min-width: 0; }
.guide-task-card { background: var(--surface2); }
.guide-task-text { font-size: var(--fs-read); font-weight: var(--fw-strong); margin: 0; line-height: 1.5; }
.guide-plan { margin: 10px 0 0; color: var(--ink2); }

/* Варианты — карточками в ряд с буквами а/б/в (на телефоне столбиком) */
.guide-options { display: flex; flex-wrap: wrap; gap: 9px; }
.guide-options .btn { flex: 1 1 160px; text-align: left; font-size: var(--fs-15); display: flex; align-items: center; gap: 10px; min-height: var(--control-h); }
.guide-options .btn[aria-pressed="true"] { border-color: var(--accent); }
.guide-options .btn[data-wrong="true"] { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.guide-options .btn:disabled { opacity: 1; color: var(--ink2); }
.guide-options .btn[data-correct="true"], .guide-options .btn[data-correct="true"]:disabled { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.guide-badge { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--line); color: var(--ink2); font-weight: 700; font-size: var(--fs-15); }
.guide-options .btn[data-correct="true"] .guide-badge { background: var(--surface); border-color: var(--ok); color: var(--ok); }
.guide-feedback { border-left: 3px solid var(--warn-line); padding: 12px 15px; background: var(--warn-soft); color: var(--warn); margin-top: 16px; border-radius: 0 8px 8px 0; line-height: 1.6; }
.guide-neutral { border-color: var(--line-strong); background: var(--surface2); color: var(--ink); }  /* «не понял запись» — не ошибка */
.guide-wrong { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.guide-success { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.guide-review { margin-top: 12px; }
.guide-review summary { cursor: pointer; color: var(--ink2); font-size: var(--fs-14); padding: 12px 0; }  /* треугольник раскрытия виден: summary — строка списка */
.guide-review ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.guide-review li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.guide-review-option { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-strong); }
.guide-review-why { color: var(--ink2); line-height: 1.55; }
.guide-reminder { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 18px 0; color: var(--ink); }
.guide-reminder h3 { font-size: var(--fs-15); margin: 0 0 6px; }
.guide-rest-from p { margin: 8px 0; color: var(--ink2); }
.guide-rest-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.guide-rest-note { flex: 1 1 100%; }
.guide-rest-note > summary { list-style: none; display: inline-flex; align-items: center; }
.guide-rest-note > summary::-webkit-details-marker { display: none; }
.guide-rest-note[open] > summary { margin-bottom: 8px; }
.guide-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.guide-danger { font-size: var(--fs-read); line-height: var(--lh-read); }

/* Разбор: одна карточка шага, крупная строка шага; «Показать всё» — шаги списком */
.guide-demo { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.guide-demo-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: var(--fs-14); color: var(--ink2); background: var(--surface2); padding: 14px 18px; }
.guide-step { padding: 28px 22px; min-height: 200px; }
.guide-math { font-size: var(--fs-step); font-weight: var(--fw-strong); line-height: 1.55; overflow-wrap: anywhere; }
.guide-why { font-size: var(--fs-16); line-height: var(--lh-read); color: var(--ink2); }
.guide-demo-all { list-style: none; margin: 0; padding: 0; }
.guide-demo-all .guide-step { min-height: 0; padding: 18px 22px; border-top: 1px solid var(--line); }
.guide-demo-all .guide-step:first-child { border-top: 0; }
.guide-demo-all .guide-math { font-size: var(--fs-20); }
.guide-ways { margin: 0; padding: 10px 18px 0; color: var(--ink2); font-size: var(--fs-14); line-height: 1.5; }
.guide-variant { display: inline-block; margin: 0 0 10px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface2); border: 1px solid var(--line); color: var(--ink2); font-size: var(--fs-13); }
.guide-demo > .guide-actions { border-top: 1px solid var(--line); padding: 14px 18px; margin: 0; justify-content: space-between; }
.guide-working { border-left: 3px solid var(--line-strong); background: var(--surface2); border-radius: 0 10px 10px 0; padding: 10px 18px; overflow-wrap: anywhere; margin: 16px 0; }
.guide-working p { padding: 9px 0; margin: 0; font-size: var(--fs-read); }
.guide-working.guide-success { border-color: var(--ok); background: var(--ok-soft); }

/* Задача с ответом: подпись, поле, свои кнопки символов, подсказка формата */
.guide-answer-form label { font-size: var(--fs-14); color: var(--ink2); display: block; margin: 10px 0 6px; }
.guide-answer-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.guide-answer-row input { border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px 12px; min-width: 0; flex: 1 1 160px; font-size: var(--fs-17); background: var(--surface); color: var(--ink); min-height: 46px; }
.guide-answer-row input:disabled { background: var(--surface2); border-color: var(--line); color: var(--ink2); opacity: 1; }  /* закрыто, но не решено */
.guide-answer-row input.is-solved { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }  /* 550: зелёное — только решённое */
.guide-inserts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.guide-insert { min-width: var(--control-h); min-height: var(--control-h); justify-content: center; font-size: var(--fs-17); }
.guide-field-format { margin: 8px 0 0; color: var(--ink2); font-size: var(--fs-14); }
.guide-hint { padding: 10px 14px; border-left: 3px solid var(--line-strong); background: var(--surface2); border-radius: 0 10px 10px 0; font-size: var(--fs-15); color: var(--ink); margin: 10px 0; }
.guide-why-steps { margin: 8px 0 0; padding-left: 22px; }
.guide-why-steps li { padding: 6px 0; }
.guide-why-line { display: block; font-weight: var(--fw-strong); color: var(--ink); }
.guide-success .guide-why-line { color: var(--ok); }
.guide-why-rule { display: block; color: var(--ink2); font-size: var(--fs-14); margin-top: 2px; }
.guide-task-mark { display: inline-block; margin-left: 10px; font-weight: var(--fw-strong); color: var(--ok); }

/* Чертёж задачи — та же тёмная сцена, что у решения */
.guide-task-visual { background: var(--stage); border-radius: 12px; padding: 8px 6px; margin: 8px 0 12px; max-width: 640px; color: var(--stage-ink); }
.guide-task-visual svg { display: block; width: 100%; height: auto; }
.guide-caption { padding: 6px 10px 4px; font-size: var(--fs-14); text-align: center; color: var(--stage-muted); margin: 0; }

/* «Найди, где сломалось» */
.guide-pair { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; } .guide-brace { font-size: var(--fs-20); font-weight: 600; white-space: nowrap; }
.guide-pair input.guide-num { width: 4.4em; min-width: 0; flex: none; text-align: center; }
.guide-error-lines { display: grid; gap: 8px; }
.guide-error-lines button { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface2); border: 1px solid var(--line); border-radius: 9px;
  padding: 12px; font-size: var(--fs-15); line-height: 1.5; min-height: 48px; color: var(--ink); overflow-wrap: anywhere; cursor: pointer; }
.guide-error-lines button[aria-pressed="true"] { border-color: var(--accent); }
.guide-error-lines button:disabled { opacity: 1; }
.guide-error-lines button.guide-error-found, .guide-error-lines button.guide-error-found:disabled { flex-wrap: wrap; background: var(--surface2); border-color: var(--right); color: var(--ink); }
.guide-error-found .guide-error-text { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink2); }
.guide-error-tag { flex: none; padding: 2px 10px; border-radius: var(--r-pill); background: var(--sticker); color: var(--sticker-ink); font-size: var(--fs-13); font-weight: 700; }
.guide-error-lines .guide-found-mark { margin-left: auto; color: var(--right); font-size: var(--fs-20); font-weight: 800; white-space: nowrap; }
.guide-error-lines button.guide-error-miss { background: var(--wrong-soft); border-color: var(--wrong); color: var(--wrong); }
.guide-error-lines .line-number { flex-shrink: 0; font-weight: 700; }
.guide-found-mark { margin-left: auto; flex-shrink: 0; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--fs-13); font-weight: var(--fw-strong); }
.guide-story section { margin-top: 18px; }
.guide-story h4 { margin: 0 0 6px; font-size: var(--fs-15); color: var(--ink); }
.guide-block .guide-story p { margin: 0; }
.guide-story .guide-habit { border-left: 3px solid var(--line-strong); background: var(--surface2); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.guide-story .guide-again .guide-options { margin-top: 10px; }

/* Итог проверки: нейтральный, пока не решено всё */
.guide-finish { padding: 22px; background: var(--surface2); border: 1px solid var(--line); border-radius: 16px; margin-top: 24px; color: var(--ink); }
.guide-finish strong { font-size: var(--fs-23); display: block; margin-bottom: 6px; }
.guide-finish p { margin: 6px 0; }
.guide-drill a { margin-top: 8px; }

/* ⚑ у шага и задачи — только владельцу (правка 545); ученику — один на блок */
html:not([data-owner="1"]) [data-fb-step] > .fb-box { display: none; }

@media (max-width: 720px) {
  .guide-strip { gap: 18px; }
  .guide-block { padding: 18px 14px; scroll-margin-top: 16px; border-radius: 16px; }
  .guide-hero { padding: 0; }
  .guide-options { flex-direction: column; }
  .guide-options .btn { flex: 0 0 auto; }
}
/* Ссылка на серию тренажёра «Счёт» — кнопка с длинным названием: переносится целиком, без подчёркивания */
.guide-drill .btn { white-space: normal; text-decoration: none; text-align: left; height: auto; min-height: var(--control-h); }
/* 550: «Где застопорилось?», таблица выбора, итог серии способов, строка уровней, «Дальше по теме» — как в старом */
.guide-stuck { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
.guide-stuck p { margin: 0 0 10px; }
.guide-stuck-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.guide-stuck-options .btn { white-space: normal; text-align: left; min-height: var(--control-h); }
.guide-stuck-skip { margin-top: 8px; border: 0; background: transparent; color: var(--ink2); text-decoration: underline; min-height: var(--control-h); cursor: pointer; font: inherit; }
.guide-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.guide-decision { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.guide-decision caption { text-align: left; font-weight: var(--fw-strong); margin-bottom: 8px; }
.guide-decision th, .guide-decision td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.guide-decision th { background: var(--surface2); color: var(--ink2); font-weight: var(--fw-strong); }
.guide-decision a { display: inline-flex; align-items: center; min-height: var(--control-h); }
.guide-method-review { display: grid; gap: 6px; padding-left: 22px; }
.guide-method-review li span { display: block; color: var(--ink2); }
.guide-levels { color: var(--ink2); margin: 0 0 6px; }
.guide-links .btn { text-decoration: none; white-space: normal; height: auto; }
/* 640: приём справочника в «Напомнить» — шаги по номерам. */
.guide-method-steps { margin: var(--sp-2) 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }