/* ============================================================
   Планшети й телефони.

   На широкому екрані ліворуч стоїть панель на 216px. На телефоні вона
   зʼїдає пів екрана і ламає сторінку, тож до 900px ховаємо її, а замість
   неї — шапка зверху (лого + «Нова угода» + меню) і панель вкладок
   знизу з шістьма розділами. Усе, що було в бічній панелі (калькулятор,
   підключення, мова, оформлення, вихід), живе в шторці «меню».

   Файл підключається останнім і тільки додає правила під @media, тому
   на десктопі нічого не змінює.
   ============================================================ */

.mtop, .mtabs, .mmenu-wrap{display:none}

@media (max-width:900px){
  body{display:block; padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .side{display:none}
  .main{padding:14px 14px 24px}

  /* ---- шапка ---- */
  .mtop{display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:40;
    padding:10px 14px; background:var(--side-bg); border-bottom:1px solid var(--side-line)}
  .mtop .mlogo{display:flex; align-items:center; gap:8px; font-weight:650; font-size:15px;
    letter-spacing:-.01em}
  .mtop .mlogo .mark{width:30px; height:30px; border-radius:9px; background:var(--mark-bg);
    border:1px solid var(--mark-line); display:grid; place-items:center; color:var(--text)}
  .mtop .mlogo .mark svg{height:17px; width:auto}
  .mtop .mlogo i{color:var(--accent); font-style:normal}
  .mtop .sp{flex:1}
  .mtop .mnew{display:flex; align-items:center; gap:6px; background:var(--accent);
    color:var(--accent-ink,#fff); border-radius:10px; padding:8px 12px; font-weight:600; font-size:13.5px}
  .mtop .mburger{width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
    background:var(--panel); display:grid; place-items:center; color:var(--dim)}

  /* ---- вкладки знизу ---- */
  .mtabs{display:grid; grid-template-columns:repeat(6,1fr); position:fixed; left:0; right:0; bottom:0;
    z-index:40; background:var(--side-bg); border-top:1px solid var(--side-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mtabs a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px;
    border-radius:10px; color:var(--dim); font-size:10.5px; line-height:1.1; text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .mtabs a .ic{opacity:.55}
  .mtabs a.on{color:var(--text); background:var(--panel-2)}
  .mtabs a.on .ic{opacity:1; color:var(--accent)}

  /* ---- шторка меню ---- */
  .mmenu-wrap{display:block; position:fixed; inset:0; z-index:60; visibility:hidden}
  .mmenu-wrap.in{visibility:visible}
  .mmenu-wrap .ov{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .2s}
  .mmenu-wrap.in .ov{opacity:1}
  .mmenu{position:absolute; top:0; right:0; bottom:0; width:min(320px, 88vw); background:var(--side-bg);
    border-left:1px solid var(--side-line); padding:16px 14px calc(16px + env(safe-area-inset-bottom));
    overflow-y:auto; display:flex; flex-direction:column; gap:18px;
    transform:translateX(100%); transition:transform .24s cubic-bezier(.16,1,.3,1)}
  .mmenu-wrap.in .mmenu{transform:none}
  .mmenu .mhead{display:flex; align-items:center; justify-content:space-between}
  .mmenu .mhead b{font-size:15px}
  .mmenu .x{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); color:var(--dim);
    display:grid; place-items:center; font-size:18px}
  /* всередині шторки живуть оригінальні блоки бічної панелі — їх стилі й так є */
  .mmenu .grp, .mmenu .conn, .mmenu .side-foot{display:flex; flex-direction:column; gap:10px}
  /* Підвал у шторці — стовпчиком і на всю ширину. Правило для верхнього
     меню (рядком, притиснуто праворуч) сюди протікало: воно написане на
     сам .side-foot і живе в тому ж медіазапиті. */
  .mmenu-wrap .mmenu .side-foot{margin:auto 0 0; flex-direction:column; align-items:stretch;
    padding-top:16px; border-top:1px solid var(--line-soft)}
  .mmenu-wrap .mmenu .side-foot > *{width:100%; justify-content:flex-start}
  .mmenu-wrap .mmenu #themeBtn span{display:inline}
  /* режим «тільки значки» ховає підписи в бічній панелі — у шторці вони потрібні */
  .mmenu-wrap .mmenu .mini, .mmenu-wrap .mmenu #themeBtn{font-size:13.5px; justify-content:flex-start; padding:10px 12px}
  .mmenu-wrap .mmenu .lab{display:block}

  /* ---- вміст ---- */
  .vhead{gap:10px}
  .vhead h1{font-size:22px}
  .vhead .right{width:100%; margin-left:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ovw, .jgrid, .split{grid-template-columns:minmax(0,1fr)}
  /* показники місяця на огляді стояли в чотири колонки й вилазили за картку */
  .ovw .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .in{padding:14px}
  .card h3{padding:11px 14px; font-size:12px}
  .sh-bar{flex-wrap:wrap}

  /* панелі збоку — на весь екран */
  .pnl-wrap[data-side="right"] .pnl{width:100%; border-radius:0; border:none}

  /* календар журналу: клітинки тісніші */
  .cal{gap:4px; padding:10px}

  /* «Моя ТС» */
  .ts-ways{grid-template-columns:1fr}
  .ts-tf{grid-template-columns:1fr; gap:10px}
  .ts-line{grid-template-columns:1fr; gap:4px}
  .ts-mods{grid-template-columns:1fr}
  .ts-no{grid-template-columns:1fr}
  .ts-three{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .ts-three .n{font-size:24px}
  .ts-cmp .r{grid-template-columns:1fr; gap:6px}
  .ts-cmp .v{text-align:left}

  /* «Аналіз дня» */
  .dv-head, .dv-pair, .dv-two{grid-template-columns:1fr}
  .dv-head span:first-child, .dv-cell:first-child, .dv-two .col.left{border-right:none;
    border-bottom:1px solid var(--line-soft)}
  .dv-wait{position:static}
  .dv-lvr{grid-template-columns:1fr; gap:4px}
  .dv-nav{width:100%; margin-left:0; justify-content:space-between}
  .dv-strip .s{min-width:140px}

  /* Аналітика, зв'язки: розрізи переносяться в кілька рядків, а не тягнуться вбік */
  .dims{flex-wrap:wrap; gap:6px}
  .dims .pill{flex:none; padding:7px 12px; font-size:12.5px}
  .lk-cols{grid-template-columns:1fr}

  /* помічник — нижче за вкладки не ховається */
  /* помічник і бейдж демо — вище за вкладки, інакше затуляють «Новини».
     !important, бо їхні власні файли задають позицію жорстко */
  .as-fab{bottom:calc(78px + env(safe-area-inset-bottom)) !important; right:12px !important;
    width:52px !important; height:52px !important}
  .demo-badge{bottom:calc(78px + env(safe-area-inset-bottom)) !important}
}

@media (max-width:560px){
  .main{padding:12px 10px 24px}
  /* кнопки внизу картки й розгорнутого рядка: у три в ряд не влазять —
     переносяться і ділять ширину */
  .m-foot{flex-wrap:wrap; gap:8px}
  .m-foot .btn{flex:1 1 auto; padding:9px 10px; font-size:13.5px; white-space:nowrap}
  .m-foot .sp{display:none}
  /* поле для посилання Notion і кнопка — одне під одним */
  .ts-paste{flex-direction:column}
  .ts-paste button{width:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trow{grid-template-columns:minmax(0,1fr) auto; gap:3px 10px}
  .ts-shots .ts-shot.mini, .shots .shot.mini{width:calc(50% - 5px)}
  .dv-tr{grid-template-columns:1fr auto; row-gap:6px}
  .dv-tr .r{grid-column:2}
  .dv-strip .s{min-width:100%; border-left:none; border-top:1px solid var(--line-soft)}
  .dv-strip .s:first-child{border-top:none}
}

/* ============================================================
   «Огляд» на телефоні.
   ============================================================ */
@media (max-width:900px){
  /* .main:has(.ovw) сильніше за мобільне .main — тож повторюємо поля тут */
  .main:has(.ovw){padding:14px 14px 110px}
  .ovw{display:flex; flex-direction:column; gap:0}
  .ovw .flow{min-width:0; width:100%}

  /* шапка: заголовок, під ним перемикач періоду на всю ширину,
     під ним кнопки «поділитись» одним рядком — гортаються вбік */
  .ovw .ohead{gap:12px; margin-bottom:16px}
  .ovw .ohead h1{font-size:26px; width:100%}
  .ovw .per{margin-left:0; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
  .ovw .per button{padding:8px 6px; text-align:center}
  .ovw .ohead .sh-bar.sh-inline{width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0}
  .ovw .ohead .sh-bar::-webkit-scrollbar{display:none}
  .ovw .ohead .sh-bar .sh-btn{flex:none; padding:8px 12px; font-size:13px}
  .ovw .ohead .sh-cap{flex:none}

  /* підпис над тижнем переноситься, а не тиснеться в один рядок */
  .ovw .sec-lab{flex-wrap:wrap; gap:4px 10px; margin-bottom:10px}

  /* тиждень: сім клітинок, кожна ~46px — шрифти під цю ширину */
  .ovw .days{gap:4px}
  .ovw .day{aspect-ratio:auto; min-height:62px; padding:6px 5px 5px; border-radius:9px}
  .ovw .day .wd{font-size:8px; letter-spacing:.06em; line-height:1.2}
  .ovw .day .dn{font-size:12px; margin-top:1px}
  .ovw .day .bot{gap:2px}
  .ovw .day .dr{font-size:10px; letter-spacing:-.02em; margin-left:0}
  .ovw .glow{font-size:13px; letter-spacing:.04em}
  .ovw .day.skip .dr{font-size:8px}

  /* картка місяця: усе стовпчиком, ніщо не тиснеться й не вилазить */
  .core{padding:16px 14px}
  .ovw .sum{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:14px}
  .ovw .sum .big{font-size:40px; margin-top:8px}
  .ovw .sum .when{font-size:16px; margin-bottom:0}
  .ovw .sum .right{margin-left:0; text-align:left; display:flex; align-items:baseline; gap:10px;
    flex-wrap:wrap; width:100%}
  .ovw .sum .right .v{font-size:13.5px}
  .ovw .stats .st{padding:11px 12px 10px}
  .ovw .stats .st:nth-child(4n){border-right:1px solid var(--line-soft)}
  .ovw .stats .st:nth-child(2n){border-right:none}
  .ovw .stats .st:nth-last-child(-n+4){border-bottom:1px solid var(--line-soft)}
  .ovw .stats .st:nth-last-child(-n+2){border-bottom:none}
  .ovw .stats .val{font-size:19px; margin-top:6px}
  .ovw .stats .lab{font-size:8.5px}

  /* колонка-компаньйон стає звичайним блоком під графіком */
  .ovw .rail{margin-top:14px}

  /* помічник менший — і не перекриває останню картку: знизу лишено запас */
  .as-fab{width:46px !important; height:46px !important}
  .as-fab svg{width:22px; height:22px}
}

/* ============================================================
   Аналітика, розбір дня, перемикач місяця — на телефоні.
   ============================================================ */
@media (max-width:900px){
  /* аналітика: у рядку чотири видимі клітинки — і колонок має бути чотири */
  .arow,.ahead{grid-template-columns:minmax(0,1fr) 34px 58px 78px; gap:8px; padding:10px 12px}
  .ahead span:nth-child(3){display:block}
  .ahead span:nth-child(4),.arow .rr{display:none}
  .arow{font-size:13.5px}
  .arow .wrbar .track{display:none}
  .arow .wrbar b{min-width:0}
}

@media (max-width:560px){
  /* розбір дня: перемикач на всю ширину, під ним стрілки з датою між ними */
  .dv-nav{width:100%; margin-left:0; flex-wrap:wrap; gap:6px}
  .dv-nav .dv-seg{flex:1 1 100%; display:grid; grid-template-columns:1fr 1fr}
  .dv-nav .dv-calwrap{flex:1 1 auto; min-width:0; display:block}
  .dv-nav .dv-calwrap .day{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px}
  .dv-nav > button{flex:0 0 auto}

  /* журнал: назва місяця в один рядок */
  .mnav .lb{white-space:nowrap; font-size:12px; padding:6px 8px; gap:5px}
  .mnav .lb svg{display:none}
  .mnav .nb{padding:5px 9px}
  .mnav .tb{padding:6px 9px; font-size:12px}
}

/* планшет у книжковій орієнтації: панель лишається, але вужча */
@media (min-width:901px) and (max-width:1100px){
  .side{width:188px; padding:16px 10px}
  .main{padding:18px}
}