/* app.css — Arabita come app: struttura mobile, barra in basso, pagine di servizio, componenti di lettura.
   Caricato dopo arabita.css; usa le sue variabili (tema chiaro/scuro in :root e html[data-tema="scuro"]). */

:root {
  --chip: rgba(var(--ink-rgb), 0.07);
  --k-testo: 1;                 /* moltiplicatore della dimensione del testo di lettura (impostazioni) */
  --tabbar-h: 64px;
  --hdr-h: 64px;
  --bersaglio: 48px;            /* lato minimo di ciò che si tocca */
}
html[data-testo="s"]  { --k-testo: 0.9; }
html[data-testo="l"]  { --k-testo: 1.18; }
html[data-testo="xl"] { --k-testo: 1.36; }

/* Etichette dell'interfaccia: su telefono una sola lingua alla volta, su desktop le due affiancate */
.l-ar { font-family: var(--fa); }
@media (max-width: 768px) {
  body:not(.lang-ar) .l-ar { display: none; }
  body.lang-ar .l-it { display: none; }
}
@media (min-width: 769px) { .l-it + .l-ar::before { content: " · "; font-family: var(--fi); } }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ── Logo: due versioni (chiaro/scuro) e due forme (completo su desktop, solo la scritta su telefono) ── */
.logo-wrap { position: absolute; left: 10%; transform: translateX(-50%); display: block; }
.logo-img {
  display: block; height: 84px; width: 145px; padding: 0;   /* larghezza = altezza × proporzione del file */
  background: url("/static/logo-testata-chiaro.png") center / contain no-repeat;
}
html[data-tema="scuro"] .logo-img { width: 128px; background-image: url("/static/logo-testata-scuro.png"); }

/* ── Controlli di testata per il telefono ── */
.hdr-app { display: none; align-items: center; gap: 8px; }
.ic-btn {
  width: var(--bersaglio); height: var(--bersaglio); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--surf); border: 1.5px solid var(--brd2);
}
.lang-sw { display: flex; background: var(--chip); border-radius: 26px; padding: 3px; direction: ltr; }
.lang-sw button {
  min-width: 52px; height: 44px; border: 0; border-radius: 22px; padding: 0 12px;
  background: transparent; color: var(--muted); font: 700 16px/1 var(--fi); cursor: pointer;
}
.lang-sw button#btn-ar { font-family: var(--fa); font-size: 18px; }
.lang-sw button.active { background: var(--ink); color: var(--bg); }

/* ── Barra in basso ── */
.tabbar { display: none; }

