/* DOSINT — grafici Home + rifiniture grafiche. Caricato dopo black.css; togli il <link> per tornare indietro. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");
:root{--hz-sans:"Geist","Inter Tight",ui-sans-serif,system-ui,sans-serif;--hz-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
body{font-family:var(--hz-sans)}
.pg h1,.dh h2,.hero h1,.sec .h2{font-family:var(--hz-sans);letter-spacing:-.035em}
.sc b,.fq,.ft,.kd,.cons-out,.cons-in input,.auto input,.hz-tip,.hz-don text,.hz-grid text{font-family:var(--hz-mono);font-variant-numeric:tabular-nums}
/* layout */
.hz{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}.hz-w2{grid-column:span 2}.hz3{margin:0 0 16px}
.hz-c{position:relative;min-width:0}.hz-c .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.hz-c .ch h2{font-size:14px;margin:0}
.hz-b{position:relative}
@media(max-width:900px){.hz,.hz3{grid-template-columns:1fr}.hz-w2{grid-column:auto}}
.hz-seg{display:flex;gap:2px;padding:2px;border:1px solid var(--chipb);border-radius:99px}.hz-seg button{font:inherit;font-size:11.5px;padding:3px 10px;border:0;border-radius:99px;background:none;color:var(--mut);cursor:pointer}
.hz-seg button.on{background:var(--ink);color:var(--bg)}
/* area chart */
.hz-area{width:100%;height:190px;display:block;color:var(--ink);overflow:visible}
.hz-grid line{stroke:var(--line);stroke-dasharray:2 4}.hz-grid text{fill:var(--mut);font-size:10px}
.hz-line{stroke-dasharray:1;stroke-dashoffset:1;animation:hzd 1.1s .1s cubic-bezier(.2,.75,.2,1) forwards}.hz-fill{opacity:0;animation:hzf .8s .5s forwards}
@keyframes hzd{to{stroke-dashoffset:0}}@keyframes hzf{to{opacity:1}}
.hz-cur{stroke:var(--mut);stroke-dasharray:3 3;opacity:0}.hz-dot{fill:var(--bg);stroke:var(--ink);stroke-width:2;opacity:0}.hz-area.hv .hz-cur,.hz-area.hv .hz-dot{opacity:1}
.hz-tip{position:fixed;z-index:120;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:10px;padding:7px 11px;font-size:12px;line-height:1.35;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}.hz-tip span{display:block;opacity:.65;font-size:11px}
/* heatmap */
.hz-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px}.hz-heat i,.hz-leg i{aspect-ratio:1;border-radius:3px;min-width:7px;background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
.hz-heat i.x{visibility:hidden}[data-l="1"]{background:color-mix(in srgb,var(--ink) 24%,var(--bg))!important}[data-l="2"]{background:color-mix(in srgb,var(--ink) 46%,var(--bg))!important}[data-l="3"]{background:color-mix(in srgb,var(--ink) 70%,var(--bg))!important}[data-l="4"]{background:var(--ink)!important}
.hz-heat i:hover{outline:1px solid var(--ink)}.hz-leg{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:10px;font-size:10.5px;color:var(--mut)}.hz-leg i{width:11px;aspect-ratio:1;flex:none}
/* donut */
.hz-don{display:flex;align-items:center;gap:16px}.hz-don svg{width:118px;flex:none;transform:rotate(0)}.hz-don text{fill:var(--ink);font-size:7px;font-weight:600}
.hz-don ul{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;gap:6px;font-size:12.5px}.hz-don li{display:flex;align-items:center;gap:8px}.hz-don li i{width:9px;height:9px;border-radius:3px;flex:none}.hz-don li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hz-don li b{color:var(--mut);font-weight:500}
/* bars */
.hz-bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;align-items:end;height:130px}.hz-bars>div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px}
.hz-bars i{width:100%;height:var(--h);background:var(--ink);border-radius:3px 3px 0 0;opacity:.82;transform-origin:bottom;animation:hzb .7s cubic-bezier(.2,.75,.2,1) backwards}.hz-bars>div:hover i{opacity:1}
.hz-bars span{font-size:10px;color:var(--mut);height:12px;white-space:nowrap}.hz-bars.n7{gap:8px}
@keyframes hzb{from{transform:scaleY(0)}}
/* empty states */
.hz-e{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0;color:var(--mut);font-size:13px;text-align:center}.hz-e svg{width:96px;height:auto;opacity:.7}.hz-e p{margin:0}
/* sparkline nelle schede */
.sc{position:relative}.hz-sp{margin-left:auto;align-self:center;color:var(--mut);flex:none}.hz-sp polyline{stroke-dasharray:1;stroke-dashoffset:1;animation:hzd 1s .2s forwards}
/* bordo luminoso all'hover */
@property --hza{syntax:"<angle>";inherits:false;initial-value:0deg}
.tile2::before,.sc::before,.hz-c::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
 background:conic-gradient(from var(--hza),transparent 72%,rgba(255,255,255,.75) 88%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hzr 3.2s linear infinite paused}
[data-theme="light"] .tile2::before,[data-theme="light"] .sc::before,[data-theme="light"] .hz-c::before{background:conic-gradient(from var(--hza),transparent 72%,rgba(0,0,0,.6) 88%,transparent)}
.tile2:hover::before,.sc:hover::before,.hz-c:hover::before{opacity:1;animation-play-state:running}@keyframes hzr{to{--hza:360deg}}
/* console: barra di avanzamento + ingresso righe */
.cons{position:relative;overflow:hidden}.cons:has(.ps.busy)::after{content:"";position:absolute;left:0;top:0;height:2px;width:40%;background:linear-gradient(90deg,transparent,var(--ink),transparent);animation:hzp 1.1s ease-in-out infinite}
@keyframes hzp{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.cons-out>*{animation:hzl .28s ease-out backwards}@keyframes hzl{from{opacity:0;transform:translateY(3px)}}
/* skeleton per liste vuote in caricamento */
.feed:empty::before{content:"";display:block;height:44px;border-radius:10px;background:linear-gradient(90deg,var(--hov),var(--sel),var(--hov));background-size:200% 100%;animation:hzs 1.3s linear infinite}@keyframes hzs{to{background-position:-200% 0}}
/* transizione tra viste */
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
/* mobile */
@media(max-width:700px){.hz-don{flex-direction:column;align-items:flex-start}.hz-bars{height:110px}.tile2,.sc{min-height:56px}.hz-seg button{padding:6px 10px}}
@media(prefers-reduced-motion:reduce){.hz-line,.hz-fill,.hz-bars i,.hz-sp polyline,.cons-out>*{animation:none!important;stroke-dashoffset:0;opacity:1}.hz-fill{opacity:1}.tile2::before,.sc::before,.hz-c::before{animation:none}}
@media print{.top,.side,.lnav,#hz-top,#hz-bot,.cons-chips{display:none!important}body,html{background:#fff!important;color:#000!important}.card{box-shadow:none!important;background:#fff!important;border:1px solid #ccc!important;break-inside:avoid}}
/* Sample output (landing): testo sempre leggibile, neutro, e riquadro mai vuoto */
.term pre{color:var(--c-fg,var(--ink))!important;min-height:240px;opacity:1}
.term pre:empty::before{content:"…";color:var(--mut)}
.hero .term{isolation:isolate;contain:paint}