@layer components {
  /* ---------- Строка списка ----------
     Телефон: [аватар | текст | кнопка-иконка], под ними ряд кнопок на всю ширину.
     Широкий контейнер (≥ 560px): кнопки встают справа в одну строку. */
  .item {
    --ava: 48px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "body aside" "actions actions";
    gap: 12px 14px;
    padding: 14px;
    border-radius: var(--r-card);
    transition: background var(--t-base);
  }
  .item:has(> .item__ava) {
    grid-template-columns: var(--ava) minmax(0, 1fr) auto;
    grid-template-areas: "ava body aside" "actions actions actions";
  }
  .item:not(:has(> .item__actions)) { grid-template-areas: "body aside"; }
  .item:has(> .item__ava):not(:has(> .item__actions)) { grid-template-areas: "ava body aside"; }

  .item + .item::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px;
    height: 1px; background: var(--line);
  }
  @media (hover: hover) { .item:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } }

  .item__ava {
    grid-area: ava;
    width: var(--ava); height: var(--ava);
    display: grid; place-items: center;
    border-radius: var(--r-m);
    background: linear-gradient(145deg, #3B82F6, var(--brand) 55%, var(--brand-2));
    color: #fff; box-shadow: var(--sh-brand);
  }
  .item__body { grid-area: body; min-width: 0; display: grid; gap: 4px; align-content: start; }
  .item__title {
    font-size: var(--fs-input); font-weight: var(--fw-heavy);
    letter-spacing: -.01em; line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .item__meta {
    display: flex; align-items: flex-start; gap: 6px; min-width: 0;
    font-size: var(--fs-s); color: var(--text-2); line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .item__meta-icon { margin-top: 1px; color: var(--text-3); }
  .item__code {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
    border-radius: 8px; background: var(--surface-2);
    font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--text);
  }
  .item__link {
    color: var(--c-blue-ink);
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--brand) 30%, transparent);
  }
  @media (hover: hover) { .item__link:hover { text-decoration-color: currentColor; } }

  .item__aside { grid-area: aside; align-self: start; }
  .item__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
  .item__actions > .btn { flex: 1 1 120px; }

  /* Статус: цветная полоса слева */
  .item[data-status] { padding-left: 24px; }
  .item[data-status]::after {
    content: ""; position: absolute; left: 9px; top: 16px; bottom: 16px;
    width: 4px; border-radius: 2px; background: var(--c);
  }

  /* Узкий контейнер (320px): компактнее */
  @container (max-width: 340px) {
    .item { --ava: 40px; gap: 10px 12px; padding: 12px; }
    .item[data-status] { padding-left: 22px; }
  }

  /* Широкий контейнер: кнопки справа */
  @container (min-width: 560px) {
    .item {
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-areas: "body actions aside";
      align-items: center;
    }
    .item:has(> .item__ava) {
      grid-template-columns: var(--ava) minmax(0, 1fr) auto auto;
      grid-template-areas: "ava body actions aside";
    }
    .item__aside { align-self: center; }
    .item__actions { flex-wrap: nowrap; }
    .item__actions > .btn { flex: none; }
  }

  /* ---------- Список «ключ — значение» ---------- */
  .details { display: grid; padding: 6px; border-radius: var(--r-l); background: var(--surface-2); }
  .details__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 10px; font-size: var(--fs-s); }
  .details__row + .details__row { border-top: 1px solid var(--line); }
  .details__row dt { flex: none; color: var(--text-2); }
  .details__row dd { min-width: 0; font-weight: var(--fw-bold); text-align: right; overflow-wrap: anywhere; }
}