/* ==========================================================================
   T23 — Password Reset

   TWO ROUTES, NOT ONE. The comp puts both on a single artboard as two stacked cards;
   live they are separate documents:
     A  customer/account/forgotpassword    body .customer-account-forgotpassword
        form #form-validate.form.password.forget      26 elements
     B  customer/account/createpassword    body .customer-account-createpassword
        form #form-validate.form.password.reset       23 elements
   Route B is reached with a live `rp_token`; `reset_link_expiration_period = 2` HOURS -
   AND THE CLOCK RESTARTS ON EVERY DIRECT-LINK LOAD. `CreatePassword.php` calls
   `changeResetPasswordLinkToken()` on every successful GET. THE STORED CIPHERTEXT CHANGES EVERY
   TIME (fresh IV) WHILE THE PLAINTEXT SURVIVES - a reviewer who diffs `rp_token` reads rotation
   and concludes the link is dead; the same URL token worked across three consecutive GETs. So
   the window is 2h after the LAST load rather than after creation. Two consequences a reviewer
   needs: re-minting is almost never necessary, and the EXPIRED state is genuinely hard to
   reach, because visiting the page is what resets the clock.
   THIS SHEET AND ITS HANDLES SAID DAYS, AND THAT WAS WRONG - inherited from the survey and
   passed on without checking. Magento's own label reads "Recovery Link Expiration Period
   (hours)", and `isResetPasswordLinkTokenExpired()` compares `floor((now-created)/3600)`
   against the raw config int with no unit conversion. So the comp's "valid for 2 hours" is
   CORRECT and the delta claiming otherwise would have propagated the error it warned about.
   (Asking the rig for `/customer/account/createPassword/` fails PAGE IDENTITY on letter
   case alone — Magento normalises to lowercase. It is a false failure.)

   ---------------------------------------------------------------------------
   THE CENSUS WAS NOT WRITTEN BY HAND. It was produced by a live walk before any of this
   CSS existed, because T22's hand-maintained census was wrong in FIVE consecutive versions
   and every error was found by the next reviewer. Reproduce it, do not retype it:

     document.querySelector('#form-validate').querySelectorAll('*').length + 1
       -> 26 on route A (load state), 28 after client validation appends two .mage-error
       -> 23 on route B

   What that walk found that a hand-written tree would have missed:
     - ZERO hidden inputs on either route. Route A's core template renders no `form_key`.
       The page DOES carry two `input[name=form_key]` elsewhere, so an unscoped query finds
       form keys that are not this form's.
     - ZERO `<br>`, ZERO `<legend>` on either route.
     - THREE non-rendering elements on route A: `div.secondary` (0x0), `a.action.back`
       (display:none) and its span.
     - Route B's `#show-password` row is KNOCKOUT-RENDERED and does not exist before JS runs.
     - [ROUTE A] `id="send2"` IS DUPLICATED and is the only duplicated id on that page. Route B has
       ZERO duplicate ids and no `send2` at all. The label matters because the neighbouring facts in
       this block ARE route-labelled, so an unlabelled one reads as applying to both. The FIRST in
       document order is the hidden authentication-popup copy, so `querySelector('#send2')`
       returns the decoy - which is exactly what happened to the survey's own cascade probe
       before it caught itself. EVERY selector here is scoped to `#form-validate`.

   ---------------------------------------------------------------------------
   BLANK'S CASCADE, measured for these routes (3252 rules scanned against 31 targets):

     .form.password.forget, .form.password.reset  { min-width:600px; width:50% }  >=768 (0,3,0)
     .column:not(.sidebar-main) form
       .actions-toolbar                           { margin-left:25.8% }      >=768 (0,4,1)
     .fieldset > .field:not(.choice) > .label     { width:25.8%; float:left } >=768 (0,5,0)
     .fieldset > .field:not(.choice) > .control   { width:74.2%; float:left } >=768 (0,5,0)
     .fieldset > .field::before/::after           { content:''; display:table }    >=768
     .actions-toolbar::before/::after             { content:''; display:table }    >=768
     .fieldset > .field.choice::before            { width:25.8%; float:left }  >=768 (route B)
     .actions-toolbar > .secondary .action.back   { display:none }            all   (0,4,0)
     .actions-toolbar .primary/.secondary         { float:left / float:right } >=768
     .fieldset > .field.required > .label::after  { content:'*'; color:#e02b27 }

   1. `min-width: 600px` IS BINDING HERE, unlike on T22, and the reset is load-bearing rather
      than cosmetic - forcing the floor back gives a 600px form overflowing a 480px column
      (control applied and held). The RANGE this used to state was wrong: it said "768 up to
      roughly 1264", which describes the PRE-THEME page. With `.page-main` capped at 528, the
      column measures 480 at 768, 1024, 1264 AND 1440, so Blank's floor would bind at every
      width from 768 up. (S4 MINOR 1. Its first control used `revert-layer`, which reverts past
      the author origin and removed Blank's rule too; that reading was discarded rather than
      filed.)

   2. THE 25.8% RATIO EXPLAINS THE WHOLE PAGE. 688 x 0.258 = 177.5 = the measured label
      width; 688 - 177.5 = 510.5 = the measured control width AND the measured toolbar width.
      Label, control and toolbar are one arithmetic, and resetting one without the others
      leaves a page that looks deliberately misaligned.

   3. "* REQUIRED FIELDS" NEVER RENDERS ON THIS PAGE. Blank scopes that note to
      `.login-container .fieldset::after`, which exists only on the login route. The fieldset
      here carries `data-hasrequired` and its computed `content` is `none`. So the red
      asterisks appear with nothing explaining them - see the handle, where it is declared.

   4. THE GENERATED BOXES are reset up front for every container this sheet makes flex or
      grid, in one rule, whether or not each is observed to matter today. That is the T22
      lesson: naming the trap in a header is not the same as grepping for it.

   PALETTE: every colour is a var(--hrv-*). No hex, no !important.
   Per-palette contrast could NOT be obtained by runtime attribute switching on this engine -
   `color-mix()` tokens do not re-resolve after the attribute mutates, proven by five distinct
   source strings yielding one byte-identical computed value. Figures below are wheat, the
   shipped default, measured with the instrument's controls passing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page frame — both routes
   -------------------------------------------------------------------------- */
