/* Portal's own sign-in page (pages/signin.js, pages/signin-gate.js): the gate beside the ways in. Desktop: the gate
   on the left, the words and the ways on the right, the two centred on the page's height. Phone: the gate first,
   smaller, then the words. */
.signin {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: clamp(32px, 6vw, 88px); align-items: center;
  max-width: 1120px; min-height: min(calc(100vh - 200px), 760px); margin: 0 auto; min-width: 0;
}
.signin-gate-side { display: grid; justify-items: end; align-content: center; min-width: 0; }
.signin-gate { display: block; width: min(100%, 540px); aspect-ratio: 6 / 6.3; color: var(--ink); font-family: var(--font-mono); }
.signin-main { display: grid; gap: 24px; align-content: center; min-width: 0; }
.signin-title { font-family: "Funnel Display", var(--font-sans); font-size: clamp(44px, 6vw, 80px); font-weight: 600; letter-spacing: -.032em; line-height: .94; margin: 0; }
.signin-title-sub { display: block; color: var(--ink-4); font-weight: 500; }
.signin-words { display: grid; gap: 14px; }
/* the ways in: pills, as Clusy's own sign-in draws them, each mark in the text's colour */
.signin-ways { display: grid; gap: 12px; width: min(100%, 440px); }
.signin-way {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 24px;
  border: 1px solid var(--rule-2); border-radius: 999px; background: var(--raised); color: var(--ink); text-decoration: none;
  font-size: 15.5px; font-weight: 550; letter-spacing: -.004em; line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out, background .18s ease-out, color .18s ease-out;
}
.signin-way-mark { flex: none; width: 20px; height: 20px; }
/* the address first: the same pill, open, and Continue with email under it, the page's one filled pill */
.signin-email { display: grid; gap: 10px; }
.signin .signin-email-field {  /* over the console's input[type=email] rule, which draws a ruled field */
  width: 100%; height: 54px; padding: 0 22px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 15.5px; letter-spacing: -.004em; outline: none; appearance: none;
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.signin .signin-email-field::placeholder { color: var(--ink-3); }
.signin .signin-email-field:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.signin .signin-email-field[aria-invalid="true"] { border-color: var(--bad); }
.signin-email-problem { margin: -2px 0 0 22px; font-size: 13px; color: var(--bad); }
.signin-way-submit { width: 100%; cursor: pointer; font-family: inherit; appearance: none; background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.signin-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 2px 0; color: var(--ink-3); font-size: 13px; }
.signin-or::before, .signin-or::after { content: ""; height: 1px; background: var(--rule-2); }
@media (hover: hover) {
  .signin-way:hover { transform: translateY(-1px); border-color: var(--ink-2); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .3); text-decoration: none; }
  .signin-way-submit:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5); }
}
.signin-way:active { transform: translateY(0); transition-duration: 60ms; }
.signin-way:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.signin-lead { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin: 0; max-width: 440px; }  /* a terminal's sign-in only */
.signin-terms { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; margin: -6px 0 0; max-width: 440px; }
.signin-terms a { color: var(--ink-2); }
.signin-clusy { color: var(--ink-3); font-size: 13.5px; margin: 0; }
.signin-clusy a { color: var(--ink); }
.signin .notice { margin: 0; }
/* Phone and tablet: the title and the gate share the first row, the gate small at the right, so the ways in are on
   the first screen; everything under them runs the full width. */
@media (max-width: 899px) {
  .signin { grid-template-columns: minmax(0, 1fr) clamp(112px, 36vw, 240px); gap: 22px clamp(16px, 4vw, 32px); align-items: center; min-height: 0; }
  .signin-main { display: contents; }
  .signin-gate-side { grid-row: 1; grid-column: 2; justify-items: end; }
  .signin-gate { width: 100%; }
  .signin-words { grid-row: 1; grid-column: 1; }
  .signin-title { font-size: clamp(34px, 9vw, 56px); }
  .signin-title-sub { font-size: .86em; }
  .signin .notice, .signin-ways, .signin-terms, .signin-clusy { grid-column: 1 / -1; }
  .signin-ways { width: min(100%, 440px); }
}
@media (prefers-reduced-motion: reduce) { .signin-way { transition: none; } }