/* ── HOME «OGGI» ────────────────────────────────────────────
   [punto 6, 12/08/2026] Montata dal blocco `data-sec="oggi"` del disegno.

   Come per le direttive, qui c'e' pochissimo: schede, griglie, piastrelle,
   pastiglie e note sono tutte del kit (`nk-card`, `nk-gr`, `nk-sv`, `nk-chip`,
   `nk-note`). Quello che segue e' la scheda in evidenza, l'anteprima del
   messaggio e la modalita' Focus, cioe' i tre pezzi che il kit non ha. */

/**
 * ⛔ LO SPAZIO FRA I BLOCCHI, E PERCHE' NON STA PIU' NEI MARGINI.
 *
 * [13/08/2026, il titolare guardando un account nuovo: «le card sono troppo
 * attaccate tra di loro ed è brutto a livello di design». Qui allora c'era
 * `margin-bottom: 12px` sulle griglie, e l'ho alzato a 18. Il 17/08/2026 la
 * stessa segnalazione, con la stessa schermata: «solo quando è vuota, perché
 * quando ci sono informazioni va bene».]
 *
 * La prima volta ho aggiustato a occhio. La seconda ho misurato
 * (`dev/tests/sonda_home_vuota.html`), e i difetti erano **due**, nessuno dei
 * quali era il numero che avevo alzato:
 *
 *  1. FRA LA SCHEDA DI NOSU E LE DUE IN FONDO C'ERANO **ZERO PIXEL**.
 *     Lo stacco stava scritto su `.hm-ft`, cioe' sulla scheda **piena**: quando
 *     non c'e' niente da approvare `home.js` toglie quella classe, e con lei se
 *     ne andava anche lo spazio. Un margine appeso a una classe che il
 *     JavaScript mette e toglie sparisce proprio nel caso che qui interessa.
 *  2. LE FILE ERANO SFALSATE DI 14 PIXEL, vedi la nota qui sotto.
 *
 * ⚠ Ed e' per questo che «quando ci sono informazioni va bene»: con dei dati
 * dentro le schede sono alte, la scheda in evidenza tiene la sua classe e i suoi
 * 18 pixel, e quattordici di scarto su una scheda da duecento non si notano.
 * Il difetto **si vede solo quando non c'e' niente da vedere**, cioe' il primo
 * giorno di ogni cliente: il momento in cui l'app deve fare la figura migliore.
 * Stessa famiglia della trappola 7, le cose che si vedono solo dall'altra parte
 * di una soglia.
 *
 * ⇒ QUINDI LO SPAZIO FRA I BLOCCHI NON E' PIU' IL MARGINE DI NESSUNO.
 * La Home e' una colonna con un `gap`: un numero solo, che nessuna classe messa
 * o tolta puo' portarsi via. I margini dei blocchi si azzerano, se no si
 * sommerebbero al `gap` e ognuno tornerebbe a dire la sua.
 */
.home-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.home-wrap > * { margin-top: 0; margin-bottom: 0; }
.home-wrap .nk-gr { gap: 14px; }
.home-wrap .hm-ct { margin-bottom: 8px; }

/**
 * ⛔ E QUI C'ERA LA TRAPPOLA DEL KIT, RIMESSA IN PIEDI DA QUESTO FOGLIO.
 *
 * C'era scritto `.home-wrap .nk-card + .nk-card { margin-top: 14px }`, che
 * sembra riguardare le schede impilate. Nella Home **non ce ne sono**: nessuna
 * scheda ha per fratello precedente un'altra scheda. L'unico posto dove quella
 * riga agganciava qualcosa erano le griglie, cioe' esattamente dove il kit dice
 * di non farlo (`nosumo-kit.css`, `.nk-gr > .nk-card + .nk-card { margin-top: 0 }`,
 * col commento che spiega perche').
 *
 * ⚠ E il kit non poteva difendersi: le due regole hanno **la stessa
 * specificita'** (tre classi), quindi decide l'ordine dei fogli, e `home.css` si
 * carica dopo. Misurato: le quattro piastrelle dei numeri partivano a
 * [203, 217, 217, 217] ed erano alte [94, 80, 80, 80], perche' con `stretch` il
 * margine si mangia la traccia. Dall'altra parte dello schermo si legge come una
 * fila di riquadri che non si allineano, e nel foglio della sezione non c'era
 * scritto niente.
 *
 * Chi ha bisogno di staccare due schede impilate dentro la Home usi il `gap`
 * della colonna qui sopra, non un margine sulle schede.
 */

