/**
 * Frontend: struttura, non pittura.
 *
 * Il plugin non impone colori. Bordi e testo di servizio si ricavano dal
 * colore che il tema ha gia' scelto, cosi' funzionano anche su fondo scuro.
 * Chi vuole un'altra resa ridefinisce le variabili nel proprio tema, senza
 * toccare il plugin.
 */
.qlist-archive,
.qlist-single,
.qlist-children,
.qlist-form-public,
.qlist-dashboard,
.qlist-plans,
.qlist-activate,
.qlist-chooser,
.qlist-gate,
.qlist-notice {
	--qlist-border: rgba( 0, 0, 0, .15 );
	--qlist-border: color-mix( in srgb, currentColor 20%, transparent );
	--qlist-muted: rgba( 0, 0, 0, .6 );
	--qlist-muted: color-mix( in srgb, currentColor 65%, transparent );
	--qlist-surface: color-mix( in srgb, currentColor 4%, transparent );
	--qlist-accent: currentColor;
	--qlist-error: #b3261e;
	--qlist-ok: #1e7d44;
	--qlist-radius: 6px;
	--qlist-gap: 1.5rem;
}

.qlist-filters {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 1rem;
	align-items: end;
	padding: 1.25rem;
	border: 1px solid var( --qlist-border );
	border-radius: var( --qlist-radius );
	margin-bottom: 1.5rem;
}

.qlist-filter label,
.qlist-filter__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.qlist-filter input[type="text"],
.qlist-filter input[type="search"],
.qlist-filter input[type="number"],
.qlist-filter input[type="date"],
.qlist-filter select {
	width: 100%;
	padding: 0.45rem 0.6rem;
	border: 1px solid var( --qlist-border );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.qlist-range {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.qlist-range span {
	color: var( --qlist-muted );
}

.qlist-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
}

.qlist-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
}

