/*
 * Il contatto rapido: il pulsante fisso e l'elenco dei modi per scriverci.
 *
 * **Un foglio suo, perché sta su ogni pagina.** È l'unico componente del tema
 * che non appartiene a una pagina: caricarlo dentro il foglio di base
 * significherebbe farlo pesare anche dove chi amministra l'ha spento, e il
 * foglio di base è già il posto più affollato del tema.
 */

/*
 * **Sopra la pagina, sotto tutto ciò che la copre.** Venticinque: più della
 * pagina, meno della barra appiccicata dei risultati (30), della testata (40),
 * dei pannelli della ricerca (35), del foglio dei filtri (90) e della lente
 * delle fotografie (120). Un pulsante di servizio non deve mai finire davanti a
 * qualcosa che qualcuno ha appena aperto.
 */
.pms-quick {
	position: fixed;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 25;

	/*
	 * **Il pannello sta sopra il pulsante e dopo di lui.** Il verso inverso
	 * dispone in colonna dal basso: nel documento viene prima il pulsante — che è
	 * ciò che si preme e ciò che la tastiera incontra per primo — e sullo schermo
	 * il pannello gli sta sopra, dove lo si aspetta.
	 */
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 10px;

	/*
	 * **La cassa non intercetta niente: solo ciò che si preme è premibile.** Il
	 * pannello chiuso resta nel flusso — è `visibility` a nasconderlo, non
	 * `display` — quindi questo contenitore è alto quanto pannello più pulsante
	 * anche quando si vede solo il pulsante. Senza questa riga, quel rettangolo
	 * invisibile si mangia i clic di tutto ciò che gli capita sotto nell'angolo:
	 * i comandi della mappa nei risultati, l'ultima scheda di un elenco. Il
	 * pulsante e il pannello se li riprendono uno per uno.
	 */
	pointer-events: none;

	/*
	 * **Quanto il componente si alza per non calpestare il piede di pagina.** Il
	 * numero lo scrive `sopra-il-piede.js` — lo stesso copione che serve l'invito
	 * alla ricerca, perché il problema è lo stesso — e il foglio decide cosa
	 * farne: `translate` è una proprietà a sé, non entra nella `transform` della
	 * comparsa e non è nell'elenco delle transizioni qui sotto. È la differenza
	 * tra seguire lo scorrimento pixel per pixel e rincorrerlo con due decimi di
	 * ritardo, ballando a ogni fermata.
	 */
	translate: 0 calc(-1 * var(--pms-scostamento, 0px));

	transition: opacity 190ms ease, transform 190ms ease, visibility 190ms;
}

.pms-quick__trigger,
.pms-quick__panel { pointer-events: auto; }

/*
 * **Dove la pagina si apre con una fotografia, il contatto rapido aspetta.**
 * Sopra un'apertura che occupa lo schermo intero — e che ha già il proprio
 * invito ben visibile — un pulsante fisso in un angolo è un secondo richiamo che
 * si contende lo stesso momento. Passata l'apertura, quando comincia il
 * discorso, si presenta.
 *
 * **La condizione è il documento, non l'elenco delle pagine.** Il foglio non sa
 * quali pagine abbiano un'apertura e non deve saperlo: guarda se ce n'è una. Le
 * pagine che non ne hanno — risultati, schede, testi — non entrano nemmeno in
 * questa regola e mostrano il pulsante da subito, come prima.
 *
 * Il ritorno è dichiarato dal copione con una classe: senza copione il pannello
 * non si aprirebbe comunque, e un pulsante che non fa niente è meglio che non
 * ci sia.
 *
 * **A togliere di mezzo il componente basta `visibility`**, qui come per il
 * pannello chiuso: ciò che è nascosto così non riceve clic, nemmeno se qualche
 * discendente si dichiara premibile. Non serve spegnere anche i clic, e non si
 * deve riaccenderli sulla cassa quando ricompare — la cassa non li vuole mai.
 */
