/* ==========================================================================
   Telefono e iPad: tocchi, finestre a foglio, scorrimento
   Caricato per ultimo: corregge le regole delle singole sezioni solo dove serve
   il dito (pointer: coarse) o lo schermo stretto. Il resto del sito non cambia.
   ========================================================================== */

/* --- tocco: niente lampo grigio di Safari, niente attesa del doppio tocco --- */
html { -webkit-tap-highlight-color: transparent; }
button, a, label, summary, select, [role="button"], [role="tab"], [role="menuitem"],
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="button"], input[type="submit"] {
  touch-action: manipulation;
}
@media (pointer: coarse) {
  /* tenere premuto un bottone non apre il menu «Copia / Cerca» di iOS */
  button, [role="button"], .btn, .chip, .nav-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* --- feedback al tocco: al posto del lampo, il bottone si scurisce un attimo --- */
@media (hover: none) {
  .nav-item:active, .nav-sub a:active, .nav-cat-head:active, .foot-settings:active,
  .menu-btn:active, .top-more:active, .top-search:active,
  .btn:active:not(:disabled), .chip:active, .seg button:active:not(.active),
  .btn-icon:active, .nb-icon-btn:active, .ui-menu button:active:not(:disabled), .nb-pop button:active,
  .choice:active:not(:disabled), .tool-row:active, .unit-index a:active, .subject-card:active,
  .recap summary:active, .example summary:active, .pr-unit-b:active, .pr-subj-b:active,
  .tm-amb-b:active, .at-cat:active, .wk-add:active, .rg-schip:active, .sx-filters button:active {
    background-color: var(--fill-2);
  }
  .btn-primary:active:not(:disabled), .btn-danger:active:not(:disabled), .chip.active:active { background-color: var(--solid); opacity: 0.82; }
  .btn-danger:active:not(:disabled) { background-color: var(--ko); }
  .menu-btn:active, .top-more:active, .top-search:active, .btn-icon:active, .nb-icon-btn:active { transform: scale(0.94); }
  .menu-btn, .top-more, .top-search, .btn-icon, .nb-icon-btn { transition: background 0.15s, transform 0.15s var(--ease); }
  /* lo stato «sotto il mouse» resta attaccato dopo il tocco: qui non serve */
  .btn-primary:hover:not(:disabled) { opacity: 1; box-shadow: none; }
  .chapter:hover h3 { text-decoration: none; }
  .chapter:hover .ch-num { transform: none; }
  .nav-item:hover .nav-ic svg { transform: none; }
}

/* ==========================================================================
   Bersagli comodi per il dito (almeno ~44 px per i comandi principali)
   ========================================================================== */
@media (pointer: coarse) {
  /* barra in alto */
  .menu-btn { width: 44px; height: 44px; border-radius: 12px; margin-left: -4px; }
  .top-more { width: 44px; height: 44px; }
  .topbar .ask-btn, .topbar #theme-seg, .topbar .profile-btn { height: 40px; }
  .topbar .top-search { height: 40px; }
  .crumbs a { padding: 12px 2px; margin: -12px -2px; }

  /* menu laterale */
  .nav-item { min-height: 44px; }
  .nav-sub a { min-height: 40px; }
  .nav-cat-head { min-height: 40px; }
  .nav-item > .chev { width: 40px; height: 40px; margin: -10px -8px -10px -6px; }
  .foot-legal a { display: inline-block; padding: 8px 0; }
  .search { height: 42px; }

  /* bottoni, pillole, schede */
  .btn { height: 44px; }
  .btn-sm, .fc .btn.btn-sm { height: 38px; min-height: 38px; }
  .chip { min-height: 38px; padding: 6px 14px; }
  .seg button { min-height: 38px; padding-left: 15px; padding-right: 15px; }
  .btn-icon { width: 44px; height: 44px; }
  .nb-icon-btn { width: 44px; height: 44px; }
  .ui-menu button { min-height: 48px; }
  .ui-menu-tpl button { min-height: 0; }
  .recap-toggle { padding: 9px 16px; }
  .example summary { min-height: 44px; }

  /* interruttori e cursori più grandi: si prendono col pollice */
  .toggle { min-height: 40px; }
  .toggle input { width: 46px; height: 28px; border-radius: 28px; }
  .toggle input::after { width: 24px; height: 24px; }
  .toggle input:checked::after { transform: translateX(18px); }
  input[type=range] { height: 36px; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11.5px; }
  input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }

  /* palestra */
  .pr-subj-b, .pr-unit-b { min-height: 40px; }

  /* home: pulsanti piccoli accanto alla data; una lezione con una sola materia si
     apre toccando tutta la riga, non solo il nome */
  .cal-next-chip { height: 40px; }
  .cal-lessons li { position: relative; min-height: 40px; }
  .cal-lessons .cal-l-n > span > a:only-of-type::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
  .cal-lessons em { font-size: 12px; }

  /* palestra: tasti delle costanti della calcolatrice */
  .calc-const button { min-height: 36px; padding: 4px 12px; font-size: 13.5px; }
  .calc-keys button { height: 46px; }

  /* calendario */
  .wk-add { height: 40px; padding: 0 14px; }
  .cal-check { position: relative; }
  .cal-check::after { content: ""; position: absolute; inset: -10px; }

  /* attività */
  .at-cat { height: 38px; padding: 0 13px; }
  .at-when input[type="date"], .at-set input[type="date"] { height: 40px; }
  .at-check { position: relative; }
  .at-check::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .at-del { width: 40px; height: 40px; }

  /* registro */
  .rg-check { position: relative; }
  .rg-check::after { content: ""; position: absolute; inset: -9px; }
  .rg-cal { height: 36px; padding: 0 12px; font-size: 13px; }
  .rg-schip { height: 38px; }

  /* timer */
  .tm-amb-b { height: 40px; padding: 0 15px; }
  .tm-mode button { min-height: 40px; }

  /* finanze */
  .fn-del { width: 40px; height: 40px; }
  .fn-pg-hist .fn-del { width: 36px; height: 36px; }
  .fn-row-ctl select { height: 36px !important; }
  .fin input:not([type="checkbox"]):not([type="file"]), .fin select { height: 44px; }
  .fn-check input { width: 22px; height: 22px; }

  /* cerca ovunque */
  .sx-filters button { min-height: 38px; }
  .sx-close { min-height: 36px; padding: 6px 12px; }

  /* calcolatrice */
  .cl-tabs button { height: 38px; }
  .cl-pill-x { width: 40px; height: 40px; }

  /* quaderno: pagine a mano */
  .ink-pagemenu { width: 44px; height: 40px; }
  .ink-delpage { padding: 10px 6px; }

  /* codice (iPad) */
  .cd-rowmore { width: 36px; height: 36px; }
  .cd-ib.sm { width: 36px; height: 36px; }
}

