/* ==========================================================================
   Sign-in page.

   Deliberately self-contained and generic, and kept OUT of app.css for that
   reason: this is the only stylesheet served without a session, so it must not
   name the company, the product, or reveal anything about what sits behind the
   login. No logo, no brand colours keyed to a recognisable palette, no class
   names that give the game away.

   Matched to thermals.app/login on purpose. Somebody bounced here from any app
   in the estate should not feel handed off to a different system in the middle
   of signing in - the identity provider being visibly the same front door is
   most of what makes an SSO redirect feel like one product rather than two.
   The palette is copied from slapp's login.css; if that one changes, this one
   is the other half of the pair.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #1d3550 0, #101922 60%) #101922;
  color: #fff;
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.login-shell {
  width: min(380px, calc(100% - 32px));
  padding: 24px 0;
}

.login-card {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 40px 28px;
  border: 1px solid #2f4459;
  border-radius: 16px;
  background: #182631;
  text-align: center;
}

.login-card[hidden] { display: none; }

.login-card h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.login-button {
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Messages. Three tones, one shape - the JS sets `notice bad|warn|ok`.
   -------------------------------------------------------------------------- */

.notice {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  text-align: left;
}

.notice[hidden] { display: none; }
.notice.bad { background: rgb(226 96 60 / 16%); color: #ffb4a0; }
.notice.warn { background: rgb(226 176 60 / 16%); color: #ffd9a0; }
.notice.ok { background: rgb(77 163 255 / 16%); color: #a8d1ff; }

/* --------------------------------------------------------------------------
   Request access.

   The panel that replaces the sign-in card once a real Google account has been
   refused. Same card, same width, so it reads as the next step rather than as
   an error page - which is what it is.
   -------------------------------------------------------------------------- */

.login-sub {
  margin: -8px 0 0;
  color: #a7bccd;
  font-size: 13px;
}

.login-form {
  display: grid;
  gap: 12px;
  width: 100%;
  text-align: left;
}

.login-form label {
  color: #a7bccd;
  font-size: 12px;
}

/* Who Google says you are. Shown, never collected - the server reads both
   fields back out of the verified token, so this is a receipt, not an input. */
.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid #2a3d4f;
  border-radius: 12px;
  background: rgb(16 25 34 / 60%);
  text-align: left;
}

.identity img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #101922;
  object-fit: cover;
}

.identity img[hidden] { display: none; }
.identity-name { font-weight: 600; }
.identity-email { color: #a7bccd; font-size: 12px; word-break: break-all; }
.identity-note { color: #7f95a8; font-size: 11px; margin-top: 2px; }

textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid #2f4459;
  border-radius: 12px;
  background: #101922;
  color: #fff;
  font: inherit;
  resize: vertical;
}

textarea:focus-visible { outline: 2px solid #4da3ff; outline-offset: 1px; }

/* Turnstile draws its own box; this only reserves the height so the button
   does not jump when the widget lands. */
.turnstile { min-height: 65px; }
.turnstile[hidden] { display: none; }

.login-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-primary {
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid #4da3ff;
  border-radius: 999px;
  background: #4da3ff;
  color: #08111f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.login-primary:hover { background: #6bb2ff; border-color: #6bb2ff; }
.login-primary:disabled { opacity: .55; cursor: default; }
.login-primary:focus-visible { outline: 2px solid #4da3ff; outline-offset: 2px; }

.login-quiet {
  border: 0;
  background: none;
  color: #a7bccd;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.login-quiet:hover { color: #4da3ff; }

/* --------------------------------------------------------------------------
   System use notification. Sits below the card rather than inside it: it is a
   condition of using the system, not a step in signing in, and burying it in
   the card would make the sign-in button compete with it for the same space.
   Quiet by design - readable, not shouted, so it is actually read.
   -------------------------------------------------------------------------- */

.login-notice {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #2a3d4f;
  border-radius: 12px;
  background: rgb(16 25 34 / 60%);
  color: #93a9bb;
  font-size: 11.5px;
  line-height: 1.55;
  text-align: left;
}

.login-notice p { margin: 0 0 8px; }
.login-notice p:last-child { margin-bottom: 0; }
.login-notice strong { color: #c4d5e3; }