/* ==========================================================================
   RADAR.casa — IL MARCHIO CHE GIRA E IL CAMBIO TEMA
   Le due cose che il disegno mette in testata e che il tema non aveva.
   Si accoda dopo `radar.css` (ne usa i token) e prima di `ossatura.css`.

   ┌──────────────────────────────────────────────────────────────────────┐
   │ DA DOVE VIENE OGNI COSA                                              │
   │                                                                      │
   │ Il glifo   → `_disegno/_render.html`, il nodo `data-logo="1"`:       │
   │              un box 27×27 con cinque <span> sovrapposti, e le sue    │
   │              misure sono copiate una per una (inset 0, inset 6px,    │
   │              7×7 centrato con margin -3.5px).                        │
   │ Le regole  → `_disegno/token.css` §IL MARCHIO.                       │
   │ Le tre     → `_disegno/schermate/_regole.css` §3, verbatim.          │
   │  animazioni  ⛔ NON da `_disegno/marchio-animato.css`: ritirato il    │
   │              15/8/2026, aveva la regola di `prefers-reduced-motion`  │
   │              strappata dalla sua media query.                        │
   │ Il bottone → `_disegno/schermate/cerca.html` §testata (r.17): la     │
   │              pillola 44px col mezzo cerchio davanti.                 │
   │ La parola  → `_disegno/testi.md` r.11, `{{ temaLabel }}`: il bottone │
   │              dice lo STATO CORRENTE a parole, non l'azione.          │
   └──────────────────────────────────────────────────────────────────────┘

   🚨 LE DUE COSE CHE IL DISEGNO NON PUÒ DARE COSÌ COM'È

   1. **Nel disegno il marchio non sta in testata.** È `position:fixed`,
      `z-index:8200`, sopra una foto, e il suo testo è `--su-vetro`. Da noi sta
      in flusso dentro `<header class="testata">`, su `--superficie`. Quindi il
      TESTO non cambia — resta quello di `radar.css` §marchio, `--marchio` con
      la coda distinta dal peso — perché `--marchio-chiaro` #E07A5F su avorio
      fa **2,76:1** e su bianco **2,60:1** (misurati). Qui si aggiunge solo la
      disposizione a due pezzi: glifo e testo.

   2. **Il glifo del disegno è tarato su fondo scuro.** Le sue quattro tinte
      sono #E07A5F, che su `--superficie` bianca non arriva a 3:1. La geometria
      e le opacità si copiano **identiche**; cambia la sola tinta di base, che
      diventa `--marchio` — cioè #E07A5F in scuro (**identico al disegno**) e
      #B5452E in chiaro. Numeri misurati in §5 di questo file.

   ⚠ IL RIPIEGO — perché ogni tinta è scritta due volte
   `light-dark()` dentro una custom property NON ha ripiego per doppia
   dichiarazione: misurato il 16/8/2026 su Chrome, una funzione ignota dentro
   una custom property **vince lo stesso** sulla riga precedente e chi la usa
   diventa «invalid at computed-value time» — il colore non torna al chiaro,
   sparisce. L'unico cancello che funziona è `@supports`. → rapporto F0 turno 7.

   INDICE
     1. Il marchio: la riga
     2. Il glifo: i cinque strati
     3. Le tre animazioni
     4. Chi non vuole il movimento
     5. Il cambio tema: la pillola
     6. Sotto i 600px la testata si stringe
     7. Il menù utente da connesso — turno 12
     8. Il menù principale sotto i 680px — turno 12
   ========================================================================== */


/* ==========================================================================
   1 · IL MARCHIO — la riga

   `radar.css` §marchio possiede il carattere, il colore e le maiuscole del
   testo. Qui si aggiunge solo che adesso i pezzi sono due.

   ⚠ Il testo sta in UN solo figlio (`.marchio__testo`): se `__nome` e `__coda`
   fossero due elementi flex diretti, il `gap` di 9px si infilerebbe fra
   «RADAR» e «.casa» e il marchio si spaccherebbe in due parole.
   ========================================================================== */

.marchio {
	display: inline-flex;
	align-items: center;
	gap: 9px;                      /* `_render.html`, il nodo data-logo */
}