body:has(.pms-hero) .pms-quick {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

body:has(.pms-hero) .pms-quick.is-past-hero {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --- Il pulsante --------------------------------------------------------- */

/*
 * **Testo, non un simbolo.** Una nuvoletta prometterebbe una chat; qui c'è
 * scritto quello che succede. Il fondo è l'accento del tema — il verde molto
 * scuro dei token, non un colore scritto a mano — e l'ombra è quella tenue del
 * sito, non un alone che lo stacchi dalla pagina.
 */
.pms-quick__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 16px;
	font-family: var(--font-body);
	font-size: var(--step-4);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-on-accent);
	background: var(--color-accent);
	border: 0;
	border-radius: 15px;
	box-shadow: var(--shadow-soft);
	cursor: pointer;
	transition: background-color var(--motion-fast) ease;
}

.pms-quick__trigger:hover { background: color-mix(in srgb, var(--color-accent) 88%, var(--color-surface)); }

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

/*
 * Il simbolo esiste sempre nel documento e si vede solo dove il pulsante diventa
 * un cerchio: sulla scrivania il nome è scritto, e un'icona accanto sarebbe una
 * seconda volta la stessa cosa.
 */
.pms-quick__sign { display: none; }

/*
 * Il segno guarda in su perché il pannello si apre in su, e si gira quando si
 * apre: è la stessa informazione detta due volte, per chi guarda il verso e per
 * chi guarda lo stato.
 */
.pms-quick__chevron {
	display: inline-flex;
	transform: rotate(180deg);
	transition: transform var(--motion-fast) ease;
}

.pms-quick__chevron .pms-icon {
	width: 18px;
	height: 18px;
}

.pms-quick.is-open .pms-quick__chevron { transform: rotate(0deg); }

/* --- Il pannello --------------------------------------------------------- */

/*
 * **Chiuso resta nel documento, ma non nella pagina.** `visibility` lo toglie
 * dalla vista, dal percorso di tabulazione e dall'albero letto ad alta voce, e
 * a differenza di `display` lascia che l'opacità e i sei pixel di risalita si
 * possano percorrere. È tutto il movimento che c'è.
 */
.pms-quick__panel {
	width: min(17rem, calc(100vw - 2rem));
	padding: 16px;
	background: var(--color-surface);
	border-radius: 15px;
	box-shadow: var(--shadow-popover);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 170ms ease, transform 170ms ease, visibility 170ms;
}

.pms-quick.is-open .pms-quick__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pms-quick__title {
	margin: 0 0 12px;
	font-size: var(--text-dense);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-heading);
}

.pms-quick__list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pms-quick__item { margin: 0; }

/*
 * **La riga intera è il collegamento.** Non l'etichetta con accanto un simbolo
 * che non si può premere: sul telefono il bersaglio è tutta la riga, alta
 * quarantaquattro pixel come chiede un dito.
 */
.pms-quick__row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 10px;
	font-size: var(--text-meta);
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	border-radius: 12px;
	transition: background-color var(--motion-fast) ease;
}

/*
 * **Il passaggio del mouse cambia solo il fondo.** Non il testo, non il simbolo,
 * non il riquadro del simbolo: una riga che si accende del colore d'accento
 * sembra selezionata, e in un elenco di tre modi per scriverci non c'è niente
 * di selezionato. Il grigio è quello che il tema usa ovunque per dire «sei qui
 * sopra» — il testo al cinque per cento sulla superficie — e non è un colore in
 * più.
 */
.pms-quick__row:hover { background: var(--color-surface-hover); }

