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

.workspace-context-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
}

.workspace-context-header:has(.workspace-banner) {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

.workspace-context-header > div {
  min-width: 0;
}

.workspace-context-header h1,
.workspace-context-header p {
  margin: 0;
  overflow-wrap: anywhere;
}

.workspace-context-header h1 {
  font-size: 1.35rem;
}

.workspace-context-header p {
  color: var(--sub);
  font-size: 0.78rem;
}

.workspace-banner {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 28px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--surface);
}

.workspace-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 5px;
  color: var(--sub);
}

.workspace-tabs img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.workspace-tabs a:hover,
.workspace-tabs a[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
}

.workspace-tabs a[aria-current="page"] {
  font-weight: 700;
}

.workspace-home,
.workspace-detail,
.workspace-settings,
.memory-page {
  display: grid;
  gap: 22px;
  max-width: 820px;
}

.memory-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  align-items: end;
  gap: 12px 28px;
}

.memory-header > div,
.memory-scope,
.memory-entry,
.memory-entry strong,
.memory-entry span {
  min-width: 0;
}

.memory-header h2,
.memory-header p {
  margin: 0;
  overflow-wrap: anywhere;
}

.memory-header p {
  margin-top: 5px;
  color: var(--sub);
  font-size: 0.84rem;
}

.memory-usage {
  display: grid;
  gap: 6px;
}

.memory-usage strong {
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.memory-usage meter {
  width: 100%;
}

.memory-scopes {
  display: grid;
  gap: 24px;
}

.memory-scope {
  border-top: 1px solid var(--surface);
}

.memory-scope > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 11px 4px 7px;
}

.memory-scope h3,
.memory-scope header span {
  margin: 0;
  overflow-wrap: anywhere;
}

.memory-scope h3 {
  font-size: 0.9rem;
}

.memory-scope header span,
.memory-entry span {
  color: var(--sub);
  font-size: 0.76rem;
}

.memory-entry-list {
  display: grid;
}

.memory-entry {
  display: grid;
  gap: 3px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--surface);
  color: var(--text);
}

.memory-entry strong,
.memory-entry span {
  overflow-wrap: anywhere;
}

.memory-clear {
  border-top: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
}

.memory-clear summary {
  padding: 12px 4px;
  cursor: pointer;
  color: var(--name);
  font-weight: 700;
}

.memory-clear > div {
  padding: 0 4px 16px;
}

.memory-clear p {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.memory-clear form {
  display: grid;
  gap: 8px;
  max-width: 460px;
}

.memory-clear select,
.memory-clear input {
  width: min(100%, 460px);
}

.workspace-settings-form {
  display: grid;
  gap: 16px;
  max-width: 580px;
  padding: 16px 0;
  border-top: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
}

.workspace-settings-form > .action-button {
  justify-self: start;
}

.workspace-setting,
.workspace-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}

.workspace-setting span,
.workspace-account div {
  min-width: 0;
}

.workspace-setting strong,
.workspace-setting small {
  display: block;
  overflow-wrap: anywhere;
}

.workspace-setting small,
.workspace-account p {
  margin: 3px 0 0;
  color: var(--sub);
}

.workspace-field {
  display: grid;
  gap: 6px;
}

.workspace-field select,
.workspace-field input {
  width: min(100%, 360px);
}

.workspace-account {
  max-width: 580px;
  padding-top: 4px;
}

.workspace-account h3,
.workspace-account p {
  margin-top: 0;
  overflow-wrap: anywhere;
}

.workspace-intro {
  max-width: 680px;
}

.workspace-intro h2,
.workspace-intro p {
  margin: 0;
  overflow-wrap: anywhere;
}

.workspace-intro h2 {
  font-size: 1.08rem;
}

.workspace-intro p {
  margin-top: 5px;
  color: var(--sub);
  font-size: 0.84rem;
}

.workspace-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border-top: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
}

.workspace-status div {
  min-width: 0;
  padding: 13px 12px 13px 0;
}

.workspace-status strong,
.workspace-status span {
  display: block;
}

.workspace-status span {
  color: var(--sub);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.workspace-home-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}

.workspace-home-actions a {
  font-weight: 700;
}

.workspace-owner-actions {
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--surface);
}

.workspace-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.workspace-section-heading > div {
  min-width: 0;
}

.workspace-section-heading h2,
.workspace-section-heading p {
  margin: 0;
  overflow-wrap: anywhere;
}

.workspace-section-heading p {
  color: var(--sub);
  font-size: 0.8rem;
}

.workspace-collection {
  display: grid;
  border-top: 1px solid var(--surface);
}

.workspace-collection > a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 10px;
  min-width: 0;
  padding: 13px 4px;
  border-bottom: 1px solid var(--surface);
  color: var(--text);
}

.workspace-collection > a img {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
}

.workspace-collection > a strong,
.workspace-collection > a span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.workspace-collection > a span {
  color: var(--sub);
  font-size: 0.8rem;
}

.workspace-capabilities,
.source-panel {
  padding: 13px 0;
  border-top: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
}

.workspace-capabilities h3,
.workspace-capabilities p {
  margin-top: 0;
}

.workspace-capabilities ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-capabilities li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
}

[data-capability-state="missing"] {
  color: var(--name);
  font-weight: 700;
}

.source-panel summary {
  cursor: pointer;
  font-weight: 700;
}

.source-panel pre,
.memory-value {
  max-height: 420px;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .workspace-context-header,
  .workspace-context-header:has(.workspace-banner) {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .workspace-context-header:not(:has(.workspace-banner)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-context-header .status-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .workspace-banner {
    width: 48px;
    height: 48px;
  }

  .workspace-section-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-section-heading .mini-button {
    justify-self: start;
  }

  .workspace-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .memory-scope > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-setting,
  .workspace-account {
    align-items: flex-start;
    flex-direction: column;
  }
}