/* --------------------------------------------------------------------------
   БАЗА — mobile-first polish layer
   Цель: на телефоне интерфейс должен ощущаться нативным экраном, а не
   уменьшенной desktop-страницей. Этот файл грузится последним и содержит
   только адаптивные переопределения и общие мобильные safety-guards.
   -------------------------------------------------------------------------- */

html,body{max-width:100%;overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}
body{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
main,.shell,[data-baza-page]{min-width:0}
img,video,canvas{max-width:100%;height:auto}
input,select,textarea{min-width:0;max-width:100%}

@media(max-width:760px){
  :root{--baza-mobile-gutter:16px}

  body{
    background:
      radial-gradient(circle at 92% 8%,rgba(111,92,255,.055),transparent 19rem),
      radial-gradient(circle at 4% 78%,rgba(77,111,255,.05),transparent 18rem),
      var(--bg)
  }

  .shell{
    width:100%;max-width:100%;
    padding-left:max(var(--baza-mobile-gutter),env(safe-area-inset-left,0px));
    padding-right:max(var(--baza-mobile-gutter),env(safe-area-inset-right,0px))
  }

  /* ----------------------------------------------------------------------
     Мобильная навигация: компактная верхняя строка + горизонтальная лента.
     ---------------------------------------------------------------------- */
  .nav{
    height:auto;min-height:0;align-items:stretch;
    padding-top:env(safe-area-inset-top,0px)
  }
  .nav-inner{padding-top:8px;padding-bottom:8px;gap:8px 10px}
  .brand{font-size:23px;letter-spacing:-1px;gap:9px;min-width:0}
  .mark{width:34px;height:34px;flex:0 0 34px}
  .mark i:nth-child(1),.mark i:nth-child(2){width:23px;height:23px;border-radius:8px}
  .navbtn{min-height:40px;padding:9px 12px;border-radius:13px;font-size:11px;box-shadow:0 7px 18px rgba(111,92,255,.16)}
  .links.global-links{
    order:3;flex:0 0 100%;width:100%;margin:0;gap:2px;padding:3px;
    border-radius:14px;scroll-padding-inline:4px;overscroll-behavior-inline:contain
  }
  .links.global-links a{display:grid;place-items:center;min-height:36px;padding:7px 9px;font-size:11px;border-radius:10px}

  /* ----------------------------------------------------------------------
     Главная и общие карточки.
     ---------------------------------------------------------------------- */
  .hero{min-height:0;padding:30px 0 20px;gap:24px}
  h1{font-size:clamp(38px,11.2vw,44px);line-height:1.01;letter-spacing:-2.3px;margin-bottom:18px}
  .lead{font-size:17px;line-height:1.48;margin:0}
  .cta{margin:23px 0 18px;gap:10px}
  .hero-card{padding:18px;border-radius:22px}
  .profile-head{gap:10px}
  .featurebar{margin:12px 0 24px;border-radius:18px}
  .feature{padding:17px 18px;gap:13px}
  .feature .icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px}
  .home-dashboard{padding:6px 0 calc(48px + env(safe-area-inset-bottom,0px))}
  .home-dashboard-head{margin-bottom:16px}
  .home-dashboard-head h2{font-size:30px;line-height:1.08;letter-spacing:-.8px}
  .home-stat,.home-action{border-radius:18px}
  .home-stat{padding:15px 16px}
  .home-action{padding:17px;min-height:138px}

  /* ----------------------------------------------------------------------
     Диагностика и обычная задача: меньше вложенных рамок, больше пространства
     для самой математики.
     ---------------------------------------------------------------------- */
  .diagnostic-section{padding:28px 0 42px;scroll-margin-top:120px}
  .diagnostic-card{padding:18px;border-radius:22px}
  #diagIntro{gap:22px}
  .diag-copy h2,.result-head h2{font-size:30px;line-height:1.08;letter-spacing:-1.1px}
  .diag-copy p,.result-head p{font-size:15px;line-height:1.55}
  .diag-meta{gap:7px;margin:18px 0}
  .diag-meta span{padding:8px 10px;font-size:11px}
  .diag-preview{padding:16px;border-radius:19px}
  .diag-question{font-size:22px;line-height:1.32}
  .diag-math{font-size:30px;margin:16px 0 20px}
  .diag-choice{min-height:50px;padding:14px 15px;border-radius:14px}
  .diag-actions{gap:8px}
  .diag-actions .smallbtn,.diag-actions .primary{width:100%}
  .result-block{padding:17px;border-radius:19px}
  .score-orb{width:112px;height:112px;flex-basis:112px}

  .demo-layout{gap:14px;padding:12px 0 30px}
  .panel{padding:18px;border-radius:20px}
  .lesson-top{gap:10px;align-items:flex-start}
  .question{font-size:21px;line-height:1.38;margin:19px 0 13px}
  .math{font-size:30px;margin:15px 0}
  .choice{min-height:48px;padding:13px 14px}
  .inputrow{min-width:0}
  .inputrow input{min-width:0;width:100%}
  .feedback{padding:15px;min-height:88px;border-radius:16px}
  .controls{gap:8px}
  .smallbtn,.check{min-height:44px}
  .toast{bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 28px);text-align:center}

  /* ----------------------------------------------------------------------
     Практика: хаб компактный, сессия — один сфокусированный столбец.
     ---------------------------------------------------------------------- */
  .practice-catalog{padding:24px 0 10px;scroll-margin-top:120px}
  .practice-catalog.session-mode{padding-top:14px}
  .practice-hub-card{padding:16px;border-radius:20px;box-shadow:0 10px 28px rgba(34,42,86,.055)}
  .practice-hub-head{gap:8px;margin-bottom:16px}
  .practice-hub-head h2{font-size:27px;letter-spacing:-.8px;margin-bottom:7px}
  .practice-hub-head p{font-size:13px;line-height:1.5}
  .practice-hub-bank b{font-size:23px}
  .practice-resume-card{padding:15px 16px;border-radius:17px;gap:12px}
  .practice-resume-copy strong{font-size:17px;white-space:normal}
  .practice-resume-button{width:100%;min-height:46px}
  .practice-actions-grid{gap:9px}
  .practice-action-card{min-height:72px;padding:13px 14px;border-radius:17px;grid-template-columns:40px minmax(0,1fr) auto;gap:10px}
  .practice-action-icon{width:40px;height:40px;border-radius:12px;font-size:18px}
  .practice-action-copy strong{font-size:15px}
  .practice-chooser{padding:14px;border-radius:18px}
  .practice-chooser-close{width:44px;height:44px;border-radius:12px}
  .practice-skill-choice,.practice-recent-list button{min-height:48px}
  .practice-session-bar{gap:8px;padding:10px 11px;border-radius:15px}
  .practice-session-back{min-height:42px;padding:9px 10px}
  .practice-session-copy strong{font-size:13px}
  .practice-session-mastery b{font-size:16px}
  .demo-layout.practice-focus-mode{padding-top:10px}
  .demo-layout.practice-focus-mode>.panel:first-child{padding:16px;border-radius:20px}

  /* ----------------------------------------------------------------------
     Карты, теория, навыки и профиль.
     ---------------------------------------------------------------------- */
  .skill-map-section{padding:30px 0 50px;scroll-margin-top:120px}
  .skill-map-head{gap:18px;margin-bottom:20px}
  .skill-map-head h2{font-size:34px;letter-spacing:-1.1px;margin:7px 0 10px}
  .skill-map-head p{font-size:14px;line-height:1.55}
  .skill-map-counter{padding:14px 17px;border-radius:18px;min-width:112px}
  .skill-map-counter b{font-size:31px}
  .skill-map-tools{margin-bottom:16px;padding:6px 0}
  .skill-search{height:46px;border-radius:13px}
  .skill-section-card{padding:16px;border-radius:19px}
  .skill-path-intro{padding:15px;border-radius:18px}

  .theory-map-section{padding:26px 0 50px}
  .theory-map-head{gap:16px;margin-bottom:16px}
  .theory-map-head h2{font-size:34px;letter-spacing:-1px}
  .theory-map-stats{gap:6px}
  .theory-map-stats>div{border-radius:14px;padding:10px 6px}
  .theory-tab-summary{padding:13px 14px;border-radius:17px}
  .theory-card{padding:15px;border-radius:18px;min-height:0}

  .skills-profile-page{padding:30px 0 50px;scroll-margin-top:120px}
  .skills-profile-head{gap:14px;margin-bottom:18px}
  .skills-profile-head h2{font-size:34px;letter-spacing:-1.1px}
  .skills-profile-head p{font-size:14px;line-height:1.55}
  .skills-model-note,.skills-subtabs-wrap,.skills-toolbar{border-radius:18px}
  .skills-model-note>div{padding:15px 16px}
  .skills-summary-card{padding:15px 16px;border-radius:17px}
  .skills-section-block{padding:14px;border-radius:20px}
  .skills-card{padding:14px;border-radius:16px}

  body .profile-section{padding:30px 0 50px;scroll-margin-top:120px}
  body .profile-heading{gap:14px;margin-bottom:16px}
  body .profile-heading h2{font-size:32px;letter-spacing:-1px}
  body .profile-heading p{font-size:14px;line-height:1.55}
  body .profile-card{padding:17px;border-radius:20px}
  body .profile-stats{gap:8px}
  body .profile-stat{padding:14px;border-radius:16px}
  body .radar-wrap{min-height:290px}

  /* Coarse pointer = палец. Ключевые элементы не должны быть микрокнопками. */
  @media(pointer:coarse){
    button{min-height:44px}
    input,select{min-height:44px}
  }
}

