.workspace {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--font-size-body);
}

.header-bar {
  min-height: var(--header-height);
  flex: none;
  display: grid;
  grid-template-areas: "brand modes spacer globals";
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0;
  row-gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--space-border) solid var(--color-divider);
  background: var(--color-bg);
}

[data-appearance="light"] .header-bar {
  background: var(--color-surface);
}

.workspace-body {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
}

.workspace-main {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pane-grid {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns:
    minmax(var(--pane-min-width), var(--input-pane-percent, 50%))
    minmax(var(--pane-min-width), var(--output-pane-percent, 50%));
}

.workspace-pane.pane-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: var(--layer-fullscreen);
  border: 0;
  background: var(--color-bg);
}

.workspace-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: var(--space-border) solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}

[data-appearance="light"] .workspace-pane {
  background: var(--color-surface);
}

@media (max-width: 767px) {
  .pane-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(var(--tablet-pane-min-width), 1fr));
    overflow-y: auto;
  }

  .status-row {
    gap: var(--space-3);
  }

  .command-hint {
    display: none;
  }
}

@media (max-width: 680px) {
  .header-bar {
    grid-template-areas:
      "brand modes"
      "globals globals";
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-3);
  }

  .mode-switcher {
    margin-inline-start: 0;
  }

  .mode-switch-button {
    min-height: var(--control-height);
    padding-inline: var(--space-2);
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .header-actions {
    min-width: 0;
    margin-inline-start: auto;
  }

  .pane-grid {
    overflow-x: hidden;
    overflow-y: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .workspace-pane {
    grid-column: auto;
    border-right: 0;
    border-bottom: var(--space-border) solid var(--color-divider);
  }

  .status-row {
    overflow-x: auto;
  }

  .status-row.output-status {
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
    overflow-x: hidden;
  }

  .output-status .status-push {
    margin-inline-start: 0;
  }
}

@media (max-width: 420px) {
  .header-bar {
    grid-template-areas:
      "brand"
      "modes"
      "globals";
    grid-template-columns: minmax(0, 1fr);
  }

  .mode-switcher {
    justify-self: start;
  }
}

@media (max-width: 360px) {
  .header-bar {
    column-gap: var(--space-2);
    padding-inline: var(--space-2);
  }

  .brand-lockup {
    gap: var(--space-2);
  }
}