/* Theós Financial — borrower login theme (apply.theosfinancial.com).
   Matches the home loan application (ops/edge/apply): navy + gold brand,
   Montserrat display / Inter body, light by default with an explicit dark
   mode via data-theme on <html> (set by theme-head.ftl / theme-switch.ftl).
   Everything is self-hosted: the edge CSP blocks third-party origins. */

/* ---- Fonts (copied from ops/edge/apply/assets/vendor/fonts) ---- */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/inter.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:600 800; font-display:swap;
  src:url(../fonts/montserrat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Brand tokens (same values as the apply app) ---- */
:root{
  --font-d:"Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --navy:#0f2238; --navy2:#0a1829; --navy3:#16304d; --amber:#ffb347; --amber2:#f29a1f; --sky:#9dc6ea;
  --bg:#f5f8fb; --panel:#ffffff;
  --rail:#0f2238; --rail-fg:#dce5f0; --rail-muted:#8fa1b8; --rail-line:rgba(255,255,255,.09);
  --ink:#17243a; --muted:#56657a; --faint:#8a98aa; --line:#dde5ee; --line-2:#eaf0f6;
  --field:#ffffff; --field-line:#cfd9e5;
  --accent:#2f7fd1; --accent-ink:#1f66b0; --accent-soft:rgba(47,127,209,.10);
  --ok:#1f9d6b; --ok-soft:rgba(31,157,107,.12);
  --warn:#b7791f; --warn-soft:rgba(217,164,65,.14);
  --danger:#c0392b; --danger-soft:rgba(192,57,43,.09);
  --gold-text:#c9720a;
  --btn-bg:#0f2238; --btn-bg-hover:#16304d; --btn-fg:#ffffff;
  --focus:rgba(47,127,209,.45);
  --radius:16px; --radius-sm:10px;
  --shadow:0 24px 60px -28px rgba(15,34,56,.28);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0a1829; --panel:#0f2238;
  --rail:#071322; --rail-fg:#dce5f0; --rail-muted:#7f92aa; --rail-line:rgba(255,255,255,.07);
  --ink:#eef3f9; --muted:#a6b3c4; --faint:#7d8ca1; --line:#213a57; --line-2:#16304d;
  --field:#0c1d31; --field-line:#2a4462;
  --accent:#9dc6ea; --accent-ink:#b9d7f1; --accent-soft:rgba(157,198,234,.13);
  --ok:#3ccf91; --ok-soft:rgba(60,207,145,.14);
  --warn:#e0a84a; --warn-soft:rgba(224,168,74,.14);
  --danger:#ff6b5e; --danger-soft:rgba(255,107,94,.12);
  --gold-text:#ffb347;
  --btn-bg:#2f7fd1; --btn-bg-hover:#3b8de0; --btn-fg:#ffffff;
  --focus:rgba(157,198,234,.55);
  --shadow:0 30px 70px -30px rgba(0,0,0,.65);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0a1829; --panel:#0f2238;
  --rail:#071322; --rail-fg:#dce5f0; --rail-muted:#7f92aa; --rail-line:rgba(255,255,255,.07);
  --ink:#eef3f9; --muted:#a6b3c4; --faint:#7d8ca1; --line:#213a57; --line-2:#16304d;
  --field:#0c1d31; --field-line:#2a4462;
  --accent:#9dc6ea; --accent-ink:#b9d7f1; --accent-soft:rgba(157,198,234,.13);
  --ok:#3ccf91; --ok-soft:rgba(60,207,145,.14);
  --warn:#e0a84a; --warn-soft:rgba(224,168,74,.14);
  --danger:#ff6b5e; --danger-soft:rgba(255,107,94,.12);
  --gold-text:#ffb347;
  --btn-bg:#2f7fd1; --btn-bg-hover:#3b8de0; --btn-fg:#ffffff;
  --focus:rgba(157,198,234,.55);
  --shadow:0 30px 70px -30px rgba(0,0,0,.65);
  color-scheme:dark;
}

/* ---- Base ---- */
*,*::before,*::after{margin:0; padding:0; box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh; min-height:100dvh;
  font:400 15px/1.55 var(--font-b); color:var(--ink); letter-spacing:-.003em;
  background:
    radial-gradient(60rem 40rem at -10% -20%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%),
    radial-gradient(50rem 36rem at 110% 120%, rgba(255,179,71,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem; overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- Theme toggle (top-right, same as the app) ---- */
.theme-toggle{
  position:fixed; top:1.05rem; right:1.15rem; z-index:20; width:40px; height:40px;
  display:grid; place-items:center; border-radius:999px; border:1px solid var(--field-line);
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--muted); cursor:pointer; transition:color .15s,border-color .15s,box-shadow .15s;
}
.theme-toggle:hover{color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.theme-toggle:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus)}
.theme-toggle svg{width:19px; height:19px}
.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:block}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:block}
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:none}
}