/* ==========================================================================
   2 · IL GLIFO — cinque strati in 27×27

   Le quattro tinte del disegno sono opacità della stessa terracotta. Stanno
   qui come token perché la coppia chiaro/scuro sia in un posto solo: il valore
   scuro è **esattamente** quello del disegno (rgba di #E07A5F), quello chiaro
   è lo stesso alfa su #B5452E, che è `--marchio` in chiaro.
   ========================================================================== */

.marchio__glifo {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 27px;
	height: 27px;

	/* Ripiego: browser senza `light-dark()` restano al chiaro (vedi §intestazione). */
	--glifo-anello:   rgba(181, 69, 46, .34);
	--glifo-interno:  rgba(181, 69, 46, .22);
	--glifo-spazzata: rgba(181, 69, 46, .62);
	--glifo-scia:     rgba(181, 69, 46, .06);
}

@supports (color: light-dark(#000, #fff)) {
	.marchio__glifo {
		--glifo-anello:   light-dark(rgba(181, 69, 46, .34), rgba(224, 122, 95, .34));
		--glifo-interno:  light-dark(rgba(181, 69, 46, .22), rgba(224, 122, 95, .22));
		--glifo-spazzata: light-dark(rgba(181, 69, 46, .62), rgba(224, 122, 95, .62));
		--glifo-scia:     light-dark(rgba(181, 69, 46, .06), rgba(224, 122, 95, .06));
	}
}

.marchio__glifo > span {
	position: absolute;
	display: block;
	border-radius: 50%;
}

/* 1 — l'anello esterno */
.marchio__anello { inset: 0; border: 1px solid var(--glifo-anello); }

/* 2 — l'anello interno */
.marchio__anello-2 { inset: 6px; border: 1px solid var(--glifo-interno); }

/* 3 — la spazzata che gira */
.marchio__spazzata {
	inset: 0;
	background: conic-gradient(from 0deg, var(--glifo-spazzata), var(--glifo-scia) 26%, transparent 40%);
	animation: sweep 3.6s linear infinite;
}

/* 4 — l'anello che si allarga e sparisce */
.marchio__impulso {
	inset: 0;
	border: 1px solid var(--marchio);
	animation: ring 3.6s ease-out infinite;
}

/* 5 — il punto che pulsa. Il 7×7 centrato del disegno, `margin:-3.5px 0 0 -3.5px`. */
.marchio__punto {
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	background: var(--marchio);
	animation: blip 3.6s ease-in-out infinite;
}


/* ==========================================================================
   3 · LE TRE ANIMAZIONI
   Copiate da `_disegno/schermate/_regole.css` §3, verbatim. Girano tutte a
   3,6s ed è quello che le tiene insieme: sono lo stesso radar.
   ========================================================================== */

@keyframes sweep { 0% { transform: rotate(0); }        100% { transform: rotate(360deg); } }
@keyframes ring  { 0% { transform: scale(.28); opacity: .9; } 72% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@keyframes blip  { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.55); opacity: .6; } }


