@layer components {
  .mono-label,
  .eyebrow,
  .category-label,
  .card__category,
  .stat-card__label,
  .breadcrumb,
  .workflow-tabs__count,
  .usage-bar__label,
  .table th,
  .badge,
  .command-palette__result-status {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
  }

  .card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-card);
    box-shadow: var(--shadow-card);
  }

  .card--elevated {
    box-shadow: var(--shadow-elevated);
  }

  .card--typed {
    border-left-width: 4px;
  }

  .card--trigger {
    border-left-color: var(--color-trigger-border);
    background: linear-gradient(
      180deg,
      var(--color-canvas-raised) 0%,
      #fffdf9 100%
    );
  }

  .card--step {
    border-left-color: var(--color-step-border);
    background: linear-gradient(
      180deg,
      var(--color-canvas-raised) 0%,
      #fafaff 100%
    );
  }

  .card--action {
    border-left-color: var(--color-action-border);
    background: linear-gradient(
      180deg,
      var(--color-canvas-raised) 0%,
      #f8fff9 100%
    );
  }

  .card--link,
  .resource-card--interactive,
  .resource-list__item {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
  }

  .card--link {
    cursor: pointer;
  }

  .card--link:hover,
  .card--link.card--highlighted,
  .resource-card--interactive:hover,
  .resource-list__item:hover {
    transform: translateY(-1px);
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-card-hover);
  }

  .card--highlighted {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.5625rem;
    padding: 0.1875rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: calc(var(--text-label-mono) - 0.0625rem);
    font-weight: 600;
    letter-spacing: 0.055em;
    background: var(--color-canvas-alt);
    color: var(--color-ink-medium);
  }

  .badge::before {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.8;
  }

  .badge.badge--pending {
    background: var(--color-warning-light);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
  }

  .badge.badge--running {
    background: var(--color-info-light);
    border-color: var(--color-info-border);
    color: var(--color-info);
  }

  .badge.badge--completed,
  .badge.badge--enabled {
    background: var(--color-positive-light);
    border-color: var(--color-positive-border);
    color: var(--color-positive);
  }

  .badge.badge--completed_with_failures {
    background: var(--color-warning-light);
    border-color: var(--color-warning-border);
    color: var(--color-warning);
  }

  .badge.badge--skipped {
    background: var(--color-muted-light);
    border-color: var(--color-muted-border);
    color: var(--color-ink-medium);
  }

  .badge.badge--failed,
  .badge.badge--disabled {
    background: var(--color-negative-light);
    border-color: var(--color-negative-border);
    color: var(--color-negative);
  }

  .badge.badge--lang-ruby {
    background: color-mix(in srgb, #cc342d 14%, var(--color-canvas-alt));
    border-color: color-mix(in srgb, #cc342d 38%, transparent);
    color: #b42318;
  }

  .badge.badge--lang-javascript {
    background: color-mix(in srgb, #f7df1e 48%, var(--color-canvas-alt));
    border-color: color-mix(in srgb, #ca8a04 45%, transparent);
    color: #713f12;
  }

  .badge.badge--lang-typescript {
    background: color-mix(in srgb, #3178c6 16%, var(--color-canvas-alt));
    border-color: color-mix(in srgb, #3178c6 42%, transparent);
    color: #1d4ed8;
  }

  .badge.badge--compact,
  .card--workflow .card__eyebrow .badge,
  .resource-card .card__eyebrow .badge,
  .resource-card__eyebrow-badges .badge,
  .workflow-stack__trailing .badge,
  .resource-stack__trailing .badge {
    min-height: 1.3125rem;
    padding: 0.125rem 0.58rem;
    gap: 0.25rem;
    font-size: calc(var(--text-label-mono) - 0.0625rem);
    font-weight: 600;
    letter-spacing: 0.055em;
    line-height: 1.25;
  }

  .badge.badge--compact::before,
  .card--workflow .card__eyebrow .badge::before,
  .resource-card .card__eyebrow .badge::before,
  .resource-card__eyebrow-badges .badge::before,
  .workflow-stack__trailing .badge::before,
  .resource-stack__trailing .badge::before {
    width: 0.28125rem;
    height: 0.28125rem;
  }

  .status-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-ink-medium);
    font-size: var(--text-small);
  }

  .status-inline__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
  }

  .status-inline--pending {
    color: var(--color-warning);
  }
  .status-inline--running {
    color: var(--color-info);
  }
  .status-inline--waiting {
    color: var(--color-warning);
  }
  .status-inline--completed,
  .status-inline--enabled {
    color: var(--color-positive);
  }
  .status-inline--completed_with_failures {
    color: var(--color-warning);
  }
  .status-inline--skipped {
    color: var(--color-ink-medium);
  }
  .status-inline--failed,
  .status-inline--disabled {
    color: var(--color-negative);
  }

  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-block-end: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }

  .page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: clamp(4rem, 10vw, 7rem);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 16%, transparent) 100%
    );
  }

  .page-header--embedded {
    margin-block-end: var(--space-4);
    padding-bottom: var(--space-3);
  }

  .page-header--embedded::after {
    width: clamp(3rem, 8vw, 4.75rem);
  }

  .page-header__breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-ink-medium);
    margin-block-end: var(--space-3);
  }

  .page-header__breadcrumb a {
    color: var(--color-ink-medium);
    transition: color 0.15s ease;
  }

  .page-header__breadcrumb a:hover {
    color: var(--color-primary);
  }

  .page-header__subline {
    max-width: 62ch;
    font-size: var(--text-body);
    color: var(--color-ink-medium);
    margin-block-start: var(--space-2);
    line-height: 1.6;
  }

  .breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-block-end: var(--space-2);
    color: var(--color-ink-light);
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
  }

  .breadcrumb a {
    color: var(--color-ink-medium);
    transition: color 0.15s ease;
  }

  .breadcrumb a:hover {
    color: var(--color-primary);
  }

  .eyebrow,
  .category-label,
  .card__category,
  .stat-card__label {
    font-weight: 500;
    color: var(--color-ink-medium);
  }

  .stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-card);
  }

  .stat-card--negative {
    border-color: rgba(220, 38, 38, 0.16);
    background: rgba(255, 250, 250, 0.98);
  }

  .stat-card--highlight {
    grid-column: span 1;
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 1);
  }

  .stat-cards--balanced .stat-card--highlight {
    grid-column: span 1;
  }

  .stat-cards--monitor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-cards--monitor-secondary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .monitor-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
    overflow-x: clip;
  }

  .monitor-page .page-header {
    margin-block-end: 0;
  }

  .monitor-page__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .monitor-page__summary-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .monitor-page__summary-header {
    max-width: 44rem;
  }

  .monitor-page__summary-title {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-ink);
  }

  .monitor-page__summary-copy {
    margin: var(--space-1) 0 0;
    font-size: var(--text-small);
    line-height: 1.55;
    color: var(--color-ink-medium);
  }

  .monitor-page__results {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .monitor-page__filters {
    margin-block: 0;
  }

  .monitor-page .notice-banner {
    margin-top: 0;
  }

  .monitor-page .stat-card__value,
  .monitor-page .stat-card__meta .metric-trend {
    font-variant-numeric: lining-nums tabular-nums;
  }

  .stat-card__value {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-ink);
  }

  .stat-card__meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    min-width: 0;
  }

  .stat-card__label {
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-ink-medium);
  }

  .stat-cards--documents .stat-card {
    gap: 0.3rem;
    padding: 0.8rem 0.95rem;
  }

  .stat-cards--documents .stat-card__value {
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.42rem);
    font-weight: 650;
    letter-spacing: -0.02em;
  }

  .metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: 600;
    background: var(--color-canvas-alt);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .metric-trend--positive {
    color: var(--color-positive);
    background: #eefbf2;
  }

  .metric-trend--negative {
    color: var(--color-negative);
    background: #fff2f2;
  }

  .empty-state {
    text-align: center;
    padding: clamp(var(--space-10), 8vw, 5rem) var(--space-4);
    color: var(--color-ink-medium);
  }

  .empty-state__icon {
    display: flex;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-ink-lightest);
    margin-block-end: var(--space-3);
  }

  .empty-state__heading {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-ink-dark);
    margin-block-end: var(--space-2);
  }

  .empty-state__body {
    font-size: var(--text-small);
    color: var(--color-ink-medium);
    margin-block-end: var(--space-4);
  }

  .empty-state__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
  }

  .workflow-grid[hidden],
  .workflow-stack[hidden],
  .resource-card-grid[hidden],
  .resource-stack[hidden] {
    display: none;
  }

  .card--workflow,
  .resource-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    color: inherit;
    position: relative;
  }

  .card__eyebrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .card--workflow .card__eyebrow,
  .resource-card .card__eyebrow {
    align-items: center;
  }

  .card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  .card--workflow .card__title,
  .resource-card .card__title {
    font-size: var(--text-section);
    line-height: 1.28;
    letter-spacing: -0.02em;
  }

  .card__description {
    font-size: var(--text-small);
    color: var(--color-ink-medium);
    line-height: 1.55;
    margin: 0;
    min-height: calc(1.55em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-ink-light);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .card--workflow .card__meta,
  .resource-card .card__meta {
    padding-top: var(--space-2);
    gap: 0.5rem 0.85rem;
  }

  .card--workflow .card__meta {
    margin-top: auto;
  }

  .card__meta strong {
    color: var(--color-ink-dark);
  }

  .mini-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-block: var(--space-2);
    padding: 0.5rem 0;
    min-height: 7.25rem;
    align-items: center;
  }

  .mini-flow::before {
    content: "";
    position: absolute;
    inset: 50% 2rem auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(201, 205, 216, 0.15) 0%,
      rgba(201, 205, 216, 0.8) 50%,
      rgba(201, 205, 216, 0.15) 100%
    );
  }

  .mini-flow__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    z-index: 1;
  }

  .mini-flow__node {
    min-height: 2.5rem;
    border: 1px solid rgba(201, 205, 216, 0.8);
    border-radius: 12px;
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(244, 244, 242, 0.95) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .mini-flow__node--trigger {
    border-left: 3px solid var(--color-trigger-border);
  }
  .mini-flow__node--step {
    border-left: 3px solid var(--color-step-border);
  }
  .mini-flow__node--action {
    border-left: 3px solid var(--color-action-border);
  }

  .resource-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
  }

  .resource-card > .card__eyebrow {
    padding-right: calc(2.75rem + var(--space-3) + var(--space-2));
  }

  .resource-card--skill > .card__eyebrow {
    padding-right: 0;
  }

  .resource-card__eyebrow-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
  }

  .resource-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .resource-card__body a {
    color: inherit;
    text-decoration: none;
  }

  .resource-card__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(
      180deg,
      rgba(248, 248, 246, 0.9) 0%,
      rgba(244, 244, 242, 0.9) 100%
    );
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    overflow-wrap: break-word;
    word-break: normal;
  }

  .resource-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    color: var(--color-ink-light);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .resource-card__menu {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 1;
  }

  .resource-card__menu summary::-webkit-details-marker {
    display: none;
  }

  .resource-card__menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-canvas-raised);
    color: var(--color-ink-medium);
    cursor: pointer;
  }

  .resource-card__menu-button:hover {
    color: var(--color-ink);
    border-color: var(--color-border-strong);
  }

  .resource-card__menu-sheet {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 10rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-canvas-raised);
    box-shadow: var(--shadow-elevated);
  }

  .resource-card__menu-item,
  .resource-card__menu-form .resource-card__menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-small);
    text-align: left;
    cursor: pointer;
  }

  .resource-card__menu-item:hover,
  .resource-card__menu-form .resource-card__menu-item:hover {
    background: var(--color-canvas);
    color: var(--color-primary);
  }

  .resource-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .resource-list__item {
    position: relative;
    display: grid;
    grid-template-columns:
      minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)
      auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-canvas-raised);
    box-shadow: var(--shadow-card);
  }

  .resource-list__meta {
    min-width: 0;
  }

  .resource-list__title {
    font-size: var(--text-card-heading);
    font-weight: 600;
    color: var(--color-ink);
  }

  .resource-list__description {
    margin-top: 0.25rem;
    font-size: var(--text-small);
    color: var(--color-ink-medium);
    overflow-wrap: break-word;
    word-break: normal;
  }

  .api-key-list__item {
    grid-template-columns:
      minmax(12rem, 1.7fr) auto minmax(10rem, 0.9fr)
      minmax(0, 1.25fr);
    gap: var(--space-4);
  }

  .api-key-list__role {
    justify-self: start;
  }

  .api-key-list__details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
  }

  .api-key-list__scopes,
  .api-key-list__grants {
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .api-key-list__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: var(--space-2);
    min-width: 0;
  }

  .api-key-list__identifier {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(248, 248, 246, 0.86);
    white-space: nowrap;
  }

  .api-key-list__identifier-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .api-key-list__revoke {
    flex: 0 0 auto;
    justify-self: end;
  }

  .team-stack__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  }

  .team-stack__item:last-child {
    border-bottom: none;
  }

  .team-stack__meta {
    flex: 1 1 0%;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .team-stack__name {
    font-weight: 600;
    color: var(--color-ink);
  }

  .team-stack__email {
    font-size: var(--text-small);
    color: var(--color-ink-medium);
  }

  .team-stack__detail {
    font-size: var(--text-small);
    color: var(--color-ink-light);
  }

  .team-stack__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .team-stack__role-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-6);
  }

  .integrations-page {
    gap: var(--space-6);
  }

  .card__heading {
    margin-block-end: var(--space-3);
    font-size: var(--text-large);
    font-weight: 600;
    color: var(--color-ink);
  }

  .documents-show,
  .documents-detail-grid,
  .documents-revisions-workspace,
  .documents-overview-card,
  .documents-editor-card,
  .documents-revision-panel,
  .documents-compare-panel {
    min-width: 0;
  }

  .documents-show__header-actions {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 0;
  }

  .documents-show__tabs {
    align-self: flex-end;
  }

  .documents-detail-grid,
  .documents-revisions-workspace {
    --documents-sidebar-width: minmax(16rem, 19rem);
    display: grid;
    gap: var(--space-4);
    align-items: start;
  }

  .documents-detail-grid {
    grid-template-columns: var(--documents-sidebar-width) minmax(0, 1fr);
  }

  .documents-revisions-workspace {
    grid-template-columns: var(--documents-sidebar-width) minmax(0, 1fr);
  }

  .documents-show .editor-frame,
  .documents-show .editor-frame [data-editor-target="container"],
  .documents-show .editor-frame [data-diff-editor-target="container"] {
    view-transition-name: none;
  }

  .documents-show .documents-card-head.page-header--embedded {
    margin-block-end: var(--space-3);
    padding-bottom: var(--space-2);
  }

  .documents-show .documents-card-head h2 {
    margin: 0;
    font-size: var(--text-card-heading);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
  }

  .documents-show .documents-card-head .page-header__subline {
    margin-block-start: 0.35rem;
    font-size: var(--text-small);
    line-height: 1.55;
  }

  .documents-card-head__lead {
    min-width: 0;
    flex: 1 1 auto;
  }

  .documents-card-head__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .documents-card-head__title-row h2 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .documents-overview-card__meta {
    margin-top: var(--space-1);
    gap: 0;
  }

  .documents-overview-card__meta .metadata-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding-block: var(--space-2);
    border-block-end: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  }

  .documents-overview-card__meta .metadata-row:first-child {
    padding-block-start: 0;
  }

  .documents-overview-card__meta .metadata-row:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }

  .documents-overview-card__meta .metadata-row dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-label-mono);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-ink-medium);
  }

  .documents-overview-card__meta .metadata-row dd {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .metadata-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .metadata-list .metadata-row {
    margin: 0;
  }

  .documents-revision-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .documents-revision-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .documents-revision-item:hover {
    border-color: var(--color-border-strong);
    background: rgba(250, 251, 253, 0.98);
  }

  .documents-revision-item--active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-light);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .documents-revision-item__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .documents-revision-item__timestamp,
  .documents-revision-item__state {
    margin: 0;
  }

  .documents-revision-item__meta {
    margin: 0;
    line-height: 1.45;
  }

  .comparison-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }

  .documents-compare-panel__form,
  .documents-compare-panel__meta {
    margin-bottom: var(--space-4);
  }

  .documents-compare-panel__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .documents-empty-state {
    padding-inline: 0;
  }

  .editor-frame {
    height: min(70vh, 35rem);
  }

  .editor-frame--short {
    height: 30rem;
  }

  .editor-frame [data-editor-target="container"],
  .editor-frame [data-diff-editor-target="container"],
  .editor-frame [data-json-payload-view-target="editorHost"] {
    height: 100%;
  }

  .page-section__header,
  .page-header__actions,
  .page-section__actions {
    min-width: 0;
  }

  .page-header__actions,
  .page-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .skill-version-show {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .skill-version-show__meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  .skill-version-show__meta-card {
    min-width: 0;
  }

  @media (min-width: 768px) {
    .skill-version-show__meta-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    }
  }

  @media (max-width: 768px) {
    .page-header,
    .page-section__header {
      flex-direction: column;
      align-items: stretch;
    }

    .page-header > .flex {
      flex-wrap: wrap;
    }

    .page-header__actions,
    .page-section__actions {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }

    .page-header__actions > *,
    .page-section__actions > * {
      width: 100%;
    }

    .page-header__actions > .badge,
    .page-section__actions > .badge {
      width: fit-content;
    }

    .page-header__actions .btn,
    .page-section__actions .btn {
      width: 100%;
    }

    .documents-show__tabs {
      justify-content: flex-start;
    }

    .documents-show__header-actions {
      align-items: stretch;
    }

    .documents-show__tabs {
      align-self: stretch;
    }
  }

  @media (max-width: 1100px) {
    .stat-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-cards--monitor {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-cards--monitor-secondary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-grid {
      grid-template-columns: 1fr;
    }

    .resource-list__item {
      grid-template-columns: 1fr;
      align-items: flex-start;
    }

    .api-key-list__actions {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .api-key-list__identifier {
      min-width: 0;
    }

    .team-stack__actions {
      flex-basis: 100%;
    }

    .documents-detail-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 980px) {
    .documents-revisions-workspace {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .documents-compare-panel__controls {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 720px) {
    .stat-cards--monitor {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 720px) {
    .stat-cards {
      grid-template-columns: 1fr;
    }

    .stat-cards--monitor-secondary {
      grid-template-columns: 1fr;
    }
  }

  .json-payload-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }

  .json-payload-view__toolbar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }

  .json-payload-view__mode {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-canvas-raised);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-caption);
    font-weight: 600;
    cursor: pointer;
  }

  .json-payload-view__mode:hover {
    border-color: var(--color-ink-lightest);
  }

  .json-payload-view__mode.is-active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
  }

  .json-payload-view__panel {
    min-width: 0;
  }

  .json-payload-view__panel--kv {
    border: 1px solid var(--data-view-panel-border);
    border-radius: var(--radius-md);
    background: var(--data-view-panel-background);
    max-height: min(28rem, 70vh);
    overflow: auto;
  }

  .json-payload-view__kv-root {
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--data-view-font-size, var(--text-caption));
    line-height: 1.35;
  }

  .json-payload-view__panel--json {
    min-height: 12rem;
    max-height: min(28rem, 70vh);
    border: 1px solid var(--data-view-panel-border);
    border-radius: var(--radius-md);
    background: var(--data-view-panel-background);
    overflow: hidden;
  }

  .json-kv-tree {
    --json-kv-disclosure-width: 1.5rem;
    --json-kv-nest-indent: 0.75rem;
  }

  .json-kv-line__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    min-width: 0;
  }

  .json-kv-row:not(.json-kv-row--bare):not(.json-kv-row--summary) {
    display: grid;
    grid-template-columns: var(--json-kv-disclosure-width) minmax(0, 1fr);
    column-gap: 0.35rem;
    align-items: baseline;
    padding: 0.2rem 0;
  }

  .json-kv-row--bare {
    padding: 0.2rem 0;
  }

  .json-kv-row--bare > .json-kv-line__main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    min-width: 0;
  }

  .json-kv-gutter {
    grid-column: 1;
    pointer-events: none;
  }

  .json-kv-row:not(.json-kv-row--bare):not(.json-kv-row--summary) > .json-kv-line__main {
    grid-column: 2;
  }

  .json-kv-tree__branch > summary.json-kv-row {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--json-kv-disclosure-width) minmax(0, 1fr);
    column-gap: 0.35rem;
    align-items: baseline;
    padding: 0.2rem 0;
  }

  .json-kv-tree__branch > summary::-webkit-details-marker {
    display: none;
  }

  .json-kv-tree__branch > summary::before {
    content: "▾";
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: var(--data-view-muted);
    font-size: 1.1em;
    line-height: 1.2;
    user-select: none;
  }

  .json-kv-tree__branch:not([open]) > summary::before {
    content: "▸";
  }

  .json-kv-tree__branch > summary > .json-kv-line__main {
    grid-column: 2;
    grid-row: 1;
  }

  .json-kv-row--dimmed {
    opacity: 0.38;
  }

  .json-kv-children {
    margin-left: 0;
    padding-left: var(--json-kv-nest-indent);
    border-left: 1px solid var(--data-view-panel-border);
  }

  .json-kv-key {
    color: var(--data-view-key);
    font-weight: 600;
  }

  .json-kv-punct {
    color: var(--data-view-punctuation);
  }

  .json-kv-meta {
    color: var(--data-view-muted);
    font-size: 0.72rem;
  }

  .json-kv-value--string {
    color: var(--data-view-string);
    word-break: break-word;
  }

  .json-kv-value--number {
    color: var(--data-view-number);
  }

  .json-kv-value--boolean,
  .json-kv-value--null {
    color: var(--data-view-literal);
  }

  .json-kv-value--empty {
    color: var(--data-view-muted);
  }

  .json-kv-tree--raw {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }
}