/* --------------------------------------------------------------------------
   Полноэкранные mobile-dialogs. На телефоне это отдельные app screens,
   а не desktop-модалки с серой рамкой вокруг.
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  body .onboarding-overlay{
    padding:0;place-items:stretch;background:#fff;backdrop-filter:none
  }
  body .onboarding-shell{
    width:100%;height:100vh;height:100dvh;max-height:none;
    border:0;border-radius:0;box-shadow:none;overscroll-behavior:contain
  }
  body .onboarding-top{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
    padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))
  }
  body .onboarding-top-back{order:1}
  body .onboarding-brand{order:2;font-size:18px;letter-spacing:-.4px}
  body .onboarding-step-label{order:3;margin-left:auto;font-size:11px}
  body .onboarding-close{order:4}
  body .onboarding-progress{order:5;flex:0 0 100%;height:5px}
  body .onboarding-top-back,body .onboarding-close{
    width:44px;height:44px;flex-basis:44px;border-radius:13px
  }
  body .onboarding-body{
    width:100%;padding:22px max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))
  }
  body .onboarding-fade{width:100%;max-width:620px;margin:0 auto}
  body .onboarding-welcome-mark{width:64px;height:64px;border-radius:20px;font-size:28px;margin-bottom:18px}
  body .onboarding-kicker{font-size:12px;margin-bottom:10px}
  body .onboarding-body h2{font-size:30px;line-height:1.08;letter-spacing:-1.2px;margin-bottom:12px}
  body .onboarding-sub{font-size:15px;line-height:1.5;margin-bottom:20px}
  body .onboarding-options{gap:9px}
  body .onboarding-option{padding:14px 15px;border-radius:16px;gap:12px}
  body .onboarding-option.selected{padding:13px 14px}
  body .onboarding-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}
  body .onboarding-scale{gap:4px}
  body .onboarding-scale .onboarding-option{padding:11px 2px}
  body .onboarding-scale .onboarding-option.selected{padding:10px 1px}
  body .onboarding-scale strong{font-size:20px}
  body .onboarding-scale small{font-size:10.5px;line-height:1.2}
  body .onboarding-plan{padding:15px;border-radius:17px;margin-top:14px}
  body .onboarding-plan p{font-size:13px;line-height:1.48}
  body .onboarding-actions{display:grid;grid-template-columns:1fr;gap:6px;margin-top:20px}
  body .onboarding-actions>span:empty{display:none}
  body .onboarding-next{order:1;width:100%;min-height:52px;border-radius:15px;padding:14px 18px}
  body .onboarding-back{order:2;width:100%;min-height:44px;padding:10px 8px}
  body .onboarding-skip{min-height:44px;margin:8px auto 0;padding:9px 12px;font-size:12px}
  body .onboarding-summary{gap:8px;margin:18px 0}
  body .onboarding-summary-card{padding:14px;border-radius:16px}

  body .daily-task-overlay{
    padding:0;place-items:stretch;background:#fff;backdrop-filter:none
  }
  body .daily-task-shell{
    width:100%;height:100vh;height:100dvh;max-height:none;
    border:0;border-radius:0;box-shadow:none;overscroll-behavior:contain
  }
  body .daily-task-top{
    padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 11px max(16px,env(safe-area-inset-left,0px));gap:10px
  }
  body .daily-task-close{width:44px;height:44px;flex-basis:44px;border-radius:13px}
  body .daily-task-body{
    padding:22px max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))
  }
  body .daily-task-body h2{font-size:24px;margin-bottom:19px}
  body .daily-task-question{font-size:18px}
  body .daily-task-choice{min-height:50px;border-radius:14px}
  body .daily-task-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body .daily-task-hint,body .daily-task-check{width:100%;min-height:48px;padding:12px 14px}
  body .daily-task-footer{padding-bottom:env(safe-area-inset-bottom,0px)}

  /* Детальные окна карты и уровней тоже становятся полноценными экранами. */
  .skill-detail-overlay{padding:0;align-items:stretch;justify-content:stretch;background:#fbfcff}
  .skill-detail-shell{
    width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;
    padding:calc(14px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))
  }
  .skill-detail-close{width:44px;height:44px;top:env(safe-area-inset-top,0px)}

  body .level-modal{padding:0;align-items:stretch;justify-content:stretch;background:#fff;backdrop-filter:none}
  body .level-modal-card{
    width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;box-shadow:none;
    padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))
  }
  body .level-modal-head{top:calc(-16px - env(safe-area-inset-top,0px));padding-top:16px}
}

