/* login.css: sign-in page (docs/DEMO-REDESIGN.md, section 6.1). Loads after theme.css.
   Layout only, plus the legacy app.css overrides for the role buttons and the demo box. */

.login-main { max-width: 1100px; margin: 0 auto; padding: 32px 16px 24px; }
/* .login-head also carries .page-head (theme): h1, lead, hairline. */

#already { margin: 0 0 16px; }
#already a, #already a:hover { color: inherit; }

/* ---------- Two columns from 900px: sign-in on the left, demo accounts on the right ---------- */
.login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}
.login-grid > .card { margin: 0; }
@media (min-width: 900px) {
  .login-grid {
    grid-template-columns: minmax(0, 1fr) 22rem;
    /* The 1fr row takes any extra height of the demo box, so "How it works" sits right under the form. */
    grid-template-rows: auto 1fr;
    grid-template-areas: "col demo" "how demo";
  }
  .login-col { grid-area: col; }
  #demo-box { grid-area: demo; }
  .login-how { grid-area: how; }
  /* Not in demo mode: one column at the same width instead of an empty right column. */
  .login-grid:has(> #demo-box[hidden]) {
    grid-template-columns: minmax(0, 44rem);
    grid-template-rows: auto;
    grid-template-areas: "col" "how";
  }
}

/* ---------- Role choice (overrides app.css: 2px border, display grid, weight 800) ---------- */
.roles-label { margin: 0 0 8px; font-size: .875rem; font-weight: 500; color: var(--ink-1); }
.roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.role-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  min-height: 56px; padding: 10px 12px;
  font: inherit; text-align: left; color: var(--ink-1);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.role-btn:hover { border-color: var(--ink-soft); }
.role-btn[aria-pressed="true"] {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
  background: var(--green-tint);
}
.role-btn .role-name { font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.role-btn .role-desc { font-size: .8125rem; line-height: 1.3; color: var(--ink-soft); }
.role-btn[aria-pressed="true"] .role-desc { color: var(--ink-2); }

/* ---------- Sign-in form card ----------
   The form carries the 16px above it, so the space under the role buttons is the same
   whether a form is open or not (the grid gap follows). */
.login-col .login-form { margin: 16px 0 0; }
.login-form h2 { font-size: 1.125rem; margin: 0 0 12px; }
.login-form .msg { margin: 0 0 16px; }

/* ---------- How it works ---------- */
.login-how h2 { font-size: 1.125rem; margin: 0 0 8px; }
.login-how ol { margin: 0 0 12px; padding-left: 1.25rem; }
.login-how li { margin: 4px 0; padding-left: 2px; }
.login-how p { margin: 0 0 8px; max-width: 68ch; }
.login-how p:last-child { margin-bottom: 0; }

/* ---------- Demo accounts (overrides app.css: 2px dashed border, tinted fill, dl grid, dt 700) ---------- */
.demo-box {
  background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: none;
}
.demo-box::before, .demo-box::after { content: none; }
.demo-box h2 { font-size: 1.125rem; color: var(--ink-1); margin: 0 0 4px; }
.demo-box > p { margin: 0; color: var(--ink-2); }
.demo-box > p.muted { color: var(--ink-soft); }
.demo-quick {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  margin: 12px 0 16px;
}
.demo-box dl { display: block; margin: 0; font-size: .875rem; }
.demo-box dt { margin: 12px 0 0; font-size: .875rem; font-weight: 500; color: var(--ink-1); }
.demo-box dd { margin: 4px 0 0; color: var(--ink-2); }
.demo-blocked { list-style: none; margin: 0; padding: 0; }
.demo-blocked li { margin: 0 0 4px; }
.demo-blocked li:last-child { margin-bottom: 0; }

/* Fill-in code buttons: a code chip you can press. */
.demo-fill {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; vertical-align: baseline;
  min-height: 28px; padding: 2px 6px; margin-right: 4px;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  color: var(--ink-1); background: var(--surface-sunk);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.demo-fill:hover { color: var(--ink-1); background: var(--green-tint); border-color: var(--green); }

/* Middle widths: the demo box is full width, so the three "Sign in as" buttons keep their natural width. */
@media (min-width: 561px) and (max-width: 899px) {
  .demo-quick { display: flex; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .login-main { padding-top: 24px; }
}