/* Bouton « Continuer avec Opsidious ».
 *
 * Servi par le service, jamais recopié. C'est ce qui le rend reconnaissable
 * d'un site à l'autre : un bouton que chaque application redessine dérive, et
 * un bouton qui dérive n'est plus un repère. Une application n'écrit qu'un
 * lien et une classe — l'emblème est embarqué ici, il n'y a aucune image à
 * héberger ni à charger.
 *
 *   <link rel="stylesheet" href="https://auth.opsidious.com/button.css">
 *   <a class="opsid-signin" href="/auth/opsidious">Continuer avec Opsidious</a>
 *
 * Le vermillon n'est pas un aplat : mesuré, du blanc sur #EF4444 donne 3,76 de
 * contraste, sous le seuil AA de 4,5. Il vit dans l'emblème et dans le filet,
 * là où sa saturation porte l'identité sans avoir à être lue.
 *
 * Tout est préfixé `opsid-` : cette feuille atterrit dans des pages qui ont
 * déjà la leur, et rien ici ne doit déborder.
 */

.opsid-signin {
  --opsid-bg: #18181b;
  --opsid-bg-hover: #202024;
  --opsid-line: #34343a;
  --opsid-line-hover: #47474f;
  --opsid-text: #f5f5f7;
  --opsid-note: #a1a1aa;
  --opsid-mark: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2255%2040%20180%20200%22%3E%3Cpath%20fill%3D%22%23F5F5F7%22%20fill-rule%3D%22evenodd%22%20d%3D%22M145%2C50%20L223%2C95%20L223%2C185%20L145%2C230%20L67%2C185%20L67%2C95%20Z%20M145%2C72%20L204%2C106%20L204%2C174%20L145%2C208%20L86%2C174%20L86%2C106%20Z%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%22133%22%20width%3D%22174%22%20height%3D%2214%22%20fill%3D%22%23EF4444%22%2F%3E%3Cpolygon%20points%3D%22145%2C88%20138%2C100%20152%2C100%22%20fill%3D%22%23EF4444%22%2F%3E%3Cpolygon%20points%3D%22145%2C192%20138%2C180%20152%2C180%22%20fill%3D%22%23EF4444%22%2F%3E%3C%2Fsvg%3E');

  /* Une grille de deux lignes plutôt qu'un rang avec la mention en absolu :
     l'emblème occupe les deux lignes, donc il se centre tout seul sur le bloc
     de texte au lieu d'être calé à la main. */
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
  row-gap: 2px;

  /* Le bouton s'ajuste à son texte. Les boutons de connexion pleine largeur
     ont l'air d'un bandeau ; celui-ci a l'air d'un bouton. `--bloc` le rend
     pleine largeur pour les formulaires qui en ont besoin. */
  width: auto;
  padding: 13px 22px 13px 18px;
  box-sizing: border-box;

  background: var(--opsid-bg);
  color: var(--opsid-text);
  border: 1px solid var(--opsid-line);
  border-radius: 14px;

  font:
    600 15px/1.3 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

/* L'emblème. Embarqué, donc aucune requête et aucun fichier à héberger.
   Il enjambe les deux lignes : c'est ce qui le centre. */
.opsid-signin::before {
  content: '';
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  background: var(--opsid-mark) center / contain no-repeat;
}

/* La mention dit DEUX choses, et il en faut deux : « via Google » rassure sur
   le chemin — c'est celui que les gens connaissent — et « anonyme » dit ce que
   les autres boutons de connexion ne disent jamais. Les leurs annoncent avec
   QUI ; celui-ci annonce en plus ce qu'il ne prend pas.
   
   Pas « Google Anonymizer » : accoler Google à un nom de produit laisse
   entendre qu'il en est un, ce que ses règles de marque interdisent
   explicitement pour les boutons de connexion. Et « anonymizer » sur-promet —
   on n'anonymise pas Google, on empêche les applications de se recouper. */
.opsid-signin::after {
  content: 'Anonyme — via Google, sans e-mail ni nom';
  grid-column: 2;
  color: var(--opsid-note);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.opsid-signin:hover {
  background: var(--opsid-bg-hover);
  border-color: var(--opsid-line-hover);
}
.opsid-signin:active {
  transform: scale(0.99);
}
.opsid-signin:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 3px;
}

/* Pleine largeur, pour un formulaire qui aligne ses contrôles. */
.opsid-signin--bloc {
  display: grid;
  width: 100%;
}

/* Sans la mention, pour les emplacements serrés. */
.opsid-signin--court {
  grid-template-columns: auto auto;
  row-gap: 0;
}
.opsid-signin--court::before {
  grid-row: 1;
}
.opsid-signin--court::after {
  content: none;
}

/* Une application claire hérite du même bouton sans le redéclarer. */
@media (prefers-color-scheme: light) {
  .opsid-signin:not(.opsid-signin--sombre) {
    --opsid-bg: #ffffff;
    --opsid-bg-hover: #f7f7f8;
    --opsid-line: #d9d9de;
    --opsid-line-hover: #c4c4cc;
    --opsid-text: #18181b;
    --opsid-note: #6b6b76;
    --opsid-mark: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2255%2040%20180%20200%22%3E%3Cpath%20fill%3D%22%2318181B%22%20fill-rule%3D%22evenodd%22%20d%3D%22M145%2C50%20L223%2C95%20L223%2C185%20L145%2C230%20L67%2C185%20L67%2C95%20Z%20M145%2C72%20L204%2C106%20L204%2C174%20L145%2C208%20L86%2C174%20L86%2C106%20Z%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%22133%22%20width%3D%22174%22%20height%3D%2214%22%20fill%3D%22%23EF4444%22%2F%3E%3Cpolygon%20points%3D%22145%2C88%20138%2C100%20152%2C100%22%20fill%3D%22%23EF4444%22%2F%3E%3Cpolygon%20points%3D%22145%2C192%20138%2C180%20152%2C180%22%20fill%3D%22%23EF4444%22%2F%3E%3C%2Fsvg%3E');
  }
}

@media (prefers-reduced-motion: reduce) {
  .opsid-signin {
    transition: none;
  }
  .opsid-signin:active {
    transform: none;
  }
}