/* Sign-in, signed-out and private request-link pages. */

/* Sign in, signed out and private request links: brand panel beside a single task */
.auth { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: 100vh; background: var(--surface); }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 56px; background: var(--txm-dark-green); color: #fff; }
.auth-brand img { display: block; width: 220px; height: auto; }
.auth-brand > * { position: relative; }
.auth-brand .helix { position: absolute; }
.auth-head { font-size: 68px; line-height: .95; font-weight: 700; text-transform: uppercase; letter-spacing: .005em; }
.auth-sub { font-size: 20px; color: #C9D6D0; max-width: 30ch; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; }
.or { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code-boxes input { width: 100%; height: 60px; text-align: center; font-size: 28px; font-weight: 700; color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.code-boxes input:focus { outline: none; border-color: var(--txm-blue); box-shadow: 0 0 0 3px var(--blue-25); }
/* The address check in the brand panel: the address bar drawn large, txmhospitals.com stressed */
.auth-trust { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.addr-bar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 24px; border-radius: 999px; background: #fff; color: var(--txm-dark-green); font-size: 22px; line-height: 1.25; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.addr-bar .i { flex: none; width: 24px; height: 24px; color: var(--txm-blue); }
.addr-bar > span { min-width: 0; overflow-wrap: anywhere; }
.addr-sub { color: var(--txm-medium-gray); }
.addr-bar strong { font-weight: 700; text-decoration: underline 3px var(--txm-green); text-underline-offset: 6px; }
.trust-note { font-size: 15px; color: #C9D6D0; }
.trust-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trust-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; }
.trust-points .i { flex: none; margin-top: 2px; color: var(--txm-green); }
.trust-site { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--green-50); }
.link-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
.link-top img { display: block; width: 170px; height: auto; }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { padding: 28px 24px; gap: 18px; }
  .auth-head { font-size: 40px; }
  .auth-sub { font-size: 17px; }
  .auth-brand img { width: 160px; }
  .auth-brand .helix { display: none; }
  .addr-bar { min-height: 52px; padding: 10px 18px; gap: 10px; font-size: 17px; }
  .addr-bar .i { width: 20px; height: 20px; }
  .auth-form { padding: 28px 20px 40px; align-items: flex-start; }
  .link-top { padding: 12px 16px; }
  .link-top img { width: 132px; }
}