/* ============================================================
   LANGUAGE HUB — DESIGN SYSTEM "MODERN INK"
   Light theme = default, Dark theme via classe .dark su <html>
   ============================================================ */

/* --- FONT FAMILIES --- */
:root {
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* --- LIGHT THEME (default) --- */
:root {
  /* Background */
  --color-bg:             #F8F9FC;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #F1F5FB;

  /* Borders */
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* Text */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;

  /* Brand / Primary (Navy) */
  --color-primary:        #1E3A5F;
  --color-primary-light:  #EFF6FF;

  /* Accent (Blue) */
  --color-accent:         #3B82F6;
  --color-accent-hover:   #2563EB;
  --color-accent-light:   #DBEAFE;

  /* Lavender (secondary accent) */
  --color-lavender:       #818CF8;
  --color-lavender-light: #EEF2FF;

  /* Semantic */
  --color-success:        #10B981;
  --color-success-light:  #D1FAE5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-danger:         #EF4444;
  --color-danger-light:   #FEE2E2;
  --color-streak:         #F97316;
  --color-streak-light:   #FFF7ED;

  /* Shadows */
  --shadow-sm:      0 1px 2px rgba(15,23,42,0.05);
  --shadow-card:    0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.04);
  --shadow-elevated:0 4px 20px rgba(30,58,95,0.10);
  --shadow-modal:   0 20px 60px rgba(15,23,42,0.15);

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-card: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* --- DARK THEME --- */
html.dark {
  --color-bg:             #0B1120;
  --color-surface:        #131D2E;
  --color-surface-raised: #1A2540;

  --color-border:         #1E3A5F;
  --color-border-strong:  #2D4A7A;

  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #475569;

  --color-primary:        #3B82F6;
  --color-primary-light:  #1E3A5F;

  --color-accent:         #60A5FA;
  --color-accent-hover:   #93C5FD;
  --color-accent-light:   #1E3A5F;

  --color-lavender:       #818CF8;
  --color-lavender-light: #1E1B4B;

  --color-success:        #34D399;
  --color-success-light:  #064E3B;
  --color-warning:        #FBBF24;
  --color-warning-light:  #451A03;
  --color-danger:         #F87171;
  --color-danger-light:   #450A0A;
  --color-streak:         #FB923C;
  --color-streak-light:   #431407;

  --shadow-sm:       0 1px 2px rgba(0,0,0,0.3);
  --shadow-card:     0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  --shadow-elevated: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-modal:    0 20px 60px rgba(0,0,0,0.6);
}

/* --- BASE STYLES --- */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display);
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}

/* --- COMPONENT BASE CLASSES --- */

/* Card */
.lh-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.lh-card:hover {
  box-shadow: var(--shadow-elevated);
}

/* Card con accent stripe sinistra */
.lh-card-accented {
  border-left: 4px solid var(--color-accent);
}

/* Button primario */
.lh-btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.lh-btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}
.lh-btn-primary:active {
  transform: translateY(0);
}

/* Button secondario */
.lh-btn-secondary {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}
.lh-btn-secondary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Button ghost */
.lh-btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}
.lh-btn-ghost:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

/* Button danger */
.lh-btn-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border-radius: var(--radius-md);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}
.lh-btn-danger:hover {
  background-color: var(--color-danger);
  color: #FFFFFF;
}

/* Button d'attenzione — l'ambra delle carte ostiche (v1.114.1, handover 20260918
   le-carte-ostiche).
   PERCHE' ESISTE. «Metti da parte» si perdeva fra i comandi: era un lh-btn-ghost, cioe' un
   bordo grigio come tutti gli altri, e chi studia non lo trovava. L'utente, il 2026-09-18:
   «io gli darei un colore che salta all'occhio. Magari lo stesso colore del box "ostiche"».
   E' quello: fondo, testo e bordo sono le stesse due variabili con cui e' dipinto il numero
   delle ostiche e l'etichetta «ostica · N errori» — --color-warning e --color-warning-light,
   la coppia che questo file usa gia' per .lh-badge-warning e .lh-rating-hard.
   ⛔ NESSUN COLORE SCRITTO A MANO: un #F59E0B qui dentro sarebbe il debito del seguito #55,
   e soprattutto resterebbe ambra chiara anche nel tema scuro, dove quelle variabili valgono
   tutt'altro.
   IL BORDO, che gli altri bottoni colorati non hanno, e' quello che lo fa somigliare al
   riquadro «ostiche» invece che a un bottone qualunque: e' la somiglianza che l'utente ha
   chiesto.
   HOVER: non si rovescia il colore come fa .lh-btn-danger. Li' il fondo diventa rosso col
   testo bianco e si legge; qui l'ambra e' chiara — nel tema scuro proprio chiara — e del
   bianco sopra non si leggerebbe. Si usa allora la stessa risposta di .lh-btn-secondary,
   che non tocca la coppia di colori. */
