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

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

#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}
#bar button,#bar .pagenav,#bar .stat,#bar #zval{white-space:nowrap;flex:none}
#bar #b_addSec{flex:none}
#app.zen #bar,body.onboarding #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 (ID) em vez de .zval-input (classe) de propósito: base.css tem
   "input[type=number]{width:100%}" — um seletor de atributo conta como
   classe, então essa regra empata ou ganha de uma classe sozinha. Só um
   seletor de ID garante que a largura de 34px realmente vence (foi
   exatamente esse empate que fez o campo virar quase a largura toda da
   barra, com fundo igual ao da barra — parecia "sumir", não só ficar largo). */
#zval{width:34px;min-width:0;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);
  font-size:12px;padding:2px 0;border:1px solid transparent;background:transparent;
  border-radius:var(--r-sm);-moz-appearance:textfield;appearance:textfield}
#zval:hover,#zval:focus{border-color:var(--line);background:var(--surface)}
#zval::-webkit-inner-spin-button,#zval::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pagelbl-btn{border:1px solid transparent;background:transparent;color:var(--muted);font-size:12px;
  font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:var(--r-sm)}
.pagelbl-btn:hover{border-color:var(--line);background:var(--surface);color:var(--ink)}
.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,body.onboarding 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}

/* acrílico (portado do Polaroide Studio): o quadro de trabalho passa por
   trás dos painéis translúcidos. Os três itens da linha 2 da grade ganham
   posição explícita pra poderem se sobrepor; o recuo do #stage acompanha a
   largura de cada painel (--gut-l/--gut-r, atualizadas junto com
   hide-left/hide-right/zen acima). */
body.acrylic #stage{grid-column:1/-1;grid-row:2;z-index:1;
  padding-left:calc(30px + var(--gut-l));padding-right:calc(30px + var(--gut-r))}
body.acrylic #left{grid-column:1;grid-row:2;z-index:15}
body.acrylic #right{grid-column:3;grid-row:2;z-index:15}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
  body.acrylic #bar,body.acrylic #left,body.acrylic #right,
  body.acrylic #menu,body.acrylic dialog{
    background:color-mix(in srgb, var(--surface) 85%, transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
  }
  body.acrylic #left{border-right-color:color-mix(in srgb,var(--line) 60%,transparent)}
  body.acrylic #right{border-left-color:color-mix(in srgb,var(--line) 60%,transparent)}
  body.acrylic #bar{border-bottom-color:color-mix(in srgb,var(--line) 60%,transparent)}
}
/* respeita quem pediu menos transparência no sistema (só desliga se o
   navegador entende a consulta; se não entende, o bloco é ignorado). */
@media (prefers-reduced-transparency:reduce){
  body.acrylic #bar,body.acrylic #left,body.acrylic #right,
  body.acrylic #menu,body.acrylic dialog{
    background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  body.acrylic #left,body.acrylic #right{background:var(--paper)}
}

#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%}

/* telas iniciais (#empty/#resumeAsk): ver .ep-start em vendor/core/shell.css */

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