/* Sauce Vault top bar: a floating bento tile, one nav layer for the whole
   vault. The center context zone adjusts to where you are (home sections,
   dashboard page, open report) instead of any page adding a second bar.
   Self-contained: brings its own tokens so it renders identically over vault
   pages (vault.css) and the dashboard (dash.css). */

/* MoonSauce brand contract (Website-V2 globals): paper #fdfdfd + ink #111417 +
   hairline #e6e9ec in light; night #090e11 with the brand blues and coral in
   dark. Bento tiles separate with hairlines, not gray grounds. */
:root{
  --vtb-h:56px;
  --vtb-gap:14px;
  --vtb-bg:#ffffff; --vtb-ink:#111417; --vtb-ink-2:#5c666e; --vtb-ink-3:#9aa3aa;
  --vtb-line:#e6e9ec; --vtb-soft:#f4f6f7; --vtb-edge:#e6e9ec;
  --vtb-brand:#0a7d9c; --vtb-accent:#d23f28; --vtb-ground:#fdfdfd;
  --vtb-shadow:0 1px 2px rgba(17,20,23,.03),0 8px 22px rgba(17,20,23,.05);
  --vtb-logo-filter:brightness(0) opacity(.85);
}
:root[data-theme="dark"]{
  --vtb-bg:#10181d; --vtb-ink:#e8eef2; --vtb-ink-2:#b8c6cf; --vtb-ink-3:#6e7d86;
  --vtb-line:#1f2a31; --vtb-soft:#151f26; --vtb-edge:#1f2a31;
  --vtb-brand:#5fc3e0; --vtb-accent:#f04438; --vtb-ground:#090e11;
  --vtb-shadow:0 10px 28px rgba(0,0,0,.4);
  --vtb-logo-filter:brightness(0) invert(1);
}

/* ---- the bar itself: a floating tile ---- */
.vtb{position:sticky;top:var(--vtb-gap);z-index:70;height:var(--vtb-h);display:flex;align-items:center;
  gap:.6rem;margin:var(--vtb-gap) var(--vtb-gap) 0;padding:0 .8rem;
  background:var(--vtb-bg);border:1px solid var(--vtb-edge);border-radius:18px;
  box-shadow:var(--vtb-shadow);font-family:'Outfit',system-ui,sans-serif;color:var(--vtb-ink)}
.vtb *{box-sizing:border-box}
.vtb button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.vtb button:focus-visible,.vtb a:focus-visible,.vtb input:focus-visible{
  outline:2px solid var(--vtb-brand);outline-offset:2px;border-radius:8px}

/* the brand block: the MoonBase logo, full color in both themes */
.vtb-brand{display:flex;align-items:center;white-space:nowrap;text-decoration:none;
  color:inherit;padding:.3rem .5rem;border-radius:10px}
.vtb-brand:hover{background:var(--vtb-soft)}
.vtb-brand img.b-mb{height:27px;display:block}
/* black wordmark in light, the cream original in dark */
:root:not([data-theme="dark"]) .vtb-brand .b-mb-dark{display:none}
:root[data-theme="dark"] .vtb-brand .b-mb-light{display:none}

/* avatar-menu client switching (admins and multi-client accounts) */
.vtb-pop .p-item.on{color:var(--vtb-brand);font-weight:700}
.vtb-pop .p-item small.right{margin-left:auto;color:var(--vtb-ink-3)}

