/*
 |----------------------------------------------------------------------------
 | Strongers Design System — CONTENUTO dentro il guscio (ADR-102 D1)
 |----------------------------------------------------------------------------
 | `shell.css` possiede il guscio (L1/L2/footer). Questo foglio possiede ciò che
 | sta DENTRO `.strg-main`: tipografia, card, bottoni, campi. È la parte che
 | ogni consumer reinventava (wf.css su org, spoke.css su event, utility Tailwind
 | su identity) e che divergeva per costruzione: h1 32 / 24.8 / 24px su tre app
 | che l'utente percepisce come un solo sito.
 |
 | DUE VINCOLI, entrambi misurati e non negoziabili (ADR-102 D1a/D2):
 |
 | 1. SOLO SELETTORI DI CLASSE `.strg-*`. Mai un selettore d'elemento nudo
 |    (`h1`, `input`, `button`), nemmeno discendente da `.strg-main`. Il build
 |    Tailwind v4 di identity emette tutto dentro `@layer`, e per la cascata CSS
 |    una dichiarazione non-layered — quale è questo foglio — batte QUALUNQUE
 |    layer a prescindere da specificità e ordine: un `.strg-main h1` cancellerebbe
 |    in silenzio le utility delle 10 view di `/me`, e nessuna utility potrebbe
 |    recuperare.
 |
 | 2. TUTTO SCOPED A `.strg-main`. Su org `wf.css` serve anche il sito pubblico:
 |    una regola globale lo regredirebbe. `.strg-main` esiste solo nei tre layout
 |    d'area utente (verificato: 3 occorrenze in 7 repo).
 |
 | Divergenza voluta dal consumer → `.strg-main .<classe-consumer>` (0,2,0), che
 | batte queste regole (0,2,0 + ordine). Uscita totale → `.strg-main--raw`.
 |----------------------------------------------------------------------------
 */

/* ========================================================================== */
/* Tipografia del contenuto                                                    */
/* ========================================================================== */

.strg-main:not(.strg-main--raw) .strg-h1 {
    font-family: var(--font);
    font-size: 1.5rem;          /* pinnato: org rendeva 2rem, event 1.55rem, identity 1.5rem */
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    margin: 0 0 .35rem;
    text-wrap: balance;
}

.strg-main:not(.strg-main--raw) .strg-h2 {
    font-family: var(--font);
    font-size: 1.2rem; line-height: 1.3; font-weight: 700; color: var(--ink);
    margin: 1.75rem 0 .6rem;
}

/* Cappello: la frase che dice cosa contiene la pagina, sotto il titolo. */
.strg-main:not(.strg-main--raw) .strg-lede {
    font-size: .95rem;
    color: var(--muted);
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

/* Link dentro il contenuto. `--brand-dark` e non `--brand`: su bianco il primo dà
   8.59:1 contro 4.6:1, e un link è testo, non una superficie. */
.strg-main:not(.strg-main--raw) .strg-link {
    color: var(--brand-dark); font-weight: 600; text-decoration: none; text-underline-offset: 2px;
}
.strg-main:not(.strg-main--raw) .strg-link:hover { text-decoration: underline; }
.strg-main:not(.strg-main--raw) .strg-link:focus-visible {
    outline: 2px solid var(--brand-dark); outline-offset: 2px; border-radius: 2px;
}

/* ========================================================================== */
/* Card                                                                        */
/* ========================================================================== */

.strg-main:not(.strg-main--raw) .strg-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
}

.strg-main:not(.strg-main--raw) .strg-card__title {
    font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem;
}

/* Griglia di card. `auto-fit` invece di un numero fisso di colonne: la panoramica di
   identity ne ha 6, quella di un'altra area ne avrà 3, e nessuna delle due deve
   decidere il breakpoint dell'altra. */
