/*
  Wortic macOS UI Kit — Settings Group / Settings Row
  wm-settings — implementação do padrão do macOS System Settings.
  ESTE BLOCO É MUITO IMPORTANTE (ver AGENTS.md): é o jeito canônico de
  montar telas de configuração/preferências na Wortic.

  Glowup 2026: painel branco com anel hairline (sem borda de 1px),
  hairlines internas de 0.5px que não tocam as bordas do painel,
  ícones coloridos com brilho vertical (como os ícones do System Settings).
*/

@layer components {
  .wm-settings {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-10);
    max-width: 580px;
  }

  .wm-settings-group__label {
    font-size: var(--wm-font-size-caption2);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-letter-spacing-wide);
    text-transform: uppercase;
    /* É o TÍTULO da seção: quem lê a tela usa ele para achar o assunto.
       Em 10px maiúsculo com --wm-label-tertiary dava 2.52:1 / 3.45:1. */
    color: var(--wm-label-secondary);
    padding-inline: var(--wm-space-7);
    margin-bottom: var(--wm-space-3);
  }

  /* Painel: superfície primária + anel hairline + sombra de contato.
     Nada de border sólida de 1px — o macOS assenta o painel com sombra. */
  .wm-settings-group {
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-settings-group, 12px);
    box-shadow:
      0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-1);
    overflow: hidden;
  }

  .wm-settings-group__footer {
    padding: var(--wm-space-3) var(--wm-space-7) 0;
    font-size: var(--wm-font-size-caption);
    /* O rodapé carrega a consequência ("vale para todos os monitores") — é a
       frase que evita o arrependimento. 2.52:1 / 3.45:1 medidos em tertiary. */
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-relaxed);
  }

  .wm-settings-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wm-space-6);
    min-height: 44px;
    padding: var(--wm-space-5) var(--wm-space-7);
  }

  /* Hairline interna de 0.5px, recuada — não toca as bordas do painel. */
  .wm-settings-row + .wm-settings-row::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: var(--wm-space-7);
    border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
    pointer-events: none;
  }

  /* Ícone colorido estilo System Settings: cor chapada por baixo
     (inclusive via style="background:#xxx") + verniz vertical e
     relevo aplicados por cima, para qualquer cor. */
  .wm-settings-row__icon {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--wm-radius-settings-icon, 7px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--wm-accent);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.34),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.12),
      0 0 0 var(--wm-border-width-hairline) rgba(0, 0, 0, 0.06),
      0 1px 1.5px rgba(0, 0, 0, 0.14);
  }
  .wm-settings-row__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
  }
  .wm-settings-row__icon .wm-icon {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.22));
  }

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

  .wm-settings-row__label {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A descrição é o que diz o que a opção FAZ; sem ela sobra só o nome.
     Medido em 10px: 2.52:1 no claro e 3.45:1 no escuro com tertiary. */
  .wm-settings-row__desc {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    line-height: var(--wm-line-height-normal);
    white-space: normal;
  }

  .wm-settings-row__control {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
  }

  /* O valor à direita numa linha que só INFORMA ("Perfil de cores · BRAZIL").
     Sem uma classe própria o texto do trailing herda o corpo primário e
     disputa a hierarquia com o rótulo: na tela os dois viravam a mesma coisa,
     e o olho não achava mais qual é o nome da preferência. Secundário resolve. */
  .wm-settings-row__value {
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-secondary);
    white-space: nowrap;
  }

  /* Linha inteira clicável (ex: navega para subtela) */
  .wm-settings-row--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  /* <button class="wm-settings-row"> tem que ocupar a LINHA inteira.
     Achado renderizando: mesmo com display:flex, o <button> continua se
     encolhendo até o conteúdo (largura intrínseca de botão), então a linha
     "Apagar todos os dados" ficava com metade da largura das irmãs — o
     hover pintava meia linha e a hairline de cima saía curta, denunciando
     o defeito. <a> não sofre disso, por já ser bloco. */
  button.wm-settings-row {
    width: 100%;
    font: inherit;
  }

  /* O anel de foco tem que caber DENTRO do painel.
     .wm-settings-group é overflow:hidden (é o que arredonda as pontas das
     linhas), e outline com offset positivo é desenhado FORA do elemento —
     numa linha que ocupa a largura toda do painel, ele era recortado e o
     foco de teclado simplesmente sumia. Offset negativo desenha o anel para
     dentro; o halo vira sombra INTERNA pela mesma razão. */
  .wm-settings-row--link:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: calc(var(--wm-focus-ring-offset) * -1);
    box-shadow: inset 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-settings-row--link:hover {
    background: var(--wm-fill-quaternary);
  }
  .wm-settings-row--link:active {
    background: var(--wm-fill-tertiary);
  }
  .wm-settings-row--link .wm-settings-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-settings-row--link:hover .wm-settings-row__chevron {
    color: var(--wm-label-tertiary);
    transform: translateX(1px);
  }

  /* Densidade compacta */
  [data-density="compact"] .wm-settings-row {
    min-height: 32px;
    padding-block: var(--wm-space-3);
  }
  [data-density="comfortable"] .wm-settings-row {
    min-height: 56px;
    padding-block: var(--wm-space-6);
  }
}