/*
 * **Il colore del testo va ridichiarato, non dato per scontato.** La riga è un
 * collegamento, e il foglio di base tinge ogni collegamento al passaggio del
 * mouse — `a:hover { color: var(--color-primary-hover) }` — con una primaria
 * mescolata all'accento. Quella regola vale un elemento più uno stato e pesa
 * più della sola classe che qui dichiara il colore a riposo: senza queste
 * righe vincerebbe lei, ed è da lì che l'accento rientrava dalla finestra.
 *
 * **Si ripete il colore di riposo dentro gli stessi stati**, che valgono una
 * classe più uno stato e quindi passano avanti. Nessun `!important`, e nessun
 * ritocco al foglio di base: gli altri collegamenti del sito devono continuare
 * a comportarsi come sempre. Il simbolo non compare qui perché il suo riquadro
 * dichiara già il proprio colore in ogni stato, e la sagoma lo eredita.
 */
.pms-quick__row:hover,
.pms-quick__row:focus,
.pms-quick__row:focus-visible,
.pms-quick__row:active {
	color: var(--color-text);
}

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

/*
 * **Il simbolo è neutro, e lo resta.** Prende il colore del testo e un fondo
 * appena accennato della stessa neutralità: l'accento qui dentro non entra né a
 * riposo né al passaggio del mouse. Oggi le due tinte coincidono, ma il giorno
 * in cui chi amministra sceglie un accento colorato queste tre righe non devono
 * diventare tre bandierine.
 */
.pms-quick__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	color: var(--color-text);
	background: var(--color-surface-soft);
	border-radius: 9px;
}

.pms-quick__icon .pms-icon {
	width: 17px;
	height: 17px;
}

/* --- Sul telefono e sul tablet: un bottone, non una targa ----------------- */

/*
 * **Accanto all'invito alla ricerca serve un satellite, non un secondo invito.**
 * Cercare è il motivo per cui si è arrivati; scriverci è un ripensamento, e due
 * rettangoli con due frasi in fondo allo stesso schermo si contendono lo stesso
 * momento senza che nessuno dei due vinca. Qui il contatto rapido si stringe in
 * un cerchio con un simbolo: resta premibile come prima — cinquantadue pixel
 * sono un bersaglio comodo — e smette di competere.
 *
 * **Il nome non si perde**: lo porta `aria-label`, che il modello dichiara
 * sempre. Chi ascolta la pagina sente «Parliamone» a qualunque larghezza.
 *
 * La misura è dichiarata come variabile perché **l'invito alla ricerca deve
 * sapere quanto spazio lasciargli**: si affiancano sulla stessa riga, e chi
 * centra il proprio testo ha bisogno di sapere quanto tenersi a destra.
 */
@media (max-width: 900px) {
	:root { --pms-quick-size: 52px; }

	/*
	 * **Sulla stessa linea dell'invito alla ricerca.** I due si affiancano, e due
	 * distanze diverse dal bordo — il `clamp` di qui e il margine della pagina di
	 * là — li lasciavano sfalsati di sei pixel: poco, ma abbastanza perché non
	 * sembrino un sistema. Si adotta la misura della pagina, quella che usa anche
	 * l'altro, e con lei l'area sicura dei telefoni senza tasto.
	 */
	.pms-quick { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); }

	.pms-quick__trigger {
		width: var(--pms-quick-size);
		height: var(--pms-quick-size);
		min-height: 0;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}

	.pms-quick__label,
	.pms-quick__chevron { display: none; }

	.pms-quick__sign {
		display: grid;
		place-items: center;
	}

	.pms-quick__sign .pms-icon {
		width: 26px;
		height: 26px;
	}
}

/* --- Meno movimento ------------------------------------------------------ */

/*
 * Chi ha chiesto meno movimento ottiene la stessa cosa senza percorrerla: il
 * pannello c'è o non c'è, e il segno si gira senza transizione.
 */
@media (prefers-reduced-motion: reduce) {
	.pms-quick,
	.pms-quick__panel,
	.pms-quick__chevron,
	.pms-quick__trigger,
	.pms-quick__row {
		transition: none;
	}

	.pms-quick__panel { transform: none; }

	/* Compare e sparisce, senza percorrere né l'opacità né i sei pixel. */
	body:has(.pms-hero) .pms-quick { transform: none; }
}