@layer components {
  /* --- Workflow stack variant --- */

  .workflow-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .workflow-stack__item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--radius-md);
    color: inherit;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .workflow-stack__item:last-child {
    border-bottom-color: transparent;
  }

  .workflow-stack__item:hover {
    background: var(--color-primary-light);
    border-bottom-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .workflow-stack__item:active {
    background: color-mix(in srgb, var(--color-primary-light) 80%, var(--color-primary-border) 20%);
  }

  .workflow-stack__main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .workflow-stack__title {
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.28;
    letter-spacing: -0.02em;
  }

  .workflow-stack__desc {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-ink-medium);
    line-height: 1.5;
  }

  .workflow-stack__stats {
    display: flex;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    white-space: nowrap;
  }

  .workflow-stack__stats strong {
    color: var(--color-ink-dark);
  }

  .workflow-stack__trailing {
    justify-self: end;
  }

  @media (max-width: 768px) {
    .workflow-stack {
      grid-template-columns: 1fr;
    }

    .workflow-stack__item {
      gap: var(--space-3);
    }

    .workflow-stack__stats {
      flex-wrap: wrap;
    }

    .workflow-stack__trailing {
      justify-self: start;
    }
  }

  /* --- Shared resource stack (skills, buckets) --- */

  .resource-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .resource-stack__item {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    position: relative;
  }

  .resource-stack__item:last-child {
    border-bottom-color: transparent;
  }

  .resource-stack__item:has(.resource-stack__menu[open]) {
    z-index: var(--z-popup);
  }

  a.resource-stack__item {
    border-radius: var(--radius-md);
    color: inherit;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  a.resource-stack__item:hover {
    background: var(--color-primary-light);
    border-bottom-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  a.resource-stack__item:active {
    background: color-mix(in srgb, var(--color-primary-light) 80%, var(--color-primary-border) 20%);
  }

  .resource-stack__link {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--space-6);
    color: inherit;
    border-radius: var(--radius-md);
    transition:
      background-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .resource-stack__item:not(.resource-stack__item--has-menu) > .resource-stack__link {
    padding: var(--space-5) var(--space-3);
  }

  .resource-stack__link:hover {
    background: var(--color-primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .resource-stack__link:active {
    background: color-mix(in srgb, var(--color-primary-light) 80%, var(--color-primary-border) 20%);
  }

  .resource-stack__item--has-menu {
    grid-template-columns: subgrid;
    padding: 0;
  }

  .resource-stack__item--has-menu > .resource-stack__link {
    display: grid;
    grid-column: 1 / 4;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-3);
    color: inherit;
  }

  .resource-stack__main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .resource-stack__title {
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.28;
    letter-spacing: -0.02em;
  }

  .resource-stack__desc {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-ink-medium);
    line-height: 1.5;
  }

  .resource-stack__stats {
    display: flex;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    white-space: nowrap;
  }

  .resource-stack__stats strong {
    color: var(--color-ink-dark);
  }

  .resource-stack__trailing {
    display: flex;
    gap: var(--space-2);
    justify-self: end;
  }

  .resource-stack__menu {
    justify-self: end;
    position: relative;
  }

  .resource-stack__menu[open] {
    z-index: var(--z-popup);
  }

  .resource-stack__menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-canvas-raised);
    color: var(--color-ink-medium);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .resource-stack__menu-button:hover {
    color: var(--color-ink);
    border-color: var(--color-border-strong);
  }

  @media (max-width: 768px) {
    .resource-stack {
      grid-template-columns: 1fr auto;
    }

    .resource-stack__item--has-menu > .resource-stack__link {
      grid-column: 1;
      grid-template-columns: 1fr;
    }

    .resource-stack__item {
      gap: var(--space-3);
    }

    .resource-stack__stats {
      flex-wrap: wrap;
    }

    .resource-stack__trailing {
      justify-self: start;
    }

    .resource-stack__menu {
      grid-row: 1;
      grid-column: 2;
      align-self: start;
    }
  }

}

@media (prefers-reduced-motion: no-preference) {
  html[data-documents-transitioning]::view-transition-old(root),
  html[data-documents-transitioning]::view-transition-new(root) {
    animation: none;
  }

  ::view-transition-group(.documents-tab-copy) {
    z-index: 2;
  }

  ::view-transition-group(.documents-tab-active) {
    z-index: 1;
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-old(.documents-tab-active) {
    animation-duration: 180ms;
  }

  ::view-transition-new(.documents-tab-active) {
    animation-duration: 240ms;
  }
}