/* ==========================================================================
   paychain.auth.css — the sign-in surface
   --------------------------------------------------------------------------
   The Smart E-Admin (SmartSuite.Web) two-panel pattern, rebuilt on the PayChain
   CI. Loaded only by _BlankLayout, so none of this reaches the authenticated
   product.

   WHY TWO PANELS AND NOT A CENTRED CARD

   The previous screen was one dark card floating in the middle of a dark page.
   It worked, but it said nothing — and the sign-in screen is the one surface a
   merchant sees before they have decided to trust us with money. The split gives
   the left panel a job: state whose system this is, and what the security
   posture is, at the moment that question is actually being asked.

   EVERY CLAIM ON THE LEFT PANEL IS VERIFIED AGAINST THE CODE.
   The session line reads 8 hours because Program.cs sets
   ExpireTimeSpan = TimeSpan.FromHours(8) with SlidingExpiration. Smart E-Admin's
   panel also claims account lockout after 5 failed attempts and South African
   data residency; NEITHER is stated here, because this application configures no
   Identity lockout and the hosting region is not something this layer can
   assert. Do not copy those two lines across without making them true first — a
   security claim on a sign-in screen is a representation to the person reading
   it.
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: grid;
  /* minmax(0, 1fr), NOT a bare 1fr. A bare 1fr is minmax(auto, 1fr), and that
     "auto" floor is the widest thing inside the track — so a track could never
     be narrower than its content, and on a phone the content was wider than
     the screen. See the note on .auth-form. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ── Left: the brand panel, Obsidian ─────────────────────────────────────── */
.auth-brand {
  position: relative;
  background: var(--brand-ink);
  color: var(--brand-canvas);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 48px between GROUPS — lockup, headline block, facts, copyright. The CI's
     top spacing step, and the difference between a panel that reads as four
     considered blocks and one that reads as a wall. */
  gap: 48px;
  overflow: hidden;
}

/* The CI's concentric rings, as the guidelines cover uses them. Gold at very low
   alpha: decoration must never compete with the lockup or the copy. */
