/* css/check.css - разделы дорожки и проверка «Вспомним вместе» (решения 137, 139; макет ~/pally/mockups/vspomnim, остановка - вариант Б) */

/* ---------- Граница раздела: лента поперёк дорожки с номером и названием ---------- */
.mp-sec { position: absolute; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; padding: 0 10px; z-index: 1; pointer-events: none; }
.mp-sec::before, .mp-sec::after { content: ""; flex: 1; min-width: 12px; border-top: 3px dashed rgba(166, 123, 255, .55); }
.mp-sec span { display: flex; align-items: center; gap: 8px; max-width: 86%; background: #2a2357; border: 2px solid #7d5ce0; color: #e6dcff; border-radius: 999px; padding: 6px 14px 6px 6px; font: 800 14.5px/1.15 var(--sans); box-shadow: 0 4px 0 rgba(8, 14, 30, .45); }
.mp-sec span i { flex: none; font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #7d5ce0; color: #fff; font-size: 15px; }
.mp-sec.lock span { background: #1d2747; border-color: #3a4b78; color: #8f9cc4; }
.mp-sec.lock span i { background: #3a4b78; }
.mp-sec.lock::before, .mp-sec.lock::after { border-color: #33456f; }

/* ---------- Остановка «Вспомним вместе»: деревянная табличка на столбике ---------- */
.mp-stop.ck .mp-node { position: relative; width: 150px; height: 76px; border-radius: 16px; border: 5px solid #ffe7a3; background: linear-gradient(180deg, #c98a4a, #9a5f2a); color: #fff7e0; font: 900 15px/1.1 var(--sans); text-align: center; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 7px 0 #6b3f17, 0 14px 22px rgba(8, 14, 30, .5); padding: 4px; }
.mp-stop.ck .mp-node::before { content: ""; position: absolute; bottom: -31px; left: 50%; margin-left: -5px; width: 10px; height: 26px; background: #6b3f17; border-radius: 0 0 3px 3px; z-index: -1; }
.mp-stop.ck.now .mp-node { width: 170px; height: 86px; border-color: #fff; background: linear-gradient(180deg, #d99a55, #a5662e); color: #fff7e0; box-shadow: 0 7px 0 #6b3f17, 0 14px 22px rgba(8, 14, 30, .5); cursor: pointer; animation: ck-pulse 1.6s ease-in-out infinite; }
.mp-stop.ck.now .mp-node:active { transform: translateY(6px); box-shadow: 0 1px 0 #6b3f17; animation: none; }
.mp-stop.ck.now .mp-node:focus-visible { outline: 5px solid #ffd465; outline-offset: 4px; }
.mp-stop.ck.now.night .mp-node { width: 150px; font-size: 34px; animation: none; cursor: default; filter: saturate(.6) brightness(.85); }
.mp-stop.ck.now .mp-tag { margin-top: 36px; background: #ffd23e; }
.mp-stop.ck.now .mp-hero.left { right: calc(100% + 2px); }
.mp-stop.ck.now .mp-hero.right { left: calc(100% + 2px); }
.mp-stop.ck.lock .mp-node { border: 4px dashed #6a5a3c; background: #3a3326; color: #a89878; box-shadow: 0 6px 0 #101a34; }
.mp-stop.ck.lock .mp-node::before { background: #3a3326; }
/* Пройденная проверка - звезда в углу таблички, без трёх звёзд за точность: тут нет оценки */
.ck-star { position: absolute; right: -14px; top: -16px; width: 36px; height: 36px; border-radius: 50%; background: #2a2357; border: 3px solid #ffd23e; color: #ffd23e; display: grid; place-items: center; font-size: 20px; line-height: 1; }
@keyframes ck-pulse { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .mp-stop.ck.now .mp-node { animation: none; } }
.mp-banner b.vio { color: #d8c6ff; }

/* Тема «повторяем» (0 из 2): голубая, со стрелкой по кругу; не красная. «Взяли с собой» (1 из 2) - значок в углу */
.mp-stop.rep .mp-node { position: relative; background: radial-gradient(circle at 35% 28%, #a6e2ff, #4fb4f0 62%); border-color: #e3f6ff; color: #0c3a5a; box-shadow: 0 7px 0 #1f7fb8, 0 12px 18px rgba(8, 14, 30, .45); }
.mp-rep-ic { position: absolute; right: -8px; bottom: -6px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #1f7fb8; display: grid; place-items: center; font: 900 20px var(--sans); box-shadow: 0 3px 0 rgba(8, 14, 30, .4); }
.mp-stop.rep .rep-cap { margin-top: 6px; padding: 2px 10px; border-radius: 99px; background: #1f7fb8; color: #fff; font: 800 12.5px var(--sans); }
.mp-stop.carry .mp-node { position: relative; }
.mp-stop.carry .mp-rep-ic { width: 26px; height: 26px; font-size: 16px; right: -6px; bottom: -4px; }

/* ---------- Предложение, задание, итог ---------- */
.app.lesson .ck-offer { align-items: center; text-align: center; }
.app.lesson .ck-offer .diag-badge { align-self: center; }
.app.lesson .ck-offer h2 { margin: 2px 0 0; font-size: 26px; color: #fff; }
.app.lesson .ck-offer p { margin: 0; color: #c9d2ec; font-size: 17px; line-height: 1.4; }
.ck-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ck-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; }
.ck-chip .g { position: relative; width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, #ffe58a, #ffb81c 62%); color: #5a3600; font: 900 17px/1.05 var(--sans); border: 4px solid #fff3c4; box-shadow: 0 5px 0 #c47f00; text-align: center; padding: 2px; }
.ck-chip span { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.2; color: #dfe6fb; }
.ck-chip.rep .g { background: radial-gradient(circle at 35% 28%, #a6e2ff, #4fb4f0 62%); border-color: #e3f6ff; color: #0c3a5a; box-shadow: 0 5px 0 #1f7fb8; }
.ck-chip .ok { position: absolute; right: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; background: #2fbf63; color: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: 0 3px 0 #1b8544; }
.ck-chip.rep .ok { background: #fff; color: #1f7fb8; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.ck-acts, .ck-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.ck-acts .btn.go-btn { min-width: 200px; }
.ck-foot .btn { flex: 1 1 160px; max-width: 280px; }
.ck-res { gap: 6px; }
.ck-res .diag-badge { align-self: center; }
.ck-grp { margin: 10px 0 4px; font-size: 15px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #9fe7b6; }
.ck-grp.rep { margin-top: 0; color: #a6e2ff; }
.ck-bag { margin-top: 10px; padding: 12px 14px 14px; border-radius: 18px; background: rgba(79, 180, 240, .12); border: 2px dashed #4fb4f0; }

/* ---------- Кабинет родителя ---------- */
.cb-card.ck-news { background: #eaf7ef; border-color: #bfe5cd; }
.ck-row { padding: 8px 0; border-top: 1px solid #e6eaf2; }
.ck-row:first-of-type { border-top: 0; }
.ck-row p { margin: 4px 0; }
.ck-row .when { color: #6b7590; font-size: 14px; }
.ck-row .lbl { font-weight: 800; }
.ck-row .lbl.ok { color: #1b8544; }
.ck-row .lbl.rep { color: #1f7fb8; }

/* Нижние кнопки проверки («Пока не знаю» и «Хватит», «Дальше» и «Потом» на передышке) стоят там же, где одна кнопка
   занятия: на телефоне и планшете стоя - под героем, на широком экране - под ответами */
.app.lesson > .ck-foot { order: 4; }
.app.lesson .ck-foot .btn.go-btn, .app.lesson .ck-offer .btn.go-btn {
  border: 0; border-radius: 16px; background: #ffb81c; color: #3b2500; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  box-shadow: 0 7px 0 #c47f00, 0 14px 24px rgba(8, 14, 30, .35); animation: none;
}
.app.lesson .ck-foot .btn.ghost, .app.lesson .ck-offer .btn.ghost { border-radius: 14px; background: #17233f; color: #fff; border: 2px solid rgba(255, 255, 255, .16); }
.app.lesson .ck-offer .ck-acts .btn { flex: 1 1 200px; max-width: 320px; }
@media (min-width: 900px) {
  .app.lesson > .ck-foot { grid-area: foot; align-self: start; }
}