/* Keep selection controls inside their grid track. A 620px minimum on this
   row previously widened the mobile layout viewport and shrank the whole UI. */
.stroke-options.selection-options {
  width: min(100%, 760px);
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  overflow: visible;
}
.selection-status span { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.selection-modes { display: flex; gap: 5px; min-width: 0; }
.selection-modes button,
.selection-actions button {
  min-height: 44px;
  padding: 8px 10px;
  color: #c08fa3;
  background: #fff;
  border: 1px solid #7a0737;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.selection-modes button.is-active { background: #c60858; border-color: #991b50; }
.selection-modes button:focus-visible,
.selection-actions button:focus-visible { outline: 2px solid #d1a4b7; outline-offset: 2px; }
.selection-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.selection-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.selection-actions .selection-quick-replace { background: #db0961; border-color: #aa1151; }
.selection-color-swatch { width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid #540b2a; border-radius: 5px; }
@media (max-width: 820px) {
  .workbench, .workspace, .view-toolbar-stack, .view-tabs,
  .canvas-stage, .canvas-controls, .tool-rail, .inspector {
    min-width: 0;
    max-width: 100%;
  }
  .stroke-options { min-width: 0; max-width: 100%; }
  .stroke-options p { min-width: 0; overflow-wrap: anywhere; }
  .stroke-size-group { width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .stroke-options.selection-options { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .selection-modes button { flex: 1 1 0; min-width: 0; padding-inline: 5px; white-space: normal; }
  .selection-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection-actions button { min-width: 0; padding-inline: 5px; white-space: normal; line-height: 1.4; }
  .canvas-controls { overflow-x: auto; }
  /* Keep the expanded tool palette from floating over region actions while
     users alternate between selecting cells and changing the selection mode. */
  .workbench:has(.selection-tools) .tool-rail { position: relative; bottom: auto; }
}
/* iOS otherwise zooms the page when focusing small text fields. Keep browser
   pinch zoom available; only the canvas owns drawing and canvas zoom gestures. */
@media (max-width: 820px) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  textarea, select { font-size: 16px; }
}