/*
  Wortic macOS UI Kit — OAuth Consent
  wm-oauth-consent — a tela "o app X quer acessar sua conta": lista de
  permissões em linguagem humana, obrigatória vs opcional, opcional
  recusável UMA A UMA.

  REGRA DE DESENHO (a mesma dos auth-*, pedido do Will): CARTÃO CENTRADO,
  NUNCA janela macOS.

  DUAS HONESTIDADES QUE ESTE COMPONENTE NUNCA MISTURA:
  1. Obrigatória vs opcional é o que o PROVEDOR exige — vem no dado, o
     rótulo é texto (".wm-oauth-consent__scope-required"), nunca só cor.
  2. Solicitada vs concedida é o que A PESSOA decide agora — o toggle
     muda, e o texto ao lado dele muda junto ("Concedida" / "Recusada").
     Nunca comunicamos os dois estados como um booleano só.

  Escopo sem descrição do provedor DEGRADA para o nome técnico em <code>
  e uma nota — nunca inventamos frase humana para o que a API não mandou.

  Alimentado por HTML estático OU por oauth-consent.js
  (window.WMOAuthConsent.montar) quando os dados vêm da API do provedor
  em tempo de execução — mesma marcação nos dois casos.
*/

@layer components {
  /* ---------- palco opcional ---------- */
  .wm-oauth-consent-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--wm-space-12) var(--wm-space-8);
    background: var(--wm-surface-base);
  }

  /* ---------- o cartão ---------- */
  .wm-oauth-consent {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
    width: 100%;
    max-width: var(--wm-auth-card-width-wide);
    padding: var(--wm-space-11) var(--wm-space-10);
    border-radius: var(--wm-radius-panel);
    background: var(--wm-surface-elevated);
    box-shadow:
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-panel);
  }

  /* ---------- cabeçalho: os dois atores ---------- */
  .wm-oauth-consent__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-4);
    text-align: center;
  }
  .wm-oauth-consent__actors {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
  }
  .wm-oauth-consent__actor-icon {
    --_ring: var(--wm-separator);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-auth-mark-size);
    height: var(--wm-auth-mark-size);
    flex: none;
    border-radius: var(--wm-radius-lg);
    background: var(--wm-surface-primary);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--_ring),
      0 1px 2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
  .wm-oauth-consent__actor-icon img,
  .wm-oauth-consent__actor-icon svg {
    width: 62%;
    height: 62%;
    object-fit: contain;
  }
  /* App sem logo enviado pelo provedor: cai num ícone neutro — nunca
     quebra o layout, nunca inventa marca. */
  .wm-oauth-consent__actor-icon--neutral {
    color: var(--wm-label-tertiary);
    background: var(--wm-fill-secondary);
  }
  .wm-oauth-consent__actor-icon--neutral .wm-icon {
    width: var(--wm-icon-lg);
    height: var(--wm-icon-lg);
  }
  .wm-oauth-consent__actor-icon--wortic {
    background: var(--wm-surface-primary);
    padding: var(--wm-space-2);
  }
  .wm-oauth-consent__actor-link {
    display: inline-flex;
    color: var(--wm-label-quaternary);
  }
  .wm-oauth-consent__actor-link .wm-icon {
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
  }

  .wm-oauth-consent__title {
    margin: 0;
    max-width: 34ch;
    font-size: var(--wm-font-size-title2);
    line-height: var(--wm-leading-title2, 1.25);
    letter-spacing: var(--wm-tracking-title1);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-oauth-consent__subtitle {
    margin: 0;
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
    overflow-wrap: anywhere;
  }
  .wm-oauth-consent__unverified {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-warning);
  }
  .wm-oauth-consent__unverified .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

  /* ---------- lista de permissões ---------- */
  .wm-oauth-consent__scopes {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
    border-radius: var(--wm-radius-lg);
    background: var(--wm-fill-quaternary, var(--wm-surface-base));
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    overflow: hidden;
  }
  .wm-oauth-consent__scope {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-5);
    padding: var(--wm-space-6) var(--wm-space-6);
    background: var(--wm-surface-elevated);
  }
  .wm-oauth-consent__scope + .wm-oauth-consent__scope {
    box-shadow: inset 0 var(--wm-border-width-hairline) 0 var(--wm-separator);
  }
  .wm-oauth-consent__scope-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--wm-radius-md);
    color: var(--wm-accent);
    background: var(--wm-accent-fill);
  }
  .wm-oauth-consent__scope-icon .wm-icon {
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
  }
  /* escopo recusado: o ícone perde a cor de destaque — mas o texto ao
     lado do toggle é quem CARREGA a informação, isto é só reforço */
  .wm-oauth-consent__scope--recusado .wm-oauth-consent__scope-icon {
    color: var(--wm-label-tertiary);
    background: var(--wm-fill-secondary);
  }
  .wm-oauth-consent__scope-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
  }
  .wm-oauth-consent__scope-label {
    margin: 0;
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-primary);
  }
  .wm-oauth-consent__scope-desc {
    margin: 0;
    font-size: var(--wm-font-size-footnote);
    line-height: var(--wm-line-height-normal);
    color: var(--wm-label-secondary);
    text-wrap: pretty;
  }
  /* degradê elegante: o provedor não descreveu o escopo */
  .wm-oauth-consent__scope-desc--muted {
    color: var(--wm-label-tertiary);
    font-style: italic;
  }
  .wm-oauth-consent__scope-key {
    font-family: var(--wm-font-family-mono);
    font-style: normal;
    padding-inline: var(--wm-space-2);
    border-radius: var(--wm-radius-xs);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
  }
  .wm-oauth-consent__scope-trailing {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--wm-space-2);
  }
  .wm-oauth-consent__scope-required {
    white-space: nowrap;
  }
  /* estado concedido/recusado do escopo opcional: TEXTO, não só o
     toggle — é a mesma regra do painel do connect (selo separado). */
  .wm-oauth-consent__scope-state {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-1);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-success);
  }
  .wm-oauth-consent__scope-state .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }
  .wm-oauth-consent__scope--recusado .wm-oauth-consent__scope-state {
    color: var(--wm-label-tertiary);
  }

  /* ---------- nota de honestidade ---------- */
  .wm-oauth-consent__note {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-3);
    margin: 0;
    padding: var(--wm-space-4) var(--wm-space-5);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
  }
  .wm-oauth-consent__note .wm-icon {
    flex: none;
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
    margin-top: 2px;
    color: var(--wm-label-tertiary);
  }

  /* ---------- ações ---------- */
  .wm-oauth-consent__actions {
    display: flex;
    gap: var(--wm-space-4);
  }
  .wm-oauth-consent__actions .wm-button {
    flex: 1 1 0;
    height: var(--wm-control-height-lg);
  }
  .wm-oauth-consent__legal {
    margin: 0;
    text-align: center;
    font-size: var(--wm-font-size-caption2);
    color: var(--wm-label-tertiary);
  }
  .wm-oauth-consent__legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-oauth-consent__scope-icon,
    .wm-toggle__thumb {
      transition: none;
    }
  }

  /* 420px = --wm-bp-sm (tokens.css); @media não aceita var() na condição */
  @media (max-width: 420px) {
    .wm-oauth-consent {
      max-width: none;
      min-height: 100%;
      border-radius: 0;
      box-shadow: none;
    }
  }
}