/* shell del portale: menu a sinistra (desktop), barra in basso (telefono) */
:root { --acc: var(--accent, #4f46e5); --acc2: var(--accent-bg, #eef2ff); --nav-w: 232px; --nav-h: 64px; }
html, body { height: 100%; }
body.pt, body.pt.shared { margin: 0; display: flex; flex-direction: row; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font, Inter, "Segoe UI", system-ui, sans-serif); }
.pt-nav { width: var(--nav-w); flex: 0 0 var(--nav-w); background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 12px; gap: 14px; position: sticky; top: 0; height: 100vh; }
.pt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 15px; padding: 4px 8px; }
.pt-logo { width: 28px; height: 28px; border-radius: 9px; background: var(--acc); position: relative; flex: 0 0 auto; }
.pt-logo::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.pt-links { display: flex; flex-direction: column; gap: 4px; }
.pt-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14.5px; min-height: 44px; }
.pt-link:hover { background: var(--bg); color: var(--text); }
.pt-link.active { background: var(--acc2); color: var(--acc); font-weight: 600; }
.pt-link .lucide { width: 18px; height: 18px; flex: 0 0 auto; }
.pt-page { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.pt-page > header.pt-head, .pt-page > section, .pt-page > footer.pt-foot { padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); max-width: 1180px; width: 100%; box-sizing: border-box; }
.pt-head { padding-top: 34px; padding-bottom: 8px; }
.pt-eyebrow { color: var(--muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.pt-head h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 4px 0 8px; line-height: 1.15; letter-spacing: -.01em; }
.pt-intro { color: var(--muted); margin: 0 0 8px; max-width: 640px; font-size: 15.5px; }
.pt-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13.5px; margin-bottom: 10px; min-height: 32px; }
.pt-back .lucide { width: 16px; height: 16px; }
.pt-sec { font-size: 13px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin: 22px 0 10px; font-weight: 600; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.pt-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; transition: transform .15s, box-shadow .15s, border-color .15s; min-height: 120px; }
.pt-card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(15, 23, 42, .10); border-color: var(--acc); }
.pt-card h2 { margin: 2px 0; font-size: 19px; line-height: 1.3; }
.pt-card.soon { opacity: .72; border-style: dashed; }
.pt-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pt-tag { font-size: 12px; color: var(--muted); }
.pt-count { font-size: 12.5px; font-weight: 600; color: var(--acc); background: var(--acc2); border-radius: 999px; padding: 3px 10px; }
.pt-count.muted { color: var(--muted); background: var(--bg); font-weight: 500; }
.pt-muted { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.5; }
.pt-date { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--acc); background: var(--acc2); padding: 3px 10px; border-radius: 999px; align-self: flex-start; }
.pt-course-tag { font-size: 12.5px; color: var(--muted); }
.pt-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--acc); font-weight: 600; font-size: 14px; }
.pt-go .lucide { width: 16px; height: 16px; }
.pt-empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; }
.pt-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 56px; }
.pt-row.past { opacity: .6; } .pt-row.today { border-color: var(--acc); }
.pt-row-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; flex: 0 0 46px; line-height: 1; }
.pt-row-date b { font-size: 20px; } .pt-row-date small { font-size: 11px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.pt-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pt-row-t { font-weight: 600; font-size: 14px; } .pt-row-s { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-pill { display: inline-flex; align-items: center; font-size: 12px; border-radius: 999px; padding: 4px 10px; background: var(--bg); color: var(--muted); text-decoration: none; white-space: nowrap; min-height: 28px; }
.pt-pill.ok { background: var(--acc2); color: var(--acc); font-weight: 600; } .pt-pill.muted { opacity: .7; }
.pt-avviso { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: 0 12px 40px -12px rgba(0,0,0,.35); font-size: 14px; }
.pt-avviso a { color: var(--accent); font-weight: 600; text-decoration: none; } .pt-avviso button { margin-left: auto; border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 10px; padding: 6px 12px; font: inherit; cursor: pointer; }
.pt-pill.virt { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, #4f46e5 12%, var(--card)); color: #4f46e5; border-color: color-mix(in srgb, #4f46e5 35%, var(--line)); text-decoration: none; margin-left: 6px; }
.pt-pill.virt .lucide { width: 14px; height: 14px; } .pt-pill.virt.big { margin-left: 0; padding: 8px 14px; font-size: 14px; border-radius: 12px; }
.pt-virt { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 10px 0 0; } .pt-virt .pt-muted { font-size: 13px; }
.cal-ev .map.virt { color: #4f46e5; } .cal-ev .map.virt .lucide { width: 13px; height: 13px; }
/* pagine di lettura (articolo, glossario, quiz): la pagina scorre normalmente anche sul telefono. tokens.css mette
   overflow hidden sul body per l'app; qui lo si annulla con specificita' alta. */
html body.pt.x-page { position: static; height: auto; min-height: 100vh; overflow: visible; overscroll-behavior: auto; touch-action: auto; }
html body.pt.x-page .pt-page { height: auto; min-height: 100vh; overflow: visible; }
html body.pt.x-page.x-mappa { height: 100vh; height: 100dvh; overflow: hidden; }
.pt-foot { margin-top: auto; color: var(--muted); font-size: 12.5px; padding-top: 26px; padding-bottom: 26px; }
/* pagina calendario: contenuto a tutta altezza */
body.pt.full .pt-page { height: 100vh; min-height: 0; }
body.pt.full .pt-page > .cal { flex: 1; }
/* pagina lezione: la shell della pagina condivisa dentro il portale */
body.pt.pt-shell { height: 100vh; overflow: hidden; }
body.pt.pt-shell .pt-page { height: 100vh; min-height: 0; }
body.pt.pt-shell .pt-page > .sh-top { flex: 0 0 auto; }
body.pt.pt-shell .pt-page > main.sh-main { flex: 1; min-height: 0; }
.pt-lesson-top { gap: 10px; }
.pt-lesson-title { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.25; }
.pt-lesson-title .sh-title { margin-left: 0; max-width: 46vw; }
.pt-crumb { font-size: 12px; color: var(--muted); text-decoration: none; }
.pt-lesson-date { font-size: 11.5px; color: var(--muted); }
.pt-sintesi { display: none; }   /* su desktop il pannello e' sempre visibile: il pulsante serve solo sugli schermi stretti */
/* nascondi comandi da autore eventualmente presenti nei componenti condivisi (nella pagina studenti nessun pulsante senza effetto) */
.pt-shell [title="Esporta e altro"], .pt-shell [title^="Esporta"], .pt-shell [data-act="edit"], .pt-shell [data-act="reload"], .pt-shell .mv-copy,
.pt-shell #mv-exp, .pt-shell #mv-exp-list, .pt-shell #doc-edit, .pt-shell #doc-reload { display: none !important; }
.pt-shell .mv-tools > .mv-menu:has(> #mv-exp) { display: none !important; }
/* fumetti dei pulsanti: compaiono dopo 300 ms sotto il pulsante (stile di components.css) */
.pt [data-tip]:hover::after, .pt [data-tip]:focus-visible::after { transition-delay: .3s; }
/* telefono: barra in basso */
@media (max-width: 900px) {
  :root { --nav-h: 62px; }
  body.pt, body.pt.shared { flex-direction: column; }
  .pt-nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); flex-direction: row; border-right: 0; border-top: 1px solid var(--line); z-index: 70; background: var(--card); }
  .pt-brand { display: none; }
  .pt-links { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .pt-link { flex: 1; flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 11.5px; min-height: 48px; justify-content: center; border-radius: 12px; }
  .pt-link .lucide { width: 22px; height: 22px; }
  .pt-page { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  body.pt.full .pt-page, body.pt.pt-shell .pt-page { height: calc(100vh - var(--nav-h) - env(safe-area-inset-bottom)); padding-bottom: 0; }
  .pt-head { padding-top: 18px; } .pt-head h1 { font-size: 24px; }
  .pt-grid { grid-template-columns: 1fr; }
  .pt-card { padding: 16px; min-height: 0; }
  .pt-row-s { white-space: normal; }
  .pt-lesson-title { display: none; }
  .pt-lesson-top { padding: 6px 10px; }
  #sh-views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #sh-views button { min-height: 40px; }
  /* mappa sul telefono: niente suggerimenti per il mouse */
  .pt-shell .mv-hint { display: none !important; }
  /* pulsante "Sintesi" accanto alle viste: apre la descrizione (e la scheda del nodo) come foglio dal basso */
  .pt-shell .pt-lesson-top { display: flex; flex-wrap: nowrap; align-items: stretch; }
  body.pt #sh-views { flex: 1 1 auto; width: auto; min-width: 0; }
  .pt-sintesi { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; min-width: 76px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--acc); background: var(--acc2); color: var(--acc); font: 600 11.5px/1 var(--font, inherit); cursor: pointer; }
  .pt-sintesi .lucide { width: 18px; height: 18px; }
  .pt-own-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70vh; max-height: 70dvh; z-index: 80; background: var(--card); border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(15, 23, 42, .25); padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; font-size: 14px; line-height: 1.5; }
  .pt-own-sheet .handle { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
  .pt-own-sheet h4 { margin: 10px 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  /* la pagina lezione non scorre: un dito muove la mappa, due dita ingrandiscono; la cronologia semplice scorre al suo interno */
  body.pt.pt-shell { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  body.pt.pt-shell .pt-page { height: calc(100vh - var(--nav-h) - env(safe-area-inset-bottom)); height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom)); }
  .pt-shell main.sh-main, .pt-shell .sh-view, .pt-shell .mv, .pt-shell .mv-body { overflow: hidden; }
  .pt-shell #sh-tl { overflow: auto; overscroll-behavior: contain; }
  .pt-shell .mv-canvas, .pt-shell .mv-canvas svg.markmap, .pt-shell .me-host, .pt-shell .bd-host { touch-action: none; overscroll-behavior: contain; }
  .pt-shell .mv-bar { padding: 6px 8px; }
  .pt-shell .mv-ic { min-height: 40px; min-width: 40px; }
  .cal-head h1 small { display: none; }
  .pt-date { text-transform: none; }
}
/* telefono in orizzontale: barra laterale sottile, tutto lo spazio al contenuto */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  :root { --nav-h: 0px; }
  body.pt, body.pt.shared { flex-direction: row; }
  .pt-nav { position: sticky; top: 0; bottom: auto; left: auto; right: auto; width: 56px; flex: 0 0 56px; height: 100vh; flex-direction: column; padding: 8px 4px; border-top: 0; border-right: 1px solid var(--line); }
  .pt-links { flex-direction: column; justify-content: flex-start; gap: 6px; }
  .pt-link { min-height: 44px; padding: 4px; } .pt-link span { display: none; }
  .pt-page { padding-bottom: 0; }
  body.pt.full .pt-page, body.pt.pt-shell .pt-page { height: 100vh; }
  .pt-head { padding-top: 12px; }
  .pt-lesson-top { padding: 4px 8px; }
  .pt-sintesi { flex-direction: row; min-height: 36px; min-width: 0; gap: 6px; padding: 4px 10px; font-size: 12px; }
  .pt-shell .sh-top { padding: 3px 8px; }
  .pt-shell #sh-views button { min-height: 34px; padding: 5px 9px; }
}
/* tablet / desktop stretto: menu a icone */
@media (min-width: 901px) and (max-width: 1100px) {
  :root { --nav-w: 76px; }
  .pt-brand-t, .pt-link span { display: none; }
  .pt-link { justify-content: center; }
}

/* ---- pagina lezione sul telefono (classi pt-phone / pt-landscape / pt-tablet messe da mapview.js sul <html>):
   una sola barra in alto (freccia Indietro, viste, Sintesi), niente barra di navigazione in basso, mappa a tutto schermo,
   foglio dal basso / cassetto gestiti dal componente (mapview.css). Desktop invariato. ---- */
.pt-back { display: none; }
html.pt-phone body.lesson-page .pt-nav, html.pt-landscape body.lesson-page .pt-nav { display: none !important; }
html.pt-phone body.pt.lesson-page, html.pt-landscape body.pt.lesson-page { flex-direction: column; }
html.pt-phone body.pt.lesson-page .pt-page, html.pt-landscape body.pt.lesson-page .pt-page { height: 100vh; height: 100dvh; padding-bottom: 0; }
html.pt-phone .pt-lesson-top, html.pt-landscape .pt-lesson-top { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; box-sizing: border-box; min-height: 0; height: calc(48px + env(safe-area-inset-top)); padding: 4px 8px; padding-top: calc(4px + env(safe-area-inset-top)); overflow: hidden; }
html.pt-phone .pt-back, html.pt-landscape .pt-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); flex: 0 0 auto; text-decoration: none; }
html.pt-phone .pt-back:active, html.pt-landscape .pt-back:active { background: var(--accent-bg, var(--acc2)); }
html.pt-phone .pt-back .lucide, html.pt-landscape .pt-back .lucide { width: 22px; height: 22px; }
html.pt-phone .pt-sintesi, html.pt-landscape .pt-sintesi { display: inline-flex; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 0; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--acc, var(--accent)); }
html.pt-phone .pt-sintesi span, html.pt-landscape .pt-sintesi span { display: none; }
html.pt-phone .pt-sintesi .lucide, html.pt-landscape .pt-sintesi .lucide { width: 20px; height: 20px; }
html.pt-landscape .pt-lesson-title { display: flex; flex: 1 1 auto; flex-direction: row; align-items: center; min-width: 0; margin-left: 0; }
html.pt-landscape .pt-lesson-title .pt-crumb, html.pt-landscape .pt-lesson-title .pt-lesson-date { display: none; }
html.pt-landscape .pt-lesson-title .sh-title { max-width: none; font-size: 13px; }
html.pt-tablet .pt-sintesi { display: inline-flex; flex-direction: row; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 10px; }
/* foglio proprio del portale (vista Cronologia, dove la mappa e' nascosta) e suo sfondo */
.pt-sheet-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 79; }