/* desktop.css – layout per schermi grandi (estende tablet.css) */
/* Caricato solo per: screen and (min-width: 769px) */

body {
  background: var(--c-surface-lowest);
  display: block;
}

/* .app-shell centrata nella pagina, larghezza più ampia per PC */
.app-shell {
  max-width: 800px;
  width: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  overflow: hidden;
}

/* Allarghiamo anche gli overlay e popup alla stessa dimensione */
.overlay-content,
.notes-editor-shell,
.notes-selection-bar__inner,
.install-popup,
.notes-batch-tag-sheet,
.disp-drawer {
  max-width: 800px;
  margin: 0 auto;
}

/* Aggiustamento posizione FAB per la shell da 800px (metà = 400px) */
.disp-fab, 
.notes-fab {
  right: calc(max(0px, 50vw - 400px) + 20px);
}

/* Su schermi molto larghi, espandiamo un po' di più */
@media (min-width: 1200px) {
  .app-shell,
  .overlay-content,
  .notes-editor-shell,
  .notes-selection-bar__inner,
  .install-popup,
  .notes-batch-tag-sheet,
  .disp-drawer {
    max-width: 960px;
  }
  
  .disp-fab, 
  .notes-fab {
    right: calc(max(0px, 50vw - 480px) + 20px);
  }
}

/* JWQuiz Text */
.jwt-quiz-text {
  font-size: 14px;
  color: var(--c-on-surface);
  text-align: center;
  margin-top: 8px;
  margin-bottom: auto;
  line-height: 1.4;
}