/* ==========================================================================
   Barra in alto sul telefono: Cerca come il «⋯», stessa forma e stesso colore
   ========================================================================== */
@media (max-width: 720px) {
  .topbar .top-search { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--fill-2); color: var(--ink-2); }
  .topbar .top-search svg { width: 19px; height: 19px; }
  .topbar .top-search + .top-more { margin-left: 2px; }
  .topbar { gap: 8px; }
}

/* ==========================================================================
   Simulazioni: il dito sopra il disegno fa scorrere la pagina
   (prima il canvas bloccava lo scorrimento, e sul telefono è largo quanto lo schermo)
   ========================================================================== */
.sim-stage canvas { touch-action: pan-x pan-y; }
/* telefono: play e azzera sopra, i cursori sotto a tutta larghezza (prima stavano in
   una colonna stretta accanto ai bottoni, difficili da muovere col pollice) */
@media (max-width: 560px) {
  .sim-bar { gap: 10px 18px; }
  .sim-controls { flex-basis: 100%; gap: 6px 22px; }
}

/* ==========================================================================
   Menu laterale (telefono e iPad in verticale)
   ========================================================================== */
@media (max-width: 980px) {
  .sidebar { width: min(calc(var(--sidebar-w) + var(--sal)), 86vw); overscroll-behavior: contain; will-change: transform; }
  body.nav-open .sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, 0.22); }
  .nav { overscroll-behavior: contain; }
  /* il velo non lascia scorrere la pagina sotto */
  .scrim { touch-action: none; }
  /* durante il trascinamento col dito niente animazioni: segue il dito */
  body.nav-drag .sidebar, body.nav-drag .scrim { transition: none; }
  body.nav-drag .scrim { pointer-events: auto; }
}
/* schermi bassi (telefono di lato, iPhone piccoli): scorre tutto il menu,
   non solo l'elenco stretto tra la ricerca e il piede */
@media (max-width: 980px) and (max-height: 740px) {
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav { flex: none; overflow: visible; }
  .sidebar-foot { margin-top: auto; }
}

/* ==========================================================================
   Scorrimento: i riquadri interni non trascinano la pagina quando arrivano in fondo
   ========================================================================== */
.nb-modal, .ui-menu, .sync-list, .table-wrap, .katex-display, .formula, .ink-tools, .sx-filters { overscroll-behavior: contain; }
.table-wrap { -webkit-overflow-scrolling: touch; }
/* con una finestra aperta la pagina sotto resta ferma */
@media (pointer: coarse) {
  html:has(body > .nb-modal-back) { overflow: hidden; }
}

/* ==========================================================================
   Finestre come fogli dal basso sul telefono (classe .is-sheet messa da ui.js)
   ========================================================================== */
