/* graphic mode: no sidebar/header, one panel at a fixed design size, scaled to the frame by demo.js */
html.g,html.g body{overflow:hidden;background:var(--bg)}
html.g:not(.g6) .side,html.g:not(.g6) .top{display:none}
html.g .app{width:var(--gw);height:var(--gh)}
html.g:not(.g6) .app{grid-template-columns:1fr;grid-template-rows:1fr}
html.g:not(.g6) main{grid-column:1;grid-row:1}
html.g .view{transition:none}

/* each panel is laid out at about its shown size and only ever scaled UP (crisp), FinalFinal "My Library" style:
   one card, a few items, larger type */
html.g:not(.g6) main,html.g:not(.g6) .view,html.g .split,html.g .split3,html.g .grid,html.g .pmain,html.g .smain,html.g .cform,html.g .clist{background:#fff}
html.g body{font-size:13px}

/* 6 · the whole app, small (sidebar + dashboard) */
html.g6{--gw:1440px;--gh:900px}

/* 1 · Latest Sales */
html.g1{--gw:760px;--gh:340px}
html.g1 .dash{display:block;padding:0}
html.g1 .dash>.card:not(.latest){display:none}
html.g1 .latest{height:340px;box-shadow:none;padding:28px 28px}
html.g1 .lc{top:112px;bottom:22px}

/* 2 · New Releases */
html.g2{--gw:800px;--gh:520px}
html.g2 .split{display:block}
html.g2 .filters{background:#fff;padding:26px 30px 0}
html.g2 .filters>:not(.chips){display:none}
html.g2 .chips{display:flex;gap:8px;margin:0}
html.g2 .chips button{padding:0 16px;height:30px}
html.g2 .grid{grid-template-columns:repeat(4,1fr);padding:22px 30px;gap:20px 22px;min-height:0}
html.g2 .rc:nth-child(n+9){display:none}
html.g2 .rc .art{aspect-ratio:1.25}
html.g2 .rc .meta{padding:10px 4px 6px}

/* 3 · Promotions */
html.g3{--gw:800px;--gh:500px}
html.g3 .split{display:block}
html.g3 .filters{display:none}
html.g3 .voted{padding:28px 56px 22px 34px}
html.g3 .votes li{margin-bottom:11px}
html.g3 .votes li:nth-child(n+5){display:none}
html.g3 .fr{grid-template-columns:46px 170px 1fr 250px;padding:18px 30px 18px 34px}
html.g3 .fr>p:nth-of-type(2){display:none}
html.g3 .fr:nth-child(n+3){display:none}
html.g3 .st{gap:16px}

/* 4 · Daily Sales Reports */
html.g4{--gw:820px;--gh:420px}
html.g4 .split{display:block}
html.g4 .filters,html.g4 .snote,html.g4 .table{display:none}
html.g4 .smain{padding:26px 0 0}
html.g4 .tabs{padding:0 30px}
html.g4 .kpis{padding:24px 34px 0 32px}
html.g4 .kpi:nth-child(n+6){display:none}
html.g4 .sc{height:210px;margin:20px 30px 0 26px}

/* 5 · Promo Contacts */
html.g5{--gw:820px;--gh:520px}
html.g5 .split3{grid-template-columns:300px 1fr}
html.g5 .ctabs{display:none}
html.g5 .clist{box-shadow:1px 0 0 var(--line);padding-top:16px}
html.g5 .clist .back{display:none}
html.g5 #clist li{padding:16px 22px}
html.g5 #clist li:nth-child(n+6){display:none}
html.g5 .cform>:nth-child(n+9):nth-child(-n+20),html.g5 .cform>:nth-child(23),html.g5 .cform>:nth-child(24){display:none}
html.g5 .cform{grid-template-columns:96px 1fr;padding:30px 34px;gap:10px 0}
html.g5 .acts{margin-top:14px}
html.g5 .toast{right:24px;bottom:22px}

/* hover states the demo cursor can switch on (real :hover can't be faked) */
.rc.hov{z-index:2}.rc.hov .menu{opacity:1}.rc.hov .menu a{opacity:1;transform:none}
.rc.hov .meta{box-shadow:0 14px 26px rgba(30,40,90,.09)}
.fr.hov{box-shadow:0 10px 30px rgba(30,40,90,.08);z-index:1}.fr.hov::before{transform:none}
#rows .tr.hov{color:var(--blue);box-shadow:0 8px 24px rgba(30,40,90,.07);z-index:1}#rows .tr.hov::before{transform:none}
.obtn.hov{background:#F1F8FE}.sel li.hov,.sel2 li.hov{background:#F1F8FE;color:var(--blue)}
.chips button.press,.save.press,.obtn.press{transform:scale(.96)}

/* the demo cursor */
.dcur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:99;pointer-events:none;transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .3s;will-change:transform}
.dcur svg{width:22px;height:22px;display:block;transition:scale .15s}
.dcur.down svg{scale:.82}
.dcur.off{opacity:0}
html.g .view{overflow:hidden} /* the page scrolls, not the screen inside it */