/*
  Ricerca della documentazione (piano/M12/proposta-docs.md §E): il pulsante dell'intestazione, il dialogo Ctrl+K
  (js/search.js) e la pagina /search senza JavaScript. Solo i token di site.css (e --field-border di docs.css):
  tema chiaro e scuro vengono da lì. Sotto i 560 px il dialogo occupa tutto lo schermo.
*/

/*
  Pulsante dell'intestazione: prende il posto del campo con lo stesso aspetto. Icona e indicazione "Ctrl K" del layout
  entrano nel pulsante (search.js), in fila con il testo: nessuno spazio fisso in px da riservare, quindi niente
  sovrapposizioni con il testo ingrandito o con un campo stretto; se lo spazio non basta, il testo si tronca con "…".
  Quando mostrare "Ctrl K" lo decide docs.css (solo con mouse e tastiera, e se il campo è abbastanza largo): nascosto,
  non occupa spazio.
*/
.docs-search-trigger {
  display: flex; align-items: center; gap: .5em; width: 100%; min-height: 38px; text-align: left; cursor: pointer;
  font: 400 .92rem/1.2 var(--f-body); color: var(--muted); background: var(--panel);
  border: 1px solid var(--field-border, var(--rule)); border-radius: 8px; padding: 8px 8px 8px 11px; overflow: hidden;
}
.docs-search-trigger > .dicon { width: 16px; height: 16px; }   /* misura fissa, come in docs.css */
.docs-search-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-search-trigger > .docs-search-kbd { position: static; transform: none; flex: none; }
.docs-search-trigger:hover { border-color: var(--accent); color: var(--ink); }
.docs-search-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-dialog kbd {
  font: 500 .72rem/1 var(--f-mono); color: var(--muted); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; padding: 3px 5px; white-space: nowrap;
}

/* Dialogo */
.search-dialog {
  padding: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--ink);
  width: min(42rem, calc(100vw - 32px)); max-width: none; max-height: min(40rem, calc(100vh - 96px));
  margin: 8vh auto auto; box-shadow: var(--shadow); overflow: hidden;
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgba(6, 10, 22, .55); }

.search-box { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); }
.search-box .search-icon { width: 20px; height: 20px; color: var(--muted); }
.search-box input {
  flex: 1; min-width: 0; font: 400 1.05rem/1.4 var(--f-body); color: var(--ink); background: transparent;
  border: 0; border-radius: 6px; padding: 8px 4px;
}
.search-box input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-close, .search-slash {
  font: 500 .8rem/1 var(--f-body); color: var(--ink); background: transparent; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 6px; padding: 7px 10px; min-height: 32px;
}
.search-close:hover, .search-slash:hover { border-color: var(--accent); color: var(--accent); }
.search-slash[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.search-slash[aria-pressed="true"]::before { content: "✓ " / ""; }

.search-heading { font: 600 .78rem/1.3 var(--f-body); color: var(--muted); padding: var(--s-3) var(--s-4) var(--s-1); letter-spacing: .02em; }
.search-list { list-style: none; margin: 0; padding: 0 var(--s-2) var(--s-2); overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.search-option > a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
/* Scelta: sfondo, riga a sinistra e (in forced-colors) un bordo vero: mai il solo colore */
.search-option[aria-selected="true"] > a { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); outline: 2px solid transparent; }

.search-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--rule); font-size: .8rem; color: var(--muted);
}
.search-keys { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-right: auto; }
.search-keys kbd + kbd { margin-left: 2px; }
.search-all { font-weight: 600; }

/* Un risultato, nel dialogo e nella pagina /search */
.search-hit-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.search-hit-path { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.search-hit-type { flex: none; font: 500 .7rem/1 var(--f-body); color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 7px; }
.search-hit-title { font-weight: 600; overflow-wrap: anywhere; }
.search-hit-text { font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.search-dialog .search-hit-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-dialog mark, .search-page mark { background: transparent; color: var(--accent); font-weight: 700; }
/* Nella pagina /search il titolo è un link, già del colore d'accento: lì l'evidenziazione è lo sfondo (5,07:1, site.css) */
.search-page .search-hit-title mark { color: inherit; background: var(--accent-soft); border-radius: 3px; }

/* Pagina /search */
.search-page .docs-search-page label { flex-basis: 100%; font-weight: 600; }
.search-count { color: var(--muted); }
.search-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); max-width: var(--measure); }
.search-hit { display: grid; gap: 2px; }
.search-page .search-hit-title { font-size: 1.05rem; }
.search-featured-title { font-size: 1.3rem; }

@media (prefers-reduced-motion: no-preference) {
  .docs-search-trigger { transition: border-color .15s ease-out; }
  .search-dialog[open] { animation: search-in .12s ease-out; }
  @keyframes search-in { from { opacity: 0; transform: translateY(-6px); } }
}

@media (forced-colors: active) {
  .search-option[aria-selected="true"] > a { outline-color: Highlight; }
  .search-dialog mark, .search-page mark, .search-page .search-hit-title mark { color: Highlight; }
}

@media (max-width: 560px) {
  .search-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .search-keys { display: none; }
  .search-foot { justify-content: space-between; }
}