/* The sign-in buttons, in each company's own logo and colours (#36), lifted
   from чуй. ONE file for both places a person signs in: the website's
   /signin and the approval card an assistant opens (src/signin/consent.js
   links this file too), so the two can never drift apart.

   Markup: <button class="door door-apple"><i aria-hidden="true"></i> Continue with Apple</button>
   A door with no rule here still renders as a plain, working button. */

.door{
  width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 18px;margin:0;border-radius:99px;border:1px solid transparent;
  font:inherit;font-weight:600;font-size:15px;letter-spacing:-.01em;cursor:pointer;
}
.door:hover{filter:brightness(.96)}
.door:active{opacity:.85}
.door i{width:18px;height:18px;flex:none;display:block}

/* Apple: white with a black outline on a light page, black on a dark one
   (Emil, 2026-09-28) — both are Apple's own styles. The logo is a mask, so
   it takes the button's own text colour. */
.door-apple{background:#fff;color:#000;border-color:#000}
.door-apple i{
  width:17px;height:20px;margin-top:-3px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M11.7 8.9c0-2 1.6-2.9 1.7-3-.9-1.4-2.4-1.5-2.9-1.6-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7C3.6 4.3 2.3 5.1 1.6 6.3.2 8.7 1.2 12.3 2.6 14.3c.7 1 1.5 2.1 2.5 2 1-.04 1.4-.65 2.6-.65s1.6.65 2.6.63c1.1-.02 1.8-1 2.4-2 .8-1.15 1.1-2.26 1.1-2.32-.02-.01-2.1-.81-2.1-3.06zM9.8 3c.5-.65.9-1.55.8-2.45-.8.03-1.7.53-2.3 1.18-.5.57-.9 1.5-.8 2.38.9.07 1.8-.45 2.3-1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M11.7 8.9c0-2 1.6-2.9 1.7-3-.9-1.4-2.4-1.5-2.9-1.6-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7C3.6 4.3 2.3 5.1 1.6 6.3.2 8.7 1.2 12.3 2.6 14.3c.7 1 1.5 2.1 2.5 2 1-.04 1.4-.65 2.6-.65s1.6.65 2.6.63c1.1-.02 1.8-1 2.4-2 .8-1.15 1.1-2.26 1.1-2.32-.02-.01-2.1-.81-2.1-3.06zM9.8 3c.5-.65.9-1.55.8-2.45-.8.03-1.7.53-2.3 1.18-.5.57-.9 1.5-.8 2.38.9.07 1.8-.45 2.3-1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Google: the four-colour G, on Google Identity's light and dark buttons. */
.door-google{background:#fff;color:#1f1f1f;border-color:#747775}
.door-google i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat}

/* Microsoft: the four squares, on Microsoft's light and dark buttons. */
.door-microsoft{background:#fff;color:#5e5e5e;border-color:#8c8c8c}
.door-microsoft i{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E") center / contain no-repeat}

/* Dark: by the system setting unless the page says otherwise, and when it
   says dark — the same two switches site.css answers to. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .door-apple{background:#000;color:#fff;border-color:#8e918f}
  :root:not([data-theme="light"]) .door-google{background:#131314;color:#e3e3e3;border-color:#8e918f}
  :root:not([data-theme="light"]) .door-microsoft{background:#2f2f2f;color:#fff;border-color:transparent}
}
:root[data-theme="dark"] .door-apple{background:#000;color:#fff;border-color:#8e918f}
:root[data-theme="dark"] .door-google{background:#131314;color:#e3e3e3;border-color:#8e918f}
:root[data-theme="dark"] .door-microsoft{background:#2f2f2f;color:#fff;border-color:transparent}