@media(max-width:520px){
  :root{--baza-mobile-gutter:15px}
  .cta{display:grid;grid-template-columns:1fr}
  .cta .primary,.cta .ghost{width:100%;min-height:50px}
  .micro{gap:9px 14px}
  .profile-head{flex-direction:column}
  .streak{align-self:flex-start}
  .profile-stats{grid-template-columns:1fr}
  body .profile-stats{grid-template-columns:1fr}
  .practice-session-bar{grid-template-columns:1fr auto}
  .practice-session-back{grid-column:1/-1;width:100%}
  .practice-session-mastery{grid-column:2;grid-row:2}
  .inputrow{flex-direction:column}
  .inputrow .check{width:100%}
}

@media(max-width:380px){
  :root{--baza-mobile-gutter:14px}
  h1{font-size:36px;letter-spacing:-2px}
  .home-dashboard-head h2,.diag-copy h2,.result-head h2{font-size:28px}
  body .onboarding-body{padding-left:16px;padding-right:16px}
  body .onboarding-body h2{font-size:28px}
  body .onboarding-plan{padding:14px}
  body .onboarding-scale small{font-size:10px}
  .theory-map-stats b{font-size:18px}
  .theory-map-stats span{font-size:9px}
}

@media(max-height:560px) and (orientation:landscape){
  body .onboarding-body,body .daily-task-body{padding-top:16px}
  body .onboarding-welcome-mark{width:52px;height:52px;margin-bottom:12px}
  body .onboarding-body h2{font-size:26px}
  body .onboarding-sub{margin-bottom:14px}
}

@media(prefers-reduced-motion:reduce){
  .route-enter,.onboarding-fade{animation:none!important}
}


/* mobile-final-visual-polish */
@media(max-width:760px){
  /* Старый глобальный footer находится перед динамическими route-экранами в DOM.
     На телефоне он визуально превращался в случайный пролог перед Теорией/Навыками. */
  .footer{display:none!important}
  /* Лента вкладок должна выглядеть как единый компактный mobile-control. */
  .links.global-links{scrollbar-width:none;-ms-overflow-style:none}
  .links.global-links::-webkit-scrollbar{display:none}
}