/* The sign-in pages' template (ACC-56): served at /access/sign-in.css after the kit
   (/_content/Biqik.Kernel.Client/kernel.css: tokens light and dark, type, buttons, the font;
   platform BRW-46). Two kinds of class:
   - bq-access-*: the template's own (page, card, logo, lead, method sections, alerts, the account
     on the registration page, the way back). A method's part never uses them.
   - bq-signin-*: the shared vocabulary of contract-access (CAC-8, SignInStyle), the only classes
     a method's part uses. Their look is defined here, once, for every method.
   Colours are the kit's tokens only (platform UI-50); sizes from the scale (UI-55, UI-56). */

/* Page and card: a centred 400 px card on the page ground; on a phone the card is the page. */
.bq-access { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 48px 16px; }
.bq-access-card { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 32px; }
.bq-access-logo { display: block; height: 28px; width: auto; margin: 0 0 32px; }
.bq-access-logo-brand-stroke { stroke: var(--brand); }
.bq-access-logo-brand-fill { fill: var(--brand); }
.bq-access-logo-ink-stroke { stroke: var(--logo-ink); }
.bq-access-logo-ink-fill { fill: var(--logo-ink); }
.bq-access h1 { margin: 0 0 6px; }
.bq-access-lead { color: var(--text-2); margin: 0 0 28px; }
.bq-access-lead strong { color: var(--text); font-weight: 600; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* The core's alerts, direct children of the card: a failed attempt, a refused registration, an invalid link, no method. */
.bq-access-card > [role=alert] { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 12px 16px; margin: 0 0 24px;
  font-size: 14px; font-weight: 500; }

/* The account a registration link is for. */
.bq-access-who { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: var(--surface-2); margin: 0 0 24px; }
.bq-access-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text);
  display: grid; place-items: center; font-weight: 600; flex: none; }
.bq-access-who b { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bq-access-who span:not(.bq-access-avatar) { display: block; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }

/* Methods: one section each, its title a heading (hidden from sight when it is the only one),
   "or" between two. */
.bq-access-method h2 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
.bq-access-method form { margin: 0; }
.bq-access-method + .bq-access-method { margin-top: 24px; }
.bq-access-method + .bq-access-method::before { content: attr(data-or); display: block; text-align: center; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 20px;
  background: linear-gradient(to right, var(--line) calc(50% - 24px), transparent calc(50% - 24px), transparent calc(50% + 24px), var(--line) calc(50% + 24px)) center / 100% 1px no-repeat; }

/* The template's own buttons (sign out) and the way back. */
.bq-access-button { width: 100%; }
.bq-access-primary, .bq-access-primary:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.bq-access-signed-in { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.bq-access-signed-in p { color: var(--text-2); margin: 0 0 12px; }
.bq-access-signed-in strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.bq-access-back { display: block; text-align: center; margin-top: 16px; font-size: 14px; font-weight: 500; }

/* The vocabulary (contract-access CAC-8). */
.bq-signin-action, .bq-signin-secondary, .bq-access-button { width: 100%; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; }
/* One primary per page (platform UI-58): the first method's action; every other one is secondary. */
.bq-access-method:first-child .bq-signin-action, .bq-access-method:first-child .bq-signin-action:hover:not(:disabled) {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.bq-signin-icon { width: 20px; height: 20px; flex: none; }
.bq-signin-field { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin: 0 0 16px; }
.bq-signin-field input { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 6px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 400; }
.bq-signin-field input:read-only { background: var(--surface-2); }
.bq-signin-intro { color: var(--text-2); margin: 0 0 16px; }
.bq-signin-help { font-size: 13px; color: var(--text-2); margin: 12px 0 0; }
.bq-signin-problem { font-size: 13px; color: var(--bad); margin: 8px 0 0; }
.bq-signin-problem:empty { display: none; }
.bq-signin-secondary { margin-top: 12px; }

@media (max-width: 767px) {
  html { font-size: 16px; }
  .bq-signin-field input { font-size: 16px; }
}
@media (max-width: 520px) {
  .bq-access { justify-content: flex-start; background: var(--surface); padding: 40px 16px 24px; }
  .bq-access-card { border: 0; box-shadow: none; padding: 0; max-width: none; }
}