/* Sign-in and account pages (templates/auth_base.html). Loaded after
   dataintell-marketing.css and dataintell-tools.css; scoped under .au. */

/* The navbar's links are white and half of this layout is light, so keep the
   navbar solid here instead of transparent (this file loads after the one that
   makes it transparent, so these win). */
.bg-dataintell, .bg-dataintell.dm-solid { background: var(--ink) !important; border-bottom: 1px solid var(--line-dk); }

.au { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; background: var(--paper); }
.au a { text-decoration: none; }

/* brand panel: full height, with its text kept in view while a long form scrolls */
.au-brand { position: relative; overflow: hidden; overflow: clip; background: var(--ink); color: var(--paper); padding: 0 clamp(24px, 5vw, 64px); }
.au-brand::before { content: ""; position: absolute; left: -200px; bottom: -240px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(123,30,122,.5), rgba(23,17,28,0) 65%); pointer-events: none; }
.au-brand__in { position: sticky; top: 0; z-index: 1; max-width: 460px; margin-left: auto; padding: 150px 0 64px; }
.au-title { margin: 0 0 16px; font-family: var(--dm-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -.02em; }
.au-title em { font-style: italic; color: var(--orchid); }
.au-lede { margin: 0 0 24px; font-size: 17px; line-height: 1.55; color: rgba(251,249,252,.75); }
.au-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.au-points li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: rgba(251,249,252,.82); }
.au-points i { flex: none; width: 20px; margin-top: 3px; color: var(--seal); }

/* form panel */
.au-panel { display: flex; align-items: flex-start; padding: 150px clamp(20px, 5vw, 64px) 64px; }
.au-panel__in { width: 100%; max-width: 480px; }
.au-panel__in--wide { max-width: 620px; }
.au-h2 { margin: 0 0 6px; font-family: var(--dm-display); font-weight: 400; font-size: 36px; line-height: 1.05; }
.au-sub { margin: 0 0 24px; font-size: 15px; color: var(--slate); }
.au-sub a, .au-link { color: var(--plum); font-weight: 600; }
.au-sub a:hover, .au-link:hover { color: var(--orchid); }
.au-form { display: flex; flex-direction: column; gap: 16px; }
.au-form .ci-fld, .au-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .au-form select, .au-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(23,17,28,.18); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.au-form input:focus, .au-form select:focus, .au-form textarea:focus { outline: 2px solid var(--orchid); outline-offset: 1px; border-color: var(--plum); }
.au-form input[type="file"] { font-size: 14px; }
.au-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.au-legend { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--dm-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--plum); }
.au-legend:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.au-pw { position: relative; }
.au-pw input { padding-right: 76px !important; }
.au-pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--mist); color: var(--plum); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.au-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.au-err { margin: 6px 0 0; font-size: 13px; color: #B42318; }
.au-err ul { margin: 0; padding-left: 18px; }
.au-errors { padding: 12px 14px; border-radius: 8px; background: #FDECEA; color: #B42318; font-size: 14px; }
.au-errors ul { margin: 0; padding-left: 18px; }
.au-help { margin: 6px 0 0; font-size: 13px; color: var(--slate); }
.au-help ul { margin: 4px 0 0; padding-left: 18px; }
.au-submit { min-height: 52px; border: 0; border-radius: 8px; background: var(--plum); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s; }
.au-submit:hover { background: var(--orchid); }
.au-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 13px; color: var(--slate); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.au-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 1px solid rgba(23,17,28,.18); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; }
.au-google:hover { border-color: var(--plum); color: var(--ink); }
.au-foot { margin: 24px 0 0; text-align: center; font-size: 15px; color: var(--slate); }
.au-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--mist); color: var(--plum); font-size: 24px; }
.au-current { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.au-current img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

@media (max-width: 899.98px) {
  .au { grid-template-columns: 1fr; min-height: 0; }
  .au-brand { padding: 0 20px; }
  .au-brand__in { position: static; margin-left: 0; padding: 104px 0 32px; }
  .au-title { font-size: 40px; }
  .au-points { display: none; }
  .au-panel { padding: 32px 20px 64px; }
}