/**
 * Pagine.
 *
 * Qui c'e' solo quello che nel kit non c'e' perche' e' di questa schermata
 * sola: la scheda di una pagina, il marchietto sull'anteprima, la barra di
 * ricerca e filtri, la scheda «Cambia indirizzo». Schede, bottoni, pastiglie,
 * campi, note, menu a tendina e stato vuoto vengono tutti da nosumo-kit.css.
 */

/**
 * NIENTE LARGHEZZA MASSIMA, E NIENTE PADDING ORIZZONTALE.
 *
 * Prima c'era `max-width: 940px`, copiato da `sedi.css`. Su «La tua rete» ha
 * senso, perche' e' un elenco di righe da leggere e oltre una certa larghezza si
 * legge peggio. Qui no: e' una galleria di schede, e su uno schermo da 1600
 * lasciava **440px vuoti a destra** senza nessun motivo.
 *
 * Il padding orizzontale lo mette gia' `.main-area` (36px per lato). Mettendone
 * altri 22 qui si sommavano, e la sezione partiva 58px dentro.
 */
.pagine-wrap { padding: 0 0 22px; }

/* Sotto i 901px `.main-area` non ha piu' il suo padding: da li' in giu' serve
   che se lo metta la sezione, se no le schede toccano i bordi dello schermo. */
@media (max-width: 900px) { .pagine-wrap { padding: 0 16px 22px; } }

/* ── Ricerca e filtri ──────────────────────────────────────────────── */