.lh-btn-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
}
.lh-btn-warning:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.lh-btn-warning:active {
  transform: translateY(0);
}

/* Badge / Pill */
.lh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}
.lh-badge-blue     { background: var(--color-accent-light);   color: var(--color-accent); }
.lh-badge-lavender { background: var(--color-lavender-light); color: var(--color-lavender); }
.lh-badge-success  { background: var(--color-success-light);  color: var(--color-success); }
.lh-badge-warning  { background: var(--color-warning-light);  color: var(--color-warning); }
.lh-badge-danger   { background: var(--color-danger-light);   color: var(--color-danger); }
.lh-badge-streak   { background: var(--color-streak-light);   color: var(--color-streak); }

/* Input */
.lh-input {
  width: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.lh-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.lh-input::placeholder {
  color: var(--color-text-muted);
}

/* Textarea */
.lh-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Label */
.lh-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Divider */
.lh-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}

/* ---------------------------------------------------------------------------------------
   IL TESTO, IL BORDO E IL FONDO CHE SEGUONO IL TEMA (v1.101.1)

   PERCHE' ESISTONO. `lh-card` e i bottoni il tema lo seguivano gia', ma per il testo dentro
   una scheda non c'era niente: chi scriveva una modale nuova aveva davanti a se' solo le
   classi grezze di Tailwind — `text-white`, `text-slate-300`, `border-slate-800` — che sono
   AGGANCIATE A UN TEMA SOLO e scavalcano le variabili. Il 2026-09-08 in admin/starter_packs.php
   erano 44 righe, e il titolo della modale «Eliminare la nota pronta?» in tema chiaro aveva
   1.00:1 di contrasto: bianco su bianco, non «poco leggibile» — assente.

   E PERCHE' NON `dark:` DAVANTI A OGNI CLASSE, che era l'altra strada. Scrivere
   `text-slate-900 dark:text-white` funziona, e infatti mezza applicazione e' scritta cosi',
   ma raddoppia le classi e soprattutto LASCIA IN PIEDI LO SCAVALCAMENTO: il tema continua a
   deciderlo ogni riga per conto suo, e il giorno che una tonalita' cambia vanno riviste tutte.
   Qui il tema lo decide un posto solo, e sono le variabili in cima a questo file.

   LE CORRISPONDENZE, scelte per NON cambiare il tema scuro (misurate il 2026-09-08):
     text-white     -> lh-text-primary    scuro #F1F5F9 invece di #FFFFFF (16.90:1 -> 15.42:1)
     text-slate-400 -> lh-text-secondary  scuro #94A3B8, cioe' ESATTAMENTE slate-400
     text-slate-300 -> lh-text-secondary  scuro #94A3B8 invece di #CBD5E1 (11.38:1 -> 6.59:1)
     border-slate-800 -> lh-border        scuro #1E3A5F invece di #1E293B
   E' l'unico punto in cui il tema scuro si sposta di un gradino, e sta sopra AA in tutti i
   casi; il tema chiaro passa da 1.00:1 a 17.85:1.

   ⚠️ NON esiste una `lh-text-muted` APPOSTA. `--color-text-muted` nel tema scuro vale #475569,
   piu' scuro del secondario: usarla al posto di `text-slate-400` avrebbe rotto il buio per
   riparare la luce, che e' esattamente l'errore da cui nasce questo blocco.
   --------------------------------------------------------------------------------------- */
.lh-text-primary   { color: var(--color-text-primary); }
.lh-text-secondary { color: var(--color-text-secondary); }
.lh-border         { border-color: var(--color-border); }
.lh-surface-raised { background-color: var(--color-surface-raised); }

/* IL COMANDO DISCRETO: un bottone che non ha ne' fondo ne' bordo, solo del testo o un'icona che
   si accende al passaggio del mouse. La «×» che chiude una finestra, la matita che apre una
   riga, l'«Annulla» accanto a un bottone rosso — che e' testo e non icona, ed e' il motivo per
   cui questa classe si chiama `lh-btn-quiet` e non `lh-icon-btn` come al primo giro.
   ⚠️ Chi gli mette accanto un `hover:` di Tailwind (per esempio `hover:text-rose-500` su un
   cestino) vince su questa regola, ed e' voluto — ma NON per specificita': le due regole
   valgono uguale (una classe piu' una pseudo-classe). Vince perche' Tailwind arriva DOPO:
   head_common.php mette il <link> a questo file prima dello <script> del compilatore, che il
   suo CSS lo inietta in un <style> a fine testa. Il colore di stato resta di chi lo dichiara. */
