/*
 * THE INLINE AUTH MODAL — the guest sign-in / register dialog on the setup page.
 *
 * Markup: resources/views/templates/_auth-modal.blade.php (last child of
 * <main class="tpl-start">, deliberately OUTSIDE the setup <form>). Script: the second
 * inline block at the end of start.blade.php. This file was the modal's band of
 * start.blade.php's inline <style> until the 2026-09-17 audit's P2.
 *
 * ── THE DESIGN CORRECTIONS ARE IN THE LEDGER, NOT HERE ──────────────────────────────
 * Six rules below carried a "REF-B <n>:" note recording what the design review asked for
 * and what it replaced. That is history — it explains the value, it does not constrain
 * the next edit — and it is now one entry: docs/decision-record.md, "REF-B: the auth
 * modal's six design corrections (2026-09-17)". Each rule keeps a one-line pointer.
 *
 * ── [HARD] FOUR SELECTORS ARE DECLARED TWICE IN THIS FILE, AND THE LATER ONE WINS ────
 * .auth-modal__input:focus, .auth-modal__submit:hover, .auth-modal__forgot and
 * .auth-modal__consent each appear twice at identical specificity. They are left exactly
 * as they are — this pass changed no code — but a reader must not take the FIRST
 * declaration as the live one. Read to the bottom of the file before believing a value.
 * Recorded at docs/known-debt.md D-DEBT-96.
 */
.auth-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;}
.auth-modal[hidden]{display:none;}
.auth-modal__backdrop{position:absolute;inset:0;background:var(--scrim);}
/* Padding: REF-B 14 (decision record). */
.auth-modal__card{position:relative;background:var(--color-white);width:100%;max-width:460px;margin:20px;padding:38px 38px 32px;border:1px solid var(--border-strong);box-shadow:var(--shadow-modal);max-height:calc(100vh - 40px);overflow:auto;} /* the shadow's rgba(0,0,0,0.25) is a literal because no shadow token exists */
/* The modal's × is .tpl-panel-close (templates.css), absolutely positioned in this
   card's corner — there is no .auth-modal__close. */
.auth-modal__tabs{display:flex;margin:0 0 var(--space-lg);border-bottom:1px solid var(--color-border);}
.auth-modal__tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;padding:var(--gap-row) 0;font-family:var(--font-heading);font-size:var(--type-prose);letter-spacing:0.04em;text-transform:uppercase;color:var(--grey);cursor:pointer;}
/* [HARD] THE ACTIVE TAB IS INK, NEVER RED: red is destructive and the logo mark. REF-B 1. */
.auth-modal__tab.is-active{color:var(--color-text-primary);border-bottom-color:var(--border-strong);}
.auth-modal__panel[hidden]{display:none;}
.auth-modal__row{display:flex;gap:var(--inset-box);}
.auth-modal__col{flex:1;min-width:0;}
/* Keep in step with /register's label treatment — the two registration surfaces are
   meant to read as one form. REF-B 3. */
.auth-modal__label{display:block;font-family:var(--font-mono);font-size:var(--type-badge);letter-spacing:var(--type-badge-tracking-wide);text-transform:uppercase;color:var(--grey);margin:var(--inset-panel) 0 6px;}
.auth-modal__label .req{color:var(--red);margin-left:3px;}
/* NO FILL on the context line — the mockup's beige strip was rejected. REF-B 5 + C. */
.auth-modal__why{font-family:var(--font-mono);font-size:var(--type-caption);letter-spacing:var(--type-caption-tracking);text-transform:uppercase;color:var(--color-text-primary);line-height:1.5;margin:0 0 var(--inset-panel);}
.auth-modal__rule{font-family:var(--font-ui);font-size:var(--type-caption);letter-spacing:var(--type-caption-tracking-none);text-transform:none;color:var(--grey);margin:0 0 7px;line-height:1.45;}
.auth-modal__pw{position:relative;display:block;}
.auth-modal__pw input{padding-right:62px;}
.auth-modal__reveal{position:absolute;top:50%;right:1px;transform:translateY(-50%);height:calc(100% - 2px);
    border:0;background:transparent;padding:0 var(--inset-box);cursor:pointer;font-family:var(--font-mono);font-size:var(--type-badge);
    letter-spacing:var(--type-badge-tracking);text-transform:uppercase;color:var(--grey);}
.auth-modal__reveal:hover{color:var(--color-text-primary);}
.auth-modal__consent{display:flex;align-items:flex-start;gap:var(--gap-row);font-family:var(--font-ui);font-size:var(--type-note);
    color:var(--color-text-primary);line-height:var(--type-note-line);cursor:pointer;text-transform:none;letter-spacing:var(--type-note-tracking);margin:var(--inset-panel) 0 0;}
.auth-modal__consent input{margin-top:var(--nudge);flex:0 0 auto;}
.auth-modal__consent a{color:var(--color-text-primary);text-decoration:underline;text-underline-offset:2px;}
.auth-modal__remember{display:flex;align-items:center;gap:9px;margin:var(--inset-panel) 0 0;font-family:var(--font-ui);font-size:var(--type-note);color:var(--color-text-primary);}
.auth-modal__forgot{display:block;text-align:center;margin:var(--inset-box) 0 0;text-decoration:underline;text-underline-offset:3px;}
/* [HARD] FIELDS TAKE THE HAIRLINE, NOT A SOLID BLACK RULE — a black border on every input
   made the form read as eight equally urgent things. REF-B 4. The :focus rule below is
   re-declared further down; see the file header. */
.auth-modal__input{width:100%;padding:var(--gap-row) var(--inset-box);border:1px solid var(--color-border);background:var(--color-white);}
.auth-modal__input:focus{outline:2px solid var(--border-strong);outline-offset:-1px;border-color:var(--border-strong);}
.auth-modal__input:focus{outline:2px solid var(--red);outline-offset:-1px;}
.auth-modal__forgot{display:inline-block;margin:var(--gap-row) 0 0;text-decoration:none;}
.auth-modal__consent{display:flex;align-items:flex-start;gap:var(--inset-control);margin:var(--inset-panel) 0 0;font-size:var(--type-note);line-height:var(--type-note-line);cursor:pointer;text-transform:none;letter-spacing:var(--type-note-tracking);}
.auth-modal__consent input{flex:0 0 auto;margin-top:var(--nudge);width:auto;}
.auth-modal__forgot:hover{text-decoration:underline;}
/* [HARD] ONE PRIMARY, AND IT IS INK — this was the platform's only red primary. REF-B 2.
   The RESTING state is what that governs; :hover is re-declared below. */
.auth-modal__submit{width:100%;margin-top:20px;letter-spacing:var(--type-badge-tracking);text-transform:uppercase;padding:var(--inset-box);border:1px solid var(--border-strong);background:var(--ink);color:var(--on-ink);cursor:pointer;}
.auth-modal__submit:hover{opacity:0.85;}
.auth-modal__submit:hover{background:var(--red-dark);}
.auth-modal__submit[disabled]{opacity:0.6;cursor:default;}
.auth-modal__error{background:rgba(var(--error-rgb),0.10);border:1px solid var(--error-red);color:var(--error-red);font-family:var(--font-mono);font-size:var(--type-label);padding:var(--gap-row) var(--inset-box);margin:0 0 var(--gap-tight);}
.auth-modal__error[hidden]{display:none;}