/* Production Fieldbook shell: one left sidebar on every page, plus the slim Vault top bar.
   Matches the Gear Room rail: dark, small uppercase group labels, line icons with labels, the current row lit.
   No gradients, no shadows, no colored dots or edge bars. The sidebar is dark in Day and Night; phase names are
   color tapes and the current row's icon takes its phase color. The top bar is the panel surface and follows the theme. */
@font-face { font-family: Jost; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Jost[wght].ttf') format('truetype'); }

.vs-app {
  --vs-w: 240px; --vs-rail: 64px; --vs-top: 52px; --vs-hit: 44px; --vs-row: 36px;
  --vs-bg: #121416; --vs-ink: #f4f3ee; --vs-soft: #bbc1bc; --vs-line: rgba(255, 255, 255, .1);
  --vs-hover: rgba(255, 255, 255, .06); --vs-on: rgba(255, 255, 255, .12); --vs-accent: #46e6f2;
  --vs-ui: Jost, 'Jost Fallback', Arial, sans-serif;
}
.vs-app [hidden] { display: none !important; }
.vs-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.vs-skip { position: absolute; left: -9999px; top: 0; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--ws-sheet, #fff); color: var(--ws-ink, #121416); border: 1px solid currentColor; font: 500 15px/1.2 var(--vs-ui); }
.vs-skip:focus { left: 12px; top: 8px; }

/* ---------- page gutter: full sidebar, icon rail under 1200px (or the page's own width), drawer under 900px ---------- */
@media screen {
  body.vs-app { padding-left: var(--vs-w); box-sizing: border-box; }
  body.vs-app[data-vs-mode='rail'] { padding-left: var(--vs-rail); }
}
@media screen and (max-width: 1199.98px) { body.vs-app:not([data-vs-mode]) { padding-left: var(--vs-rail); } }
@media screen and (max-width: 1399.98px) { body.vs-app[data-shell-full='1400']:not([data-vs-mode]) { padding-left: var(--vs-rail); } }
@media screen and (max-width: 899.98px) { body.vs-app, body.vs-app[data-vs-mode] { padding-left: 0; } }

/* ---------- sidebar ---------- */
#vaultSide { position: fixed; inset: 0 auto 0 0; width: var(--vs-w); z-index: 120; box-sizing: border-box; display: flex; flex-direction: column; background: var(--vs-bg); color: var(--vs-ink); border-right: 1px solid var(--vs-line); font: 400 15px/1.3 var(--vs-ui); -webkit-font-smoothing: antialiased; }
#vaultSide *, .vs-top *, .vs-mbar * { box-sizing: border-box; }
#vaultSide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
#vaultSide a, #vaultSide button { font: inherit; color: inherit; }
/* Page styles for buttons and selects (44px minimums, rounded corners, shadows) stop at the sidebar; each control sets its own. */
#vaultSide button, #vaultSide select { min-height: 0; margin: 0; box-shadow: none; text-transform: none; }
#vaultSide .vs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#vaultSide a:focus-visible, #vaultSide button:focus-visible, #vaultSide select:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: -2px; }

#vaultSide .vs-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 56px; padding: 6px 8px 4px 20px; flex: none; }
#vaultSide .vs-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--vs-ink); text-decoration: none; font-weight: 600; letter-spacing: .22em; font-size: 14px; }
#vaultSide .vs-brand-mark { display: none; }
.vs-iconbtn { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--vs-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; border-radius: 6px; }
#vaultSide .vs-iconbtn:hover { color: var(--vs-ink); background: var(--vs-hover); }
#vaultSide .vs-close { display: none; }

#vaultSide .vs-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }

/* Rows: icon plus label, 36px tall, 44px on touch screens and in the drawer. */
#vaultSide .vs-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--vs-row); padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--vs-soft); text-decoration: none; text-align: left; font-weight: 500; font-size: 14.5px; line-height: 1.2; cursor: pointer; }
#vaultSide .vs-link:hover { color: var(--vs-ink); background: var(--vs-hover); }
#vaultSide .vs-link[aria-current='page'] { color: var(--vs-ink); background: var(--vs-on); font-weight: 600; }
#vaultSide .vs-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vaultSide .vs-ico { width: 18px; height: 18px; }

#vaultSide .vs-group { padding-top: 6px; }
#vaultSide .vs-group + .vs-group { margin-top: 8px; border-top: 1px solid var(--vs-line); padding-top: 10px; }
#vaultSide .vs-label { margin: 4px 10px 6px; font: 600 14px/1.2 var(--vs-ui); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--vs-soft); }

/* Project switcher */
#vaultSide .vs-switcher { position: relative; margin: 2px 0 4px; }
#vaultSide .vs-project { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 8px 4px 10px; border: 1px solid var(--vs-line); border-radius: 8px; background: transparent; color: var(--vs-ink); text-align: left; cursor: pointer; text-decoration: none; }
#vaultSide .vs-project:hover, #vaultSide .vs-project[aria-expanded='true'] { background: var(--vs-hover); border-color: rgba(255, 255, 255, .2); }
#vaultSide .vs-project-text { display: flex; flex-direction: column; flex: 1; gap: 1px; }
#vaultSide .vs-project-kicker { font: 600 14px/1.1 var(--vs-ui); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--vs-soft); }
#vaultSide .vs-project-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vaultSide .vs-ico-updown { width: 16px; height: 16px; color: var(--vs-soft); }
#vaultSide .vs-pmenu { margin-top: 4px; padding: 4px; border: 1px solid var(--vs-line); border-radius: 8px; max-height: 50vh; overflow-y: auto; }
#vaultSide .vs-pick-row[aria-current='true'] { color: var(--vs-ink); font-weight: 600; }
#vaultSide .vs-pick-all { border-top: 1px solid var(--vs-line); border-radius: 0 0 6px 6px; margin-top: 2px; }

/* Phases: one level of disclosure; the open one shows its tools. */
#vaultSide .vs-phase-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; margin-top: 6px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--vs-soft); font: 600 14px/1.2 var(--vs-ui) !important; font-variant-caps: all-small-caps !important; letter-spacing: .12em; cursor: pointer; }
#vaultSide .vs-phase-btn:hover { color: var(--vs-ink); }
/* Each phase name is a tape in its phase color; the current row's icon takes the same color. */
#vaultSide .vs-phase[data-phase='dev'] { --vs-ph: var(--ph-dev, #f2b64a); }
#vaultSide .vs-phase[data-phase='prep'] { --vs-ph: var(--ph-prep, #3fc7b6); }
#vaultSide .vs-phase[data-phase='shoot'] { --vs-ph: var(--ph-shoot, #f48a74); }
#vaultSide .vs-phase[data-phase='post'] { --vs-ph: var(--ph-post, #b79cf2); }
#vaultSide .vs-phase[data-phase='money'] { --vs-ph: var(--ph-money, #80cf8a); }
#vaultSide .vs-phase-btn > span { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 12px 2px 7px; background: var(--vs-ph); color: #121416; font: 600 14px/1.1 var(--vs-ui); font-variant-caps: normal; text-transform: uppercase; letter-spacing: .08em; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 22%, 100% 44%, calc(100% - 3px) 66%, 100% 86%, calc(100% - 4px) 100%, 0 100%); }
#vaultSide .vs-phase-btn[aria-expanded='false'] > span { background: transparent; color: var(--vs-soft); clip-path: none; }
#vaultSide .vs-phase-btn[aria-expanded='false']:hover > span { color: var(--vs-ink); }
#vaultSide .vs-phase .vs-link[aria-current='page'] .vs-ico { color: var(--vs-ph); }
#vaultSide .vs-ico-chev { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .vs-ico-chev { transition: transform .12s ease; } }
#vaultSide .vs-phase-btn[aria-expanded='true'] .vs-ico-chev { transform: rotate(90deg); }

/* Sub rows (Gear Room views, Vault home extras) */
#vaultSide .vs-sub { margin: 1px 0 2px; }
#vaultSide .vs-sublink { min-height: var(--vs-row); padding: 0 10px 0 24px; gap: 12px; font-size: 14.5px; }
#vaultSide .vs-sub .vs-link svg { width: 16px; height: 16px; stroke-width: 1.6; }
#vaultSide .g-views a[aria-current='page'] { color: var(--vs-ink); background: var(--vs-on); }
#vaultSide .vs-sub li:has(> a[hidden]) { display: none; }
#vaultSide .vs-count { margin-left: auto; font: 500 14px/1 var(--vs-ui); color: var(--vs-ink); font-variant-numeric: tabular-nums; }
#vaultSide .vs-count:empty { display: none; }
#vaultSide .vs-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 20px); min-height: 40px; margin: 0 10px 8px; padding: 0 10px; border: 1px solid var(--vs-line); border-radius: 8px; background: var(--vs-hover); color: var(--vs-soft); font: 500 14.5px/1 var(--vs-ui); cursor: pointer; flex: none; }
#vaultSide .vs-search:hover { color: var(--vs-ink); }
#vaultSide .vs-search .vs-text { flex: 1; text-align: left; }
#vaultSide .vs-search kbd { font: 500 14px/1 var(--vs-ui); border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; padding: 3px 5px; }

/* Foot: account, View as, Day and Night */
#vaultSide .vs-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 14px; border-top: 1px solid var(--vs-line); }
#vaultSide .vs-foot .vs-list { margin: 0 -10px; }
#vaultSide .vs-account { display: flex; flex-direction: column; gap: 2px; }
#vaultSide .vs-account-name { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; font-weight: 500; color: var(--vs-ink); }
#vaultSide .vs-account-acts { display: flex; flex-wrap: wrap; gap: 0 14px; padding-left: 28px; }
#vaultSide .vs-textbtn { min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--vs-soft); font: 500 14px/1.2 var(--vs-ui); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
#vaultSide .vs-textbtn:hover { color: var(--vs-ink); }
#vaultSide .vs-viewas { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--vs-soft); }
#vaultSide .vs-viewas select { min-height: 36px; min-width: 0; max-width: 120px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; background: var(--vs-bg); color: var(--vs-ink); font: 500 14px/1 var(--vs-ui); }
#vaultSide .vs-viewas option { color: #121416; background: #fff; }
#vaultSide .vs-note { margin: 0; font-size: 14px; line-height: 1.35; color: var(--vs-soft); }
#vaultSide .vs-viewing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 6px 10px; margin: 0 -10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--vs-ink); }
#vaultSide .vs-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#vaultSide .vs-theme { display: inline-flex; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; overflow: hidden; }
#vaultSide .vs-theme button { width: 40px; height: 36px; border: 0; background: transparent; color: var(--vs-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#vaultSide .vs-theme button:hover { color: var(--vs-ink); }
#vaultSide .vs-theme button[aria-pressed='true'] { background: var(--vs-ink); color: var(--vs-bg); }
#vaultSide .vs-theme .vs-ico { width: 17px; height: 17px; }
/* The Gear Room's own account controls, moved into the foot. */
#vaultSide .vs-foot .g-who { margin: 0; padding: 0; gap: 8px; font-size: 14px; color: var(--vs-soft); }
#vaultSide .vs-foot .g-who .g-as { gap: 4px; }
#vaultSide .vs-foot .g-who #signedInAs { color: var(--vs-ink); font-weight: 500; font-size: 14.5px; }
#vaultSide .vs-foot .g-who .g-btn.quiet { min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--vs-soft); font: 500 14px/1.2 var(--vs-ui); text-align: left; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; cursor: pointer; }
#vaultSide .vs-foot .g-who .g-btn.quiet:hover { color: var(--vs-ink); }
#vaultSide .vs-foot .g-who .g-sample { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--vs-ink); font: 600 14px/1.2 var(--vs-ui); font-variant-caps: all-small-caps; text-transform: none; letter-spacing: .12em; }
#vaultSide .vs-foot .g-who select { min-height: 36px; font-size: 14px; }

/* ---------- icon rail ---------- */
#vaultSide[data-mode='rail'] { width: var(--vs-rail); }
#vaultSide[data-mode='rail'] .vs-head { flex-direction: column; padding: 6px 0 4px; min-height: 0; }
#vaultSide[data-mode='rail'] .vs-brand-word { display: none; }
#vaultSide[data-mode='rail'] .vs-brand-mark { display: inline; font-size: 18px; letter-spacing: 0; font-weight: 700; }
#vaultSide[data-mode='rail'] .vs-scroll { padding: 0 6px 8px; }
#vaultSide[data-mode='rail'] .vs-text, #vaultSide[data-mode='rail'] .vs-label, #vaultSide[data-mode='rail'] kbd, #vaultSide[data-mode='rail'] .vs-ico-updown,
#vaultSide[data-mode='rail'] .vs-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#vaultSide[data-mode='rail'] .vs-link, #vaultSide[data-mode='rail'] .vs-project, #vaultSide[data-mode='rail'] .vs-search { justify-content: center; padding: 0; gap: 0; min-height: 40px; }
#vaultSide[data-mode='rail'] .vs-search { width: 44px; margin: 0 auto 8px; }
#vaultSide[data-mode='rail'] .vs-project { border-color: transparent; min-height: 44px; }
#vaultSide[data-mode='rail'] .vs-sublink { padding: 0; }
#vaultSide[data-mode='rail'] .vs-phase-btn { display: none; }
#vaultSide[data-mode='rail'] .vs-phase > .vs-list { display: flex !important; }
#vaultSide[data-mode='rail'] .vs-phase + .vs-phase, #vaultSide[data-mode='rail'] .vs-phases > li + .vs-phase { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vs-line); }
#vaultSide[data-mode='rail'] .vs-group + .vs-group { margin-top: 6px; padding-top: 6px; }
#vaultSide[data-mode='rail'] .vs-pmenu, #vaultSide[data-mode='rail'] .vs-viewas, #vaultSide[data-mode='rail'] .vs-note, #vaultSide[data-mode='rail'] .vs-account-acts,
#vaultSide[data-mode='rail'] .vs-viewing .vs-textbtn, #vaultSide[data-mode='rail'] .g-who { display: none; }
#vaultSide[data-mode='rail'] .vs-foot { padding: 8px 6px 12px; align-items: center; }
#vaultSide[data-mode='rail'] .vs-foot .vs-list { margin: 0; width: 100%; }
#vaultSide[data-mode='rail'] .vs-account-name { justify-content: center; }
#vaultSide[data-mode='rail'] .vs-viewing { margin: 0; padding: 4px; justify-content: center; }
#vaultSide[data-mode='rail'] .vs-viewing::before { content: 'VIEW'; font-size: 14px; font-variant-caps: all-small-caps; letter-spacing: .1em; }
#vaultSide[data-mode='rail'] .vs-theme { flex-direction: column; }

/* Opened out over the page (rail widths) or as the phone drawer */
#vaultSide[data-mode='open'] { width: min(300px, 86vw); }
body.vs-open #vaultSide { display: flex; }
.vs-scrim { position: fixed; inset: 0; z-index: 115; background: rgba(10, 12, 14, .45); }
@media (prefers-reduced-motion: no-preference) { body.vs-open #vaultSide { animation: vs-in .16s ease-out; } }
@keyframes vs-in { from { transform: translateX(-16px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Phone menu button, and a slim bar of our own where a page has no top bar */
.vs-menubtn { display: none !important; }
.vs-mbar { display: none; }
.vs-top .vs-iconbtn.vs-menubtn, [data-shell-menubar] .vs-menubtn { color: inherit; }

@media screen and (max-width: 899.98px) {
  #vaultSide { display: none; padding-top: 0; }
  #vaultSide .vs-close { display: inline-flex; color: var(--vs-ink); }
  #vaultSide .vs-collapse { display: none; }
  .vs-menubtn { display: inline-flex !important; }
  .vs-mbar { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 100; min-height: var(--vs-top); padding: 0 12px 0 4px; background: var(--vs-bg); color: var(--vs-ink); border-bottom: 1px solid var(--vs-line); }
  .vs-mbar .vs-menubtn { color: var(--vs-ink); }
  .vs-mbar-brand { color: var(--vs-ink); text-decoration: none; font: 600 14px/1 var(--vs-ui); letter-spacing: .22em; display: inline-flex; align-items: center; min-height: 44px; }
  .vs-mbar :focus-visible { outline: 2px solid var(--vs-accent); outline-offset: -2px; }
}
@media (max-width: 899.98px), (pointer: coarse) {
  #vaultSide .vs-link, #vaultSide .vs-sublink, #vaultSide .vs-phase-btn, #vaultSide .vs-project, #vaultSide .vs-search, #vaultSide .vs-textbtn, #vaultSide .vs-viewas select, #vaultSide .g-who .g-btn.quiet, #vaultSide .g-who select { min-height: 44px; }
  #vaultSide .vs-theme button { width: 44px; height: 44px; }
}
#vaultSide[data-mode='open'] .vs-link, #vaultSide[data-mode='open'] .vs-sublink, #vaultSide[data-mode='open'] .vs-phase-btn, #vaultSide[data-mode='open'] .vs-textbtn, #vaultSide[data-mode='open'] .vs-viewas select { min-height: 44px; }
#vaultSide[data-mode='open'] .vs-theme button { width: 44px; height: 44px; }

/* ---------- Vault top bar (script, bid, timeline, post) ---------- */
.vs-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: var(--vs-top); padding: 0 20px; background: var(--ws-panel, var(--ws-paper)); color: var(--ws-ink); border-bottom: 1px solid var(--ws-line); font: 400 15px/1.3 var(--ws-ui); }
.vs-top :focus-visible { outline: 2px solid var(--ws-ink); outline-offset: 2px; }
.vs-top .vs-iconbtn { color: inherit; }
.vs-top .vs-iconbtn .vs-ico { width: 22px; height: 22px; }

.vs-crumbs { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.vs-crumb-root { color: var(--ws-soft); white-space: nowrap; font-weight: 500; }
.vs-crumbs .vs-phase-tape { margin-right: 4px; }
.vs-crumb-sep { color: var(--ws-line-strong); }
.vs-crumb-now { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vs-crumbs:has(#vsContext:not([hidden])) .vs-crumb-page { color: var(--ws-soft); font-weight: 500; flex: none; }
.vs-crumb-kind { color: var(--ws-soft); font-size: 14px; white-space: nowrap; }

/* A quiet field that reads like text until you touch it. */
.vs-top .vs-quiet-input { min-width: 6ch; max-width: 34ch; width: auto; field-sizing: content; height: var(--vs-hit); padding: 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--ws-ink); font: 600 15px/1 var(--ws-ui); text-overflow: ellipsis; }
.vs-top .vs-quiet-input:hover { border-color: var(--ws-line); }
.vs-top .vs-quiet-input:focus { border-color: var(--ws-line-strong); background: var(--ws-sheet); outline: none; }
.vs-top .vs-quiet-input:focus-visible { outline: 2px solid var(--ws-ink); outline-offset: 1px; }
.vs-top .vs-quiet-select { height: var(--vs-hit); min-height: 0; width: auto; max-width: 34ch; min-width: 0; padding: 0 28px 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--ws-ink); font: 600 15px/1 var(--ws-ui); text-overflow: ellipsis; cursor: pointer; }
.vs-top .vs-quiet-select:hover { border-color: var(--ws-line); }
.vs-top .vs-quiet-select option, .vs-top .vs-quiet-select optgroup { color: var(--ws-ink); background: var(--ws-sheet); }
/* The document switcher is a compact chevron next to the editable title. */
.vs-top .vs-switch { width: var(--vs-hit); max-width: var(--vs-hit); min-width: var(--vs-hit); padding: 0; margin: 0; color: transparent; appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5b54' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / 20px no-repeat; }
:root[data-theme='night'] .vs-top .vs-switch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c0bb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }

.vs-actions { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vs-status { margin: 0 6px 0 0; font-size: 14px; color: var(--ws-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.vs-status strong { font-weight: 500; color: var(--ws-soft); }
.vs-status .is-warn { color: var(--ws-ink); font-weight: 600; text-decoration: underline; }
.vs-top .vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--vs-hit); padding: 0 14px; border: 1px solid var(--ws-line); border-radius: 2px; background: transparent; color: var(--ws-ink); font: 500 15px/1 var(--ws-ui); cursor: pointer; white-space: nowrap; text-decoration: none; flex: none; }
.vs-top .vs-btn:hover { background: var(--ws-sunk); }
.vs-top .vs-btn .vs-ico { width: 18px; height: 18px; }
.vs-top .vs-btn-primary { background: var(--ws-accent); border-color: var(--ws-accent); color: var(--ws-on-accent); font-weight: 600; }
.vs-top .vs-btn-primary:hover { background: var(--ws-accent); filter: brightness(.96); }
.vs-top .vs-more .vs-ico-dots { display: none; }
.vs-top .vs-more[aria-expanded='true'] { background: var(--ws-sunk); border-color: var(--ws-line-strong); }

.vs-menu { position: relative; flex: none; }
.vs-top .vs-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 248px; max-width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto; padding: 6px 0; background: var(--ws-sheet); border: 1px solid var(--ws-line-strong); display: flex; flex-direction: column; }
.vs-top .vs-menu-list [role='menuitem'] { display: flex; align-items: center; width: 100%; min-height: var(--vs-hit); padding: 0 16px; border: 0; background: transparent; color: var(--ws-ink); font: 400 15px/1.2 var(--ws-ui); text-align: left; cursor: pointer; white-space: nowrap; }
.vs-top .vs-menu-list [role='menuitem']:hover, .vs-top .vs-menu-list [role='menuitem']:focus { background: var(--ws-sunk); outline: none; }
.vs-top .vs-menu-list [role='menuitem']:focus-visible { outline: 2px solid var(--ws-ink); outline-offset: -2px; }
.vs-top .vs-menu-list [role='separator'] { height: 1px; margin: 6px 0; background: var(--ws-line); }
.vs-menu-note { display: none; margin: 4px 16px 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ws-line); font-size: 14px; line-height: 1.35; color: var(--ws-soft); white-space: normal; }
.vs-menu-head { margin: 6px 16px 2px; font: 600 14px/1.2 var(--ws-ui); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--ws-soft); }

/* File inputs behind menu items: present for the page script, never seen. */
.vs-file { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; min-width: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; }

@media screen and (max-width: 899.98px) {
  .vs-top { padding: 0 8px 0 4px; gap: 6px; }
  .vs-crumb-root, .vs-crumb-root + .vs-crumb-sep, .vs-crumb-kind { display: none; }
  .vs-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs-menu-note { display: block; }
  .vs-actions { flex: none; }
  .vs-top .vs-quiet-input { min-width: 4ch; }
  .vs-top .vs-btn { padding: 0 12px; }
}
@media (max-width: 480px) {
  .vs-actions { gap: 4px; }
  .vs-top .vs-more .vs-more-text, .vs-top .vs-more .vs-ico-down { display: none; }
  .vs-top .vs-more .vs-ico-dots { display: block; width: 22px; height: 22px; }
  .vs-top .vs-more { width: 44px; padding: 0; border-color: transparent; }
}

/* ---------- pages that had a navigation of their own ---------- */
@media screen {
  /* Directory: the sidebar replaces the old icon rail and the in-page section tabs (Directory, Templates, Permits). */
  body.vs-app.fieldbook-redesign { padding-left: var(--vs-w); }
  body.vs-app.fieldbook-redesign[data-vs-mode='rail'] { padding-left: var(--vs-rail); }
  .vs-app.fieldbook-redesign .section-nav { display: none; }
  .vs-app.fieldbook-redesign #themeToggle { display: none !important; }
  /* Map */
  .vs-app.fbm .fbm-main { margin-left: 0; }
  .vs-app.fbm .fbm-head .fb-theme-icons { display: none; }
  /* Gear Room: the old rail and phone tabs give way to the sidebar. */
  .vs-app.gear .g-nav, .vs-app.gear .g-tabbar, .vs-app.gear .g-top .g-brand-old { display: none !important; }
  .vs-app.gear .g-main { margin-left: auto; }
  /* Vault home: the workspace's own rail and the header's account row move into the sidebar. */
  .vs-app .ws-rail { display: none !important; }
  .vs-app .ws-layout { grid-template-columns: 280px minmax(0, 1fr) 280px; }
  .vs-app .ws-settings { left: calc(var(--vs-w) + 16px); }
  .vs-app[data-vs-mode='rail'] .ws-settings { left: calc(var(--vs-rail) + 16px); }
  .vs-app .mast .who, .vs-app .mast .vault-theme-controls { display: none !important; }
}
@media screen and (max-width: 1399.98px) { body.vs-app.fieldbook-redesign[data-shell-full='1400']:not([data-vs-mode]) { padding-left: var(--vs-rail); } }
/* Gear Room: with the slim rail there is room for the side panel beside the list, but it only stays in view from
   1220px (gear.css), so below that it stacks under the list as before. */
@media screen and (min-width: 900px) and (max-width: 1219.98px) { .vs-app.gear .g-split > .g-side { flex-basis: 100%; } }
@media screen and (min-width: 1600px) { .vs-app .ws-layout { grid-template-columns: 300px minmax(0, 1fr) 300px; } }
@media screen and (max-width: 1199.98px) { .vs-app .ws-layout { grid-template-columns: 250px minmax(0, 1fr); } }
@media screen and (max-width: 899.98px) {
  body.vs-app.fieldbook-redesign, body.vs-app.fieldbook-redesign[data-vs-mode] { padding: 0; }
  .vs-app.fieldbook-redesign > header .vs-menubtn { margin-left: -8px; }
  .vs-app.fbm .fbm-main { height: calc(100dvh - var(--vs-top)); }
  .vs-app.gear .g-top { padding-left: 4px; }
  .vs-app .ws-layout { display: block; padding-bottom: 0; }
  .vs-app .ws-settings { left: 16px; right: 16px; bottom: 16px; }
}

/* ---------- print: the shell never prints ---------- */
@media print {
  #vaultSide, .vs-top, .vs-scrim, .vs-skip, .vs-mbar, .vs-menubtn { display: none !important; }
  body.vs-app { padding-left: 0 !important; }
}