/* ==========================================================================
   4 · CHI NON VUOLE IL MOVIMENTO NON LO RICEVE

   `radar.css` §movimento già schiaccia tutto a `.01ms` con
   `animation-iteration-count: 1`, ma per questi due strati non basta: fermare
   l'impulso al suo fotogramma finale lo lascia a `scale(1) opacity 1`, cioè un
   anello pieno in più che il disegno non ha. Qui si spegne e si tiene il
   marchio fermo: due anelli, la spazzata immobile, il punto.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.marchio__spazzata,
	.marchio__punto { animation: none; }
	.marchio__impulso { animation: none; opacity: 0; }
}


/* ==========================================================================
   5 · IL CAMBIO TEMA — la quarta parte della testata

   Sta **prima** dell'azione, come nel disegno. Dice lo stato corrente a
   parole: `automatico` · `chiaro` · `scuro`.

   🚨 9/9/2026 — voce 64 di `DETTO-DA-GABRIELE.md`: non ruota più al click,
   è un menù a tendina con le tre voci esplicite in quest'ordine. `.tema` è
   adesso l'INVOLUCRO (`position:relative`, il disclosure widget); la pillola
   che si vedeva prima è `.tema__bottone`, e le voci sono `.tema__menu` +
   `.tema__voce` — stessa famiglia di `.utente__menu` §7 qui sotto, stessi
   token.

   ⚠ SENZA JAVASCRIPT NON SI VEDE, ed è voluto. Senza JS il sito segue il
   sistema (`color-scheme: light dark` in `radar.css`) e un bottone che non fa
   niente è peggio di nessun bottone. Lo accende lo `<script>` anti-lampo di
   `header.php`, che mette `data-js` su `<html>` prima del primo paint: chi ha
   JS lo vede subito, senza salti d'impaginazione.

   ⚠ LA PAROLA GIUSTA È GIÀ NEL PRIMO PAINT. Le tre parole sono tutte e tre nel
   markup e ne compare una sola, scelta da `data-tema` che l'anti-lampo scrive
   prima che si disegni: così chi ha scelto «scuro» non vede lampeggiare
   «automatico». Le altre due sono `display:none`, quindi fuori anche
   dall'albero di accessibilità.

   CONTRASTI, misurati il 16/8/2026 sul banco (§rapporto F0 turno 7):
     testo `--testo-2` su `--superficie`     chiaro 5,95:1 · scuro 6,29:1
     bordo `--testo-2` su `--superficie`     idem — sopra i 3:1 di WCAG 1.4.11
     `--bordo` NON si usa: 1,30:1 su bianco, la stessa ragione per cui
     `ossatura.css` §modulo l'ha rifiutato sui campi.
   ========================================================================== */

/* Le due parti di destra vanno a capo insieme, come nel disegno (`cerca.html`
   r.16). ⚠ Non è un guadagno di altezza e il numero è misurato: a 375px la
   testata è alta **137px** in tutti e due i casi, perché `.testata__riga` va a
   capo comunque una volta sola. Cambia **cosa** va a capo: senza involucro
   scende la sola azione (marchio+tema restano insieme in cima), con involucro
   scende la coppia tema+azione e il marchio resta solo sulla sua riga. */
