/* =========================================================
   Nekoh.it — Foglio della home page

   AUTONOMO: la home NON carica piu' style.css (68 KB scritti per login,
   profilo, management e transcribe, di cui usava una frazione). Qui c'e' solo
   cio' che la home disegna davvero.

   Usa i token CANONICI di theme.css (--surface-*, --text-*, --accent, le
   semantiche), non gli alias storici --primary/--glass/--muted di style.css.
   La home torna cosi' a essere la pagina di riferimento del design system
   invece di quella che lo aggira.

   NOTA DI DEBITO — il blocco `shell` qui sotto (body, .shell, .panel, .topbar
   e la navbar dell'account disegnata da js/navbar.js) e' condiviso con tutte le
   altre pagine, che lo prendono da style.css. Finche' quelle pagine non
   migrano, le due copie convivono: questo blocco e' il seme di un futuro
   shell.css comune. Estrarlo ora avrebbe voluto dire toccare 47 pagine in una
   modifica che riguarda la home.

   REGOLE RISPETTATE (docs/core/frontend/TOKENS.md)
   - un solo accent, nessun secondario: NESSUN gradiente. --primary e
     --primary-hover risolvevano entrambi su var(--accent), quindi i sette
     linear-gradient del sito rendevano gia' un colore piatto: qui sono
     dichiarati per quello che sono.
   - il colore e' informazione: l'accent segna l'azione primaria, lo stato
     attivo e il focus. Le card non colorano per decorare.
   - il movimento comunica o non c'e': tutto quanto anima sta dietro
     prefers-reduced-motion.
   ========================================================= */

@layer base, shell, components, home, utilities;

/* ---------- Tipografia ----------
   Inter era dichiarata come primo font in theme.css e style.css ma non era
   caricata da nessuna parte: il sito rendeva col font di sistema, cioe' con
   metriche diverse da quelle su cui e' stata disegnata la tipografia.
   Self-hosted e non da Google Fonts: font-src 'self' resta chiuso e non c'e'
   un terzo host nel percorso critico. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/inter-latin.3100e775.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback con metriche riallineate a Inter: durante lo swap il testo non si
   sposta di un pixel (CLS 0). I valori derivano dalle metriche del file
   scaricato — unitsPerEm 2048, ascender 1984, descender -494, lineGap 0 —
   riscalate per size-adjust: 1984/2048 / 1.0712 = 90.44%,
   494/2048 / 1.0712 = 22.52%. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
}

/* Custom property REGISTRATA: essendo tipizzata e' interpolabile, quindi il
   bagliore delle card si anima in modo dichiarativo invece che con un
   requestAnimationFrame per frame. */
@property --card-glow {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        /* La topbar e' sticky: senza questo, un'ancora a #sezioni finisce
           sotto la barra. */
        scroll-padding-top: 88px;
    }

    body {
        margin: 0;
        min-height: 100vh;
        padding: 24px 20px 48px;
        font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
        font-synthesis-weight: none;
        background: var(--surface-base);
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4 {
        margin: 0;
        line-height: 1.15;
        letter-spacing: -0.011em;
        font-weight: 800;
    }

    p { margin: 0; }

    a { color: inherit; }

    img, svg, picture { display: block; max-width: 100%; }

    /* Le icone arrivano dallo sprite inlineato: senza una misura di default
       ogni <use> nascerebbe 300x150 (dimensione intrinseca di un <svg>). */
    svg { width: 1em; height: 1em; fill: none; }

    :where(a, button, input, [tabindex]):focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    ::selection {
        background: var(--accent-soft);
        color: var(--text-primary);
    }
}

