/*
 * App shell: top bar, tab bar, panels and controls shared by every screen.
 * Colors come only from the tokens in assets/css/base.css.
 */
#app{background:var(--ink);color:var(--tx-d2);min-height:100vh;font-family:'Public Sans',system-ui,sans-serif;display:flex;flex-direction:column}
#app h1,#app h2,#app h3{font-family:'Public Sans',sans-serif;color:var(--head-d)}

/* Top bar */
#app .stb{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:10px 20px;background:var(--ink0);border-bottom:1px solid var(--line-d)}
#app .logo{padding:0}
#app .logo b{font-size:20px}
#app .logo span{margin:0}
#app .sch{position:relative;flex:0 1 320px}
#app .sch svg{position:absolute;left:12px;top:11px;width:18px;height:18px;stroke:var(--mut-d);fill:none;stroke-width:2;stroke-linecap:round}
#app .sch input{width:100%;height:40px;background:var(--ink2);border:1px solid var(--line-d);color:var(--white);padding:0 12px 0 38px;font-size:14px;font-family:inherit;border-radius:2px}
#app .sch input::placeholder{color:var(--mut-d)}
#app .mini{display:flex;flex-wrap:wrap;gap:0 22px;flex:1;height:20px;overflow:hidden;font-size:13px;white-space:nowrap}
#app .mini span{display:flex;gap:8px;align-items:baseline}
#app .mini .k{color:var(--mut-d)}
#app .mini .v{font-family:'JetBrains Mono',monospace;color:var(--white);font-weight:700}
#app .mini .c{font-family:'JetBrains Mono',monospace;font-size:12px}
#app .usr{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
#app .usr .av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--teal-d);color:var(--white);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700}
#app .usr .nm{color:var(--white);font-weight:600}
#app .usr .out{color:var(--teal-l);font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
#app .bdg{font-size:11.5px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);padding:5px 10px;border-radius:2px;white-space:nowrap}
#app .bdg.srv{display:inline-flex;align-items:center;gap:8px;color:var(--tx-d2);border-color:var(--line-d)}
#app .bdg.srv.up{color:var(--up);border-color:color-mix(in srgb,var(--up) 55%,transparent)}
#app .bdg.srv.down{color:var(--dn);border-color:color-mix(in srgb,var(--dn) 55%,transparent)}
#app .srv-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--mut-d)}
#app .bdg.srv.up .srv-dot{background:var(--up)}
#app .bdg.srv.down .srv-dot{background:var(--dn)}

/* Tab bar */
#app .tabs{position:sticky;top:var(--stb-h,61px);z-index:30;display:flex;gap:4px;padding:0 20px;background:var(--ink);border-bottom:1px solid var(--line-d);overflow-x:auto}
#app .tab{appearance:none;display:flex;align-items:center;gap:9px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--tx-d2);padding:14px 16px 11px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap}
#app .tab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app .tab:hover{color:var(--white)}
#app .tab[aria-selected="true"]{color:var(--white);border-bottom-color:var(--teal-l)}
#app .tab[aria-selected="true"] svg{stroke:var(--teal-l)}
#app .tab .cnt{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;min-width:20px;padding:1px 6px;border-radius:2px;background:color-mix(in srgb,var(--teal) 22%,transparent);color:var(--teal-l)}
#app .tab .cnt[data-zero]{background:color-mix(in srgb,var(--white) 6%,transparent);color:var(--mut-d)}
#app .tab:focus-visible{outline:2px solid var(--teal-l);outline-offset:-2px}

/* Stage and panels */
#app .stage{flex:1;padding:14px}
#app .tabpanel{display:grid;gap:14px;align-items:start;min-width:0}
#app .tabpanel:focus{outline:none}
#app .col{display:flex;flex-direction:column;gap:14px;min-width:0}
#app .pn{background:var(--ink2);border:1px solid var(--line-d);border-radius:2px;padding:16px;min-width:0}
#app .ph{font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mut-d);font-weight:500;margin:0 0 10px}
#app .pn-lead{font-size:13px;color:var(--mut-d)}
#app .u{color:var(--up)}
#app .d{color:var(--dn)}
#app .ah{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}

