/* Application composition: navigation owns its rail padding, this shell owns
   the inset, and workspace-content owns the only page gutter. */
:where([data-ui="workspace-content"]) {
  padding: calc(var(--nk-space) * 4);
}
@media (width >= 48rem) {
  :where([data-ui="inset-workspace"]) {
    --workspace-inset: calc(var(--nk-space) * 3);
    --nk-app-shell-background: color-mix(
      in oklab,
      var(--nk-color-muted) 15%,
      var(--nk-color-canvas)
    );
    --nk-app-shell-sidebar-background: transparent;
    block-size: 100vh;
    block-size: 100dvh;
    padding: var(--workspace-inset) var(--workspace-inset) var(--workspace-inset) 0;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0;
    overflow: hidden;
  }
  :where([data-ui="inset-workspace"] > [data-slot="app-shell-sidebar"]) {
    position: static;
    block-size: 100%;
    border: 0;
  }
  :where(
    [data-ui="inset-workspace"]
      > [data-slot="app-shell-header"]
      > [data-slot="app-shell-brand"]
  ) {
    padding-inline: calc(var(--nk-space) * 6);
    border: 0;
  }
  :where([data-ui="inset-workspace"] > [data-slot="app-shell-main"]) {
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--nk-color-surface);
    border: var(--nk-border-width) solid var(--nk-color-border);
    border-radius: var(--nk-radius-xl);
    box-shadow: var(--nk-shadow-sm);
  }
  :where(
    [data-ui="inset-workspace"][data-layout="sidebar"]
      > [data-slot="app-shell-header"]
      > [data-slot="app-shell-topbar"]
  ) {
    padding: calc(var(--nk-space) * 6);
    background: var(--nk-color-surface);
    border: var(--nk-border-width) solid var(--nk-color-border);
    border-block-end: 0;
    border-radius: var(--nk-radius-xl) var(--nk-radius-xl) 0 0;
  }
  :where(
    [data-ui="inset-workspace"][data-layout="sidebar"]
      > [data-slot="app-shell-main"]
  ) {
    border-block-start: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }
  :where([data-ui="workspace-content"]) {
    padding: calc(var(--nk-space) * 6);
  }
}

@media (width < 48rem) {
  :where(
    [data-ui="inset-workspace"]
      > [data-slot="app-shell-header"]
      > [data-slot="app-shell-brand"]
  ) {
    display: none;
  }
  :where(
    [data-ui="inset-workspace"]
      [data-slot="app-shell-topbar"]
      > [data-nk="toolbar"]
  ) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  :where([data-ui="inset-workspace"] [data-slot="toolbar-trailing"]) {
    margin-inline-start: auto;
    justify-content: flex-end;
    flex-shrink: 0;
  }
}

/* Embedded gallery examples use a bounded canvas; isolated previews keep the
   application's viewport-height frame. This rule is not application CSS. */
:where(
  [data-gallery="example"]:not([data-gallery-responsive-preview])
    [data-gallery="example-canvas"]
    [data-ui="inset-workspace"][data-gallery-shell-preview]
) {
  block-size: 32rem;
  min-block-size: 32rem;
}