/**
 * First-paint app shell — Simplon Norm via @font-face in index.html (preloaded).
 * Kept separate from the JS bundle so sidebar chrome is stable before /dashboard hydrates.
 */
:root {
  --app-shell-font: "Simplon Norm", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Own compositor layer — dashboard mass-reveal must not repaint the sidebar. */
.app-layout-sidebar {
  contain: layout style paint;
  isolation: isolate;
  transform: translateZ(0);
}

.app-layout-main {
  contain: layout style;
  min-width: 0;
}

/* Layout containment only — paint containment breaks CSS/SVG entrance animations. */
.dashboard-page-root {
  contain: layout;
}

.app-shell-brand-mark {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  object-fit: contain;
}

/* Mirrors text-product-id-md */
.app-shell-brand-id {
  font-family: var(--app-shell-font);
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: hsl(var(--sidebar-foreground));
}

/* Mirrors text-product-name-sm */
.app-shell-brand-name {
  margin-top: 0.125rem;
  font-family: var(--app-shell-font);
  font-size: 1rem;
  line-height: 1;
  font-weight: 500;
  color: hsl(var(--sidebar-foreground));
}

/* Mirrors text-note section eyebrows */
.app-sidebar-section-label {
  margin: 0;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-family: var(--app-shell-font);
  font-size: 0.75rem;
  line-height: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--sidebar-foreground) / 0.6);
}

.app-shell-nav-link {
  font-family: var(--app-shell-font);
  font-size: 0.875rem;
  font-weight: 400;
  transition: none;
}

.app-shell-nav-link--active {
  font-weight: 400;
}

.app-shell-header-search {
  transition: none !important;
}