.flag-stripe {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--flag-stripe);
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-sm);
  left: var(--space-sm);
  transform: translateY(-200%);
  background: var(--color-primary);
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
}
.skip-link:focus { transform: translateY(0); }
.sidebar {
  position: fixed;
  z-index: 60;
  top: 3px;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md);
  transition: width .15s ease, transform .15s ease;
}
.brand {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}
.brand-mark {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary);
}
.nav { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-lg); overflow: auto; }
.nav-label {
  margin: var(--space-lg) var(--space-md) var(--space-xs);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nav-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-item.active { background: var(--color-primary-ghost); color: var(--color-primary-hover); }
.rail-toggle {
  margin-top: auto;
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
}
.topbar {
  position: fixed;
  z-index: 50;
  top: 3px;
  right: 0;
  left: var(--sidebar-width);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-2xl);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  transition: left .15s ease;
}
.main-content {
  max-width: var(--content-max);
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + var(--space-2xl)) var(--space-2xl) var(--space-5xl);
  transition: margin-left .15s ease;
}
.breadcrumbs { color: var(--text-tertiary); font-size: 12px; margin-bottom: var(--space-lg); }
.scope-chip {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-card);
}
.scope-chip label { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.scope-chip select { min-height: 32px; border: 0; padding: 0; background: transparent; font-size: 13px; }
.command-trigger, .top-icon, .hamburger {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
}
.global-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.global-search span { color: var(--text-tertiary); font-size: 12px; }
.global-search input { width: 240px; min-height: 38px; }
.user-pill {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  color: var(--text-secondary);
}
.user-pill span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 12px;
}
.sidebar-collapsed .sidebar { width: var(--sidebar-rail); }
.sidebar-collapsed .brand-text, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-item span { display: none; }
.sidebar-collapsed .topbar { left: var(--sidebar-rail); }
.sidebar-collapsed .main-content { margin-left: var(--sidebar-rail); }
.hamburger, .bottom-tabs { display: none; }
.bottom-tabs {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-xs) max(var(--space-sm), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--space-sm), env(safe-area-inset-left));
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}
.bottom-tabs a {
  min-height: 44px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: var(--text-secondary);
  font-size: 11px;
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); width: min(86vw, var(--sidebar-width)); }
  .drawer-open .sidebar { transform: translateX(0); }
  .topbar { left: 0; padding: 0 var(--space-md); }
  .main-content { margin-left: 0; padding: calc(var(--topbar-height) + var(--space-lg)) var(--space-md) calc(var(--space-5xl) + var(--space-xl)); }
  .hamburger { display: inline-grid; place-items: center; }
  .global-search { display: none; }
  /* Issue 345: the chip shrinks, but a flex item defaults to min-width:auto, so the
     <select> kept its full content width and rendered over the controls to its
     right. Let it shrink and truncate instead. The "Scope" label is dropped
     here because the selected value ("All projects") already names the control,
     and at 375px the label alone consumed the chip's whole width — leaving the
     select collapsed to zero. */
  .scope-chip { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .scope-chip label { display: none; }
  .scope-chip select {
    min-width: 6ch;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .user-pill b { display: none; }
  /* Keep the command palette / global-search trigger reachable on mobile
     (issue 142): it is data-command-open, so tapping opens the palette whose
     input drives the cross-entity search — Cmd/Ctrl+K alone is unusable on a
     phone, and every desktop action must have a mobile path. */
  .command-trigger { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .bottom-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
}

/* Breadcrumb trail links + separator (issue 142) */
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumbs .crumb-sep { margin: 0 var(--space-xs); color: var(--text-tertiary); }
.breadcrumbs [aria-current="page"] { color: var(--text-primary); }
/* Command-palette entity result badge (issue 142 global search) */
.command-results .cmd-type {
  display: inline-block;
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-inverse);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-right: var(--space-xs);
  vertical-align: middle;
}
.command-results small { color: var(--text-tertiary); }