/* ============================================================
   selection-guard.css — No accidental text selection (Shared)
   ─────────────────────────────────────────────────
   PURPOSE : Stop the "whole page turns blue" highlight that appears when a
             drag (cover paddle, gaze pad, sliders, canvas) strays over text.
   LAYERS  : 1. Static  — app chrome and drawing surfaces are never selectable.
             2. Gesture — js/shared/selection-guard.js adds `is-dragging` on
                <html> for the length of one pointer drag; nothing selects
                during it, and the class is always removed afterwards.
   KEEPS   : Prose, inputs and anything marked .ui-selectable / [data-selectable]
             stay selectable. Never use `* { user-select: none }`.
   USAGE   : Linked from every page right after native-shell.css.
   ============================================================ */

button,
[role="button"],
[role="tab"],
[role="tablist"],
[role="slider"],
[role="switch"],
summary,
nav,
canvas,
svg,
img,
.ui-chrome {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Form fields and opted-in prose win over the chrome rule above. */
input,
textarea,
select,
[contenteditable="true"],
.ui-selectable,
[data-selectable],
.ui-selectable *,
[data-selectable] * {
  -webkit-user-select: text;
  user-select: text;
}

/* One pointer drag in flight: nothing on the page may start a selection. */
html.is-dragging,
html.is-dragging * {
  -webkit-user-select: none !important;
  user-select: none !important;
}
html.is-dragging ::selection {
  background: transparent;
}