/* ⇒ LA SCHEDA IN EVIDENZA, coi valori del disegno (`.card.ft`).
   ⚠ Qui **non va nessun margine**: lo stacco lo fa il `gap` della colonna, come
   per tutti gli altri blocchi. Un `margin-bottom` scritto qui e' il difetto 1
   qui sopra, che sparisce appena la scheda si svuota.
   [rifatta il 12/08/2026, il titolare ha messo le due schermate a confronto]
   Avevo tenuto solo il bordo piu' vivo pensando che bastasse a dire «guarda
   qui». Non bastava: nel disegno questa scheda ha **due aloni di colore** che
   la staccano dal resto della pagina, e senza quelli sembra una scheda come le
   altre. E' l'unica cosa che chiede una decisione, in mezzo a schermate che
   raccontano e basta: deve vedersi in mezzo secondo. */
.hm-ft {
    border-color: color-mix(in oklch, var(--nk-accent) 32%, var(--nk-line));
    background:
        radial-gradient(90% 120% at 0% 0%, color-mix(in oklch, var(--nk-accent) 13%, transparent), transparent 58%),
        radial-gradient(80% 100% at 100% 0%, color-mix(in oklch, var(--nk-accent-2) 10%, transparent), transparent 55%),
        var(--nk-ink-2);
    box-shadow: var(--nk-glow);
}

.hm-testa {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}
.hm-testa .nk-sp { flex: 1; }
.hm-quando { font-size: 11.5px; color: var(--nk-muted); }

.hm-titolo {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 5px;
}

/* Il messaggio gia' scritto, coi valori del disegno (`.msg`). Va vestito **come
   un messaggio** e non come un campo di testo: e' quello che riceverebbe il
   cliente, e il titolare lo deve leggere con gli occhi con cui lo leggera' lui.
   ⚠ IL FONDO E' BIANCO E LA RIGA A SINISTRA E' COLORATA, e prima avevo fatto il
   contrario (fondo grigio, bordo uguale su tutti i lati): dentro una scheda
   gia' colorata, un rettangolo grigio sembra un campo disabilitato invece di
   una cosa che sta per partire. */
.hm-msg {
    margin: 10px 0;
    padding: 13px 15px;
    border: 1px solid var(--nk-line);
    border-left: 3px solid var(--nk-accent);
    border-radius: 0 var(--nk-r-sm) var(--nk-r-sm) 0;
    background: var(--nk-ink);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.hm-mh {
    font-family: var(--nk-mono);
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nk-muted-2);
    margin-bottom: 7px;
}

/* Quando il titolare lo sta cambiando: stessa scatola, che diventa scrivibile.
   Cambiare forma qui vorrebbe dire far sparire il messaggio e farne comparire
   un altro, e a quel punto uno non sa piu' se sta modificando quello di prima. */
textarea.hm-msg {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    font: inherit;
    font-size: 12.5px;
    color: var(--nk-fg);
}

.hm-mf {
    margin-top: 11px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}

.hm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.hm-nota { margin-top: 10px; }

/* ⇒ L'INTERRUTTORE CONSOLE / FOCUS, in cima a destra come nel disegno.
   [spostato il 12/08/2026: il titolare l'ha notato subito]
   L'avevo messo in fondo alla Home, e sbagliavo di posto e di significato: nel
   disegno sta **nella barra in alto**, accanto al piano, perche' non e' una
   cosa della schermata Oggi, e' un modo di stare nell'app. In fondo alla
   pagina, per giunta, lo vede solo chi scorre fino in fondo, cioe' nessuno di
   quelli che avrebbero bisogno di concentrarsi. */