@layer shell {
    .shell {
        width: min(1100px, 100%);
        margin: 0 auto;
        display: grid;
        gap: 22px;
    }

    .stack { display: grid; gap: 16px; align-content: start; }

    .grid { display: grid; gap: 22px; }

    .two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Griglia rimasta con un figlio solo dopo il gating dei permessi: senza
       questa regola la card superstite resterebbe larga meta' pagina, e quel
       vuoto racconterebbe che manca qualcosa. */
    .two-columns.is-single-column { grid-template-columns: 1fr; }

    .panel {
        background: var(--surface-raised);
        border: 1px solid var(--border-subtle);
        border-radius: var(--nk-radius, 16px);
        padding: 22px 24px;
    }

    .panel-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .panel-copy { color: var(--text-secondary); line-height: 1.6; }

    .eyebrow {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

    .lead {
        color: var(--text-secondary);
        font-size: 1.05rem;
        line-height: 1.6;
        max-width: 58ch;
    }

    .lead strong { color: var(--text-primary); font-weight: 800; }

    /* ---------- Topbar ---------- */

    .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        width: min(1100px, 100%);
        margin: 0 auto 18px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        /* flex-wrap serve a theme.css: sotto i 900px mette i quicklink su
           flex-basis:100% per portarli a capo. Senza wrap restano in riga e
           spingono la barra fuori dal viewport (541px su uno schermo da 390). */
        flex-wrap: wrap;
        gap: 14px 12px;
        background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
        backdrop-filter: blur(16px);
        border: 1px solid var(--border-subtle);
        border-radius: var(--nk-radius, 16px);
    }

    /* Chi ha chiesto meno trasparenza riceve una superficie piena: il blur
       resterebbe leggibile, ma non e' cio' che ha chiesto. */
    @media (prefers-reduced-transparency: reduce) {
        .topbar { background: var(--surface-raised); backdrop-filter: none; }
    }

    .brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
    .brand-logo { height: 40px; width: auto; }

    .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
    .nav-loading { color: var(--text-muted); font-size: 0.88rem; }

    /* ---------- Navbar dell'account (markup di js/navbar.js) ---------- */

    .nav-link,
    .nav-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: var(--radius-md);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--border-default);
        background: var(--surface-inset);
        color: var(--text-primary);
        transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
    }

    .nav-link:hover { background: var(--surface-hover); border-color: var(--border-strong); }

    .nav-button {
        background: var(--accent);
        border-color: transparent;
        color: var(--on-accent);
    }

    .nav-button:hover { background: var(--accent-hover); }

    .nav-user-menu { position: relative; }
    .nav-user { padding-inline: 8px 12px; }
    .nav-user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-user-caret svg { width: 16px; height: 16px; }

    .nav-avatar {
        width: 26px;
        height: 26px;
        border-radius: var(--radius-full);
        object-fit: cover;
        display: grid;
        place-items: center;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .nav-avatar-fallback { background: var(--accent-soft); color: var(--accent-text); }

    .nav-monitoring {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        border: 1px solid var(--border-default);
        background: var(--surface-inset);
        color: var(--text-secondary);
    }

    .nav-monitoring svg { width: 18px; height: 18px; }
    .nav-monitoring:hover { color: var(--text-primary); border-color: var(--border-strong); }

    .account-popover {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        min-width: 260px;
        padding: 8px;
        display: grid;
        gap: 2px;
        border-radius: var(--nk-radius, 16px);
        border: 1px solid var(--border-default);
        background: var(--surface-raised);
        box-shadow: var(--shadow-overlay);
        z-index: 40;
    }

    .account-popover[hidden] { display: none; }

    .account-popover-header { display: flex; align-items: center; gap: 10px; padding: 10px; }

    .account-popover-avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: var(--radius-full);
        display: grid;
        place-items: center;
        overflow: hidden;
        font-weight: 800;
        background: var(--accent-soft);
        color: var(--accent-text);
    }

    .account-popover-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .account-popover-identity { display: grid; min-width: 0; }
    .account-popover-name { font-weight: 800; }

    .account-popover-email {
        font-size: 0.8rem;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-popover-divider { height: 1px; background: var(--border-subtle); margin: 6px 4px; }

    .account-popover-manage,
    .account-popover-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 10px;
        border: 0;
        border-radius: var(--radius-md);
        background: none;
        font: inherit;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text-primary);
        text-decoration: none;
        text-align: left;
        cursor: pointer;
    }

    .account-popover-manage:hover,
    .account-popover-item:hover { background: var(--surface-hover); }
    .account-popover-logout { color: var(--danger); }
    .account-popover-logout:hover { background: var(--danger-soft); }
}

