/* Planner Studio — css/mobile.css  (casca de celular ≤ 820 px) */

#mroot{display:none}

@media (max-width:820px){
  #app{display:none!important}
  #mroot{display:grid;grid-template-rows:48px 1fr 60px;position:fixed;inset:0;background:var(--stage);z-index:5}

  #mtop{display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--surface);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}
  .mbrand{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
  .mpg{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px}
  #mtop .miconbtn{margin-left:auto;width:34px;height:34px;padding:7px}
  #mtop .miconbtn+.miconbtn{margin-left:0}
  .miconbtn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
    display:inline-flex;align-items:center;justify-content:center}
  .miconbtn svg{width:18px;height:18px}

  #mbody{position:relative;overflow:hidden}
  #mstageWrap{position:absolute;inset:0}
  #mstageWrap #stage{position:absolute;inset:0;padding:16px}
  #mstageWrap[hidden]{display:none}

  .msheet{position:absolute;inset:0;background:var(--paper);overflow:auto;padding:14px 14px 30px}
  .msheet>#left,.msheet>#right{background:transparent;padding:0;border:0}
  .msheet h3{font-size:13px;margin:14px 2px 8px}
  .msheet h3:first-child{margin-top:2px}

  #mfab{position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;
    background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-pop);z-index:6}
  #mfab svg{width:24px;height:24px}
  #mfab[hidden]{display:none}

  .mbig{width:100%;justify-content:center;padding:13px;font-size:13.5px;margin-bottom:8px}
  .m2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .m2 .mbig{margin-bottom:0}

  #mtabs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line)}
  #mtabs button{flex-direction:column;gap:2px;border:0;border-radius:0;background:transparent;color:var(--muted);
    font-size:10px;padding:8px 2px}
  #mtabs button i{font-style:normal}
  #mtabs button svg{width:20px;height:20px}
  #mtabs button.on{color:var(--brand)}

  #menu{top:auto;bottom:66px;right:10px;left:10px;min-width:0}
  dialog{max-width:94vw}
  #zenExit{display:none!important}
}