.customer-account-forgotpassword .page-main,
.customer-account-createpassword .page-main {
  max-width: 528px; /* 480 comp column + 2x24 padding */
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 56px;
}

.customer-account-forgotpassword .page-title-wrapper,
.customer-account-createpassword .page-title-wrapper {
  text-align: center;
}

/* The comp's heading is 22px INSIDE its card; core renders 32px above the form. The size is
   taken from the comp, the position is not — moving the title into the form would be a
   template change. Declared in the handle. */
.customer-account-forgotpassword .page-title-wrapper .page-title,
.customer-account-createpassword .page-title-wrapper .page-title {
  font-family: var(--hrv-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

/* The comp's SECOND card heading is a 19px h2, not 22px. Applying route A's size to both routes
   was an undeclared delta (S1 MINOR 8) - taken from the comp now rather than declared away. */
.customer-account-createpassword .page-title-wrapper .page-title {
  font-size: 19px;
}

/* --------------------------------------------------------------------------
   2. The card

   THERE IS NO CARD LIVE, AND NO CARD ANCESTOR. Measured: the form's own background is
   transparent with no border or padding, and every ancestor up to <body> has a transparent
   background and no border. The comp's white 480px card does not exist in any form today,
   so this sheet creates it on the form element itself.

   `.form.password.forget` / `.reset` are (0,3,0); these are (0,4,0).
   -------------------------------------------------------------------------- */
.customer-account-forgotpassword .column.main .form.password.forget,
.customer-account-createpassword .column.main .form.password.reset {
  width: auto;
  min-width: 0;
  max-width: none;
  float: none;
  margin: 24px 0 0;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.customer-account-forgotpassword .form::before,
.customer-account-forgotpassword .form::after,
.customer-account-forgotpassword .form .fieldset::before,
.customer-account-forgotpassword .form .fieldset::after,
.customer-account-forgotpassword .form .fieldset > .field::before,
.customer-account-forgotpassword .form .fieldset > .field::after,
.customer-account-forgotpassword .form .actions-toolbar::before,
.customer-account-forgotpassword .form .actions-toolbar::after,
.customer-account-createpassword .form::before,
.customer-account-createpassword .form::after,
.customer-account-createpassword .form .fieldset::before,
.customer-account-createpassword .form .fieldset::after,
.customer-account-createpassword .form .fieldset > .field::before,
.customer-account-createpassword .form .fieldset > .field::after,
.customer-account-createpassword .form .fieldset > .field.choice::before,
.customer-account-createpassword .form .actions-toolbar::before,
.customer-account-createpassword .form .actions-toolbar::after {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Fieldset and fields — undoing the 25.8% arithmetic as a set, not piecemeal
   -------------------------------------------------------------------------- */
.customer-account-forgotpassword .form .fieldset,
.customer-account-createpassword .form .fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* `:not(.choice)` IS LOAD-BEARING AND DROPPING IT WAS A CRITICAL. Blank scopes its 25.8%
   arithmetic to `.fieldset > .field:not(.choice)`; this reset dropped the exclusion, so route B's
   Show Password toggle became a vertical flex column - checkbox measured 406x13 with its label on
   its own row 17px below, restyled by the label rule into 12px/700/uppercase so "SHOW PASSWORD"
   read as a section heading, and Chrome painted the glyph centred in the 406px box while the label
   sat at the far left. The control still toggled; the visual association was destroyed. Proven by
   injecting the exclusion live (checkbox 13x13, label same row at x=537.3) and removing it again.
   Both `_t21.css` and `_t22.css` handle `.field.choice` explicitly - this sheet is the regression,
   and its own section header claimed to undo the arithmetic "as a set" while undoing a
   `:not(.choice)`-scoped rule without the exclusion. */
.customer-account-forgotpassword .form .fieldset > .field:not(.choice),
.customer-account-createpassword .form .fieldset > .field:not(.choice) {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The choice row is a ROW. */
.customer-account-createpassword .form .fieldset > .field.choice {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.customer-account-createpassword .form .fieldset > .field.choice input[type="checkbox"] {
  accent-color: var(--hrv-accent);
  margin: 0;
  flex: 0 0 auto;
}

.customer-account-createpassword .form .fieldset > .field.choice > .label {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--hrv-text-muted);
}

.customer-account-forgotpassword .form .fieldset > .field:not(.choice) > .label,
.customer-account-createpassword .form .fieldset > .field:not(.choice) > .label {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hrv-text-muted);
}

.customer-account-forgotpassword .form .fieldset > .field:not(.choice) > .control,
.customer-account-createpassword .form .fieldset > .field:not(.choice) > .control {
  width: auto;
  float: none;
}

/* The comp's 12px corner; the rest of the input's paint is owned by components/_forms.css
   and is deliberately not restated here. That ownership check is the one T22's S1 caught
   being skipped, where ten declarations were restated and two silently diverged. */
.customer-account-forgotpassword .form .input-text,
.customer-account-createpassword .form .input-text {
  border-radius: var(--hrv-radius-sm);
}

/* The instruction copy above the email field. */
.customer-account-forgotpassword .form .field.note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hrv-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. CAPTCHA - 11 of route A's 26 elements, and the comp draws NONE of it

   This is the single largest comp omission on the page, and it is not optional: the module
   config sets `always_for/user_forgotpassword = 1`, so it renders on first load regardless
   of failures, and there is no DB override. A sheet that styled only what the artboard drew
   would have left nearly half the form un-themed.

   The image is a 200x50 PNG measured at 79% pure white — it cannot be themed, and it will
   read as a hard white rectangle unless a white surface sits behind it. The card in section 2
   is that surface.
   -------------------------------------------------------------------------- */
.customer-account-forgotpassword .form .field.captcha .control.captcha {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* `flex-wrap` is not decoration. Without it, at 375 neither the 202px image nor the button
   shrinks below content, so the row overflowed the CARD's content box by 20.5px - the reload
   button squeezed to 83.5px, wrapped to two lines, grew to 50px and landed 4.5px from the card
   border while everything else was inset 24px. It never produced a viewport scrollbar, which is
   why a page-level overflow check missed it: it ate the card's padding, not the page's. */
.customer-account-forgotpassword .form .field.captcha .nested,
.customer-account-forgotpassword .form .field.captcha .control.captcha-image {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.customer-account-forgotpassword .form .captcha-img {
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius-sm);
  display: block;
}

/* Blank ships this button entirely un-themed: #f2f2f2 fill, #333 text, #cdcdcd border whose
   contrast against the page background measures 1.48 against 1.4.11's 3:1. Themed here
   rather than registered, because unlike the token-level rows it is a single Blank hardcode
   on one control this page owns. */
.customer-account-forgotpassword .form .action.reload.captcha-reload {
  background: transparent;
  border: 1px solid var(--hrv-text-muted);
  color: var(--hrv-text);
  border-radius: var(--hrv-radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
}

.customer-account-forgotpassword .form .action.reload.captcha-reload:hover,
.customer-account-forgotpassword .form .action.reload.captcha-reload:focus {
  background: var(--hrv-accent-tint);
}

/* --------------------------------------------------------------------------
   5. Actions — the same inherited 25.8% indent, at (0,5,0)
   -------------------------------------------------------------------------- */
.customer-account-forgotpassword .column.main .form .actions-toolbar,
.customer-account-createpassword .column.main .form .actions-toolbar {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.customer-account-forgotpassword .form .actions-toolbar > .primary,
.customer-account-createpassword .form .actions-toolbar > .primary {
  float: none;
  margin: 0;
  display: block;
}

/* THE CTA IS FULL-BLEED, AND THIS RULE EXISTED ONCE BEFORE. It was written in the first version
   and then DESTROYED while rewriting the adjacent `.primary, .secondary` block for S1's findings -
   a regression introduced by a fix, in the same file, in the same section, and not noticed because
   the sweep that followed measured the card and the choice row rather than the button.

   What shipped in the meantime: 183.5px of a 416px content box on route A and 188.9 on route B at
   every width >=768, while the SAME button is 277 of 279 at 375. One page, two answers.

   S4 settled the comp's intent by rendering the artboard card VERBATIM in this engine rather than
   reasoning about `align-items`: every direct child measures 366 of a 368px content box, including
   the `<button>`, which blockifies as a flex item. The comp family is deliberate about this and
   all three artboards agree - T21 carries `width:100%` and ships 452/452; T22 carries
   `width: fit-content`, ships 178/656 and DECLARES it; T23 carries neither, so it stretches.
   `_t22.css` predicted this exact failure: "the difference reads as an oversight until you have
   both artboards open." T23 is the case where it was one. */
.customer-account-forgotpassword .form .actions-toolbar > .primary .action.primary,
.customer-account-createpassword .form .actions-toolbar > .primary .action.primary {
  width: 100%;
  box-sizing: border-box;
  margin-right: 0;
}

/* `.secondary` holds ONLY the back link, which Blank sets to `display:none` at (0,4,0) on
   ROUTE A at every viewport. It measured 414x0 and still consumed one 10px flex gap, leaving
   42px under the CTA against 32px elsewhere in the card. Delta 3 said "no CSS in this sheet
   styles the hidden element" - true of the anchor, false of its WRAPPER, and the wrapper is
   what cost the space.
   ROUTE A ONLY. The first version also listed route B here, and on route B `.secondary` DOES
   NOT EXIST - census 23 with zero non-rendering elements of any kind. That was a dead rule
   carrying route A's measurement in its comment, which is the same copy-paste contamination
   S3 found in the handles. Remove this rule if a real secondary action is ever added. */
.customer-account-forgotpassword .form .actions-toolbar > .secondary {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Responsive — 375 / 768 / 1024 / 1440

   768 and 1024 both matter on this page and neither is optional: Blank's `min-width:600px` would
   bind at EVERY width from 768 up, because `.page-main` is capped at 528 and the column measures
   480 at 768, 1024, 1264 and 1440 alike.
   THIS PARAGRAPH USED TO REPEAT THE "768 to roughly 1264" RANGE that section 1 records as wrong.
   S4 corrected one occurrence and this one survived, telling the next reviewer that 1440 is outside
   a band it is inside. Correcting a claim means grepping for the claim, not editing where you found
   it - the same lesson this sprint recorded on T21 and then repeated here.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .customer-account-forgotpassword .column.main .form.password.forget,
  .customer-account-createpassword .column.main .form.password.reset {
    padding: 24px;
  }

  .customer-account-forgotpassword .page-main,
  .customer-account-createpassword .page-main {
    padding-top: 32px;
  }
}