@layer components {
    /* ---------- Pulsanti ---------- */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font: inherit;
        font-size: 0.98rem;
        font-weight: 800;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
    }

    .btn svg { width: 18px; height: 18px; }

    /* Tinta piena, non gradiente: l'accent e' uno solo. */
    .btn--primary { background: var(--accent); color: var(--on-accent); }
    .btn--primary:hover { background: var(--accent-hover); }

    .btn--ghost {
        background: var(--surface-inset);
        border-color: var(--border-default);
        color: var(--text-primary);
    }

    .btn--ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }

    /* ---------- Card di un modulo ----------
       UNA sola implementazione, usata nei blocchi sezione, in "Riprendi dove
       eri" e nei risultati della palette. Si adatta al contenitore con una
       container query, non con varianti di classe da mantenere allineate. */

    .mod-card {
        position: relative;
        container-type: inline-size;
        display: grid;
        grid-template-rows: auto 1fr;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        background: var(--surface-raised);
        overflow: hidden;
        transition: border-color var(--dur-slow) var(--ease), --card-glow var(--dur-slow) var(--ease);
    }

    .mod-card:hover,
    /* :has() invece di una classe .is-focused aggiunta da JS: lo stato del
       figlio e' gia' nel DOM, non serve rispecchiarlo sul padre. */
    .mod-card:has(.mod-card__link:focus-visible) {
        border-color: var(--accent-border);
        --card-glow: 100%;
    }

    .mod-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
            140px circle at var(--card-mx, 50%) var(--card-my, 0%),
            color-mix(in oklch, var(--accent) calc(var(--card-glow) * 0.16), transparent),
            transparent 70%
        );
        z-index: 1;
    }

    .mod-card__media {
        display: block;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background-color: var(--surface-inset);
        background-size: cover;
        background-position: center;
    }

    /* <picture> deve riempire il riquadro, altrimenti l'height:100% dell'<img>
       si risolve contro un'altezza automatica e l'immagine esce dal 16/9
       (viene tagliata in basso invece che centrata). */
    .mod-card__media picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mod-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: scale var(--dur-slow) var(--ease);
    }

    .mod-card__media--vector { background: var(--surface-inset); }
    .mod-card__media--vector img { object-fit: contain; padding: 8%; }

    .mod-card:hover .mod-card__media img { scale: 1.04; }

    .mod-card__body {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 6px;
        align-content: start;
        padding: 14px 16px 16px;
    }

    .mod-card__title {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 1.02rem;
        font-weight: 800;
    }

    .mod-card__icon { width: 17px; height: 17px; color: var(--accent-text); flex: 0 0 auto; }

    /* Il link copre tutta la card. Il contenitore non e' un <a> perche' dentro
       c'e' il pulsante dei preferiti, e un elemento interattivo dentro un link
       non e' HTML valido. */
    .mod-card__link { text-decoration: none; color: inherit; }

    .mod-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

    .mod-card__desc {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .mod-card__pin {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-full);
        background: color-mix(in srgb, var(--surface-base) 72%, transparent);
        backdrop-filter: blur(6px);
        color: var(--text-secondary);
        cursor: pointer;
        opacity: 0;
        transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
    }

    .mod-card__pin svg { width: 15px; height: 15px; }

    .mod-card:hover .mod-card__pin,
    .mod-card__pin:focus-visible,
    .mod-card__pin[aria-pressed="true"] { opacity: 1; }

    .mod-card__pin[aria-pressed="true"] {
        color: var(--warning);
        border-color: var(--warning-border);
        background: var(--warning-soft);
    }

    .mod-card__pin[aria-pressed="true"] svg { fill: currentColor; }

    /* Sotto i 200px di CONTENITORE (non di viewport) la copertina sparisce e la
       card diventa una riga: stesso markup, nessuna variante da mantenere.
       La soglia sta SOTTO la larghezza minima della griglia (220px) di
       proposito: con 240px le card cadevano a 235px alla larghezza di
       lettura tipica e perdevano immagine e descrizione senza che nessuna
       larghezza di finestra lo spiegasse. Una container query va tarata sul
       contenitore reale, non a occhio. */
    @container (max-width: 200px) {
        .mod-card { grid-template-rows: 1fr; }
        .mod-card__media { display: none; }
        .mod-card__body { padding: 12px 14px; }
        .mod-card__desc { display: none; }
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px;
    }

    .card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

    .empty-state {
        grid-column: 1 / -1;
        padding: 18px;
        border: 1px dashed var(--border-default);
        border-radius: var(--radius-lg);
        color: var(--text-muted);
        text-align: center;
    }
}