@media (max-width: 768px) {
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); font-size: 18px; }

  /* testata: logo a sinistra, ricerca e lingua a destra; resta fissa in alto */
  .site-header { display: contents; }
  .hdr-top {
    position: sticky; top: 0; z-index: 200; height: var(--hdr-h); padding: 0 12px;
    background: var(--bg); border-bottom: 1px solid var(--brd);
  }
  .logo-wrap { position: static; transform: none; }
  .logo-img, html[data-tema="scuro"] .logo-img { height: 38px; width: 105px; background-image: url("/static/logo-parola-chiaro.png"); }
  html[data-tema="scuro"] .logo-img { background-image: url("/static/logo-parola-scuro.png"); }
  .hdr-search, .hdr-user-btn, .hdr-soc { display: none; }
  .hdr-app { display: flex; gap: 4px; }
  .prefs-wrap--testata { margin-left: auto; margin-right: 4px; }

  /* sezioni come pulsanti a scorrimento, solo in home e nelle pagine di sezione */
  .cat-nav { padding: 0; border-top: 0; background: var(--bg); }
  .cat-nav--solo-desktop { display: none; }
  .cat-row { height: auto; padding: 10px 12px 8px; gap: 8px; }
  .cat-lnk, .cat-lnk--diz, .cat-lnk--pod, .cat-lnk--rassegna {
    height: 44px; padding: 0 18px; border-radius: 22px; gap: 0;
    background: var(--chip); border: 0 !important; color: var(--ink);
  }
  .cat-lnk .cl-dot { display: none; }
  .cat-lnk .cl-it, .cat-lnk .cl-ar, .cat-lnk--diz .cl-it, .cat-lnk--diz .cl-ar, .cat-lnk--pod .cl-it, .cat-lnk--rassegna .cl-it {
    font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: 0;
  }
  .cat-lnk .cl-ar { font-size: 17px; }
  body:not(.lang-ar) .cat-lnk .cl-ar { display: none; }
  body.lang-ar .cat-lnk .cl-it { display: none; }
  .cat-lnk--pod .cl-ar { display: none; }
  .cat-lnk.on { background: var(--ink); }
  .cat-lnk.on .cl-it, .cat-lnk.on .cl-ar { color: var(--bg); }
  .cat-lnk--diz, .cat-lnk--pod { display: none; }   /* hanno già il loro posto nella barra in basso */

  .ticker { display: none; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surf); border-top: 1px solid var(--brd2);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); min-width: 0;
  }
  .tab .tic { width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
  .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tab .tl { font: 700 13px/1.1 var(--fi); }
  .tab .tl .l-ar { font: 700 14px/1.1 var(--fa); }
  .tab.on { color: var(--ink); }
  .tab.on .tic { background: rgba(var(--ink-rgb), 0.1); }
  html:not([data-tema="scuro"]) .tab.on .tic { background: #F7E9C2; }
  html[data-tema="scuro"] .tab.on .tic { background: #2E2711; }
  footer { padding-bottom: 24px; }
}

/* ── Pagine di servizio (/altro, /impostazioni) ── */
.pg { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
.pg-h { font: 700 34px/1.15 var(--ft); margin: 6px 0 18px; }
body.lang-ar .pg-h { font-family: var(--fa); line-height: 1.5; }
.indietro { display: inline-flex; align-items: center; gap: 2px; min-height: var(--bersaglio); font-weight: 700; font-size: 17px; color: var(--ink); }
body.lang-ar .indietro svg { transform: scaleX(-1); }

.gruppo-v { margin: 0 0 22px; }
.gruppo-v-t { font: 700 14px/1.3 var(--fi); letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin: 0 4px 6px; }
body.lang-ar .gruppo-v-t { font-family: var(--fa); font-size: 16px; letter-spacing: 0; text-transform: none; }
.riga-v {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; margin-bottom: 8px;
  background: var(--surf); border: 1px solid var(--brd2); border-radius: 16px; color: var(--ink);
}
.riga-v-testo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.riga-v-t { font-size: 19px; font-weight: 700; line-height: 1.3; }
.riga-v-s { font-size: 15px; color: var(--muted); line-height: 1.35; }
.riga-v-freccia { flex: none; color: var(--muted); }
body.lang-ar .riga-v-freccia { transform: scaleX(-1); }
body.lang-ar .riga-v { direction: rtl; }

.imp { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.imp legend { font: 700 20px/1.3 var(--fi); margin-bottom: 10px; padding: 0; }
body.lang-ar .imp legend { font-family: var(--fa); }
.opz-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.opz { position: relative; display: block; }
.opz input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opz-corpo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 10px 12px; text-align: center;
  background: var(--surf); border: 2px solid var(--brd2); border-radius: 16px; font-size: 17px; font-weight: 700;
}
.opz input:checked + .opz-corpo { border-color: var(--gold); background: var(--evid); box-shadow: inset 0 0 0 1px var(--gold); }
.opz input:focus-visible + .opz-corpo { outline: 3px solid var(--gold); outline-offset: 2px; }
.opz-A { font-family: var(--ft); line-height: 1; }
.imp-nota { font-size: 15px; color: var(--muted); margin: 10px 4px 0; line-height: 1.5; }
.imp-nota-fine { margin-top: 4px; }
.anteprima-testo { margin: 14px 4px 0; font-size: calc(20px * var(--k-testo)); line-height: 1.65; color: var(--ink); }
.anteprima-ar { font-family: var(--fa); font-size: calc(22px * var(--k-testo)); line-height: 1.9; }
body:not(.lang-ar) .anteprima-ar { display: none; }
body.lang-ar .anteprima-testo:not(.anteprima-ar) { display: none; }

/* ── Tipografia: titoli e testo nelle pile Fedra + Fedra Arabic (var(--ft) = var(--fi)); l'arabo in var(--fa) ── */
.hero-title, .art-title, .cs-tr-title, .cs-name-it, .tt-it { font-family: var(--ft); }
.col-ar .hero-title, .col-ar .art-title, .cs-tr-ar { font-family: var(--fa-titolo); }
.art-img, .card-img img { opacity: 1; }

/* ── Home, sezioni, tag: una lingua alla volta, schede leggibili su telefono ── */
@media (max-width: 768px) {
  body:not(.lang-ar) :is(.hero-wrap, .article-card) .col-ar,
  body:not(.lang-ar) .cs-tr-ar,
  body.lang-ar :is(.hero-wrap, .article-card) .col-it,
  body.lang-ar .cs-tr-it { display: none; }
  .bi-sep { display: none; }
  body.lang-ar :is(.hero-wrap, .article-card) { direction: rtl; }

  .wrap { padding: 0 16px; }
  .cat-section { border-top: 0; margin-bottom: 34px; }
  .cs-header { padding: 22px 0 6px; align-items: center; }
  .cs-name-it, .cs-name-ar { font-size: 26px; letter-spacing: 0; text-transform: none; }
  .cs-name-ar { font-family: var(--fa-titolo); }
  .cs-sep { display: none; }
  body:not(.lang-ar) .cs-name-ar, body.lang-ar .cs-name-it { display: none; }
  .cs-all-link { min-height: var(--bersaglio); align-items: center; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .cs-all-it, .cs-all-ar { display: none; }
  body:not(.lang-ar) .cs-all-it::after { content: "Tutti"; display: inline; }
  body.lang-ar .cs-all-ar { display: inline; font-size: 16px; }
  .cs-all-sep { display: none; }
  body:not(.lang-ar) .cs-all-it { display: inline; font-size: 0; }
  body:not(.lang-ar) .cs-all-it::after { font-size: 16px; }
  .cs-all-arrow { color: var(--ink); }

  /* scheda grande (primo articolo): immagine arrotondata, titolo serif */
  .hero-wrap { border-bottom: 0; margin-bottom: 4px; }
  .hero-wrap .art-img-wrap { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(var(--ink-rgb), 0.14); }
  .art-img { height: auto; aspect-ratio: 16 / 10; }
  .hero-cols { border-top: 0; }
  .hero-wrap .col-it, .hero-wrap .col-ar { padding: 14px 0 10px; border: 0; }
  .h-meta { font: 700 15px/1.3 var(--fi); letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
  .col-ar .h-meta { font-size: 17px; font-family: var(--fa); }
  .hero-title, .col-ar .hero-title { font-size: 29px; line-height: 1.2; }
  .col-ar .hero-title { line-height: 1.5; }
  .hero-sub { font-size: 18px; }
  .hero-exc { font-size: 18px; line-height: 1.55; -webkit-line-clamp: 3; }
  .col-ar .hero-exc { font-size: 20px; line-height: 1.85; }

  /* schede piccole: testo a sinistra, miniatura a destra */
  .article-card { position: relative; display: grid !important; grid-template-columns: 1fr 104px !important; column-gap: 14px; padding: 16px 0; align-items: start; border-bottom: 1px solid var(--brd); }
  .article-card .card-img { grid-column: 2; grid-row: 1; border-radius: 14px; }
  .article-card .card-img img { width: 104px; height: 104px; aspect-ratio: 1; }
  .article-card .col-it, .article-card .col-ar { grid-column: 1; grid-row: 1; padding: 0; border: 0; min-width: 0; }
  .article-card .card-actions { display: none; }
  .article-card .art-title, .article-card .col-ar .art-title { font-size: 19px; line-height: 1.3; margin-bottom: 4px; }
  .article-card .col-ar .art-title { line-height: 1.55; font-size: 20px; }
  .article-card .art-exc, .article-card .art-sub, .article-card .more, .article-card .badge-ev { display: none; }
  .article-card .a-meta { margin-bottom: 4px; flex-wrap: wrap; gap: 6px; }
  .article-card .a-badge { border: 0; padding: 0; font: 700 14px/1.3 var(--fi); letter-spacing: 0; text-transform: none; }
  .article-card .col-ar .a-badge { font: 700 15px/1.4 var(--fa); }
  .a-date { font-size: 14px; }
  .art-fonte { font-size: 14px; }

  /* elenco di titoli */
  .cs-titoli { border-top: 0; }
  .cs-titolo-row { display: block; padding: 14px 0; min-height: 60px; }
  .cs-tr-it { gap: 12px; align-items: center; }
  .cs-tr-title { font-size: 18px; line-height: 1.35; font-weight: 400; }
  .cs-tr-date { font-size: 12px; min-width: 48px; border-radius: 10px; }
  .cs-tr-ar { border: 0; padding: 0; font-size: 20px; line-height: 1.6; font-weight: 400; opacity: 1; }
  .cs-footer { padding: 6px 0 0; }
  .cs-more-link { min-height: var(--bersaglio); align-items: center; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .cs-more-ar, .cs-more-sep { display: none; }
  body.lang-ar .cs-more-link > span:first-child, body.lang-ar .cs-more-link > span:last-child { display: none; }
  body.lang-ar .cs-more-ar { display: inline; }
}

/* ── Intestazione di sezione e spazi verticali su telefono ── */
@media (max-width: 768px) {
  .main-grid { padding: 4px 0 24px; }
  .cat-grid { padding-top: 0 !important; }
  .cat-hdr { padding: 18px 0 12px; border-bottom: 0; }
  .cat-eyebrow { display: none; }
  .cat-name-it { font: 700 34px/1.15 var(--ft); }
  .cat-name-ar { font-size: 34px; line-height: 1.5; display: block; text-align: right; }
  body:not(.lang-ar) .cat-name-ar, body.lang-ar .cat-name-it { display: none; }
  body.lang-ar .cat-name-ar { text-align: start; direction: rtl; font-family: var(--fa-titolo); font-weight: 700; }
}

/* ── Pulsanti, scheda in basso, barra di avanzamento (usati nell'articolo e nel glossario) ── */
.b2, .primario {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px;
  border-radius: 26px; font: 700 17px/1 var(--fi); cursor: pointer; text-decoration: none; box-sizing: border-box;
}
.b2 { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.b2.q { width: 56px; padding: 0; font-size: 24px; flex: none; }
.b2.q.salvato { color: var(--red); border-color: var(--red); }
.b2.largo { width: 100%; }
.primario { background: var(--red-bg); color: #fff; border: 0; width: 100%; font-size: 18px; }
.primario .l-ar, .b2 .l-ar { font-family: var(--fa-ui); font-size: 18px; }

.velo { position: fixed; inset: 0; background: rgba(10, 14, 25, 0.5); z-index: 400; opacity: 0; transition: opacity 0.2s; }
.velo.on { opacity: 1; }
.foglio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 401; max-width: 640px; margin: 0 auto;
  background: var(--surf); border-radius: 28px 28px 0 0; padding: 14px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.28); transform: translateY(100%); transition: transform 0.22s ease;
  display: flex; flex-direction: column; gap: 12px;
}
.foglio.on { transform: none; }
.foglio[hidden], .velo[hidden] { display: none; }
body.foglio-aperto { overflow: hidden; }
.mano { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--brd2); margin: 0 auto 4px; }
.foglio-riga { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.foglio-testi { flex: 1; min-width: 0; }
.foglio-it { font: 700 32px/1.1 var(--ft); color: var(--ink); }
.foglio-ar { font: 700 42px/1.5 var(--fa); color: var(--gold-lt); }
.foglio-tr { font: italic 400 18px/1.4 var(--fi); color: var(--muted); }

.progresso { position: fixed; top: var(--hdr-h); left: 0; right: 0; height: 4px; background: transparent; z-index: 199; pointer-events: none; }
.progresso i { display: block; height: 100%; width: 0; background: var(--gold); }
@media (min-width: 769px) { .progresso { top: 0; } }

/* ── Ritorno dalla scheda di una parola ── */
.torna-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--brd); }
.torna-art {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--bersaglio); padding: 0 18px 0 12px;
  background: var(--red-bg); color: #fff; border-radius: 26px; font: 700 17px/1 var(--fi);
}
.torna-art .l-ar { font-family: var(--fa-ui); font-size: 18px; }
body.lang-ar .torna-art svg { transform: scaleX(-1); }
.torna-diz { display: inline-flex; align-items: center; min-height: var(--bersaglio); font: 700 16px/1 var(--fi); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ── Articolo ── */
.az-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--bersaglio); padding: 0 18px;
  background: transparent; color: var(--ink); border: 1.5px solid var(--brd2); border-radius: 26px; cursor: pointer;
  font: 700 16px/1 var(--fi); text-decoration: none;
}
.az-btn[hidden] { display: none; }
.az-btn .l-ar { font-family: var(--fa-ui); font-size: 17px; }
.az-btn.attivo { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.az-aa { padding: 0 16px; gap: 1px; align-items: baseline; }
.az-aa .aa-p { font-size: 15px; }
.az-aa .aa-g { font-size: 24px; }
.az-esito { align-self: center; font-size: 15px; color: var(--ok); font-weight: 700; }
.az-esito[hidden] { display: none; }
/* parole del glossario nel testo */
.hl { color: inherit; background: var(--evid); border-bottom: 2.5px solid var(--gold); border-radius: 3px; padding: 2px 2px; }

@media (max-width: 768px) {
  .art-lang-tabs { background: var(--bg); padding: 8px 12px; gap: 6px; border-bottom: 1px solid var(--brd); }
  .art-lang-tab, .art-lang-tab.ar {
    min-height: var(--bersaglio); border-radius: 24px; border: 0; background: var(--chip); color: var(--ink);
    font: 700 17px/1 var(--fi); padding: 0 8px;
  }
  .art-lang-tab.ar { font-family: var(--fa-ui); font-size: 18px; }
  .art-lang-tab .l-ar { font-family: var(--fa-ui); }
  .art-lang-tab.active { background: var(--ink); color: var(--bg); border: 0; }

  .art-hdr { padding: 16px 0 12px; border-bottom: 0; }
  .art-hdr-top { flex-direction: column; align-items: stretch; margin-bottom: 14px; gap: 14px; }
  .art-badges { gap: 8px; }
  .ab, .ab.ar {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px;
    background: var(--chip); color: var(--ink); font: 700 15px/1.2 var(--fi); letter-spacing: 0; text-transform: none;
  }
  .ab .ab-ar { font-family: var(--fa); font-size: 16px; }
  body:not(.lang-ar) .ab .ab-ar, body:not(.lang-ar) .ab .ab-sep, body.lang-ar .ab .ab-it, body.lang-ar .ab .ab-sep { display: none; }
  .art-hdr-actions { gap: 10px; align-items: center; }
  .save-btn, .pdf-btn {
    min-height: var(--bersaglio); padding: 0 18px; border: 1.5px solid var(--brd2); border-radius: 26px; color: var(--ink);
    font: 700 16px/1 var(--fi); letter-spacing: 0; background: transparent;
  }
  .save-btn .save-label-ar, .pdf-btn-ar { font-family: var(--fa-ui); font-size: 17px; color: inherit; }
  body:not(.lang-ar) .save-label-ar, body.lang-ar .save-label-it, body:not(.lang-ar) .pdf-btn-ar, body.lang-ar .pdf-btn > span:first-child { display: none; }
  .save-icon { font-size: 22px; }
  .art-source { order: 9; flex-basis: 100%; white-space: normal; font-size: 15px; line-height: 1.5; }
  .art-source a { color: var(--gold-lt); text-decoration: underline; }
  .art-share { display: none; }

  .a-h1 { font: 700 31px/1.18 var(--ft); margin-bottom: 8px; }
  .a-h1-ar { font: 700 33px/1.5 var(--fa-titolo); }
  .a-h2 { font: italic 400 19px/1.5 var(--ft); color: var(--muted); }
  .a-h2-ar { font: 400 21px/1.8 var(--fa); color: var(--muted); }
  .art-hdr .col-it, .art-hdr .col-ar { padding: 0; border: 0; }

  .art-abstract { margin: 12px 0 8px; padding: 16px 18px; border-left: 0; border-radius: 16px; background: var(--surf); border: 1px solid var(--brd2); }
  .art-abstract .col-it { font: 400 calc(19px * var(--k-testo))/1.6 var(--ft); }
  .art-abstract .col-ar { font: 400 calc(21px * var(--k-testo))/1.9 var(--fa); }

  .art-body { padding: 12px 0 8px; }
  .art-body .col-it, .art-body .col-ar { padding: 0; }
  .art-body .col-it p { font: 400 calc(21px * var(--k-testo))/1.7 var(--ft); margin-bottom: 18px; }
  .art-body .col-ar p { font: 400 calc(24px * var(--k-testo))/2.05 var(--fa); margin-bottom: 18px; }
  .nota-red { font-size: 17px; border-radius: 14px; }

  /* Affiancati: ogni paragrafo con la sua traduzione sotto */
  body.affiancati .mob-hide { display: block !important; }
  body.affiancati-coppie #art-col-it, body.affiancati-coppie #art-col-ar { display: none !important; }
  .art-affiancati .coppia { margin-bottom: 20px; padding-bottom: 6px; border-bottom: 1px dashed var(--brd2); }
  .art-affiancati .coppia p { margin-bottom: 10px !important; }
  .art-affiancati .coppia-it { font: 400 calc(20px * var(--k-testo))/1.65 var(--ft) !important; }
  .art-affiancati .coppia-ar { font: 400 calc(23px * var(--k-testo))/2 var(--fa) !important; border-inline-start: 3px solid var(--gold); padding-inline-start: 12px; color: var(--ink); }
}
@media (min-width: 769px) { .art-affiancati { display: none; } }

@media (max-width: 768px) {
  /* azioni dell'articolo: «Ascolta» largo e in evidenza, le altre tre come pulsanti rotondi */
  .art-hdr-actions { flex-wrap: nowrap; }
  #ascolta-btn { flex: 1; min-height: 52px; background: var(--red-bg); color: #fff; border: 0; order: -1; }
  #ascolta-btn.attivo { background: var(--ink); color: var(--bg); }
  .az-ic, .save-btn, .az-aa { width: 52px; min-height: 52px; padding: 0; flex: none; }
  .az-ic .l-it, .az-ic .l-ar, .save-btn .save-label-it, .save-btn .save-label-ar { display: none !important; }
  .save-btn { justify-content: center; }
  .save-btn.saved { color: var(--red); border-color: var(--red); }
  .az-esito { position: absolute; }
  .pdf-btn { order: 8; }
}
.cap-it, .cap-ar { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.az-esito { position: fixed; z-index: 450; left: 50%; bottom: calc(var(--tabbar-h) + 24px); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 26px; }
@media (max-width: 768px) {
  .main-grid > *, .cat-grid > * { min-width: 0; }
  .art-hdr-actions { flex-wrap: wrap; }
  #ascolta-btn { flex: 1 1 110px; }
}

/* ── Dizionario ── */
.diz-top { padding: 40px 0 28px; border-bottom: 1px solid var(--brd); margin-bottom: 32px; }
.diz-eyebrow { font: 400 12px/1.3 var(--fi); letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.diz-h1 { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.diz-h1-it { font: 700 46px/1 var(--ft); }
.diz-h1-ar { font: 400 30px/1.4 var(--fa); color: var(--muted); }
.diz-conta { font-size: 13px; color: var(--muted); margin-top: 8px; }

.parola-giorno { display: block; background: var(--evid); border: 1px solid var(--gold); border-radius: 12px; padding: 18px 20px; margin-bottom: 28px; max-width: 500px; color: var(--ink); }
.pg-et { display: block; font: 700 14px/1.3 var(--fi); color: var(--gold-lt); }
.pg-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 6px; }
.pg-it { font: 700 32px/1.1 var(--ft); }
.pg-ar { font: 700 42px/1.4 var(--fa); color: var(--gold-lt); }
.pg-tr { display: block; font: italic 400 17px/1.4 var(--fi); color: var(--muted); }

@media (max-width: 768px) {
  .diz-top { padding: 14px 0 8px; border-bottom: 0; margin-bottom: 10px; }
  .diz-eyebrow { display: none; }
  .diz-h1-it { font-size: 34px; line-height: 1.15; }
  .diz-h1-ar { font-size: 36px; line-height: 1.5; color: var(--ink); font-weight: 700; margin-inline-start: auto; }
  body:not(.lang-ar) .diz-h1-ar, body.lang-ar .diz-h1-it { display: none; }
  .diz-conta { font-size: 15px; }

  .dict-search { max-width: none; min-height: 60px; padding: 0 8px 0 20px; border: 2px solid var(--ink); border-radius: 30px; background: var(--surf); margin-bottom: 18px; }
  .dict-search input { font-size: 19px; min-width: 0; height: 56px; }
  .dict-search button { min-height: 46px; border-radius: 23px; padding: 0 20px; font: 700 16px/1 var(--fi); letter-spacing: 0; text-transform: none; }
  .parola-giorno { max-width: none; border-radius: 22px; padding: 20px; }

  /* elenco di parole: una riga per parola, con il cuore grande */
  .gl-grid { display: block; }
  .gl-item {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "it ar" "tr cuore"; align-items: center; column-gap: 12px;
    padding: 12px 0; min-height: 92px; background: transparent; border: 0; border-top: 1px solid var(--brd); border-radius: 0;
  }
  .gl-item > div[style] { display: contents !important; }
  .gl-it { grid-area: it; font: 700 24px/1.2 var(--ft); }
  .gl-ar { grid-area: ar; font-size: 36px; line-height: 1.4; margin-top: 0; text-align: right; }
  .gl-tr { grid-area: tr; font-size: 16px; margin-top: 0; }
  .word-heart-btn { grid-area: cuore; justify-self: end; min-width: 48px; min-height: 48px; font-size: 24px !important; padding: 0 !important; }
  .glossary { padding: 18px 0; }
  .gl-hdr { font: 700 18px/1.3 var(--fi); letter-spacing: 0; text-transform: none; color: var(--ink); }
}

/* ── Selettore Italiano / عربي nelle pagine con due testi (privacy, cancellazione account) ── */
.sel-lingua { display: inline-flex; background: var(--chip); border-radius: 26px; padding: 3px; margin-bottom: 28px; direction: ltr; }
.sel-lingua button {
  min-width: 96px; min-height: 46px; border: 0; border-radius: 23px; padding: 0 18px; background: transparent; color: var(--muted);
  font: 700 17px/1 var(--fi); cursor: pointer;
}
.sel-lingua button:last-child { font-family: var(--fa-ui); font-size: 18px; }
.sel-lingua button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 768px) { .cat-section:first-child .cs-header { padding-top: 6px; } }
/* calendario (FullCalendar): pulsanti toccabili su telefono */
@media (max-width: 768px) {
  .fc .fc-button { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .fc .fc-toolbar-title { font-size: 20px; }
}
@media (max-width: 768px) { body.lang-ar .cat-row { direction: rtl; } }
@media (max-width: 768px) {
  body.lang-ar .art-badges, body.lang-ar .art-hdr-actions { direction: rtl; }
  body.lang-ar .art-source { direction: rtl; text-align: start; }
}

/* ── Piè di pagina su telefono: righe toccabili e testo leggibile ── */
@media (max-width: 768px) {
  .logo-wrap { min-height: var(--bersaglio); display: flex; align-items: center; }
  footer { font-size: 15px; }
  .ft-info { font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 0; }
  .ft-info a { display: flex; align-items: center; min-height: var(--bersaglio); margin-left: 0 !important; font-size: 15px !important; color: var(--ink) !important; }
  .ft-info a .lnk-it, .ft-info a .lnk-ar { font-size: 15px; }
  body:not(.lang-ar) .ft-info .lnk-ar, body.lang-ar .ft-info .lnk-it { display: none; }
  .ft-info > span { display: none; }
  .ft-social { gap: 4px; }
  .ft-soc { width: var(--bersaglio); height: var(--bersaglio); display: inline-flex; align-items: center; justify-content: center; }
  .ft-soc svg { width: 22px; height: 22px; }
  .policy-footer-nav { display: flex; flex-direction: column; gap: 0; padding: 0 16px; }
  .policy-footer-nav a { display: flex; align-items: center; min-height: var(--bersaglio); font-size: 15px; color: var(--ink); }
  .cap-it, .cap-ar, .a-date, .art-fonte, .gl-hdr-ar, .scuola-card-label, .a-badge, .cb { font-size: 14px; }
  .l-it { font-size: inherit; }
}

/* ── Accesso con Google ── */
.g-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; margin-bottom: 8px;
  background: #fff; color: #1f1f1f; border: 1.5px solid #747775; border-radius: 26px; font: 700 17px/1 var(--fi); text-decoration: none;
}
.g-btn:hover { background: #f8f9fa; }
.g-btn .l-ar { font-family: var(--fa-ui); font-size: 18px; }
.g-btn .l-it, .g-btn .l-ar { white-space: nowrap; }
.g-btn .l-ar::before, .g-nota .l-ar::before { content: none; }   /* il « · » dei due testi affiancati qui non serve */
.g-nota .l-it, .g-nota .l-ar { display: block; }
@media (max-width: 768px) { body:not(.lang-ar) .g-nota .l-ar, body.lang-ar .g-nota .l-it { display: none; } }
.g-nota { font-size: 14px; color: var(--muted); text-align: center; margin: 0 0 14px; line-height: 1.5; }
.o-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 14px; }
.o-sep::before, .o-sep::after { content: ""; flex: 1; height: 1px; background: var(--brd2); }

/* Testi doppi che nei vecchi template stanno uno sotto l'altro (area personale, il mio dizionario): su telefono se ne vede una sola lingua.
   Come .l-it / .l-ar ma senza il «·» che quelli aggiungono su desktop; .m-dot è il «·» fra le due versioni, nascosto su telefono. */
@media (max-width: 768px) {
  body:not(.lang-ar) .m-ar, body.lang-ar .m-it, .m-dot { display: none !important; }
  /* riga di una parola salvata: a capo se non ci sta (prima usciva dallo schermo) */
  .voc-summary { flex-wrap: wrap; row-gap: 4px; }
  .voc-summary .voc-cat { margin-inline-start: 0; }
}

/* ── Area personale su telefono: un elenco di voci, una lingua, tutto toccabile ── */
@media (max-width: 768px) {
  body:not(.lang-ar) .ap-hdr .col-ar, body.lang-ar .ap-hdr .col-it { display: none; }
  .ap-hdr .bi-sep { display: none; }
  .ap-hdr .bi { display: block; margin-bottom: 8px !important; }
  .ap-hdr { padding-top: 6px; }
  .ap-eyebrow { font-size: 14px !important; letter-spacing: 0.5px; }
  .ap-title { font: 700 34px/1.15 var(--ft) !important; }
  body.lang-ar .ap-title { font-family: var(--fa-titolo) !important; line-height: 1.5 !important; }
  .ap-email { font-size: 16px; overflow-wrap: anywhere; }
  .ap-nome-form input { min-height: 48px; font-size: 17px !important; }
  .ap-nome-btn { min-height: 48px; min-width: 56px; font-size: 17px !important; border-radius: 24px !important; }
  .ap-esci { display: inline-flex; align-items: center; min-height: var(--bersaglio); font-size: 16px !important; color: var(--ink) !important; text-decoration: underline; }
  .ap-email > span { font-size: 16px !important; }
  .ap-features { grid-template-columns: 1fr !important; gap: 10px; padding: 12px 0; margin-top: 8px !important; }
  .ap-feat-card { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-radius: 16px; background: var(--surf); border-color: var(--brd2); color: var(--ink); }
  .apf-icon { margin: 0; font-size: 24px; flex: none; width: 32px; text-align: center; }
  .apf-it { font-size: 19px; margin: 0; }
  .apf-ar { font-size: 20px; margin: 0; color: var(--ink); direction: rtl; }
  body:not(.lang-ar) .apf-ar, body.lang-ar .apf-it { display: none; }
  .ap-section-hdr { padding: 10px 0; }
  .ap-section-it { font-size: 18px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
  .ap-section-ar { font-size: 20px !important; color: var(--ink) !important; }
  body:not(.lang-ar) .ap-section-ar, body.lang-ar .ap-section-it { display: none; }
  #account-section button { min-height: var(--bersaglio); border-radius: 24px; font-size: 15px !important; }
  #account-section p { font-size: 16px !important; }
}
@media (max-width: 768px) { body.lang-ar .ap-feat-card, body.lang-ar .ap-hdr { direction: rtl; } }

/* ── Accedi su telefono: prima il modulo, una lingua sola ── */
@media (max-width: 768px) {
  .accedi-page { display: flex; flex-direction: column; }
  .accedi-form-wrap { order: -1; padding-top: 16px; }
  .accedi-hero .bi-sep { display: none; }
  .accedi-hero .bi { display: block; }
  body:not(.lang-ar) .accedi-hero .col-ar, body.lang-ar .accedi-hero .col-it { display: none; }
  body:not(.lang-ar) :is(.accedi-form-title-ar, .alert-ar, .success-ar, .nl-ar, .mn-ar, .accedi-form-note[style*="--fa"], .success-note[style*="--fa"]),
  body.lang-ar :is(.accedi-form-title, .alert-it, .success-it, .nl-it, .mn-it, .accedi-form-note:not([style*="--fa"]), .success-note:not([style*="--fa"])) { display: none; }
  body:not(.lang-ar) .accedi-btn > span:nth-child(n+2) { display: none; }
  body.lang-ar .accedi-btn > span:first-child, body.lang-ar .accedi-btn > .btn-sep { display: none; }
  .accedi-input { min-height: 52px; font-size: 18px; }
  .accedi-btn { min-height: 54px; font-size: 18px; border-radius: 27px; }
  .accedi-nl { min-height: var(--bersaglio); align-items: center; font-size: 16px; }
  .accedi-nl input { width: 24px; height: 24px; }
  .accedi-form-note, .mn-it, .mn-ar, .nl-it, .nl-ar, .alert-it, .alert-ar { font-size: 16px !important; }
}