/* Phones, tablets and touch. */

/* ---------- Responsive / touch (phones & tablets) ---------- */
@media (max-width:860px){
  body{font-size:13px}
  .titlebar{gap:6px;padding:5px 8px}
  .titlebar .brand{font-size:15px}
  .doc-name{max-width:38vw}
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:9px 12px;white-space:nowrap}

  /* Bigger touch targets on the ribbon */
  .ribbon-page{min-height:0;padding:4px 2px}
  .row button,.row label.color,.row select{min-height:38px}
  .group{padding:2px 6px}

  /* Stack the layout: thumbnails become a horizontal strip on top */
  main{flex-direction:column}
  #navigator{width:auto;flex-direction:row;align-items:center;height:92px;gap:8px;
    padding:8px 10px;border-right:none;border-bottom:1px solid var(--line2);overflow-x:auto;overflow-y:hidden}
  #navigator .section-head{display:none}
  .thumb{flex:0 0 128px}
  #canvas-wrap{padding:10px}

  /* Compact panels */
  #notes-bar{height:96px;padding:6px 10px}
  #statusbar .hint{display:none}
  /* (Some dialogs ask for a minimum width in their own style: never wider than the screen.) */
  .modal{max-width:calc(100vw - 16px) !important;min-width:0 !important;box-sizing:border-box}
  .modal kbd{white-space:normal}
  .popover{max-width:92vw}
}

/* Coarse pointers (touch): make handles easier to grab. */
@media (pointer:coarse){
  .handle-size{width:16px;height:16px}
  .handle-size.nw{left:-9px;top:-9px}.handle-size.ne{right:-9px;top:-9px}
  .handle-size.sw{left:-9px;bottom:-9px}.handle-size.se{right:-9px;bottom:-9px}
  .handle-del{width:28px;height:28px;font-size:16px}
  .handle-rot{width:20px;height:20px}
}

/* Narrow phones (portrait): the title bar keeps the name readable. */
@media (max-width:480px){
  .titlebar .brand,#ap-btn{display:none}
  .lang-select{max-width:74px}
  .doc-name{max-width:34vw}
}

/* Little height (a phone on its side): the slide gets the room. The ribbon
   loses its group titles, thumbnails and bars shrink, notes are hidden. */
@media (max-height:520px){
  .titlebar{padding:2px 8px}
  .tabs button{padding:5px 10px}
  .group>label{display:none}
  .ribbon-page{padding:2px}
  .row button span{font-size:10px}
  .row button,.row label.color,.row select{min-height:32px}
  #navigator{height:62px;padding:4px 8px}
  .thumb{flex:0 0 88px}
  #notes-bar{display:none}
  #statusbar{min-height:0;padding-block:0}
  #canvas-wrap{padding:6px}
}