@layer home {
    .home-shell { padding-bottom: 8px; }

    /* ---------- Hero ---------- */

    .hero {
        display: grid;
        gap: 26px;
        padding: 44px 32px 32px;
    }

    .hero__content { display: grid; justify-items: start; gap: 10px; max-width: 780px; }

    .hero h1 {
        font-size: clamp(2.1rem, 4.8vw, 3.4rem);
        line-height: 1.05;
        letter-spacing: -0.022em;
    }

    /* Era un gradiente su due accent identici, cioe' una tinta piatta scritta
       in modo complicato. Ora e' dichiaratamente una tinta. */
    .hero__accent { color: var(--accent-text); }

    .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

    .hero__stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 0;
    }

    .hero__stat {
        display: flex;
        flex-direction: column-reverse;
        gap: 2px;
        padding: 14px 18px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        background: var(--surface-inset);
    }

    .hero__stat dd { margin: 0; font-size: 1.7rem; font-weight: 900; line-height: 1.1; color: var(--accent-text); }

    .hero__stat dt {
        font-size: 0.74rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
    }

    /* ---------- Blocchi sezione ---------- */

    .sections { gap: 26px; }

    /* NIENTE content-visibility qui, per quanto fosse allettante.
       Serve a saltare il layout di liste lunghe: su quattro blocchi da poche
       card non si misura alcun guadagno, mentre il costo si vede — il
       contenuto non viene disegnato finche' non entra nel viewport, il che
       rompe le catture a pagina intera e la stampa, e un contain-intrinsic-size
       sbagliato fa saltellare la barra di scorrimento. Una tecnica che non si
       ripaga non entra. */
    .section-block {
        display: grid;
        gap: 14px;
    }

    .section-block__head { display: grid; gap: 4px; }

    .section-block__head h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.32rem;
    }

    .section-block__icon { width: 20px; height: 20px; color: var(--accent-text); }

    .section-block__head p { color: var(--text-muted); font-size: 0.92rem; }

    /* ---------- Novita' ---------- */

    .news__period { color: var(--text-muted); font-size: 0.84rem; }
    .news__icon { width: 18px; height: 18px; color: var(--accent-text); margin-right: 8px; }
    .news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }

    .news-card {
        display: flex;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        background: var(--surface-inset);
    }

    .news-card__badge { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
    .news-card__body { display: grid; gap: 5px; align-content: start; min-width: 0; }
    .news-card__body h3 { font-size: 0.98rem; }
    .news-card__body p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }

    .news-card__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.84rem;
        font-weight: 800;
        color: var(--accent-text);
        text-decoration: none;
    }

    .news-card__link svg { width: 14px; height: 14px; }
    .news-card__link:hover { text-decoration: underline; }

    /* ---------- Riprendi dove eri ---------- */

    .resume[hidden] { display: none; }

    .resume-meta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
        padding: 3px 9px;
        border-radius: var(--radius-full);
        border: 1px solid var(--accent-border);
        background: var(--accent-soft);
        color: var(--accent-text);
        font-size: 0.76rem;
        font-weight: 800;
        width: fit-content;
    }

    .resume-meta svg { width: 12px; height: 12px; }

    /* ---------- Account / benefit ---------- */

    .benefit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

    .benefit-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .benefit-icon {
        flex: 0 0 auto;
        width: 21px;
        height: 21px;
        margin-top: 1px;
        border-radius: var(--radius-xs);
        display: grid;
        place-items: center;
        background: var(--accent-soft);
        color: var(--accent-text);
    }

    .benefit-icon svg { width: 13px; height: 13px; }

    .home-community-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

    /* ---------- Palette comandi ---------- */

    .palette-trigger {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 1 1 auto;
        max-width: 320px;
        min-height: 40px;
        margin-inline: auto;
        padding: 0 12px;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-inset);
        color: var(--text-muted);
        font-size: 0.9rem;
        text-decoration: none;
        cursor: pointer;
        transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
    }

    .palette-trigger:hover { border-color: var(--accent-border); color: var(--text-secondary); }
    .palette-trigger__icon { width: 16px; height: 16px; flex: 0 0 auto; }
    .palette-trigger__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .palette-trigger__kbd {
        margin-left: auto;
        padding: 2px 7px;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xs);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--text-faint);
    }

    .palette {
        width: min(560px, calc(100vw - 32px));
        max-height: min(70vh, 560px);
        padding: 0;
        margin: 12vh auto auto;
        border: 1px solid var(--border-strong);
        border-radius: var(--nk-radius, 16px);
        background: var(--surface-raised);
        color: var(--text-primary);
        box-shadow: var(--shadow-overlay);
        overflow: hidden;
    }

    .palette::backdrop { background: var(--nk-overlay); backdrop-filter: blur(3px); }

    .palette__search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
    .palette__search-icon { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }

    .palette__input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 1rem;
        color: var(--text-primary);
    }

    .palette__input:focus { outline: none; }
    .palette__input::-webkit-search-cancel-button { display: none; }

    .palette__close {
        padding: 4px 9px;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xs);
        background: var(--surface-inset);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        color: var(--text-muted);
        cursor: pointer;
    }

    .palette__results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: calc(min(70vh, 560px) - 60px); }

    .palette__option {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        border-radius: var(--radius-md);
        cursor: pointer;
        scroll-margin: 6px;
    }

    .palette__option[aria-selected="true"] { background: var(--accent-soft); }
    .palette__option-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent-text); }
    .palette__option-text { display: grid; min-width: 0; }
    .palette__option-title { font-weight: 700; font-size: 0.94rem; }
    .palette__option-desc { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .palette__option-section { margin-left: auto; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
    .palette__empty { padding: 22px; text-align: center; color: var(--text-muted); }
    .palette__empty[hidden] { display: none; }

    /* ---------- Footer ---------- */

    .home-footer {
        width: min(1100px, 100%);
        margin: 26px auto 0;
        padding: 26px 26px 16px;
        display: grid;
        gap: 20px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--nk-radius, 16px);
        background: var(--surface-raised);
    }

    /* auto-fit e non un numero fisso di colonne: le colonne tematiche nascono
       dal registro, quindi quante siano non si sa scrivendolo. */
    .home-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
    .home-footer-brand { grid-column: span 2; }
    .home-footer-brand { display: grid; gap: 12px; justify-items: start; align-content: start; }
    .home-footer-brand p { color: var(--text-muted); line-height: 1.55; font-size: 0.9rem; max-width: 34ch; }

    .home-footer-col h4 {
        margin-bottom: 10px;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-muted);
    }

    .home-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
    .home-footer-col a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
    .home-footer-col a:hover { color: var(--accent-text); }

    .home-footer-bottom {
        border-top: 1px solid var(--border-subtle);
        padding-top: 14px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        color: var(--text-muted);
        font-size: 0.84rem;
    }

    /* "Gestisci i cookie" e' un <button> (riapre il pannello, non naviga) ma
       deve essere indistinguibile dai link accanto. */
    .home-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }

    .home-footer-legal a,
    .home-footer-legal button {
        padding: 0;
        border: 0;
        background: none;
        color: var(--text-muted);
        font: inherit;
        text-decoration: none;
        cursor: pointer;
    }

    .home-footer-legal a:hover,
    .home-footer-legal button:hover { color: var(--accent-text); text-decoration: underline; }
}

