/* =========================================================================
   PAITHON BOOK — LA RICERCA
   Il pannello dei risultati che compare mentre si scrive. Il motore sta in
   `pt-ricerca.js`; qui c'è solo l'aspetto.

   I colori sono tutti token del brand (`_static/brand/tokens.css`), che si
   ribaltano da soli in tema scuro: qui non c'è nessuna regola
   `[data-theme="dark"]`, ed è voluto.
   ========================================================================= */

/* La finestra del tema è pensata per contenere solo il campo di ricerca:
   diventa una colonna, così i risultati scorrono e il campo resta in cima.

   IL POSIZIONAMENTO SI RIFÀ DA ZERO, e non è pignoleria: è la riparazione del
   difetto più lungo di questa funzione. Il tema con cui il sito è pubblicato
   piazza la finestra così:

       #pst-search-dialog[open] { top: 30%; left: 50%;
                                  transform: translate(-50%, -50%); }

   cioè la CENTRA sul 30% dell'altezza dello schermo. Con dentro solo un campo
   di ricerca sta in piedi; con dentro anche i risultati la finestra diventa
   alta, e metà di quell'altezza finisce sopra il bordo: misurato su un iPhone
   13 (schermo 664), la finestra alta 539 partiva da −54 e il campo in cui si
   scrive stava a −51, cioè fuori. Si scriveva senza poter rileggere.

   Sovrascrivere il margine non basta e non bastava: il `top` e la `transform`
   restavano. Qui si azzerano tutti e tre e la finestra si ancora in alto, che
   è deterministico e non dipende da quanto è alta.

   Perché non si vedeva provandolo: il tema installato in locale è più recente
   e quella regola non ce l'ha (usa `margin: 15vh auto 0`, senza `transform`).
   Stessa CSS, stessa altezza, stesso contenuto, e la finestra a +16 di qua e a
   −54 di là. Il collaudo adesso gira anche su WebKit, che è il motore di
   Safari, perché su Chromium questo difetto non esiste. */
#pst-search-dialog[open] {
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  transform: none;
  margin: 9vh auto auto;
  max-height: 78vh;    /* per i browser che non conoscono dvh */
  max-height: 78dvh;
  padding: 0;
  overflow: hidden;
  background-color: var(--pt-bg-elev);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-lg);
}

#pst-search-dialog[open] form.bd-search {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--pt-border);
  border-radius: 0;
  background-color: transparent;
  padding: 0.15rem 0.9rem;
}

/* L'anello che si accende attorno al campo quando ci si scrive dentro. Il
   tema lo fa con `--pst-color-accent`, che qui è l'ocra: un colore terziario,
   che sulla riga più visibile della finestra sembrava una sottolineatura
   gialla capitata lì. Va nel terracotta del marchio, che è l'accento vero.
   (Si vede solo sotto: i lati e la cima li taglia l'`overflow: hidden` della
   finestra, perché il campo sta appoggiato al bordo.) */
#pst-search-dialog[open] form.bd-search:focus-within {
  box-shadow: 0 0 0 0.1875rem var(--pt-accent);
}

#pst-search-dialog[open] form.bd-search input {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  font-family: var(--pt-font-body);
}

.pt-ricerca {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* senza, il figlio scorrevole spinge la finestra */
}

/* ---------- I risultati ---------- */
.pt-ricerca-esiti {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  min-height: 0;
}

/* Le righe sono piatte: un risultato, una riga. L'elenco annidato (pagina,
   e sotto le sue sezioni) serviva quando i risultati erano quaranta; con sei
   raddoppiava soltanto le cose da leggere. */

.pt-ricerca-voce {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--pt-radius-md);
  color: var(--pt-fg);
  text-decoration: none;
  line-height: 1.35;
}

.pt-ricerca-voce:hover {
  background-color: var(--pt-bg-tint-soft);
  text-decoration: none;
}

/* La voce sotto la tastiera. Il colore è lo stesso dell'hover più una barra
   terracotta a sinistra: due segnali diversi per due gesti diversi, così il
   mouse fermo su una riga non fa credere di aver perso la selezione. */
.pt-ricerca-voce.scelto {
  background-color: var(--pt-tint-accent);
  box-shadow: inset 3px 0 0 var(--pt-accent);
}

/* Sopra il titolo, dove si finisce: capitolo e pagina. */
/* Una riga sola: la strada dice dove si finisce, e se è lunga si accorcia
   invece di mandare a capo e rubare spazio al titolo, che è la cosa che si
   legge davvero. */
