/* ── DIRETTIVE ──────────────────────────────────────────────
   [punto 5, 11/08/2026] Montata dal blocco `data-sec="dir"` del disegno.

   Qui c'e' pochissimo, e va bene cosi': schede, righe, pastiglie, tabella e
   nota sono tutte del kit (`nk-card`, `nk-row`, `nk-chip`, `nk-tbl`,
   `nk-note`). Quello che segue e' solo la spaziatura di questa schermata e i
   due pezzi che il kit non ha, cioe' il piede del riquadro «dai una direttiva»
   e la riga di risposta di Nosu. */

.direttive-wrap .nk-card { margin-bottom: 11px; }

.dir-nuova .nk-ct { margin-bottom: 8px; }

.dir-nuova textarea {
    width: 100%;
    min-height: 56px;
    resize: vertical;
    font: inherit;
}

.dir-nuova-piede {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.dir-hint {
    font-size: 11.5px;
    color: var(--nk-muted);
}

/* ⇒ La seconda porta della libreria dei materiali.        [6-ter, 13/08/2026]
   E' una `<label>` vestita da bottone, perche' la casella dei file di sistema
   non si puo' vestire e un bottone che apre la finestrella vorrebbe una riga di
   JavaScript per fare quello che il browser fa da solo.
   ⚠ `line-height` **la stessa del kit** (1.25), non una a occhio: `.nk-btn` la
   fissa apposta perche' un bottone scritto come `<a>` e uno scritto come
   `<button>` non vengano di due altezze diverse, e una label e' il terzo caso.
   Misurata nel banco: con 1.15 veniva 27px contro i 29 del bottone accanto. */
.dir-allega {
    line-height: 1.25;
}
.dir-allegato {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--nk-muted);
    /* Va a capo e non sborda: i nomi dei file veri sono lunghi
       («listino-primavera-estate-2026-definitivo.pdf»). */
    overflow-wrap: anywhere;
}

/* La risposta di Nosu. Verde spento e non un riquadro di successo: «capito, da
   adesso faccio cosi'» e' una conferma, non una festa. */
.dir-esito {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 9px 12px;
    border-radius: var(--nk-r-sm);
    border: 1px solid var(--nk-line);
    background: var(--nk-ink-2);
    color: var(--nk-muted-2);
}
.dir-esito.male {
    border-color: color-mix(in oklch, #FF9500 32%, var(--nk-line));
    background: color-mix(in oklch, #FF9500 5%, var(--nk-ink-2));
    color: var(--nk-fg);
}

.dir-attive-card .nk-ct { margin-bottom: 9px; }

/* Quando non ce n'e' nessuna. Non e' uno stato d'errore: e' il primo giorno di
   chiunque, e la frase dice cosa fare invece di constatare il vuoto. */
.dir-vuoto {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nk-muted);
    padding: 4px 0 2px;
}

.dir-storico-testa {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}
.dir-storico-testa .nk-ct { margin: 0; flex: 1; }

.dir-nota { margin-top: 11px; }

/* «Revoca» e «Riattiva» sono bottoni veri e non `<span>` come nel disegno: si
   ci arriva col tasto di tabulazione e si premono con Invio. Il vestito resta
   quello del kit. */
button.nk-ra {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

/* Il rifiuto: e' il riquadro «Non posso farlo» del disegno, ridotto a quello
   che possiamo mantenere davvero. Arancione come nel mockup, ma dentro la
   scheda invece che come scheda a se': compare al momento della risposta, e una
   scheda nuova che appare e sparisce sposta tutto quello che sta sotto. */
.dir-esito.rifiuto {
    border-color: color-mix(in oklch, #FF9500 30%, var(--nk-line));
    background: color-mix(in oklch, #FF9500 4%, var(--nk-ink-2));
    color: var(--nk-fg);
}
.dir-rifiuto-testa { margin-bottom: 7px; }
.dir-rifiuto-quale {
    font-weight: 600;
    margin-bottom: 5px;
}
.dir-rifiuto-perche {
    color: var(--nk-muted-2);
    line-height: 1.55;
}

/* Le tre strade. Il primo bottone porta la controproposta **per intero**, cioe'
   una frase e non due parole: e' quello che diventera' la direttiva, e il
   titolare deve leggere cosa sta accettando prima di premerlo. Quindi va a capo
   invece di tagliarsi, e prende la riga da solo quando non ci sta. */
.dir-rifiuto-scelte {
    margin-top: 11px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.dir-rifiuto-scelte .nk-btn {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    max-width: 100%;
}

/* L'avviso prima di procedere lo stesso. Sta dentro il riquadro arancione e
   prende tutta la riga: e' l'unico punto in cui si dice al titolare che sta
   dando un'istruzione che Nosu considera sbagliata, e un avviso stretto
   accanto a un bottone si legge dopo averlo premuto. */
.dir-avviso {
    flex: 1 0 100%;
    margin-bottom: 9px;
    line-height: 1.55;
    color: var(--nk-fg);
    font-weight: 500;
}