/* Console uBC 1996 · scocca comune dei moduli a pagina (Percorsi di lettura, Taccuino). Palette definitiva: #F4F4F2 #E7E7E5 #F9F9F8 #BFC0BD #222222 #FF4500 */
:root{
  --ubc-paper:#F4F4F2;--ubc-panel:#E7E7E5;--ubc-map:#F9F9F8;--ubc-ink:#222222;--ubc-orange:#FF4500;--ubc-structure:#BFC0BD;--ubc-hairline:#DADADA;--ubc-muted:#747474;
  --card:#FFFFFF;--ink2:#4C4C4C;--r:10px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--title:'Space Grotesk',system-ui,sans-serif;--body:'Plus Jakarta Sans',system-ui,sans-serif
}
*{box-sizing:border-box}
html{background:var(--ubc-paper);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--ubc-paper) radial-gradient(#D8D8D8 1px,transparent 1px) 0 0/22px 22px;color:var(--ubc-ink);font-family:var(--body);-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ubc-orange);outline-offset:2px}
img{max-width:100%}

/* ---------- scocca e testata */
.c5{max-width:1126px;margin:14px auto;padding:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border-radius:22px;background:var(--ubc-panel);border:1.5px solid var(--ubc-structure);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #C9C9C9,0 24px 40px -30px rgba(0,0,0,.5)}
.c5-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;min-height:72px;padding:0 14px 0 20px;border-radius:14px;background:var(--ubc-ink);color:#F4F4F2;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 #0D0D0D}
.c5-brand{display:flex;align-items:baseline;gap:6px;padding-right:18px;border-right:1px solid #444444;color:#FFFFFF;text-decoration:none;font:400 30px/1 var(--title);letter-spacing:-.02em;white-space:nowrap}
.c5-brand b{font-weight:700}.c5-brand i{font-style:normal;color:var(--ubc-orange)}
.c5-title{display:grid;gap:3px;margin:0;min-width:0;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A7A7A7;white-space:nowrap}
.c5-title b{font:700 15px var(--title);letter-spacing:.04em;color:#FFFFFF;overflow:hidden;text-overflow:ellipsis}
.c5-count,.c5-headr{margin-left:auto;font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.c5-lead{margin:0;padding:6px 10px 2px;max-width:90ch;font:400 15px/1.55 var(--body);color:#333333}
.c5-lead span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink2)}
.c5-empty{margin:0;padding:28px;border-radius:16px;border:1.5px dashed var(--ubc-structure);text-align:center;font:500 14px var(--body);color:var(--ink2)}
.ph5{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.c5-pan{padding:14px;border-radius:16px;background:var(--ubc-panel);border:1px solid var(--ubc-structure);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.c5-paper{border-radius:16px;background:var(--ubc-map);border:1px solid var(--ubc-structure);box-shadow:inset 0 0 0 4px #EFEFEE;min-width:0}
.ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:48px;padding:8px 14px;border-bottom:1px solid var(--ubc-hairline)}
.ph p{margin:0;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}.ph p b{color:var(--ubc-orange)}
.ph-r{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ubc-muted)}
.small{margin:8px 0 0;font:400 12px/1.5 var(--body);color:var(--ink2)}

/* pulsanti */
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r);cursor:pointer;text-decoration:none;font:700 13px var(--body)}
.b1{border:0;background:var(--ubc-ink);color:#FFFFFF;box-shadow:0 2px 0 #000000}
.b2{border:1px solid var(--ubc-structure);background:var(--card);color:var(--ubc-ink);box-shadow:0 2px 0 var(--ubc-structure)}
.b1:active,.b2:active{transform:translateY(1px)}

/* scheda di un articolo: copertina 40/27 */
.c5-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--ubc-hairline);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.c5-card:hover{border-color:var(--ubc-structure);box-shadow:0 2px 0 var(--ubc-structure)}
.c5-card .cv,.pcard .cv{position:relative;display:block;aspect-ratio:40/27;border-radius:8px;overflow:hidden;background:repeating-linear-gradient(135deg,#ECECEA 0 6px,#E4E4E2 6px 12px)}
.c5-card .cv img,.pcard .cv img{display:block;width:100%;height:100%;object-fit:cover}
.cv .pl{position:absolute;inset:0;display:grid;place-items:center;padding:6px;text-align:center;font:500 10px var(--mono);text-transform:uppercase;color:var(--ubc-muted)}
.c5-card .cb{display:grid;align-content:start;gap:5px;min-width:0}
.kk{font:600 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.kk a{color:inherit}
.c5-card b{font:700 17px/1.25 var(--title);overflow-wrap:anywhere}
.c5-card .ff{font-size:13px;color:var(--ink2)}
.c5-card.wide{grid-template-columns:minmax(160px,34%) minmax(0,1fr)}
.c5-card.wide b{font-size:20px}

/* ---------- Percorsi: indice */
.c5-intro{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c5-intro>div{padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--ubc-structure)}
.c5-intro p:not(.ph5){margin:0;font:400 14.5px/1.55 var(--body);color:#333333}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.pcard{display:grid;grid-template-rows:auto 1fr;border-radius:16px;background:var(--ubc-map);border:1px solid var(--ubc-structure);overflow:hidden;text-decoration:none;transition:box-shadow .15s}
.pcard:hover{box-shadow:0 3px 0 var(--ubc-structure)}
.pcard .cv{border-radius:0}
.pcard .cb{display:grid;align-content:start;gap:6px;padding:14px 16px 16px}
.pcard b{font:700 21px/1.2 var(--title)}
.pcard .pi{font:400 14px/1.5 var(--body);color:#333333}
.pprog{display:grid;gap:6px;margin-top:6px}
.pprog em{font:600 11px var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase}
.pbar{display:block;height:6px;border-radius:3px;background:#DCDCDA;overflow:hidden}
.pbar i{display:block;width:var(--p,0%);height:100%;background:var(--ubc-ink);transition:width .3s}

/* ---------- Percorsi: il percorso */
.pv{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:10px;align-items:start}
.prail{position:sticky;top:94px;max-height:calc(100vh - 110px);overflow:auto;padding:16px;border-radius:16px;background:var(--ubc-panel);border:1px solid var(--ubc-structure);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.prail .back{display:inline-flex;align-items:center;min-height:36px;margin-bottom:6px;font:600 12px var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.prail .back:hover{text-decoration:underline}
.prail h1{margin:6px 0 8px;font:700 28px/1.1 var(--title);letter-spacing:-.01em}
.pintro{margin:0 0 12px;font:400 14.5px/1.55 var(--body);color:#333333}
.pst{margin:6px 0 10px;font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.pact{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pidx{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.pidx a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;min-height:36px;padding:4px 6px;border-radius:8px;text-decoration:none;font:500 13px/1.3 var(--body)}
.pidx a:hover{background:#DEDEDC}
.pidx i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ubc-ink);font:700 11px var(--mono);font-style:normal}
.pidx a.done i{background:var(--ubc-ink);color:#FFFFFF}
.pidx a.on{background:var(--card);box-shadow:inset 3px 0 0 var(--ubc-ink)}
.pidx span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ptap{display:grid;gap:10px}
.tp{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:16px;border-radius:16px;background:var(--ubc-map);border:1px solid var(--ubc-structure);scroll-margin-top:94px}
.tpn{display:grid;align-content:start;justify-items:center}
.tpn b{font:700 34px/1 var(--title)}
.tpn span{font:500 11px var(--mono);color:var(--ubc-muted)}
.tp.done .tpn b{color:var(--ubc-muted)}
.tpb{display:grid;gap:10px;min-width:0}
.tnota{margin:0;padding:12px 14px;border-radius:10px;background:var(--card);border-left:3px solid var(--ubc-ink)}
.tnota span{display:block;margin-bottom:4px;font:600 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.tnota p{margin:0;font:500 15.5px/1.5 var(--body)}
.tpa{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tgl{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 10px;border-radius:var(--r);border:1px solid var(--ubc-structure);background:var(--card);cursor:pointer;font:600 13px var(--body)}
.tgl i{position:relative;width:36px;height:20px;border-radius:10px;background:#CFCFCD;transition:background .15s}
.tgl i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.tgl[aria-pressed=true] i{background:var(--ubc-ink)}.tgl[aria-pressed=true] i::after{transform:translateX(16px)}
.pmob{display:none}

/* ---------- Taccuino */
.tg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:10px;align-items:start}
.tcol{display:grid;gap:10px}
.tq{margin-left:auto}.tq input{width:220px;max-width:100%;min-height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--ubc-structure);background:var(--card);font:14px var(--body)}
.tlist{display:grid;gap:10px;padding:12px}
.ti{display:grid;gap:8px;padding:10px;border-radius:14px;background:var(--ubc-paper);border:1px solid var(--ubc-hairline)}
.ti .c5-card{border:0;padding:6px;background:var(--card)}
.ti label{display:grid;gap:4px;font:600 10.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.ti textarea{width:100%;min-height:62px;padding:8px 10px;border-radius:9px;border:1px solid var(--ubc-structure);background:var(--card);font:400 14px/1.5 var(--body);text-transform:none;letter-spacing:0;color:var(--ubc-ink);resize:vertical}
.lnk{justify-self:start;min-height:36px;padding:0 4px;border:0;background:none;cursor:pointer;font:600 12px var(--body);text-decoration:underline;text-underline-offset:3px;color:var(--ink2)}
.tfr{display:grid;gap:8px;padding:12px}
.tfr figure{margin:0;padding:12px 14px;border-radius:10px;background:var(--card);border-left:3px solid var(--ubc-ink)}
.tfr blockquote{margin:0 0 6px;font:500 15px/1.5 var(--body)}
.tfr figcaption{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font:500 12px var(--body);color:var(--ink2)}
.tper{display:grid;gap:8px;padding:12px}
.tper a{display:grid;gap:6px;padding:12px 14px;border-radius:10px;background:var(--card);border:1px solid var(--ubc-hairline);text-decoration:none}
.tper a:hover{border-color:var(--ubc-structure)}
.tper b{font:700 16px/1.25 var(--title)}.tper em{font:600 11px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.tidea{display:grid;gap:10px;justify-items:start}.tidea p{margin:0;font:400 13.5px/1.5 var(--body);color:var(--ink2)}
.tidea small{display:block;font:400 11.5px/1.45 var(--body);color:var(--ink2);opacity:.85}
.tidea svg{fill:none;stroke:currentColor;stroke-width:2}.tidea .on svg{fill:#C8102E;stroke:#C8102E}.tidea .b2:disabled{cursor:default;opacity:1}
.tdl{display:grid;gap:10px;justify-items:start}.tdl p{margin:0;font:400 13.5px/1.5 var(--body);color:var(--ink2)}
.hint{margin:0;padding:6px 2px;font:400 14px/1.5 var(--body);color:var(--ink2)}

/* ---------- tablet */
@media (max-width:1099px){
  .tg{grid-template-columns:1fr}
  .pv{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}
  .c5-card.wide{grid-template-columns:1fr}
}
/* ---------- telefono */
@media (max-width:760px){
  .c5{margin:0;border-radius:0;border:0;padding:8px;gap:8px}
  .c5-head{min-height:60px;gap:10px;padding:0 10px 0 12px}
  .c5-brand{font-size:21px;padding-right:10px}
  .c5-title span{display:none}.c5-title b{font-size:13px}
  .c5-count{display:none}
  .c5-intro{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .pv{grid-template-columns:1fr}
  .prail{position:static;max-height:none}
  .prail h1{font-size:24px}
  .pidx{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scroll-snap-type:x mandatory}
  .pidx li{flex:0 0 auto;scroll-snap-align:start}
  .pidx a{grid-template-columns:28px;min-height:44px;padding:4px}.pidx span{display:none}
  .tp{grid-template-columns:1fr;gap:8px;padding:12px;scroll-margin-top:72px}
  .tpn{display:flex;gap:6px;align-items:baseline;justify-items:start}.tpn b{font-size:24px}
  .c5-card,.c5-card.wide{grid-template-columns:1fr}
  .pmob{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;background:var(--ubc-ink);color:#FFFFFF;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.04em}
  .pmob .b1{background:#FFFFFF;color:var(--ubc-ink);box-shadow:0 2px 0 #8D8D8D}
  .tq{margin-left:0;flex-basis:100%}.tq input{width:100%}
  .ti .c5-card{grid-template-columns:110px minmax(0,1fr);gap:10px}.ti .c5-card b{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){.pbar i,.tgl i,.tgl i::after,.c5-card{transition:none}}
/* testata del sito e barra della console sopra lo strumento */
.has-chrome .c5-brand{display:none}

/* riservato alla redazione (si vede solo dopo essere entrati nel pannello) */
.solo-red{display:none!important}
/* croce dei tasti chiudi/togli: disegnata e sempre al centro del tasto */
.has-icx{display:inline-grid!important;place-items:center;line-height:0!important;text-indent:0}
.icx{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
/* ---------- il sentiero dei percorsi (sentiero.js): pietre, schede, mai sovrapposte né tagliate ---------- */
.sn{position:relative;overflow:hidden;border-radius:18px;background:#0B1520}
.sn svg{position:absolute;inset:0;display:block}
.sn-ms{position:static;text-decoration:none;color:inherit}
.sn-st{position:absolute;z-index:3;width:34px;height:34px;border-radius:50% 46% 52% 44%;background:#F2EEE6;border:3px solid #FF4D12;display:grid;place-items:center;font:600 12px/1 'IBM Plex Mono',monospace;color:#1E1E1E;box-shadow:0 0 0 5px rgba(255,77,18,.16),0 5px 12px rgba(0,0,0,.35)}
.sn-ms.fatto .sn-st{background:#FF4D12;color:#fff}
.sn-ms.dev .sn-st{border-color:#55BDC3;box-shadow:0 0 0 5px rgba(85,189,195,.16),0 5px 12px rgba(0,0,0,.35)}
.sn-cd{position:absolute;z-index:2;display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:center;padding:6px;border-radius:11px;background:rgba(250,248,244,.96);color:#1E1E1E;box-shadow:0 8px 22px rgba(0,0,0,.35);box-sizing:border-box}
.sn-cd img,.sn-ph{width:42px;height:42px;object-fit:cover;border-radius:7px;background:#ddd;display:block}
.sn-cd b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:800 12.5px/1.15 'Inter Tight',system-ui,sans-serif;letter-spacing:-.01em}
.sn-cd small{display:block;margin-top:2px;font:400 8.5px/1.3 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#6B6B66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.sn-ms:hover .sn-cd{box-shadow:0 0 0 2px #FF4D12,0 8px 22px rgba(0,0,0,.35)}
a.sn-ms.dev:hover .sn-cd{box-shadow:0 0 0 2px #55BDC3,0 8px 22px rgba(0,0,0,.35)}
.sn-c .sn-cd{grid-template-columns:1fr;padding:5px 8px}.sn-c .sn-cd b{font-size:11px}
.sn-c .sn-st{width:24px;height:24px;font-size:10px;border-width:2px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.sn-hero{margin:0 0 18px}
.tp.tp-dev{margin-left:clamp(18px,6vw,72px);background:#EEF7F8;box-shadow:0 0 0 1px #CDE8EA}
.tp.tp-dev .tpn b{color:#1C7E84}