.pt-ricerca-strada {
  display: block;
  font-size: var(--pt-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pt-fg-subtle);
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-ricerca-titolo {
  font-family: var(--pt-font-display);
  font-weight: 600;
  font-size: 0.98rem;
}

/* L'ultima riga è un PULSANTE, e si vede che lo è: non è un risultato, è la
   porta verso tutti gli altri. La finestra ne mostra sei; il resto sta nella
   pagina della ricerca, e da qui ci si arriva col dito, non solo con l'invio
   a vuoto (che su un telefono non esiste). */
.pt-ricerca-tutti {
  margin: 0.5rem 0.15rem 0.15rem;
  padding: 0.5rem 0.6rem;
  text-align: center;
  font-family: var(--pt-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pt-accent-2);
  background-color: var(--pt-bg-tint-soft);
  border: 1px solid var(--pt-border-strong);
  border-radius: var(--pt-radius-md);
}

.pt-ricerca-tutti::after {
  content: " →";
}

.pt-ricerca-tutti:hover,
.pt-ricerca-tutti.scelto {
  color: var(--pt-bg-elev);
  background-color: var(--pt-accent-2);
  border-color: var(--pt-accent-2);
  box-shadow: none;
}

.pt-ricerca-voce mark {
  background-color: var(--pt-tint-accent-3);
  color: inherit;
  padding: 0 0.1em;
  border-radius: var(--pt-radius-sm);
}

/* «Nessun risultato per X. Forse cercavi:» — la rete per i refusi. */
.pt-ricerca-forse {
  margin: 0.2rem 0.6rem 0.5rem;
  font-size: var(--pt-text-sm);
  color: var(--pt-fg-subtle);
  font-style: italic;
}

.pt-ricerca-stato {
  margin: 0;
  padding: 1.6rem 0.8rem;
  text-align: center;
  color: var(--pt-fg-subtle);
  font-size: 0.9rem;
}

/* ---------- Il piede, con i tasti ---------- */
.pt-ricerca-piede {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  border-top: 1px solid var(--pt-border);
  background-color: var(--pt-bg-tint-soft);
  color: var(--pt-fg-subtle);
  font-size: var(--pt-text-xs);
}

.pt-ricerca-piede kbd {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 0.15em;
  padding: 0.05em 0.3em;
  text-align: center;
  font-family: var(--pt-font-mono);
  font-size: 0.9em;
  color: var(--pt-fg-muted);
  background-color: var(--pt-bg-elev);
  border: 1px solid var(--pt-border-strong);
  border-radius: var(--pt-radius-sm);
  box-shadow: none;
}

.pt-ricerca-conto {
  white-space: nowrap;
}

/* Su schermo piccolo la finestra prende quasi tutto: una lista di risultati
   dentro un rettangolo alto sei righe non si usa.

   Le altezze sono in `dvh` e non in `vh`, e la differenza qui è il difetto
   che si è visto: su un telefono `vh` è calcolato sulla finestra SENZA la
   barra dell'indirizzo e senza la tastiera a schermo, che invece ci sono
   entrambe mentre si cerca. Una finestra alta 92vh su uno schermo che ne
   mostra 70 sborda, e sborda anche in alto: il primo risultato finisce sopra
   il bordo, si vede solo scorrendo e non si riesce a toccare. `dvh` è
   l'altezza VERA in quel momento, e cambia da sé quando la tastiera si apre.

   Il `margin: 1rem auto auto` funziona perché la regola qui sopra ha già
   azzerato il `top` e la `transform` del tema: da sole le tre righe di
   margine non spostavano niente, ed è per questo che i primi tentativi di
   riparare questa cosa sono falliti. Vedi il commento della regola base.

   Chi ritocca queste misure le verifichi su WebKit, non su Chromium, dove il
   difetto non esiste: `python3 scripts/verifica-ricerca.py` lo fa da sé. */
@media (max-width: 720px) {
  #pst-search-dialog[open] {
    margin: 1rem auto auto;
    max-height: 85dvh;
    width: 96%;
  }
  .pt-ricerca-piede span:first-child { display: none; }
  .pt-ricerca-piede { justify-content: flex-end; }
  /* Bersagli più grandi: un risultato si tocca col pollice, non col mouse. */
  .pt-ricerca-voce { padding: 0.6rem; }
}

/* ---------- Il richiamo «nascondi le corrispondenze» ---------- */
/* Lo scrive `pt-ricerca.js` sulla pagina d'arrivo, e solo se qualcosa è
   stato davvero evidenziato. Sta sopra l'articolo: va letto come una nota di
   servizio, non come un titolo. */
#searchbox .pt-evidenziate {
  margin: 0 0 0.8rem;
  font-size: var(--pt-text-sm);
}

#searchbox .pt-evidenziate a {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  color: var(--pt-fg-muted);
  background-color: var(--pt-bg-tint-soft);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-full);
  text-decoration: none;
}

#searchbox .pt-evidenziate a:hover {
  color: var(--pt-accent);
  border-color: var(--pt-accent);
}