/* Страницы входа и приглашения: узкая колонка и выбор цвета без инлайн-стилей — CSP
   `style-src 'self'` запрещает атрибут style, поэтому цвет кружка задаёт класс person-N.
   Значения — только токены из tokens.css. */

@layer components {
  .auth { max-inline-size: var(--sheet-w); margin-inline: auto; padding-block-start: var(--sp-6); display: grid; gap: var(--sp-5); }
  .auth .form { max-inline-size: none; }
  .auth-h { display: grid; gap: var(--sp-2); }
  .auth .lead { color: var(--ink-2); line-height: 1.5; }
  .auth .lead b { color: var(--ink); font-weight: 600; }
  .auth fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .auth legend { padding: 0; margin-block-end: 6px; }

  .swatch.person-1 { --c: var(--person-1); }
  .swatch.person-2 { --c: var(--person-2); }
  .swatch.person-3 { --c: var(--person-3); }
  .swatch.person-4 { --c: var(--person-4); }
  .swatch.person-5 { --c: var(--person-5); }
  .swatch.person-6 { --c: var(--person-6); }
  /* Радиокнопка невидима и растянута на всю цель касания (44 px); кольцо — у отмеченного */
  .swatch > input { position: absolute; inset: -6px; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
  .swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c); }
  .swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 7px; }
}