/* ==========================================================================
   CREATE AN ACCOUNT — the small delta on top of signin.css.
   NEW FILE: public/css/register.css

   Loaded only by portal/auth-shell.blade.php, which only the Register page
   uses. landing.css and signin.css are loaded first, in that order, exactly
   as Sign In loads them: landing.css supplies Sora and the border-box reset,
   signin.css the navy background, intro column, card, inputs, button, nav and
   footer.

   >>> NOTHING HERE RE-DECLARES TYPOGRAPHY, box-sizing, COLOURS OR CONTROL
   STYLING. <<< The first version of this page loaded signin.css alone and
   rendered in the browser's serif with inputs overflowing their card. The fix
   was to load what Sign In loads - not to restate it here. A second
   definition of a base is a divergence with a date on it.

   >>> NOTHING HERE TOUCHES A .sgn- RULE THAT SIGN IN DEPENDS ON. <<< Every
   selector below is either .rg- or a .sgn- class scoped INSIDE .rg-card, so
   it cannot reach the Sign In page even if both files were ever loaded
   together. Sign In is untouched by this file and by the shell.

   WHY ANYTHING IS NEEDED AT ALL: Sign In has two fields, Register has five
   plus two helper lines. At Sign In's rhythm the card runs past a laptop
   viewport. The tightening below is vertical only - the card keeps Sign In's
   width, radius, typography, input styling and button exactly.
   ========================================================================== */

/* Same width as Sign In, taller as the fields require. The shell's grid
   already sets the 440px column; this only affects the padding inside. */
.rg-card {
  padding: 30px 34px 26px;
}

/* The password field sits in a relatively positioned wrapper with the Show
   control absolutely placed inside it. Belt and braces after the overflow:
   the wrapper cannot exceed its column whatever a future rule does. */
.rg-card .sgn-input-wrap { position: relative; inline-size: 100%; max-inline-size: 100%; }
.rg-card .sgn-input { inline-size: 100%; max-inline-size: 100%; }

/* 18px to 14px. The only reason five fields fit where two did, and the
   smallest change that achieves it. */
.rg-card .sgn-field { margin-block-end: 14px; }

/* Sign In's inputs are 50px; 46 keeps them unmistakably the same control
   while returning 20px across the form. Still well above the 44px touch
   target a phone needs. */
.rg-card .sgn-input { min-block-size: 46px; padding-block: 11px; }

/* Helper text under a field: quieter than a label, never mistaken for an
   error, which is the red directly beneath it. */
.rg-card .sgn-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sg-ink-3);
}

/* The lede sits closer on this card - the heading and the first field belong
   together when there are five of them. */
.rg-card .sgn-card__lede { margin-block-end: 20px; }

.rg-card .sgn-submit { margin-block-start: 6px; }
.rg-card .sgn-foot { margin-block-start: 20px; padding-block-start: 16px; }

/* ---------- Mobile ----------
   The 16px minimum on inputs is inherited from signin.css and must stay:
   anything smaller triggers an automatic zoom on iOS that is nearly
   impossible to recover from mid-form. Only the padding tightens here. */
@media (max-width: 767px) {
  .rg-card { padding: 24px 20px 22px; }
  .rg-card .sgn-field { margin-block-end: 13px; }
  .rg-card .sgn-hint { font-size: 12px; }
}

/* ==========================================================================
   DESKTOP VERTICAL LAYOUT — corrected, 20 Sep 2026.

   THE CARD WAS NOT MERELY LOW ON THE PAGE, IT WAS CLIPPED. landing.css sets
   `.lz-hero { overflow: hidden }` - correct there, where it keeps the angled
   panels inside their band - and Register has no panels but inherited the
   rule. Top-aligning a card taller than the hero meant the excess was cut
   off rather than pushing the page down, so the bottom of the form could not
   be reached by scrolling at all. No amount of padding fixes that; the
   overflow rule has to go first.

   HEIGHT-AWARE, NOT FIXED. The spacing below is stated in vh with floors and
   ceilings, so a 1080px screen gets generous navy above and below while a
   short laptop tightens instead of overflowing. The hero no longer forces a
   minimum height either: it is as tall as its content needs plus that
   breathing room, which is what keeps the whole card on screen at any
   viewport.

   ALL OF IT IS GATED TWICE: a Register-only stylesheet, and :has(.rg-card)
   on every rule that touches a .sgn- class Sign In shares.
   ========================================================================== */

@media (min-width: 1024px) {

  .sgn-hero:has(.rg-card) {
    /* The clip that made the bottom of the card unreachable. Nothing on this
       page needs clipping - the scenes are not rendered here. */
    overflow: visible;

    /* Let the content set the height rather than a fixed band. */
    min-block-size: auto;

    align-items: flex-start;

    /* BETWEEN CENTRED AND TOP-ALIGNED, and it moves with the viewport.
       Clears the navigation - absolutely positioned at 26px, about 40px tall
       - with a comfortable gap, opens up on a tall screen, and tightens
       rather than overflowing on a short one. */
    padding-block-start: clamp(84px, 11vh, 150px);
    padding-block-end: clamp(56px, 8vh, 110px);
  }

  .sgn-stage:has(.rg-card) {
    /* 580px, and !important because it has to be.

       signin.css carries a hand-added block:
           .sgn-stage { grid-template-columns: minmax(0,1fr) 440px !important; }
       A plain declaration never beats an !important one however specific it
       is, so the column stayed at 440 whatever this file said. Matching the
       weight is the only way to win without editing Sign In.

       THE COST, NAMED: two !important rules on the same property, resolved by
       load order. It holds because register.css loads after signin.css and
       :has(.rg-card) cannot match Sign In - but the next person adjusting
       either screen needs to know both exist. The clean fix is dropping
       !important from that block in signin.css, which is a change to an
       approved page and belongs with the move to the shared shell. */
    grid-template-columns: minmax(0, 1fr) 580px !important;
    align-items: start;
    padding-block: 0;
  }

  /* The left column settles against the card's heading rather than its top
     edge, so the two sides read as one composition wherever the card lands. */
  .sgn-stage:has(.rg-card) .sgn-intro {
    padding-block-start: clamp(10px, 2.5vh, 40px);
  }
}

/* ---------- Short laptops ----------
   Roughly 13-inch and below, and any window a person has made shorter. The
   navy above and below gives way before the card does: the form stays whole
   and reachable, which matters more than the margin around it. */
@media (min-width: 1024px) and (max-height: 860px) {
  .sgn-hero:has(.rg-card) {
    padding-block-start: 76px;
    padding-block-end: 44px;
  }
  .sgn-stage:has(.rg-card) .sgn-intro { padding-block-start: 6px; }
  .rg-card { padding: 26px 30px 22px; }
  .rg-card .sgn-field { margin-block-end: 12px; }
}

@media (min-width: 1024px) and (max-height: 720px) {
  .sgn-hero:has(.rg-card) {
    padding-block-start: 64px;
    padding-block-end: 36px;
  }
  .rg-card .sgn-field { margin-block-end: 11px; }
  .rg-card .sgn-input { min-block-size: 44px; }
}