/* ------------------------------------------------------------------
   scheda-print.css
   Foglio condiviso dalle schede in /esercizi/**.
   Va collegato DOPO il blocco <style> interno della scheda, altrimenti
   le variabili del tema scuro vincono per ordine di cascata.

       <link rel="stylesheet" href="/css/scheda-print.css">

   Sullo schermo definisce solo la coppia .solo-stampa / .solo-schermo
   e la riga di download in fondo alla pagina.
   Tutto il resto vive dentro @media print.
   ------------------------------------------------------------------ */

.solo-stampa { display: none !important; }

/* Riga di congedo con il link al PDF, in fondo alla scheda. */
.azioni-scheda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: baseline;
  margin: 2.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bordo, var(--line, rgba(0, 0, 0, .18)));
  font-size: .92rem;
}
.azioni-scheda a,
.azioni-scheda button {
  font-family: inherit;
  font-size: inherit;
  color: var(--matita-blu, var(--pri, #2f5bea));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.azioni-scheda a:hover,
.azioni-scheda button:hover { color: var(--penna-rossa, var(--acc, #c0392b)); }
.azioni-scheda a:focus-visible,
.azioni-scheda button:focus-visible {
  outline: 2px solid var(--matita-blu, var(--pri, #2f5bea));
  outline-offset: 3px;
}


/* ==================================================================
   STAMPA
   ================================================================== */
@media print {

  /* --- Tavolozza: sempre chiara, anche se il sistema è in dark mode.
         Il prefisso html serve ad alzare la specificità sopra le regole
         inline della scheda. ------------------------------------- */
  html:root,
  html:root:not([data-theme="light"]),
  html:root[data-theme="dark"] {
    color-scheme: light;
    --carta: #FFFFFF;
    /* Serve sia allo sfondo a quadretti, spento più sotto con
       background-image:none, sia alle griglie dentro gli SVG, che invece
       devono restare visibili: un grigio troppo chiaro sparisce in stampa. */
    --quadretto: #BCCAD6;
    --inchiostro: #14242F;
    --inchiostro-tenue: #5A6B78;
    --penna-rossa: #B03A2A;
    --matita-blu: #2F5D96;
    --verde: #24695A;
    --evidenziatore: rgba(242, 212, 121, .55);
    --foglio: #FFFFFF;
    --bordo: rgba(20, 36, 47, .28);
    --velo: rgba(47, 93, 150, .06);
  }

  @page {
    size: A4;
    margin: 17mm 15mm 16mm;
  }

  /* --- Impaginato. Lo sfondo bianco vale per qualunque scheda. ------ */
  html:root body {
    background: #fff;
    background-image: none;
  }

  /* Da qui in giù è tipografia tarata sulle schede impaginate a foglio.
     Le misure sono legate a .foglio e non a body, così una scheda con un
     impianto grafico proprio può collegare comunque questo file per la
     meccanica condivisa senza ereditarne i corpi del testo. */
  html:root .foglio {
    max-width: none;
    margin: 0;
    padding: 0 0 0 .7rem;
    background: #fff;
    box-shadow: none;
    border-left: 1.5pt solid var(--penna-rossa);
    font-size: 10.6pt;
    line-height: 1.48;
  }

  /* :where() delimita senza pesare: la specificità resta quella del solo
     h2, p o .formula. Serve perché dentro le schede ci sono riquadri con
     margini propri (.regola p, .promemoria h3, .passi .formula) che devono
     continuare a vincere su queste misure generali, come a schermo. */
  :where(.foglio) h1 { font-size: 23pt; margin-bottom: .2rem; }
  :where(.foglio) .sottotitolo { font-size: 10.5pt; margin-bottom: 1.4rem; max-width: none; }
  :where(.foglio) h2 { font-size: 14.5pt; margin: 1.5rem 0 .45rem; padding-top: .7rem; }
  :where(.foglio) h3 { font-size: 11pt; margin: 1rem 0 .25rem; }
  :where(.foglio) p  { max-width: none; margin-bottom: .55rem; }
  :where(.foglio) .formula { margin: .8rem 0; font-size: 11.6pt; }
  :where(.foglio) .formula.chiave { margin: 1rem 0; padding: .55rem .3rem; }

  /* --- Visibilità condizionata. ------------------------------------ */
  .solo-stampa  { display: block !important; }
  .solo-schermo { display: none  !important; }
  .azioni-scheda { display: none !important; }

  /* --- Il laboratorio interattivo diventa una figura svolta.
         Spariscono i comandi, restano il disegno, il verdetto e la
         griglia di lettura, che al caricamento mostrano già un esempio
         completo. --------------------------------------------------- */
  .comandi,
  .lab-azioni,
  .coord-input { display: none !important; }

  .lab {
    border: 0;
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    padding: .9rem 0 1rem;
    margin: 1rem 0 1.2rem;
    /* Disegno, verdetto e valori letti vanno guardati insieme: se il
       blocco si spezza, la griglia di lettura resta orfana sulla pagina
       dopo. Il grafico è dimensionato sotto perché l'insieme ci stia. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .lab svg {
    display: block;
    width: 100%;
    max-width: 13cm;
    height: auto;
    margin: 0 auto;
  }

  #verdetto { margin-top: .7rem; font-size: 10.2pt; }
  .lettura  { margin-top: .8rem; padding-top: .7rem; font-size: 9.8pt; }

  /* Didascalia riservata alla carta, da inserire dentro .lab. */
  .nota-stampa {
    margin: .7rem 0 0;
    font-size: 9.4pt;
    font-style: italic;
    color: var(--inchiostro-tenue);
  }

  /* --- Colori: senza questo Chrome scarta sfondi e campiture, quindi
         perderebbe l'evidenziatore, la griglia dei piani cartesiani e
         le aree colorate delle figure. ------------------------------ */
  svg, .formula.chiave, .promemoria, .avviso, .casi, .caso,
  .evidenziatore, .tabella-stretta, table, .idea, .errori, .regola {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- Interruzioni di pagina. ------------------------------------- */
  h1, h2, h3 { break-after: avoid-page; page-break-after: avoid; }
  h2 { break-before: auto; }

  /* Il cappello che introduce una figura deve viaggiare con la figura,
     altrimenti resta in fondo alla pagina precedente a presentare il
     vuoto. Vale per il testo da stampa dei laboratori e per le
     didascalie che precedono una figure. */
  h2.solo-stampa + p.solo-stampa,
  h3.solo-stampa + p.solo-stampa {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  figure, .formula, .lettura, .promemoria, .casi, .caso, .avviso,
  .passi > li, .sistema, .regola, .idea, .errori, .conto, .ruffini,
  .tartaglia, .tabella-stretta, table, tr, .esempio, .es {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  figcaption { font-size: 9.4pt; }

  /* Orfane e vedove: mai una riga sola isolata a cavallo di pagina. */
  p, li { orphans: 3; widows: 3; }

  /* --- Il colophon chiude la scheda, non deve restare solo. -------- */
  .colophon {
    break-before: avoid;
    margin-top: 1.6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--bordo);
    font-size: 9pt;
    color: var(--inchiostro-tenue);
  }

  /* --- Niente transizioni o effetti residui. ----------------------- */
  * { transition: none !important; animation: none !important; }
}