/* Public task page (SEO) — small additions on top of the app's own trainer CSS
   (app_core, trainer_base, trainer, trainer_page, ai_hints, draft_board).
   Here: breadcrumbs, the H1 in the screen header, login CTA card, verdict CTA,
   below-screen navigation and the footer. Uses the app's CSS tokens. */

/* Room for the app's fixed/floating answer bar so it never covers the footer */
body[data-active-page="trainer"] #app { padding-bottom: 150px; }

/* Top bar: brand + CTA into the app; content centred on the 960px axis */
#app .seo-topbar {
    position: sticky; top: 0; z-index: 60;
    padding: 10px 2px;
    background: rgba(5, 8, 15, .88);
    background: color-mix(in srgb, var(--bg, #05080f) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--card-border);
}
#app .seo-topbar__inner {
    max-width: min(960px, 100%); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#app .seo-topbar__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 17px; font-weight: 900; text-decoration: none; }
#app .seo-topbar__brand img { border-radius: 8px; }
#app .seo-topbar__nav { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; }
#app .seo-topbar__nav a { color: var(--text-hint); text-decoration: none; }
#app .seo-topbar__nav a:hover { color: var(--text); }
#app .seo-topbar__cta {
    display: inline-flex; align-items: center; justify-content: center;
    background: #2777ff; color: #fff !important; border-radius: 999px;
    padding: 9px 16px; font-size: 13.5px; font-weight: 900; white-space: nowrap;
    box-shadow: 0 8px 18px rgba(39, 119, 255, .28);
}
#app .seo-topbar__cta:hover { filter: brightness(1.06); }
@media (max-width: 600px) {
    #app .seo-topbar__nav a:not(.seo-topbar__cta) { display: none; }
    #app .seo-topbar__cta { font-size: 12.5px; padding: 8px 13px; }
}

/* Desktop: no «Разобрать решение с Заппи» under the condition — the aside's
   «Подсказка от Заппи» tab already carries the AI gate */
@media (min-width: 1024px) {
    body[data-active-page="trainer"] #btn-giveup { display: none !important; }
    /* No «Пропустить» on this page (the app right-aligns the pair against it) —
       centre [Ввод | Ответить] inside the floating pill instead */
    body[data-active-page="trainer"] #answer-input-container .answer-input-row { justify-content: center; }
    /* No strokes on the floating pill: shadow-only container, borderless input */
    body[data-active-page="trainer"] #answer-input-container { border: none; }
    body[data-active-page="trainer"] #answer-input-container .answer-input,
    body[data-active-page="trainer"] #answer-input-container .answer-input:focus { border-color: transparent; }
    /* Collapsed right pane → the whole reading column centres on the 960px axis
       (the app centres .screen-header itself; mirror it for the breadcrumbs) */
    body[data-active-page="trainer"] #app:has(.solve-body.aside-collapsed) .seo-crumbs {
        max-width: min(960px, 100%);
        margin-left: auto; margin-right: auto;
    }
}

/* Visible freshness line under the H1 (Яндекс date-in-snippet signal) */
#app .seo-updated { margin: 2px 0 0; font-size: 12px; color: var(--text-hint); }

/* Solution section: always visible, blurred until opened */
#app .seo-solution-sec { margin-top: 16px; }
#app .seo-answer-h2 { margin: 16px 0 6px; font-size: 16px; font-weight: 900; color: var(--text); }
#app .seo-solution-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#app .seo-solution-head h2 { margin: 0; font-size: 18px; font-weight: 900; color: var(--text); }
#app .seo-reveal-btn {
    background: rgba(39, 119, 255, .14); color: var(--accent-soft, #4d9eff);
    border: 1px solid var(--card-border); border-radius: 999px;
    padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
#app #solution-box { transition: filter .25s; }
#app #solution-box.is-blurred { filter: blur(7px); pointer-events: none; user-select: none; }

/* Breadcrumbs above the screen header */
#app .seo-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--text-hint);
    padding: 12px 2px 2px;
}
#app .seo-crumbs a { color: var(--text-hint); text-decoration: none; }
#app .seo-crumbs a:hover { color: var(--text); }
#app .seo-crumbs > span:not([aria-current]) { opacity: .5; }
#app .seo-crumbs span[aria-current] {
    color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}

/* The screen header carries an H1 (SEO) styled like the app's h2.
   Visually clamped to 2 lines: the full text stays in the DOM (the condition
   repeats right below by design — exact-match H1 for pasted-condition queries),
   the clamp just removes the visual doubling. */