/* Controls */
#app .ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#app .seg{display:inline-flex;border:1px solid var(--line-d)}
#app .seg button{background:transparent;border:0;color:var(--tx-d2);padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:'JetBrains Mono',monospace;border-right:1px solid var(--line-d)}
#app .seg button:last-child{border-right:0}
#app .seg button:hover{color:var(--white)}
#app .seg button[aria-pressed="true"]{background:var(--teal);color:var(--on-teal)}
#app .ck{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--tx-d2);cursor:pointer}
#app .ck input{accent-color:var(--teal);width:16px;height:16px}
#app .tbtn{color:var(--tx-d2)}
#app .chp{background:transparent;border:1px solid color-mix(in srgb,var(--teal-l) 45%,transparent);color:var(--teal-l);font-size:12px;padding:5px 9px;border-radius:2px;cursor:pointer;font-family:inherit;text-align:left}
#app .chp:hover{background:color-mix(in srgb,var(--teal-l) 10%,transparent)}
#app .lnk{background:none;border:0;padding:0;color:var(--teal-l);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#app .spin{display:inline-block;width:12px;height:12px;border:2px solid color-mix(in srgb,var(--white) 25%,transparent);border-top-color:var(--teal-l);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px}
#app .legend{color:var(--tx-d2)}
#app .fine{font-size:12px;margin:8px 2px 0}

/* Key-value grid used by side cards */
#app .kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line-d);font-size:13.5px}
#app .kv:first-of-type{border-top:0}
#app .kv b{font-family:'JetBrains Mono',monospace;color:var(--white);text-align:right}
#app .kv small{display:block;color:var(--mut-d);font-size:11.5px}

/* Does / does not lists (Brain scope and Transparência) */
#app .scope{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;color:var(--tx-d1)}
#app .scope li{display:flex;gap:8px}
#app .scope li::before{font-family:'JetBrains Mono',monospace;font-weight:700;flex:none}
#app .scope.yes li::before{content:"+";color:var(--up)}
#app .scope.no li::before{content:"–";color:var(--dn)}

/* Charts: phones get a compact SVG geometry (see core/charts.js), so the
   SVG simply scales to the panel width. */
#app .chart svg.compact text{font-size:23px}
#app .chart svg.compact .tag-t{font-size:22px}

/* Sparklines (watchlist and Início) */
#app .spark{display:block;margin-left:auto}
#app .spark polyline{fill:none;stroke-width:1.6}
#app .spark.up polyline{stroke:var(--up)}
#app .spark.dn polyline{stroke:var(--dn)}

/* Workspace: one tab, or two side by side or stacked (see core/tabs.js) */
#app .tab[data-shown="true"]:not([aria-selected="true"]){border-bottom-color:color-mix(in srgb,var(--teal-l) 50%,transparent)}
#app .ws{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 20px;background:var(--ink);border-bottom:1px solid var(--line-d)}
#app .ws-group,#app .ws-pane{display:flex;align-items:center;gap:8px}
#app .ws-k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut-d)}
#app .ws-pane[data-active="true"] .ws-k{color:var(--teal-l)}
#app .ws select{height:34px;min-width:200px;background:var(--ink2);border:1px solid var(--line-d);color:var(--white);padding:0 10px;font-size:13.5px;font-family:inherit;border-radius:2px}
#app .stage[data-mode="2"]{display:grid;gap:14px;align-items:start}
#app .stage[data-mode="2"] .tabpanel{align-content:start}

/* Split panes show the main information of each tab; the rest is one click
   away in the full view. Blocks marked data-secondary, and these classes
   written by the screens, are hidden only while two tabs are on screen. */