.lh-btn-quiet {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.lh-btn-quiet:hover {
  color: var(--color-text-primary);
}

/* Progress bar */
.lh-progress {
  height: 6px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.lh-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

/* Modal overlay */
.lh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
html.dark .lh-modal-overlay {
  background: rgba(0,0,0,0.7);
}

/* Modal panel */
.lh-modal-panel {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 480px;
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}

/* Toast notification */
.lh-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-primary);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-elevated);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.lh-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-sm);
}

/* Navigation bottom (mobile) */
.lh-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  z-index: 40;
}

/* Flashcard (study mode) */
.lh-flashcard {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.lh-flashcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(30,58,95,0.15);
}

/* Study rating buttons */
.lh-rating-again  { background: var(--color-danger-light);  color: var(--color-danger); }
.lh-rating-hard   { background: var(--color-warning-light); color: var(--color-warning); }
.lh-rating-good   { background: var(--color-success-light); color: var(--color-success); }
.lh-rating-easy   { background: var(--color-accent-light);  color: var(--color-accent); }

.lh-rating-btn {
  border-radius: var(--radius-md);
  border: none;
  padding: 0.75rem 0.5rem;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  flex: 1;
}
.lh-rating-btn:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* Section title */
.lh-section-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

/* Module card (Project Hub) */
.lh-module-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  color: var(--color-text-primary);
}
.lh-module-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--color-accent);
}

.lh-module-card.lh-module-card-featured {
  position: relative;
  border-width: 2px;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--shadow-card);
}
.lh-module-card-featured-badge {
  position: absolute;
  top: -0.65rem;
  right: 1.25rem;
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}

/* Module card compatta (Project Hub — griglia strumenti raggruppata, consegna
   20260827_handover_project-hub-redesign-opzione-b2.md §2): icona + titolo + badge su
   una riga sola, niente più descrizione estesa — la fascia "Cosa vuoi fare oggi?" sopra
   copre già il ruolo di indicare l'azione prioritaria. */
.lh-module-card-compact {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  color: var(--color-text-primary);
}
.lh-module-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--color-accent);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Footer */
.lh-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  background-color: var(--color-surface);
}
.lh-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.lh-footer a:hover {
  color: var(--color-accent);
}

/* Reader Mode TTS Word Highlighting */
.tts-word {
  display: inline;
  border-radius: 3px;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.tts-active {
  background-color: rgba(59, 130, 246, 0.25);
  color: #3b82f6;
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 4px;
}
html.dark .tts-active {
  background-color: rgba(96, 165, 250, 0.3);
  color: #60a5fa;
}

/* Override EasyMDE for compatibility with Design System */
.EasyMDEContainer .CodeMirror {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  font-family: var(--font-mono) !important;
}
.editor-toolbar {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.editor-toolbar button {
  color: var(--color-text-secondary) !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-border) !important;
}
html.dark .EasyMDEContainer .CodeMirror {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}
html.dark .editor-toolbar {
  background-color: var(--color-surface) !important;
}
html.dark .editor-toolbar button {
  color: #94a3b8 !important;
}
html.dark .editor-toolbar button:hover,
html.dark .editor-toolbar button.active {
  background-color: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

/* ============================================================
   MARKDOWN BODY — Stili per contenuto renderizzato da Markdown
   Usare su: preview EasyMDE, visualizzazione note salvate
   ============================================================ */

.markdown-body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-primary);
}

/* Titoli */
.markdown-body h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border);
}
.markdown-body h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 1.25rem 0 0.6rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.markdown-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 1rem 0 0.5rem;
}
.markdown-body h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0.75rem 0 0.4rem;
}

/* Paragrafi */
.markdown-body p {
  margin: 0 0 1rem;
}

/* Testo in evidenza */
.markdown-body strong {
  font-weight: 700;
  color: var(--color-text-primary);
}
.markdown-body em {
  font-style: italic;
  color: var(--color-text-secondary);
}
.markdown-body del {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Codice inline */
.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background-color: var(--color-lavender-light);
  color: var(--color-lavender);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* Blocco codice */
.markdown-body pre {
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.markdown-body pre code {
  background: none;
  color: var(--color-text-primary);
  padding: 0;
  font-size: 0.875rem;
}

/* Liste */
.markdown-body ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}
.markdown-body ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}
.markdown-body li {
  margin-bottom: 0.3rem;
}
.markdown-body li > ul,
.markdown-body li > ol {
  margin: 0.25rem 0;
}

