/* ═══ sign in ═════════════════════════════════════════════════════════════
   One centred column at every width. The tokens, the buttons and the crab are
   the app's own — this sheet only lays them out and sets the phone's footer.  */

body.signin {
  display: grid;
  /* explicit rows, as everywhere else — the header hides itself on a phone and
     auto-placement would then slide the footer up a track */
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* the workspace reserves this for the mobile tab bar; there is no tab bar here */
  padding-bottom: 0 !important;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  overflow: auto;
}

.signin-top {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.4rem;
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
}
/* Same line, same place at every width: under the form, not up in the bar. */
.signin-col .alt { margin: 0; font-size: .84rem; color: var(--muted) }
.signin-col .alt a, .signin-foot a, .legal a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
}
.signin-col .alt a:hover, .signin-foot a:hover { border-bottom-color: var(--rust) }
.signin .brand { text-decoration: none }

.signin-main { grid-row: 2; display: flex; align-items: center; justify-content: center; padding: 2rem 1.4rem }
.signin-col { width: 23rem; max-width: 100%; display: flex; flex-direction: column; gap: 20px }
.phone-brand { display: none }

.signin-head { display: flex; flex-direction: column; gap: 5px }
.signin-head p[hidden] { display: none }
.signin-head h1 {
  margin: 0;
  font: 600 1.25rem/1.3 var(--font-ui);
  letter-spacing: -.015em;
  color: var(--fg);
  text-transform: none;
}
.signin-head p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted) }

#signinform { display: flex; flex-direction: column; gap: 14px }
#signinform label { display: flex; flex-direction: column; gap: 6px }
/* display:flex outranks the hidden attribute, so say it again */
#signinform label[hidden] { display: none }
#signinform .lab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--muted);
}
#signinform .lab a { font-size: .76rem; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--edge) }
#signinform .lab small { font-size: .72rem; color: var(--muted) }
#signinform input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;
  background: var(--inset);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  color: var(--fg);
  font: 400 .88rem var(--font-ui);
  padding: .55rem .7rem;
}
#signinform input::placeholder { color: var(--muted); opacity: .8 }
#signinform .primary { min-height: 2.5rem }

/* The widget draws its own box; it only needs somewhere to sit in the column,
   at the same width as the fields it sits under. */
.turnstile { width: 100%; min-height: 65px }
.turnstile iframe { width: 100% !important }

/* The compiler's own shape for a problem: code, then what went wrong. */
.signin-error {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  font-size: .8rem;
  color: var(--red);
}
.signin-error b {
  font: 600 .74rem var(--font-code);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-radius: 4px;
  padding: .1rem .35rem;
}

.rule { display: flex; align-items: center; gap: .7rem }
.rule i { flex: 1; height: 1px; background: var(--edge-soft) }
.rule span { font-size: .76rem; color: var(--muted) }

.providers { display: flex; flex-direction: column; gap: 10px }
.providers .btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* icon, then label — centred reads as a dialog */
  gap: .6rem;
  min-height: 2.5rem;
  padding: .55rem .8rem;
}
.providers svg { flex: 0 0 auto }

.legal { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--muted) }

/* The phone footer only exists on a phone. */
.signin-foot { grid-row: 3; display: none }

/* Tablet is the browser layout with bigger targets — same top bar, same centred
   column, no panel around it. A tablet is a small desktop, not a large phone. */
@media (min-width: 768px) and (max-width: 1099px) {
  #signinform input, #signinform .primary, .providers .btn { min-height: 2.7rem }
}

/* Phone: no top bar, the action in the thumb zone, everything else scrolls. */
@media (max-width: 767px) {
  .signin-top { display: none }
  .phone-brand { display: inline-flex }
  /* the column is taller than a phone once the providers are there, so this row
     is what scrolls — the footer stays put */
  .signin-main {
    align-items: flex-start;
    padding: 3.4rem 1.5rem 1.4rem;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .signin-col { width: 100%; gap: 20px }
  .signin-head h1 { font-size: 1.35rem; letter-spacing: -.02em }
  .signin-head p, .legal { font-size: .88rem }
  #signinform input, .providers .btn { min-height: 2.9rem; font-size: .95rem }
  .signin-col .alt { display: none }        /* the footer carries it on a phone */
  .providers .btn { justify-content: center }
  /* one Sign in, and it is the one under your thumb */
  #signinform .primary { display: none }
  .signin-foot {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px 34px;
    background: var(--panel);
    border-top: 1px solid var(--edge);
  }
  .signin-foot .primary { width: 100%; min-height: 3rem; font-size: .98rem }
  .signin-foot p { margin: 0; text-align: center; font-size: .84rem; color: var(--muted) }
}