.pagine-barra {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.pagine-barra .nk-srch { max-width: 300px; }
.pagine-barra .nk-tabs { margin-bottom: 0; }

/* ── La scheda di una pagina ───────────────────────────────────────── */

/**
 * TRE COLONNE, COME NEL DISEGNO.
 *
 * Nel kit `.nk-g2` e' `repeat(auto-fit, minmax(215px, 1fr))`, copiato dal
 * disegno. Ma quel valore nel disegno mostra tre schede solo perche' li' le
 * schede sono esattamente tre: `auto-fit` chiude le colonne vuote e allarga
 * quelle che restano. Con quindici pagine vere lo stesso identico CSS produce
 * colonne da 215px, e con un minimo piu' alto ne produce quattro o cinque a
 * seconda dello schermo. Il numero di colonne va quindi deciso, non lasciato
 * decidere alla larghezza.
 *
 * Tre sono quelle del disegno. La conseguenza e' che su uno schermo largo la
 * scheda diventa piu' grande di come e' stata disegnata (~530px invece di
 * ~385), e per questo l'anteprima non puo' restare alta 98px fisse, se no viene
 * schiacciata: vedi `--pagine-rapporto` qui sotto.
 */
#pg-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1180px) { #pg-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { #pg-griglia { grid-template-columns: minmax(0, 1fr); } }

/* `.nk-card + .nk-card` mette un margine sopra pensando alle schede impilate:
   dentro una griglia lo spazio lo fa gia' il `gap`, e quel margine sfalserebbe
   le colonne. */
.pagine-scheda + .pagine-scheda { margin-top: 0; }

/* La bozza si distingue dal bordo, come nel disegno */
.pagine-scheda.bozza { border-color: color-mix(in oklch, #FF9500 26%, var(--nk-line)); }

/* Una tendina aperta deve stare sopra le schede vicine */
.pagine-scheda:has(.nk-menu.on) { position: relative; z-index: 40; }

.pagine-testata {
    display: flex; align-items: center; gap: 8px;
    margin: 11px 0 3px;
}
.pagine-nome {
    margin: 0; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pagine-url {
    font-family: var(--nk-mono);
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pagine-dati { margin-top: 4px; }

/* Come nel disegno: i bottoni tutti a sinistra, uno dopo l'altro, e il `•••`
   subito dopo. Niente `margin-left: auto` e niente ritorno a capo: spingendo il
   `•••` contro il bordo destro, su una scheda con anche «Pubblica» non ci
   stava piu' e finiva da solo su una seconda riga. */
.pagine-azioni {
    margin-top: 11px;
    display: flex; gap: 8px; align-items: center;
    flex-wrap: nowrap;
}
.pagine-azioni > * { flex-shrink: 0; }

/* ── Il marchietto sull'anteprima ──────────────────────────────────── */

/* Dice con cosa e' fatta la pagina. Nel disegno non c'e' perche' il cliente
   finto ha tre pagine tutte uguali; con dieci, distinguere una pagina scritta
   dall'AI da una fedelta' da una esterna serve davvero. */
.pagine-marchio {
    position: absolute; top: 7px; right: 7px;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 9.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
    background: color-mix(in oklch, #FFF 88%, transparent);
    color: var(--nk-muted);
    border: 1px solid var(--nk-line);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pagine-marchio.ai      { color: var(--nk-accent);   border-color: color-mix(in oklch, #7C5CFF 30%, transparent); }
.pagine-marchio.fedelta { color: #7B2CA8;            border-color: color-mix(in oklch, #AF52DE 32%, transparent); }

/**
 * L'ALTEZZA DELL'ANTEPRIMA VA A PROPORZIONE, NON A NUMERO FISSO.
 *
 * Nel kit `.nk-ph` e' alta 98px, che e' il valore del disegno. Li' funziona
 * perche' la scheda e' larga ~385: 340 di anteprima su 130 di altezza fa un
 * rapporto di circa 2,6 a 1.
 *
 * Con tre colonne su uno schermo largo la scheda arriva a ~530, e un'anteprima
 * alta 98 dentro una scheda cosi' diventa una fessura. Tenendo il rapporto,
 * invece, la scheda resta identica al disegno a qualsiasi larghezza: e' la
 * stessa cosa, solo piu' grande.
 *
 * Il numero sta qui in una variabile perche' lo legge anche il JavaScript:
 * `pagine-elenco.js` calcola l'altezza vera e la passa a `analytics-desktop.js`,
 * che e' quello che ritaglia gli iframe. Un valore solo, in un posto solo.
 */
.pagine-wrap { --pagine-rapporto: 2.6; }
.pagine-scheda .nk-ph {
    height: auto;
    aspect-ratio: var(--pagine-rapporto);
}

/* L'anteprima vera dentro il riquadro del disegno. L'iframe lo posiziona e lo
   scala `analytics-desktop.js`: qui serve solo che non sporga e non si clicchi. */
.pagine-scheda .ppc-hero-iframe {
    position: absolute; top: 0; left: 0;
    border: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Carica altre ──────────────────────────────────────────────────── */

.pagine-ancora { display: flex; justify-content: center; margin: 2px 0 14px; }

/* ── Cambia indirizzo ──────────────────────────────────────────────── */

.pagine-indirizzo { margin-top: 14px; }
.pagine-indirizzo-riga {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 9px;
}
.pagine-indirizzo-base {
    font-family: var(--nk-mono);
    font-size: 12px;
    color: var(--nk-muted);
}
.pagine-indirizzo-riga .nk-inp { flex: 1; min-width: 120px; width: auto; }
.pagine-indirizzo .nk-esito { display: block; margin: 8px 0 0; }
.pagine-indirizzo .nk-esito:empty { display: none; }

@media (max-width: 640px) {
    .pagine-wrap { padding: 0 15px 22px; }
    .pagine-barra .nk-srch { max-width: none; }
}

/* ── LA NOTA SUL PIXEL ─────────────────────────────────────
   [11/08/2026] Sta fra l'intestazione e i filtri, e ha il tono di una nota:
   niente e' rotto, e un riquadro rosso su una cosa che funziona insegna a
   ignorare i riquadri rossi. */
.pagine-avviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--nk-muted-2);
}
.pagine-avviso > span:first-child {
    font-size: 15px;
    line-height: 1.3;
    opacity: .7;
}

/* Il corpo della nota: testo e bottone incolonnati, cosi' il collegamento non
   si perde in fondo a una riga lunga. */
.pagine-avviso-corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}