/* Auth-host login page styles. Self-hosted Inter (SIL OFL 1.1, see fonts/OFL.txt) — the CSP forbids third-party hosts.
   The package family is 'Inter Variable', NOT 'Inter' (96bae6f trap). */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  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; }
/* Former inline style on the logo <img>. */
.brand-logo { height: 36px; width: auto; object-fit: contain; display: block; }
  /* ── Tokens (from framework/designs/rentperfect-admin.html) ── */
  :root {
    --orange:        #f68a21;
    --orange-dark:   #e07a18;
    --orange-light:  #FFF7ED;
    --white:         #FFFFFF;
    --gray-50:       #F9FAFB;
    --gray-100:      #F3F4F6;
    --gray-200:      #E5E7EB;
    --gray-300:      #D1D5DB;
    --gray-400:      #9CA3AF;
    --gray-500:      #6B7280;
    --gray-700:      #374151;
    --gray-900:      #111827;
    --green:         #059669;
    --green-light:   #D1FAE5;
    --blue:          #2563EB;
    --blue-light:    #DBEAFE;
    --red:           #DC2626;
    --red-light:     #FEE2E2;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
    --shadow-lg: 0 10px 24px -6px rgba(17,24,39,.10), 0 4px 8px -4px rgba(17,24,39,.06);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; }
  body {
    font-family: 'Inter Variable', 'Inter', system-ui, sans-serif;
    background: var(--gray-100);
    color: var(--gray-700);
    line-height: 1.5;
    min-height: 100vh;
  }
  a { color: var(--orange); text-decoration: none; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

  /* ══════════ SPLIT-PANEL LOGIN ══════════ */
  .login-split { width: 100%; min-height: 100vh; display: flex; }

  /* ── Left: brand panel ── */
  .brand-panel {
    flex: 0 0 46%;
    position: relative;
    background:
      radial-gradient(rgba(246,138,33,.14) 1px, transparent 1px),
      linear-gradient(165deg, var(--orange-light) 0%, var(--white) 62%);
    background-size: 24px 24px, cover;
    border-right: 1px solid var(--gray-200);
    display: flex; flex-direction: column;
    padding: 44px 52px 32px;
    overflow: hidden;
  }
  .brand-top { display: flex; align-items: center; gap: 12px; }
  .brand-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 460px; }
  .panel-eyebrow {
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 14px;
  }
  .panel-headline {
    font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    color: var(--gray-900); margin-bottom: 10px;
  }
  .panel-tagline { font-size: .9375rem; color: var(--gray-500); margin-bottom: 30px; max-width: 380px; }

  /* Feature bullets */
  .feature-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 34px; }
  .feature { display: flex; gap: 13px; align-items: flex-start; }
  .feature-chip {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    background: var(--white); border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center; color: var(--orange);
  }
  .feature-title { font-size: .875rem; font-weight: 600; color: var(--gray-900); line-height: 1.3; }
  .feature-sub { font-size: .8125rem; color: var(--gray-500); margin-top: 1px; }

  /* ── Signature: screening-report artifact card ── */
  .artifact {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px;
    box-shadow: var(--shadow-lg); padding: 16px 18px; max-width: 340px;
    position: relative;
    animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
  }
  .artifact-behind {
    position: absolute; inset: 0; transform: rotate(-3deg) translate(-10px, 10px);
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px;
    box-shadow: var(--shadow-md); z-index: -1;
  }
  .artifact-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  }
  .artifact-title {
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-400);
  }
  .artifact-person { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .mini-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--orange) 0%, #fb923c 100%);
    color: var(--white); font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .artifact-name { font-size: .875rem; font-weight: 600; color: var(--gray-900); line-height: 1.2; }
  .artifact-sub { font-size: .75rem; color: var(--gray-400); }
  .artifact-rows { display: flex; flex-direction: column; }
  .artifact-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; border-top: 1px solid var(--gray-100); font-size: .8125rem; color: var(--gray-500);
  }
  .artifact-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--gray-100);
  }
  .badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
    border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap;
  }
  .badge-green  { background: var(--green-light);  color: var(--green); }
  .badge-blue   { background: var(--blue-light);   color: var(--blue); }
  .score-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    font-size: .8125rem; font-weight: 700;
    background: var(--green-light); color: var(--green);
  }

  /* Panel footer */
  .brand-foot { margin-top: 30px; }
  .trust-row { display: flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--gray-500); margin-bottom: 8px; }
  .trust-row svg { color: var(--green); flex-shrink: 0; }
  .copyright { font-size: .6875rem; color: var(--gray-400); }

  /* ── Right: form panel ── */
  .form-panel {
    flex: 1; background: var(--white);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 32px;
  }
  .form-box { width: 100%; max-width: 400px; }
  .portal-chip {
    display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; border-radius: 5px; padding: 3px 9px; margin-bottom: 18px;
    border: 1px solid transparent;
  }
  .chip-gray { color: var(--gray-500); background: var(--gray-100); border-color: var(--gray-200); }
  .form-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--gray-900); margin-bottom: 6px; }
  .form-sub { font-size: .875rem; color: var(--gray-500); margin-bottom: 28px; }

  /* Alerts (error / logout success) */
  .alert-box {
    border-radius: 8px; padding: .75rem 1rem; font-size: .8125rem;
    margin-bottom: 1.25rem; text-align: left; display: flex; align-items: center; gap: 8px;
  }
  .alert-error   { background: var(--red-light);   color: var(--red); }
  .alert-success { background: var(--green-light); color: var(--green); }

  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
  .input-wrap { position: relative; }
  .input-wrap .in-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--gray-400); pointer-events: none; display: flex;
  }
  .input-wrap input {
    width: 100%; height: 44px; padding: 0 42px 0 40px;
    border: 1px solid var(--gray-300); border-radius: 9px;
    font-size: .9375rem; font-family: inherit; color: var(--gray-900);
    outline: none; transition: border-color .15s, box-shadow .15s;
    background: var(--white);
  }
  .input-wrap input::placeholder { color: var(--gray-400); }
  .input-wrap input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,138,33,.16); }
  .eye-btn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px;
    color: var(--gray-400); display: flex; transition: color .15s;
  }
  .eye-btn:hover { color: var(--gray-700); }

  .btn-signin {
    width: 100%; height: 46px; margin-top: 8px;
    background: var(--orange); color: var(--white);
    border: none; border-radius: 9px; cursor: pointer;
    font-family: inherit; font-size: .9375rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s, transform .05s;
  }
  .btn-signin:hover { background: var(--orange-dark); }
  .btn-signin:active { transform: translateY(1px); }
  .btn-signin:disabled { opacity: .65; cursor: not-allowed; }

  .secure-note {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .75rem; color: var(--gray-400); margin-top: 16px;
  }

  /* ── Entrance motion ── */
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .brand-mid > * { animation: rise .45s cubic-bezier(.2,.7,.3,1) both; }
  .brand-mid > *:nth-child(1) { animation-delay: .05s; }
  .brand-mid > *:nth-child(2) { animation-delay: .1s; }
  .brand-mid > *:nth-child(3) { animation-delay: .15s; }
  .brand-mid > *:nth-child(4) { animation-delay: .2s; }
  @media (prefers-reduced-motion: reduce) {
    .brand-mid > *, .artifact { animation: none; }
  }

  /* ── Responsive: collapse panel below 1024 (lg — NN-7) ── */
  @media (max-width: 1023px) {
    .login-split { flex-direction: column; }
    .brand-panel {
      flex: none; border-right: none; border-bottom: 1px solid var(--gray-200);
      padding: 24px 24px 20px;
    }
    .brand-mid { max-width: none; margin-top: 18px; }
    .panel-headline { font-size: 1.4rem; }
    .panel-tagline { margin-bottom: 0; }
    .feature-list, .artifact, .artifact-behind, .brand-foot { display: none; }
    .form-panel { padding: 32px 20px; align-items: flex-start; }
  }