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

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

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

.mtop, .mtabs, .mmenu-wrap, .fbtn, .dimbtn{display:none}
/* обгортки згорток потрібні лише на телефоні; на широкому екрані вони
   прозорі для розкладки, тому фільтри й розрізи стоять як стояли */
.fltbody, .dimbody{display:contents}

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

  /* ---- поля: не менше 16px ----
     Телефон сам наближає сторінку, коли фокус потрапляє в поле, де шрифт
     дрібніший за 16px. Це не налаштування сайту й не жест людини: браузер
     вважає, що текст не прочитати, і збільшує масштаб. Після закриття
     вікна масштаб лишається — сторінка стоїть наближеною, збоку виповзає
     смуга прокрутки. У формі угоди поля були 15px, у калькуляторі 15,
     у фільтрах 14 — приближало скрізь.

     Ставимо 16px саме тут, а не в кожному файлі окремо: правило одне на
     всі поля, і на широкому екрані (де наближення немає) розміри
     лишаються як були. Вимикати масштабування через meta viewport
     (maximum-scale=1) не стали: тоді сторінку не зможе збільшити й той,
     хто справді цього хоче.

     !important тут по ділу: розміри полів задані в кожному файлі своїми
     селекторами (`.form .f input`, `.ts-own-inp`, поля калькулятора), і
     без нього правило перебивали б саме вони — половина полів лишалась
     15px і далі приближала. Це не оформлення, а межа, нижче якої полю
     не можна опускатись на телефоні; прапорці й перемикачі не чіпаємо —
     вони фокус клавіатурою не відкривають і масштаб не рухають. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea{font-size:16px !important}
  .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(--logo-green); font-style:normal}

  /* ---- знак спільноти в мобільній шапці ---- */
  /* У власних темах його немає зовсім; у темі колаборації стоїть після
     назви, через «×» — той самий порядок, що й на широкому екрані. */
  .mtop .mlogo .tie, .mtop .mlogo .mark.swan{display:none}
  :root[data-skin="blackswan"] .mtop .mlogo .tie{display:inline; font-family:var(--mono);
    font-size:11px; color:var(--faint)}
  :root[data-skin="blackswan"] .mtop .mlogo .mark.swan{display:grid; width:30px; height:30px;
    border-radius:9px}
  :root[data-skin="blackswan"] .mtop .mlogo .mark.swan .swan{height:20px; width:auto; display:block}
  .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; white-space:nowrap; flex:none}
  /* padding:0 — інакше рідний відступ кнопки зсуває значок з центру */
  .mtop .mburger{width:38px; height:38px; padding:0; border-radius:10px; border:1px solid var(--line);
    background:var(--panel); display:inline-flex; align-items:center; justify-content:center;
    color:var(--dim); line-height:1}
  .mtop .mburger svg{display:block}

  /* ---- вкладки знизу ---- */
  /* Колонок стільки, скільки розділів у .nav — раніше стояло жорстке 6,
     а розділів лишилось пʼять, і праворуч зяяла порожня клітинка. */
  .mtabs{display:grid; grid-auto-flow:column; grid-auto-columns: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)}

  
  /* ---- калькулятор ризику ---- */
  /* Ряд інструментів — «пігулка» з великим заокругленням. На телефоні він
     не влазить в один рядок і переноситься, а кругла рамка навколо трьох
     рядків виглядає кривою й ріже крайні кнопки. Тому тут звичайна рамка. */
  .ck-pairs{border-radius:14px; gap:2px; padding:4px}
  .ck-pair{font-size:12px; padding:7px 10px}

  /* ---- палець по затемненню не гортає сторінку під ним ----
     Те саме правило, що вже стояло на шторці меню, тепер на всіх
     затемненнях: замок прокрутки (ScrollLock в ui.js) тримає сторінку,
     а це не дає жесту по темному полю взагалі дійти до неї. Самі вікна
     не чіпаємо — всередині них є що гортати. */
  .pnl-ov, .mmenu-wrap .ov{touch-action:none}

  /* ---- прокрутка всередині вікна лишається всередині ----
     Догортаний до краю блок передає рух далі — сторінці під вікном
     (scroll chaining). Спершу contain стояв на самих вікнах, і цього
     вистачало, поки прокручувалось їхнє тіло (.m-body). Але в чаті
     агента гортається стрічка .as-log глибше в середині, і сторінка під
     чатом їхала знов. Таких місць з десяток: стрічка чату, поле
     введення, списки Notion, тіло форми угоди, опитування «Моя ТС»,
     нотатка під скріном. Тому ставимо правило на все, що лежить у
     вікні, — на блоки без прокрутки властивість не впливає взагалі. */
  .modal, .pnl-wrap, .ts-ask, .mmenu-wrap, .askwrap, .lightbox,
  .modal *, .pnl-wrap *, .ts-ask *, .mmenu-wrap *, .askwrap *, .lightbox *{
    overscroll-behavior:contain}

  /* ---- шторка меню ---- */
  .mmenu-wrap{display:block; position:fixed; inset:0; z-index:60; visibility:hidden;
    overscroll-behavior:contain}
  .mmenu{overscroll-behavior:contain}
  .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; padding:0; border-radius:9px; border:1px solid var(--line); color:var(--dim);
    display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1}
  /* всередині шторки живуть оригінальні блоки бічної панелі — їх стилі й так є */
  .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}

  /* Соцмережі у шторці. Блоки бічної панелі сюди переїжджають цілком, а їхні
     правила написані через «.side ...» — тож тут вони не діють: підпис лишався
     звичайним текстом, а від display:block вище значки зривались під нього.
     Повертаємо ряд і робимо значки нормального пальцевого розміру. */
  .mmenu .socs{display:flex; align-items:center; gap:10px; width:100%;
    margin-top:6px; padding:12px 2px 2px; border-top:1px solid var(--line-soft)}
  .mmenu .socs .lab{display:inline; width:auto; margin:0 auto 0 4px; padding:0;
    font-family:var(--mono); font-size:10px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--faint)}
  .mmenu .socs .soc{display:inline-grid; place-items:center; flex:none;
    width:44px; height:44px; border-radius:13px; color:var(--dim);
    border:1px solid var(--line); background:var(--panel)}
  .mmenu .socs .soc .ic{width:22px; height:22px}
  .mmenu .socs .soc.ig:active{color:#e1568f}
  .mmenu .socs .soc.tt:active{color:#25f4ee}

  /* ---- вміст ---- */
  .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}
  /* «Поділитися» в шапці журналу — одна кнопка, список періодів випадає під нею */
  .jhead .sh-bar.sh-inline .sh-btn{padding:9px 14px; font-size:12.5px; white-space:nowrap}

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

  /* ---- календар місяця ----
     На телефоні в клітинку шириною ~45px не влазять підписи TP/SL/BE:
     вони переносяться, рядки виходять різної висоти й сітка виглядає
     рваною. Тому тут підписи стають крапками того ж кольору (кільце —
     вхід проти біаса), а клітинки — однакової висоти: число дня,
     крапки під ним і підсумок дня внизу. */
  .cal{gap:4px; padding:10px 8px}
  .cal .wd{font-size:9px; letter-spacing:.06em; padding:0 0 5px}
  .cal .day{min-height:62px; padding:6px 3px 5px; border-radius:10px; align-items:center}
  .cal .day .n{font-size:11px; line-height:1}
  .cal .day .marks{margin-top:5px; padding-top:0; gap:3px; justify-content:center;
    max-height:15px; overflow:hidden}
  .cal .day .res{font-size:11px; margin-top:auto; letter-spacing:-.03em}
  .cal .mk{width:6px; height:6px; min-width:6px; padding:0; border-radius:50%;
    font-size:0; line-height:0; border:none; background:currentColor}
  .cal .mk.tp{color:var(--up)}
  .cal .mk.sl{color:var(--down)}
  .cal .mk.be{color:var(--be)}
  .cal .mk.beplus{color:var(--accent)}
  .cal .mk.skip{color:var(--faint)}
  .cal .mk.rev{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}

  /* «Моя ТС» */
  .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}

  /* ---- аналітика: фільтри й розріз під кнопками ----
     Девʼять списків і десять розрізів разом дають два десятки кнопок на
     одному екрані. Замість них — дві кнопки на всю ширину; те, що під
     ними, розкривається на дотик. Кількість вибраних фільтрів видно
     одразу, тож ховати їх безпечно. */
  .fbtn, .dimbtn{display:flex; align-items:center; gap:8px; width:100%;
    padding:12px 14px; margin-bottom:12px; border:1px solid var(--line);
    background:var(--panel); color:var(--text); border-radius:12px;
    font-size:14px; text-align:left}
  .fbtn .chev, .dimbtn .chev{margin-left:auto; color:var(--faint); transition:transform .2s}
  .fwrap.open .fbtn .chev, .dimsel.open .dimbtn .chev{transform:rotate(180deg)}
  .fbtn .cnt{font-style:normal; font-family:var(--mono); font-size:11px; line-height:1;
    padding:4px 7px; border-radius:20px; background:var(--accent); color:var(--accent-ink,#fff)}
  .dimbtn .k{color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.08em}
  .dimbtn b{font-weight:600}

  /* Розкриття їде плавно: рядок гріда переходить з 0fr у 1fr, тож висота
     анімується сама — без вгаданого max-height, який на довгому списку
     або обрізає, або лишає паузу. Відступ знизу — падінгом усередині,
     інакше він лишався б видимим і в згорнутому стані. */
  .fltbody, .dimbody{display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .28s cubic-bezier(.16,1,.3,1)}
  .fwrap.open .fltbody, .dimsel.open .dimbody{grid-template-rows:1fr}
  .fltbody > *, .dimbody > *{overflow:hidden; opacity:0; transition:opacity .16s ease}
  .fwrap.open .fltbody > *, .dimsel.open .dimbody > *{opacity:1; transition-delay:.08s}

  .fwrap .filters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px; margin-bottom:0}
  .fwrap.open .filters{padding-bottom:14px}
  .fwrap .filters select, .fwrap .filters .fsel{width:100%; min-width:0; justify-content:space-between}
  .fwrap .filters .dbtn, .fwrap .filters .clear{grid-column:1 / -1; width:100%;
    justify-content:center; text-align:center}
  .dimsel .dims{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px; margin-bottom:0}
  .dimsel.open .dims{padding-bottom:14px}
  .dimsel .dims .pill{width:100%; padding:10px 8px; font-size:12.5px; text-align:center}

  /* фонові фігури лізуть під таблиці розрізів і під розбір дня — там,
     де суцільний текст і цифри, вони тільки заважають читати */
  :root[data-page="analytics"] #bgfx, :root[data-page="day"] #bgfx{display:none}

  /* «Моя ТС», порожній стан: список «що зміниться» стояв просто на тлі
     сторінки й зливався з фігурою, що пропливала позаду */
  .ts-why{margin-top:24px; padding:18px 16px; border:1px solid var(--line-soft);
    border-top:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel)}
  .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%}

  /* шапка: заголовок, під ним перемикач періоду на всю ширину,
     під ним кнопки «поділитись» одним рядком — гортаються вбік */
  .ohead{gap:12px; margin-bottom:16px}
  .ohead h1{font-size:26px; width:100%}
  /* Заголовок-перемикач на телефоні — головна навігація розділу, тож
     висота посилання доростає до 44px за рахунок відступу зверху:
     риска під відкритою вкладкою лишається на місці. */
  h1.ovh a{padding-top:8px; padding-bottom:10px}
  .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{margin:0}
  .ovw .ohead .sh-bar .sh-btn{padding:8px 12px; font-size:13px}
  .ovw .ohead .sh-pop{max-width:calc(100vw - 32px)}

  /* підпис над тижнем переноситься, а не тиснеться в один рядок */
  .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}
}

@media (prefers-reduced-motion:reduce){
  .fltbody, .dimbody, .fltbody > *, .dimbody > *{transition:none}
}

/* ============================================================
   Фонові фігури на телефоні.

   На маленькому екрані фігура займає майже всю ширину й лягає просто
   під текст — те, що на моніторі читається як тінь на полях, тут
   перебиває вміст. Тому тут вона ледь помітна: слабша заливка, тонше
   обведення і власний кадр проявлення (opacity в keyframes сильніша
   за будь-яке звичайне правило, тому окрема назва анімації).
   ============================================================ */
@media (max-width:900px){
  #bgfx img.swan{animation-name:swanInSoft, sparkFade}
  @keyframes swanInSoft{
    from{opacity:0; transform:translateY(7px) scale(.96)}
    to{opacity:.1; transform:none}}
}