/* ==================================================================
   Планшет в вертикальном положении.

   До этого планшет стоя получал телефонную вёрстку, просто шире:
   карточки во всю ширину, четыре раздела снизу и «Ещё», окна-шторки.
   Здесь — своя раскладка для планшета: iPad mini (744), iPad и iPad Air
   11" (820), iPad Pro 11" (834) и похожие Android-планшеты.

   Телефон, планшет лёжа и компьютер этот файл не трогает: каждое правило
   лежит внутри запроса с orientation:portrait и шириной от 600px.
   Файл подключается последним, поэтому перекрывает телефонные правила.

   Ширины:
   600–860  — здесь раньше была телефонная вёрстка, меняем почти всё;
   до 900   — экран входа (телефонный вход работал до 900px);
   до 1100  — большие планшеты стоя (iPad Pro 13" — 1024): у них уже
              компьютерная шапка, поправлены только сводка и оплаты.
   ================================================================== */

/* ---------- Общие отступы страницы ---------- */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .dash-main,.dash-main.wide{padding-left:24px;padding-right:24px}
}

/* ==================================================================
   Разделы внизу: все в одну строку, без «Ещё».
   Если подписи не помещаются (app2.js ставит .tb-icons), остаются
   значки, а у выбранного раздела название видно рядом со значком.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .tabbar.tb-all .tb-track{justify-content:center;gap:4px;padding:6px 12px}
  .tabbar.tb-all .tb-track .tb-tab{flex:1 1 0;max-width:118px}
  .tabbar.tb-all .tb-track .tb-tab>span:last-child{font-size:10.5px}

  .tabbar.tb-icons .tb-track{justify-content:space-between;gap:2px;padding:7px 14px}
  .tabbar.tb-icons .tb-track .tb-tab{flex:0 0 auto;width:48px;max-width:none;height:46px;
    flex-direction:row;gap:7px;padding:0 6px}
  .tabbar.tb-icons .tb-track .tb-tab>span:last-child{display:none}
  .tabbar.tb-icons .tb-track .tb-tab.on{width:auto;padding:0 14px}
  .tabbar.tb-icons .tb-track .tb-tab.on>span:last-child{display:inline;font-size:12.5px;color:#23382c}
}

/* ==================================================================
   Уведомления и меню профиля — как на компьютере: выпадающим окном
   под шапкой, а не шторкой снизу на весь экран.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .bell-panel{position:fixed;top:66px;right:16px;left:auto;bottom:auto;width:400px;
    max-width:calc(100vw - 32px);max-height:min(560px,calc(100dvh - 170px));min-height:0;
    border-radius:16px;border:.5px solid var(--line);padding-bottom:0;animation:none;
    box-shadow:0 24px 60px -24px rgba(40,38,32,.45);transform-origin:top right;z-index:80}
  .bell-panel .bell-head{border-radius:16px 16px 0 0;font-size:16px;padding:15px 16px}
  .bell-back{display:none!important}

  /* меню профиля: положение под аватаркой ставит app.js */
  .pfm{width:min(360px,calc(100vw - 24px));max-width:none;border:1px solid #e3ded2;
    border-radius:18px;padding:10px;transform:translateY(10px) scale(.98);
    transition:opacity .2s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
  .pfm-bg.is-open .pfm{transform:none}
  .pfm-grip{display:none}
  .pfm-item{padding:10px}
  .pfm-tx b{font-size:14.5px}
}

/* ==================================================================
   Окна «Прогресса» (запланировать проверку, внести результат,
   изменить план) — по центру экрана, а не снизу.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .pop.pgr-dialog{align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
  .pop.pgr-dialog .pop-box{width:min(660px,100%);max-width:660px;max-height:calc(100dvh - 48px);
    border-radius:22px;padding:0}
}

/* ==================================================================
   Сводка: «Ученики», «Доход» и «Запишите важное» — в одну строку.
   На маленьком планшете (iPad mini) «Запишите важное» — отдельной
   строкой под двумя карточками.
   ================================================================== */
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  #dashContent .stats.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px}
  #dashContent .stats.stats-3>.ov-student-notes{grid-column:auto}
}
@media (min-width:600px) and (max-width:779px) and (orientation:portrait){
  #dashContent .stats.stats-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dashContent .stats.stats-3>.ov-student-notes{grid-column:1/-1}
}

