/* bgroup site login page. Colours, type, space and radii come from /brand/bgroup.tokens.css (aligned with bgroup.io); this file adds the
   fonts and the layout of /login (login.html). The ground is the faint bgroup.io grid (the .bgroup-grid class, set on the body).
   Status is a shape plus a word: the error notice is the console's red square and its message. */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-wrap: break-word; }
/* Both grids are pinned to the viewport, so on the split layout the lines of the ground and of the dark panel meet at the join. */
.login-body { background-attachment: fixed; }

.login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
@supports (min-height: 100svh) { .login { min-height: 100svh; } }

/* On a phone the page is the card. From 960px it is split: the card on the grid, and the dark panel (login.html, .panel-dark) as a
   right-hand column that carries the same 48px grid in white at 4.5%, so the lines run on across the join. */
.login-aside { display: none; }
@media (min-width: 960px) {
  .login-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); min-height: 100vh; }
  @supports (min-height: 100svh) { .login-split { min-height: 100svh; } }
  .login { min-height: 0; padding: 48px clamp(24px, 4vw, 64px); }
  .login-aside { position: relative; display: grid; align-content: center; padding: 64px clamp(40px, 5vw, 88px); overflow: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px; background-position: 0 0; background-attachment: fixed; }
  .login-aside-in { width: min(100%, 480px); }
}
.login-aside-title { margin: 0 0 20px; font: 600 12px/16px var(--bgroup-font-sans); letter-spacing: var(--bgroup-tracking-eyebrow); text-transform: uppercase; color: var(--bgroup-white); }
.login-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.login-steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font: 400 16px/24px var(--bgroup-font-sans); }
.login-steps li::before { content: counter(step, decimal-leading-zero); font: 400 12px/24px var(--bgroup-font-mono); color: var(--bgroup-accent-bright); }
.login-step-tag { font: 400 12px/24px var(--bgroup-font-mono); color: var(--bgroup-on-deep); text-align: right; }
.login-aside-foot { margin: 20px 0 0; max-width: 40ch; font: var(--bgroup-text-small); color: var(--bgroup-on-deep); }

.login-card { width: min(100%, 420px); padding: 32px; box-shadow: var(--bgroup-shadow-card); border-radius: var(--bgroup-radius-panel); }

.login-lockup { display: block; height: 56px; width: auto; aspect-ratio: 372 / 132; margin: 0 0 28px; }

/* The eyebrow: small, uppercase, teal on the white card (4.9:1), as above the bgroup.io headline. */
.login-eyebrow { margin: 0 0 6px; }
.login h1 { margin: 0; font: var(--bgroup-text-h2); letter-spacing: var(--bgroup-tracking-h1); color: var(--bgroup-forest); }
.login-lede { margin: 6px 0 24px; font: var(--bgroup-text-body); color: var(--bgroup-slate); }

/* The shared access password, in a <details> panel beneath the account form: a quiet link that opens the older form. */
.login-shared { margin: 22px 0 0; padding-top: 16px; border-top: var(--bgroup-border-hairline); }
.login-shared-toggle { display: inline-block; cursor: pointer; list-style: none; font: var(--bgroup-text-small); color: var(--bgroup-amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.login-shared-toggle::-webkit-details-marker { display: none; }
.login-shared-toggle:hover { color: var(--bgroup-forest); }
.login-shared-toggle:focus-visible { outline: var(--bgroup-focus-line); outline-offset: 3px; border-radius: 4px; }
.login-shared[open] .login-shared-toggle { margin-bottom: 16px; }
.login-shared-body .login-lede { margin: 0 0 16px; }

/* The notice sits above the form. Its container is always present (a live region); it only has height when it holds a notice. */
.login-live:empty { display: none; }
.login-live { margin: 0 0 20px; }
.login-notice { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; margin: 0; padding: 14px 16px; background: var(--bgroup-white); border: var(--bgroup-border-hairline); border-left: 4px solid var(--bgroup-status-blocked); border-radius: var(--bgroup-radius-control); font: 600 14px/20px var(--bgroup-font-sans); color: var(--bgroup-ink); }
.login-notice-shape { display: block; flex: none; fill: var(--bgroup-status-blocked); }
/* A good-news notice (a password was changed): the console's green circle and its message, not colour alone. */
.login-notice-ok { border-left-color: var(--bgroup-status-cleared); }
.login-notice-ok .login-notice-shape { fill: var(--bgroup-status-cleared); }

/* The passkey button, above the password form. Hidden until /login.js finds a built-in authenticator. */
.login-passkey { display: grid; gap: 18px; margin: 0 0 18px; }
.login-passkey[hidden] { display: none; }
.login-passkey .login-submit { margin-top: 0; }
.login-passkey .login-submit[disabled] { cursor: progress; opacity: 0.7; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 0; font: var(--bgroup-text-small); color: var(--bgroup-slate); }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: var(--bgroup-border-hairline); }

.login-form { display: grid; gap: 18px; }
.login-field { min-width: 0; }
/* 16px, so that iOS does not zoom the page when a field takes focus. */
.login .bgroup-input { height: 44px; font-size: 16px; line-height: 24px; }
.login .bgroup-input[readonly] { background: var(--bgroup-surface); color: var(--bgroup-slate); cursor: default; }
.login .bgroup-input[readonly]:focus { border-color: var(--bgroup-line-strong); box-shadow: none; }
.login .bgroup-input[aria-invalid="true"] { border-color: var(--bgroup-status-blocked); }

.login-forgot { margin: 14px 0 0; font: var(--bgroup-text-small); }
.login-forgot a { color: var(--bgroup-forest); }

.login-submit { width: 100%; height: 44px; justify-content: center; margin-top: 4px; font-size: 16px; }

.login-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 24px 0 0; padding-top: 16px; border-top: var(--bgroup-border-hairline); font: var(--bgroup-text-small); color: var(--bgroup-slate); }

@media (max-width: 480px) {
  .login { align-items: start; padding-top: 16px; }
  .login-card { padding: 24px 20px; }
  .login-lockup { height: 48px; margin-bottom: 22px; }
}