.nb-modal-back.is-sheet {
  place-items: end center;
  padding: calc(12px + var(--sat, 0px)) var(--sar, 0px) var(--kb-h, 0px) var(--sal, 0px);
  transition: opacity 0.2s, padding-bottom 0.25s var(--ease);
}
.nb-modal-back.is-sheet > .nb-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 12px - var(--sat, 0px) - var(--kb-h, 0px));
  border-radius: 22px 22px 0 0; border-bottom: 0;
  padding-top: 26px;
  padding-bottom: calc(18px + var(--sab, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
}
.kb-open .nb-modal-back.is-sheet > .nb-modal { padding-bottom: 14px; }
.nb-modal-back.is-sheet.in > .nb-modal { transform: none; }
.nb-modal-back.is-sheet.out > .nb-modal { transform: translateY(100%); transition-duration: 0.2s; }
.nb-modal-back.is-sheet.dragging > .nb-modal { transition: none; }
/* maniglia in alto: si trascina giù per chiudere */
.nb-modal-back.is-sheet > .nb-modal::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px;
  border-radius: 3px; background: var(--fill-3);
}
/* finestre senza margini interni (intestazione propria): la maniglia sta sopra */
.nb-modal-back.is-sheet > :is(.rg-notice-modal, .pl-modal, .ink-nav) { padding-top: 18px; }
/* conferme e domande: bottoni larghi uno accanto all'altro, alti come quelli di iOS */
.nb-modal-back.is-sheet .nb-ask .nb-modal-actions { flex-wrap: nowrap; margin-top: 20px; }
.nb-modal-back.is-sheet .nb-ask .nb-modal-actions > .btn { flex: 1 1 0; height: 50px; font-size: 16px; }
.nb-modal-back.is-sheet .ui-confirm h3 { font-size: 20px; }
@media (prefers-reduced-motion: reduce) {
  .nb-modal-back.is-sheet > .nb-modal { transition: none; transform: none; }
}

/* --- menu a comparsa come foglio dal basso sul telefono --- */
.ui-menu-scrim {
  position: fixed; inset: 0; z-index: 379; background: rgba(0, 0, 0, 0.38);
  opacity: 0; transition: opacity 0.18s; touch-action: none;
}
.ui-menu-scrim.in { opacity: 1; }
.ui-menu.is-sheet {
  left: calc(8px + var(--sal, 0px)) !important; right: calc(8px + var(--sar, 0px)); top: auto !important;
  bottom: calc(8px + var(--sab, 0px) + var(--kb-h, 0px));
  width: auto; min-width: 0; max-width: 560px; margin: 0 auto;
  max-height: calc(100dvh - 24px - var(--sat, 0px) - var(--sab, 0px) - var(--kb-h, 0px)) !important;
  padding: 22px 8px 8px; border-radius: 20px;
  transform: translateY(calc(100% + 16px)); opacity: 1; transform-origin: bottom center;
  transition: transform 0.3s var(--ease);
}
.ui-menu.is-sheet.in { transform: none; }
.ui-menu.is-sheet.dragging { transition: none; }
.ui-menu.is-sheet::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px;
  border-radius: 3px; background: var(--fill-3);
}
.ui-menu.is-sheet button { min-height: 50px; font-size: 16px; padding: 0 12px; }
.ui-menu.is-sheet .ui-menu-label small { font-size: 13px; }
.ui-menu.is-sheet.ui-menu-tpl button { min-height: 50px; padding: 8px 12px; margin: 1px 0; align-items: center; gap: 14px; }
.ui-menu.is-sheet.ui-menu-tpl button:has(small) { min-height: 58px; padding: 10px 12px; }
.ui-menu.is-sheet.ui-menu-tpl .ui-menu-label { gap: 2px; }
.ui-menu.is-sheet.ui-menu-tpl .ui-menu-label small { line-height: 1.3; }
.ui-menu.is-sheet.ui-menu-tpl .ui-menu-ic { margin-top: 0; }
.ui-menu.is-sheet .ui-menu-head { padding: 12px 12px 6px; }
@media (prefers-reduced-motion: reduce) { .ui-menu.is-sheet { transition: none; } }

/* ==========================================================================
   iPad in verticale: il timer accanto alle statistiche invece che in fila
   (lo schermo è largo abbastanza e così si vede tutto senza scorrere)
   ========================================================================== */
@media (min-width: 760px) and (max-width: 899px) {
  .tm-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .tm-main { position: sticky; top: calc(64px + var(--sat, 0px)); }
}

/* ==========================================================================
   Avvisi: sopra la barra della Home e lontani dai bordi con la tacca
   ========================================================================== */
@media (max-width: 600px) {
  .toast { max-width: calc(100vw - 32px - var(--sal, 0px) - var(--sar, 0px)); text-align: center; line-height: 1.35; padding: 11px 18px; }
}

/* ==========================================================================
   Lezioni lunghe: le sezioni fuori dallo schermo non si disegnano finché non
   ci si arriva (meno lavoro al primo caricamento su telefono e iPad)
   ========================================================================== */
.view .block + .block { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* lo stesso per le pagine lunghe, pronte in anticipo (app.js): entrando si dispone solo ciò che
   si vede. La pagina di fisica (7 000 elementi, formule nei ripassi) impiegava ~1 s a ogni visita
   solo per disporsi, le flashcard ~0,3 s (CPU rallentata 4 volte, come un telefono lento) */
.view .unit-section, .view .fc-subject { content-visibility: auto; contain-intrinsic-size: auto 640px; }
@media print { .view .block + .block, .view .unit-section, .view .fc-subject { content-visibility: visible; } }