@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/badge/badge.css';
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/copy-button/copy-button.css';
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/json-viewer/json-viewer.css';
@import '/assets/62fd69eaa3ece1b294e1a2547d68d8c2dc7cf5425735c4cb0376d8c40531dac6/components/segmented-control/segmented-control.css';

@layer cinder.components {
  /* Flat: the inspector draws no frame of its own. The heading row sits on the
   * surface, and the value below it is the content. */
  .cinder-payload-inspector {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    font-size: var(--cinder-text-sm);
    user-select: none;
  }

  /* ----------------------------------------
   * Heading row
   * ---------------------------------------- */

  .cinder-payload-inspector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-2);
    flex-wrap: wrap;
  }

  .cinder-payload-inspector__label {
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-medium);
    color: var(--cinder-text-default);
  }

  .cinder-payload-inspector__header-actions {
    display: flex;
    align-items: center;
    gap: var(--cinder-space-2);
    flex-wrap: wrap;
  }

  .cinder-payload-inspector__size {
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ----------------------------------------
   * Panel content
   * ---------------------------------------- */

  .cinder-payload-inspector__panel {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
    overflow: auto;
  }

  .cinder-payload-inspector__panel .cinder-json-viewer {
    user-select: text;
  }

  /* ----------------------------------------
   * Fields view
   * ---------------------------------------- */

  .cinder-payload-inspector__field-view {
    user-select: text;
  }

  .cinder-payload-inspector__fields {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1-5);
    margin: 0;
  }

  .cinder-payload-inspector__field {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 3fr;
    align-items: baseline;
    gap: var(--cinder-space-3);
  }

  .cinder-payload-inspector__field-label {
    margin: 0;
    color: var(--cinder-text-muted);
    overflow-wrap: anywhere;
  }

  .cinder-payload-inspector__field-value {
    margin: 0;
    min-inline-size: 0;
    color: var(--cinder-text-default);
    overflow-wrap: anywhere;
  }

  /* A nested object or array reads as a sub-list under its label, set in from the
   * left by a hairline, so the nesting is visible without boxes. */
  .cinder-payload-inspector__field-value > .cinder-payload-inspector__fields {
    padding-inline-start: var(--cinder-space-3);
    border-inline-start: 1px solid var(--cinder-border-muted);
  }

  .cinder-payload-inspector__identifier,
  .cinder-payload-inspector__link[data-cinder-identifier] {
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-xs);
  }

  .cinder-payload-inspector__number {
    font-variant-numeric: tabular-nums;
  }

  .cinder-payload-inspector__null,
  .cinder-payload-inspector__more {
    margin: 0;
    color: var(--cinder-text-muted);
  }

  .cinder-payload-inspector__link {
    color: var(--cinder-accent-text);
  }

  @media (max-width: 30rem) {
    .cinder-payload-inspector__field {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  .cinder-payload-inspector__primitive {
    margin: 0;
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-sm);
    color: var(--cinder-text-default);
    background: var(--cinder-surface-raised);
    padding: var(--cinder-space-2) var(--cinder-space-3);
    border-radius: var(--cinder-radius-sm);
    border: 1px solid var(--cinder-border);
    white-space: pre-wrap;
    word-break: break-all;
    user-select: text;
  }

  /* ----------------------------------------
   * Notices and placeholders
   * ---------------------------------------- */

  .cinder-payload-inspector__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--cinder-space-2);
    padding: var(--cinder-space-3);
    background: var(--cinder-surface-raised);
    border-radius: var(--cinder-radius-sm);
    border: 1px solid var(--cinder-border);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
    user-select: text;
  }

  .cinder-payload-inspector__notice--warning {
    background: var(--cinder-status-warning-background);
    border-color: var(--cinder-status-warning-border);
    color: var(--cinder-status-warning-text);
  }

  .cinder-payload-inspector__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cinder-space-4);
    color: var(--cinder-text-disabled);
    font-size: var(--cinder-text-sm);
    font-style: italic;
  }
}