@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * INSPECTOR
 *
 * A group of property rows for a detail page. At desktop width it is a right rail on one tinted
 * surface; below 700px it reads as a grouped list, on the raised surface a grouped list uses. The
 * group carries the tone and clips its rows; the rows draw their own inset separators.
 * ======================================== */

  .cinder-inspector {
    display: block;
    min-inline-size: 0;
  }

  .cinder-inspector__header {
    margin: 0;
    margin-block-end: var(--cinder-space-2);
    padding-inline: var(--cinder-space-4);
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
    color: var(--cinder-text-muted);
  }

  .cinder-inspector__group {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--cinder-radius-surface);
    background: var(--cinder-surface-inset);
  }

  /* On a phone the rows sit on the raised surface of a grouped list, and each label stacks above its value. */
  @media (width < 700px) {
    .cinder-inspector__group {
      background: var(--cinder-surface-raised);
    }
  }

  @media (forced-colors: active) {
    .cinder-inspector__group {
      border: 1px solid CanvasText;
    }
  }
}