/* ==========================================================================
   Solo dentro l'app per iPhone e iPad (cartella ios/, js/native.js)
   La classe html.native-app la mette l'app prima che la pagina si disegni.
   Qui si tolgono gli effetti che su WebKit costano di più (sfocature dietro ai
   pannelli, filtri su intere pagine, transizioni su tutti gli elementi,
   animazioni infinite che ridisegnano a ogni fotogramma) e si dà alla pagina
   il comportamento di un'app: niente evidenziazione grigia al tocco, niente
   menu "copia" tenendo premuto sui pulsanti.
   ========================================================================== */
html.native-app {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
html.native-app :is(button, a, .btn, [role="button"], [role="tab"], label, nav, .sidebar, .topbar) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* niente selezione della pagina tenendo premuto (nell'app rompeva i tocchi):
   si seleziona solo dove si scrive */
html.native-app, html.native-app body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
html.native-app :is(input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="true"] *, .cm-editor, .cm-editor *, .xterm, .xterm *) {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* sfocature dietro ai pannelli: fondo pieno, quasi uguale e molto più leggero */
html.native-app :is(.fx-cel, .sx-back) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.55) !important;
}
/* la barra di formattazione resta di vetro (è piccola e ferma: costa poco) */
html.native-app :is(.ink-pageno, .nb-fig-ui, .ar-ph span) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: color-mix(in srgb, var(--raised) 94%, transparent) !important;
}

/* cambio di tema: niente transizione su ogni elemento della pagina */
html.native-app.theme-fade,
html.native-app.theme-fade *,
html.native-app.theme-fade *::before,
html.native-app.theme-fade *::after { transition: none !important; }

/* animazioni infinite che ridisegnano a ogni fotogramma */
html.native-app :is(.fx-fl-sp, .fx-fl-star, .mm-dash) { animation: none !important; }
html.native-app .fx-fl-sp { opacity: 0 !important; }
html.native-app .tm-main.is-running .tm-prog { filter: none !important; }

/* le ombre non si animano: si animano solo posizione e trasparenza (sulla GPU) */
html.native-app :is(.btn, .subject-card, .folder-tile, .note-card, .ink-swatch, .ink-nav-page) {
  transition-property: transform, opacity, background-color, border-color, color !important;
}

/* niente rimbalzo della pagina intera sopra la barra in alto */
html.native-app, html.native-app body { overscroll-behavior-y: none; }

/* segnaposto del quaderno quando la nota a mano è aperta nell'editor nativo */
.nb-native-ink {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 48px 20px;
  text-align: center;
  color: var(--ink-2);
}
.nb-native-prev {
  width: min(320px, 70vw);
  aspect-ratio: 1000 / 1414;
  border-radius: 12px;
  background: var(--raised);
  border: 1px solid var(--stroke);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.nb-native-prev svg { width: 100%; height: 100%; }

/* editor a mano nativo aperto sopra il sito (js/native.js): sotto non si disegna e non si anima niente */
html.native-ink-open body > * { visibility: hidden !important; }
html.native-ink-open *, html.native-ink-open *::before, html.native-ink-open *::after { animation-play-state: paused !important; }