:root {
  --navigation-width: var(--sidebar-width);
  --navigation-edge: var(--sidebar-border);
  --navigation-header-target: var(--size-24);
  --navigation-drawer-width: var(--sidebar-width);
  --navigation-drawer-gap: var(--space-2);
  --navigation-pin-background: var(--color-selected);
  --navigation-resize-transition: inline-size var(--duration-200) var(--ease-out);
  --navigation-content-transition: margin-inline-start var(--duration-200) var(--ease-out);
  --navigation-panel-transition: opacity var(--duration-200) var(--ease-out), visibility var(--duration-200);
  --navigation-panel-visible-opacity: var(--opacity-100);
  --navigation-panel-hidden-opacity: var(--opacity-0);
  --navigation-panel-width: calc(var(--navigation-width) - var(--sidebar-rail-width));
}

/* The shell places the shared component; the component still owns its rows. */
.desktop-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--navigation-width);
  transition: var(--navigation-resize-transition);
}
.desktop-sidebar:has(.sidebar__panel[aria-hidden="true"]) { inline-size: var(--sidebar-rail-width); }
.shell-content { margin-inline-start: var(--navigation-width); transition: var(--navigation-content-transition); }
.desktop-sidebar .sidebar__panel {
  flex: none;
  inline-size: var(--navigation-panel-width);
  opacity: var(--navigation-panel-visible-opacity);
  visibility: visible;
  transition: var(--navigation-panel-transition);
}
.desktop-sidebar .sidebar__panel[aria-hidden="true"] {
  opacity: var(--navigation-panel-hidden-opacity);
  visibility: hidden;
}
.shell-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  flex: none;
  background: var(--color-surface);
  border-color: var(--color-border);
}
.shell-header .breadcrumb__list { flex-wrap: nowrap; }
.shell-header .breadcrumb__item:not(:last-child) { flex: none; }
.shell-header .breadcrumb__text[aria-current="page"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-header .mobile-menu { display: none; }
.application-shell:has(.desktop-sidebar .sidebar__panel[aria-hidden="true"]) > .shell-content { margin-inline-start: var(--sidebar-rail-width); }
.desktop-sidebar > .sidebar, .navigation-drawer > .sidebar {
  --sidebar-width: 100%;
  --sidebar-height: 100%;
  --sidebar-radius: 0;
  --sidebar-border: 0;
  min-block-size: 0;
}
.desktop-sidebar { border-inline-end: var(--navigation-edge); }
.navigation-drawer {
  box-sizing: border-box;
  block-size: 100dvh;
  max-block-size: 100dvh;
  inline-size: min(var(--navigation-drawer-width), 100vw);
  max-inline-size: 100vw;
  margin: 0;
  padding: 0;
  border: var(--navigation-edge);
  background: var(--color-popover);
  color: var(--color-popover-foreground);
}
.navigation-drawer > .sidebar { flex: 1; }
.navigation-drawer > button { flex: none; margin: var(--navigation-drawer-gap); }
.sidebar__section { display: flex; flex-direction: column; gap: var(--sidebar-group-gap); }
.sidebar__section[hidden] { display: none; }
.sidebar__panel[hidden] { display: none; }
.sidebar__expand[aria-pressed="true"], .sidebar__collapse[aria-pressed="true"] {
  --button-background: var(--navigation-pin-background);
  --button-hover-background: var(--navigation-pin-background);
}
.sidebar__heading:has(.sidebar__collapse) {
  justify-content: space-between;
  padding-inline-end: var(--sidebar-row-inline-padding);
}
.sidebar__collapse {
  --control-target-size: var(--navigation-header-target);
  --button-padding: 0;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .desktop-sidebar, .desktop-sidebar .sidebar__panel, .shell-content { transition: none; }
}
@media (width <= 40rem) {
  .shell-header .breadcrumb__item:not(:last-child),
  .shell-header .breadcrumb__separator { display: none; }
}
@media (width < 60rem) {
  .desktop-sidebar { display: none; }
  .shell-header .mobile-menu { display: inline-flex; flex: none; }
  .shell-content, .application-shell:has(.desktop-sidebar .sidebar__panel[aria-hidden="true"]) > .shell-content { margin-inline-start: 0; }
  .navigation-drawer .sidebar__collapse, .navigation-drawer .sidebar__expand { display: none; }
}