/* ═══════════════════════════════════════════════════════════════
   VISUAL REDESIGN — tema thefaculty (brand 2026)
   Light mode, palette blu + viola indaco, shadow tinta brand,
   tipografia Inter. Linkato DOPO shared.css per override.
   Per disattivare → rimuovere il <link>, zero altre modifiche.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── TOKEN OVERRIDE ─────────────────────────────────────────── */
:root {
  /* Brand blu */
  --blue:     #4674B9;
  --blue-lt:  #5A8ED6;
  --blue-dim: rgba(70,116,185,0.12);

  /* Cream warm → grigio-azzurro chiaro */
  --cream:    #F5F7FA;
  --cream2:   #F4F8FF;
  --cream3:   #CCE0FF;

  /* Navy dark → gradient end (usato nei componenti hero "wow") */
  --navy:     #385D94;
  --navy2:    #4674B9;
  --navy3:    #5A8ED6;

  /* Ink */
  --ink:      #373737;
  --ink2:     #385D94;
  --muted:    #6B7280;

  /* Stati (rimappati su toni accessibili AA) */
  --green:    #15803D;
  --green-dim:rgba(21,128,61,0.12);
  --red:      #B91C1C;
  --red-dim:  rgba(185,28,28,0.10);

  /* Gold → viola indaco (rimappa tutte le classi .badge-gold, .btn-gold, ecc.) */
  --gold:     #5F52C9;
  --gold-lt:  #7C6FE6;
  --gold-dim: rgba(124,111,230,0.12);

  /* Typography: tutto Inter */
  --serif:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Shadow tinta brand (#385D94) */
  --shadow:   0 2px 4px rgba(56,93,148,0.06), 0 1px 2px rgba(56,93,148,0.04);
  --shadow-lg:0 12px 24px rgba(56,93,148,0.10), 0 4px 8px rgba(56,93,148,0.06);

  /* Extra shadow brand (per uso mirato) */
  --shadow-xs: 0 1px 2px rgba(56,93,148,0.05);
  --shadow-md: 0 4px 12px rgba(56,93,148,0.08), 0 2px 4px rgba(56,93,148,0.05);
  --shadow-xl: 0 24px 48px rgba(56,93,148,0.14), 0 8px 16px rgba(56,93,148,0.08);

  /* Brand accent (viola indaco) espliciti per uso mirato */
  --brand-accent:       #7C6FE6;
  --brand-accent-dark:  #5F52C9;
  --brand-accent-soft:  #EFEDFB;
  --brand-accent-border:#D6D1F4;
}

/* ─── BASE ──────────────────────────────────────────────────── */
body {
  background: #F5F7FA;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #373737;
}

/* ─── NAV (dark navy → bianco con border + shadow brand) ─────── */
.nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(204,224,255,0.55);
  box-shadow: 0 1px 0 rgba(56,93,148,0.04), 0 6px 18px -8px rgba(56,93,148,0.18);
}
/* Accent line brand in fondo alla nav */
.nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(70,116,185,0) 0%, rgba(70,116,185,0.35) 25%, rgba(124,111,230,0.35) 75%, rgba(124,111,230,0) 100%);
  pointer-events: none;
}
.nav-mark {
  background: linear-gradient(135deg, #4674B9, #5A8ED6);
  box-shadow: 0 4px 12px rgba(70,116,185,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.nav-name { color: #373737; }
.nav-name em { color: #5F52C9; font-weight: 700; }

.nav-link { color: #6B7280; font-weight: 500; }
.nav-link:hover  { color: #373737; background: #F4F8FF; }
.nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #4674B9 0%, #5A8ED6 100%);
  box-shadow: 0 4px 10px rgba(70,116,185,0.28);
}

.nav-badge {
  color: #5F52C9;
  background: #EFEDFB;
  border: 1px solid #D6D1F4;
  box-shadow: 0 1px 2px rgba(95,82,201,0.12);
}
.nav-avatar {
  background: linear-gradient(135deg, #4674B9, #5A8ED6);
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(56,93,148,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Bottone Esci (inline su 7 pagine): nato per nav navy scura, su nav bianca
   era invisibile. Override di background/border/color compatibile col brand. */
button[onclick="logout()"] {
  background: #FFFFFF !important;
  border: 1px solid #CCE0FF !important;
  color: #4B5563 !important;
  box-shadow: 0 1px 2px rgba(56,93,148,0.05);
  transition: background .15s, color .15s, border-color .15s;
}
button[onclick="logout()"]:hover {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #B91C1C !important;
}

/* ─── CARDS ─────────────────────────────────────────────────── */
.card {
  background: #FFFFFF;
  border: 1px solid rgba(204,224,255,0.55);
  box-shadow:
    0 1px 2px rgba(56,93,148,0.05),
    0 6px 18px -6px rgba(56,93,148,0.12);
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow:
    0 2px 4px rgba(56,93,148,0.06),
    0 16px 32px -10px rgba(56,93,148,0.18);
}

/* Le card "dark" erano navy — diventano gradient brand con testo bianco */
.card-dark,
.card-navy2 {
  background: linear-gradient(135deg, #4674B9 0%, #385D94 100%);
  border: none;
  box-shadow: var(--shadow-md);
  color: #FFFFFF;
}
.card-dark *,
.card-navy2 * { color: inherit; }

/* ─── EYEBROW (gold → blu brand di default) ──────────────────── */
.eyebrow { color: #4674B9; }
.eyebrow-blue  { color: #4674B9; }
.eyebrow-muted { color: #6B7280; }
.eyebrow-gold  { color: #5F52C9; } /* alias legacy */

/* ─── BADGE (gold → viola accent) ────────────────────────────── */
.badge-gold {
  background: #EFEDFB;
  color: #5F52C9;
  border: 1px solid #D6D1F4;
}
.badge-blue {
  background: #E8EEF7;
  color: #385D94;
  border: 1px solid #CCE0FF;
}
.badge-green {
  background: #ECFDF5;
  color: #15803D;
  border: 1px solid #A7F3D0;
}
.badge-red {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
.badge-cream {
  background: #F5F7FA;
  color: #6B7280;
  border: 1px solid #E8EEF7;
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-primary {
  background: #4674B9;
  color: #FFFFFF;
}
.btn-primary:hover {
  background: #385D94;
  box-shadow: 0 6px 16px rgba(70,116,185,0.30);
}

/* Gold → viola accent (CTA secondaria premium) */
.btn-gold {
  background: #5F52C9;
  color: #FFFFFF;
}
.btn-gold:hover {
  background: #4a3fb0;
  box-shadow: 0 6px 16px rgba(95,82,201,0.28);
}

.btn-ghost {
  background: #FFFFFF;
  color: #4B5563;
  border: 1px solid #E8EEF7;
}
.btn-ghost:hover {
  background: #F4F8FF;
  color: #373737;
  border-color: #CCE0FF;
}

/* btn-ghost-dark vive dentro .card-dark (che ora è blu gradient) — resta su sfondo scuro */
.btn-ghost-dark {
  background: rgba(255,255,255,0.12);
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.28);
}
.btn-ghost-dark:hover {
  background: rgba(255,255,255,0.20);
  color: #FFFFFF;
}

/* ─── PROGRESS BAR ──────────────────────────────────────────── */
.progress-bar       { background: rgba(255,255,255,0.22); }
.progress-bar.light { background: #E8EEF7; }
/* progress-fill usa color inline via JS, nessun override */

/* ─── TUTOR BUBBLE (dark → light brand) ──────────────────────── */
.tutor-bubble {
  background: #F4F8FF;
  border-left: 2px solid #4674B9;
  color: #4B5563;
}
.tutor-bubble strong { color: #373737; }
.tutor-bubble em     { color: #5F52C9; }

/* ─── QUIZ OPTION (m-opt) ───────────────────────────────────── */
.m-opt {
  background: #FFFFFF;
  border: 1.5px solid #E8EEF7;
  color: #373737;
}
.m-opt:hover:not(:disabled) {
  background: #F4F8FF;
  border-color: #CCE0FF;
}
.m-opt.correct {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #15803D;
}
.m-opt.wrong {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}
.m-let { color: #6B7280; }

/* ─── MODAL ─────────────────────────────────────────────────── */
.modal-bg {
  background: rgba(30, 41, 59, 0.55);
  backdrop-filter: blur(4px);
}
.modal { box-shadow: var(--shadow-xl); }

/* ─── EXPLANATION BOX ───────────────────────────────────────── */
.explanation {
  background: #F4F8FF;
  border-left: 3px solid #4674B9;
  color: #4B5563;
}
.explanation strong { color: #373737; }

/* ─── DIFFICULTY BADGE (rimappati a toni brand-accessibili) ─── */
.diff-easy { color: #15803D; }
.diff-med  { color: #C2410C; }
.diff-hard { color: #B91C1C; }

/* ─── STATUS DOT ────────────────────────────────────────────── */
.status-dot.online  { background: #15803D; box-shadow: 0 0 6px #15803D; }
.status-dot.loading { background: #5F52C9; }

/* ─── SKELETON ──────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #F4F8FF 25%, #E8EEF7 50%, #F4F8FF 75%);
  background-size: 200% 100%;
}

/* ─── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar-thumb        { background: #CCE0FF; }
::-webkit-scrollbar-thumb:hover  { background: #5A8ED6; }

/* ─── CARD QUIZ (cq-*) ──────────────────────────────────────── */
.cq-shell { background: #FFFFFF; }

.cq-topbar { color: #6B7280; }
.cq-dot            { background: #E8EEF7; }
.cq-dot.active     { background: #373737; }
.cq-dot.done       { background: #15803D; }
.cq-dot.wrong      { background: #B91C1C; }
.cq-dot.answered   { background: #4674B9; }

.cq-timer         { color: #373737; }
.cq-timer.warning { color: #B91C1C; }

.cq-question { color: #373737; font-weight: 600; }

.cq-opt {
  border: 1.5px solid #E8EEF7;
  background: #FFFFFF;
  color: #373737;
}
.cq-opt:hover:not(.locked) {
  background: #F4F8FF;
  border-color: #CCE0FF;
}
.cq-opt.selected {
  background: #E8EEF7;
  border-color: #4674B9;
}
.cq-opt.selected-correct {
  background: #ECFDF5;
  border-color: #15803D;
  color: #14532d;
}
.cq-opt.selected-wrong {
  background: #FEF2F2;
  border-color: #B91C1C;
  color: #7f1d1d;
}
.cq-opt.correct-reveal {
  background: rgba(236,253,245,0.6);
  border-color: #A7F3D0;
  color: #14532d;
}

.cq-feedback.correct { background: #ECFDF5; }
.cq-feedback.wrong   { background: #FEF2F2; }
.cq-feedback.correct .cq-feedback-label { color: #15803D; }
.cq-feedback.wrong   .cq-feedback-label { color: #B91C1C; }

.cq-btn {
  border: 1px solid #E8EEF7;
  background: #FFFFFF;
  color: #373737;
}
.cq-btn:hover:not(:disabled) {
  background: #F4F8FF;
  border-color: #CCE0FF;
}
.cq-btn.primary {
  background: #4674B9;
  border-color: #4674B9;
  color: #FFFFFF;
}
.cq-btn.primary:hover {
  background: #385D94;
  border-color: #385D94;
}

.cq-auto-hint { color: #6B7280; }
.cq-auto-hint button {
  border: 1px solid #E8EEF7;
  color: #373737;
}
.cq-auto-hint button:hover {
  background: #F4F8FF;
  border-color: #CCE0FF;
}

/* ─── TOAST (dark → light) ──────────────────────────────────── */
.tf-toast {
  background: #FFFFFF;
  color: #373737;
  border: 1px solid #E8EEF7;
  box-shadow: var(--shadow-xl);
}
.tf-toast-gold {
  background: linear-gradient(135deg, #EFEDFB 0%, #F4F8FF 100%);
  border-color: #D6D1F4;
}
.tf-toast-title {
  color: #4674B9;
  font-weight: 700;
}
.tf-toast-gold .tf-toast-title { color: #5F52C9; }
.tf-toast-desc  { color: #6B7280; }
.tf-toast-close { color: #6B7280; }
.tf-toast-close:hover { color: #373737; }

/* ─── HERO pagine (override inline bg) ──────────────────────── */
/* Ogni pagina ha il suo hero con `background: var(--navy)`; ora --navy è
   un blu brand medio, ma per dare il tocco "wow" applichiamo il gradient
   ufficiale sulle sezioni hero note (max 1 per pagina, niente svend). */
.hero,
.plan-hero,
.lesson-hero,
.map-hero,
.admin-hero,
.rp-hero,
.wh-hero {
  background:
    radial-gradient(120% 80% at 90% 0%, rgba(124,111,230,0.22) 0%, rgba(124,111,230,0) 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(90,142,214,0.35) 0%, rgba(90,142,214,0) 55%),
    linear-gradient(135deg, #4674B9 0%, #385D94 100%);
  border-bottom: none;
  box-shadow: var(--shadow-md);
  position: relative;
}
/* Texture sottile (brillantezza glass) */
.hero::after,
.plan-hero::after,
.lesson-hero::after,
.map-hero::after,
.rp-hero::after,
.wh-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}

/* Scope "superfici scure": il "gold" (ora viola) diventa viola-chiaro
   leggibile. Remap delle CSS vars sugli elementi con sfondo brand scuro. */
.hero,
.plan-hero,
.lesson-hero,
.map-hero,
.admin-hero,
.rp-hero,
.wh-hero,
.suggestion-card,
.card-dark,
.card-navy2 {
  --gold:     #D6D1F4;
  --gold-lt:  #EFEDFB;
  --gold-dim: rgba(214,209,244,0.18);
  --muted:    rgba(255,255,255,0.85);
  --ink:      #FFFFFF;
  --ink2:     #EFEDFB;
  --blue:     #CFE0F5;
  --blue-lt:  #E1ECF8;
  --blue-dim: rgba(207,224,245,0.18);
  --green:    #86EFAC;
  --green-dim:rgba(134,239,172,0.18);
  --red:      #FECACA;
  --red-dim:  rgba(254,202,202,0.18);
}

/* Titoli / eyebrow dentro scope scuro: contrasto più alto */
.hero .eyebrow,
.plan-hero .eyebrow,
.lesson-hero .eyebrow,
.map-hero .eyebrow,
.admin-hero .eyebrow,
.rp-hero .eyebrow,
.wh-hero .eyebrow,
.suggestion-card .eyebrow,
.card-dark .eyebrow,
.card-navy2 .eyebrow {
  color: #EFEDFB !important;
  font-weight: 700;
  font-size: 11px;
}
.hero .eyebrow-muted,
.card-dark .eyebrow-muted,
.suggestion-card .eyebrow-muted {
  color: rgba(255,255,255,0.88) !important;
}

/* Testo dentro hero: chiari garantiti su gradient brand */
.hero .eyebrow,
.plan-hero .eyebrow,
.lesson-hero .eyebrow,
.map-hero .eyebrow,
.rp-hero .eyebrow,
.wh-hero .eyebrow {
  color: #D6D1F4;
}

/* Admin hero: usa viola accent come badge secondario.
   Nota: .admin-badge vive nella nav bianca (vedi admin.html), quindi testo
   scuro indigo su sfondo lilla chiaro — stesso pattern di .nav-badge. */
.admin-badge {
  background: #EFEDFB !important;
  border: 1px solid #D6D1F4 !important;
  color: #5F52C9 !important;
  box-shadow: 0 1px 2px rgba(95,82,201,0.12);
}
.admin-title { color: #FFFFFF; }

/* Auth pages: body navy → gradient brand full-bleed */
body:has(.auth-wrap) {
  background: linear-gradient(135deg, #4674B9 0%, #385D94 100%) !important;
}
.auth-logo-mark {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
}
.auth-logo-name    { color: #FFFFFF; }
.auth-logo-name em { color: #EFEDFB; }

/* Onboarding: stesso trattamento */
body:has(.ob-page) {
  background: linear-gradient(135deg, #4674B9 0%, #385D94 100%) !important;
}

/* ─── Review badges (SM-2 / Consolida) ─────────────────────── */
.review-badge-sm2 {
  background: #EFEDFB !important;
  color: #5F52C9 !important;
  border: 1px solid #D6D1F4;
}
.review-badge-consolidate {
  background: #E8EEF7 !important;
  color: #4674B9 !important;
  border: 1px solid #CCE0FF;
}

/* ─── Suggestion card (hero secondary, dark gradient) ──────── */
.suggestion-card {
  background: linear-gradient(135deg, #4674B9 0%, #385D94 100%) !important;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(56,93,148,0.10),
    0 20px 48px -16px rgba(56,93,148,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.suggestion-card::after {
  background: radial-gradient(circle at top right, rgba(124,111,230,0.28), transparent 60%) !important;
}
.suggestion-card .sug-title,
.suggestion-card .sug-desc {
  color: rgba(255,255,255,0.88) !important;
}

/* Big numbers nel hero countdown */
.cd-appello.cd-next .cd-n { color: #FFFFFF !important; }
.countdown-date           { color: #EFEDFB !important; }

/* hstat big numbers on hero: bianchi readability */
.hstat-n.gold { color: #D6D1F4 !important; }

/* Hstat rings / bars: bordi e percentuali più brillanti */
.hstat-ring-track { stroke: rgba(255,255,255,0.15) !important; }

/* ─── hstat / hstat-b container (su hero): elevation leggera ─ */
.hstat, .hstat-b {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
}

/* ─── Countdown box (hero): glass effect ─────────────────── */
.countdown-box {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.cd-appello .cd-n { color: #FFFFFF !important; }
.cd-label, .countdown-l { color: rgba(255,255,255,0.88) !important; }

/* ─── Hero sottotitoli chiari ───────────────────────────────── */
.hero .hero-sub,
.plan-hero .hero-sub,
.lesson-hero .hero-sub,
.rp-hero .hero-sub {
  color: rgba(255,255,255,0.88) !important;
}

/* ─── LEGGIBILITÀ su superfici scure ────────────────────────
   shared.css/index.html usano `rgba(255,255,255,0.2-0.35)` per
   labels/meta/disclaimer: su navy puro reggevano, su blu brand
   (#385D94) diventano slavati. Bump a 0.70-0.85 dove serve. */

/* Labels / meta / bottoni ghost dark — bump a 0.85+ per AA su brand dark */
.hstat-l           { color: rgba(255,255,255,0.88) !important; }
.countdown-l       { color: rgba(255,255,255,0.88) !important; }
.cd-appello-lbl    { color: rgba(255,255,255,0.85) !important; }
.sug-title         { color: rgba(255,255,255,0.88) !important; }
.sug-desc          { color: rgba(255,255,255,0.85) !important; }
.sug-why-btn       { color: rgba(255,255,255,0.85) !important; }
.sug-why-panel     { color: rgba(255,255,255,0.88) !important; }
.cc-btn-dark       { color: rgba(255,255,255,0.85) !important; }
.cc-btn-dark:hover { color: #FFFFFF !important; }
.rank-of           { color: rgba(255,255,255,0.85) !important; }
.rank-th-lbl       { color: rgba(255,255,255,0.85) !important; }
.rq-meta           { color: rgba(255,255,255,0.85) !important; }

/* hstat-n di default (accuratezza): bianco pieno */
.hstat-n                   { color: #FFFFFF !important; }
/* hstat-n.green: su dark usa verde chiaro, su light resta success */
.hero .hstat-n.green,
.card-dark .hstat-n.green,
.suggestion-card .hstat-n.green { color: #86EFAC !important; }

/* Inline-style fallback: elementi con `color:rgba(255,255,255,0.X)`
   inline (label/meta/disclaimer) dentro scope dark → boost a 0.78.
   Target solo `color:` inline, non tocca background/border. */
.hero [style*="color:rgba(255,255,255,0."],
.hero [style*="color: rgba(255,255,255,0."],
.plan-hero [style*="color:rgba(255,255,255,0."],
.plan-hero [style*="color: rgba(255,255,255,0."],
.lesson-hero [style*="color:rgba(255,255,255,0."],
.lesson-hero [style*="color: rgba(255,255,255,0."],
.map-hero [style*="color:rgba(255,255,255,0."],
.map-hero [style*="color: rgba(255,255,255,0."],
.admin-hero [style*="color:rgba(255,255,255,0."],
.admin-hero [style*="color: rgba(255,255,255,0."],
.rp-hero [style*="color:rgba(255,255,255,0."],
.rp-hero [style*="color: rgba(255,255,255,0."],
.wh-hero [style*="color:rgba(255,255,255,0."],
.wh-hero [style*="color: rgba(255,255,255,0."],
.card-dark [style*="color:rgba(255,255,255,0."],
.card-dark [style*="color: rgba(255,255,255,0."],
.card-navy2 [style*="color:rgba(255,255,255,0."],
.card-navy2 [style*="color: rgba(255,255,255,0."],
.suggestion-card [style*="color:rgba(255,255,255,0."],
.suggestion-card [style*="color: rgba(255,255,255,0."] {
  color: rgba(255,255,255,0.88) !important;
}

/* Rank list items (list row): nomi e tempi ben visibili */
#leaderboard-list > div { color: rgba(255,255,255,0.88) !important; }

/* ─── Subject cards / generiche: elevation più evidente ─────── */
.subject-card,
.hse-card,
.rank-table,
.leaderboard-card {
  box-shadow:
    0 1px 2px rgba(56,93,148,0.05),
    0 8px 22px -10px rgba(56,93,148,0.15) !important;
  border: 1px solid rgba(204,224,255,0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÀ — WCAG 2.1 AA
   ═══════════════════════════════════════════════════════════════ */

/* ─── Focus ring globale (WCAG 2.4.7) ────────────────────────
   Applicato a tutti gli elementi interattivi. Usa box-shadow per
   non essere tagliato da overflow:hidden e :focus-visible per non
   mostrare focus su click di mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
.btn:focus-visible,
.btn-ghost-dark:focus-visible,
.cq-btn:focus-visible,
.cq-opt:focus-visible,
.m-opt:focus-visible,
.nav-link:focus-visible,
.cc-btn-dark:focus-visible,
.sug-why-btn:focus-visible,
.tf-toast-close:focus-visible {
  outline: 2px solid #4674B9;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(70,116,185,0.30);
  border-radius: 6px;
}
/* Focus su superfici dark → outline chiaro */
.hero a:focus-visible,
.card-dark a:focus-visible,
.suggestion-card a:focus-visible,
.hero button:focus-visible,
.card-dark button:focus-visible,
.suggestion-card button:focus-visible {
  outline: 2px solid #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
}

/* ─── prefers-reduced-motion (WCAG 2.3.3) ───────────────────
   Disabilita animazioni non essenziali per utenti con sensibilità. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Elimina trasformazioni hover/lift */
  .btn:hover,
  .cq-btn:hover,
  .card:hover {
    transform: none !important;
  }
}

/* ─── Non-color cues sui badge (WCAG 1.4.1) ─────────────────
   Aggiunge un glyph prima del testo per distinguerli senza colore. */
.badge-green::before { content: '✓ '; font-weight: 800; }
.badge-red::before   { content: '✕ '; font-weight: 800; }
.badge-gold::before  { content: '● '; font-weight: 800; }
.badge-blue::before  { content: 'i '; font-style: italic; font-weight: 800; margin-right: 1px; }

/* Difficulty badges: anche questi distinguibili senza colore */
.diff-easy::before { content: '○ '; }
.diff-med::before  { content: '◐ '; }
.diff-hard::before { content: '● '; }

/* ─── Utility visually-hidden (screen reader only) ──────────
   Per h1/label che devono essere annunciati ma non visibili. */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── h1 generico: eredita lo stile del contenitore ─────────
   Molte pagine convertono un div titolo esistente in h1:
   evitiamo che il browser applichi default (2em + margin). */
h1 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}