/* ==========================================================
   Foglio della guida «Le combinazioni di tasti all'avvio del
   Mac» — e di quella soltanto.

   È il PRIMO foglio di un singolo minisito: fino a qui le due
   guide esistenti si accontentavano di minisito.css, che è di
   tutti. Sta qui, e non là, per la regola §11-bis: una regola
   che vale per una guida sola non va nel foglio comune,
   altrimenti il prossimo che apre minisito.css non ha modo di
   sapere che cosa sta muovendo.

   Che cosa contiene: il disegno dei tasti nelle schede, e le
   due righe che le schede di questa guida hanno in più —
   quando si preme, e su quali macchine funziona. Niente
   colori nuovi: tutto viene dalle variabili di stile.css.

   Che cosa NON contiene: il tasto disegnato in sé (<kbd>).
   Quello sta in minisito.css, perché lo usa anche la riga
   «premi Ctrl+K» della barra di ricerca di tutte le guide.
   ========================================================== */

/* --- I tasti in cima alla scheda ------------------------------
   Sono la prima cosa nel riquadro, sopra il nome della modalità.
   In un elenco di sessanta voci si scorre riconoscendo la forma
   dei tasti, e il nome si legge dopo: l'ordine visivo segue il
   modo in cui la pagina viene davvero usata.

   Restano un <p> e non un titolo: il titolo della scheda è il
   nome della modalità, ed è quello che deve leggere chi naviga
   per intestazioni o con uno screen reader. */

.avvio-tasti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 8px;
}

/* più grandi che nel testo corrente: qui sono l'elemento portante
   della scheda, non una citazione dentro una frase */
.avvio-tasti kbd {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
	padding: 1px 8px;
	color: var(--grigio-testo);
}

.avvio-piu {
	color: var(--grigio-bottone);
	font-size: 12px;
}

/* il secondo passo, quando i tasti aprono un menu invece di fare
   direttamente la cosa: sta sulla stessa riga dei tasti perché è parte
   dello stesso gesto, ma in tondo e più piccolo perché non si preme */
.avvio-poi {
	font-size: 12px;
	color: var(--grigio-bottone);
}

/* --- Gli stati, ricolorati ------------------------------------
   minisito.css tinge di rosso i tre stati diversi da "attivo", ed è
   giusto per le altre due guide: là vogliono dire "programma non più
   mantenuto", cioè un avvertimento.

   Qui vogliono dire un'altra cosa. «Non su chip Apple» e «Solo d'epoca»
   sono constatazioni — la combinazione funziona benissimo sulla macchina
   giusta — e in rosso sembrerebbero difetti. Restano grigie. Il rosso
   se lo tiene solo «Rimossa da Apple», che è l'unico caso in cui la
   combinazione non fa più niente da nessuna parte. */
.mini-badge-stato-dormiente,
.mini-badge-stato-archiviato {
	background: var(--grigio-box);
	color: var(--grigio-bottone);
	border-color: var(--mini-bordo);
}

/* --- Le due righe in più delle schede di questa guida --------- */

/* "Quando premere" è l'informazione che manca in quasi tutte le
   guide in circolazione, ed è quella che fa fallire il gesto: sta
   su una riga propria, staccata dalla descrizione. */
.avvio-quando {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--grigio-bottone);
}

.avvio-quando strong {
	color: var(--grigio-testo);
}

.avvio-macchine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin: 0 0 10px;
}

.avvio-macchine-etichetta {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--grigio-bottone);
}

/* Fondo bianco e non grigio come gli altri badge: le macchine sono
   un dato di fatto, non una classificazione redazionale, e devono
   pesare meno del badge del tipo che sta in cima. */
.avvio-badge-piattaforma {
	background: var(--bianco);
	color: var(--grigio-bottone);
	font-weight: normal;
	text-transform: none;
	letter-spacing: 0;
}

/* Lo spazio in più lo assorbe la DESCRIZIONE, non le righe sotto.
   In una griglia le schede affiancate si allungano tutte fino alla più
   alta, e quello spazio deve finire da qualche parte: messo sotto
   «quando premere» apriva un buco in mezzo alla scheda, con le
   macchine staccate dal resto. La regola arriva da minisito.css
   (.mini-scheda-desc { flex: 1 }) e qui si conferma solo la
   spaziatura — non si riscrive. */
.avvio-scheda .mini-scheda-desc {
	margin-bottom: 10px;
}

/* --- Tasti nel testo corrente ---------------------------------
   Nel discorso i tasti compaiono in mezzo a una frase: restano
   alla misura del testo, ma non devono spezzarsi a fine riga
   separando ⌘ da R. */
.mini-contenuto p kbd,
.mini-contenuto li kbd,
.mini-contenuto td kbd {
	white-space: nowrap;
}

@media print {
	/* i tasti sono il contenuto della guida: sulla carta il rilievo
	   sparisce col fondo bianco, quindi si rinforza il contorno */
	.mini-contenuto kbd {
		border-color: #666666;
	}
}