/* responsive.css — adapt for tablets and phones */

/* Tablet-ish */
@media (max-width: 900px) {
  .board-name { width: 140px; }
  .text-btn .lbl { display: none; }
  .save-status { display: none; }
}

/* Phone: simplified toolbar, move some chrome */
@media (max-width: 620px) {
  .app { grid-template-columns: 50px 1fr; grid-template-rows: 48px 1fr 42px; }
  .tool-btn { width: 40px; height: 40px; }
  .tool-btn .ic { width: 20px; height: 20px; }
  .topbar { gap: 4px; padding: 0 6px; }
  .board-name { width: 96px; font-size: 13px; }
  #btn-templates, #btn-fullscreen { display: none; }
  .tool-options { left: 6px; right: 6px; top: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .minimap { width: 130px; height: 92px; }
  .viewctl { right: 8px; bottom: 8px; }
  /* hide less-critical tools on very small screens; still reachable via More if added */
  .toolbar [data-tool="flowchart"],
  .toolbar [data-tool="mindmap"],
  .toolbar [data-menu="teaching"] { display: none; }
}

@media (pointer: coarse) {
  /* coarse pointers get slightly bigger hit areas even without Touch Mode */
  .page-tab { height: 34px; }
}

@media print { body { display: none; } }