/* ---- context zone: adjusts to where you are ---- */
.vtb-ctx{flex:1;min-width:0;display:flex;align-items:center;gap:3px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.vtb-ctx::-webkit-scrollbar{display:none}
.vtb-ctx .nav-item{white-space:nowrap;font-size:.82rem;font-weight:600;color:var(--vtb-ink-2);
  padding:.42rem .8rem;border-radius:999px;text-decoration:none;cursor:pointer;border:0;background:none}
.vtb-ctx .nav-item:hover{background:var(--vtb-soft);color:var(--vtb-ink)}
.vtb-ctx .nav-item.on{background:var(--vtb-brand);color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(10,125,156,.3)}
.vtb-ctx .crumb{white-space:nowrap;font-size:.88rem;font-weight:700;letter-spacing:-.01em;
  padding:.35rem .4rem}
.vtb-ctx .crumb small{font-weight:600;color:var(--vtb-ink-3);margin-left:.5rem}
.vtb-ctx .backbtn{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.82rem;font-weight:650;color:var(--vtb-ink-2);padding:.42rem .85rem;
  border-radius:999px;border:1px solid var(--vtb-line)}
.vtb-ctx .backbtn:hover{border-color:var(--vtb-brand);color:var(--vtb-ink)}
.vtb-ctx .backbtn svg{width:14px;height:14px}
.vtb-ctx .pdfbtn{white-space:nowrap;font-size:.8rem;font-weight:700;color:var(--vtb-brand);
  padding:.42rem .85rem;border-radius:999px;text-decoration:none;border:1px solid var(--vtb-line)}
.vtb-ctx .pdfbtn:hover{border-color:var(--vtb-brand)}

/* search: compact, right of the context zone */
.vtb-search{position:relative;flex:none;width:220px}
.vtb-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--vtb-ink-3);pointer-events:none}
.vtb-search input{width:100%;border:1px solid var(--vtb-line);background:var(--vtb-soft);
  color:var(--vtb-ink);border-radius:999px;padding:.5rem 1rem .5rem 2.2rem;font-size:.84rem;
  font-family:inherit}
.vtb-search input::placeholder{color:var(--vtb-ink-3)}
.vtb-search .kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.68rem;
  color:var(--vtb-ink-3);border:1px solid var(--vtb-line);border-radius:5px;padding:.05rem .35rem;
  background:var(--vtb-bg);pointer-events:none}

/* icon buttons */
.vtb-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--vtb-ink-2);
  border:1px solid transparent;transition:background .15s,color .15s;position:relative;flex:none}
.vtb-ic:hover{background:var(--vtb-soft);color:var(--vtb-ink)}
.vtb-ic svg{width:17px;height:17px}
.vtb-ic .badge{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--vtb-accent);border:2px solid var(--vtb-bg);display:none}
.vtb-ic.has-news .badge{display:block}
:root[data-theme="dark"] .vtb .ic-moon{display:none}
:root:not([data-theme="dark"]) .vtb .ic-sun{display:none}

.vtb-sep{width:1px;height:22px;background:var(--vtb-line);flex:none}

/* avatar + menu */
.vtb-user{display:flex;align-items:center;gap:.55rem;padding:.25rem .35rem .25rem .25rem;
  border-radius:999px;border:1px solid transparent;flex:none}
.vtb-user:hover{background:var(--vtb-soft)}
.vtb-ava{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--vtb-brand),#5fc3e0);color:#fff;font-size:.72rem;font-weight:700}
.vtb-ava img{width:100%;height:100%;object-fit:cover;display:block}
.vtb-user .who{text-align:left;line-height:1.15;display:none}
@media (min-width:1100px){.vtb-user .who{display:block}}
.vtb-user .who b{display:block;font-size:.78rem;font-weight:650}
.vtb-user .who small{display:block;font-size:.66rem;color:var(--vtb-ink-3)}

/* dropdown panels */
.vtb-pop{position:absolute;top:calc(var(--vtb-h) + 4px);right:0;z-index:71;min-width:250px;
  background:var(--vtb-bg);border:1px solid var(--vtb-line);border-radius:16px;
  box-shadow:var(--vtb-shadow);padding:.5rem;font-family:'Outfit',system-ui,sans-serif;color:var(--vtb-ink)}
.vtb-pop[hidden]{display:none}
.vtb-pop .p-head{padding:.55rem .65rem .4rem;font-size:.7rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vtb-ink-3)}
.vtb-pop .p-user{display:flex;gap:.65rem;align-items:center;padding:.55rem .65rem;border-bottom:1px solid var(--vtb-line);
  margin-bottom:.35rem}
.vtb-pop .p-user .who b{display:block;font-size:.85rem;font-weight:650}
.vtb-pop .p-user .who small{display:block;font-size:.72rem;color:var(--vtb-ink-3)}
.vtb-pop a.p-item,.vtb-pop button.p-item{display:flex;width:100%;align-items:center;gap:.6rem;
  padding:.5rem .65rem;border-radius:10px;font-size:.83rem;color:var(--vtb-ink-2);text-decoration:none;
  text-align:left;background:none;border:0;cursor:pointer;font-family:inherit}