/* Citazioni / Blockquote */
.markdown-body blockquote {
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-primary-light);
  color: var(--color-text-secondary);
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}
.markdown-body blockquote p {
  margin: 0;
}

/* Separatore orizzontale */
.markdown-body hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: 1.5rem 0;
}

/* Tabelle */
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.875rem;
  display: table;
}
.markdown-body thead {
  background-color: var(--color-primary-light);
}
.markdown-body th {
  text-align: left;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--color-border);
}
.markdown-body td {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  vertical-align: top;
}
.markdown-body tbody tr:nth-child(even) {
  background-color: var(--color-surface-raised);
}
.markdown-body tbody tr:hover {
  background-color: var(--color-accent-light);
  transition: background-color var(--transition-fast);
}

/* Link */
.markdown-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdown-body a:hover {
  color: var(--color-accent-hover);
}

/* Immagini */
.markdown-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 0.5rem 0;
}

/* Dark mode override */
html.dark .markdown-body thead {
  background-color: var(--color-surface-raised);
}
html.dark .markdown-body blockquote {
  background-color: var(--color-surface-raised);
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  /* Nascondere elementi non necessari */
  .lh-header,
  .lh-bottom-nav,
  .lh-footer,
  nav,
  .no-print,
  button,
  .lh-btn-primary,
  .lh-btn-secondary,
  .lh-btn-ghost,
  .lh-btn-danger,
  .search-bar-container,
  .print-hide {
    display: none !important;
  }

  /* Reset body per stampa */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  /* Card senza ombra in stampa */
  .lh-card, .lh-module-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  /* Header di stampa */
  .print-header {
    display: block !important;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

  /* Contenuto markdown in stampa */
  .markdown-body table {
    font-size: 10pt;
  }
  .markdown-body pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* Evita interruzioni di pagina in mezzo alle note */
  .note-print-block {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 2rem;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 1rem;
  }
}

/* ============================================================
   ACTIVITY HEATMAP
   ============================================================ */
:root {
  --heatmap-0: #e2e8f0;
  --heatmap-1: #93c5fd;
  --heatmap-2: #3b82f6;
  --heatmap-3: #1d4ed8;
}

html.dark {
  --heatmap-0: #1e293b;
  --heatmap-1: #1e3a5f;
  --heatmap-2: #2563eb;
  --heatmap-3: #93c5fd;
}

.heatmap-grid {
  display: flex;
  gap: 3px;
}
.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  cursor: default;
  transition: opacity var(--transition-fast, 0.15s ease);
}
.heatmap-cell:hover {
  opacity: 0.8;
}
.heatmap-cell.level-0 { background: var(--heatmap-0); }
.heatmap-cell.level-1 { background: var(--heatmap-1); }
.heatmap-cell.level-2 { background: var(--heatmap-2); }
.heatmap-cell.level-3 { background: var(--heatmap-3); }
.heatmap-cell.future  { background: transparent; border: 1px dashed var(--color-border, #334155); }

/* Ruby text (furigana) generato da [漢字]{かんじ} in Markdown — coerenza visiva col
   furigana già presente in project/reader.php (text-brand-500 font-bold). */
rt { color: var(--brand-500, #3b82f6); font-weight: 600; }

/* Link interni tra note [[Titolo Nota]] in Markdown */
.lh-note-link {
    color: var(--brand-500, #3b82f6);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}
.lh-note-link-broken {
    color: #f43f5e;
    border-bottom: 1px dashed #f43f5e;
    cursor: help;
}
@keyframes lh-note-flash {
    0%, 100% { background-color: transparent; }
    30% { background-color: rgba(99, 102, 241, 0.15); }
}
.lh-note-link-flash {
    animation: lh-note-flash 1.5s ease;
}

/* Correttore ortografico offline del diario (project/journal.php) */
.spell-error {
    text-decoration: underline wavy #f43f5e;
    text-decoration-skip-ink: none;
    cursor: pointer;
}




/* ---------------------------------------------------------------------------------------
   Barra dei filtri appiccicata (handover 20260829 diario §4, poi §11)
   ---------------------------------------------------------------------------------------
   Usata da project/journal.php e project/grammar.php: l'attrito non e' scorrere, e' che per
   filtrare bisogna tornare su.

   QUATTRO COSE, tutte decise da una misura e nessuna ovvia:

   1. NON puo' stare a `top: 0`. `.lh-header` e' gia' appiccicata li' con z-index 40, e una
      barra a top:0 ci finisce sotto: misurato, la casella di ricerca restava coperta dal logo
      e non era piu' cliccabile. Si ferma sotto l'intestazione, la cui altezza reale arriva da
      --lh-header-h (impostata in includes/footer.php, ricalcolata al ridimensionamento
      perche' l'intestazione va a capo su schermo stretto). Il ripiego di 4.5rem vale solo se
      quello script non gira.
   2. Il fondo NON puo' essere trasparente, o il testo che scorre la attraversa: stesso
      trattamento della barra di comando dell'editor del Diario, sfondo semitrasparente con
      sfocatura dietro.
   3. z-index 30: sotto l'intestazione (40) e sotto i modali (50).
   4. SOTTO I 768px NON SI APPICCICA AFFATTO, e questo e' il punto che sorprende chi legge
      solo il valore. A 375px la barra del Diario va a capo su TRE righe (anno/mese, ricerca,
      i tre bottoni) e misura 174px: su un telefono da 667px di altezza sono il 26%, che con
      i 77px dell'intestazione fanno il 38% dello schermo ceduto in permanenza — al contenuto
      resterebbe il 62%. E' un cattivo scambio per uno strumento che si usa a intermittenza,
      e proprio li' tornare in cima costa poco: la colonna e' una sola e il bottone
      "torna in cima" c'e' gia'. Su desktop e tablet, dove la barra sta su una riga sola, lo
      spazio se lo guadagna.
      SCARTATA l'alternativa di ridurla alla sola ricerca su schermo stretto: mantiene un
      pezzo di funzione, ma crea una barra che CAMBIA CONTENUTO con la larghezza, e le barre
      che cambiano contenuto si imparano male.
      Le altre tre regole restano scritte fuori dalla media query perche' restano necessarie
      quando la barra si appiccica: sono la ragione 1 e la 3, non un residuo.
   --------------------------------------------------------------------------------------- */
.lh-sticky-filters {
  /* Scritto per esteso anche se e' il valore predefinito: sotto il tablet la barra scorre
     via con la pagina, ed e' una scelta, non una dimenticanza. */
  position: static;
  top: var(--lh-header-h, 4.5rem);
  z-index: 30;
}

@media (min-width: 768px) {
  .lh-sticky-filters {
    position: sticky;
  }
}

/* ⚠️ TUTTO IL BLOCCO DELL'EDITOR COMPETE CON UN FOGLIO DI TERZE PARTI CHE VINCE A PARITA'
   (handover 20260908 la-griglia-che-perde-per-un-punto, §2)
   ---------------------------------------------------------------------------------------
   PRIMA DI AGGIUNGERE UNA REGOLA QUI SOTTO, LEGGI QUESTE RIGHE.

   `design-system.css` e' caricato da `includes/head_common.php`; EasyMDE porta il suo
   `assets/css/easymde/easymde.min.css` da `includes/header.php`, cioe' DOPO. A parita' di
   specificita' vince l'ultimo caricato: OGNI nostra regola scritta con una sola classe
   (0,1,0) su un elemento che EasyMDE stila per classe — `.EasyMDEContainer`, `.CodeMirror`,
   `.editor-toolbar`, `.editor-statusbar`, `.editor-preview*` — PERDE, IN SILENZIO, e il
   difetto si vede solo a schermo.

   E' GIA' SUCCESSO, ed e' costato una segnalazione con schermata: `.lh-editor-con-colonna
   { display: grid }` (0,1,0) perdeva contro `.EasyMDEContainer { display: block }` (0,1,0),
   la griglia non nasceva mai e la colonna cadeva sopra il testo a OGNI larghezza. Si e'
   vinto legando la nostra classe a quella di EasyMDE — (0,2,0) — non con `!important`, che
   avrebbe solo spostato il muro al prossimo, e non cambiando l'ordine dei fogli, che
   toccherebbe ogni pagina del sito per un difetto che sta in due.

   LA REGOLA DA SEGUIRE. Se la nostra classe sta SU un elemento di EasyMDE, scrivila
   accoppiata alla classe di EasyMDE (`.EasyMDEContainer.lh-editor-con-colonna`). Se sta su
   un elemento NOSTRO — `.lh-editor-shell`, `.lh-editor-panel`, `.lh-editor-rail` e i suoi
   figli — una classe sola basta: quei nomi EasyMDE non li conosce, e non c'e' gara.
   --------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------
   Il pannello agganciato all'editor (handover 20260828 grammatica editor §2, poi
   20260829 diario editor §2)
   ---------------------------------------------------------------------------------------
   Usato da project/grammar_edit.php e project/journal_edit.php, insieme al modulo
   assets/js/editor-panels.js. Stava inline nell'editor della Grammatica finche' l'editor era
   uno solo; con il secondo e' venuto qui, dove sta gia' il resto di cio' che le due pagine
   condividono.

   Su schermo largo il pannello e' una colonna della griglia e queste regole non lo toccano.
   Sotto `lg` il lato non c'e' piu', e diventa un FOGLIO ancorato in basso a tutta larghezza:
   non e' solo questione di spazio, i riquadri flottanti di prima si restringevano gia' da
   soli ma GALLEGGIAVANO SOPRA IL TESTO che stai scrivendo e ti coprivano la riga. Un foglio
   ancorato in basso non lo fa mai.
   --------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .lh-editor-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 45;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -12px 30px -12px rgba(15, 23, 42, .35);
  }
  /* Il foglio sta sopra il contenuto, quindi da solo coprirebbe comunque le ultime righe: con
     lo spazio in fondo la pagina puo' scorrere e portare la riga che si sta scrivendo sopra il
     foglio. E' la meta' che mancava per mantenere la promessa — non coprire il punto in cui
     stai scrivendo. */
  .lh-editor-shell.pannello-aperto { padding-bottom: 62vh; }
}

/* L'editor deve poter respirare: nessun `max-height` che lo comprima, a differenza dei modali
   da cui le due pagine nascono.

   ⚠️ QUESTO NUMERO STA QUI E IN NESSUN ALTRO POSTO, e la variabile esiste per questo: lo
   legge anche il JavaScript delle due pagine (project/grammar_edit.php e
   project/journal_edit.php), che lo passa a EasyMDE come opzione `minHeight`. Se un giorno
   diventa 70vh si cambia soltanto questa riga. NON ripeterlo la' dentro.

   PERCHE' IL JAVASCRIPT DEVE SAPERLO (handover 20260908 la-barra-che-si-posa-dentro).
   EasyMDE tiene la barra di scorrimento orizzontale di `.CodeMirror-scroll` FUORI dal bordo
   con `margin-bottom: -50px`, dove `.CodeMirror` la taglia: il trucco regge solo se
   l'elemento che scorre e' alto quanto il suo contenitore, e per questo EasyMDE gli da'
   `height: 100%`. Ma qui il contenitore dichiara un'altezza MINIMA, non un'altezza: una
   `height: 100%` non si risolve contro un minimo, l'elemento che scorre ripiega sui 300px
   che EasyMDE gli scrive inline e resta piu' corto — la barra si posa DENTRO l'area di
   scrittura. Misurato il 2026-09-08 in un iframe alto 812px: contenitore 487px, elemento che
   scorre 350px, sotto i 1024. Sopra i 1024 il CodeMirror e' una casella della griglia, quindi
   ha un'altezza definita e il problema non c'e' mai stato.
   Il rimedio e' dare all'elemento che scorre la stessa altezza minima: quel `min-height` e'
   inline, dal CSS non lo si batte senza `!important`, e l'opzione `minHeight` di EasyMDE
   scrive esattamente li'. */
:root { --lh-editor-altezza-minima: 60vh; }
.lh-editor-shell .CodeMirror { min-height: var(--lh-editor-altezza-minima); }

/* ---------------------------------------------------------------------------------------
   LA COLONNA ACCANTO AL FOGLIO (handover 20260908 le-stanze-accanto-al-foglio, opzione C)
   ---------------------------------------------------------------------------------------
   Dizionario, note di grammatica e guida NON formattano niente: non scrivono una riga nel
   testo, aprono un pannello a fianco. Fino alla v1.101.1 stavano in coda alla barra della
   formattazione, cioe' in un contenitore sbagliato, ed e' per questo che avevano il peso
   visivo di «grassetto». Qui diventano una striscia loro, con l'icona E LA PAROLA.

   ⚠️ LA STRISCIA C'E' SEMPRE, ANCHE A PANNELLO CHIUSO, ed e' tutto il senso della modifica:
   quelle funzioni devono vedersi QUANDO NON LE STAI USANDO, perche' e' allora che non si
   scoprono. Per questo NON e' la colonna del pannello — quella compare solo all'apertura
   (`.lh-editor-shell` passa a due colonne) — ma un elemento dentro il guscio di EasyMDE, che
   c'e' sempre.

   DOVE STA NEL DOM. La pagina la rende dentro il form e poi la sposta, una volta sola dopo
   `new EasyMDE(...)`, DENTRO `.EasyMDEContainer` e PRIMA di `.CodeMirror`. Prima e non dopo:
   EasyMDE cerca il pannello di anteprima affiancato come `nextSibling` del CodeMirror, e
   infilarcisi in mezzo lo romperebbe.

   SOTTO `lg` E' UNA FILA CHE VA A CAPO, NON CHE SCORRE. In flusso normale quella posizione
   nel DOM la mette da sola sotto la barra e sopra il testo. Una striscia che scorre di lato
   nasconderebbe l'ultima voce proprio a chi ha lo schermo piu' piccolo — l'errore tolto dal
   pannello admin a settembre. Con due o tre voci ci stanno tutte in 375px; se un giorno
   diventassero cinque, `flex-wrap` le manda a capo.

   IL FOGLIO DAL BASSO NON SI TOCCA: quelle regole stanno qui sopra e restano.
   --------------------------------------------------------------------------------------- */
.lh-editor-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background-color: var(--color-surface-raised);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.lh-editor-rail-gruppo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* LA GUIDA STA SOTTO UNA LINEA, e non e' estetica: e' aiuto sul Markdown, non una funzione
   dell'applicazione. Metterla nello stesso gruppo del dizionario e del ponte con le note
   direbbe che sono la stessa cosa, e la promozione delle altre due varrebbe meno. */
.lh-editor-rail-aiuto {
  padding-left: 0.5rem;
  border-left: 1px solid var(--color-border);
}

.lh-editor-rail-voce {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lh-editor-rail-voce svg { flex: none; }

.lh-editor-rail-voce:hover {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

/* La voce attiva si accende, come prima si accendeva il bottone nella barra: senza, non si
   capisce quale pannello si sta per chiudere. I due valori sono variabili del sistema, quindi
   reggono in tutti e due i temi (chiaro #DBEAFE/#2563EB, scuro #1E3A5F/#93C5FD). */
.lh-editor-rail-voce.attiva {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.lh-editor-rail-voce:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* SOPRA `lg`: la stessa striscia diventa una colonna verticale a fianco del foglio. Il guscio
   di EasyMDE passa a griglia, con la barra e la barra di stato che occupano tutta la larghezza
   e il testo e la colonna affiancati. Le aree sono dichiarate una per una: con la sola
   collocazione automatica il CodeMirror sarebbe finito in una riga sotto la colonna.

   ⚠️ `.EasyMDEContainer` DAVANTI ALLA NOSTRA CLASSE NON E' RIDONDANTE: E' LA CORREZIONE
   (handover 20260908 la-griglia-che-perde-per-un-punto). La classe si applica sempre a un
   `.EasyMDEContainer` — la mette `agganciaColonnaAllEditor()` sul genitore del CodeMirror —
   quindi accoppiarle porta la regola a (0,2,0) e le fa battere `.EasyMDEContainer
   { display: block }` (0,1,0) di easymde.min.css, che senza questo vinceva per il solo fatto
   di essere caricato dopo. NON TOGLIERLA per «semplificare»: senza, la griglia non nasce e la
   colonna torna sopra il testo.

   E (0,2,0) E' ANCHE IL LIVELLO GIUSTO, non solo quello che basta. Quando l'anteprima
   affiancata e' aperta EasyMDE mette `sided--no-fullscreen` sullo stesso elemento e chiede
   `display: flex`, anch'essa a (0,2,0) ma caricata dopo: quindi vince lei, ed e' cio' che
   vogliamo — in griglia il pannello di anteprima finirebbe in una riga sotto invece che a
   fianco. Alzare oltre questa specificita' romperebbe l'anteprima.

   IL `!important` SULLA RADICE IN BASSO A DESTRA RESTA E NON E' UNA SVISTA: compete con
   `.EasyMDEContainer .CodeMirror { border-radius: ... !important }` di questo stesso foglio
   (piu' su, nel blocco di compatibilita' EasyMDE). Contro un `!important` la specificita' non
   basta: serve un `!important`. */
@media (min-width: 1024px) {
  .EasyMDEContainer.lh-editor-con-colonna {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "barra   barra"
      "testo   colonna"
      "stato   stato";
  }
  .EasyMDEContainer.lh-editor-con-colonna > .editor-toolbar   { grid-area: barra; }
  .EasyMDEContainer.lh-editor-con-colonna > .editor-statusbar { grid-area: stato; }
  .EasyMDEContainer.lh-editor-con-colonna > .CodeMirror {
    grid-area: testo;
    min-width: 0;
    border-bottom-right-radius: 0 !important;
  }
  .EasyMDEContainer.lh-editor-con-colonna > .lh-editor-rail {
    grid-area: colonna;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: stretch;
    min-width: 9.5rem;
    border-left: none;
    border-bottom: 1px solid var(--color-border);
    border-bottom-right-radius: var(--radius-md);
  }
  .EasyMDEContainer.lh-editor-con-colonna > .lh-editor-rail .lh-editor-rail-gruppo {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  /* In colonna la linea che stacca la guida torna orizzontale. NON `margin-top: auto`: il
     foglio e' alto almeno `--lh-editor-altezza-minima`, e spingere la guida in fondo la
     allontanerebbe dalle altre invece di separarla. */
  .EasyMDEContainer.lh-editor-con-colonna > .lh-editor-rail .lh-editor-rail-aiuto {
    padding-left: 0;
    padding-top: 0.5rem;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* ---------------------------------------------------------------------------------------
   UN DOCUMENTO LUNGO CHE ARRIVA DAL DATABASE (handover 20260904
   meta-pagina-vestita-per-il-buio, §2)
   ---------------------------------------------------------------------------------------
   Usato da legal/terms.php, legal/privacy.php e legal/cookie.php: il contenuto e' HTML
   salvato in `legal_documents.content`, non markup scritto in una pagina.

   PERCHE NON `prose`. Fino alla v1.86.0 quelle pagine avevano `prose dark:prose-invert`, che
   non produceva UN SOLO STILE: e' il componente Typography di Tailwind, e il CDN non lo
   carica se non lo si chiede nell'indirizzo. Le due classi c'erano e il documento restava un
   muro indistinto — dodici <h2> e sedici <p> con lo stesso peso, la stessa dimensione e
   nessuno spazio in mezzo. Caricare Typography per quattro pagine sarebbe tirarsi in casa un
   pezzo di libreria: qui bastano le regole che servono davvero.

   CONTRO IL PREFLIGHT DI TAILWIND, E NON PER CASO. Tailwind azzera margini, dimensioni dei
   titoli e pallini delle liste con selettori di ELEMENTO (specificita' 0,0,1): ogni regola
   qui sotto e' scritta come `.lh-documento <tag>` (0,1,1) e quindi vince, in qualunque ordine
   i due fogli vengano caricati. Chi la riscrivesse come `.lh-documento > *` la perderebbe.

   I colori sono tutti variabili del tema: questa e' la meta' del difetto che restava fuori
   dalle mani di Tailwind, e deve restare vera in entrambi i temi.
   --------------------------------------------------------------------------------------- */
.lh-documento {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.75;
}
.lh-documento > :first-child { margin-top: 0; }
.lh-documento > :last-child  { margin-bottom: 0; }

.lh-documento h1,
.lh-documento h2,
.lh-documento h3,
.lh-documento h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 2rem 0 0.625rem;
}
.lh-documento h1 { font-size: 1.375rem; margin-top: 0; }
.lh-documento h3 { font-size: 1rem; }
.lh-documento h4 { font-size: 0.9375rem; }

/* Una riga sottile prima di ogni sezione: e' l'aria che rende un documento sfogliabile invece
   che leggibile solo dall'inizio. La prima sezione non ce l'ha, o sembrerebbe staccata dal
   titolo. */
.lh-documento h2 {
  font-size: 1.125rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.lh-documento > h2:first-child,
.lh-documento > h1 + h2 {
  padding-top: 0;
  border-top: 0;
}

.lh-documento p,
.lh-documento ul,
.lh-documento ol {
  margin: 0 0 1rem;
}
.lh-documento ul,
.lh-documento ol { padding-left: 1.5rem; }
.lh-documento ul { list-style: disc; }
.lh-documento ol { list-style: decimal; }
.lh-documento li { margin-bottom: 0.375rem; }

.lh-documento strong,
.lh-documento b {
  color: var(--color-text-primary);
  font-weight: 600;
}

.lh-documento a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lh-documento a:hover { color: var(--color-accent-hover); }

.lh-documento hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

/* legal/cookie.php ha una tabella vera. Stesse regole di .markdown-body, cosi' una tabella si
   legge uguale ovunque compaia. */
.lh-documento table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
}
.lh-documento thead { background-color: var(--color-primary-light); }
.lh-documento th {
  text-align: left;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--color-border);
}
.lh-documento td {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  vertical-align: top;
}

/* ---------------------------------------------------------------------------------------
   Il bottone «torna in cima» (handover 20260904 meta-pagina-vestita-per-il-buio, §3)
   ---------------------------------------------------------------------------------------
   La transizione di comparsa viveva inline in project/grammar.php e project/journal.php,
   identica in tutti e due. Con includes/back_to_top.php i consumatori diventano sei: la
   regola viene qui, dove sta il resto di cio' che le pagine condividono. Le due copie inline
   restano finche' quelle pagine non si toccano per altro — dicono la stessa cosa, quindi non
   fanno danno.

   La transizione si annulla per chi ha chiesto meno movimento; il bottone resta comunque,
   perche' non e' decorazione.
   --------------------------------------------------------------------------------------- */
#back-to-top { transition: opacity .18s ease, transform .18s ease; }
@media (prefers-reduced-motion: reduce) {
  #back-to-top { transition: none; }
}