/* css/m-panels.css — painéis das abas (Folha / Estilo / Exportar) e os
   controles próprios do celular. Só ≤ 820 px. */

@media (max-width:820px){
  /* o painel cobre o corpo (#mbody é position:relative) */
  .mpanel{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
    background:var(--paper);transition:transform .22s ease}
  .mpanel[hidden]{display:none}

  /* pega para arrastar pra baixo — só ela recebe o gesto */
  .m-grab{flex:none;height:30px;display:flex;align-items:center;justify-content:center;
    touch-action:none;cursor:grab}
  .m-grab i{width:40px;height:5px;border-radius:3px;background:var(--line);display:block}

  .mp-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:2px 16px 40px}

  .mpanel h3{font:700 12px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;
    color:var(--faint);margin:24px 2px 8px}
  .mp-scroll > h3:first-child{margin-top:6px}
  .mpanel .hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:10px 2px 2px;
    background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}

  .mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:56px;padding:8px 0;border-bottom:1px solid var(--line-2)}
  .mrow > .k{font-size:15px;color:var(--ink)}
  .mrow select{width:auto;min-width:140px;max-width:62%;height:44px;font-size:16px;border-radius:11px}
  .mrow input[type=color]{width:54px;height:40px;padding:3px}
  .mrow .cf-btn{width:150px;height:40px}

  .mseg{display:flex;flex:none;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface)}
  .mseg button{border:0;background:transparent;padding:10px 12px;font-size:14px;color:var(--muted);
    border-left:1px solid var(--line);min-width:44px;min-height:44px}
  .mseg button:first-child{border-left:0}
  .mseg button.on{background:var(--brand);color:#fff;font-weight:700}

  .stepper{display:flex;align-items:center;gap:6px;flex:none}
  .stepper button{width:42px;height:42px;flex:none;border:1px solid var(--line);background:var(--surface);
    border-radius:12px;font-size:22px;line-height:1;color:var(--ink);
    display:flex;align-items:center;justify-content:center;padding:0}
  .stepper button:active{background:var(--brand-soft)}
  .stepper b{min-width:52px;text-align:center;font-size:17px;font-weight:600;
    font-variant-numeric:tabular-nums;color:var(--ink)}

  .mrange-wrap{padding:12px 0 8px;border-bottom:1px solid var(--line-2)}
  .mrange-wrap > label{display:flex;justify-content:space-between;font-size:15px;color:var(--ink);margin-bottom:4px}
  .mrange-wrap .v{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
  .mrange-wrap input[type=range]{width:100%;height:38px;accent-color:var(--brand);margin:0}

  .mbig{width:100%;min-height:54px;font-size:16px;font-weight:700;border-radius:14px;margin:10px 0;
    display:flex;align-items:center;justify-content:center;gap:10px}
  .mbig svg{width:21px;height:21px}
  .mbig.primary{background:var(--brand);border-color:var(--brand);color:#fff}
  .mbig.primary:active{background:var(--brand-deep)}
  .m2{display:flex;gap:10px}
  .m2 > *{flex:1}

  .mchips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 8px}
  .mchips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;
    padding:9px 14px;font-size:13px;color:var(--ink);min-height:40px}
  .mchips button.on{background:var(--brand);border-color:var(--brand);color:#fff}
}