@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * STACKED LIST ITEM
 * ======================================== */

  .cinder-stacked-list-item {
    display: block;
    container-type: inline-size;
    container-name: cinder-stacked-list-item;
    padding: var(--cinder-space-3) var(--cinder-space-4);
    border-bottom: 1px solid var(--cinder-border-muted);
  }

  .cinder-stacked-list-item[data-cinder-density='condensed'] {
    padding: var(--cinder-space-2) var(--cinder-space-3);
  }

  .cinder-stacked-list-item__layout {
    display: grid;
    align-items: center;
    column-gap: var(--cinder-space-3);
    row-gap: var(--cinder-space-2);
    grid-template-columns: 1fr;
    grid-template-areas: 'body';
  }

  .cinder-stacked-list-item--has-leading .cinder-stacked-list-item__layout {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'leading body';
  }

  .cinder-stacked-list-item--has-leading .cinder-stacked-list-item__leading {
    align-self: start;
  }

  .cinder-stacked-list-item--has-leading .cinder-stacked-list-item__body {
    align-self: start;
  }

  .cinder-stacked-list-item--has-trailing .cinder-stacked-list-item__layout {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'body trailing';
  }

  .cinder-stacked-list-item--has-leading.cinder-stacked-list-item--has-trailing
    .cinder-stacked-list-item__layout {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'leading body trailing';
  }

  .cinder-stacked-list-item__leading {
    grid-area: leading;
  }

  .cinder-stacked-list-item__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
  }

  /*
   * The density variant's real work. Most of this family's airiness comes from
   * this gap sitting on top of the description/meta leading, not from the
   * leading alone, so condensing has to tighten both.
   *
   * Deliberately a direct declaration rather than a component custom property:
   * selectable-row and action-row route their equivalent gap through one, but a
   * non-empty *.variables.json manifest obliges the DTCG corpus to model the
   * token, and that is a public theming API decision rather than a side effect
   * of fixing a no-op variant. Nothing outside this component reads the value.
   */
  .cinder-stacked-list-item[data-cinder-density='condensed'] .cinder-stacked-list-item__body {
    gap: var(--cinder-space-0-5);
  }

  .cinder-stacked-list-item__trailing {
    grid-area: trailing;
    display: flex;
    gap: var(--cinder-space-2);
    align-self: center;
    align-items: center;
  }

  .cinder-stacked-list-item__title {
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
    color: var(--cinder-text-default);
  }

  .cinder-stacked-list-item__title-link {
    color: inherit;
    text-decoration: none;
  }

  .cinder-stacked-list-item__title-link:hover {
    text-decoration: underline;
  }

  .cinder-stacked-list-item__title-link:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    border-radius: var(--cinder-radius-sm);
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  /* Forced Colors Mode — box-shadow focus rings are invisible; use a real outline. */
  @media (forced-colors: active) {
    .cinder-stacked-list-item__title-link:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 3px;
    }
  }

  .cinder-stacked-list-item__description {
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-snug);
    color: var(--cinder-text-muted);
  }

  .cinder-stacked-list-item__meta {
    font-size: var(--cinder-text-xs);
    line-height: var(--cinder-leading-snug);
    color: var(--cinder-text-muted);
  }

  .cinder-stacked-list-item[data-cinder-density='condensed'] .cinder-stacked-list-item__description,
  .cinder-stacked-list-item[data-cinder-density='condensed'] .cinder-stacked-list-item__meta {
    line-height: var(--cinder-leading-tight);
  }

  /* Narrow container query — trailing drops below body */
  @container cinder-stacked-list-item (max-width: 448px) {
    .cinder-stacked-list-item--has-trailing .cinder-stacked-list-item__layout {
      grid-template-columns: 1fr;
      grid-template-areas:
        'body'
        'trailing';
    }

    .cinder-stacked-list-item--has-leading.cinder-stacked-list-item--has-trailing
      .cinder-stacked-list-item__layout {
      grid-template-columns: auto 1fr;
      grid-template-areas:
        'leading body'
        'trailing trailing';
    }
  }
}