@layer utilities {
    [hidden] { display: none !important; }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* =========================================================
   Movimento — tutto dietro prefers-reduced-motion.
   theme.css dice che "il movimento superfluo diventa attrito": qui il
   movimento c'e' solo per dire "questo blocco e' appena entrato" e "questa
   card e' la stessa di prima".
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    /* Transizioni di documento: la home e la pagina del modulo sono due
       documenti, ma l'immagine della card e' la stessa cosa. Tre righe, zero
       JavaScript, e dove non e' supportato la navigazione resta quella di
       sempre. */
    @view-transition { navigation: auto; }

    /* Un nome puo' stare su UN SOLO elemento per documento, o la transizione
       viene saltata: sta quindi sulla card dentro #sezioni, non sulle copie che
       compaiono in "Riprendi dove eri" o fra i risultati della palette.
       L'ancora e' il TITOLO e non l'immagine perche' e' il titolo ad avere un
       corrispondente sulla pagina di destinazione (il suo <h1>): far volare una
       copertina verso il nulla non e' una transizione, e' uno scatto.
       Il lato destinazione sta in view-transitions.css. */
    #sezioni .mod-card[data-vt="sudoku"] .mod-card__title { view-transition-name: nk-vt-sudoku; }
    #sezioni .mod-card[data-vt="wordle"] .mod-card__title { view-transition-name: nk-vt-wordle; }
    #sezioni .mod-card[data-vt="dices"] .mod-card__title { view-transition-name: nk-vt-dices; }
    #sezioni .mod-card[data-vt="weather"] .mod-card__title { view-transition-name: nk-vt-weather; }

    /* Rivelazione guidata dallo scorrimento, in CSS puro: nessun
       IntersectionObserver, nessun listener di scroll, gira sul compositor. */
    @supports (animation-timeline: view()) {
        .section-block,
        .news-card {
            animation: nk-reveal linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 26%;
        }
    }

    @keyframes nk-reveal {
        from { opacity: 0; translate: 0 14px; }
        to { opacity: 1; translate: 0 0; }
    }
}