.hm-mode {
    display: inline-flex;
    background: var(--nk-ink-3);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.hm-mode button {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nk-muted);
    padding: 5px 12px;
    border: none;
    background: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .25s var(--nk-ease);
}
.hm-mode button.on {
    background: var(--nk-ink);
    color: var(--nk-accent-ink);
    box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}

/* ⇒ SUL TELEFONO LA BARRA IN ALTO E' STRETTA, e ci stavano quattro cose.
   [12/08/2026, il titolare: «il toggle si sovrappone al menù»]
   Nell'ordine c'erano il bottone del menu, Console/Focus, il ruolo
   dell'account e la foto: su 360 pixel non ci stanno, e due si accavallavano.

   Il ruolo dell'account, che e' quello che esce, si nasconde in `guscio.css`:
   la pastiglia sta nella barra, e la barra e' del guscio. Qui c'era, e per
   funzionare aveva bisogno che una schermata caricasse il foglio di un'altra.
   Qui resta solo l'interruttore, che e' roba della Home: si stringe un po',
   cosi' fra il menu e la foto ci sta aria invece di attaccarli. */
@media (max-width: 900px) {
    .hm-mode { padding: 2px; }
    .hm-mode button { padding: 5px 10px; font-size: 11px; gap: 4px; }
}

/* Sotto i 400 pixel restano i simboli e la parola **della sola linguetta
   accesa**: dice dove sei, e l'altra si capisce perche' e' l'unica rimasta.
   Toglierle tutte e due lascerebbe due quadratini che non dicono niente.

   ⚠ `.hm-mode-t` e' lo `span` intorno alla parola, in `dashboard.php`. Questa
   regola c'era dal primo giorno e **non nascondeva niente**, perche' nel markup
   la parola stava attaccata al simbolo in una stringa sola: una regola che non
   aggancia nessun elemento non da' nessun errore, e sembra fatta. Chi tocca il
   markup dell'interruttore lasci i due `span`: 38 pixel di barra dipendono da
   quello, e li misura `dev/tests/prova_barra_alto.html`. */
@media (max-width: 400px) {
    .hm-mode button:not(.on) .hm-mode-t { display: none; }
    .hm-mode button:not(.on) { padding: 5px 8px; }
}

/* ⇒ «VISUALIZZA TUTTO», chiesto dal titolare il 12/08/2026.
   Con dodici cose in sospeso l'elenco diventava una colonna lunga il doppio
   della schermata, e una lista che non finisce piu' non si legge: si scorre.
   Se ne mostrano due, e le altre si aprono se uno le vuole. */
.hm-tutto {
    margin-top: 9px;
    font-size: 12px;
}

/* ⇒ LA MODALITA' FOCUS, ed e' tutta qui dentro.
   Il disegno la descrive con una frase sola: «nascondo tutto il resto per non
   distrarti». Quindi non e' una schermata diversa, e' la stessa con tutto il
   resto nascosto: i numeri, le altre schede, le automazioni che vanno da sole.
   Resta la cosa da fare, e sotto l'elenco di cosa viene dopo. */
.home-wrap.hm-focus > .nk-gr,
.home-wrap.hm-focus > .nk-hr .nk-chip { display: none; }

/* ⇒ IN FOCUS IL CAMPANELLO RESTA, E RIBALTA UNA SCELTA DI IERI.
   [13/08/2026, deciso dal titolare: «deve essere riportato in home e
   naturalmente in modalita' focus»]

   Il 12/08 qui c'era la regola opposta, con questa ragione: «il Focus e' una cosa
   sola davanti: la domanda di Nosu non e' quella cosa, e' un'altra strada da
   prendere, cioe' la distrazione che il Focus deve togliere».

   ⛔ Il ragionamento era sbagliato di categoria, e il titolare ha ragione: il
   Focus toglie **quello che non chiede te** (i numeri, le schede, le automazioni
   che vanno da sole). Una domanda di Nosu e un listino che sta invecchiando sono
   l'opposto: sono le uniche due cose, insieme alle proposte, che **puo' fare
   solo lui**. Nasconderle proprio dove si guarda una cosa alla volta vuol dire
   nasconderle a chi ha appena deciso di dedicare dieci minuti all'app.

   ⚠ Restano note, non schede: una riga sopra la cosa da approvare, che non le
   ruba il posto. */
