/*
  Wortic macOS UI Kit — List
  wm-list — cobre List, Plain/Inset/Grouped/Inset Grouped List,
  List Row, Selectable/Hoverable/Expandable/Draggable Row.

  Glowup 2026: grupos com anel hairline + sombra de contato (sem borda
  de 1px), separadores internos de 0.5px recuados, hover suave com
  transição e seleção em accent-fill.
*/

@layer components {
  .wm-list {
    display: flex;
    flex-direction: column;
  }

  .wm-list--inset {
    padding-inline: var(--wm-space-6);
  }

  .wm-list--grouped .wm-list__row {
    background: var(--wm-surface-primary);
  }
  .wm-list--grouped {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-list-group, 12px);
    overflow: hidden;
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }
  .wm-list--inset-grouped {
    padding-inline: var(--wm-space-6);
  }
  .wm-list--inset-grouped .wm-list__row {
    background: var(--wm-surface-primary);
  }
  .wm-list--inset-grouped .wm-list__group {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-list-group, 12px);
    overflow: hidden;
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }

  .wm-list__header {
    padding: var(--wm-space-6) var(--wm-space-6) var(--wm-space-2);
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--wm-label-tertiary);
  }

  .wm-list__footer {
    padding: var(--wm-space-3) var(--wm-space-6);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-relaxed);
  }

  .wm-list__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    min-height: 44px;
    padding-inline: var(--wm-space-6);
    text-decoration: none;
    color: var(--wm-label-primary);
    cursor: default;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  /* Separador interno hairline, recuado da borda esquerda
     (alinhado ao conteúdo, como listas do macOS). */
  .wm-list__row + .wm-list__row::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: var(--wm-space-6);
    inset-inline-end: 0;
    border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
    pointer-events: none;
  }

  .wm-list__row--hoverable:hover {
    background: var(--wm-fill-quaternary);
    cursor: pointer;
  }
  .wm-list__row--hoverable:active {
    background: var(--wm-fill-tertiary);
  }
  .wm-list__row--selectable {
    cursor: pointer;
  }
  /* Seleção: a classe is-selected E o atributo aria-selected pintam
     igual — o estado acessível nunca pode divergir do estado visual. */
  .wm-list__row.is-selected,
  .wm-list__row[aria-selected="true"] {
    background: var(--wm-accent-fill);
  }
  .wm-list__row.is-selected:hover,
  .wm-list__row[aria-selected="true"]:hover {
    background: var(--wm-accent-fill-strong);
  }
  /* Sobre o fill de accent, o separador vizinho some (macOS esconde
     hairlines adjacentes à seleção). */
  .wm-list__row.is-selected::before,
  .wm-list__row.is-selected + .wm-list__row::before,
  .wm-list__row[aria-selected="true"]::before,
  .wm-list__row[aria-selected="true"] + .wm-list__row::before {
    opacity: 0;
  }

  /* Foco de teclado da linha: anel PARA DENTRO. O anel externo padrão da
     fundação seria cortado pelo overflow:hidden do grupo arredondado, e o
     halo pintaria por cima das linhas vizinhas. */
  .wm-list__row:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: calc(-1 * var(--wm-focus-ring-width));
    box-shadow: none;
  }

  .wm-list__row-avatar {
    flex: none;
  }

  .wm-list__row-icon {
    flex: none;
    color: var(--wm-label-secondary);
  }
  .wm-list__row.is-selected .wm-list__row-icon {
    color: var(--wm-accent);
  }

  .wm-list__row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .wm-list__row-title {
    font-size: var(--wm-font-size-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wm-list__row-subtitle {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wm-list__row-accessory {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-subheadline);
    font-variant-numeric: tabular-nums;
  }

  .wm-list__row-chevron {
    flex: none;
    color: var(--wm-label-quaternary);
    transition:
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-list__row--hoverable:hover .wm-list__row-chevron {
    color: var(--wm-label-tertiary);
    transform: translateX(1px);
  }

  .wm-list__row-drag {
    flex: none;
    display: inline-flex;
    color: var(--wm-label-quaternary);
    cursor: grab;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-list__row-drag:hover {
    color: var(--wm-label-tertiary);
  }
  .wm-list__row-drag:active {
    cursor: grabbing;
  }

  /* Expandable row */
  .wm-list__row-disclosure {
    flex: none;
    display: inline-flex;
    color: var(--wm-label-tertiary);
    transition: transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-list__row[aria-expanded="true"] .wm-list__row-disclosure {
    transform: rotate(90deg);
  }
  .wm-list__row[aria-expanded="false"] + .wm-list__children {
    display: none;
  }
  .wm-list__children .wm-list__row {
    padding-inline-start: var(--wm-space-13);
  }
  .wm-list__children .wm-list__row + .wm-list__row::before {
    inset-inline-start: var(--wm-space-13);
  }

  /* ============================================================
     MÍDIA NA LINHA — miniatura à frente (padrão) ou atrás.
     O avatar continua sendo wm-list__row-avatar; isto é para capa,
     thumbnail de vídeo, foto de produto: coisa retangular.
     ============================================================ */
  /* A miniatura tem exatamente a altura mínima da linha (44px). Sem
     respiro vertical, as imagens de linhas vizinhas encostam e viram
     uma tira contínua — defeito que só o print mostrou, porque medida
     nenhuma acusa: as caixas não se sobrepõem, elas se tocam. */
  .wm-list__row:has(> .wm-list__row-media) {
    padding-block: var(--wm-space-3);
  }
  .wm-list__row-media {
    flex: none;
    inline-size: var(--wm-list-row-media, 44px);
    block-size: var(--wm-list-row-media, 44px);
    border-radius: var(--wm-radius-md);
    overflow: hidden;
    background: var(--wm-fill-secondary);
  }
  .wm-list__row-media > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  /* Miniatura deitada (16:9) para vídeo e capa de post. */
  .wm-list__row-media--wide {
    inline-size: calc(var(--wm-list-row-media, 44px) * 16 / 9);
  }
  /* O separador do macOS alinha com o TEXTO, não com a borda: com
     miniatura à frente ele recua além dela, senão corta a imagem ao meio. */
  .wm-list:not(.wm-list--media-trailing)
    .wm-list__row
    + .wm-list__row:has(> .wm-list__row-media)::before {
    inset-inline-start: calc(
      var(--wm-space-6) + var(--wm-list-row-media, 44px) + var(--wm-space-5)
    );
  }
  .wm-list:not(.wm-list--media-trailing)
    .wm-list__row
    + .wm-list__row:has(> .wm-list__row-media--wide)::before {
    inset-inline-start: calc(
      var(--wm-space-6) + var(--wm-list-row-media, 44px) * 16 / 9 +
        var(--wm-space-5)
    );
  }
  /* Mídia atrás do texto (padrão de "leitura", tipo NYT/Medium): a
     ordem VISUAL muda, a ordem do DOM não — quem lê por teclado ou por
     leitor de tela continua recebendo título antes da imagem. */
  .wm-list--media-trailing .wm-list__row-media {
    order: 9;
  }
  .wm-list--media-trailing .wm-list__row-accessory {
    order: 10;
  }

  /* ============================================================
     CARTÕES SOLTOS — o oposto do grupo: sem moldura em volta, cada
     linha vira um cartão com respiro entre eles. Use OU --cards OU
     --grouped/--inset-grouped; os dois juntos desenham moldura dentro
     de moldura.
     ============================================================ */
  .wm-list--cards {
    gap: var(--wm-space-4);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .wm-list--cards .wm-list__row {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-lg);
    padding-block: var(--wm-space-5);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
  }
  /* Cartão solto não leva separador: o respiro já separa. */
  .wm-list--cards .wm-list__row + .wm-list__row::before {
    content: none;
  }
  /* Sem overflow:hidden do grupo, o anel de foco volta a caber fora. */
  .wm-list--cards .wm-list__row:focus-visible {
    outline-offset: var(--wm-focus-ring-offset);
  }
  .wm-list--cards .wm-list__row.is-selected,
  .wm-list--cards .wm-list__row[aria-selected="true"] {
    box-shadow:
      0 0 0 var(--wm-border-width-thin) var(--wm-accent),
      var(--wm-shadow-1);
  }

  /* Density.
     A fundação padronizou o gancho como [data-wm-density] (ver o bloco
     DENSIDADE de foundation/tokens.css); [data-density] fica valendo
     porque páginas antigas do kit usam esse nome. */
  [data-density="compact"] .wm-list__row,
  [data-wm-density="compact"] .wm-list__row {
    min-height: 30px;
  }
  [data-density="comfortable"] .wm-list__row,
  [data-wm-density="comfortable"] .wm-list__row {
    min-height: 56px;
  }
  /* No modo confortável o subtítulo ganha ar; no compacto ele some da
     conta de altura — quem manda é a linha, não o texto. */
  [data-density="comfortable"] .wm-list__row-body,
  [data-wm-density="comfortable"] .wm-list__row-body {
    gap: var(--wm-space-1);
  }

  /* Empty state inline */
  .wm-list__empty {
    padding: var(--wm-space-12) var(--wm-space-6);
    text-align: center;
    color: var(--wm-label-tertiary);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-list__row,
    .wm-list__row-chevron,
    .wm-list__row-drag,
    .wm-list__row-disclosure {
      transition: none;
    }
    .wm-list__row--hoverable:hover .wm-list__row-chevron {
      transform: none;
    }
  }

  /* Toda classe que define display precisa do par [hidden] — sem isto,
     esconder uma linha via atributo hidden perde para o display da classe. */
  .wm-list[hidden],
  .wm-list__row[hidden],
  .wm-list__row-body[hidden],
  .wm-list__row-accessory[hidden],
  .wm-list__row-drag[hidden],
  .wm-list__row-disclosure[hidden] {
    display: none;
  }
}