.vtb-pop .p-item:hover{background:var(--vtb-soft);color:var(--vtb-ink)}
.vtb-pop .p-item svg{width:15px;height:15px;flex:none;opacity:.75}
.vtb-pop .p-empty{padding:.9rem .65rem;font-size:.82rem;color:var(--vtb-ink-2)}
.vtb-pop .p-note{padding:.45rem .65rem .35rem;font-size:.72rem;color:var(--vtb-ink-3)}

/* search results panel sits under the input */
.vtb-pop.results{left:0;right:auto;top:calc(100% + 6px);width:280px;min-width:0}
.vtb-search .vtb-pop .p-item small{margin-left:auto;color:var(--vtb-ink-3);font-size:.68rem}

/* ---- what the bar does to each page (the one-nav-layer rule) ---- */

/* everyone: brand-paper ground, content clears the floating bar */
html[data-topbar] body{background:var(--vtb-ground)}
/* pages size themselves to 100vh minus the bar, otherwise every page scrolls
   by exactly the bar's height even with nothing below the fold */
html[data-topbar] #app{min-height:calc(100vh - var(--vtb-h) - var(--vtb-gap))}
html[data-topbar] .shell{min-height:calc(100vh - var(--vtb-h) - var(--vtb-gap))}

/* dashboard: rail floats below the bar; its old title row dies, controls stay */
html[data-topbar] .rail{top:calc(var(--vtb-h) + var(--vtb-gap) * 2);
  height:calc(100vh - var(--vtb-h) - var(--vtb-gap) * 3)}
html[data-topbar] .topbar .tb-title{display:none}
html[data-topbar] .topbar{padding-top:.6rem;padding-bottom:.5rem;justify-content:flex-end}

/* vault home: the sidebar stays as the section nav, floating as its own bento
   tile below the bar; duplicate chrome inside it (search, theme) is retired
   because the bar carries both. Content goes bento. */
html[data-topbar] .shell{gap:var(--vtb-gap);padding:var(--vtb-gap) var(--vtb-gap) 0}
html[data-topbar] .side{position:sticky;top:calc(var(--vtb-h) + var(--vtb-gap) * 2);
  height:calc(100vh - var(--vtb-h) - var(--vtb-gap) * 3);
  border:1px solid var(--vtb-edge);border-right:1px solid var(--vtb-edge);
  border-radius:20px;box-shadow:var(--vtb-shadow)}