.auth-brand::before {
  content: "";
  position: absolute;
  right: -26%;
  top: 46%;
  transform: translateY(-50%);
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(216,188,133,.055) 0 38%, transparent 38%),
    radial-gradient(circle, transparent 0 51%, rgba(216,188,133,.10) 51% 52%, transparent 52%),
    radial-gradient(circle, transparent 0 69%, rgba(216,188,133,.07) 69% 70%, transparent 70%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

/* The reverse lockup at 210px — well clear of the CI's 140px minimum, and NOT
   filtered. Smart E-Admin inverts its lockup because its asset is dark artwork;
   the PayChain reverse form is already the correct colourway and inverting it
   would turn the gold value path grey. */
.auth-brand .lockup { width: 210px; height: auto; display: block; }

/* A domain's mark sits beside PayChain's, never in place of it, behind the same
   hairline rule the sidebar uses. */
.auth-brand .auth-cobrand { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* PayChain's lockup holds its width — the CI sets a minimum and it is never
   compressed. The domain's mark is the one that gives way on a narrow screen. */
.auth-brand .auth-cobrand > .lockup { flex: none; }
.auth-brand .auth-cobrand > span {
  padding-left: 16px;
  border-left: 1px solid rgba(244, 240, 231, .22);
  display: flex; align-items: center;
  min-width: 0;
}
.auth-brand .auth-cobrand img.domain {
  height: 34px; width: auto; max-width: min(170px, 100%); object-fit: contain;
}

.auth-brand h1 {
  font-family: var(--bc-font-display);
  font-size: 1.9rem;
  line-height: 1.22;
  letter-spacing: -.02em;
  max-width: 19ch;
  color: var(--brand-canvas);
  margin: 0;
}
/* The headline and its paragraph are a GROUP, and the group needs air inside it
   as well as around it. `.auth-brand > p` only matched a direct child, so the
   paragraph nested beside the h1 got no top margin and sat hard against the
   headline's descenders. Both selectors now, and 18px rather than 14px —
   the CI's spacing scale is 4/8/16/24/32/48, so this reads as the 16 step plus
   the headline's own optical gap. */
.auth-brand p:not(.auth-foot) {
  color: #A9A398;               /* CI Stone, lifted for legibility on Obsidian */
  max-width: 46ch;
  line-height: 1.62;
  font-size: .9375rem;
  margin: 18px 0 0;
}

.auth-facts { display: grid; gap: 12px; font-size: .875rem; color: #C3BCAF; }
.auth-facts div { display: flex; align-items: center; gap: 11px; }
/* Gold Light, not Trust Gold: on Obsidian it measures 10.30:1 against gold's
   6.01:1, and these are small marks. */
.auth-facts svg { width: 19px; height: 19px; color: var(--brand-accent); flex: none; }

/* The copyright is a footnote, not a fourth group — it sits at the bottom of the
   panel rather than in the centred stack, so the three blocks that matter stay
   optically centred without it dragging them up. */
.auth-foot {
  position: absolute; left: 48px; bottom: 28px;
  font-size: .75rem; color: rgba(244, 240, 231, .38); margin: 0;
}

/* ── Right: the form panel, Ivory ────────────────────────────────────────── */
.auth-form {
  display: grid;
  /* THE MOBILE BUG LIVED HERE. This grid had no column template, so its one
     column was auto-sized to its content — and the card inside it asked for a
     fixed 410px. `max-width: 100%` could not rescue it: 100% of an auto track
     is the track's own content width, which is the 410px again. The panel
     therefore measured 410 + padding = 442px on every phone, the page scrolled
     sideways, and the right-hand edge of both fields, the Sign in button and
     the show-password eye sat off screen.

     An explicit minmax(0, 1fr) column gives the card something real to be
     100% OF, and the card's width and max-width swap roles below. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 48px 24px;
  background: var(--brand-canvas);
}
.auth-card { width: 100%; max-width: 410px; display: grid; gap: 18px; }
.auth-card h1,
.auth-card h3 {
  font-family: var(--bc-font-display);
  font-size: 1.75rem;
  letter-spacing: -.02em;
  color: var(--bc-brand-600);
  margin: 0;
}
.auth-card > p { color: var(--bc-text-muted); margin: 6px 0 0; }

/* The CI's 44px minimum touch target, on every control on this screen. */
.auth-card .bc-input,
.auth-card .bc-btn,
.auth-card .form-control { min-height: 44px; }

.auth-card .bc-label { font-size: .875rem; font-weight: 600; }
.auth-card .bc-btn--block { width: 100%; }

.auth-credit {
  border-top: 1px solid var(--bc-border);
  padding-top: 18px;
  display: flex;
  justify-content: center;
}
.auth-note { font-size: .8125rem; color: var(--bc-text-muted); line-height: 1.55; margin: 0; text-align: center; }

/* The route to the OTHER auth screen — "New merchant? Register your business"
   under sign-in, "Already registered? Sign in" under registration.

   It was a 13px muted line with a plain-weight, un-underlined link: on a phone
   it read as a footnote and people did not find it. It is the only way a new
   merchant gets in, so the link is semibold and underlined (the CI forbids
   colour as the sole signal) and stands 44px tall, the CI's minimum touch
   target. 14px above the card's own 18px gap gives the 32px that separates
   groups everywhere else in the product.

   Two classes in the selector on purpose: `.auth-card > p` above is (0,1,1) and
   would otherwise take the margin back. */
.auth-card > .auth-alt {
  margin: 14px 0 0;
  text-align: center;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--bc-text-muted);
}
.auth-card > .auth-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Narrow ──────────────────────────────────────────────────────────────
   Below 900px the brand panel stops being a column and becomes a header: the
   rings, the headline and the facts all go, because on a phone the person wants
   the form, not the pitch. The lockup stays — whose system this is remains the
   one thing worth the space. */
@media (max-width: 900px) {
  /* One column, three rows: the header and the footer take what they need and
     the form panel takes the rest, which is what pins the footer to the bottom
     of the screen on a short form and lets it follow a long one. 100dvh is the
     visible height with the phone's address bar accounted for; 100% stays as
     the fallback for a browser that does not know the unit. */
  .auth {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    min-height: 100dvh;
  }
  .auth-brand { padding: 24px 20px; gap: 0; }
  /* `.auth-brand > p` was here and matched nothing: the paragraph is not a
     child of .auth-brand, it sits in a wrapper beside the headline. So the
     headline went and its paragraph stayed, as three lines of grey text under
     the logo. The wrapper is named now (.auth-pitch) and goes as one piece. */
  .auth-brand::before,
  .auth-pitch,
  .auth-facts,
  .auth-foot { display: none; }
  .auth-brand .lockup { width: 150px; }
  /* 20px, matching the header, so the lockup and the form share a left edge.
     It was 16px against the header's 20px. */
  .auth-form { padding: 32px 20px; align-items: start; }

  /* The 48px under the intro line (.mb-5) suits a 640px panel; on a phone it
     pushed Sign in below the fold as soon as an error was showing. 14px plus
     the card's 18px gap is the product's 32px between groups. The utilities
     are !important, so this has to be too. */
  .auth-card > .mb-5,
  .auth-card > .mb-4 { margin-bottom: 14px !important; }

  /* 16px in every control. iOS Safari zooms the whole page in when a field
     with smaller text takes focus, and does not zoom back out — the person
     taps Email and the layout jumps sideways. 16px is the threshold. */
  .auth-card input,
  .auth-card select,
  .auth-card textarea { font-size: 16px; }
}
@media (max-width: 420px) {
  .auth-brand .lockup { width: 140px; }   /* the CI's minimum lockup width */
  .auth-card h1, .auth-card h3 { font-size: 1.5rem; }
}

/* ── Footer (narrow only) ────────────────────────────────────────────────
   The header's counterpart. Same Obsidian, same 20px gutter, so the mark at
   the bottom of the page sits directly under the lockup at the top.

   Hidden on a wide screen, where the dark panel beside the form already
   carries the copyright and a second one would say it twice.

   The greys are the brand panel's own (see .auth-brand p and .auth-facts), not
   the 38% Ivory the desktop copyright uses: that measures about 3.3:1 on
   Obsidian, which is under the 4.5:1 small text needs, and on a phone in
   daylight it is not there at all. */
.auth-footer { display: none; }

@media (max-width: 900px) {
  .auth-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    /* env() keeps the text clear of the iPhone home indicator when the page is
       installed to the home screen; it is 0 everywhere else. */
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--brand-ink);
    color: var(--brand-canvas);
  }
  /* 28px — the CI's minimum for the symbol is 24. Never recoloured. */
  .auth-footer__mark { width: 28px; height: auto; flex: none; display: block; }
  .auth-footer p { margin: 0; }
  .auth-footer__by { font-size: .8125rem; line-height: 1.4; color: #C3BCAF; }
  .auth-footer__by strong { font-weight: 600; color: var(--brand-canvas); }
  .auth-footer__legal { margin-top: 4px; font-size: .6875rem; line-height: 1.45; color: #A9A398; }
  /* inline-block, not nowrap: each sentence moves to a new line as a unit, but
     can still break inside itself on a screen too narrow to hold it. */
  .auth-footer__legal span { display: inline-block; }
}

/* ── Long forms (merchant registration) ──────────────────────────────────
   On a wide screen the brand panel stays pinned while a long form scrolls
   beside it. Without this the lockup, headline and facts scrolled away with
   the page and the left half became an empty black column. Sticky is still a
   positioned element, so the ::before rings keep their containing block. */
@media (min-width: 901px) {
  .auth-brand {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
  }
}