/* auth-craft.css — SEAL14 compatibility layer over the SEALED SEAL13 auth stylesheets (no SEAL13 source edited; this file is ADDED
   after auth.css by the board builder). It aligns the auth family's control material with the console craft layer:
   the same button/input heights, radii, focus ring, chip anatomy and lockup clear space. Consumes tokens only. */
@import url("tokens-ext.css");
.card .btn{border-radius:var(--r-ctl);min-height:var(--ctl-touch);font-weight:var(--fw-semi);box-shadow:var(--elev-btn-primary);transition:background var(--m-hover) var(--ease-craft),transform var(--m-press) var(--ease-craft)}
.card .btn:active{transform:translateY(1px) scale(.99)}
.card .input{border-radius:var(--r-ctl);min-height:var(--ctl-touch);box-shadow:inset 0 1px 1px var(--ink-wash-03)}
/* focus = the sealed SEAL13 2px brand ring alone (one focus anatomy; no second wash under a tenant-coloured boundary) */
.card .alert{border-radius:var(--r-ctl)}
.auth-band .brand-link img{height:22px}
.card{border-radius:var(--r-card);box-shadow:var(--elev-3)}

.card .input{font-size:max(16px,1rem)}   /* fields scale with text zoom; 16px floor keeps iOS from zooming the page */
.pw-wrap .input,.card .input[type=password]{padding-right:4.5rem}   /* clearance for the Show toggle at any text size */
.check,.check[style]{font-size:.8125rem!important}.check input{width:1.125rem;height:1.125rem}   /* remember-me row scales with text zoom (the sealed markup carries an inline px size; the material layer owns the size) */

textarea.input{resize:none}   /* CORR3 G1 (lanes R and S): CORR2 wrote `textarea{resize:none}` at (0,0,1) and it lost to the sealed `textarea.input{resize:vertical}` at (0,1,1) — the grip stayed on every desktop width. Same specificity now; verified by render at 1440. */

/* CORR4 H4 (Event 247: auth composition graded 2 by lane U; shell/portal/auth without a 4). Sealed SEAL13 markup untouched. */
/* composition (Event 247: lane U graded auth composition 2 for the orphaned setup-code link under a 40 px void).
   The sealed markup keeps two .meta-row boxes with an inline style on the second; the material layer dissolves both
   (display:contents) and lays their three children in ONE wrapping flex row on the form.
   CORR4 (lane Z2, BLOCKER): a two-column grid here starved the label column at 200 % text on a 390 card - "Keep me
   signed in" wrapped one character per line and the link overprinted it. A wrapping flex row cannot starve a column:
   each child keeps its intrinsic width and moves to its own line when the row runs out. Verified at 200 % text. */
form:has(> .meta-row + .meta-row){display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:6px}
form:has(> .meta-row + .meta-row) > *{flex:1 1 100%}
form:has(> .meta-row + .meta-row) > .meta-row{display:contents}
form:has(> .meta-row + .meta-row) > .meta-row > .check{flex:1 1 auto;min-width:max-content;margin-top:14px!important}
form:has(> .meta-row + .meta-row) > .meta-row > .link{flex:0 0 auto;margin-left:auto;font-size:.8125rem;white-space:nowrap}
form:has(> .meta-row + .meta-row) > .meta-row:not(.meta-row + .meta-row) > .link{margin-top:.875rem;align-items:flex-end;padding-bottom:5px}
form:has(> .meta-row + .meta-row) > .meta-row + .meta-row > .link{margin-top:0;margin-bottom:.875rem;align-items:flex-start;padding-top:5px}
/* CORR4 (lanes Z3 then AA): the two links do not fit on one line inside the card. Stacked at their natural rhythm they sat 39 px apart but only 21 px above the primary button, so proximity grouped the lower link with the BUTTON instead of with its pair (lane Z3). The first fix pulled the second link up by 18 px, which grouped the pair correctly but overlapped their two sealed 44 px hit rectangles by 12 px - on a touch viewport 12 px of the upper link's declared target activated the lower link (lane AA, FIX-NOW). This rule groups the pair WITHOUT overlapping anything: the boxes are exactly adjacent (margin-top:0, zero overlap, both hit targets remain a full 44 px), and the ink is moved to the shared boundary instead - the upper link's text sits at the bottom of its box and the lower link's at the top. The ink pair therefore reads far tighter than the gap to the button, which is what proximity grouping needs, while every touch target stays whole. */
/* the family spine: the auth card wears the brand rail on its top edge; the band meets the ground with the same rail */
.card{box-shadow:var(--elev-3),inset 0 3px 0 var(--brand)}
.auth-band{box-shadow:inset 0 -3px 0 var(--brand)}
@media (min-width:768px){
  .auth-band{box-shadow:inset -3px 0 0 var(--brand)}
  /* the lockup anchors the panel's foot while the constellation holds its top-right: two weights, one diagonal */
  .auth-band .wrap{justify-content:flex-end!important}
  .auth-band .brand-link img{height:30px}
}

/* The desktop picture uses a wider lockup; preserve its intrinsic aspect ratio. */
@media (min-width:1024px){.auth-band .brand-link img{height:auto}}

/* CORR4 (lane Z1 Z1-3): the sealed SEAL13 application-status pages paint every status banner with `.ok-box`, so
   "Received — waiting for review" and "We need a little more information" wore the SUCCESS palette. The packet's own
   semantic-state system says pending is blue and action-required is amber, and C-04 pairs every state with its glyph.
   The material layer re-encodes those two banners by the copy that is already in the sealed markup - no markup edit,
   no copy change, no new state invented. */
.card > .ok-box[data-state="pending"]{--auth-status-fill:var(--state-pending-fill);--auth-status-ink:var(--state-pending)}
.card > .ok-box[data-state="refused"]{--auth-status-fill:var(--state-refused-fill);--auth-status-ink:var(--state-refused)}
.card > .ok-box{background:var(--auth-status-fill,var(--green-soft));color:var(--auth-status-ink,var(--green-ink));border:1px solid color-mix(in srgb,var(--auth-status-ink,var(--green-ink)) 22%,transparent)}

/* CORR4 (lane Z2): a step that is waiting on the applicant is not a completed step. The sealed markup gives every
   reached step the same filled check; the material layer re-marks the outstanding one in the action-required ink with
   its own glyph, so the tracker cannot say "done" while the banner asks for input. Sealed markup untouched. */
.steps .sdot.now{background:var(--state-refused-fill);color:var(--state-refused);border:1px solid var(--state-refused);font-weight:700}
.steps li[data-step="current"] .step-t{color:var(--state-refused);font-weight:600}