#app .stage[data-mode="2"] [data-secondary]{display:none}
#app .stage[data-mode="2"] #asset :is(.legend,.stat,.ask-row,.fine){display:none}
#app .stage[data-mode="2"] .rk-guide,
#app .stage[data-mode="2"] #tab-sinais .fine,
#app .stage[data-mode="2"] #tab-brain #bc,
#app .stage[data-mode="2"] .nt-add,
#app .stage[data-mode="2"] .cr-head .pn-lead{display:none}
#app .stage[data-mode="2"][data-orientation="side"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#app .stage[data-mode="2"] .tabpanel{grid-template-columns:minmax(0,1fr)}
#app .stage[data-mode="2"] .tabpanel[data-slot="1"]{grid-row:1;grid-column:1}
#app .stage[data-mode="2"] .tabpanel[data-slot="2"]{grid-row:2;grid-column:1}
#app .stage[data-mode="2"][data-orientation="side"] .tabpanel[data-slot="2"]{grid-row:1;grid-column:2}

/* Tablet and small laptop */
@media (max-width:1180px){
  #app .mini{display:none}
  #app .stb{gap:14px}
  #app .sch{flex:1 1 320px}
  #app .tabs{padding:0 12px}
  #app .tab{gap:6px;padding:14px 10px 11px;font-size:13.5px}
  #app .tab svg{width:16px;height:16px}
}

/* Phone */
@media (max-width:720px){
  #app .stb{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:10px 12px}
  #app .usr .nm{display:none}
  #app .usr .av{width:30px;height:30px}
  #app .sch{grid-column:1 / -1;order:3}
  #app .bdg{display:none}
  #app .tabs{top:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0;overflow:visible}
  #app .tab{flex-direction:column;justify-content:center;gap:4px;padding:10px 2px 8px;font-size:10.5px;font-weight:600;position:relative;min-width:0}
  #app .tab svg{width:20px;height:20px}
  #app .tab .cnt{position:absolute;top:6px;left:calc(50% + 8px);font-size:10px;min-width:16px;padding:0 4px;line-height:15px}
  #app .stage{padding:10px 10px calc(16px + env(safe-area-inset-bottom,0px))}
  #app .tabpanel{gap:10px}
  #app .col{gap:10px}
  #app .pn{padding:14px 12px}
  #app .ah{gap:10px}
  #app .ctl{gap:6px}
  #app .legend{gap:10px;font-size:11.5px}
  #app .ws{padding:10px 12px}
  #app .ws-orient{display:none}
  #app .ws-pane{flex:1 1 100%}
  #app .ws select{min-width:0;flex:1}
  #app .stage[data-mode="2"][data-orientation]{grid-template-columns:minmax(0,1fr)}
  #app .stage[data-mode="2"][data-orientation] .tabpanel[data-slot="2"]{grid-row:2;grid-column:1}
}
@media (max-width:380px){
  #app .logo span{display:none}
  #app .tab{font-size:9.5px;letter-spacing:-.01em}
}

/* Touch screens: comfortable tap targets */
@media (pointer:coarse){
  #app .seg button{min-height:40px;padding:0 14px}
  #app .ck{min-height:40px}
  #app .ck input{width:20px;height:20px}
  #app .chp{min-height:36px;padding:7px 11px}
  #app .lnk{padding:6px 0}
  #app .tbtn{min-height:36px}
  #app .sch input{height:44px;font-size:16px}
  #app .usr .out{padding:10px 0}
}

/* Motion: tab switch and screen updates (disabled for reduced motion) */
@keyframes fbTabIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes fbFadeIn{from{opacity:.25}to{opacity:1}}
#app .tab{transition:color .25s ease,border-color .25s ease,background-color .25s ease}
#app .tabpanel:not([hidden]){animation:fbTabIn .6s cubic-bezier(.2,.8,.2,1) both}
#app .stage[data-mode="2"] .tabpanel[data-slot="2"]:not([hidden]){animation-delay:.09s}
#app .tabpanel .pn{transition:opacity .25s ease}
::view-transition-old(root),::view-transition-new(root){animation-duration:.34s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation-name:fbViewOut}
::view-transition-new(root){animation-name:fbViewIn}
@keyframes fbViewOut{to{opacity:0;transform:translate3d(-10px,0,0)}}
@keyframes fbViewIn{from{opacity:0;transform:translate3d(10px,0,0)}}
@media (prefers-reduced-motion:reduce){
  #app .tabpanel:not([hidden]),#app .tabpanel *,#app .tab{animation:none!important;transition:none!important}
}