/* =========================================================
   Adattamento
   ========================================================= */

@media (max-width: 980px) {
    .home-footer-brand { grid-column: 1 / -1; }
    .two-columns { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    /* Il trigger della palette perde l'etichetta e resta un'icona: la barra
       deve continuare a contenere logo, ricerca e account senza andare a capo. */
    .palette-trigger { max-width: none; flex: 0 0 auto; width: 40px; padding: 0; justify-content: center; }
    .palette-trigger__label,
    .palette-trigger__kbd { display: none; }
}

@media (max-width: 620px) {
    body { padding: 16px 14px 40px; }

    /* Su 390px la barra andava a tre righe: logo+ricerca, poi Accedi/Registrati
       spinti a capo da margin-left:auto, poi i quicklink. Comprimendo il
       necessario ci stanno in due, che e' il minimo dato che theme.js porta i
       quicklink su una riga propria sotto i 900px. */
    /* La riga sta in piedi per pochi pixel: con gap 8 e il padding dei
       pulsanti pieno il toggle del tema andava a capo da solo. Qui si prende
       una quarantina di pixel di margine, cosi' non basta un'etichetta piu'
       lunga a rimandare la barra a tre righe. */
    .topbar { padding: 10px 12px; gap: 10px 6px; }
    .brand-logo { height: 28px; }
    /* Lo spazio elastico passa dal blocco account al trigger della ricerca:
       con margin-left:auto su .nav-actions, il toggle del tema — che theme.js
       inserisce DOPO — finiva spinto su una riga tutta sua. */
    .palette-trigger { width: 34px; margin: 0 auto 0 0; }
    /* Stessa specificita' della regola di section-nav.css che rimette
       margin-left:auto sotto i 900px (nata per la topbar di style.css, che usa
       justify-content:space-between). Qui lo spazio elastico e' gia' sul
       trigger della ricerca. */
    body.has-site-sidebar .topbar > .nav-actions,
    .nav-actions { margin-left: 0; gap: 6px; }
    .nav-link,
    .nav-button { min-height: 36px; padding: 0 10px; font-size: 0.84rem; }
    /* "Accedi" perde la cornice e resta un link: sono i ~22px che decidono se
       la barra sta in due righe o in tre su uno schermo da 360. Il pulsante
       pieno resta uno solo — "Registrati" — che e' anche l'azione che conta. */
    .nav-actions .nav-link:not(.nav-user) {
        padding: 0 6px;
        border-color: transparent;
        background: none;
    }
    .nk-theme-toggle { width: 34px; height: 34px; min-height: 34px; }
    /* Da 375px in su la barra sta in due righe. Sotto (SE di prima
       generazione e simili) passa a tre: nessun overflow, solo piu' alta —
       continuare a limare pixel per quei device costerebbe leggibilita' a
       tutti gli altri. */
    /* Con la sessione attiva il nome utente prende il posto dei due pulsanti:
       troncarlo prima evita che sia un nickname lungo a decidere il layout. */
    .nav-user-name { max-width: 8ch; }
    .hero { padding: 30px 20px 24px; }
    .home-footer-grid { grid-template-columns: 1fr; }
    .hero__actions .btn { width: 100%; }
    .palette { margin-top: 6vh; }
    /* Su schermo stretto il pulsante dei preferiti non ha un hover che lo
       riveli: resta sempre visibile. */
    .mod-card__pin { opacity: 1; }
}