/* ==================================================================
   Расписание: занятия дня — плитками по три (на узком планшете по две)
   вместо длинных полос во всю ширину. Время крупно, статус справа,
   ниже имя и предмет.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .sch-daylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(222px,1fr));
    gap:12px;align-content:start}
  .sch-daylist>.sch-empty{grid-column:1/-1}
  .sch-mcard{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"time badge" "body body";align-items:start;gap:10px 8px;
    min-height:104px;padding:14px 15px 15px;box-sizing:border-box}
  .sch-mcard .mt{grid-area:time;width:auto;font-size:21px;line-height:1.1}
  .sch-mcard .sch-badge{grid-area:badge;align-self:start}
  .sch-mcard .mb{grid-area:body;align-self:end}
  .sch-mcard .mn{overflow-wrap:anywhere}
}

/* ==================================================================
   Материалы: окно загрузки чуть уже, поиск и папки — той же ширины,
   по центру.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  #dashContent:has(> #maAddPanel)>#maAddPanel,
  #dashContent:has(> #maAddPanel)>.cd-searchbar,
  #dashContent:has(> #maAddPanel)>.ma-foldbar,
  #dashContent:has(> #maAddPanel)>#maSections{width:auto;max-width:min(680px,88%);
    margin-left:auto;margin-right:auto;box-sizing:border-box}
  #dashContent:has(> #maAddPanel)>.cd-searchbar .cd-search{max-width:none}
}

/* ==================================================================
   Домашние задания.
   Репетитор: поиск и «Создать задание» — одной строкой, под ними
   вкладки «Активные / Проверка / Архив» — длиннее и по центру.
   Ученик: те же вкладки — длиннее и по центру.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  #dashContent:has(> .tk-tabrow > .tk-create){display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
  #dashContent:has(> .tk-tabrow > .tk-create)>*{flex:0 0 100%;min-width:0}
  #dashContent:has(> .tk-tabrow > .tk-create)>.cd-searchbar{order:1;flex:1 1 0;margin-bottom:6px}
  #dashContent:has(> .tk-tabrow > .tk-create)>.tk-tabrow{display:contents}
  #dashContent:has(> .tk-tabrow > .tk-create)>.tk-tabrow>.tk-create{order:2;flex:0 0 auto;margin:12px 0 6px}
  /* поля слева и справа добирают вкладки до всей ширины строки — так они
     встают отдельной строкой и ровно по центру */
  #dashContent:has(> .tk-tabrow > .tk-create)>.tk-tabrow>.tk-tabs{order:3;flex:0 0 auto;
    width:min(560px,100%);margin:12px max(0px,calc((100% - 560px) / 2)) 0}
  #dashContent:has(> .tk-tabrow > .tk-create)>#tkResults{order:4}
  #dashContent:has(> .tk-tabrow > .tk-create)>.tk-tabrow~*:not(#tkResults){order:5}

  #tkStudentTabs{width:min(560px,100%)!important;margin-left:auto;margin-right:auto}
  .tk-tabrow:has(> #tkStudentTabs){justify-content:center}
  .tk-tabs .tk-tab{flex:1 1 0;justify-content:center}
}

/* Картинки в задании: фото — заметно мельче, чертёж кабинета (график,
   построение) — чуть мельче, таблицы — чуть компактнее. По нажатию
   картинка по-прежнему открывается во весь экран. */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .tk-rqimg{margin-left:34px;max-width:none}
  .q-image img,.tk-rqimg img{width:auto;max-width:100%}
  .q-image.is-photo img,.tk-rqimg.is-photo img{max-width:min(100%,420px);max-height:320px}
  .q-image.is-drawing img,.tk-rqimg.is-drawing img{max-width:min(100%,580px);max-height:440px}
  .tk-take-qtext .qtbl,.tk-rqtext .qtbl,.hw-math-preview .qtbl,.qtbl{font-size:12.5px}
  .qtbl th,.qtbl td{padding:6px 11px;min-width:38px}
}

