/* The sign-in group: /login (and /forgot), /enroll, /recover.
   Language A, and nothing here that base.css already says: the shell (backdrop,
   crest, card, steps, PIN cells, notices, footer, loader) is shared with /lock.
   What this file adds is what only these three pages have — the landing state,
   the Help button and its dialog, the choice cards, the setup progress bar, the
   authenticator panel and the recovery contact card.
   Every value comes from design/mocks/Sign in.dc.html (language A is frozen). */

/* ---- the stage: the landing and the card share one grid cell ---------------- */

.auth-stage {
  display: grid;
  grid-template-areas: "step";
  width: 100%;
  justify-items: center;
}

.auth-stage > * { grid-area: step; }

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

/* The entry animation lives on an inner element: an animation with
   `fill: both` would otherwise hold opacity 1 and beat the fade-out below. */
.landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing h1 {
  margin: 32px 0 0;
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
}

.landing-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.landing button {
  margin-top: 40px;
  min-height: 56px;
  padding: 0 44px;
  font-size: 17px;
  box-shadow: 0 14px 34px -12px rgba(28, 27, 24, .5);
}

.auth-stage.is-open .landing {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}

/* The console has no landing: its sign-in opens on the card, as it always has. */
body[data-realm="admin"] .landing { display: none; }

/* The card fades up out of the landing. Its height is animated by auth-ui.js,
   which measures .card-inner — so the padding lives on the inner element. */
.auth-card {
  padding: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), height .5s var(--ease);
}

.auth-stage.is-open .auth-card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.card-inner {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 5.5vw, 32px);
}

/* The steps inside the card keep the card's centred text; forms are left-aligned
   by base.css. A step that is leaving is faded out by shell.js's swap(). */
.auth-card .step { text-align: center; }
.auth-card .step > p { margin: 0; }
.auth-card .step > p + p { margin-top: 12px; }
.auth-card .hint { text-align: left; }

.auth-card .card-text { margin: 0; font-size: 14.5px; }

/* say() replaces the class on the element it writes into, so anything these
   hooks must look like has to be said by the id. #code-note is copy, not a
   notice: it tells the student where the code went. */
.auth-card #code-note,
.auth-card #code-note.ok {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  animation: none;
}

.auth-card #code-note::before { display: none; }

/* ---- Help ------------------------------------------------------------------- */

.help-button {
  position: absolute;
  top: clamp(14px, 2.5vw, 24px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 5;
  min-height: 50px;
  padding: 0 22px 0 16px;
  border: 1.5px solid var(--ink);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 15.5px;
  box-shadow: 0 10px 24px -14px rgba(28, 27, 24, .4);
  animation: sc-fade 1.2s ease-out 1.4s both;
}

html.sc-loading .help-button { animation: none; opacity: 0; }

/* The console's sign-in keeps the chrome it had: no landing, no Help dialog
   (that dialog is written for a student). */
body[data-realm="admin"] .help-button { display: none; }

.help-button:hover {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 10px 24px -14px rgba(28, 27, 24, .4);
}

.help-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

dialog.help-dialog { text-align: left; }

.help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.help-head h2 { font-size: 24px; font-weight: 700; line-height: 1.2; }

button.help-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1.5px solid var(--hair);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: none;
}

button.help-close:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
}

.help-dialog > p { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }

.help-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.help-step {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--hair);
  border-radius: 16px;
  background: var(--white);
}

.help-step .num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rule);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.help-step:first-child .num { background: var(--accent); }

.help-step-body { display: flex; flex-direction: column; gap: 3px; }
.help-step-body strong { font-size: 15.5px; font-weight: 700; }
.help-step-body span { font-size: 14px; line-height: 1.5; color: var(--text-2); }

.help-dialog .dialog-actions button { width: 100%; }

/* ---- numbered lists (the welcome page, the contact page) --------------------- */

ol.steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

ol.steps-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
}

ol.steps-list .num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rule);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

ol.steps-list li:first-child .num { background: var(--accent); }

/* ---- choice cards (a second factor, a second step) --------------------------- */

.choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  text-align: left;
}

button.choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 0;
  padding: 14px 18px;
  border: 1.5px solid var(--hair);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

button.choice:hover {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--ink);
  scale: 1.015;
  box-shadow: none;
}

button.choice.recommended {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

button.choice.recommended:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

/* The one the student picked, while its form is open below it. */
button.choice.is-chosen {
  border-color: var(--accent);
  background: var(--tint);
}

.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-note { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-2); }
.choice.recommended .choice-note { color: rgba(255, 255, 255, .82); }
.choice.recommended:hover .choice-note { color: var(--text-2); }

.choice-tag {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.choice.recommended:hover .choice-tag { color: var(--ink); }

/* The sign-in-with-a-passkey button on the password step: the same idea, bigger. */
button.passkey-big {
  width: 100%;
  min-height: 60px;
  margin-top: 20px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: 0 12px 28px -12px rgba(28, 27, 24, .5);
}

/* A form that expands under the card it belongs to (~.35 s, mock timing). */
.auth-card .collapse { transition-duration: .35s; }
.auth-card .collapse form { margin-top: 0; padding: 4px 0 6px; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 2px;
  color: var(--hint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.centred { display: flex; justify-content: center; margin-top: 10px; }

/* A button that is not inside a form still spans the card. */
button.wide { width: 100%; margin-top: 18px; }

/* ---- the setup progress bar (enrollment) ------------------------------------- */

.setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.setup-head .eyebrow { margin: 0; }
.setup-head .step-count { font-size: 12px; font-weight: 600; color: var(--hint); }

.progress {
  height: 3px;
  margin-bottom: 22px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .6s var(--ease);
}

.progress-fill.one { width: 33%; }
.progress-fill.two { width: 66%; }
.progress-fill.three { width: 100%; }

/* ---- the authenticator panel (enrollment) ------------------------------------ */

.totp-panel {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  text-align: left;
}

.totp-panel .qr {
  flex: none;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  padding: 8px;
  border: 1.5px solid var(--hair);
  border-radius: 14px;
  background: var(--white);
}

.totp-panel .qr svg { width: 100%; height: auto; }

.totp-aside { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.totp-aside p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

.totp-aside code {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f2e9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .08em;
  word-break: break-all;
}

@media (max-width: 420px) {
  .totp-panel { flex-direction: column; align-items: flex-start; }
}

/* ---- the recovery contact card ------------------------------------------------ */

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1.5px solid var(--hair);
  border-radius: 16px;
  background: var(--white);
  text-align: left;
}

.contact-block { display: flex; flex-direction: column; gap: 4px; }

.contact-block .eyebrow { margin: 0; font-size: 12px; letter-spacing: .1em; }

.contact-card a {
  font-size: 17px;
  font-weight: 700;
  word-break: break-all;
  text-underline-offset: 4px;
}

ul.dotted {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}

ul.dotted li { display: flex; gap: 10px; }

ul.dotted li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- small screens ------------------------------------------------------------ */

@media (max-width: 520px) {
  .help-button { min-height: 44px; padding: 0 16px 0 12px; font-size: 14.5px; }
  .landing h1 { margin-top: 24px; }
  .landing button { margin-top: 28px; }
}