/* ═══════════════════════════════════════════════════════════════════════════
   Trip Schedule — index.html's own rules (WORKLIST #332)
   The sign-in card.
   Linked after tokens.css, styles.css and the sheets of the blocks the door
   is built from (#597 fix 5: blocks/controls.css, behaviours.css,
   round3.css) by index.html alone (scripts/lib/style-files.js,
   docs/contracts/styles.md): a rule here may select only what index.html's
   HTML and page script emit, and places the blocks on the card — it never
   restyles a block. Requires tokens.css; no raw hex values, as styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Login ────────────────────────────────────────────────────────────── */

.login-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed in px, not rem: a larger text size grows the words, never the
     margins round them (#597 fix 2), so the password box keeps its room. */
  padding: 24px;
  /* Flat, not a gradient wash — one calm surface. */
  background: var(--color-bg);
}
/* The card is one stack (#597 fix 9, S10 round 2 item 3): the title, why
   the door is showing, and the two ways in — the form's part and the
   passkey's part — each one layout token (--space-4) from the next; no
   part spaces itself. */
.login-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 25rem;
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 21px 18px;
  box-shadow: var(--shadow-md);
  /* S10-7, S10-9: the door's boxes are 44 px and its two ways in 52 px, set through the blocks' own
     height settings (controls.js writes them on the root; the card's value wins inside it). */
  --k-box-h: 44px;
  --k-btn-h: 52px;
}
.login-card h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  letter-spacing: -0.02em;
}
/* S10-7: the boxes' text is 16 px (a 13 px field makes a phone zoom on focus). */
.login-card .k-text-frame { font-size: 16px; }
/* S10-9, S10-10: both ways in are 52 px, radius 8, 15 px; the passkey button stays plain (K1). */
.login-go .k-btn,
.passkey-slot > .k-btn { min-height: 52px; border-radius: 8px; font-size: 15px; }

/* Why the door is showing (S10 D8, B9): one line under the title. */
.login-out {
  margin: 0;
  font-size: var(--text-sm);
  text-align: center;
}

/* The form (#597 fix 8): B4's form host holds it, a stack with B4's own
   gap (#616); the two boxes (K16; Show in the password's box is K16's
   action, its room the block's), Sign in (B7), Try again's sentence (B5's
   form host, #597 fix 9), the door's note, then the one line for a person
   with no password — each in the stack, none spacing itself. */
/* The way in fills the card, so "Signing in…" and "Try again" change the
   words and nothing moves (S10 D1; item 3: the same button, K1's set()). */
.login-go { align-self: stretch; }
.login-go .k-btn { width: 100%; }
.login-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.login-none {
  margin: 0;
  font-size: var(--text-xs);
}
/* #597 (S10): a line that has nothing to say takes no room. */
.login-note:empty,
.login-card .passkey-said:empty { display: none; }

/* The passkey's way in (#597): under the form on a first visit, alone on a
   device that has used one, "Use the emailed password instead" under it.
   Its inner gap is the stack's (B4's, --space-3; #597 fix 9). */
.passkey-signin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.passkey-signin[hidden],
.login-way[hidden] { display: none; }
.passkey-slot { align-self: stretch; }
.passkey-slot > .k-btn { width: 100%; }
.login-card .passkey-said { margin: 0; text-align: center; }

/* The demo site's accounts (A17), from site.json: apart from the door, the
   stack's gap above its rule (#597 fix 9: no part spaces itself). */
.login-demo {
  position: relative;
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--color-border);
  font-size: var(--text-xs);
}

@media (max-width: 40rem) {
  .login-page { padding: 12px; }
}