/* Group B: sign-in, sign-up and onboarding. UI/UX audit fixes, 17 Oct 2026.
   Linked only from group B pages. Reads semantic and component tokens from tokens.css; adds no new colors. */

/* the prototype review strip sits outside the product card, so it never reads as part of the form (audit C1) */
.auth-main>.proto{width:100%;max-width:480px;margin-bottom:var(--s3)}
.auth-main>.proto.proto--wide{max-width:760px}
.back-link{margin:0 0 var(--s3);font-size:var(--fs-14)}
.auth-card h2{font-size:var(--fs-24);margin:0 0 var(--s3)}
.auth-card h2.h-sm,.app-main h2.h-sm{font-size:var(--fs-18);margin:var(--s4) 0 var(--s2)}

/* step label inside a state panel: the count differs by path (audit B-32) */
.step{font-size:var(--fs-12);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 var(--s2)}

/* spacing and small text without inline styles */
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.fine{font-size:var(--fs-14)}
.fine[role="status"]{margin:0}
.terms-line{font-size:var(--fs-14);margin:0}
.row-tight{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
/* D118 (his words: "make it in the middle"): the resend button and its status sit centered under the code */
.row-tight:has(>[data-countdown]){justify-content:center}
.row-tight:has(>[data-countdown])+[role="status"]{text-align:center}
.row-nowrap{display:flex;gap:var(--s2);flex-wrap:nowrap;align-items:stretch}
.row-nowrap .input{flex:1;min-width:0}
.summary-box p{margin:0 0 var(--s2)}
.summary-box p:last-child{margin-bottom:0}
.summary-box .dl-grid+p,.summary-box p+.dl-grid{margin-top:var(--s2)}
ol.plain-steps{margin:0;padding-left:1.25em;display:grid;gap:var(--s2);font-size:var(--fs-16)}
.proto-note{font-family:var(--font-mono);font-size:var(--fs-12);margin:0 0 var(--s3)}
.proto-note::before{content:"Review: ";font-weight:500}

/* a checkbox statement: normal weight, box beside the words */
.form label.check,label.check{display:flex;gap:var(--s3);align-items:flex-start;font-weight:400;font-size:var(--fs-14);margin:0}
label.check input{flex:none;margin-top:2px}
fieldset.choice legend{font-weight:500;font-size:var(--fs-14);margin-bottom:6px;padding:0}
fieldset.choice label .fine{display:block;margin-top:2px}
fieldset.plans{border:0;padding:0;margin:0}
fieldset.plans legend{font-weight:500;font-size:var(--fs-14);margin-bottom:6px;padding:0}

/* windows that belong to someone else: Stripe's card window and the bank's 3-D Secure window (audit B-07, B-08) */
.ext-frame{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.ext-frame-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);background:var(--tint);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-12)}
.ext-frame-body{padding:var(--s4);display:grid;gap:var(--s3)}
.ext-frame-body p{margin:0}
.ext-frame-body label{font-weight:500;font-size:var(--fs-14);display:block;margin-bottom:6px}
.ext-frame--bank{border-width:2px;border-style:double;box-shadow:var(--header-shadow-scrolled)}
.ext-frame .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
.ext-owner{font-size:var(--fs-14);margin:0}

/* due dates: the lapse color as a fill with ink text, its ruled job (audit B-30) */
.banner-due{background:var(--lapse-bg);color:var(--lapse-fg);border-color:var(--lapse-bg)}
.banner-due a{color:var(--lapse-fg);text-decoration:underline}
/* a state written in plain words, not a produced-green chip (audit B-30) */
.state-plain{font-weight:500}

/* recovery codes are a list (audit B-27, WCAG 1.3.1) */
ul.recovery{list-style:none;margin:0}
ul.recovery li{margin:0}

/* invitations: one email field per person (audit B-35) */
fieldset.invites{border:0;padding:0;margin:0;display:grid;gap:var(--s3)}
fieldset.invites legend{font-weight:500;font-size:var(--fs-14);margin-bottom:6px;padding:0}

/* first-run setup sections */
.setup-sec{border-top:1px solid var(--line);padding-top:var(--s4)}
.setup-sec h2{font-size:var(--fs-20);margin:0 0 var(--s3)}
.setup-sec .form,.setup-sec>.stack{max-width:none}
.interval{display:flex;align-items:center;gap:var(--s2)}
.interval .input{max-width:120px}

/* checkout: the renewal line follows the chosen billing period (audit B-24) */
.plan-year{display:none}
form:has(input[value="year"]:checked) .plan-month{display:none}
form:has(input[value="year"]:checked) .plan-year{display:block}

/* provider buttons: the mark is decoration; the accessible name is "Sign in with Microsoft" (audit B-26) */
.idp .idp-mark{margin-right:var(--s1)}

/* dark mode: the red error border is about 2.96:1 on ink, under 3:1 (audit B-36).
   The field keeps a light border with a red inner edge; the message under it carries the meaning. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .input[aria-invalid="true"]{border-color:var(--fg);box-shadow:inset 4px 0 0 var(--input-border-error)}
}
:root[data-theme="dark"] .input[aria-invalid="true"]{border-color:var(--fg);box-shadow:inset 4px 0 0 var(--input-border-error)}
/* the red message fill needs room for its text in dark mode */
.error-text{padding:2px 6px;border-radius:2px}
/* Friction audit of 18 Oct 2026, item 9: a ready message or link to hand to the IT administrator */
.it-msg{font-size:var(--fs-14);overflow-wrap:anywhere;margin-top:var(--s3)}
/* Item 4: a sent form gives way to one focused panel with the message and one next step */
.form-done:focus{outline:none}
.form-done:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.form-done-msg{margin:0}
/* Item 14: the promo field folds behind "Have a code?"; the period rides on the Subscribe button */
.promo-fold>summary{cursor:pointer;color:var(--link);text-decoration:underline;text-underline-offset:.2em;font-size:var(--fs-14);min-height:var(--s5);display:inline-flex;align-items:center}
.promo-fold[open]>summary{margin-bottom:var(--s2)}
.btn .plan-month{display:inline}
.btn .plan-year{display:none}
form:has(input[value="year"]:checked) .btn .plan-month{display:none}
form:has(input[value="year"]:checked) .btn .plan-year{display:inline}