.app-shell {
  --detail-drawer-width: clamp(540px, 34vw, 660px);
  --workbench-width: 1680px;
  --workbench-frame-width: min(100vw, var(--workbench-width));
  --workbench-offset: max(0px, calc((100vw - var(--workbench-width)) / 2));
  --primary-pane-width: calc(var(--workbench-frame-width) - var(--detail-drawer-width));
  min-height: 100vh;
}

.l-section {
  padding-block: var(--section-pad, 56px);
  padding-inline: var(--page-pad, var(--space-8));
}

.l-container {
  width: min(100%, var(--container, 1040px));
  margin-inline: auto;
}

.l-stack {
  display: grid;
  gap: var(--gap, var(--space-4));
}

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--align, center);
  justify-content: var(--justify, flex-start);
  gap: var(--gap, var(--space-3));
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
  gap: var(--gap, var(--space-4));
}

.l-split {
  display: grid;
  grid-template-columns: minmax(0, var(--split-left, 1fr)) minmax(0, var(--split-right, 1fr));
  gap: var(--gap, var(--space-4));
}

.app-topbar {
  height: 64px;
  padding-inline: var(--page-pad, var(--space-8));
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-canvas) 92%, var(--color-surface));
}

.app-topbar-inner {
  height: 100%;
  --justify: space-between;
  --gap: var(--space-5);
}

.app-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-wordmark {
  font: 700 1.06rem var(--font-sans);
}

.app-kicker {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.app-workspace {
  min-width: 0;
}

.app-primary-pane {
  --section-pad: 56px;
  min-width: 0;
  overflow-x: hidden;
  transition: width 180ms ease;
}

@media (min-width: 961px) {
  .app-shell.has-detail-drawer .app-topbar {
    padding-left: calc(var(--workbench-offset) + var(--space-8));
    padding-right: calc(100vw - var(--workbench-offset) - var(--primary-pane-width) + var(--space-8));
  }

  .app-shell.has-detail-drawer .app-topbar-inner {
    width: min(calc(100% - var(--space-8)), var(--container, 1040px));
    margin-left: auto;
    margin-right: var(--space-8);
  }

  .app-workspace.has-detail-drawer {
    width: var(--workbench-frame-width);
    height: calc(100vh - 64px);
    margin-inline: auto;
    overflow: hidden;
  }

  .app-workspace.has-detail-drawer .app-primary-pane {
    width: var(--primary-pane-width);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    --page-pad: var(--space-8);
  }

  .app-workspace.has-detail-drawer .l-container {
    width: min(calc(100% - var(--space-8)), var(--container, 1040px));
    margin-left: auto;
    margin-right: var(--space-8);
  }
}

.target-screen {
  min-width: 0;
}

@media (max-width: 780px) {
  .l-grid,
  .l-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .app-topbar {
    --page-pad: var(--space-5);
  }

  .app-topbar-note {
    display: none;
  }

  .app-primary-pane {
    --page-pad: var(--space-5);
    --section-pad: var(--space-5);
  }
}