/* Loading dialog shown while the server's data arrives (app/core/boot.js) */
.boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,var(--ink0) 82%,transparent);font-family:'Public Sans',system-ui,sans-serif}
.boot[hidden],.boot [hidden]{display:none!important}
.boot-box{width:100%;max-width:440px;background:var(--ink2);border:1px solid var(--line-d);border-radius:2px;padding:24px;color:var(--tx-d2);outline:none}
.boot-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.boot-spin{flex:none;width:30px;height:30px;border:3px solid color-mix(in srgb,var(--white) 20%,transparent);border-top-color:var(--teal-l);border-radius:50%;animation:spin .8s linear infinite}
.boot-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut-d);margin-bottom:4px}
.boot h2{font-size:17px;color:var(--white);margin:0}
.boot p{font-size:13.5px;line-height:1.5;color:var(--mut-d);margin:0 0 16px}
.boot-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;color:var(--mut-d);margin-bottom:8px}
.boot-pct{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--white);font-weight:700}
.boot-track{height:6px;background:var(--line-d);border-radius:2px;overflow:hidden}
.boot-fill{display:block;height:100%;width:0;background:var(--teal);transition:width .3s ease}
.boot .btn{width:100%}
.sg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.sg-field label{font-size:12.5px;color:var(--tx-d2);font-weight:600}
.sg-field input{width:100%;min-height:44px;padding:0 12px;background:var(--ink0);color:var(--white);border:1px solid var(--line-d);border-radius:2px;font:inherit;font-size:15px}
.sg-pw{display:flex;gap:8px;align-items:center}
.sg-pw input{flex:1;min-width:0}
.sg-eye{background:transparent;border:0;color:var(--teal-l);font-weight:700;font-size:12.5px;cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:3px}
.boot .sg-status{margin:12px 0 0;font-size:13px}
.boot .sg-status.sg-error{color:var(--warn)}
#app .usr button.out{background:none;border:0;font:inherit;font-size:13px;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .boot-spin{animation:none}
  .boot-fill{transition:none}
}
@media (max-width:720px){
  .boot-box{padding:18px}
}

/* Asset picker, opened when an asset tab is placed in a split pane */
#assetPick .ap-box{width:min(460px,calc(100vw - 32px));max-height:86vh;overflow:auto}
#assetPick .ap-field{display:grid;gap:6px;margin:12px 0}
#assetPick .ap-field label{font-size:12px;color:var(--mut-d)}
#assetPick .ap-field input{height:40px;background:var(--ink2);border:1px solid var(--line-d);color:var(--white);padding:0 12px;font-size:14px;font-family:inherit;border-radius:2px}
#assetPick .ap-field input::placeholder{color:var(--mut-d)}
#assetPick .ap-list{list-style:none;margin:0 0 14px;padding:0;max-height:300px;overflow:auto;border:1px solid var(--line-d)}
#assetPick .ap-item{display:flex;align-items:center;gap:12px;width:100%;border-bottom:1px solid var(--line-d);padding:10px 12px;color:var(--tx-d2);font-size:14px;cursor:pointer}
#assetPick .ap-item:hover{background:color-mix(in srgb,var(--teal) 10%,transparent)}
#assetPick .ap-item:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:-2px}
#assetPick .ap-item:has(input:checked){color:var(--teal-l);background:color-mix(in srgb,var(--teal) 14%,transparent)}
#assetPick .ap-item input{accent-color:var(--teal);margin:0;flex:none}
#assetPick .ap-item b{min-width:76px;font-family:'JetBrains Mono',monospace;color:var(--white)}
#assetPick .ap-item span{flex:1;font-size:13px;color:var(--mut-d)}
#assetPick .ap-empty{padding:12px;font-size:13px;color:var(--mut-d)}
#assetPick .ap-actions{display:flex;justify-content:flex-end;gap:8px}
#assetPick .ap-actions button:disabled{opacity:.5;cursor:default}