.strg-main:not(.strg-main--raw) .strg-cardgrid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card che è essa stessa un link (le voci della panoramica). */
.strg-main:not(.strg-main--raw) .strg-card--link {
    display: block; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.strg-main:not(.strg-main--raw) .strg-card--link:hover {
    border-color: var(--brand); box-shadow: var(--shadow-md);
}
.strg-main:not(.strg-main--raw) .strg-card--link:focus-visible {
    outline: 2px solid var(--brand-dark); outline-offset: 2px;
}
.strg-main:not(.strg-main--raw) .strg-card__name {
    display: block; font-weight: 700; color: var(--ink);
}
.strg-main:not(.strg-main--raw) .strg-card__desc {
    display: block; margin-top: .25rem; font-size: .9rem; color: var(--muted);
}

/* Sequenza verticale di blocchi (le sezioni di un form lungo). */
.strg-main:not(.strg-main--raw) .strg-stack {
    display: flex; flex-direction: column; gap: 1.5rem;
}

/* Riga di scelte mutuamente esclusive (radio persona/azienda). */
.strg-main:not(.strg-main--raw) .strg-choicerow {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .5rem;
}

/* Riga di azioni in fondo a un form: l'azione primaria e la via d'uscita, mai
   incolonnate — leggerle in fila dice che sono alternative, non passi. */
.strg-main:not(.strg-main--raw) .strg-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}

/* I filtri stanno su UNA riga sopra il contenuto che filtrano, allineati in basso
   così etichetta e controllo non sfalsano il bottone. */
.strg-main:not(.strg-main--raw) .strg-filterbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Tessere-statistica (KPI). NON sono un grafico: un numero solo, senza serie,
   quindi niente colore-dato e niente hover layer. Il valore veste il token di
   testo (`--ink`), mai un colore di categoria: qui il colore non codifica
   nulla e colorare il numero suggerirebbe uno stato che non esiste.
   `tabular-nums` perché quattro importi incolonnati devono allinearsi.
   -------------------------------------------------------------------------- */
.strg-main:not(.strg-main--raw) .strg-statgrid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.strg-main:not(.strg-main--raw) .strg-stat {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: .3rem;
}

.strg-main:not(.strg-main--raw) .strg-stat__label {
    font-size: .8rem; color: var(--muted); font-weight: 600;
    letter-spacing: .03em; margin: 0;
}

.strg-main:not(.strg-main--raw) .strg-stat__value {
    font-size: 1.5rem; line-height: 1.15; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; margin: 0;
}

/* Il valore secondario di una tessera (data + provider sotto l'importo): stessa
   tessera, gerarchia diversa, così la riga di KPI resta leggibile a colpo d'occhio. */
.strg-main:not(.strg-main--raw) .strg-stat__value--detail {
    font-size: .95rem; font-weight: 600; color: var(--body);
}

/* Riquadro secondario: stesso perimetro della card ma fondo pagina, per il contenuto
   che accompagna senza competere (il rimando alle donazioni in panoramica). */
.strg-main:not(.strg-main--raw) .strg-panel {
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.25rem;
}

/* Stato vuoto: bordo tratteggiato per dire «qui non c'è ancora nulla», non «qualcosa
   è andato storto». Un box pieno come le card farebbe sembrare il vuoto un contenuto. */
.strg-main:not(.strg-main--raw) .strg-empty {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--muted);
    font-size: .95rem;
    margin: 0;
}

/* ========================================================================== */
/* Campi                                                                       */
/* ========================================================================== */

.strg-main:not(.strg-main--raw) .strg-field { display: block; margin-bottom: 1rem; }

.strg-main:not(.strg-main--raw) .strg-label {
    display: block; font-size: .875rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem;
}

.strg-main:not(.strg-main--raw) .strg-input,
.strg-main:not(.strg-main--raw) .strg-select,
.strg-main:not(.strg-main--raw) .strg-textarea {
    width: 100%;
    font: inherit; font-size: .95rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .55rem .7rem;
}

