/* Sign-in, second step, reset, lock and the error page: a poster block beside paper holding the form, no card. */

body.is-bare:has(.auth-poster) {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr auto;
  min-height: 100vh; min-height: 100dvh; padding: 0; background: var(--color-page-bg);
}
body.is-bare:has(.auth-poster) > .topbar { display: none; }
body.is-bare:has(.auth-poster) > :is(.page, .flashes, .site-footer, .import-banner) { grid-column: 2; }
body.is-bare:has(.auth-poster) > .page,
body.is-bare:has(.auth-poster) > .page > .page-body,
body.is-bare:has(.auth-poster) > .page > .page-body > .page-content { display: contents; }
body.is-bare:has(.auth-poster) > .flashes { grid-row: 1; }
body.is-bare:has(.auth-poster) > .site-footer { grid-row: 3; padding: 16px 32px; }

.auth-poster {
  grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 48px;
  background: var(--color-create-strong); color: var(--color-on-button); overflow: hidden;
}
.auth-poster-name {
  margin: 0; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  font-size: clamp(48px, 7.4vw, 160px); line-height: .86; letter-spacing: -.02em; overflow-wrap: anywhere;
}
.auth-poster-name > span { display: block; }
.auth-poster-line {
  max-width: 34ch; margin: 24px 0 0; padding-top: 12px; border-top: 3px solid currentColor;
  font-size: var(--text-lg); font-weight: 600; line-height: 1.35;
}

/* The form side */
body.is-bare .auth-poster ~ .login-box {
  grid-column: 2; grid-row: 2; align-self: center; justify-self: center;
  width: min(420px, 100% - 64px); max-width: none; margin: 32px 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
body.is-bare .auth-poster ~ .login-box.is-enrol { width: min(560px, 100% - 64px); }
.auth-poster ~ .login-box > .panel-header { margin: 0 0 20px; padding: 0 0 8px; border: 0; border-bottom: 3px solid var(--color-text); background: none; }
/* The big heading is this page's own drawing, not the shared case label panel headings get. */
html[data-shell="r2"] .auth-poster ~ .login-box > .panel-header > :is(h1, h2),
.auth-poster ~ .login-box > .panel-header :is(h1, h2) {
  display: block; padding: 0; background: none;
  margin: 0; font-size: var(--text-display-2); font-weight: 700; line-height: 1; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-text);
}
html[data-shell="r2"] .auth-poster ~ .login-box > .panel-header > :is(h1, h2)::after { content: none; }
.auth-poster ~ .login-box > .panel-body { padding: 0; background: none; }
.auth-poster ~ .login-box label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text); }
.auth-poster ~ .login-box :is(input[type="email"], input[type="password"], input[type="text"], input[inputmode], select) {
  min-height: 46px; border: 2px solid var(--color-text); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text-input); box-shadow: none;
}
.auth-poster ~ .login-box :is(input, select):focus-visible { outline: var(--focus-width, 2px) solid var(--color-focus); outline-offset: 2px; box-shadow: none; }
.auth-poster ~ .login-box .form-actions { margin-top: 20px; padding: 0; border: 0; background: none; }
.auth-poster ~ .login-box .form-actions .btn-primary,
.auth-poster ~ .login-box .login-send .btn {
  width: 100%; min-height: 48px; justify-content: center; border: 2px solid var(--color-text); border-radius: var(--radius-control);
  background: var(--color-text); color: var(--color-page-bg); box-shadow: none;
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.auth-poster ~ .login-box .form-actions .btn-primary:hover,
.auth-poster ~ .login-box .login-send .btn:hover { background: var(--color-page-bg); color: var(--color-text); }
.auth-poster ~ .login-box .login-forgot,
.auth-poster ~ .login-box .login-back,
.auth-poster ~ .login-box .login-cancel { text-align: left; }
.auth-poster ~ .login-box .login-back { margin-top: 16px; }
.auth-poster ~ .login-box a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.auth-poster ~ .login-box a:hover { color: var(--color-link-hover); }

.auth-poster ~ .login-box .login-notice {
  margin-top: 24px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--color-border-strong); border-radius: 0;
  background: none; color: var(--color-text);
}
.auth-poster ~ .login-box :is(.login-error, .notice) {
  padding: 8px 0 0; border: 0; border-top: 3px solid currentColor; border-radius: 0; background: none; font-weight: 600;
}
.auth-poster ~ .login-box .login-error { color: var(--color-error-ink); }
.auth-poster ~ .login-box :is(.login-recovery, .login-alt) { border-top-color: var(--color-border-strong); }

/* Phones and narrow windows: the block becomes a band on top, the form under it. */
@media screen and (max-width: 899px) {
  body.is-bare:has(.auth-poster) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  body.is-bare:has(.auth-poster) > :is(.page, .flashes, .site-footer, .import-banner) { grid-column: 1; }
  body.is-bare:has(.auth-poster) > .flashes { grid-row: 2; }
  body.is-bare:has(.auth-poster) > .site-footer { grid-row: 4; padding: 16px; }
  .auth-poster { grid-row: 1; position: static; height: auto; padding: 28px 16px 20px; }
  .auth-poster-name { font-size: clamp(44px, 15vw, 96px); }
  .auth-poster-line { margin-top: 16px; font-size: var(--text-md); }
  body.is-bare .auth-poster ~ .login-box,
  body.is-bare .auth-poster ~ .login-box.is-enrol { grid-column: 1; grid-row: 3; align-self: start; width: auto; margin: 28px 16px 8px; }
  .auth-poster ~ .login-box > .panel-header :is(h1, h2) { font-size: var(--text-2xl); }
}

/* The public legal pages keep the bare top bar: give its wordmark the gutter and the masthead's weight. */
body.is-bare:has(.legal-box) > .topbar { padding: 0 var(--gutter); }
body.is-bare:has(.legal-box) > .topbar > .brand { font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-label); }
@media screen and (max-width: 760px) { body.is-bare:has(.legal-box) > .topbar { padding: 0 16px; } }