.home-wrap.hm-focus > .hm-domanda { display: flex; }

/* L'avviso della parola vietata: dentro la scheda della proposta, sopra i
   bottoni, cioe' sulla strada di chi sta per premere «Invia». */
.hm-vietate {
    margin: 9px 0 0;
    border-color: color-mix(in oklch, #FF9500 30%, var(--nk-line));
    background: color-mix(in oklch, #FF9500 5%, var(--nk-ink-2));
}

/* ⇒ IL CAMPANELLO DEL COLLOQUIO LENTO. [12/08/2026]
   Una nota con un bottone in fondo, sulla stessa riga: e' un invito, non un
   allarme, e non deve pesare piu' della cosa da approvare che sta sotto. */
/* ⚠ Niente `margin-bottom` qui: lo stacco dal blocco dopo lo fa il `gap` della
   colonna. Una riga scritta qui vincerebbe sull'azzeramento in cima (stessa
   specificita', ma viene dopo) e questa nota si staccherebbe dal resto di un
   numero suo, che e' come il campanello si e' guadagnato l'aria che le altre non
   avevano. */
.hm-domanda {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}
/* Il testo si prende lo spazio che avanza e va a capo dentro il suo: senza
   `min-width: 0` un nome di file lungo spinge il bottone fuori dalla nota, che e'
   la trappola dei contenitori flessibili gia' presa nella barra in alto. */
.hm-domanda > span {
    flex: 1 1 auto;
    min-width: 0;
}
.hm-domanda .nk-ra {
    margin-left: auto;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* ⛔ E IL MENU SPARISCE, che e' la meta' che conta.
   [chiesto dal titolare il 12/08/2026: «è una cosa importante così non porta
   distrazioni»] Nascondere i numeri e lasciare in piedi una colonna con dodici
   voci colorate vuol dire non aver nascosto niente: il menu e' proprio la cosa
   che invita ad andare da un'altra parte, ed e' la prima che l'occhio prende.
   Nel disegno la barra laterale scivola via, e qui fa lo stesso.

   ⚠ SI USA UNA CLASSE NOSTRA e non `sidebar-collapsed`, che esiste gia' e fa
   una cosa simile: quella e' **la scelta del titolare** (il bottone del menu,
   e su schermo stretto si chiude da sola), e sovrascriverla vorrebbe dire che
   uscendo dal Focus il suo menu si riapre anche se lui l'aveva chiuso, o al
   contrario resta chiuso senza che l'abbia deciso lui. Due interruttori sulla
   stessa cosa, che e' la solita seconda verita'.

   ⚠ LA BARRA IN ALTO RESTA, sempre: e' l'unico modo di uscire dal Focus. Un
   modo che nasconde anche la sua via d'uscita non e' una modalita', e' una
   trappola. */
/* ⚠ E VA SCRITTA ABBASTANZA FORTE, se no non succede niente.
   [12/08/2026: la prima versione non nascondeva un bel niente, e il titolare
   l'ha visto subito] `mytap-dashboard.css` tiene la barra laterale con
   `.mt-dashboard #desktopSidebar.sidebar { display: flex !important }`, cioe'
   un id e **due** classi: un `body.hm-focus-app #desktopSidebar` ha lo stesso
   id ma una classe sola, quindi perdeva anche essendo `!important`. Fra due
   `!important` non decide l'ordine dei fogli, decide la specificita'.
   Qui si scrive nella stessa forma sua, con una classe in piu'. */
body.hm-focus-app #desktopSidebar,
body.hm-focus-app.mt-dashboard #desktopSidebar.sidebar,
body.hm-focus-app.mt-dashboard .app-shell > .sidebar,
body.hm-focus-app .sidebar,
body.hm-focus-app .mob-bottom-nav,
body.hm-focus-app.mt-dashboard .mob-bottom-nav,
/* ⇒ E SUL TELEFONO ANCHE IL BOTTONE DEL MENU.
   [12/08/2026, il titolare: «deve mostrare sempre e soltanto la modalita'
   focus»] Sul telefono il menu non e' una colonna, sono due cose: la barra in
   basso e il cassetto che si apre dalle tre righe in alto. Nascondere solo la
   prima vorrebbe dire lasciare in piedi proprio l'invito ad andare altrove, che
   e' quello che il Focus deve togliere. La via d'uscita resta «Console», che sta
   a due centimetri di distanza nella stessa barra.
   ⚠ Anche qui serve una classe in piu' di `mytap-mobile.css`, che lo tiene
   acceso con `.mt-dashboard .hamburger-btn { display: flex !important }`. */
body.hm-focus-app.mt-dashboard .hamburger-btn,
body.hm-focus-app.mt-dashboard .topbar .hamburger-btn {
    display: none !important;
}

/* Senza il menu la colonna del contenuto resta larga quanto lo schermo, e una
   riga di testo lunga 1600 pixel non si legge. Il disegno tiene la lettura
   dentro una misura umana, e in Focus vale doppio: c'e' una cosa sola da
   leggere, ed e' un messaggio che sta per partire verso una persona. */
body.hm-focus-app .home-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.home-wrap.hm-focus .hm-ft {
    border-color: color-mix(in oklch, var(--nk-accent) 44%, var(--nk-line));
}

/* «Dopo questa»: si vede solo in Focus, e serve a dire quanto manca. Senza,
   uno non sa se sta al primo di due o al primo di dieci, e chi non lo sa
   smette. E' la stessa ragione della riga delle aree nel colloquio. */
.hm-dopo { display: none; }
.home-wrap.hm-focus .hm-dopo { display: block; margin-top: 12px; }

/* ── QUANDO NON C'E' NIENTE ────────────────────────────────────────────
   [17/08/2026, chiesto dal titolare: «solo quando è vuota, perché quando ci
   sono informazioni va bene»]

   Sistemati i due difetti di misura qui sopra, restava il motivo per cui la
   segnalazione parla di **design** e non di spazio: su un account nuovo le tre
   schede una sotto l'altra («Niente da approvare», «Le altre», «Funzionano da
   sole») sono lo stesso riquadro grigio ripetuto tre volte, tutte basse, tutte
   uguali. Non c'e' niente che dica dove guardare, perche' non c'e' niente da
   guardare: e allora la schermata deve **dirlo**, non ripetersi.

   ⚠ Il vuoto ce l'ha gia' il kit (`.nk-empty`: centrato, bordo tratteggiato,
   34 pixel d'imbottitura) e lo usano gia' Pagine e Clienti. Qui la scheda
   «Niente da approvare» diventa quello, invece di una quarta invenzione. E'
   piu' alta e non ha lo stesso vestito delle due sotto, quindi la colonna torna
   ad avere un ritmo invece di essere tre rettangoli.

   ⇒ E LA COLONNA RESPIRA UN PO' DI PIU', ma solo qui: `hm-vuoto` la mette
   `home.js` quando la lista delle proposte e' vuota, e la toglie appena ce n'e'
   una. Con dei dati dentro non cambia niente, che e' esattamente quello che ha
   chiesto il titolare. */
.home-wrap.hm-vuoto { gap: 22px; }

/* L'ultima riga del vuoto non ha niente sotto di se': i 16 pixel che
   `.nk-empty-d` tiene per staccarsi da un bottone qui diventerebbero un buco in
   fondo al riquadro. */
.hm-nulla .nk-empty-d { margin-bottom: 0; }