/* ===========================================================================
   nav-vscode.css · idiom: a vertical activity bar (repo links = activities) +
   an editor-tab + breadcrumb strip on top, and a blue status bar at the bottom.
   Active only when body[data-nav="vscode"].
   =========================================================================== */
body[data-nav="vscode"] header.nav-top { background: var(--bg); border-bottom: 0; }

/* activity bar (the fixed left rail) */
aside.nav-rail { justify-content: space-between; }
.vsc-rail-top, .vsc-rail-bottom { display: flex; flex-direction: column; }
.vsc-act {
  display: flex; align-items: center; justify-content: center;
  width: var(--chrome-left, 48px); height: 48px; position: relative;
  border: 0; background: transparent; color: var(--chrome-muted); cursor: pointer;
}
.vsc-act:hover { color: var(--chrome-fg); text-decoration: none; }
.vsc-act.is-active { color: var(--chrome-fg); }
.vsc-act.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--chrome-accent); }
.vsc-act .ic { width: 24px; height: 24px; stroke-width: 1.2; }

/* editor tab row */
.vsc-tabs { display: flex; align-items: stretch; height: 35px; background: var(--bg-inset); }
.vsc-tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 0.82rem; color: var(--fg-muted); border-right: 1px solid var(--border); }
.vsc-tab.is-active { background: var(--bg); color: var(--fg); box-shadow: inset 0 2px 0 var(--chrome-accent); }
.vsc-tab-ic { display: inline-flex; color: var(--chrome-accent); }
.vsc-tab-ic .ic { width: 15px; height: 15px; }
.vsc-tab-x { opacity: 0.6; font-size: 0.95rem; line-height: 1; }

/* breadcrumb strip */
.vsc-breadcrumbs { display: flex; align-items: center; gap: 1px; padding: 4px 16px; background: var(--bg); border-top: 1px solid var(--border); font-size: 0.8rem; }
.vsc-crumb { display: flex; align-items: center; gap: 5px; color: var(--fg-muted); padding: 1px 5px; border-radius: 4px; }
.vsc-crumb:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.vsc-crumb.cur { color: var(--fg); }
.vsc-bc-ic { display: inline-flex; color: var(--fg-muted); }
.vsc-bc-ic .ic { width: 14px; height: 14px; }
.vsc-bc-sep { display: inline-flex; color: var(--fg-faint); }
.vsc-bc-sep .ic { width: 14px; height: 14px; }

/* status bar (blue) */
.vsc-status { display: flex; align-items: stretch; height: 100%; font-size: 0.74rem; }
.vsc-sb-grp { display: flex; align-items: stretch; }
.vsc-sb-item { display: flex; align-items: center; gap: 5px; padding: 0 9px; color: var(--statusbar-fg); }
.vsc-sb-item:hover { background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.vsc-sb-item .ic { width: 13px; height: 13px; }
.vsc-sb-fill { flex: 1; }
.vsc-status .picker { padding: 0 8px; }
.vsc-status .picker-theme, .vsc-status .picker-mode { border-color: rgba(255, 255, 255, 0.4); }
.vsc-status .picker-mode:hover, .vsc-status .picker-theme:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); }