/* JW Answer — quel che Tailwind da CDN non copre bene: componenti ricorrenti,
   barre di scorrimento, animazioni. La palette resta quella di tailwind.config. */

:root {
  --jw-bg:        #0E0E10;
  --jw-bg2:       #121212;
  --jw-card:      #1C1C1E;
  --jw-line:      #2C2C2E;
  --jw-green:     #3D5A45;
  --jw-green-2:   #2F4837;
  --jw-accent:    #4A82E2;
  --jw-accent-h:  #3468C8;
  --jw-accent-l:  #7BA5EC;
  --jw-muted:     #A1A1AA;
  --jw-box:       #18181A;
  --jw-box-line:  #3A3A3C;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--jw-bg); }

/* ── iPhone: notch, Dynamic Island e barra Home ───────────────────────────
   Con `viewport-fit=cover` la pagina arriva sotto tutto, quindi lo spazio se
   lo deve prendere il contenuto. `env()` vale zero ovunque non serva, quindi
   queste regole non fanno danni su desktop.                                  */
:root {
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
}

body {
  padding-left: var(--sa-left);
  padding-right: var(--sa-right);
  /* In standalone il rimbalzo elastico scopre il fondo bianco del sistema. */
  overscroll-behavior-y: none;
}

/* Le intestazioni appiccicate stanno sotto la barra di stato, non sopra */
header.sticky, #sheet .sticky, #study-pane .sticky { top: var(--sa-top); }
main > div > header:first-child { padding-top: var(--sa-top); }

/* La barra in basso lascia passare la barra Home */
#nav-mobile { padding-bottom: var(--sa-bottom); }
#sheet { padding-bottom: var(--sa-bottom); }

/* Il contenuto non finisce sotto la barra di navigazione */
@media (max-width: 767px) {
  main { padding-bottom: calc(5rem + var(--sa-bottom)); }
}

/* Niente ingrandimento al doppio tocco, niente evidenziazione grigia al tocco */
button, a, .comment-box, .scrip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* iOS ingrandisce la pagina se un campo ha meno di 16px: qui non deve succedere */
input, textarea, select { font-size: 16px; }

/* Installata sulla Home: niente selezione accidentale trascinando, come in un'app */
@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  .article-body, .option-text, #scripture-text { user-select: text; -webkit-user-select: text; }
}

#gate.is-on { display: flex; }
#gate { padding-top: calc(var(--sa-top) + 1rem); padding-bottom: calc(var(--sa-bottom) + 1rem); }

/* ── Barre di scorrimento sottili, come nell'app ──────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--jw-box-line) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--jw-box-line); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #4a4a4c; }

/* ── Pulsanti icona ───────────────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  color: var(--jw-muted); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--jw-line); color: #fff; }
.icon-btn:active { background: var(--jw-box-line); }

/* ── Voci di navigazione ─────────────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .625rem;
  color: var(--jw-muted); font-size: .9375rem; font-weight: 500;
  transition: background .15s, color .15s;
  width: 100%; text-align: left;
}
.nav-item:hover { background: var(--jw-line); color: #fff; }
.nav-item[aria-current="page"] { background: rgba(74,130,226,.16); color: var(--jw-accent-l); }
.nav-item[aria-current="page"] svg { color: var(--jw-accent); }

.nav-mobile-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1875rem; padding: .5rem .25rem .625rem;
  color: var(--jw-muted); font-size: .625rem; line-height: 1.1; font-weight: 500;
  text-align: center;
}
.nav-mobile-item[aria-current="page"] { color: var(--jw-accent); }

/* Barra ridotta: spariscono le etichette, restano le icone */
#sidebar.is-collapsed { width: 4.25rem; }
#sidebar.is-collapsed .nav-label { display: none; }
#sidebar.is-collapsed .nav-item { justify-content: center; padding-inline: 0; }

/* ── Superfici ───────────────────────────────────────────────────────────── */
.card {
  background: var(--jw-card);
  border: 1px solid var(--jw-line);
  border-radius: .875rem;
}
.card-hover:hover { border-color: var(--jw-box-line); background: #202022; }

/* ── Il riquadro del commento sotto ogni domanda ─────────────────────────── */
.comment-box {
  background: var(--jw-box);
  border: 1px solid var(--jw-box-line);
  border-radius: .625rem;
  transition: border-color .15s, background .15s;
}
.comment-box:hover { border-color: var(--jw-accent-h); }
.comment-box.is-open { border-color: var(--jw-accent); }

/* ── Scritture cliccabili dentro il testo ────────────────────────────────── */
.scrip {
  color: var(--jw-accent);
  border-bottom: 1px solid rgba(74,130,226,.4);
  cursor: pointer;
  white-space: nowrap;
}
.scrip:hover { color: var(--jw-accent-l); border-bottom-color: var(--jw-accent-l); }
.scrip.is-read { font-weight: 600; }

/* ── Numero del paragrafo, in apice come sulla rivista ───────────────────── */
.par-num {
  color: var(--jw-muted);
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: super;
  margin-right: .25rem;
}

/* ── Il riquadro «IN QUESTO ARTICOLO» ────────────────────────────────────── */
.box-supplement {
  background: var(--jw-box);
  border: 1px solid var(--jw-line);
  border-left: 3px solid var(--jw-accent);
  border-radius: .625rem;
}

/* ── Testo dell'articolo ─────────────────────────────────────────────────── */
.article-body { font-size: 1.0625rem; line-height: 1.75; color: rgba(255,255,255,.92); }
.article-body p + p { margin-top: .875rem; }

/* ── Il foglio a comparsa ────────────────────────────────────────────────── */
/* Lo scorrimento sta qui e non fra le classi di Tailwind: due regole che
   scrivono `transform` sullo stesso elemento si erano già pestate i piedi. */
#sheet { transform: translateY(100%); transition: transform .3s ease; }
#sheet.is-open { transform: translateY(0); }

/* ── Testo modificabile del commento ─────────────────────────────────────── */
.option-text {
  width: 100%; resize: none; overflow: hidden;
  background: transparent; color: rgba(255,255,255,.92);
  border: 1px solid transparent; border-radius: .5rem;
  padding: .375rem .5rem; margin: -.375rem -.5rem;
  font: inherit; line-height: 1.65;
}
.option-text:hover { border-color: var(--jw-line); }
.option-text:focus { outline: none; border-color: var(--jw-accent); background: rgba(0,0,0,.25); }

/* ── Attesa ──────────────────────────────────────────────────────────────── */
@keyframes jw-pulse { 0%,100% { opacity: .35 } 50% { opacity: .8 } }
.skeleton { background: var(--jw-line); border-radius: .5rem; animation: jw-pulse 1.4s ease-in-out infinite; }

.spin { animation: jw-spin .9s linear infinite; }
@keyframes jw-spin { to { transform: rotate(360deg) } }

#toast.is-on { opacity: 1; }