.testata__coda {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

/* L'involucro: non è più il bottone, è il disclosure widget — stessa
   struttura di `.utente` §7 (`position:relative`, il riquadro assoluto
   dentro). Nascosto di serie come prima: senza JS il widget non farebbe
   niente. */
.tema { display: none; }

:root[data-js] .tema {
	display: inline-block;
	position: relative;
}

:root[data-js] .tema__bottone {
	display: inline-flex;
	align-items: center;
	gap: 9px;                       /* `cerca.html` r.17 */
	min-height: var(--tocco, 44px); /* il bersaglio: 44px netti */
	padding: 0 15px;
	border: 1px solid var(--testo-2);
	border-radius: var(--raggio-pillola, 999px);
	background: transparent;
	color: var(--testo-2);
	font-family: inherit;
	font-size: .9375rem;            /* 15px, come il disegno */
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.tema__bottone:hover,
.tema__bottone:focus-visible {
	background: var(--superficie-alt);
	color: var(--testo);
	border-color: var(--testo);
}

/* Il riquadro delle tre voci — stessi token di `.utente__menu` §7. `left: 0`
   e non `right: 0`: il cambio tema è il primo elemento di `#testata-coda`,
   non l'ultimo, e ad ancorarlo a sinistra il riquadro resta dentro lo
   schermo sia a 1440 (c'è spazio a destra) sia a 390 (dentro il pannello del
   menù sotto i 680px, dove il widget occupa già quasi tutta la larghezza). */
.tema__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
}

.tema__voce {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: var(--tocco, 44px); /* il bersaglio: 44px netti, come `.tema__bottone` */
	padding: 8px 12px;
	border: 0;
	border-radius: calc(var(--raggio) - 4px);
	background: transparent;
	color: var(--testo);
	font-family: inherit;
	font-size: .9375rem;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.tema__voce:hover,
.tema__voce:focus-visible {
	background: var(--superficie-alt);
	outline: none;
}

.tema__voce:focus-visible {
	box-shadow: inset 0 0 0 2px var(--azione);
}

/* LO STATO SI VEDE, NON SOLO A COLORI — un segno di spunta, non solo un
   colore diverso: chi non distingue i colori deve trovare la voce attiva lo
   stesso. `aria-checked` lo scrive `assets/js/tema.js`; qui si legge il
   valore vero sul DOM, non si duplica in una classe. */
.tema__spunta {
	flex: 0 0 auto;
	width: 14px;
	height: 8px;
	visibility: hidden;
}

.tema__spunta::before {
	content: "";
	display: block;
	width: 8px;
	height: 4px;
	margin-top: 1px;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
}

.tema__voce[aria-checked="true"] .tema__spunta {
	visibility: visible;
}

/* Il mezzo cerchio: metà pieno, metà vuoto. `cerca.html` r.17, verbatim. */
.tema__segno {
	flex: 0 0 auto;
	display: block;
	width: 17px;
	height: 17px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}

/* SPARIRE DAGLI OCCHI NON È SPARIRE DALL'ALBERO.

   `display: none` toglie un nodo anche ai lettori di schermo. Questo lo toglie
   **solo alla vista** e lo lascia nel nome accessibile. Serve a due cose, e la
   differenza fra le due è tutto il punto:

     `.tema__detto`   «Tema:» non si vede mai — senza, il nome del bottone
                      sarebbe la sola parola «scuro».
     `.tema__stato`   sotto i 600px (§6) la parola sparisce dagli occhi ma NON
                      dalle orecchie: il bottone resta «Tema: automatico» anche
                      quando è un tondo con dentro un segno.

   ⚠ Le tre parole DENTRO `.tema__stato` restano governate da `display`, una
     sola visibile per volta: qui si nasconde l'involucro, non la scelta. */
.tema__detto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tema__stato > [data-tema-nome] { display: none; }

:root:not([data-tema]) .tema__stato > [data-tema-nome="automatico"],
:root[data-tema="automatico"] .tema__stato > [data-tema-nome="automatico"],
:root[data-tema="chiaro"]     .tema__stato > [data-tema-nome="chiaro"],
:root[data-tema="scuro"]      .tema__stato > [data-tema-nome="scuro"] { display: inline; }

/* ==========================================================================
   6 · SOTTO I 600px LA TESTATA SI STRINGE, NON VA A CAPO

   👉 TURNO 12, RIMISURATO A 390px SUL BANCO — «Diventa partner» (171px, e
   sotto i 600 diventava «Partner», 111px, clippato) non c'è più: l'azione è
   **«Accedi»**, e misurata sul banco la sua pillola è **109px** anche scritta
   per intero. Qui **non c'è più nessun `.testata__azione-lungo/-corto`**:
   quella coppia esisteva solo per accorciare un verbo che non ci sta, e
   «Accedi» ci sta sempre. Chi la cercasse la trovi cancellata qui, non
   altrove — insieme al conto in pixel che la giustificava, che parlava di
   un'altra parola e oggi direbbe un numero falso.

   ⚠ Quello che NON cambia, verificato di nuovo: `.testata__coda` (il
   marchio da solo sulla sua riga, tema+azione appaiati sulla loro — vedi il
   commento su quell'involucro in `header.php`) resta **due righe**, non una:
   misurato a 390px, marchio riga 1 (157px), tema+azione riga 2 (44+9+109 =
   162px, ben dentro i 358px disponibili — non gli serve nessuna forma
   corta). Resta invece, tale e quale, la sola cosa per cui serviva un taglio
   per davvero: il bottone del tema perde la parola sotto i 600px e resta un
   tondo di 44 — bersaglio intatto, parola ancora nel nome accessibile (§5,
   `.tema__stato`). Quel taglio serve **a prescindere** da cosa c'è dopo di
   lui in coda.

   Il disegno fa la stessa cosa sotto i 900px: una centralina di interruttori il
   cui primo è `[data-mhide]{display:none!important}` → `_regole.css` §1. Qui la
   soglia è 600 perché fra 600 e 900 ci sta tutto per intero — misurato.
   ========================================================================== */

@media (max-width: 599px) {

	/* Il tondo. `width` e non `padding` perché il bersaglio dev'essere 44×44
	   esatti, non «44 più quello che ci sta dentro». ⚠ Selettore aggiornato
	   il 9/9/2026: `.tema` è diventato l'involucro del menù (sopra, §5), la
	   pillola misurata è `.tema__bottone`. Da `ossatura.css` (8/9/2026) questo
	   tondo è già forzato **a ogni larghezza**, non solo qui sotto i 600px:
	   questa regola resta per chi disattiva quel foglio, non è la sola fonte. */
	:root[data-js] .tema__bottone {
		width: var(--tocco, 44px);
		padding: 0;
		gap: 0;
		justify-content: center;
	}

	/* ⚠ Stessa ricetta di `.tema__detto` §5, riscritta e non condivisa: una
	   lista di selettori non può essere condizionata da una media query, e
	   l'alternativa — nascondere sempre e ri-mostrare sopra i 600 — vorrebbe
	   sette dichiarazioni di disfacimento, che è più fragile di questa.
	   ⛔ NON diventi `display: none`: il bottone perderebbe il nome. */
	.tema__stato {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Il nome dell'utente connesso può essere lungo quanto vuole chi lo ha
	   scelto — non è un verbo di due misure come «Diventa partner» era, è un
	   dato dell'utente e non si può clippare a una seconda parola prevedibile.
	   Qui si accorcia con l'ellissi, e la freccetta resta sempre visibile: il
	   nome intero sta comunque nel nome accessibile del bottone
	   (`aria-label="Menù di …"`, `header.php`), quindi non si perde niente per
	   chi ascolta anche quando l'occhio vede «Mariangela…». */
	.utente__nome {
		max-width: 96px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


/* ==========================================================================
   7 · IL MENÙ UTENTE DA CONNESSO — turno 12, non c'era niente

   Il bottone riusa `.testata__azione` (`ossatura.css` §4: la pillola
   contornata col segno davanti — qui non è un pin, è un'aggiunta di forma,
   non di sostanza, e `ossatura.css` non è di questa squadra questo turno).
   Qui sta solo quello che il bottone non aveva già: la freccetta, il
   riquadro a comparsa e i suoi stati.

   Disclosure widget minimo: `aria-expanded` sul bottone e `hidden` sul
   `<ul>`, mossi dallo script in `header.php` dopo `</header>`. Nessuna
   classe "aperto/chiuso" da tenere in sincronia con l'attributo: lo stato
   è UNO solo, l'HTML.
   ========================================================================== */

.utente {
	position: relative;
}

.utente__bottone {
	/* `.testata__azione` dà già la pillola; qui il gap fra nome e freccetta. */
	gap: 8px;
	cursor: pointer;
}

/* Il mezzo cerchio del cambio tema gira; questa è una freccetta ferma che
   gira LEI sola di 180° quando il riquadro è aperto — `aria-expanded` è
   la fonte della verità, letta in CSS e non duplicata in una classe. */
.utente__freccia {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.utente__bottone[aria-expanded="true"] .utente__freccia { transform: rotate(-135deg); }

/* Il riquadro. `position: absolute` dentro `.utente` (`position: relative`
   qui sopra): non sposta niente attorno a sé, come un `<details>` nativo
   non farebbe se il browser gli desse questo stesso vestito. */
.utente__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
}

.utente__menu a {
	display: flex;
	align-items: center;
	/* `min-height` e non solo `padding`: a 5 voci il criterio del lotto G è
	   bersagli ≥44px, e 10px+10px di padding sopra un testo `.9375rem` da
	   solo restava un soffio sotto — misurato, non supposto. */
	min-height: 44px;
	padding: 10px 12px;
	border-radius: calc(var(--raggio) - 4px);
	color: var(--testo);
	font-size: .9375rem;
	text-decoration: none;
	white-space: nowrap;
}

.utente__menu a:hover,
.utente__menu a:focus-visible {
	background: var(--superficie-alt);
	outline: none;
}

.utente__menu a:focus-visible {
	box-shadow: inset 0 0 0 2px var(--azione);
}

/* -----------------------------------------------------------------------
 * G1 — la riga di separazione fra i tre gruppi del menù, GIRO 2, 10/9/2026
 * (MODELLO-UTENTE §3.4: «dove sono le mie cose» · «cosa posso fare» ·
 * «me ne vado»). `<li role="separator" aria-hidden="true">` senza `<a>`
 * dentro: non tabbabile, non letto da chi ascolta — è un tratto, non una
 * voce. `margin` invece di `padding` sul contenitore: il filo non tocca i
 * bordi del riquadro, stessa cornice interna delle voci sopra e sotto.
 * ----------------------------------------------------------------------- */
.utente__separatore {
	height: 1px;
	margin: 6px 8px;
	background: var(--bordo);
}


/* ==========================================================================
   8 · IL MENÙ PRINCIPALE SOTTO I 680px — turno 12, regressione segnalata da
   Gabriele dal telefono

   🚨 IL CONTO, MISURATO SUL BANCO. Con le quattro voci vere (`_s4-menu.php`)
   `.testata .menu` non ci sta più su una riga sola dai 680px in giù, e
   `.testata__riga` — che va a capo comunque, marchio da una parte, il resto
   dall'altra (§6) — doveva spartire fra marchio, menù E coda invece che fra
   marchio e coda soli. Altezza di `.testata`, misurata:

     390px   137px → 245px (marchio · menù su due righe · coda: 4 righe)
     600px   137px → 197px
     660px   137px → 197px
     680px   137px → 137px   (da qui in su non cambia niente: non si tocca)

   Non si toglie una voce — sono giuste, ordine di Gabriele del turno stesso
   — **si accorcia la testata**: il menù entra in un bottone.

   👉 IL «CHIUSO» È UNA CLASSE, NON UN `display:none` DI SERIE, ED È LA COSA
   che fa reggere l'obbligo di sopra: *senza JavaScript il menù deve restare
   raggiungibile*. La regola che nasconde `#menu-principale` vive **dentro**
   `:root[data-js]`: quell'attributo lo scrive solo l'anti-lampo di
   `header.php`, quindi senza JavaScript la regola non esiste affatto e il
   `<nav>` resta un flex item normale di `.testata__riga` — va a capo da
   solo, più alto (245px, il numero di prima), ma sempre lì, sempre nel giro
   di tabulazione. Stessa filosofia del cambio tema (§5), speculare: là senza
   JS il bottone non compare perché non farebbe niente; qui senza JS è il
   bottone a non comparire e il contenuto a restare.

   Il bottone riusa la pillola di `.tema__bottone` (bordo, altezza 44,
   raggio) — non ne serve una terza — e aggiunge solo il segno «hamburger»
   in tre trattini,
   disegnati come `.tema__segno` disegna il suo mezzo cerchio: in CSS, non
   in un'immagine.
   ========================================================================== */

.menu-attiva { display: none; }

@media (max-width: 679px) {

	/* LA TESTATA SU UNA RIGA SOLA — coordinatore, 4/9/2026: con `tema` e
	   `Accedi`/utente spostati dentro il pannello del menù (`header.php`,
	   `sistemaCoda()`), la riga porta solo marchio + bottone «Menù», ed è
	   la stessa pillola di 44px di sempre — non serve più il padding
	   verticale intero di `.testata` (`var(--passo)`, 16px, pensato per
	   quando la riga aveva DUE gruppi di controlli). Misurato: 44px di
	   bersaglio + 2×9px di respiro + 1px di bordo = 63px (criterio: ≤64px),
	   contro i 77px di prima (e di oggi a 1440, dove questa regola non
	   entra). */
	.testata {
		padding-block: 9px;
	}

	:root[data-js] .menu-attiva {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: var(--tocco, 44px);
		padding: 0 15px;
		border: 1px solid var(--testo-2);
		border-radius: var(--raggio-pillola, 999px);
		background: transparent;
		color: var(--testo);
		font-family: inherit;
		font-size: .9375rem;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	:root[data-js] .menu-attiva:hover,
	:root[data-js] .menu-attiva:focus-visible {
		background: var(--superficie-alt);
		color: var(--testo);
		border-color: var(--testo);
	}

	/* Tre trattini, `currentColor` come `.tema__segno`: nessun'altra tinta da
	   tenere allineata al tema. */
	.menu-attiva__segno {
		position: relative;
		flex: 0 0 auto;
		width: 16px;
		height: 11px;
	}

	.menu-attiva__segno,
	.menu-attiva__segno::before,
	.menu-attiva__segno::after {
		border-top: 1.5px solid currentColor;
	}

	.menu-attiva__segno::before,
	.menu-attiva__segno::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
	}

	.menu-attiva__segno::before { top: 4px; }
	.menu-attiva__segno::after  { top: 8px; }

	/* Il chiuso di serie — SOLO qui dentro, SOLO con `data-js` (vedi sopra). */
	:root[data-js] #menu-principale { display: none; }

	/* L'aperto: riga sua, sotto il marchio. `flex-basis: 100%` è il trucco
	   che fa iniziare una riga nuova in un flex-wrap senza un secondo
	   contenitore — lo stesso principio di `.testata__coda` (`header.php`),
	   non lo stesso codice perché lì il pacco è già fatto a parte.
	   ⚠ Nessun `order`: il `<nav>` è già secondo nel markup, fra `.marchio` e
	   `.testata__coda` — dargli un `order` esplicito lo spingerebbe DOPO la
	   coda, che è rimasta all'ordine di serie (0). */
	:root[data-js] #menu-principale.menu-aperta {
		display: block;
		flex: 1 0 100%;
		margin-top: 4px;

		/*
		 * 🚨 9/9/2026 — FONDO PIENO, non un terzo strato trasparente.
		 *
		 * Segnalato dal coordinatore su `tema-390-aperto-scuro.png`: `.testata`
		 * è trasparente qui (`body.testata-sul-velo .testata`, `cerca.css` —
		 * NON toccato, resta del suo lotto), voluta così per stare sopra la
		 * foto quando il pannello è chiuso. Ma il pannello APERTO copre le voci
		 * di navigazione, tema, accedi/registrati (`sistemaCoda()` li sposta
		 * tutti qui dentro sotto i 680px): senza un fondo suo, si legge
		 * attraverso il titolo e la pillola della sezione sotto.
		 *
		 * `var(--superficie)`: lo stesso token che regge `.testata` quando NON
		 * è sul velo (`radar.css`, `.testata { background: var(--superficie) }`)
		 * — non un colore nuovo. Il testo dentro (nav, `.tema__bottone`,
		 * `.testata__azione`) usa già `--testo`/`--testo-2`, la stessa coppia
		 * di sempre: non serve forzarlo, il contrasto è quello già misurato per
		 * quella coppia altrove sul sito. Misurato di nuovo qui sotto §8-bis.
		 *
		 * ⛔ Non tocca `.testata` (resta `position:absolute` e trasparente a
		 * riposo, come deve restare a 1440): il fondo pieno sta SOLO sul
		 * pannello aperto, sotto i 680px.
		 */
		background: var(--superficie);
		border: 1px solid var(--bordo);
		border-radius: var(--raggio);
		padding: 12px;
		box-shadow: var(--ombra);
	}
}


/* ==========================================================================
   3 · IL MARCHIO NEL PIEDE — 30px, quattro strati

   Il disegno lo ridisegna più grande e più semplice: `partner.html` §piede,
   **30×30** e **quattro** strati invece di cinque, senza l'anello interno.
   Non è una svista sua: a 30px su un fondo d'inchiostro il secondo anello si
   perde, e togliendolo la spazzata si legge meglio.

   ⚠ Le quattro tinte qui NON seguono il tema, e non è una dimenticanza: il
   piede è **sempre** una fascia d'inchiostro, in chiaro come in scuro. Quindi
   qui vale sempre il membro chiaro della coppia — `--marchio-chiaro` #E07A5F,
   che sull'inchiostro fa 6,34:1 — che è esattamente il valore del disegno.
   È la stessa ragione per cui `ossatura.css` §4 dà `--marchio-chiaro` alla coda
   qui e `radar.css` §marchio lo rifiuta in testata: *il contrasto si misura
   sulla coppia che si usa*, e le coppie sono due.
   ========================================================================== */

.marchio--piede .marchio__glifo {
	width: 30px;
	height: 30px;

	/* Gli alfa del disegno, verbatim da `partner.html`: l'anello è .32 e la
	   spazzata .6, un soffio più tenui dei .34/.62 della testata. */
	--glifo-anello:   rgba(224, 122, 95, .32);
	--glifo-spazzata: rgba(224, 122, 95, .6);
	--glifo-scia:     rgba(224, 122, 95, .05);
}

/* Il testo del piede: 17px, la misura del disegno. `ossatura.css` §4 gli dava
   `--t-3` (20px), che non è di nessuno dei due marchi disegnati. */
.marchio--piede { font-size: 17px; }