.qlist-filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.qlist-button {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.qlist-button:hover,
.qlist-button:focus-visible {
	background: currentColor;
}

.qlist-button:hover span,
.qlist-reset {
	color: var( --qlist-muted );
	font-size: 0.875rem;
}

.qlist-count {
	color: var( --qlist-muted );
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.qlist-empty {
	border: 1px dashed var( --qlist-border );
	border-radius: var( --qlist-radius );
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.qlist-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 2rem;
}

.qlist-pagination .page-numbers {
	padding: 0.35rem 0.7rem;
	border: 1px solid var( --qlist-border );
	border-radius: 4px;
	text-decoration: none;
}

.qlist-pagination .current {
	border-color: currentColor;
	font-weight: 600;
}

/* Scheda singola */

.qlist-children {
	margin-top: 2.5rem;
}

.qlist-children__title {
	margin-bottom: 1rem;
}

.qlist-filters__toggle {
	display: none;
}

@media screen and ( max-width: 782px ) {
	.qlist-filters__toggle {
		display: block;
		width: 100%;
		padding: 0.6rem 1rem;
		margin-bottom: 1rem;
		border: 1px solid currentColor;
		border-radius: 4px;
		background: transparent;
		color: inherit;
		font: inherit;
		cursor: pointer;
	}

	/*
	 * Solo il modulo che ha davvero un interruttore si chiude: il pulsante lo
	 * crea JavaScript, e senza JavaScript nascondere i filtri li rendeva
	 * irraggiungibili dal telefono.
	 */
	.qlist-filters--collapsible {
		display: none;
	}

	.qlist-filters--collapsible.is-open {
		display: grid;
	}

}

@media ( prefers-reduced-motion: reduce ) {
	.qlist-archive * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Inserimento pubblico e area utente
   ------------------------------------------------------------------------ */

.qlist-form-public {
	max-width: 44rem;
}

.qlist-field {
	margin-bottom: 1.25rem;
}

.qlist-field label,
.qlist-field__label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 0.35rem;
}

.qlist-field .qlist-choice {
	font-weight: 400;
	margin-bottom: 0;
}

.qlist-field input[type="text"],
.qlist-field input[type="email"],
.qlist-field input[type="password"],
.qlist-field input[type="url"],
.qlist-field input[type="tel"],
.qlist-field input[type="number"],
.qlist-field input[type="date"],
.qlist-field input[type="file"],
.qlist-field select,
.qlist-field textarea,
.qlist-form-public .qlist-input {
	/*
	 * Senza questo, width:100% piu' il padding sfonda il contenitore: su un
	 * telefono ogni campo di questo modulo spingeva la pagina di una ventina
	 * di pixel e nasceva lo scorrimento orizzontale. Valeva per tutti i campi
	 * del modulo pubblico, non solo per quelli nuovi.
	 */
	box-sizing: border-box;
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var( --qlist-border );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.qlist-field textarea {
	min-height: 8rem;
	resize: vertical;
}

.qlist-form-public__section {
	margin: 2rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --qlist-border );
}

.qlist-form-public__actions {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.qlist-button--primary {
	border-width: 2px;
	font-weight: 600;
}

.qlist-hint {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: var( --qlist-muted );
}

.qlist-required {
	color: var( --qlist-error );
}

.qlist-upload__current img {
	max-width: 140px;
	height: auto;
	border-radius: 4px;
	margin-bottom: 0.5rem;
	display: block;
}

.qlist-message {
	padding: 0.85rem 1.1rem;
	border-radius: var( --qlist-radius );
	margin-bottom: 1.25rem;
	border: 1px solid;
}

.qlist-message--error {
	border-color: var( --qlist-error );
	color: var( --qlist-error );
}

.qlist-message--ok {
	border-color: var( --qlist-ok );
	color: var( --qlist-ok );
}

.qlist-gate {
	border: 1px dashed var( --qlist-border );
	border-radius: 6px;
	padding: 2rem 1.5rem;
	text-align: center;
}

.qlist-dashboard__block {
	margin-bottom: 3rem;
}

.qlist-dashboard__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.qlist-dashboard__header h2 {
	margin: 0;
}

.qlist-dashboard__empty {
	color: var( --qlist-muted );
}

.qlist-dashboard__table {
	width: 100%;
	border-collapse: collapse;
}

.qlist-dashboard__table th,
.qlist-dashboard__table td {
	text-align: left;
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var( --qlist-border );
	vertical-align: middle;
}

.qlist-dashboard__table th {
	font-size: 0.8125rem;
	color: var( --qlist-muted );
	font-weight: 600;
}

.qlist-dashboard__actions {
	text-align: right;
	white-space: nowrap;
}

.qlist-inline {
	display: inline;
	margin-left: 0.9rem;
}

.qlist-link-danger {
	border: 0;
	background: none;
	padding: 0;
	color: var( --qlist-error );
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.qlist-status {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	border: 1px solid var( --qlist-border );
}

.qlist-status--publish {
	border-color: var( --qlist-ok );
	color: var( --qlist-ok );
}

.qlist-status--pending {
	border-color: var( --qlist-border );
	color: var( --qlist-muted );
}

@media screen and ( max-width: 640px ) {
	.qlist-dashboard__table thead {
		display: none;
	}

	.qlist-dashboard__table tr {
		display: block;
		padding: 0.9rem 0;
		border-bottom: 1px solid var( --qlist-border );
	}

	.qlist-dashboard__table td {
		display: block;
		border: 0;
		padding: 0.15rem 0;
	}

	.qlist-dashboard__actions {
		text-align: left;
		margin-top: 0.5rem;
	}

	.qlist-inline {
		margin-left: 1.2rem;
	}
}

/* Scelta della directory quando la pagina le serve tutte */
.qlist-chooser__intro {
	font-weight: 600;
	margin-bottom: .75em;
}

.qlist-chooser__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.qlist-chooser__list li {
	margin: 0;
}

/* Listino dei piani */
.qlist-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.qlist-plan-card {
	border: 1px solid var( --qlist-border );
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
	padding-bottom: 1.25rem;
	text-align: center;
}

.qlist-plan-card__image img {
	display: block;
	width: 100%;
	height: auto;
}

.qlist-plan-card__title {
	margin: 1.25rem 1rem .5rem;
	font-size: 1.15rem;
}

.qlist-plan-card__badge {
	display: inline-block;
	margin: 0 1rem .5rem;
	padding: .15em .6em;
	border-radius: 999px;
	background: var( --qlist-surface );
	font-size: .8rem;
}

/*
 * La descrizione sta fra il nome e il prezzo, ed e' una riga: il margine
 * sotto e' stretto apposta, perche' il prezzo appartiene al nome e allontanarli
 * fa perdere il legame.
 */
.qlist-plan-card__summary {
	margin: 0 1rem .35rem;
	font-size: .92rem;
	line-height: 1.45;
	opacity: .8;
}

.qlist-plan-card__price {
	margin: .5rem 1rem;
	font-size: 1.9rem;
	line-height: 1.2;
}

.qlist-plan-card__period,
.qlist-plan-card__plan {
	font-size: .9rem;
	font-weight: 400;
}

.qlist-plan-card__plan {
	display: block;
	opacity: .7;
}

.qlist-plan-card__text {
	margin: 0 1.25rem 1rem;
	font-size: .95rem;
}

.qlist-plan-card__features {
	list-style: none;
	margin: 0 1.25rem 1.25rem;
	padding: 1rem 0 0;
	border-top: 1px solid var( --qlist-border );
	text-align: left;
	font-size: .92rem;
}

.qlist-plan-card__features li {
	margin: 0 0 .45em;
	padding-left: 1.4em;
	position: relative;
}

.qlist-plan-card__features li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	opacity: .6;
}

.qlist-plan-card__note {
	margin: 0 1.25rem 1rem;
	font-size: .9rem;
	opacity: .75;
}

.qlist-button--ghost {
	background: transparent;
	border: 1px solid currentColor;
}

/* Conferma del piano prima del form */
.qlist-activate__plan {
	border: 1px solid var( --qlist-border );
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}

.qlist-activate__name {
	margin: 0 0 .25em;
	font-size: 1.1rem;
}

.qlist-activate__note {
	margin: .5em 0 0;
	opacity: .75;
}

/* Tag come chip nel form pubblico */
.qlist-tagfield {
	border: 1px solid var( --qlist-border );
	border-radius: var( --qlist-radius );
	padding: .4em;
}

.qlist-tagfield:focus-within {
	border-color: currentColor;
}

.qlist-tagfield__list {
	display: flex;
	flex-wrap: wrap;
	gap: .3em;
}

.qlist-tagfield__list:not( :empty ) {
	margin-bottom: .4em;
}

.qlist-tagfield__tag {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	padding: .1em .5em;
	border: 1px solid var( --qlist-border );
	border-radius: 999px;
	font-size: .9em;
	line-height: 1.6;
}

.qlist-tagfield__remove {
	border: 0;
	background: none;
	padding: 0 0 0 .1em;
	color: var( --qlist-muted );
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
}

.qlist-tagfield__remove:hover,
.qlist-tagfield__remove:focus {
	color: currentColor;
}

/*
 * Specificità alzata apposta: .qlist-field input[type="text"] qui sopra pesa
 * più di una classe sola, e rimetterebbe la cornice dentro la cornice.
 */
.qlist-tagfield input.qlist-tagfield__input {
	/* Senza box-sizing il padding sfonda la cornice del tema. */
	box-sizing: border-box;
	width: 100%;
	min-width: 8em;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: .1em .2em;
	background: transparent;
	color: inherit;
	font: inherit;
}

.qlist-tagfield input.qlist-tagfield__input:focus {
	outline: 0;
}

/* Il contatto a cui un archivio di moduli e' ristretto */
.qlist-scope {
	margin: 0 0 1rem;
	padding: .6rem .9rem;
	border: 1px solid var( --qlist-border );
	border-radius: var( --qlist-radius );
	font-size: .9375rem;
}

.qlist-scope a {
	margin-left: .5rem;
}

.qlist-children__count {
	color: var( --qlist-muted );
	font-weight: 400;
	font-size: .8em;
}

.qlist-children__all {
	margin-top: 1.25rem;
}

.qlist-dashboard__group,
.qlist-chooser__group {
	margin: 2rem 0 .75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --qlist-border );
	font-size: 1.0625rem;
}

.qlist-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}

/* Registrazione */
.qlist-register {
	max-width: 30rem;
}

/*
 * La trappola per i bot: fuori dalla vista ma non con display:none, che gli
 * automi riconoscono e saltano. Nascosta anche ai lettori di schermo.
 */
.qlist-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qlist-message ul {
	margin: 0;
	padding-left: 1.2em;
}

/* ---------------------------------------------------------------------
 * I campi non scalari
 * ------------------------------------------------------------------ */

.qlist-address__part {
	margin: 0 0 0.75rem;
}

.qlist-address__part label,
.qlist-address__coords label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.qlist-address__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.qlist-address__text {
	display: block;
}

.qlist-address__directions,
.qlist-whatsapp {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
}

.qlist-help {
	display: block;
	margin-top: 0.35rem;
	color: var( --qlist-muted );
	font-size: 0.8125rem;
}

.qlist-social__row {
	display: grid;
	grid-template-columns: minmax( 110px, 0.4fr ) 1fr;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.qlist-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qlist-social__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
}

.qlist-social__icon {
	flex: 0 0 auto;
}

.qlist-link-field {
	display: grid;
	grid-template-columns: 1fr minmax( 120px, 0.5fr );
	gap: 0.5rem;
}

.qlist-hours__day {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var( --qlist-border );
}

.qlist-hours__name {
	flex: 0 0 7rem;
	font-weight: 600;
}

.qlist-hours__slot {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.qlist-hours__table {
	display: table;
	width: 100%;
}

.qlist-hours__line {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.25rem 0;
}

.qlist-hours__line .qlist-hours__name {
	flex: 0 0 auto;
	font-weight: 400;
	color: var( --qlist-muted );
}

@media screen and ( max-width: 600px ) {
	.qlist-social__row,
	.qlist-link-field {
		grid-template-columns: 1fr;
	}

	.qlist-hours__name {
		flex: 1 0 100%;
	}
}

/* ---------------------------------------------------------------------
 * Le righe dei campi, in quattro layout
 *
 * La struttura resta un <dl> in tutti e quattro: cambia come si vede, non
 * cosa significa. Anche a pastiglie, dove l'etichetta e' nascosta, chi usa
 * un lettore di schermo sente comunque "Cucina: toscana".
 * ------------------------------------------------------------------ */

.qlist-rows {
	margin: 0 0 var( --qlist-rows-space, 1rem );
	padding: 0;
}

/*
 * Spaziature per colonna, non per riga. La spaziatura della riga muove
 * etichetta e valore insieme; queste due decidono quanto respira ciascuna
 * colonna, che e' la differenza fra due colonne incolonnate e due colonne
 * composte. Di serie sono a zero: chi non le tocca vede quello di prima.
 */
/*
 * L'etichetta nascosta e' esclusa: e' una etichetta che sta in pagina solo per
 * chi legge con le orecchie, tenuta in un ritaglio di un pixel, e le
 * spaziature della colonna la riporterebbero dentro il conto.
 */
.qlist-rows dt:not( .qlist-sr-only ) {
	/*
	 * Con box-sizing normale una larghezza fissa della colonna piu' un
	 * padding farebbero una colonna piu' larga di quanto scritto, e la
	 * seconda si sposterebbe: qui la misura chiesta e' quella che si vede.
	 */
	box-sizing: border-box;
	margin: var( --qlist-rows-label-margin, 0 );
	padding: var( --qlist-rows-label-padding, 0 );
}

.qlist-rows dd {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	min-width: 0;
	margin: var( --qlist-rows-value-margin, 0 );
	padding: var( --qlist-rows-value-padding, 0 );
}

.qlist-row__value {
	min-width: 0;
}

.qlist-field-icon {
	flex: 0 0 auto;
	position: relative;
	top: 0.15em;
	opacity: 0.7;
}

.qlist-unit {
	opacity: 0.75;
}

/* Etichetta a sinistra, valore a destra */
/*
 * Le due colonne.
 *
 * Ogni misura passa da una variabile con il suo ripiego: il ripiego e' il
 * valore di serie di QUEL layout, e la variabile la scrive il pannello o il
 * widget solo quando qualcuno ha deciso davvero. Cosi' l'impostazione
 * "come vuole il layout" non e' un valore da scegliere: e' il non scegliere.
 *
 * Niente space-between: l'etichetta tiene la sua larghezza e il valore si
 * prende il resto, quindi l'allineamento dentro la seconda colonna funziona
 * sia con la colonna larga a piacere sia con una larghezza fissata.
 */
.qlist-rows--rows .qlist-row {
	display: flex;
	gap: var( --qlist-rows-gap, 1rem );
	padding: var( --qlist-rows-padding, 0.25rem 0 );
}

.qlist-rows--rows dt {
	flex: 0 0 var( --qlist-rows-label-width, auto );
	color: var( --qlist-muted );
	text-align: var( --qlist-rows-label-align, left );
}

.qlist-rows--rows dd {
	flex: 1 1 auto;
	justify-content: var( --qlist-rows-value-justify, flex-end );
	text-align: var( --qlist-rows-value-align, right );
}

/* Etichetta sopra, valore sotto */
.qlist-rows--list .qlist-row {
	padding: var( --qlist-rows-padding, 0.35rem 0 );
}

.qlist-rows--list dt {
	font-size: 0.8125rem;
	color: var( --qlist-muted );
	text-align: var( --qlist-rows-label-align, left );
}

.qlist-rows--list dd {
	justify-content: var( --qlist-rows-value-justify, flex-start );
	text-align: var( --qlist-rows-value-align, left );
}

/* Pastiglie: solo i valori */
.qlist-rows--badge {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.qlist-rows--badge .qlist-row {
	display: inline-flex;
}

.qlist-rows--badge dd {
	padding: 0.2rem 0.6rem;
	border: 1px solid var( --qlist-border );
	border-radius: 999px;
	font-size: 0.875rem;
}

/* Griglia: una cella per campo */
.qlist-rows--grid {
	display: grid;
	grid-template-columns: repeat( var( --qlist-rows-columns, 2 ), minmax( 0, 1fr ) );
	gap: var( --qlist-rows-gap, 0.75rem 1rem );
}

.qlist-rows--grid dt {
	font-size: 0.8125rem;
	color: var( --qlist-muted );
	text-align: var( --qlist-rows-label-align, left );
}

.qlist-rows--grid dd {
	justify-content: var( --qlist-rows-value-justify, flex-start );
	text-align: var( --qlist-rows-value-align, left );
}

.qlist-rows--grid .qlist-row {
	min-width: 0;
	padding: var( --qlist-rows-padding, 0 );
}

/* In card le righe sono piu' compatte che in scheda */
.qlist-rows--card {
	font-size: 0.9em;
}

.qlist-rows--single {
	margin-bottom: var( --qlist-rows-space, 1.5rem );
	padding-top: 1.25rem;
	border-top: 1px solid var( --qlist-border );
}

@media screen and ( max-width: 600px ) {
	/*
	 * Su schermo stretto etichetta e valore affiancati si schiacciano: la
	 * griglia passa a una colonna e le righe vanno a capo.
	 */
	.qlist-rows--grid {
		grid-template-columns: 1fr;
	}

	.qlist-rows--rows .qlist-row {
		flex-wrap: wrap;
		gap: 0.15rem 1rem;
	}

	.qlist-rows--rows dd {
		justify-content: flex-start;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------
 * La mappa, quando l'amministratore l'ha accesa
 * ------------------------------------------------------------------ */

.qlist-map {
	position: relative;
	margin-top: 0.75rem;
	overflow: hidden;
	border: 1px solid var( --qlist-border );
	border-radius: var( --qlist-radius );
	aspect-ratio: 16 / 9;
}

.qlist-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Il riquadro prima del clic: niente iframe, quindi niente chiamate. */
.qlist-map--ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.25rem;
	text-align: center;
	background: color-mix( in srgb, currentColor 6%, transparent );
}

.qlist-map__ask {
	padding: 0.5rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.qlist-map__note {
	max-width: 30em;
	color: var( --qlist-muted );
	font-size: 0.8125rem;
}

/*
 * Visibile ai lettori di schermo, non agli occhi.
 *
 * Definita qui e non presa in prestito da .screen-reader-text del tema: se il
 * tema non ce l'ha — e non e' obbligato ad averla — le etichette "nascoste"
 * restano in pagina e il layout a pastiglie non e' a pastiglie.
 *
 * Niente display:none ne' visibility:hidden, che la toglierebbero anche a
 * chi usa un lettore di schermo, ed e' esattamente il contrario di quello
 * che serve qui.
 */
.qlist-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}


/* =====================================================================
 * La barra delle viste, la vista a elenco, "vicino a me" e l'indirizzo
 * composto.
 *
 * Stavano in map.css, e map.css lo mette in coda solo chi disegna davvero
 * una mappa: in vista a card non arrivava, e la barra usciva senza stili —
 * con le iconcine SVG grandi come mezzo schermo, perche' un SVG senza
 * misure prende tutto lo spazio che trova. Qui invece il foglio c'e'
 * sempre, e in map.css resta soltanto cio' che riguarda la mappa vera.
 * ================================================================== */

/* --- il cambio vista -------------------------------------------------- */

.qlist-views {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.qlist-views__list {
	display: flex;
	gap: 0.25rem;
	padding: 0.2rem;
	border: 1px solid #d8dee6;
	border-radius: 8px;
}

.qlist-views__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	font-size: 0.9em;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
}

.qlist-views__item[aria-current="true"] {
	background: #1f2937;
	color: #fff;
}

.qlist-views__item svg {
	width: 16px;
	height: 16px;
}

.qlist-views__sort {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9em;
}

.qlist-views__sort select {
	max-width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid #d8dee6;
	border-radius: 6px;
	background: #fff;
}

@media ( max-width: 640px ) {
	.qlist-views__sort {
		margin-left: 0;
		width: 100%;
	}
}

/* --- l'elenco sotto la mappa ------------------------------------------ */

/*
 * Sta qui e non in map.css di proposito. La barra delle viste era finita
 * dentro map.css, che si carica solo quando una mappa c'e' davvero, e nelle
 * altre viste usciva senza stile: un errore che non si vuole rifare. Questo
 * foglio invece arriva ovunque ci sia un archivio.
 */
.qlist-maplist {
	display: block;
	margin: 0 0 1.5rem;
	/* Il bottone e' in linea, quindi lo sposta l'allineamento del testo. Non
	   si fa di details un contenitore flex: e' un elemento con un
	   comportamento suo, e cambiargli display ha fatto danni in passato. */
	text-align: var( --qlist-maplist-align, left );
}

.qlist-maplist__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid #d7dde5;
	border-radius: 8px;
	background: #fff;
	font-size: 0.9em;
	line-height: 1.2;
	cursor: pointer;
	/* La freccina di serie la disegna il browser, e ognuno la disegna a modo
	   suo: si toglie e la parola dice gia' tutto. */
	list-style: none;
}

.qlist-maplist__toggle::-webkit-details-marker {
	display: none;
}

.qlist-maplist__toggle:hover,
.qlist-maplist__toggle:focus-visible {
	border-color: #b9c3cf;
}

/*
 * Aperto o chiuso lo dice il browser con l'attributo: le due diciture stanno
 * tutte e due in pagina e si alternano con il CSS, senza una riga di
 * JavaScript. Senza foglio di stile si vedono entrambe, che e' brutto ma non
 * rotto — il bottone continua a funzionare.
 */
.qlist-maplist__label--hide {
	display: none;
}

.qlist-maplist[open] .qlist-maplist__label--show {
	display: none;
}

.qlist-maplist[open] .qlist-maplist__label--hide {
	display: inline;
}

/* L'elenco resta allineato a sinistra: si sposta il bottone, non le righe. */
.qlist-maplist > .qlist-list {
	text-align: left;
}

/*
 * Questa riga sembra superflua e non lo e'. Il browser nasconde da solo quello
 * che sta dentro un details chiuso, ma lo fa con una regola sua, che perde
 * contro qualunque regola di un foglio di stile: .qlist-list dichiara
 * display:flex, e vinceva. Risultato, un elenco "chiuso" che si vedeva lo
 * stesso. L'ha trovato la sonda nel browser, non la lettura del codice.
 */
.qlist-maplist:not( [open] ) > .qlist-list {
	display: none;
}

/* --- la vista a elenco ------------------------------------------------ */

.qlist-list {
	display: flex;
	flex-direction: column;
	margin: 0 0 1.5rem;
	border: 1px solid #e3e7ec;
	border-radius: 10px;
	overflow: hidden;
}

.qlist-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding: 0.85rem 1rem;
	border-top: 1px solid #eef1f4;
}

.qlist-list__row:first-child {
	border-top: 0;
}

.qlist-list__title {
	font-weight: 600;
	text-decoration: none;
}

/*
 * I campi della riga sono lo stesso blocco a due colonne della card, non una
 * resa a parte: cosi' l'etichetta accesa o spenta, di fianco o sopra, e tutto
 * il suo aspetto valgono qui come li'. Il blocco sta accanto al nome finche'
 * c'e' spazio e gli va sotto quando non ce n'e' piu'.
 */
.qlist-list__fields {
	flex: 1 1 18rem;
	min-width: 0;
	font-size: 0.92em;
}

/* Dentro una riga di elenco il blocco non deve aggiungere spazio sotto: ce
   l'ha gia' la riga. */
.qlist-list__fields .qlist-rows {
	margin-bottom: 0;
}

.qlist-list__meta {
	font-size: 0.88em;
	opacity: 0.75;
}

.qlist-list__distance {
	margin-left: auto;
	font-size: 0.85em;
	white-space: nowrap;
	opacity: 0.7;
}

/* --- l'indirizzo composto --------------------------------------------- */

.qlist-address-lines {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.qlist-address-lines__line {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
}

.qlist-address-lines__line svg {
	flex: 0 0 auto;
	margin-top: 0.15em;
}

/* Il pulsante dei menu che si mandano da soli: lo nasconde JavaScript, non
   il CSS, così senza JavaScript resta l'unico modo per ordinare. */
.qlist-views__apply {
	padding: 0.35rem 0.7rem;
	border: 1px solid var( --qlist-border );
	border-radius: 6px;
	background: #fff;
	font-size: 0.9em;
	cursor: pointer;
}

/* --- vicino a me ------------------------------------------------------ */

.qlist-near {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.9em;
}

.qlist-near select {
	padding: 0.35rem 0.5rem;
	border: 1px solid var( --qlist-border );
	border-radius: 6px;
	background: #fff;
}

.qlist-near__note:empty {
	display: none;
}

.qlist-near__note {
	font-size: 0.85em;
	opacity: 0.75;
}

.qlist-near__off {
	font-size: 0.85em;
}

/*
 * L'etichetta della directory nella ricerca unificata. Non e' uno stato ne'
 * un avviso: dice solo da dove viene una scheda, quindi resta grigia e piccola
 * e non litiga con il nome, che e' la cosa da leggere.
 */
.qlist-badge {
	display: inline-block;
	margin-left: .5em;
	padding: 1px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .75em;
	line-height: 1.6;
	opacity: .7;
	vertical-align: middle;
	white-space: nowrap;
}

.qlist-filter--directory select {
	width: 100%;
}

/* ---------------------------------------------------------------------
 * Accesso
 * ------------------------------------------------------------------ */

.qlist-login {
	max-width: 28rem;
}

/* La casella «ricordami» sta accanto alla sua etichetta, non sopra. */
.qlist-field--check label {
	display: flex;
	align-items: center;
	gap: .5em;
	font-weight: normal;
}

.qlist-field--check input {
	margin: 0;
}

/*
 * I due collegamenti sotto il modulo. In riga finche' ci stanno, a capo
 * quando lo schermo si stringe: sono due strade diverse, non una frase.
 */
.qlist-login__links {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.5em;
	margin-top: 1em;
}

/*
 * Il modulo per farsi rimandare la conferma. Sta sopra quello di accesso e
 * deve leggersi come una cosa a parte, non come un pezzo in piu' del login.
 */
.qlist-resend {
	max-width: 28rem;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid currentColor;
}

/*
 * Il riquadro dell'account, quello dell'intestazione.
 *
 * E' un <details>, quindi il menu si apre senza JavaScript e senza richieste:
 * tutto quello che serve e' gia' nella pagina. Il CSS gli toglie la freccetta
 * che il browser mette da solo e lo stacca dal flusso, perche' un menu che
 * aprendosi allarga l'intestazione la fa saltare.
 */
.qlist-account {
	position: relative;
	display: inline-block;
}

.qlist-account--out {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1.25em;
}

.qlist-account__trigger {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .25em 0;
	cursor: pointer;
	list-style: none;
}

/* La freccetta: Chrome la mette con ::marker, Safari con ::-webkit-details-marker. */
.qlist-account__trigger::-webkit-details-marker {
	display: none;
}

.qlist-account__trigger::marker {
	content: '';
}

.qlist-account__icon {
	flex: none;
}

.qlist-account__menu {
	position: absolute;
	z-index: 20;
	top: 100%;
	/*
	 * Ancorato a destra: nell'intestazione il riquadro sta all'estremita'
	 * destra, e un menu ancorato a sinistra uscirebbe dallo schermo.
	 */
	right: 0;
	min-width: 12rem;
	margin: .25em 0 0;
	padding: .35em 0;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: #fff;
	list-style: none;
	text-align: left;
}

.qlist-account__item a {
	display: block;
	padding: .45em 1em;
	text-decoration: none;
	white-space: nowrap;
}

.qlist-account__item--out {
	margin-top: .35em;
	padding-top: .35em;
	border-top: 1px solid currentColor;
}