/* ============================================================================
   LYFERA — LA TESTATA, IMPLEMENTAZIONE UNICA
   ----------------------------------------------------------------------------
   Attivita D0.2 - 2026-08-05.

   Queste regole erano scritte DUE VOLTE, identiche al carattere: in
   vetrina/assets/lyfera.css e in account/assets/shell.css. Il commento in testa
   a shell.css chiedeva gia questo lavoro: "la mossa giusta e estrarre i token
   e far ereditare a entrambe le superfici lo stesso .masthead, invece di avere
   due copie che si somigliano". Due costruzioni diverse divergono sempre,
   qualunque token condividano.

   COSA RESTA FUORI DI PROPOSITO
   Ogni superficie tiene i propri adattamenti - le @media, il contenuto delle
   celle, le varianti del guscio - nel proprio foglio, DOPO questo. La cascata
   li fa vincere: qui c'e la costruzione, li c'e cosa ci sta dentro.

   Le misure (--chrome-cell, --mark-*, --chrome-h) sono in tokens.css §5.
   ========================================================================= */

.masthead { position: fixed; top: var(--chrome-gap); left: 0; right: 0; z-index: var(--z-fixed); pointer-events: none; }
.masthead__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--chrome-gap); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.masthead__in > * { pointer-events: auto; }
.masthead .box { background: var(--surface); min-height: var(--chrome-cell); padding-block: 0; line-height: 1; transition: background-color var(--d-base) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.masthead .box:hover { background: var(--surface-subtle); }
.masthead .box--fill, .masthead .box--fill:hover { background: var(--brand-fill); }
.masthead .box--on { background: var(--n900); color: var(--surface); border-color: var(--n900); }
.masthead .box--on:hover { background: var(--n900); color: var(--surface); }
.chrome-left { display: flex; flex-direction: column; align-items: stretch; }
.chrome-top { display: flex; align-items: stretch; }
.chrome-top > * + * { margin-left: -1px; }
.chrome-mark { flex: 0 0 auto; width: auto; min-width: 0; justify-content: flex-start; padding-inline: var(--mark-respect); overflow: hidden; }
.chrome-mark__art { display: inline-grid; grid-auto-flow: column; align-items: center; }
.mark-slot { display: grid; overflow: hidden; opacity: 1; transition: grid-template-columns var(--d-chrome) var(--ease-out), opacity var(--d-base) var(--ease-out); }
.mark-slot--full { grid-template-columns: calc(var(--mark-full) * 3.738); }
.mark-slot--min { grid-template-columns: 0px; opacity: 0; }
.masthead.is-compact .mark-slot--full { grid-template-columns: 0px; opacity: 0; }
.masthead.is-compact .mark-slot--min { grid-template-columns: calc(var(--mark-min) * 1.919); opacity: 1; }
.mark-art { display: block; background-repeat: no-repeat; background-position: left center; background-size: contain; }
.mark-art--full { height: var(--mark-full); width: calc(var(--mark-full) * 3.738); background-image: url("logo-full.png"); }
.mark-art--min { height: var(--mark-min); width: calc(var(--mark-min) * 1.919); background-image: url("logo-minimal.png"); }
:root[data-theme="dark"] .mark-art--full { background-image: url("logo-full-dark.png"); }
:root[data-theme="dark"] .mark-art--min { background-image: url("logo-minimal-dark.png"); }
.chrome-nav { display: grid; grid-template-rows: 1fr; margin-top: -1px; overflow: hidden; opacity: 1; transition: grid-template-rows var(--d-chrome) var(--ease-out), opacity var(--d-base) var(--ease-out); }
.chrome-nav__row { display: flex; align-items: stretch; min-height: 0; }
.chrome-nav__row > * + * { margin-left: -1px; }
.masthead.is-nav-hidden .chrome-nav { grid-template-rows: 0fr; opacity: 0; }
.chrome-right { display: flex; }
.chrome-right > * + * { margin-left: -1px; }
.chrome-rule { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; }
.chrome-rule span { display: block; height: 1px; background: currentColor; }
.chrome-rule span:last-child { width: 70%; margin-left: auto; }

/* NOTA — .box--on, .box--fill:hover e .box--mark NON sono qui, e non ci torneranno.
   Sono varianti del componente .box, che resta locale e diverso fra le due
   superfici. Portate qui finivano PRIMA della loro base: a parita di specificita
   la base vinceva, e lo stato attivo spariva da quattro pagine gia consegnate.
   Una variante non si separa mai dalla base che modifica. */