/* Phone polish for the whole platform (loaded after the page styles).
   One bottom stack, from the screen edge up:
     1. the bottom navigation rail (64px, 10px from the edge)
     2. the page's own sticky bar, if any («Продолжить курс», the test editor bar, the lesson test CTA)
     3. round floating buttons on the right: notifications, then Lumino AI above it
   so nothing covers another layer or the content. */
@media (max-width: 760px) {
  :root {
    --mp-safe: env(safe-area-inset-bottom, 0px);
    --mp-rail: 84px;                                   /* rail height + its gap */
    --mp-bar: 0px;                                     /* the page sticky bar (set below when present) */
  }
  body:has(.lsp-sticky-continue), body:has(.clp-sticky), body:has(.tb-sticky), body:has(.tpv-sticky-cta:not(.is-off)) { --mp-bar: 70px; }

  /* 2 · page sticky bars sit right above the rail */
  .lsp-sticky-continue, .clp-sticky, .tpv-sticky-cta { bottom: calc(var(--mp-rail) + var(--mp-safe)) !important; z-index: 53 !important; }
  .tpv-sticky-cta { left: 10px !important; right: 10px !important; border-radius: 22px; padding: .45rem !important; background: rgba(255, 255, 255, .95) !important; }
  .tb-sticky {
    bottom: calc(var(--mp-rail) + var(--mp-safe)) !important;
    left: 10px !important; right: 10px !important; border-radius: 18px; border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 12px 30px -16px rgba(15, 23, 42, .35);
  }

  /* 3 · floating buttons: compact circles stacked on the right, above everything below */
  .notif-fab { right: 12px !important; bottom: calc(var(--mp-rail) + var(--mp-bar) + 6px + var(--mp-safe)) !important; }
  body .ai-assistant {
    left: auto !important; right: 12px !important;
    bottom: calc(var(--mp-rail) + var(--mp-bar) + 62px + var(--mp-safe)) !important;
  }
  body .ai-assistant-btn {
    width: 46px; height: 46px; min-height: 46px !important; padding: 0 !important; justify-content: center;
    box-shadow: 0 10px 24px rgba(26, 61, 46, .3);
  }
  body .ai-assistant-btn .ai-assistant-btn__t { display: none; }
  body .ai-assistant-btn > span { width: 14px; height: 14px; box-shadow: 0 0 0 4px rgba(176, 141, 87, .28); }

  /* the content is never hidden behind the stack */
  main { padding-bottom: calc(var(--mp-rail) + var(--mp-bar) + 1.5rem + var(--mp-safe)) !important; }
  body.clp-page:has(.clp-sticky), body:has(.lsp-sticky-continue) { padding-bottom: 0 !important; }

  /* header: language switch and avatar are comfortable to tap */
  .nav .lang-switch a, .nav .lang a, .lang-switch a, .lum-lang a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: 10px;
  }

  /* wide tables scroll inside their card instead of pushing the page sideways */
  .table-scroll, .ms-top-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  code, pre { overflow-wrap: anywhere; word-break: break-word; }
  pre { white-space: pre-wrap; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .notif-fab, .ai-assistant { transition: none; }
}

.ai-assistant-btn__t { font-weight: inherit; }
.lum-img-fallback { display: grid; place-items: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, #6366f1, #0ea5e9); border-radius: 50%; }

.lum-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 12px; }
.lum-table-scroll > table { min-width: 100%; }
/* decorative landing shapes never widen the page */
.lum-land { overflow-x: clip; }
@media (max-width: 760px) {
  .ms-top { font-size: .84rem; }
  /* comfortable touch targets */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; }
  .st-mod-move, .st-mod-fill, .st-lesson__more { min-width: 36px !important; min-height: 36px !important; }
}
@media (max-width: 760px) {
  /* the marketing landing is full-bleed: no side padding to escape from */
  body.lum-land-page main { padding-left: 0 !important; padding-right: 0 !important; }
  body.lum-land-page .lum-land { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 760px) {
  footer a { display: inline-block; padding: 6px 2px; }
  .lum-sidebar-brand { min-height: 36px; display: inline-flex; align-items: center; }
}