@font-face{font-family:LINESeed;src:url('../fonts/LINESeedSansTH_W_Rg.woff2')}@font-face{font-family:LINESeed;src:url('../fonts/LINESeedSansTH_W_Bd.woff2');font-weight:700}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f5f3eb 45%,#e7f1ec);color:#123f3b;font-family:LINESeed,Arial,sans-serif}.auth-shell{min-height:100vh;padding:40px 20px;display:grid;place-items:center}.auth-logo{position:absolute;top:28px;left:36px;width:150px}.auth-logo img{width:100%}.auth-card{width:min(480px,100%);padding:38px;background:#fff;border:1px solid #d9e5e1;border-radius:26px;box-shadow:0 24px 70px #123f3b17}.auth-step>p{margin:0;color:#28a5a7;font-size:11px;font-weight:800;letter-spacing:.16em}.auth-step h1{margin:7px 0 5px;font-size:34px}.auth-step>span{color:#55726e}.auth-step form{margin-top:25px;display:grid;gap:15px}.auth-step label{display:grid;gap:6px;font-weight:700}.auth-step input{width:100%;height:40px;padding:0 14px;border:1px solid #cbd9d6;border-radius:11px;color:#123f3b;font:inherit;outline:0}.auth-step input:focus{border-color:#2aa7aa;box-shadow:0 0 0 3px #2aa7aa18}.auth-step button{margin-top:6px;padding:14px;border:0;border-radius:12px;background:#c9df1d;color:#123f3b;font:700 16px LINESeed;cursor:pointer}.auth-step>small{display:block;margin-top:20px;color:#55726e;text-align:center}.auth-step a{color:#168f91;font-weight:700}.auth-step[hidden]{display:none}.auth-step [name=otp]{text-align:center;letter-spacing:.35em;font-size:24px;font-weight:700}@media(max-width:600px){.auth-logo{position:static;margin-bottom:22px}.auth-shell{align-content:start}.auth-card{padding:28px 22px}.auth-step h1{font-size:29px}}
.auth-step>p{display:none!important}
.auth-logo{position:absolute}.auth-logo::after{content:"Report";position:absolute;left:46%;top:61%;width:40%;height:25%;border:1px solid #123f3b;background:#f5f3eb;color:#123f3b;display:flex;align-items:center;justify-content:center;font-family:LINESeed,Arial,sans-serif;font-size:12px;font-weight:700;line-height:1}

/* Resend row on the OTP step. The step is shown as soon as the form is
   submitted, so this line is where the send's own progress and outcome
   are reported. Sizes and colours come from the existing auth palette
   rather than a new scale. */
.otp-resend{display:flex;align-items:center;gap:8px;margin:0 0 16px;min-height:24px;font-size:14px;color:#5c6b68}
.otp-resend button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#0b4c46;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.otp-resend button:hover{color:#073f3a}
.otp-resend button:focus-visible{outline:2px solid #168f91;outline-offset:3px;border-radius:4px}

/* Status and banner. The product already owns this component -- app-settings.css
   .joey-toast / .joey-toast-success, billing.css .modal-error, patient-flow.css
   .review-error all share these exact tokens. The auth screen was the only surface
   not using it: setStatus() wrote real server errors into an unstyled <span>, so
   every rejection rendered in body ink at inherited size and was missed. Tokens are
   reused verbatim rather than re-picked (rules 61/62); no new palette here.

   Empty status elements collapse rather than reserving a box, so a message appearing
   or clearing never shifts the form under the user's cursor (rule 18). :empty is
   exact -- setStatus writes textContent, so "" really is empty. */
.auth-card [data-auth-form-status],.auth-card [data-otp-form-status],.auth-card [data-auth-banner]{display:none;margin:0;padding:12px 14px;border:1px solid;border-radius:10px;font-size:13px;font-weight:700;line-height:1.5;text-align:left}
.auth-card [data-auth-form-status]:not(:empty),.auth-card [data-otp-form-status]:not(:empty){display:block}
.auth-card [data-auth-banner]:not([hidden]){display:block;margin:0 0 16px}
.auth-card [data-tone=error]{border-color:#e2b4b4;background:#fdf3f3;color:#96342f}
.auth-card [data-tone=ok]{border-color:#a9d6c4;background:#eef7f2;color:#0b5d4b}
.auth-card [data-tone=info]{border-color:#cbd9d6;background:#f5f7f4;color:#123f3b}

/* Leaving the OTP step. Tertiary by construction (section 12): no fill, no border,
   so it cannot compete with the lime verify button above it. `.auth-step .auth-back`
   rather than `.auth-back` because `.auth-step button` in the base layer is (0,1,1)
   and would otherwise repaint this as a primary button. min-height carries the 44px
   target (section 13) on its own -- the element is full-width, so height is the only
   dimension in question. */
.auth-step .auth-back{display:block;width:100%;min-height:44px;margin-top:16px;padding:12px;border:0;border-radius:8px;background:none;color:#168f91;font:700 14px LINESeed;text-align:center;cursor:pointer}
.auth-step .auth-back:hover{color:#0b4c46;background:#f5f7f4}
.auth-step .auth-back:active{background:#e4ece9}
.auth-step .auth-back:focus-visible{outline:2px solid #168f91;outline-offset:3px}

/* #2aa7aa measures 2.91:1 on white, under WCAG 1.4.11's 3:1 floor for a focus
   indicator; #168f91 is 3.91:1 and is already the focus colour everywhere else in
   the app shell. The input's own focus BORDER keeps #2aa7aa -- it is decorative
   there, sitting beside a ring that carries the contrast. */
/* .auth-step>small carried #718783 (3.82:1 on white, under the 4.5:1 floor). The OTP
   step now shows one of these too, so rather than add a second instance below the
   floor the shared rule moves to #55726e (5.22:1) -- already in app.css, and it fixes
   the step-1 prompt that was there first. .auth-step>span, the subtitle under each
   heading, carried the same token at body size and moves with it: leaving a known
   floor break in the one file being edited to fix that exact break would be odd. */

/* The "no account for this email" dialog. Native <dialog>, so focus trapping, Esc and
   the backdrop are the platform's, not ours -- billing.css's hand-rolled
   .modal-backdrop is in a stylesheet this page never loads, and copying it here to
   "reuse a component" would have made two of it. Tokens are this file's own. */
.auth-modal{width:min(420px,calc(100vw - 40px));padding:28px;border:1px solid #d9e5e1;border-radius:20px;background:#fff;color:#123f3b}
.auth-modal::backdrop{background:#0b4c4659}
.auth-modal h2{margin:0 0 8px;font-size:22px;line-height:1.3}
.auth-modal p{margin:0 0 8px}
.auth-modal p b{font-weight:700;word-break:break-all}
.auth-modal-body{color:#55726e;font-size:14px;line-height:1.6}
.auth-modal-actions{display:flex;flex-direction:column;gap:8px;margin-top:24px}
/* The primary action is the way forward, not the way out (section 12): creating the
   account is what the caller came to do and could not. */
.auth-modal-primary{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;background:#c9df1d;color:#123f3b;font:700 16px LINESeed;text-decoration:none}
.auth-modal-primary:hover{background:#d8ea4a}
.auth-modal-primary:active{background:#bcd214}
.auth-modal-secondary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid #cbd9d6;border-radius:12px;background:none;color:#0b4c46;font:700 14px LINESeed;cursor:pointer}
.auth-modal-secondary:hover{background:#f5f7f4}
.auth-modal-secondary:active{background:#e4ece9}
.auth-modal-primary:focus-visible,.auth-modal-secondary:focus-visible{outline:2px solid #168f91;outline-offset:3px}