/* The sign-in pages: the end user's door, the operator's door, and the
 * bootstrap password change. One card, shared by all three.
 *
 * Shared rather than repeated, because these pages drifted apart once already
 * by each carrying its own <style> block. On top of tokens.css, base.css,
 * buttons.css and controls.css: a label, a field and the button are the same
 * ones every other page uses, and nothing here redefines them. No literal
 * colour: if a value is missing, it belongs in tokens.css.
 *
 * Each page says which door it is in its title ("Sign in to your desktops",
 * "Sign in to the console"), and the console's door points at the end
 * user's. (The end user's pointed back at the console until 2026-10-14, when
 * the product owner had that line taken off.)
 * An operator's console used to accept an end user's password and then say
 * the account had no role, which is the wrong door answering.
 */

main.signin-page {
  min-height: 100vh; display: grid;
  /* An explicit track. An implicit one is as wide as its content, and a card
     that says `min(420px, 100%)` then measures 100% of itself. */
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
  justify-items: center; padding: 0 20px;
}
.signin { width: min(420px, 100%); align-self: center; padding: 40px 0 24px; }
.signin .brand { justify-content: center; margin-bottom: 28px; }
.signin .brand img { height: 28px; }
.signin .brand .word { font-size: 16px; }

.signin-card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px 28px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--fg) 4%, transparent), 0 12px 32px color-mix(in srgb, var(--fg) 7%, transparent);
}
.signin-card .lede { margin: 6px 0 24px; font-size: 13.5px; color: var(--fg-2); }
.signin-card .field { margin-bottom: 16px; }
.signin-card .input { height: 40px; }
.signin-card .btn-lg { width: 100%; min-height: 42px; justify-content: center; font-size: 14.5px; margin-top: 6px; }
.signin-card .lede .mono { overflow-wrap: anywhere; }
/* The organization a tenant's host names, shown where the box would be. */
.signin-card .org-fixed { margin: 0; font-size: 15px; color: var(--fg); overflow-wrap: anywhere; }

/* Explains why a door is closed. Amber rather than red: this is a required
   next step, not a failure. */
.signin-note {
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 20px;
  background: color-mix(in srgb, var(--st-degraded) 9%, var(--ink-2));
  font-size: 13px; color: var(--fg-2);
}
.signin-note b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }

/* What a sign-in said back. Announced by role="alert", so it must not be
   display:none when empty or a screen reader will not hear the change; the
   min-height keeps its line, so a message arriving moves nothing. */
.auth-msg { margin-top: 12px; font-size: 13px; min-height: 20px; text-align: center; color: var(--fg-2); }
.auth-msg.err { color: var(--st-offline); }
.auth-msg.ok { color: var(--st-in-use); }

/* The ways an organization lets its people sign in. Filled by signin.js once
   an organization is typed, and empty for one with none. */
.sso { display: flex; flex-direction: column; gap: 8px; }
.sso a {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--fg); font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.sso a:hover { border-color: var(--accent); text-decoration: none; }
/* The connection that claims the typed address's domain. Marked, not
   filtered: a contractor may still need the other door. */
.sso a.is-yours { border-color: var(--accent); background: var(--tint); font-weight: 600; }
.sso a small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--fg-3); }
/* A letter, not a logo: an identity provider's mark is its own, and an
   arbitrary brand string must not become an arbitrary picture. */
.sso .mk {
  width: 22px; height: 22px; border-radius: 5px; flex: none; display: grid; place-items: center;
  background: var(--ink-3); color: var(--fg-2); font-size: 12px; font-weight: 700;
}
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; font-size: 12.5px; color: var(--fg-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.door { margin-top: 18px; text-align: center; font-size: 13px; color: var(--fg-2); }
.signin-foot { padding: 0 0 26px; font-size: 12.5px; color: var(--fg-3); text-align: center; }

@media (max-width: 700px) {
  .signin-card { padding: 24px 20px; }
}