body[data-active-page="trainer"] .screen-header h1 {
    font-size: 18px; font-weight: 800; line-height: 1.25; margin: 0;
    color: var(--text); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body[data-active-page="trainer"] .screen-header a.btn-back {
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}

/* AI-tutor gate card — shown only when the «Подсказка» tab is opened
   (on load nothing is open: just the tabs row, like the app) */
#app .seo-gate-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(180deg, rgba(39, 119, 255, .16), rgba(30, 111, 255, .04) 58%), var(--card-bg);
    border: 1px solid rgba(77, 158, 255, .38); border-radius: 18px;
    padding: 28px 24px 20px; min-height: 440px;
}
#app .seo-gate-card__glow {
    position: absolute; top: -90px; left: 50%; transform: translateX(-50%);
    width: 360px; height: 240px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(47, 125, 255, .38), transparent 72%);
}
#app .seo-gate-card__mascot { position: relative; width: 128px; height: 128px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 8px 22px rgba(30, 111, 255, .35)); }
#app .seo-gate-card h3 { position: relative; margin: 0 0 14px; font-size: 21px; font-weight: 900; color: var(--text); line-height: 1.2; }
#app .seo-gate-card__perks { position: relative; list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; text-align: left; }
#app .seo-gate-card__perks li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.4; color: var(--text); font-weight: 600; }
#app .seo-gate-card__perks li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #4ade80; font-weight: 900; }
#app .seo-gate-card__btns { position: relative; display: flex; gap: 10px; width: 100%; max-width: 440px; }
#app .seo-gate-card__btns .trainer-exit-primary {
    flex: 1 1 0; min-width: 0; width: auto; max-width: none;
    margin: 0 !important; font-size: 13px; padding: 0 12px; white-space: nowrap;
}

