/* auth.css — the auth-service page shell.
 *
 * Lifted out of layout.css, which had grown to 298 lines — past the 200-LoC gate —
 * and which was two surfaces' stylesheets in one file. The split is not arbitrary:
 * auth-service uses ZERO .layout-* classes and the backoffice uses ZERO .auth-*
 * classes, so each was shipping the other's CSS on every page for nothing.
 *
 * layout.css's own comment argued the other way — "a fifth CSS file for four rules
 * is not a design system, it is a filing problem" — and it was right about four
 * rules. It is nine selectors now, on a page that loads none of the rest.
 *
 * Loaded by auth-service's partials.html. The backoffice does not load it. */

/* Sneat's page-auth.scss: one centred card on the tinted page, with the two
 * decorative shapes tucked into the corners. */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.auth-card {
  width: 100%;
  max-width: 25rem;
  background: var(--sn-surface);
  border-radius: var(--sn-shape-corner-medium);
  padding: var(--sn-admin-card-padding);
  box-shadow: var(--sn-elevation-4);
  position: relative;
  z-index: 1;
}
.auth-shape {
  position: absolute;
  color: var(--sn-primary);
  pointer-events: none;
}
.auth-shape-top { inset-block-start: 0; inset-inline-end: 0; }
.auth-shape-bottom { inset-block-end: 0; inset-inline-start: 0; }

/* The three things only the auth pages have. They live here rather than in an
 * auth-only stylesheet because a fifth CSS file for four rules is not a design
 * system, it is a filing problem — and because none of them can be an inline
 * `style` attribute: `style-src 'self'` blocks those too. */
.auth-qr {
  display: block;
  margin: 0.5rem auto;
  width: 11.25rem;
  height: 11.25rem;
}
/* The TOTP secret. Selected by element rather than by class on purpose: the
 * enrolment integration test scrapes `<code>SECRET</code>` out of the rendered
 * page, and a reskin has no business changing what that test reads. */
.auth-card code {
  display: block;
  padding: 0.5rem;
  background: var(--sn-surface-container);
  border-radius: var(--sn-shape-corner-medium);
  word-break: break-all;
}
/* A 6-digit code is read back digit by digit against a phone screen, so it is
 * set large and tracked out — the one place a wider letter-spacing is not
 * decoration. */
.input-otp {
  font-size: var(--sn-type-h5-size);
  letter-spacing: 0.3em;
  text-align: center;
}
.code-list {
  columns: 2;
  padding-inline-start: 1.2rem;
  font-family: ui-monospace, monospace;
}


/* Below the split-screen breakpoint the decorative corner shapes go: they are
 * decoration, and on a phone they are decoration in the way of the form. */
@media (max-width: 60rem) {
  .auth-shape { display: none; }
}