/*
 * La ricerca sul telefono: l'invito in basso e il foglio che si apre.
 *
 * **Esiste solo sul telefono.** Sopra la soglia il componente non si vede né si
 * legge: la ricerca è quella della testata, e questo foglio non deve poterla
 * toccare. Tutto ciò che segue vive dentro un'unica soglia — la stessa del
 * resto del progetto — e sopra quella non c'è nulla da spegnere.
 */

.pms-msearch { display: none; }

/*
 * **La soglia è quella in cui la testata rinuncia alla barra.** Sotto i
 * novecento pixel la ricerca della testata non c'è — su uno schermo alto
 * ottocento occuperebbe un terzo — e da lì in giù la ricerca è questa: telefono
 * e tablet compresi, senza una terza via a metà strada.
 */
@media (max-width: 900px) {

	/*
	 * **Il contenitore non è una scatola**, e non deve esserlo: i suoi due pezzi
	 * vivono in due mondi diversi. Il piedistallo sta appiccicato dentro il
	 * contenuto della pagina; il foglio è una finestra che deve stare davanti a
	 * tutto, testata compresa. Finché era il contenitore l'elemento appiccicato,
	 * il suo indice apriva un piano e il foglio ne restava prigioniero: si è
	 * visto subito, col contatto rapido che gli galleggiava sopra pur avendo un
	 * indice molto più basso.
	 *
	 * `display: contents` toglie di mezzo la scatola e lascia ciascuno dei due
	 * dove deve stare.
	 */
	.pms-msearch { display: contents; }

	/*
	 * **Dove l'invito c'è, la barra in pagina non serve.** Le pagine di risultati
	 * ne stampano una copia perché sotto i novecento pixel la testata la nasconde:
	 * con il foglio mobile quella copia sarebbe la stessa domanda posta due volte,
	 * una delle quali occupa mezzo schermo prima del primo risultato.
	 *
	 * La classe la mette il copione: **senza copione il foglio non si apre**, e
	 * togliere la barra lascerebbe la pagina senza alcun modo di correggere la
	 * ricerca.
	 *
	 * Il selettore nomina anche la pagina dei risultati perché è così che la
	 * regola che la accende è scritta — `.pms-search--results .pms-search__bar` —
	 * e a parità di peso vincerebbe lei, che arriva dopo. Una classe in più qui
	 * evita un `!important` là.
	 */
	.pms-msearch-ready .pms-search--results .pms-search__bar { display: none; }

	/* --- Il foglio -------------------------------------------------------- */

	/* Con il foglio aperto la pagina sotto non scorre: si trascina l'elenco, non lei. */
	.pms-msearch-open { overflow: hidden; }

	.pms-msearch__sheet {
		position: fixed;
		z-index: 95;
		inset: 0;
		visibility: hidden;
	}

	.pms-msearch.is-open .pms-msearch__sheet { visibility: visible; }

	.pms-msearch__backdrop {
		position: absolute;
		inset: 0;
		background: var(--color-overlay);
		opacity: 0;
		transition: opacity 180ms ease;
	}

	.pms-msearch.is-open .pms-msearch__backdrop { opacity: 1; }

	/*
	 * **Sale dal basso e si ferma prima della cima.** Non è una pagina intera: si
	 * vede ancora un po' di ciò che c'era sotto, e questo è ciò che dice che si
	 * può richiudere. L'area sicura in fondo è quella del telefono senza tasto:
	 * senza, il pulsante di conferma finisce sotto la barra di sistema.
	 */
	.pms-msearch__panel {
		position: absolute;
		inset: auto 0 0;
		display: flex;
		flex-direction: column;
		max-height: min(88vh, 100% - 2rem);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--color-surface);
		border-radius: 22px 22px 0 0;
		box-shadow: var(--shadow-popover);
		transform: translateY(100%);
		transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.pms-msearch.is-open .pms-msearch__panel { transform: none; }

	.pms-msearch__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: 0 0 auto;
		padding: 14px var(--gutter);
		border-bottom: 1px solid var(--color-border);
	}

	/*
	 * La maniglia non è un comando: è il segno che il foglio si tira giù. Chi lo
	 * chiude davvero lo fa con la croce, con lo sfondo o con Esc.
	 */
	.pms-msearch__head::before {
		content: '';
		position: absolute;
		top: 7px;
		left: 50%;
		width: 36px;
		height: 4px;
		margin-left: -18px;
		background: var(--color-border-strong);
		border-radius: 999px;
	}

	.pms-msearch__title {
		margin: 0;
		font-size: var(--step-7);
		font-weight: 800;
		line-height: 1.2;
	}

	.pms-msearch__close {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		color: var(--color-text);
		background: var(--color-surface-soft);
		border: 0;
		border-radius: 50%;
		cursor: pointer;
	}

	.pms-msearch__close:focus-visible {
		outline: 2px solid var(--color-outline);
		outline-offset: 2px;
	}

	/*
	 * Il corpo scorre, la testa e il fondo no: il pulsante di conferma resta
	 * raggiungibile anche quando la tastiera si prende metà schermo.
	 */
	.pms-msearch__body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 18px var(--gutter) calc(18px + var(--gutter));
	}

	/* --- La barra canonica, disposta per un dito -------------------------- */

	.pms-msearch__body .pms-searchbar {
		display: block;
		max-width: none;
	}

	/*
	 * **La scelta della tipologia è la prima domanda, e si vede.** Nella testata è
	 * un interruttore piccolo sopra la barra; qui diventa due schede larghe metà
	 * schermo ciascuna, perché è da qui che si decide che cosa si sta cercando —
	 * e sulla pagina iniziale è una scelta vera.
	 */
	.pms-msearch__body .pms-searchbar__kind {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		width: 100%;
		margin: 0 0 16px;
		padding: 4px;
		border-radius: 14px;
	}

	.pms-msearch__body .pms-searchbar__kind-label {
		padding: 10px 12px;
		font-size: var(--text-meta);
		text-align: center;
		border-radius: 11px;
	}

	/* I tre controlli diventano una colonna di righe alte quanto un dito. */
	.pms-msearch__body .pms-bar { margin: 0; }

	.pms-msearch__body .pms-searchbar .pms-bar__row--search {
		grid-template-columns: minmax(0, 1fr);
		padding: 0;
		border-radius: 15px;
		box-shadow: none;
	}

	.pms-msearch__body .pms-bar__control {
		min-height: 62px;
		justify-content: center;
		padding: 10px 16px;
		text-align: left;
	}

	.pms-msearch__body .pms-bar__control + .pms-bar__control { border-top: 1px solid var(--color-border); }

	.pms-msearch__body .pms-bar__label { font-size: var(--step-3); }
	.pms-msearch__body .pms-bar__value { font-size: var(--text-meta); }

	/*
	 * Il pulsante di conferma non è più un cerchio in fondo a una riga: è largo
	 * quanto il foglio, porta il proprio nome e sta sotto i campi, dove si
	 * arriva dopo aver risposto.
	 */
	.pms-msearch__body .pms-searchbar .pms-bar__search {
		grid-column: 1 / -1;
		justify-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: auto;
		min-height: 52px;
		margin: 16px 0 0;
		border-radius: 15px;
		font-size: var(--text-meta);
		font-weight: 700;
	}

	.pms-msearch__body .pms-bar__search-text { display: inline; }

	/*
	 * I pannelli di «Dove», «Quando» e «Chi» si aprono dentro il foglio: restano
	 * quelli di sempre, e il corpo che scorre è ciò che permette di raggiungerli
	 * senza allungare la pagina sotto.
	 */
	.pms-msearch__body .pms-panel {
		left: 0;
		right: 0;
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Il pulsante non è più affar suo: la sua transizione vive col piedistallo. */
	.pms-msearch__panel,
	.pms-msearch__backdrop { transition: none; }

	.pms-msearch__panel { transform: none; }
}