/* Planner Studio — css/layout.css  (grade do app, barra, painéis, prancheta) */

#app{display:grid;grid-template-columns:300px 1fr 300px;grid-template-rows:56px 1fr;
  height:100vh;height:100dvh;background:var(--stage);
  transition:grid-template-columns .22s ease, grid-template-rows .22s ease}
#app.hide-left{grid-template-columns:0 1fr 300px}
#app.hide-right{grid-template-columns:300px 1fr 0}
#app.hide-left.hide-right{grid-template-columns:0 1fr 0}
#app.zen{grid-template-rows:0 1fr;grid-template-columns:0 1fr 0}

#bar{grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:0 12px;
  background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-1);z-index:20;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#bar::-webkit-scrollbar{height:0;display:none}
#app.zen #bar{overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;white-space:nowrap;padding-right:6px}
.brand[href]{cursor:pointer}
.brand[href]:hover .t1{color:var(--brand)}
.brand .mark{width:34px;height:34px;display:grid;place-items:center;flex:none}
.brand .mark svg{width:32px;height:32px;display:block}
.brand .txt{display:flex;flex-direction:column;line-height:1.12}
.brand .t1{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);transition:color .13s}
.brand .t2{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.bar-sep{width:1px;align-self:stretch;background:var(--line);margin:10px 3px;flex:none}
.bar-grow{flex:1}
.bar-cluster{display:flex;align-items:center;gap:5px;flex:none}
.pagenav{display:flex;align-items:center;gap:3px;white-space:nowrap;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
#zval{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.stat{color:var(--faint);font-size:11.5px;white-space:nowrap;padding:0 4px}
.iconbtn.on{background:var(--brand-soft);border-color:var(--brand-ring);color:var(--brand)}

aside{background:var(--paper);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:12px;padding-bottom:26px;min-width:0}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line)}
#app.hide-left #left,#app.hide-right #right,#app.zen aside{opacity:0;pointer-events:none}
.aside-title{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);margin:2px 2px 10px;display:flex;align-items:center;gap:8px}
.aside-title.mt16{margin-top:18px}
.aside-title svg{width:15px;height:15px;color:var(--brand)}

#stage{position:relative;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;
  background:radial-gradient(circle at 50% 0,rgba(255,255,255,.35),transparent 60%),var(--stage);
  padding:30px;display:flex;justify-content:safe center;align-items:safe start}
#stage::-webkit-scrollbar{width:0;height:0;display:none}
body.panning #stage,body.panning #stage *{cursor:grabbing!important}

#sheets{display:flex;flex-direction:column;align-items:center;gap:26px;height:max-content;padding-bottom:40px}
.page{background:#fff;box-shadow:var(--sh-2);flex:none;position:relative;border-radius:2px;overflow:hidden;
  outline:0 solid transparent;transition:outline-color .15s}
.page.inSel{outline:2px solid var(--brand-ring)}
.page svg{display:block;width:100%;height:100%}

#empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px;pointer-events:none}
#empty .box{pointer-events:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);max-width:440px;width:100%;max-height:82vh;overflow:auto;padding:26px 24px;text-align:center}
#empty .mark{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:8px}
#empty .mark svg{width:48px;height:48px}
#empty h3{margin:.2em 0 .3em;font-size:20px}
#empty p{color:var(--muted);margin:.2em 0 1em}
#empty .faint{margin-top:14px;font-size:11.5px}

#zenExit{position:fixed;top:12px;right:12px;z-index:60;background:var(--surface);box-shadow:var(--sh-pop)}