/* Layout: una colonna di lettura. Chakra: quadrante percentuale con zone ipo / equilibrio / iper. Energia e stress: le tre tavole del pendolo rese come scale a gradini. */
:root{
  --bg:#F8F2DC; --surface:#FFFFFF; --fg:#1F1B2D; --muted:#6A657C; --line:#DDDAE6;
  --band:#E4EFEA; --band-edge:#9CC4B4; --accent:#2A6F6B; --ok:#2E7D5B; --warn:#B4571B; --warn-bg:#FBEBDD; --ok-bg:#E1F1E9;
  --hist:#E2E8F1; --hist-edge:#C9D3E2; --ipo:#2F6FB5; --ipo-bg:#E3EDF8; --iper:#C23B32; --iper-bg:#FAE5E2;
  --c1:#CF4439; --c2:#DD7426; --c3:#BF960F; --c4:#3C9A5E; --c5:#3783C4; --c6:#5356B6; --c7:#9155C0;
  --zr:#D5483E; --zo:#E58A2E; --zy:#DDBB2A; --zg:#44A862; --zb:#3F7FD1; --zv:#8C5CC9; --zd:#9B2A24; --zn:#8E8A9C;
  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#38311A; --surface:#1F1D24; --fg:#ECE9F5; --muted:#A49FB8; --line:#383349;
  --band:#22332F; --band-edge:#4E8577; --accent:#6FC2BB; --ok:#6CC79B; --warn:#F0A064; --warn-bg:#3A2A1E; --ok-bg:#1F332A;
  --hist:#15203A; --hist-edge:#33476E; --ipo:#7DB4EC; --ipo-bg:#1D2B3D; --iper:#F0847A; --iper-bg:#3B2222;
  --c1:#EC6A5F; --c2:#F0954F; --c3:#E0BC3F; --c4:#62C084; --c5:#63A8E4; --c6:#8689E6; --c7:#B585E0;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#38311A; --surface:#1F1D24; --fg:#ECE9F5; --muted:#A49FB8; --line:#383349;
  --band:#22332F; --band-edge:#4E8577; --accent:#6FC2BB; --ok:#6CC79B; --warn:#F0A064; --warn-bg:#3A2A1E; --ok-bg:#1F332A;
  --hist:#15203A; --hist-edge:#33476E; --ipo:#7DB4EC; --ipo-bg:#1D2B3D; --iper:#F0847A; --iper-bg:#3B2222;
  --c1:#EC6A5F; --c2:#F0954F; --c3:#E0BC3F; --c4:#62C084; --c5:#63A8E4; --c6:#8689E6; --c7:#B585E0;
  color-scheme:dark }