/* ---- Shells ---- */
.auth{position:relative; z-index:1; width:100%; display:flex; justify-content:center; min-width:0}

/* Split shell (sign in / create account): navy brand rail + form card */
.auth__grid{
  width:100%; max-width:940px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.auth__aside{
  position:relative; overflow:hidden; display:flex; align-items:center;
  padding:2.75rem 2.5rem; background:var(--rail); color:var(--rail-fg);
}
.auth__aside::after{ /* soft gold glow, decorative */
  content:""; position:absolute; width:26rem; height:26rem; right:-12rem; bottom:-14rem; border-radius:50%;
  background:radial-gradient(circle, rgba(255,179,71,.22), transparent 62%); pointer-events:none;
}
.aside__inner{position:relative; z-index:1; min-width:0; width:100%}
.brand{display:block; line-height:0; margin-bottom:2.2rem}
.brand__logo{display:block; width:100%; max-width:232px; height:auto}
.brand__logo--compact{display:none}
.aside__tag{font:600 .68rem/1 var(--font-d); letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:.9rem}
.aside__head{font:700 1.65rem/1.2 var(--font-d); letter-spacing:-.01em; color:#fff; text-wrap:balance; margin-bottom:1.7rem}
.trust{list-style:none; display:flex; flex-direction:column; gap:.95rem}
.trust li{display:flex; align-items:flex-start; gap:.7rem; font-size:.9rem; line-height:1.45; color:var(--rail-fg)}
.trust__ic{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,179,71,.12); color:var(--amber); border:1px solid rgba(255,179,71,.22)}
.trust__ic svg{width:15px; height:15px}

.auth__card{padding:2.75rem 2.5rem; display:flex; flex-direction:column; min-width:0}

/* Solo shell (every other screen): one card with a navy brand header */
.solo{
  width:100%; max-width:460px; min-width:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.solo__head{
  position:relative; overflow:hidden; background:var(--rail); padding:1.35rem 2.25rem; line-height:0;
  border-bottom:1px solid var(--rail-line);
}
.solo__head::after{
  content:""; position:absolute; width:16rem; height:16rem; right:-7rem; top:-9rem; border-radius:50%;
  background:radial-gradient(circle, rgba(255,179,71,.20), transparent 62%); pointer-events:none;
}
.solo__logo{position:relative; z-index:1; display:block; height:34px; width:auto; max-width:100%}
.solo__body{padding:2rem 2.25rem 1.75rem; display:flex; flex-direction:column; min-width:0}

/* ---- Content ---- */
.auth__eyebrow{font:600 .68rem/1 var(--font-d); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); margin-bottom:.7rem}
.auth__title{font:700 1.55rem/1.2 var(--font-d); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; overflow-wrap:anywhere}
.auth__subtitle{color:var(--muted); font-size:.95rem; margin:.5rem 0 1.5rem; overflow-wrap:anywhere}
.auth__subtitle strong{color:var(--ink); font-weight:600}

.auth__form{display:flex; flex-direction:column; gap:1.05rem}
.auth__row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem}
.field{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.field__label{font-size:.86rem; font-weight:600; color:var(--ink)}
.field__hint{font-size:.82rem; color:var(--faint); line-height:1.45}
.field__err{font-size:.8rem; font-weight:600; color:var(--danger)}
.field__input{
  width:100%; min-width:0; background:var(--field); border:1.5px solid var(--field-line); color:var(--ink);
  border-radius:var(--radius-sm); padding:.72rem .85rem; font:inherit; font-size:1rem; /* 16px: no iOS zoom */
  transition:border-color .15s, box-shadow .15s;
}
.field__input::placeholder{color:var(--faint)}
.field__input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus)}
.field__input[aria-invalid="true"]{border-color:var(--danger)}

/* credential picker (OTP page with more than one device) */
.choice{display:flex; align-items:center; gap:.65rem; padding:.7rem .85rem; border:1.5px solid var(--field-line);
  border-radius:var(--radius-sm); background:var(--field); cursor:pointer; font-size:.95rem}
.choice input{accent-color:var(--accent); width:1.05rem; height:1.05rem; flex:none}
.choice:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.choice:has(input:focus-visible){box-shadow:0 0 0 3px var(--focus)}

.auth__row{display:flex; align-items:center}
.auth__row--end{justify-content:flex-end; margin-top:-.35rem} /* only used inside forms (Forgot password?) */

/* Secondary links under a form / button. Always its own block with real
   spacing, so it can never overlap the button above it. */
.auth__links{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.25rem; margin-top:1.15rem; text-align:center}