/* AI-gate sheet content (lives at body level, outside #app) — mirrors the gate card */
.trainer-exit-panel .seo-sheet-perks {
    list-style: none; margin: 0 auto 16px; padding: 0;
    display: grid; gap: 9px; text-align: left; max-width: 330px;
}
.trainer-exit-panel .seo-sheet-perks li {
    position: relative; padding-left: 26px;
    font-size: 13.5px; line-height: 1.4; color: var(--text, #f5f7ff); font-weight: 600;
}
.trainer-exit-panel .seo-sheet-perks li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #4ade80; font-weight: 900; }
.trainer-exit-panel .seo-sheet-btns { display: flex; gap: 8px; }
.trainer-exit-panel .seo-sheet-btns .trainer-exit-primary {
    flex: 1 1 auto; min-width: 0; width: auto;   /* size by label, not 50/50 */
    margin: 0 !important; font-size: 12px; padding: 0 10px; gap: 5px; white-space: nowrap;
}
.trainer-exit-panel .seo-sheet-btns .trainer-exit-primary img { width: 16px; height: 16px; flex: 0 0 auto; }

/* Auth button variants (sheets + gate card + band) */
.trainer-exit-primary { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.trainer-exit-primary + .trainer-exit-primary { margin-top: 10px; }
.seo-auth-primary--tg { background: #29a9eb !important; box-shadow: 0 12px 24px rgba(41, 169, 235, .25) !important; }
.seo-auth-primary--max { background: #2777ff !important; }

/* The inline result row's left half is a link now («Перейти в приложение») */
#result-app-btn { text-decoration: none; }

/* Borderless bottom action bars: the verdict modal's pinned pair and the inline
   result row — shadow/background only, no strokes (matches the answer pill) */
body[data-active-page="trainer"] .result-modal-actions,
body[data-active-page="trainer"] .result-nav-row { border: none !important; }
body[data-active-page="trainer"] .result-modal-solution-btn,
body[data-active-page="trainer"] .result-solution-btn { border: none !important; }
/* Long labels ([Показать решение | Готовиться вместе с Заппи]) wrap evenly
   instead of overflowing the fixed 54px halves */
#result-modal .result-modal-actions .result-modal-solution-btn,
#result-modal .result-modal-actions .result-modal-next-btn {
    height: auto; min-height: 54px; white-space: normal;
    line-height: 1.15; padding: 8px 10px; font-size: 14px;
}

/* ── Verdict modal: clean, app-like hierarchy — no boxes-in-boxes ─────────── */
#result-modal .result-gif { filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .5)); }
#result-modal.is-correct .result-modal-text { color: #4ade80; }
#result-modal.is-wrong .result-modal-text { color: #ff8a75; }
#result-modal .result-modal-answer:empty { display: none; }

/* Rotating AI-tutor CTA — borderless block with a generous gap and one strong
   button. #result-modal prefix outranks the app's body-scoped button rules. */
#result-modal .seo-rm-cta { width: min(460px, 92vw); margin: 36px auto 0; text-align: center; flex: 0 0 auto; }
#result-modal .seo-rm-cta__title { font-size: 18px; font-weight: 900; color: var(--text); }
#result-modal .seo-rm-cta__text { margin: 8px auto 18px; max-width: 44ch; color: var(--text-hint); font-size: 14px; font-weight: 600; line-height: 1.45; }
#result-modal .seo-rm-cta__btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 54px; border-radius: 999px;
    background: linear-gradient(135deg, #2f7dff, #5a97ff);
    color: #fff; font-size: 15px; font-weight: 900; text-decoration: none;
    box-shadow: 0 14px 30px rgba(39, 119, 255, .35);
}
#result-modal .seo-rm-cta__btn:hover { filter: brightness(1.06); }

/* Solution extras (inside the app's .solution-box) */
#app .seo-solution-img { display: block; margin: 12px 0 0; border-radius: 10px; background: #fff; padding: 8px; max-width: 100%; cursor: zoom-in; }
#app .task-img-zoom .pinch-img { cursor: zoom-in; }
#app .seo-solution-answer { margin: 14px 0 0; font-size: 16px; }
#app .seo-solution-source { margin: 10px 0 0; font-size: 12.5px; color: var(--text-hint); font-style: italic; }

/* Below-screen SEO navigation */
#app .seo-below { max-width: min(960px, 100%); margin: 30px auto 0; padding: 0 2px; }
#app .seo-prevnext { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; }
#app .seo-prevnext a { color: var(--text-hint); text-decoration: none; }
#app .seo-prevnext a:hover { color: var(--text); }
#app .seo-prevnext .seo-prevnext__hub { color: var(--accent-soft, #4d9eff); }
#app .seo-band {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 20px 22px; margin-top: 22px;
}
#app .seo-band h2 { margin: 0 0 6px; font-size: 19px; font-weight: 900; color: var(--text); }
#app .seo-band p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-hint); max-width: 56ch; }
#app .seo-band__btn { flex: 0 0 auto; width: auto; min-height: 48px; padding: 0 22px; white-space: nowrap; border-radius: 14px; background: #2777ff; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 12px 24px rgba(39, 119, 255, .25); }

/* Footer (compact copy of the landing's site-footer, app tokens) */
#app .seo-footer2 {
    max-width: min(960px, 100%); margin: 44px auto 0;
    padding: 26px 2px 8px;
    border-top: 1px solid var(--card-border); color: var(--text-hint);
}
#app .seo-footer2__grid { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(120px, 1fr)); gap: 22px; margin-bottom: 20px; }
#app .seo-footer2__brand b { font-size: 20px; font-weight: 900; color: var(--text); }
#app .seo-footer2__brand p { margin: 6px 0 0; font-size: 13px; max-width: 24ch; }
#app .seo-footer2 nav { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
#app .seo-footer2 nav b { color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
#app .seo-footer2 nav a { color: var(--text-hint); text-decoration: none; }
#app .seo-footer2 nav a:hover { color: var(--text); }
#app .seo-footer2__note { font-size: 12px; margin: 0 0 14px; max-width: 80ch; }
#app .seo-footer2__legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--card-border); padding-top: 14px; font-size: 12px; }

@media (max-width: 800px) {
    #app .seo-footer2__grid { grid-template-columns: repeat(2, 1fr); }
    #app .seo-footer2__brand { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
    /* the app's mobile answer bar is taller than the desktop pill */
    body[data-active-page="trainer"] #app { padding-bottom: 170px; }
    /* full-bleed sticky topbar: escape #app's side padding (any breakpoint) */
    #app .seo-topbar {
        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        padding-left: calc(50vw - 50% + 2px); padding-right: calc(50vw - 50% + 2px);
    }
    /* «Ответить» stands alone now (no «Пропустить» pair) — round all corners */
    body[data-active-page="trainer"] #answer-input-container .btn-submit { border-radius: var(--radius-sm) !important; }
    /* the right-edge fabs start below our sticky topbar (the app has no topbar);
       «Справочный материал» slightly overlaps «Черновик», like the app */
    body[data-active-page="trainer"] .ref-fab { top: calc(var(--app-safe-top, 0px) + 64px); z-index: 62; }
    body[data-active-page="trainer"] .draft-fab { top: calc(var(--app-safe-top, 0px) + 236px); z-index: 61; }
}