html[data-topbar] .side .searchbtn{display:none}
html[data-topbar] .side .theme-toggle{display:none}
html[data-topbar] .side nav a{color:var(--ink,#111417)}
/* the shell's gaps already space the main column; trimming its own padding
   lets all four panels share one row on wide screens so the page fits the
   viewport instead of scrolling into dead space */
html[data-topbar] .main{padding:.4rem 1rem 1.2rem}
html[data-topbar] .hero-grid{margin-top:.6rem}
html[data-topbar] .panelgrid{margin-top:1.2rem}
html[data-topbar] .arch-strip{margin-top:1.2rem}

/* open report: the viewer slides under the bar, its own bar is retired */
html[data-topbar] #viewer{top:calc(var(--vtb-h) + var(--vtb-gap) * 2);z-index:60;
  border-top:1px solid var(--vtb-line)}
html[data-topbar] #viewer .vbar{display:none}

@media (max-width:840px){
  html[data-topbar] .rail{top:auto;height:auto}
  .vtb{margin:8px 8px 0;padding:0 .4rem;gap:.35rem}
  .vtb-search{width:40px}
  .vtb-search input{padding:.5rem;color:transparent}
  .vtb-search .kbd{display:none}
  .vtb-client{display:none}
}

/* Stacked layout (<=820px, where vault.css collapses the shell to one column):
   the home sidebar is a full-viewport-height sticky tile on desktop. Left as-is
   here it renders as a tall empty box holding only the welcome card, with every
   bit of real content pushed a full screen below the fold. This is the whole
   range, not just phones -- a tablet at 700px hit it too. Collapse the sidebar
   to a plain block that carries just the welcome card and flows above the
   content; the redundant jump-nav and foot are dropped (the bar carries account
   and theme). Scoped inside the query, so desktop is untouched. */
@media (max-width:820px){
  html[data-topbar] .side{position:static;height:auto;min-height:0;
    border:0;box-shadow:none;background:transparent;border-radius:0;padding:0;display:block}
  html[data-topbar] .side nav,html[data-topbar] .side .foot{display:none}
  html[data-topbar] .side-welcome{margin:0}
  html[data-topbar] .shell{gap:12px;padding:12px 12px 0}
  html[data-topbar] .main{padding:.2rem 0 2rem}
}

/* Phone: the bar has more fixed controls than a narrow viewport can hold, so
   the whole page would pick up a horizontal scroll. Trim to what a phone needs
   (identity, search, theme, the primary action); the context zone keeps just an
   icon-sized Back button in the report viewer. */
@media (max-width:560px){
  .vtb{gap:.3rem;padding:0 .35rem}
  .vtb-brand img.b-mb{height:22px}
  .vtb-brand{padding:.3rem .35rem}
  /* secondary controls step aside on a phone; theme stays */
  .vtb #vtb-bell,.vtb #vtb-safe,.vtb .vtb-sep{display:none}
  .vtb-ic{width:34px;height:34px;border-radius:10px}
  .vtb-cta{padding:.44rem .8rem;font-size:.76rem}
  .vtb-ctx .backbtn{font-size:0;gap:0;padding:.44rem;border-radius:999px}
  .vtb-ctx .backbtn svg{width:16px;height:16px}
  .vtb-ctx .crumb{font-size:.8rem}
  .vtb-ctx .crumb small{display:none}
  .vtb-ctx .pdfbtn{font-size:0;padding:.44rem .6rem}

  /* one column on a phone: the panel grid's 300px minimum column would spill a
     small handset (<=320px). Force single-column so it never overflows, and
     keep any wide media inside its box. */
  html[data-topbar] .panelgrid{grid-template-columns:1fr}
  html[data-topbar] .main img,html[data-topbar] .main svg,
  html[data-topbar] .main table{max-width:100%}
}

/* short utility pages (account, admin): plain ground, no bento gray */
html[data-topbar] body.vtb-plain{background:var(--vtb-bg)}

/* ---- public demo host: badge + booking CTA replace the account controls ---- */
.vtb-demo{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-size:.72rem;
  font-weight:650;letter-spacing:.02em;color:var(--vtb-ink-2);border:1px dashed var(--vtb-ink-3);
  border-radius:999px;padding:.4rem .8rem;flex:none}
.vtb-demo::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--vtb-accent)}
.vtb-cta{white-space:nowrap;font-size:.8rem;font-weight:700;color:#fff;background:var(--vtb-brand);
  border-radius:999px;padding:.5rem 1rem;text-decoration:none;flex:none;
  box-shadow:0 4px 14px rgba(10,125,156,.3)}
.vtb-cta:hover{filter:brightness(1.07)}
:root[data-theme="dark"] .vtb-cta{color:#08252e}
@media (max-width:840px){.vtb-demo{display:none}}

/* notification rows: what happened, when, and how much it matters */
.vtb-pop{max-height:70vh;overflow:auto}
.p-notice{display:flex;gap:.6rem;padding:.5rem .65rem;border-radius:10px;font-size:.82rem;
  color:var(--vtb-ink-2);align-items:flex-start}
.p-notice:hover{background:var(--vtb-soft)}
.p-notice .p-ico{flex:none;width:16px;height:16px;margin-top:.15rem}
.p-notice .p-ico svg{width:16px;height:16px}
.p-notice .p-tx{min-width:0}
.p-notice .p-tx small{display:block;font-size:.7rem;color:var(--vtb-ink-3);margin-top:.1rem}
.p-notice.p-stale .p-ico{color:var(--vtb-accent)}
.p-notice.p-pace .p-ico{color:#a06c00}
.p-notice.p-event .p-ico{color:var(--vtb-brand)}