.auth__link{color:var(--accent-ink); font-size:.88rem; font-weight:600; text-decoration:none; border-radius:4px}
.auth__link:hover{text-decoration:underline; text-underline-offset:2px}
.auth__link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.auth__link--strong{color:var(--accent-ink)}
.auth__alt{margin-top:1.3rem; font-size:.9rem; color:var(--muted); text-align:center}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  border:1.5px solid transparent; border-radius:var(--radius-sm); font:600 .98rem/1.2 var(--font-b);
  padding:.85rem 1.2rem; cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color .15s, box-shadow .15s, transform .12s; margin-top:.35rem;
}
.btn--primary{background:var(--btn-bg); color:var(--btn-fg); box-shadow:0 12px 24px -14px rgba(15,34,56,.7)}
.btn--primary:hover{background:var(--btn-bg-hover)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--field-line)}
.btn--ghost:hover{border-color:var(--accent); background:var(--accent-soft)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--panel), 0 0 0 5px var(--accent)}
.btn__glyph{transition:transform .15s}
.btn:hover .btn__glyph{transform:translateX(3px)}
.btn + .btn{margin-top:.6rem}

/* ---- Social login ---- */
.social{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem}
.social-btn{display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:.75rem 1rem; border-radius:var(--radius-sm); border:1.5px solid var(--field-line);
  background:var(--field); color:var(--ink); font:inherit; font-weight:600; font-size:.94rem;
  text-decoration:none; cursor:pointer; transition:border-color .15s, box-shadow .15s}
.social-btn:hover{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.social-btn:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus)}
.social-btn__logo{width:18px; height:18px; flex:none; display:inline-block}
.divider{display:flex; align-items:center; gap:.8rem; color:var(--faint); font-size:.8rem; margin:0 0 1.1rem}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---- Notices (Keycloak messages) ---- */
.auth__notice{
  padding:.75rem .95rem; border-radius:var(--radius-sm); font-size:.9rem; line-height:1.45; margin-bottom:1.1rem;
  background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); color:var(--ink);
  overflow-wrap:anywhere;
}
.auth__notice--success{background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.auth__notice--warning{background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.auth__notice--error{background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 40%,transparent)}

/* numbered "what happens next" steps */
.steps-list{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:.7rem; margin:0 0 1.2rem}
.steps-list li{counter-increment:s; display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; line-height:1.45; color:var(--muted)}
.steps-list li::before{content:counter(s); flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font:600 .74rem/1 var(--font-b); color:var(--navy); background:var(--amber); margin-top:-1px}
.steps-list strong{color:var(--ink); font-weight:600}

/* ---- Footer ---- */
.auth__foot{display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:1.6rem; padding-top:1.1rem;
  border-top:1px solid var(--line-2); color:var(--faint); font-size:.8rem}
.auth__chip{width:14px; height:14px; flex:none; background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- QR setup page (login-config-totp) ---- */
.auth__qr{text-align:center; margin:0 0 1.3rem}
.auth__qr-img{width:184px; height:184px; max-width:100%; border-radius:12px; background:#fff; padding:8px; border:1px solid var(--line)}
.auth__qr .field__hint{margin-top:.6rem}
.auth__secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88rem; letter-spacing:.06em;
  word-break:break-all; background:var(--field); border:1px solid var(--field-line); border-radius:8px;
  padding:.5rem .7rem; margin-top:.4rem; color:var(--ink); user-select:all}

/* ---- Responsive ---- */
@media (max-width:820px){
  body{padding:4rem 1rem 1.5rem; align-items:flex-start} /* room for the fixed theme toggle */
  .theme-toggle{top:.7rem; right:.8rem; width:38px; height:38px}
  .auth__grid{grid-template-columns:minmax(0,1fr); max-width:480px}
  .auth__aside{padding:1.4rem 1.5rem 1.5rem}
  .brand{margin-bottom:1.1rem}
  .brand__logo--full{display:none}
  .brand__logo--compact{display:block; height:30px; width:auto; max-width:100%}
  .aside__tag{margin-bottom:.6rem}
  .aside__head{font-size:1.2rem; margin-bottom:1rem}
  .trust{gap:.55rem}
  .trust li{font-size:.84rem; align-items:center}
  .trust__ic{width:24px; height:24px}
  .trust__ic svg{width:13px; height:13px}
  .auth__card{padding:1.6rem 1.5rem 1.4rem}
}
@media (max-width:480px){
  .auth__row2{grid-template-columns:minmax(0,1fr)}
  .solo__head{padding:1.1rem 1.4rem}
  .solo__logo{height:28px}
  .solo__body{padding:1.5rem 1.4rem 1.3rem}
  .auth__card{padding:1.5rem 1.3rem 1.3rem}
  .auth__aside{padding:1.25rem 1.3rem 1.35rem}
  .auth__title{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* info page: Keycloak-supplied heading, then optional notice / actions */
.auth__title + .auth__notice{margin-top:1.1rem}
.info__actions{margin-top:1rem}
.info__btn{margin-top:1.4rem}