:root{--ink:#203c35;--muted:#58685f;--line:#e0e6df;--paper:#f6f7f2;--green:#285d49;--lime:#dff381}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 'Segoe UI',sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #99b847;outline-offset:3px}
header{height:86px;display:flex;align-items:center;gap:27px;border-bottom:1px solid var(--line);padding:0 4.5%}
.brand{font-size:31px;font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:-2px}
.brand span{color:#9ebd44}
.brand-note{color:var(--muted);font-size:16px}
.status{margin-left:auto;background:#edf1e6;border-radius:30px;padding:9px 14px;font-size:15px;color:#637c47}
main{max-width:1510px;margin:auto;padding:44px 4.5% 55px}
.intro{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:35px}
.eyebrow{font-size:14px;letter-spacing:2px;font-weight:800;color:#7a8d76;margin-bottom:15px}
h1{font-size:48px;letter-spacing:-2px;line-height:1.12;margin:0 0 18px;font-weight:650}
h1 span{color:#8a9e86}
.intro p{line-height:1.8;color:var(--muted);margin:0}
.context{border:1px solid #d8dfce;border-radius:14px;padding:22px;display:flex;align-items:center;gap:15px;max-width:410px;background:#eff2e7}
.context-icon{font-size:18px;font-weight:800;background:#dfe8ce;padding:13px;border-radius:11px}
.context strong{font-size:18px}
.context p{font-size:15px;margin:5px 0}
.context small{font-size:14px;color:#86907b}
.steps{display:flex;align-items:center;gap:35px;padding:17px 0 22px;border-bottom:1px solid var(--line);font-size:15px;color:#9ca49d}
.steps b{color:var(--ink);font-weight:650}
.steps .done{color:#78915e}
.steps small{margin-left:auto;font-size:14px}
.workspace{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding-top:28px}
h2{font-size:18px;font-weight:700;margin:0 0 14px}
aside h2:not(:first-child){margin-top:27px}
h2 span{float:right;font-size:14px;color:#9ca998;font-weight:400}
#presets{display:grid;gap:7px}
.preset{text-align:left;border:1px solid var(--line);border-radius:9px;padding:12px 13px;color:var(--ink);background:transparent}
.preset.active{background:#e8efdc;border-color:#afc18b}
.preset small{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.hint{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 12px}
.dimension{display:flex;align-items:center;gap:6px;padding:8px 0}
.dimension strong{font-size:15px;flex:1;font-weight:600}
.dimension button{border:1px solid var(--line);background:#fff;border-radius:5px;color:#607568;font-size:14px;padding:5px}
.dimension button:hover{background:var(--lime)}
.checks{display:grid;gap:10px}
.checks label{display:flex;align-items:center;gap:9px;font-size:16px}
.checks input{accent-color:var(--green);width:15px;height:15px;margin:0}
.canvas{background:white;border:1px solid var(--line);border-radius:15px;padding:26px;box-shadow:0 7px 20px #30453504;min-width:0}
.canvas-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.canvas-head .eyebrow{margin-bottom:7px;font-size:13px}
#report-name{border:0;color:var(--ink);font-size:21px;font-weight:650;width:100%;max-width:560px;background:transparent;min-width:0}
.canvas-head>div{flex:1;min-width:0}
.text-button{border:0;background:transparent;color:var(--muted);font-size:15px}
.layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0 29px}
.zone{border:1px dashed #cad7c3;background:#f7f9f3;padding:15px;border-radius:9px;min-height:99px}
.zone label{font-size:13px;font-weight:800;color:#829071;letter-spacing:1px;display:block;margin-bottom:12px}
.zone label span{float:right;font-size:13px;letter-spacing:0;font-weight:500;color:#939c90}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #d9e2ce;border-radius:6px;padding:7px 9px;margin:0 5px 5px 0;font-size:15px}
.chip button{border:0;background:transparent;padding:0;color:#8a9980;font-size:16px}
.chip button:hover{color:#203c35}
.zone .empty{color:#9da597;font-size:15px}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.preview-head h2{margin:0}
.demo-badge{font-size:14px;color:#687b57;background:#f1f5e9;padding:5px 9px;border-radius:20px}
.period{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:15px}
.period label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:5px}
.period input,.period select{font-size:14px;border:1px solid var(--line);padding:7px;border-radius:6px;background:white;color:#536358}
#preview-filters{display:flex;flex-wrap:wrap;gap:6px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px;max-height:440px;min-height:160px}
table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap}
th,td{padding:13px 12px;border-bottom:1px solid #e9ede5;text-align:right}
th{background:#f3f6ee;color:#627556;font-size:13px;font-weight:700}
th:first-child,td:first-child{text-align:left}
tbody tr:nth-child(even){background:#fcfdf9}
tbody tr:hover{background:#f2f6e9}
tfoot td{background:#eaf0df;font-weight:800;border-bottom:0}
.positive{color:#408060}
.preview-foot{display:flex;justify-content:space-between;font-size:13px;color:#798872;margin:11px 0 22px;gap:12px}
.insight{display:flex;gap:15px;background:#f7f8f1;border-radius:8px;padding:15px}
.insight>span{font-size:25px;color:#8caa50}
.insight strong{font-size:15px}
.insight p{font-size:14px;color:#708063;line-height:1.7;margin:5px 0 0}
.actions{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);margin-top:22px;padding-top:22px}
.actions strong{font-size:16px}
.actions p{font-size:14px;color:var(--muted);margin:5px 0}
.actions>div:last-child{display:flex;gap:8px}
.primary,.secondary{border-radius:8px;font-size:15px;padding:12px 16px;font-weight:700}
.primary{background:var(--green);color:white;border:1px solid var(--green)}
.secondary{background:white;border:1px solid var(--line);color:var(--ink)}
button:disabled{opacity:.45;cursor:wait}
.technical-note{font-size:14px;line-height:1.8;color:#75836e;margin-top:16px}
details{margin-top:16px;font-size:15px;line-height:1.8}
summary{cursor:pointer;color:#5f7758}
#message{font-size:16px;line-height:1.8;margin-top:12px;color:var(--green)}
#message.error{color:#a4503a}
#message a{color:var(--green);font-weight:800}
footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:24px 4.5%;color:#899581;font-size:15px}
footer .brand{font-size:24px}
.no-data{padding:45px;text-align:center;color:#819173}
.drag-over{background:#e2eccd}
@media(max-width:1000px){.intro{align-items:flex-start}
.context{max-width:300px;padding:15px}
.context-icon{display:none}
.workspace{grid-template-columns:220px minmax(0,1fr);gap:18px}
.canvas{padding:18px}
.actions{align-items:flex-start;flex-direction:column}
.steps small{display:none}
}
@media(max-width:700px){header{height:65px;padding:0 20px}
.brand-note{display:none}
main{padding:25px 16px}
.intro{display:block}
h1{font-size:37px}
.context{margin-top:20px;max-width:none}
.workspace{display:flex;flex-direction:column}
.checks{grid-template-columns:1fr 1fr}
.steps{gap:12px;font-size:13px}
.layout{grid-template-columns:1fr}
.canvas{padding:15px}
#report-name{font-size:17px}
.preview-foot{flex-direction:column;gap:5px}
.actions>div:last-child{width:100%;flex-wrap:wrap}
.actions button{flex:1}
footer>span:nth-child(2){display:none}
}


/* Readable type and comfortable controls at normal browser zoom. */
main{max-width:1720px;padding-left:3%;padding-right:3%}
.workspace{grid-template-columns:290px minmax(0,1fr);gap:24px}
.preset{font-size:16px;padding:15px 16px}
.preset small,.hint,.technical-note,.context small{color:#58685f}
.dimension{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0}
.dimension strong{grid-column:1/-1;font-size:16px}
.dimension button{font-size:14px;min-height:38px;padding:7px 10px}
.checks{gap:14px}.checks label{font-size:16px;line-height:1.5}
.checks input{width:19px;height:19px;flex-shrink:0}
.zone{min-height:118px}.zone label{color:#52664d;line-height:1.6}
.zone label span{float:none;display:block;color:#58685f}
.chip{font-size:16px;min-height:42px;padding:8px 10px;gap:10px}
.chip button{font-size:18px;min-width:24px;min-height:26px;color:#536849}
.zone .empty{font-size:15px;color:#58685f}
.period{gap:12px}.period label{font-size:15px}
.period input,.period select{font-size:16px;min-height:44px;padding:9px 10px;color:#203c35;max-width:100%}
#preview-filters{gap:10px;max-width:100%}
.table-wrap{max-height:560px;position:relative}
table{font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
th,td{padding:16px 18px}
th{font-size:15px;color:#344f3c;white-space:normal;min-width:150px;max-width:200px;vertical-align:bottom;position:sticky;top:0;z-index:2}
th:first-child,td:first-child{min-width:240px;max-width:320px;white-space:normal;position:sticky;left:0}
th:first-child{z-index:3}tbody td:first-child{background:#fff}tbody tr:nth-child(even) td:first-child{background:#fcfdf9}tbody tr:hover td:first-child{background:#f2f6e9}
tbody td:first-child{z-index:1}tfoot td{position:sticky;bottom:0;z-index:2}tfoot td:first-child{z-index:3}
.preview-foot{font-size:14px;color:#58685f;flex-wrap:wrap}
.insight strong,.actions strong{font-size:16px}.insight p,.actions p{font-size:15px;color:#58685f}
.primary,.secondary{font-size:16px;min-height:48px;padding:12px 18px}
.text-button{font-size:15px;min-height:44px}.actions{flex-wrap:wrap}
.steps{flex-wrap:wrap;gap:16px 28px;color:#58685f}.steps small{font-size:14px}
.canvas-head .eyebrow{font-size:13px}.context{max-width:440px}.context p{font-size:14px}
h2 span,.eyebrow{color:#52664d}.technical-note{font-size:14px}.demo-badge{font-size:14px}
@media(max-width:1150px){.workspace{grid-template-columns:260px minmax(0,1fr);gap:18px}.intro{flex-wrap:wrap}.context{max-width:none}.preview-head{gap:12px;flex-wrap:wrap}}
@media(max-width:900px){.workspace{display:flex;flex-direction:column}#presets{grid-template-columns:repeat(3,minmax(0,1fr))}.checks{grid-template-columns:1fr 1fr}.dimension{grid-template-columns:minmax(140px,1fr) auto auto}.dimension strong{grid-column:auto}.steps small{display:none}}
@media(max-width:700px){main{padding:25px 16px}.status{font-size:13px;padding:7px 10px}header{gap:12px}#presets{grid-template-columns:1fr}.dimension{grid-template-columns:1fr 1fr}.dimension strong{grid-column:1/-1}.checks{grid-template-columns:1fr}.steps{font-size:14px;gap:12px}.canvas{padding:16px}#report-name{font-size:21px}.period label{flex-wrap:wrap}.period input,.period select{font-size:16px}.actions>div:last-child{flex-direction:column}.actions button{width:100%}.layout{grid-template-columns:1fr}footer{font-size:14px;gap:16px;flex-wrap:wrap}}
@media(max-width:700px){th:first-child,td:first-child{min-width:160px;max-width:180px}th{min-width:140px}}

/* Row order is a hierarchy: each next dimension is inside the previous one. */
:is(#rows,#columns){display:flex;flex-direction:column;align-items:flex-start;gap:8px}
:is(#rows,#columns) .chip{position:relative;margin:0 0 0 calc(var(--depth)*22px);max-width:calc(100% - var(--depth)*22px);flex-wrap:wrap}
:is(#rows,#columns) .chip:not(:first-child)::before{content:"";position:absolute;left:-14px;top:-10px;width:10px;height:31px;border-left:1px solid #aabc9d;border-bottom:1px solid #aabc9d}
.level-label{font-size:13px;color:#58685f;flex-basis:100%}
.group-heading{display:block}.group-heading:not(:first-child){padding-left:18px;font-weight:500}
.tree-label{display:flex;align-items:flex-start;gap:8px;padding-left:calc(var(--depth)*22px)}
.tree-label>span:last-child{overflow-wrap:anywhere}
.group-toggle{flex:0 0 24px;width:24px;height:24px;line-height:20px;padding:0;border:1px solid #9ab08d;border-radius:4px;background:#fff;color:#285d49;font-size:18px}
.tree-leaf{flex:0 0 24px;width:24px;height:14px;border-left:1px solid #c2cdbb;border-bottom:1px solid #c2cdbb}
tbody tr.group-row td,tbody tr.group-row td:first-child{background:#edf3e4;font-weight:700}
tbody tr.group-row:hover td{background:#e3ecd7}
@media(max-width:700px){.tree-label{gap:5px;padding-left:calc(var(--depth)*14px)}.tree-leaf{flex-basis:12px;width:12px}}

/* Keep all column header levels together when the report scrolls. */
thead{position:sticky;top:0;z-index:4}
thead th{position:static}
thead th:first-child{position:static;min-width:150px;max-width:200px;text-align:right}
thead th.row-heading{position:sticky;left:0;min-width:240px;max-width:320px;text-align:left;z-index:5}
thead th.column-group{text-align:left;border-left:1px solid #d4decc;border-bottom:1px solid #d4decc;background:#eaf0e1;padding:10px 18px}
@media(max-width:700px){thead th.row-heading{min-width:160px;max-width:180px}thead th:first-child{min-width:140px}}