/* Narrow screens: slimmer cards (collapsed by default under 760px in ui.js) */
@media (max-width: 900px) {
  .notes-panel, .code-panel { width: var(--w, 260px); }
  .brand-name { display: none; }
}
/* The restore / error message sits under the top bar */
#message-bar { top: 64px; z-index: 16; }
/* Phones: tighter header and tool bar */
@media (max-width: 640px) {
  .pill-top .menu-btn { padding: 0 6px; font-size: var(--fs-small); }
  .pill-top .icon-btn { width: 28px; }
  .pill-colors { bottom: calc(var(--footer-h) + 76px); }
  .pill-tools { gap: 0; }
  .pill-tools .pill-divider { margin: 0 4px; }
  /* Tools: icon over label, so the next tool peeks out at the pill edge and invites scrolling */
  .pill-tools .tool-btn { flex-direction: column; justify-content: center; gap: 2px; height: 48px; width: 72px; padding: 0; font-size: var(--fs-micro); }
}
@media (max-width: 759px) {
  .notes-panel, .code-panel { width: 260px; height: auto; }
  .rs-handle { display: none; }
}
/* Phones: side cards start below both pill rows and stop above the taller tool pill */
@media (max-width: 640px) {
  .card, .card.is-sized { top: 112px; max-height: calc(100% - 196px); }
}
/* iOS Safari zooms and pans the whole page when a field under 16px gets focus: keep touch fields at 16px */
@media (pointer: coarse) {
  textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font-size: var(--fs-h3) !important; }
  .notes-muted { font-size: var(--fs-h3); } /* same size as the fields next to it */
  /* A long press opens the context menu: iOS must not select page text (toast, labels). Typing fields and code stay selectable. */
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  textarea, input, #code-text, .mat-preview, .legal { -webkit-user-select: text; user-select: text; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Desktop and tablet: the tool pill has two centered rows, icon over label like on phones: the blocks on top, the tools (select, group, snapping, delete) below */
.pill-break { display: none; }
@media (min-width: 641px) {
  .pill-tools { overflow: visible; flex-wrap: wrap; justify-content: center; gap: 2px 4px; width: min(796px, calc(100vw - 24px)); border-radius: 24px; }
  .pill-tools::before, .pill-tools::after, .row-hide { display: none; }
  .pill-break { display: block; order: 1; flex: 0 0 100%; height: 0; }
  .pill-tools .block-btn { order: 0; }
  .pill-tools > :not(.block-btn):not(.pill-break) { order: 2; }
  .pill-tools .tool-btn { flex-direction: column; justify-content: center; gap: 2px; height: 48px; width: 72px; padding: 0; font-size: var(--fs-micro); }
  .pill-tools .tool-more { width: 24px; }
  .pill-colors { bottom: calc(var(--footer-h) + 124px); } /* above the two-row tool pill (8 + 108 + 8) */
  .pill-tools .tool-lock { width: 36px; height: 36px; }
}