/* =========================================================================
   PAITHON BOOK — FORMATO
   Scheda del repository sopra l'indice, logo compatto in barra, e le azioni
   che compaiono selezionando un pezzo di testo.

   I colori arrivano tutti dai token del brand (book/_static/brand/tokens.css):
   il tema scuro ridefinisce le stesse variabili, quindi qui non serve un solo
   blocco `[data-theme="dark"]`.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Barra in alto: restano ricerca e chiaro/scuro.
   Il pulsante "tutto schermo" è già disattivato da `use_fullscreen_button:
   false` in _config.yml; la regola qui sotto è la rete di sicurezza nel caso
   una versione del tema lo reintroduca — sul sito non funziona.
   ------------------------------------------------------------------------- */
.bd-header-article .fullscreen-button,
.header-article-items .fullscreen-button,
button.fullscreen-button {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Logo compatto nella barra dell'articolo (template pt-logo-compatto.html).
   Compare SOLO dove la sidebar è chiusa — sotto il breakpoint `lg` del tema,
   992px: sopra, il logo della sidebar è già lì e questo sarebbe un doppione.
   ------------------------------------------------------------------------- */
.pt-logo-barra {
  display: none;
}

@media (max-width: 991.98px) {
  .pt-logo-barra {
    display: flex;
    align-items: center;
    min-width: 0;          /* si lascia comprimere prima di spingere le icone */
    margin-left: 0.35rem;
  }

  .pt-logo-barra a {
    display: flex;
    align-items: center;
    text-decoration: none !important;
  }

  .pt-logo-barra__img {
    height: 24px;
    width: auto;
    max-width: 100%;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* La freccia "link esterno" di custom.js qui non c'entra niente. */
  .pt-logo-barra .external-icon {
    display: none;
  }
}

@media (max-width: 380px) {
  .pt-logo-barra__img {
    height: 20px;
  }
}

/* -------------------------------------------------------------------------
   1. Scheda del repository (template _templates/pt-repo-card.html)
   ------------------------------------------------------------------------- */
.pt-repo-card {
  margin: 0.25rem 0.5rem 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--pt-border, #E2DCC9);
  border-radius: 6px;
  background: var(--pt-bg-elev, #FBF9F2);
  font-family: var(--pt-font-body, system-ui, sans-serif);
}

.pt-repo-card__main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--pt-fg, #1A1714) !important;
  text-decoration: none !important;
}

.pt-repo-card__main:hover {
  color: var(--pt-accent, #A44B28) !important;
}

/* La freccia "link esterno" iniettata da custom.js qui sarebbe rumore. */
.pt-repo-card .external-icon {
  display: none;
}

.pt-repo-card__mark {
  flex: 0 0 auto;
  opacity: 0.85;
}

.pt-repo-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pt-repo-card__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-fg-subtle, #6A645B);
}

.pt-repo-card__slug {
  font-family: var(--pt-font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-repo-card__stats {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pt-border, #E2DCC9);
  font-size: 0.72rem;
  color: var(--pt-fg-subtle, #6A645B);
}

.pt-repo-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pt-repo-card__stat svg {
  opacity: 0.7;
}

.pt-repo-card__stat-label {
  opacity: 0.8;
}

/* La versione del libro: informativa, non un invito a cliccare, quindi niente
   sottolineatura fino al passaggio del mouse. */
.pt-repo-card__versione {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--pt-font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--pt-fg-subtle, #6A645B) !important;
  text-decoration: none !important;
  width: fit-content;
}

.pt-repo-card__versione:hover {
  color: var(--pt-accent, #A44B28) !important;
}

.pt-repo-card__issues {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--pt-fg-subtle, #6A645B) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--pt-border-strong, #C5BEAA);
  width: fit-content;
}

.pt-repo-card__issues:hover {
  color: var(--pt-accent, #A44B28) !important;
  border-bottom-color: var(--pt-accent, #A44B28);
}

/* -------------------------------------------------------------------------
   2. Azioni sulla selezione: "Chiedi all'AI" e "Segnala"
   ------------------------------------------------------------------------- */
.pt-azioni {
  position: fixed;
  z-index: 1200;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;                /* le voci non sbordano dagli angoli tondi */
  border: 1px solid var(--pt-accent, #A44B28);
  border-radius: 999px;
  background: var(--pt-accent, #A44B28);
  font-family: var(--pt-font-body, system-ui, sans-serif);
  box-shadow: 0 6px 18px rgba(26, 23, 20, 0.22);

  /* La visibilità è governata SOLO dall'attributo `hidden` (regola qui sotto),
     mai dall'opacità: una transizione di opacità non avanza dove il browser
     non produce fotogrammi — scheda in secondo piano, rendering headless,
     throttling aggressivo — e la pillola resterebbe invisibile per sempre.
     Qui l'animazione è puro ornamento: se non parte, si perde uno scarto di
     quattro pixel e nient'altro. */
  transform: translateY(4px) scale(0.97);
  transition: transform 0.14s ease;
}

/* `display: inline-flex` qui sopra vince sul `[hidden] { display: none }` dello
   user-agent (stessa specificità, ma è una regola d'autore): senza questa
   riga la pillola a opacità zero resterebbe nel flusso e continuerebbe a
   intercettare i click nel punto dove era comparsa l'ultima volta. */
.pt-azioni[hidden] {
  display: none !important;
}

.pt-azioni--visibile {
  transform: translateY(0) scale(1);
}

.pt-azioni__voce {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  background: transparent;
  color: #F8F5EE;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* Un filo di separazione fra le due voci, non un bordo pieno. */
.pt-azioni__voce + .pt-azioni__voce {
  box-shadow: inset 1px 0 0 rgba(248, 245, 238, 0.28);
}

.pt-azioni__voce:hover {
  background: var(--pt-accent-hover, #9A4222);
}

.pt-azioni__voce:focus-visible {
  outline: 2px solid var(--pt-fg, #1A1714);
  outline-offset: 2px;
}

.pt-azioni__voce svg {
  flex: 0 0 auto;
}

/* Il minimo tap target imposto da custom.js a tutti i bottoni qui sformerebbe
   la pillola: la si riporta all'altezza del testo. */
.pt-azioni,
.pt-azioni__voce {
  min-height: 0 !important;
}

/* Variante ancorata: su touch la pillola vive in basso al centro, fuori dai
   piedi del menu di selezione di sistema. C'è spazio, quindi l'etichetta
   resta: una matita sola non si capirebbe. */
.pt-azioni--ancorata {
  left: 50%;
  top: auto !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 4px) scale(0.97);
}

/* Con le dita i bersagli devono essere piu' grandi: il padding cresce sulle
   voci, non sul contenitore, altrimenti la pillola si sforma. */
.pt-azioni--ancorata .pt-azioni__voce {
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
}

.pt-azioni--ancorata.pt-azioni--visibile {
  transform: translate(-50%, 0) scale(1);
}

@media print {
  .pt-azioni,
  .pt-repo-card {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-azioni {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   3. Interruttore del livello di lettura (template pt-livello.html)
   L'icona commuta su `data-pt-livello` di <html>, come sole e luna del tema.
   ------------------------------------------------------------------------- */
.pt-livello__bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pt-livello__icona {
  display: none;
}

html:not([data-pt-livello="superiore"]) .pt-livello__icona--elementare,
html[data-pt-livello="superiore"] .pt-livello__icona--superiore {
  display: block;
}

.pt-livello__testo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* Su schermo piccolo la barra ospita già il logo: resta la sola icona, con
   il nome del livello nel `title` e nell'aria-label. */
@media (max-width: 991.98px) {
  .pt-livello__testo {
    display: none;
  }
}

/* Un filo d'aria a sinistra: e' l'ultimo della fila e non deve incollarsi
   all'icona precedente. */
.pt-livello {
  margin-left: 0.15rem;
}

/* I colori sono quelli delle linguette (tabs-enhanced.css): Elementare verde
   petrolio, Superiore terracotta. Passano dagli alias del tema — quindi in
   dark mode diventano da soli le varianti più chiare, #5BA39C e #E27B52, che
   sul fondo scuro si leggono. Le barrette usano `currentColor`, quindi basta
   colorare il pulsante perché seguano icona e parola. */
html:not([data-pt-livello="superiore"]) .pt-livello__bottone {
  color: var(--accent-color, #1F5E58);
}

html[data-pt-livello="superiore"] .pt-livello__bottone {
  color: var(--primary-color, #A44B28);
}

/* -------------------------------------------------------------------------
   4. "Esegui il codice" (template pt-notebook.html): porta il notebook
   compagno della pagina su Colab. Compare solo dove il notebook esiste.
   ------------------------------------------------------------------------- */
.pt-notebook {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  min-width: 0;
}

.pt-notebook__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--pt-border-strong, #C5BEAA);
  border-radius: 999px;
  color: var(--pt-fg-muted, #5A524A) !important;
  font-family: var(--pt-font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.pt-notebook__link:hover {
  color: var(--pt-accent, #A44B28) !important;
  border-color: var(--pt-accent, #A44B28);
}

/* La freccia "link esterno" di custom.js qui è rumore. */
.pt-notebook .external-icon {
  display: none;
}

/* Su schermo piccolo la barra ha già hamburger e logo: resta il solo triangolo,
   col titolo che spiega. */
@media (max-width: 767.98px) {
  .pt-notebook__testo {
    display: none;
  }

  .pt-notebook__link {
    padding: 0.3rem 0.42rem;
  }
}

/* -------------------------------------------------------------------------
   5. La lente: la figura a schermo intero, ingrandibile (custom.js)

   Le figure del libro sono diagrammi con del testo dentro (nomi di layer,
   etichette degli assi, formule), disegnato intorno ai 13px su un `viewBox`
   largo. Schiacciato nella colonna di un telefono quel testo scende sotto i
   sei pixel: la figura si vede, non si legge, e un `{numref}` che la richiama
   dal testo va a vuoto. Qui si tocca e si apre a schermo intero, con lo zoom.

   Il meccanismo esisteva già a metà: Sphinx avvolge ogni immagine di figura in
   un link all'originale. Restava invisibile, e apriva una scheda nuova. La
   lente intercetta quel link; senza JavaScript il link resta quello di prima e
   funziona come prima.
   ------------------------------------------------------------------------- */

/* --- Il segnale sulla figura --------------------------------------------- */
/* Una figura che si può aprire deve dirlo, o non la apre nessuno. Su desktop
   compare passandoci sopra; dove non esiste un puntatore resta sempre visibile,
   perché lì non c'è nessun "sopra" in cui farlo comparire. */
.bd-article figure a.image-reference {
  position: relative;
  display: block;
  cursor: zoom-in;
}

.pt-figura-segno {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--pt-border, #E2DCC9);
  background: var(--pt-bg-elev, #FBF9F2);
  color: var(--pt-fg-muted, #5A524A);
  box-shadow: 0 1px 4px rgba(26, 23, 20, 0.16);
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  pointer-events: none;          /* il bersaglio è il link, non il bollo */
}

@media (hover: hover) {
  figure a.image-reference:hover .pt-figura-segno,
  figure a.image-reference:focus-visible .pt-figura-segno {
    opacity: 1;
    color: var(--pt-accent, #A44B28);
    border-color: var(--pt-accent, #A44B28);
  }
}

@media (hover: none) {
  .pt-figura-segno {
    opacity: 0.85;
  }
}

/* --- Il visore ------------------------------------------------------------ */
/* È un <dialog> aperto con showModal(): da lì arrivano gratis la chiusura con
   Esc, il focus che non scappa dietro al velo e il ::backdrop. */
dialog.pt-lente {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--pt-bg, #F8F5EE);
  color: var(--pt-fg, #1A1714);
  overflow: hidden;
}

dialog.pt-lente::backdrop {
  background: rgba(26, 23, 20, 0.82);
}

.pt-lente__scena {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* I gesti li governa custom.js: senza questo il browser interpreta il
     trascinamento come uno scorrimento della pagina sotto e la figura scappa
     via mentre la si sposta. */
  touch-action: none;
  cursor: grab;
}

.pt-lente__scena[data-pt-trascina="si"] {
  cursor: grabbing;
}

/* `width`/`height` espliciti, non `max-*`: le SVG del libro dichiarano
   `width="100%"` e nessuna altezza, quindi non hanno una dimensione
   intrinseca da cui il browser possa dedurre il riquadro, e dentro un
   contenitore flex collasserebbero al default di 300px. Con il riquadro pari
   alla scena ci pensa `object-fit: contain` a rispettare le proporzioni.
   Il tema inverte già le immagini in tema scuro (`image_dark_mode.css`), e
   questa è un `img` come le altre: la figura nel visore si vede come nella
   pagina, senza che qui serva ripetere niente. */
.pt-lente__figura {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;        /* qui la trasformazione c'è davvero */
  user-select: none;
  -webkit-user-drag: none;
}

/* --- La barra del visore -------------------------------------------------- */
.pt-lente__barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  background: linear-gradient(to bottom,
              color-mix(in srgb, var(--pt-bg, #F8F5EE) 92%, transparent),
              transparent);
}

.pt-lente__spazio {
  flex: 1 1 auto;
}

/* 2.75rem = 44px, il bersaglio minimo per un dito. Su una barra di comandi
   che si usa quasi solo col dito non ha senso partire più piccoli e allargare
   dopo. */
.pt-lente__comando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--pt-border, #E2DCC9);
  border-radius: 8px;
  background: var(--pt-bg-elev, #FBF9F2);
  color: var(--pt-fg, #1A1714);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.pt-lente__comando:hover {
  border-color: var(--pt-accent, #A44B28);
  color: var(--pt-accent, #A44B28);
}

.pt-lente__comando:focus-visible {
  outline: 2px solid var(--pt-accent, #A44B28);
  outline-offset: 2px;
}

.pt-lente__scala {
  min-width: 3.4rem;
  font-family: var(--pt-font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--pt-fg-muted, #5A524A);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- La didascalia -------------------------------------------------------- */
/* Resta sotto la figura anche qui: una figura senza la sua frase è un disegno,
   e nel libro è un'affermazione. */
.pt-lente__didascalia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 30dvh;
  overflow-y: auto;
  padding: 0.9rem clamp(1rem, 4vw, 2rem) calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top,
              color-mix(in srgb, var(--pt-bg, #F8F5EE) 94%, transparent) 60%,
              transparent);
  font-family: var(--pt-font-body, system-ui, sans-serif);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--pt-fg-muted, #5A524A);
}

.pt-lente__didascalia:empty {
  display: none;
}

/* Mentre il visore è aperto la pagina sotto non scorre: su telefono, senza,
   il trascinamento che finisce fuori dalla figura si propaga e alla chiusura
   ci si ritrova in un altro punto del capitolo. */
html.pt-lente-aperta,
html.pt-lente-aperta body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .pt-figura-segno,
  .pt-lente__comando {
    transition: none;
  }
}

@media print {
  dialog.pt-lente,
  .pt-figura-segno {
    display: none !important;
  }
}