.strg-main:not(.strg-main--raw) .strg-input:focus-visible,
.strg-main:not(.strg-main--raw) .strg-select:focus-visible,
.strg-main:not(.strg-main--raw) .strg-textarea:focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 1px;
    border-color: var(--brand-dark);
}

/* Errore di validazione sotto un campo: usa i token di errore, non il rosso di brand
   (che nell'area utente significa «azione»). */
.strg-main:not(.strg-main--raw) .strg-error {
    display: block; font-size: .85rem; font-weight: 600; color: var(--err-fg); margin-top: .35rem;
}

/* Testo di aiuto sotto un campo. */
.strg-main:not(.strg-main--raw) .strg-help {
    display: block; font-size: .85rem; color: var(--muted); margin-top: .35rem;
}

/* I controlli nativi prendono l'accento di brand: senza questa riga il checkbox
   di identity resta blu di sistema (unico accento non-brand dell'area utente). */
.strg-main:not(.strg-main--raw) .strg-check {
    accent-color: var(--brand);
    width: 1rem; height: 1rem;
}

/* Riga «checkbox + etichetta», il pattern dei consensi e delle preferenze. */
.strg-main:not(.strg-main--raw) .strg-checkline {
    display: flex; align-items: center; gap: .55rem;
    font-size: .95rem; color: var(--ink); margin-bottom: .75rem;
}

/* ========================================================================== */
/* Tabelle                                                                     */
/* ========================================================================== */

/* PRECISAZIONE a D1a, emersa migrando `/me/consents`: qui i selettori d'elemento
   (`th`, `td`) sono ammessi, perché sono ancorati a `.strg-table` — una classe che il
   markup SCEGLIE. Il divieto riguarda i selettori il cui unico ancoraggio è
   `.strg-main`: quelli colpirebbero ogni elemento dell'area utente e cancellerebbero
   le utility di identity in silenzio. Dentro un componente opt-in il blast radius è
   esattamente ciò che il markup ha chiesto. */
.strg-main:not(.strg-main--raw) .strg-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.strg-main:not(.strg-main--raw) .strg-table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}

.strg-main:not(.strg-main--raw) .strg-table th {
    text-align: left; padding: .65rem .85rem;
    background: var(--bg); color: var(--muted);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}

.strg-main:not(.strg-main--raw) .strg-table td {
    padding: .65rem .85rem; border-bottom: 1px solid var(--line);
    color: var(--body); vertical-align: top;
}

.strg-main:not(.strg-main--raw) .strg-table tbody tr:last-child td { border-bottom: 0; }

/* ========================================================================== */
/* Bottoni                                                                     */
/* ========================================================================== */

.strg-main:not(.strg-main--raw) .strg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: .95rem; font-weight: 600;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--brand-dark);
    text-decoration: none;
    cursor: pointer;
}

.strg-main:not(.strg-main--raw) .strg-btn--primary {
    background: var(--brand); border-color: var(--brand-dark); color: #fff;
}
.strg-main:not(.strg-main--raw) .strg-btn--primary:hover { background: var(--brand-dark); }

.strg-main:not(.strg-main--raw) .strg-btn--ghost { border-color: var(--line); color: var(--brand-dark); }
.strg-main:not(.strg-main--raw) .strg-btn--ghost:hover { border-color: var(--brand-dark); }

/* Azione distruttiva ma reversibile (revoca di un consenso): tono di errore, non
   il rosso di brand — che qui significherebbe «azione primaria». */
.strg-main:not(.strg-main--raw) .strg-btn--danger {
    background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line);
}
.strg-main:not(.strg-main--raw) .strg-btn--danger:hover { background: var(--err-line); }

/* Bottone compatto, per le celle di tabella. */
.strg-main:not(.strg-main--raw) .strg-btn--sm { padding: .35rem .7rem; font-size: .85rem; }

.strg-main:not(.strg-main--raw) .strg-btn:focus-visible {
    outline: 3px solid var(--brand-dark); outline-offset: 2px;
}