/* ══ Vort dal telefono ═══════════════════════════════════════════════
   Tutto quello che cambia sotto gli 850px sta qui, in un file solo.
   Va caricato per ultimo: cosi vince sulle regole delle singole pagine
   senza doverle rincorrere una per una (l'intestazione, per esempio,
   e definita due volte — in page.css e dentro index.html).

   Risolve tre cose, in ordine di gravita:

   1. Da telefono non esisteva nessuna navigazione. Sotto gli 850px la
      barra in alto sparisce, e le voci restavano solo nel piede della
      pagina: per raggiungerle bisognava scorrere quasi diecimila pixel.
   2. I campi dei moduli erano sotto i 16px. Safari su iPhone ingrandisce
      la pagina quando tocchi un campo cosi, e non torna piu indietro.
      Succedeva proprio nel modulo di registrazione.
   3. Molti bersagli erano alti 18-32px. Un polpastrello ne chiede 44.
   ═════════════════════════════════════════════════════════════════ */

/* Il pulsante del menu non esiste sul desktop, dove la barra basta. */
.menu-btn { display: none; }

@media (max-width: 850px) {

  /* ── L'intestazione si asciuga ──────────────────────────────────
     Restano marchio e menu. Lingua, tema e accesso erano schiacciati
     in 32px l'uno accanto all'altro: si spostano dentro il pannello,
     dove hanno lo spazio per essere toccati davvero. */
  .site-header .header-actions { display: none; }

  .menu-btn {
    display: inline-flex; flex: none; flex-direction: column;
    align-items: flex-end; justify-content: center; gap: 6px;
    margin-left: auto; width: 44px; height: 44px;
    border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-btn span {
    display: block; height: 2px; background: var(--ink);
    transition: width 220ms cubic-bezier(.2,.8,.2,1);
  }
  .menu-btn span:first-child { width: 26px; }
  .menu-btn span:last-child  { width: 17px; }
  .menu-btn:hover span:last-child,
  .menu-btn[aria-expanded="true"] span:last-child { width: 26px; }

  /* ── Il pannello ────────────────────────────────────────────────
     A tutto schermo: su un telefono lo spazio c'e, e usarlo tutto
     rende ogni voce grande abbastanza da non sbagliare mira. */
  .menu-pannello {
    position: fixed; inset: 0; z-index: 300;
    display: flex; flex-direction: column;
    background: var(--paper);
    overflow-y: auto; overscroll-behavior: contain;
    animation: mpEntra 260ms cubic-bezier(.2,.8,.2,1) both;
  }
  .menu-pannello[hidden] { display: none; }

  .mp-testa {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 45px; padding: 0 20px;
    border-bottom: 1px solid var(--rule);
  }
  .mp-marchio {
    display: inline-block; padding: 0 20px 0 13px;
    background: var(--signal); color: #170C00;
    font-family: "Space Grotesk", "Sora", sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: .26em;
    text-indent: .26em; line-height: 26px;
  }
  .mp-chiudi {
    width: 44px; height: 44px; margin-right: -12px;
    border: 0; background: transparent; color: var(--ink);
    font-size: 26px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Le voci principali, in grande. Stesso carattere dei titoli del
     sito: il menu sembra parte del giornale, non un'appendice. */
  .mp-nav { display: flex; flex-direction: column; padding: 8px 20px 0; }
  .mp-nav a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 19px 0; text-decoration: none;
    border-bottom: 1px solid var(--rule);
    color: var(--ink); font-family: "Playfair Display", Georgia, serif;
    font-size: 27px; line-height: 1.1; letter-spacing: -.01em;
  }
  .mp-nav a .mp-freccia {
    color: var(--muted); font-family: "Sora", sans-serif; font-size: 17px;
    transition: transform 200ms ease;
  }
  .mp-nav a:active .mp-freccia { transform: translateX(4px); }
  /* la pagina in cui ti trovi si riconosce senza doverla cercare */
  .mp-nav a[aria-current="page"] { color: var(--signal); }
  .mp-nav a[aria-current="page"] .mp-freccia { color: var(--signal); }

  .mp-accedi {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; margin: 26px 20px 0;
    border: 1px solid var(--ink); background: var(--ink);
    color: var(--paper-strong); text-decoration: none;
    font-size: 14px; font-weight: 800; letter-spacing: .04em;
  }
  .mp-nota {
    margin: 14px 20px 0; color: var(--muted);
    font-size: 13px; line-height: 1.55;
  }

  /* Tema e lingua in fondo: si usano di rado, ma quando servono
     devono essere raggiungibili col pollice. */
  .mp-piede {
    display: flex; gap: 10px; margin-top: auto;
    padding: 26px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .mp-tema, .mp-piede select {
    flex: 1; min-height: 50px; padding: 0 14px;
    border: 1px solid var(--rule); background: var(--paper-strong);
    color: var(--ink); font-family: inherit; font-size: 14px;
    font-weight: 700; cursor: pointer;
  }
  .mp-tema {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; text-align: left;
  }
  .mp-tema b { color: var(--muted); font-weight: 700; }

  /* mentre il pannello e aperto la pagina sotto non deve scorrere */
  body.menu-aperto { overflow: hidden; }

  /* ── Campi dei moduli: mai sotto i 16px ─────────────────────────
     Questa e la regola che impedisce a iPhone di ingrandire la pagina
     al tocco. Vale la forzatura: nessuno stile di pagina deve poterla
     annullare, perche l'effetto e un sito che sembra rotto.

     Riguarda solo i campi in cui si scrive: sui pulsanti lo zoom non
     scatta, e ingrandirli avrebbe solo appesantito il disegno. */
  input, select, textarea { font-size: 16px !important; }

  /* ── Bersagli grandi abbastanza per un dito ─────────────────────
     44px e la misura consigliata da Apple e Google: sotto, si sbaglia.
     Nel piede pagina i collegamenti erano alti 18px: il testo resta
     quello, cresce lo spazio intorno. */
  .footer-links a,
  .footer-col a { display: block; padding: 13px 0; }
  .nl-piede a { display: inline-block; padding: 12px 0; }

  .fmt-btn, .cond-btn, .art-filtro, .plan-cta, .gateway-action,
  .newsletter-button, .fmt-badge, .art-riga {
    min-height: 46px; display: inline-flex;
    align-items: center; justify-content: center;
  }
  .art-riga { justify-content: space-between; }

  /* i due collegamenti sotto il modulo di accesso erano alti 18px */
  #link-reimposta, #link-cambia { padding: 13px 0; }

  /* Briciole di navigazione ed elenco fonti: sono collegamenti veri,
     non parole dentro una frase, quindi meritano spazio per il dito.
     I collegamenti dentro un discorso restano come sono: allargarli
     spezzerebbe le righe del testo. */
  .crumbs a { display: inline-block; padding: 15px 0; }
  .fonti li { margin-bottom: 4px; }
  .fonti a { display: inline-block; padding: 11px 0; }
  .aggancio .k { font-size: 12px; letter-spacing: .07em; }

  /* ── Testo che si legge in mano ─────────────────────────────────
     Sotto i 13px su un telefono si strizzano gli occhi. Le etichette
     maiuscole possono restare piu piccole: sono corte e non si leggono
     una lettera per volta. */
  .step-copy, .report-note, .plan-nota, .fonte-riga,
  .footer-note, .nota, figcaption, .disc-box p { font-size: 13.5px; }
  .section-kicker, .plan-name, .card-index, .term-stato,
  .k, .kicker, .tag, .fmt-badge, .conta { font-size: 12.5px; }

  /* Le etichette della scheda titolo sono definite con due classi
     (.conti .k e simili), quindi vanno riprese con la stessa forza.
     Qui non basta ingrandire: a 10px il problema vero e la spaziatura
     larga fra le lettere. Stringendola si legge meglio E si guadagna
     spazio, invece di rischiare che le griglie vadano a capo. */
  .conti .k, .tk-fascia .k, .giudizio .k, .premium-testa .k,
  .numeri .k, .verdetto-box .k, .databox-cell .k, .rating-cell .k {
    font-size: 11.5px; letter-spacing: .07em;
  }
  .sez-testa .nota, .premium-piede .conta { font-size: 12.5px; }

  /* Il finto terminale scriveva a 10.5px: l'effetto console resta
     anche a 12, e in piu si legge. */
  .term-log p, .term-loader-bar span, .term-progress .etichetta span,
  .term-progress .etichetta { font-size: 12px; }

  /* niente ingrandimenti a sorpresa girando il telefono */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* ── Tabelle: scorrono da sole invece di sfondare la pagina ──── */
  .tabella-scorre {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* il bordo destro sfuma quando c'e altro da vedere */
    background:
      linear-gradient(to right, var(--paper) 30%, transparent),
      linear-gradient(to left, var(--paper) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .tabella-scorre > table { min-width: 460px; }
}

/* Chi ha chiesto meno animazioni non deve vedere il pannello entrare. */
@media (prefers-reduced-motion: reduce) {
  .menu-pannello { animation: none; }
  .menu-btn span { transition: none; }
}

@keyframes mpEntra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}