/* Sign-in block. Linked ONLY from /pickem and /leaderboard, alongside auth.js.
   Uses the site tokens so the signed-in state looks like the rest of the site
   even though the sign-in screen itself is Clerk's hosted Account Portal. */

.auth-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  border:1px solid var(--line); border-left:3px solid var(--brick);
  background:var(--surface-2); border-radius:2px;
  padding:20px 22px;
}
.auth-card.is-in{border-left-color:var(--red)}

.auth-copy{min-width:0}
.auth-lead{
  margin:0; font-size:15.5px; color:var(--ink); font-weight:600;
}
.auth-lead strong{
  font-family:var(--mono); font-weight:600; color:var(--red);
  overflow-wrap:anywhere;              /* long usernames must not blow the row out */
}
.auth-sub{margin:5px 0 0; font-size:13.5px; color:var(--ink-2); max-width:56ch}

.auth-btn{
  flex:none; cursor:pointer;
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--surface); background:var(--red);
  border:1px solid var(--red); border-radius:2px;
  padding:11px 20px;
}
.auth-btn:hover{background:var(--brick); border-color:var(--brick)}
.auth-btn:focus-visible{outline:2px solid var(--brick); outline-offset:3px}
.auth-btn.ghost{
  color:var(--ink-2); background:transparent; border-color:var(--line);
}
.auth-btn.ghost:hover{color:var(--ink); border-color:var(--ink-3); background:transparent}

/* ---- Slim status strip -------------------------------------------------
   Replaces the full card in both states. Tester feedback was that a signed-in
   user does not need a panel telling them so — it took the top of the page for
   information they already had. Both states are the same height, so the strip
   can sit at the top of a page without the layout jumping when Clerk resolves
   and swaps one for the other. */
.auth-strip{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding:9px 0;
  font-size:13px; color:var(--ink-2);
}
.auth-strip .who{min-width:0; overflow-wrap:anywhere}
.auth-strip .who strong{
  font-family:var(--mono); font-weight:600; color:var(--ink);
}
.auth-strip .hint{color:var(--ink-3); font-size:12.5px; display:block}
.auth-strip .act{
  flex:none; cursor:pointer; background:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
  border:0; border-bottom:1px solid var(--line); padding:2px 0;
}
.auth-strip .act:hover{color:var(--ink); border-bottom-color:var(--brick)}
.auth-strip .act:focus-visible{outline:2px solid var(--brick); outline-offset:3px}
/* Signed out still gets a real button — it is a call to action, not a status. */
.auth-strip .act.in{
  color:var(--surface); background:var(--red); border:1px solid var(--red);
  border-radius:2px; padding:7px 16px;
}
.auth-strip .act.in:hover{background:var(--brick); border-color:var(--brick); color:var(--surface)}

/* Reserves the row before Clerk resolves so the page doesn't jump.
   40px is the SHORTEST the strip can be, which is what min-height is for.

   It used to be raised to 132px below 560px, sized to the signed-OUT strip —
   which is three times taller on a phone because its hint wraps to three
   lines. The consequence was measured rather than guessed: at 375px a
   signed-IN reader got a 40px strip inside a 132px box, so /pickem,
   /leaderboard and /record each opened with ~91px of blank space above the
   content. Reserving the tallest state to spare a one-time shift, at the cost
   of a permanent hole in the other state, is the wrong way round. */
#auth-slot{min-height:40px}
/* ...EXCEPT once the strip has stood down for good. The reservation above
   exists to stop a shift while Clerk resolves; when the page below has taken
   over explaining a failure, nothing is coming and the reserved 40px is the
   permanent hole the note above calls the wrong way round. */
#auth-slot.is-quiet{min-height:0}

@media (max-width:560px){
  .auth-card{align-items:flex-start}
  .auth-btn{width:100%; text-align:center}
  /* And the two states are brought to the same height rather than one being
     padded to the other: the hint is what makes the signed-out strip tall, and
     on a phone it is now redundant — the header carries a red "Log in" button
     on every page, which says the same thing in less room. Desktop keeps it,
     where there is space for a line of reassurance. */
  .auth-strip .hint{display:none}
}