body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55}
.wrap{max-width:900px;margin:0 auto;padding-inline:20px;padding-block:20px 56px;display:flex;flex-direction:column;gap:36px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15}
h2{font-size:24px}
h3{font-size:19px}
p{margin:0}
.muted{color:var(--muted)}
.label{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.small{font-size:13.5px;color:var(--muted)}

.demo{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:10px 14px;font-size:14.5px;font-weight:500}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.brand{font-family:var(--display);font-size:22px;letter-spacing:.04em}
.intro{display:flex;flex-direction:column;gap:14px}
.lead{font-size:18px;max-width:62ch}

.dates{display:flex;flex-wrap:wrap;gap:8px}
.dates button{font:inherit;font-size:15px;font-weight:500;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer}
.dates button:hover{border-color:var(--accent)}
.dates button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

section{display:flex;flex-direction:column;gap:16px}
.sechead{display:flex;flex-direction:column;gap:4px}
.sechead p{max-width:75ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}

/* Quadrante chakra */
.quad{display:flex;flex-direction:column;gap:2px}
.row{display:grid;grid-template-columns:150px minmax(0,1fr) 176px;align-items:center;gap:14px;padding:9px 0}
.row .name{display:flex;flex-direction:column;line-height:1.25}
.row .name b{font-weight:600}
.row .name span{font-size:13px;color:var(--muted)}
.track{position:relative;height:26px}
.track .z{position:absolute;top:0;bottom:0}
.track .z.ipo{left:0;width:40%;background:var(--ipo-bg)}
.track .z.iper{left:60%;width:40%;background:var(--iper-bg)}
.track .band{position:absolute;left:40%;width:20%;top:0;bottom:0;background:var(--band);border-inline:1px solid var(--band-edge)}
.track .link{position:absolute;top:11px;height:4px;opacity:.5}
.track .dot,.track .prev{position:absolute;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.track .prev{width:12px;height:12px;border:2.5px solid var(--fg);background:var(--surface);box-sizing:border-box}
.track .dot{width:18px;height:18px;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.row .val{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;font-variant-numeric:tabular-nums;gap:2px}
.row .val b{font-size:17px;font-weight:700}
.pill{font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.ipo{background:var(--ipo-bg);color:var(--ipo)}
.pill.iper{background:var(--iper-bg);color:var(--iper)}
.scale{display:grid;grid-template-columns:150px minmax(0,1fr) 176px;gap:14px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.scale .ticks{position:relative;height:18px}
.scale .ticks span{position:absolute;transform:translateX(-50%)}
.scale .ticks span:first-child{transform:none}
.scale .ticks span:last-child{transform:translateX(-100%)}
.zl{display:flex;font-size:12.5px;font-weight:600;text-align:center;white-space:nowrap;padding-bottom:4px}
.zl .ipo{width:40%;color:var(--ipo)}
.zl .eq{width:20%;color:var(--ok)}
.zl .iper{width:40%;color:var(--iper)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.legend .lb{width:18px;height:12px;background:var(--band);border-inline:1px solid var(--band-edge)}
.legend .ld{width:12px;height:12px;border-radius:50%;background:var(--fg)}
.legend .lp{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--fg);box-sizing:border-box}

/* Tavole: energia e stress */
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.board{display:flex;flex-direction:column;gap:6px;min-width:0}
.board .num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.strip{position:relative;display:flex;height:16px;margin-top:10px}
.strip span{box-shadow:inset -1px 0 0 var(--surface)}
.strip i{position:absolute;top:50%;border-radius:50%;transform:translate(-50%,-50%);box-sizing:border-box}
.strip .mp{width:13px;height:13px;background:var(--surface);border:2.5px solid var(--fg)}
.strip .md{width:20px;height:20px;background:var(--fg);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--fg)}
.mscale{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ladder{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.ladder li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;border:1.5px solid transparent}
.ladder li.now{border-color:var(--fg);background:var(--bg)}
.ladder .sq{width:12px;height:12px;border-radius:3px;flex:none}
.ladder .zn{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.ladder .zn b{font-weight:500;font-size:14.5px}
.ladder li.now .zn b{font-weight:700}
.tags{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.tag{font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag.pre{border:1.5px solid var(--muted);color:var(--muted)}
.tag.post{background:var(--fg);color:var(--bg);border:1.5px solid var(--fg)}
.crystal{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.crystal .cn{font-family:var(--display);font-size:26px}

/* Percorso */
.tip-pc{display:none;margin:0;font-size:14px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
@media (max-width:760px){.tip-pc{display:block}}
.btitle{display:block;text-align:center;font-size:17px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.qsub{text-align:center;color:var(--muted);font-size:14.5px;margin-top:4px}
#qdate{margin-bottom:4px}
.qsub[hidden]{display:none}
.bsub{display:block;text-align:center;margin-bottom:6px}
.hint{display:inline-block;margin:10px 0 14px;font-size:15.5px;font-weight:600;color:var(--accent);background:var(--bg);border:1.5px solid var(--accent);border-radius:10px;padding:8px 14px;max-width:100%}
.tblwrap{overflow-x:auto}
.ov{border-collapse:separate;border-spacing:3px;width:auto;font-variant-numeric:tabular-nums;font-size:14.5px}
.ov th{font-weight:600;text-align:left;white-space:nowrap;font-size:13.5px;color:var(--muted);padding:4px 2px}
.ov thead th{text-align:center;padding:4px 6px}
.ov thead th.cur{color:var(--bg);background:var(--fg);border-radius:999px}
.ov td{text-align:center;padding:8px 12px;border-radius:6px;white-space:nowrap;min-width:92px}
.ov td .a{opacity:.75}
.ov td.ok{background:var(--ok-bg);color:var(--ok)}
.ov td.ipo{background:var(--ipo-bg);color:var(--ipo)}
.ov td.iper{background:var(--iper-bg);color:var(--iper)}
.ov td.nb{background:var(--bg);color:var(--fg);border-left:5px solid var(--line)}
.ov td.cur{box-shadow:inset 0 0 0 2px currentColor}
.ov tr.gap td{height:6px;padding:0}
.ov button{font:inherit;font-size:14.5px;font-weight:600;color:var(--fg);background:none;border:1px solid var(--line);padding:5px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
.ov button:hover{border-color:var(--accent)}
.ov tr.on button{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--body);font-size:12.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart text.v{fill:var(--fg);font-weight:700;font-size:14px}
.chart text.zt{fill:var(--fg);font-weight:500}
.chart text.ipo{fill:var(--ipo);font-weight:600}
.chart text.eq{fill:var(--ok);font-weight:600}
.chart text.iper{fill:var(--iper);font-weight:600}

.demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.dates select{font:inherit;font-size:15px;font-weight:500;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px;max-width:100%}
.dates button:disabled{opacity:.4;cursor:default}
.dates .small{align-self:center}
.ov tbody th{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:6px 0 6px -4px rgba(0,0,0,.25)}
@media (max-width:640px){
  .ov{font-size:13px;border-spacing:2px}
  .ov button{font-size:12.5px;padding:4px 8px}
  .ov td{padding:6px 5px}
  .ov th{padding:3px 1px}
}
.ten{display:flex;align-items:flex-end;gap:4px;height:150px;margin-top:14px}
.tc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.tc .tv{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.tc .tb{width:100%;max-width:38px;background:var(--muted);border-radius:4px 4px 0 0;opacity:.5}
.tc.cur .tb{background:var(--fg);opacity:1}
.tc .tl{font-size:12px;color:var(--muted);white-space:nowrap;height:16px}
.tc.cur .tl{color:var(--fg);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px}
.stats div{display:flex;flex-direction:column;gap:2px;min-width:0}
.stats b{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}

.gauge{display:block;width:100%;max-width:340px;height:auto;margin:10px auto 0}
.gauge .gl{font-family:var(--body);font-size:12px;fill:var(--muted)}
.glegend{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.glegend i{display:inline-block;vertical-align:middle;margin-right:6px;width:18px;height:0;border-top:3px solid var(--fg)}
.glegend .gp{border-top:3px dashed var(--muted)}

@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hist{background:var(--hist);border-block:1px solid var(--hist-edge);margin-inline:-20px;padding:32px 20px 36px}
@media (min-width:940px){.hist{border:1px solid var(--hist-edge);border-radius:18px}}
.hist .ov tbody th{background:var(--surface)}

.next{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;border-left:5px solid var(--accent)}
.next .nd{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.next.hot{border:2px solid var(--accent);border-left-width:6px}
.next{align-items:flex-start}
.pref{display:flex;flex-direction:column;gap:8px;flex:1 1 320px;min-width:0}
.pref .dates button{font-size:14px;padding:6px 13px}
.pref .alt{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer}
.pref .alt input{width:18px;height:18px;accent-color:var(--accent)}
.pref .small{font-style:italic}
.next .hl{font-weight:700;font-size:17px;color:var(--accent)}
.next .nd b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2}
.book{display:inline-block;font-weight:600;color:var(--surface);background:var(--accent);padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap}
.book:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.alert{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:var(--surface);border:2px solid var(--accent);border-radius:14px;padding:16px 20px}
.alert p{flex:1;min-width:220px;font-size:16.5px}
.alert b{font-weight:700}

/* Scompensi */
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 20px}
summary{cursor:pointer;padding:16px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;list-style:none}
summary::-webkit-details-marker{display:none}
summary h3{flex:1;min-width:160px}
summary::after{content:"Apri ▾";flex:none;font-size:14px;font-weight:600;color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:5px 13px;line-height:1.2;white-space:nowrap}
details[open] summary::after{content:"Chiudi ▴"}
summary:hover::after{background:var(--accent);color:var(--surface)}
.evald{border-left:5px solid var(--accent)}
.evald summary::after{content:"Leggi la valutazione ▾";background:var(--accent);color:var(--surface)}
.evald[open] summary::after{content:"Chiudi ▴";background:transparent;color:var(--accent)}
@media (max-width:640px){.evald summary::after{content:"Leggi tutto ▾"}}
.sw{width:10px;height:10px;border-radius:50%;flex:none}
.ctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 28px;padding:16px 0 20px;border-top:1px solid var(--line)}
.ctx div{display:flex;flex-direction:column;gap:3px;min-width:0}
.apri{font:inherit;font-size:13px;font-weight:600;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:999px;padding:4px 12px;cursor:pointer;margin-top:4px;white-space:nowrap}
.apri:hover,.row.open .apri{background:var(--accent);color:var(--surface)}
.apri:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rowx{background:var(--bg);border-radius:10px;padding:4px 16px;margin:2px 0 10px;border-left:4px solid var(--accent)}
.rowx .ctx{border-top:0;padding:12px 0 14px}
.rowx[hidden]{display:none}
.more{color:var(--accent);font-weight:600;text-underline-offset:3px;align-self:flex-start}

/* Valutazione */
.sumtxt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.sumtxt h3{flex:none;font-size:22px}
.evald .eval{border-top:1px solid var(--line);padding:18px 0 22px}
.eval .part{display:flex;flex-direction:column;gap:4px}
.eval .passo{background:var(--bg);border-left:4px solid var(--accent);border-radius:8px;padding:12px 16px}
.eval{display:flex;flex-direction:column;gap:14px;max-width:66ch}
.eval p{font-size:17px}
.sign{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px;gap:2px}
.sign b{font-family:var(--display);font-weight:400;font-size:19px}
.note{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;max-width:75ch}

@media (max-width:640px){
  .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 0;border-top:1px solid var(--line)}
  .row:first-child{border-top:0}
  .row .track{grid-row:3}
  .row .val{flex-direction:row;align-items:center;gap:4px 8px;flex-wrap:wrap}
  .scale{grid-template-columns:minmax(0,1fr)}
  .scale>span{display:none}
  .panel{padding:16px}
}

.evald[hidden],.next[hidden],.crystal[hidden]{display:none!important}