/* Shared shell: edit here, then run python sync-shell.py. No page overrides. */
:root{color-scheme:dark;--shell-sidebar:210px;--shell-gutter:clamp(24px,3vw,58px);--shell-topbar:64px;--shell-font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:#eeefea;font:14px/1.5 var(--shell-font)}
body>main{margin:0 0 0 var(--shell-sidebar);padding:0 var(--shell-gutter) 26px;max-width:none;min-width:0}
.topbar{height:var(--shell-topbar);min-height:var(--shell-topbar);display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);color:#9b9e96;font-size:11px;line-height:1.5}
.breadcrumb{font-size:11px;white-space:nowrap}
.breadcrumb>span:not(#page-label){color:#777e6f;margin:0 12px}
.demo{border:1px solid var(--line-strong);padding:5px 9px;border-radius:5px;letter-spacing:1px;font-size:9px;color:#c4cbb8;white-space:nowrap}
.demo:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;background:#d7bb73;border-radius:50%;box-shadow:0 0 9px #d7bb7330}
.nfos-shell{position:fixed;inset:0 auto 0 0;width:210px;height:100dvh;padding:32px 20px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:0;gap:0;overflow:auto;background:var(--bg);z-index:5}.nfos-shell .brand{display:flex;align-items:center;gap:9px;padding:0 10px;font-size:16px;font-weight:500;letter-spacing:-.35px;white-space:nowrap}.nfos-shell .mark{display:block;width:26px;height:26px;flex-shrink:0}.nfos-shell .workspace{margin:44px 12px 13px;color:#777d70;font-size:10px;letter-spacing:1.7px}.nfos-shell nav{display:flex;flex-direction:column;gap:3px;margin:0}.nfos-shell .nav{display:flex;align-items:center;gap:12px;margin:0;padding:11px 13px;font-size:12px;border-radius:7px;color:#949b8c;text-decoration:none;white-space:nowrap}.nfos-shell .nav svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}.nfos-shell .nav.active{background:var(--surface-flat-raised);color:#e6e9df}.nfos-shell .nav.active:after{display:block;content:"";width:5px;height:5px;background:#d7bb73;border-radius:50%;margin-left:auto;box-shadow:0 0 9px #d7bb7350}.nfos-shell .side-bottom{margin-top:auto;padding:24px 12px 12px;color:#8b8e85;font-size:11px}.nfos-shell .side-bottom span{display:block;color:#666d5e;font-size:10px;margin-top:5px}
.side-exit{display:inline-block;margin-top:12px;color:#8b8e85;font-size:11px;text-decoration:none}.side-exit:hover,.side-exit:focus-visible{color:var(--gold)}body>main{margin-left:210px;margin-right:0;max-width:none;min-width:0;padding-left:clamp(24px,3vw,58px);padding-right:clamp(24px,3vw,58px)}
@media(max-width:850px){.nfos-shell{position:relative;inset:auto;width:100%;height:auto;padding:17px 20px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}.nfos-shell .brand{padding:0;font-size:14px}.nfos-shell .mark{width:24px;height:24px}.nfos-shell .workspace,.nfos-shell .side-bottom{display:none}.nfos-shell>nav{display:flex!important;flex-direction:row;flex-wrap:wrap;gap:4px;margin-top:13px}.nfos-shell .nav{font-size:11px;padding:9px;gap:7px}.nfos-shell .nav svg{display:block;width:14px;height:14px}.nfos-shell .nav.active:after{display:none}body>main{margin:0;max-width:none;padding-left:20px;padding-right:20px}}
.account-quota{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:10px;color:#a6ad9f}.quota-account{display:flex;align-items:center;gap:8px}.quota-account strong{color:#e8e8dc;font-weight:500}.quota-account small{font-size:8px;color:#d7bb73;border:1px solid #5e5337;padding:2px 5px;border-radius:4px}.quota-dot{width:5px;height:5px;border-radius:50%;background:#d7bb73;box-shadow:0 0 8px #d7bb7340}.quota-windows{display:flex;gap:23px;margin-left:auto}.quota-windows>div{display:grid;grid-template-columns:auto auto;gap:4px 14px;min-width:138px}.quota-windows b{font-weight:500;color:#dfd2a4}.quota-windows i{grid-column:1/-1;display:block;background:linear-gradient(to right,#bda25f var(--quota),var(--surface-track) var(--quota));height:3px;border-radius:4px}.account-quota details{position:relative;margin:0}.account-quota summary{font-size:10px;color:#939b86;cursor:pointer;white-space:nowrap}.account-quota details p{position:absolute;right:0;top:22px;z-index:30;background:var(--surface-flat-raised);border:1px solid var(--line-strong);border-radius:8px;padding:15px;width:min(300px,78vw);font-size:11px;line-height:1.7;box-shadow:0 10px 30px #0007}.account-quota details summary:before{content:none}@media(max-width:650px){.account-quota{gap:14px;padding:15px 0}.quota-account{width:100%;flex-wrap:wrap}.quota-windows{margin-left:0;flex:1;gap:14px}.quota-windows>div{min-width:120px}.account-quota details{margin-left:auto}.account-quota details p{right:0}}
html,*{scrollbar-color:#857447 var(--line)}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:var(--surface-inset);border-radius:10px}::-webkit-scrollbar-thumb{background:#857447;border:3px solid var(--line);border-radius:10px;min-height:32px}::-webkit-scrollbar-thumb:hover{background:#c0a764}::-webkit-scrollbar-thumb:active{background:#e1c983}::-webkit-scrollbar-corner{background:var(--surface-inset)}@media(forced-colors:active){html,*{scrollbar-color:auto}::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:Canvas}::-webkit-scrollbar-thumb{background:ButtonText;border-color:Canvas}}
.nfos-shell{width:var(--shell-sidebar);line-height:1.5;background:var(--bg);border-color:var(--line)}
.nfos-shell .workspace{font-weight:650}
.nfos-shell .nav:hover{background:transparent;color:#d9ddd1}
.nfos-shell .nav:focus-visible{outline:1px solid var(--gold);outline-offset:-3px}
.account-quota{min-height:62px;line-height:1.5;border-color:var(--line)}
.account-quota details p{margin:0}
/* Quadros alone owns a viewport-height work area; header geometry stays shared. */
@media(min-width:851px){body:is([data-page="quadros"],[data-page="engenharia"]){height:100dvh;overflow:hidden}body:is([data-page="quadros"],[data-page="engenharia"])>main{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:10px}body:is([data-page="quadros"],[data-page="engenharia"])>main>*{flex-shrink:0}body:is([data-page="quadros"],[data-page="engenharia"])>main>:is(.board,.engineering-board){flex-shrink:1}}
@media(max-width:850px){.nfos-shell{width:100%;line-height:1.5}body>main{margin:0;padding:0 20px 22px}.topbar{height:var(--shell-topbar);min-height:var(--shell-topbar)}}
@media(max-width:650px){.demo{font-size:8px;letter-spacing:.5px;padding:5px 7px}.breadcrumb>span:not(#page-label){margin:0 6px}.account-quota{min-height:62px}.quota-windows{flex-wrap:wrap}.quota-windows>div{min-width:110px;flex:1}}
/* App-level viewport: the chrome never unmounts or joins the content scroll. */
body.nfos-app{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.nfos-app>main{height:100dvh;min-height:0;display:flex;flex-direction:column;padding-bottom:0;flex:1}
.nfos-app main>.account-quota,.nfos-app main>.topbar{flex:none}
.view-host{flex:1;min-height:0;position:relative;isolation:isolate}
.app-view{display:block;width:100%;height:100%;border:0;background:var(--bg);position:absolute;inset:0}
.app-view[hidden]{display:none}
.nfos-shell nav{position:relative;isolation:isolate}
.nav-indicator{position:absolute;left:0;top:0;background:var(--surface-flat-raised);border-radius:7px;pointer-events:none;z-index:-1}
.app-ready .nav-indicator{transition:transform 160ms ease-out,width 160ms ease-out,height 160ms ease-out}
.nfos-app .nfos-shell .nav.active{background:transparent}
/* Views contain only central content, no second shell, margins or scroll wrapper. */
body[data-nfos-view]>main{margin:0;padding:0 0 22px;min-width:0;max-width:none}
body[data-nfos-view]{scrollbar-gutter:stable}
@media(min-width:851px){body[data-nfos-view]:is([data-page="quadros"],[data-page="engenharia"])>main{margin:0;padding:0 0 10px;min-height:0}}
@media(max-width:850px){body.nfos-app>main{height:auto;margin:0;padding:0 20px;min-height:0}.nfos-app .nfos-shell{flex:none}.nfos-app .nfos-shell>nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.nfos-app .nfos-shell .nav{flex-shrink:0}body[data-nfos-view]>main{padding:0 0 22px}}
@media(prefers-reduced-motion:reduce){.app-ready .nav-indicator{transition:none}.app-view{filter:none!important;transform:none!important;animation:none!important}}
/* First-load feedback stays in the content region; cached ready views skip it. */
.view-loading{position:absolute;inset:0;z-index:2;padding:20px 0;overflow:hidden;background:var(--bg);color:var(--muted)}
.view-loading[hidden],.view-skeleton[hidden],.view-retry[hidden]{display:none}
.view-loading p{font-size:11px;line-height:1.6;margin:0 0 18px}
.view-skeleton i{display:block;border-radius:5px;background:linear-gradient(100deg,var(--surface-flat) 20%,var(--surface-flat-hover) 45%,var(--surface-flat) 70%);background-size:220% 100%;animation:skeleton-pulse 1.8s ease-in-out infinite}
.skeleton-eyebrow{width:180px;max-width:45%;height:9px;margin-bottom:14px}
.skeleton-heading{width:440px;max-width:80%;height:31px;margin-bottom:14px}
.skeleton-description{width:600px;max-width:95%;height:12px;margin-bottom:30px}
.skeleton-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.skeleton-cards i{height:180px;border:1px solid var(--line);border-radius:9px}
.view-retry{color:var(--text);font:11px/1.5 var(--shell-font);background:var(--surface-flat-raised);border:1px solid #665b3c;border-radius:6px;padding:9px 14px;cursor:pointer}
.view-retry:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes skeleton-pulse{from{background-position:100% 0}to{background-position:-100% 0}}
@media(max-width:650px){.skeleton-cards{grid-template-columns:1fr}.skeleton-cards i{height:110px}}
@media(prefers-reduced-motion:reduce){.view-skeleton i{animation:none;background:var(--surface-flat)}}

/* Modal backdrop continuation; active iframe keeps its dimensions and draft state. */
.shell-modal-cover[hidden]{display:none}.shell-modal-cover{position:fixed;inset:0;z-index:1000;pointer-events:none}.shell-modal-part{position:fixed;pointer-events:auto}
/* Keep the blur continuous across the iframe edge; hit areas stay separate and invisible. */
.shell-modal-surface,.shell-modal-transition{position:fixed;inset:0;pointer-events:none;background:var(--surface-overlay);backdrop-filter:blur(3px)}
html[data-shell-modal="true"] body[data-nfos-view] dialog::backdrop{background:transparent!important;backdrop-filter:none!important}

html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *:before,html[data-reduce-motion="true"] *:after{animation:none!important;transition:none!important}

/* One close control for every drawer: same size, icon and focus as Quadros and Contas. */
.icon-close{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:8px;border:0;background:var(--surface-flat-raised);color:var(--text);cursor:pointer;transition:background-color .18s}.icon-close svg{width:14px;height:14px;display:block}.icon-close:hover{background:var(--surface-track)}.icon-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}