/* ==================================================================
   Оплаты репетитора: статистика во всю ширину (четыре в ряд), счета «К оплате»
   и оплаты в «Истории» — по две в строку, компактно.
   ================================================================== */
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .py-col>.py-stats,.py-col .py-pane>.py-card,.py-col .py-pane>.py-banner,.py-col .py-pane>.py-hrow,
  .py-col .py-pane>.py-empty,.py-col .py-pane>.py-refunds,.py-col .py-pane>.py-hgroup,.py-col .py-hist{max-width:none}
  .py-col>.py-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .py-col>.py-stats .py-statcard{padding:15px 16px;min-width:0}
  .py-col>.py-stats .py-statv{font-size:24px}

  .py-pane[data-pkey="t0"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .py-pane[data-pkey="t0"]>*{grid-column:1/-1;min-width:0}
  .py-pane[data-pkey="t0"]>.py-trow{grid-column:auto;padding:12px 14px;gap:11px}
  .py-pane[data-pkey="t0"] .py-trow-main{min-width:0}
  .py-pane[data-pkey="t0"] .py-trow-name,.py-pane[data-pkey="t0"] .py-trow-sub{white-space:normal;
    overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

  .py-col .py-hgroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .py-col .py-hgroup>.py-hgroup-h{grid-column:1/-1;padding-bottom:0}
  .py-col .py-hm-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:12px}
  .py-col .py-hgroup .py-hcard,.py-col .py-hm-body .py-hcard{margin:0;min-width:0;padding:12px 13px;gap:11px}
  .py-col .py-hgroup .py-hico,.py-col .py-hm-body .py-hico{width:34px;height:34px}
  .py-col .py-hgroup .py-hsub,.py-col .py-hm-body .py-hsub{white-space:normal}
}
@media (min-width:600px) and (max-width:719px) and (orientation:portrait){
  .py-col>.py-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==================================================================
   Уроки — по две карточки в строку.
   Тарифы — «Разовое занятие» и «Новый абонемент» рядом.
   ================================================================== */
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  .lz-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
  .lz-list>*{grid-column:1/-1;min-width:0}
  .lz-list>.lz-row{grid-column:auto}
  .lz-list .lz-rowtitle{white-space:normal;overflow:visible;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .tf-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==================================================================
   Вход и восстановление пароля — без прокрутки, на одном экране:
   сверху зелёный фон с логотипом и фразой, снизу форма.
   ================================================================== */
@media (min-width:600px) and (max-width:900px) and (orientation:portrait){
  .auth-screen,.auth-screen.auth-recover{display:flex;flex-direction:column;height:100dvh;
    min-height:100dvh;overflow-y:auto;background:#15261c}
  .auth-mtop,.auth-scrollhint{display:none!important}
  .auth-hero,.auth-screen.auth-recover .auth-hero{display:flex!important;position:relative;top:auto;
    flex:1 0 auto;height:auto;min-height:450px;box-sizing:border-box;
    align-items:center;justify-content:center;padding:40px 32px 60px}
  /* Весь блок центрируется целиком, без растянутых промежутков между частями. */
  .hero-inner{opacity:1;transform:none;flex:none;justify-content:center;align-items:center;
    gap:24px;width:100%;max-width:640px;padding:0}
  .hero-logo-ic,.hero-logo-ic svg,.hero-logo-ic img.brandmark{width:76px;height:76px}
  .hero-logo-ic img.brandmark{display:block;object-fit:contain}
  .hero-logo{flex-direction:column;align-items:center;justify-content:center;gap:12px}
  .hero-logo-tx{align-items:center;text-align:center}
  .hero-mid{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:620px}
  .hero-h{font-size:clamp(40px,5.3vw,48px)!important;line-height:1.12;
    max-width:620px;margin:0 auto}
  .hero-list{display:flex!important;width:fit-content;max-width:100%;margin:0 auto;
    gap:16px;text-align:left}
  .hero-list li{font-size:17px;line-height:1.4;gap:12px}
  .auth-screen.auth-recover .hero-h{margin:0!important}
  .hero-badge{align-self:center}
  .hero-steps{width:fit-content;max-width:100%;margin:0 auto;gap:16px;text-align:left}
  .hero-step{align-items:flex-start}
  .hero-step span:last-child{line-height:1.4}
  .auth-panel,.auth-screen.auth-recover .auth-panel{flex:none;margin-top:-28px;
    border-radius:28px 28px 0 0;box-shadow:0 -16px 44px rgba(9,18,13,.32);
    padding:30px 32px calc(30px + env(safe-area-inset-bottom))}
  .auth-panel::before{display:none}
  .auth-screen.auth-recover .auth-mhead{display:none!important}
  .auth-form{max-width:420px}
}