/* login.css — NTE premium red theme (full replace)
/* jn.nte.red.fullReplace.020626 */

/* =========================================================
   TOKENS
   ========================================================= */

:root{
  /* ===== NTE RED THEME — jn.nte.red.020626 ===== */

  /* Primary (keep var name to avoid refactor) */
  --ab-blue: #b51f2e;                 /* brand red */
  --ab-primary: var(--ab-blue);

  /* RGB helpers for rgba() */
  --ab-primary-rgb: 181, 31, 46;      /* #b51f2e */
  --ab-accent-rgb:  210, 170, 92;     /* champagne gold */

  /* Ink / neutrals */
  --ab-ink:  #0b1b33;                 /* deep navy ink */
  --ab-soft:#fff3f4;                  /* blush wash */
  --ab-line: rgba(15,23,42,.10);
  --ab-card: rgba(255,255,255,.86);
  --ab-glass: rgba(255,255,255,.72);
  --ab-muted: rgba(15,23,42,.62);

  /* Lux accents */
  --ab-gold: #d2aa5c;                 /* champagne gold */
  --ab-shadow: 0 22px 55px rgba(2, 10, 24, .18);
  --ab-shadow2: 0 10px 26px rgba(2, 10, 24, .12);

  /* Layout */
  --r: 22px;
}

/* =========================================================
   BASE
   ========================================================= */

*{ box-sizing:border-box; }
html, body{ height:100%; width:100%; max-width:none !important; }
body{
  margin:0;
  color: var(--ab-ink);
  background:
    radial-gradient(1100px 700px at 18% 18%, rgba(var(--ab-primary-rgb), .22), transparent 55%),
    radial-gradient(900px 600px at 70% 20%, rgba(var(--ab-accent-rgb), .14), transparent 58%),
    radial-gradient(700px 520px at 80% 80%, rgba(var(--ab-primary-rgb), .10), transparent 58%),
    linear-gradient(180deg, #fff9fa 0%, #fff5f6 60%, #fbfbff 100%);
  overflow-x:hidden;
}

/* Shell */
.pz-shell{
  min-height:100%;
  width:100%;
  max-width:none !important;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

/* ===== Right aura overlay ===== */
.pz-shell::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(900px 600px at 86% 26%, rgba(var(--ab-primary-rgb), .16), transparent 62%),
    radial-gradient(700px 520px at 92% 74%, rgba(var(--ab-accent-rgb), .10), transparent 60%),
    radial-gradient(520px 420px at 70% 55%, rgba(var(--ab-primary-rgb), .08), transparent 62%),
    linear-gradient(90deg,
      transparent 0%,
      transparent 58%,
      rgba(255,255,255,.55) 72%,
      rgba(255,255,255,.35) 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 26px,
      rgba(15,23,42,.028) 26px,
      rgba(15,23,42,.028) 27px
    );
  mix-blend-mode: normal;
  opacity: 1;
}

/* Keep content above aura */
.pz-topbar, .pz-main, .pz-footer{ position:relative; z-index:1; }

/* =========================================================
   FULL BLEED OVERRIDES (break out of any admin/admin.css container)
   ========================================================= */

.pz-topbar,
.pz-main,
.pz-footer{
  width:100vw !important;
  max-width:none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.pz-topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;

  padding: 16px clamp(16px, 2.2vw, 28px);

  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ab-line);
}

.pz-topbar .left{
  display:flex; align-items:center; gap:10px;
  font-weight:650;
  letter-spacing:.02em;
}

.pz-topbar-righttag{
  border-color: rgba(var(--ab-accent-rgb), .22) !important;
}

.pz-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--ab-primary);
  box-shadow: 0 0 0 4px rgba(var(--ab-primary-rgb), .14);
}

.pz-topbar .tag{
  font-size:12px;
  color: var(--ab-muted);
  font-weight:550;
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid rgba(var(--ab-primary-rgb), .18);
  background: rgba(255,255,255,.65);
}

/* =========================================================
   MAIN GRID (full bleed)
   ========================================================= */

.pz-main{
  flex:1;
  display:grid;

  grid-template-columns:
    minmax(520px, 1.2fr)   /* Left marketing */
    minmax(420px, 520px)   /* Resources (swapped into middle via overrides below) */
    1fr;                   /* Login (swapped into right via overrides below) */

  gap:18px;

  width: 100%;
  max-width: none;
  margin: 0;

  padding: clamp(16px, 2.2vw, 28px);

  align-items: stretch;

  /* keep all panels pinned to same row */
  grid-auto-flow: row dense;
}

.pz-main > *{ min-width:0; }

/* =========================================================
   LEFT PANEL (marketing)
   ========================================================= */

.pz-left{
  position:relative;
  border-radius: var(--r);
  overflow:hidden;
  border:1px solid rgba(var(--ab-primary-rgb), .14);
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(var(--ab-primary-rgb), .16), transparent 55%),
    radial-gradient(700px 420px at 80% 35%, rgba(var(--ab-accent-rgb), .12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56));
  box-shadow: var(--ab-shadow2);
}

.pz-left-inner{
  padding:34px 34px 28px;
  display:flex;
  flex-direction:column;
  height:100%;
  gap:18px;
}

.pz-kicker{
  display:flex; align-items:center; gap:10px;
  color: rgba(var(--ab-primary-rgb), .95);
  font-weight:750;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
}
.pz-kicker .bar{
  width:34px; height:2px;
  background: linear-gradient(90deg, var(--ab-primary), rgba(var(--ab-primary-rgb), .25));
  border-radius:999px;
}

.pz-hero-title{
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.pz-hero-title .accent{
  background: linear-gradient(90deg, var(--ab-primary), rgba(var(--ab-primary-rgb), .62));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.pz-hero-desc{
  margin: 6px 0 0;
  max-width: 52ch;
  color: rgba(15,23,42,.72);
  font-size: 15px;
  line-height: 1.55;
}

.pz-feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top: 6px;
}

.pz-feature{
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.62);
  border-radius: 16px;
  padding:12px 12px;
  box-shadow: 0 10px 22px rgba(2,10,24,.06);
}
.pz-feature .t{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  color: rgba(11,27,51,.92);
  font-size: 13px;
}
.pz-feature .t .ico{
  width:30px; height:30px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(var(--ab-primary-rgb), .12);
  border:1px solid rgba(var(--ab-primary-rgb), .18);
  color: rgba(var(--ab-primary-rgb), .92);
  font-size: 15px;
}
.pz-feature .d{
  margin-top:6px;
  color: rgba(15,23,42,.62);
  font-size: 13px;
  line-height: 1.45;
}

.pz-left-footer{
  margin-top:auto;
  padding-top: 14px;
  border-top:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color: rgba(15,23,42,.55);
  font-size: 12px;
}

.pz-trust{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}
.pz-badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  color: rgba(15,23,42,.62);
  font-weight:600;
}
.pz-badge strong{ color: rgba(11,27,51,.85); font-weight:750; }

/* =========================================================
   RIGHT PANEL (login)
   ========================================================= */

.pz-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pz-login-wrap{
  width: min(460px, 92vw);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pz-logo-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px dashed rgba(var(--ab-primary-rgb), .28);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  color: rgba(15,23,42,.60);
  font-size: 12px;
}
.pz-logo-slot img{
  max-height: 44px;
  max-width: 100%;
  object-fit: contain;
  display:block;
}

.pz-card{
  background: var(--ab-card);
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--ab-shadow);
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}

.pz-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(320px 160px at 15% 0%, rgba(var(--ab-primary-rgb), .14), transparent 55%),
    radial-gradient(240px 150px at 85% 0%, rgba(var(--ab-accent-rgb), .12), transparent 60%);
  pointer-events:none;
}
.pz-card > *{ position:relative; }

.pz-brand{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(var(--ab-primary-rgb), .92);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}
.pz-brand .slash{
  width:26px; height:2px;
  background: linear-gradient(90deg, var(--ab-primary), rgba(var(--ab-accent-rgb), .36));
  border-radius:999px;
}

.pz-title{
  margin:0 0 6px;
  color: rgba(11,27,51,.95);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.pz-sub{
  margin:0 0 14px;
  color: rgba(15,23,42,.62);
  font-size: 13px;
  line-height:1.5;
}

.pz-hr{
  height:1px;
  background: rgba(15,23,42,.10);
  margin: 14px 0;
}

.pz-muted{
  color: rgba(15,23,42,.55);
  font-size: 12px;
  font-weight:650;
  letter-spacing:.02em;
}

.pz-field{ display:grid; gap:6px; margin:10px 0 0; }
.pz-field label{
  font-size: 12px;
  color: rgba(15,23,42,.72);
  font-weight:650;
}
.pz-field input{
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.pz-field input:focus{
  border-color: rgba(var(--ab-primary-rgb), .40);
  box-shadow: 0 0 0 4px rgba(var(--ab-primary-rgb), .14);
}

.pz-btn{
  display:flex; align-items:center; gap:10px;
  width:100%;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  cursor:pointer;
  font-weight:750;
  color: rgba(11,27,51,.92);
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.pz-btn:hover{ background: rgba(255,255,255,.92); box-shadow: 0 10px 20px rgba(2,10,24,.10); }
.pz-btn:active{ transform: translateY(1px); }
.pz-btn.primary{
  background: linear-gradient(135deg, rgba(var(--ab-primary-rgb), .98), rgba(var(--ab-primary-rgb), .82));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 28px rgba(var(--ab-primary-rgb), .22);
}
.pz-row{ display:flex; gap:10px; margin-top:12px; }
.pz-row > *{ flex:1; }

.pz-msg{
  margin-top: 14px;
  text-align:center;
  color: rgba(15,23,42,.62);
  font-size: 13px;
  min-height: 18px;
}

/* Dev flag polish (hidden by default but nice when enabled) */
.pz-devflag{
  margin-top:10px;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(15,23,42,.65);
}
.pz-devtiny{
  font-size:12px;
  color:rgba(15,23,42,.55);
}

/* =========================================================
   RESOURCES PANEL
   ========================================================= */

.pz-resources{
  position:relative;
  border-radius: var(--r);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(900px 520px at 75% 20%, rgba(var(--ab-primary-rgb), .12), transparent 60%),
    radial-gradient(680px 480px at 35% 85%, rgba(var(--ab-accent-rgb), .10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.55));
  box-shadow: var(--ab-shadow2);
}

.pz-res-inner{
  padding: 28px 26px 22px;
  display:flex;
  flex-direction:column;
  height:100%;
  gap:12px;
}

.pz-kicker.pz-kicker-muted{
  color: rgba(var(--ab-primary-rgb), .90);
}

.pz-res-title{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(11,27,51,.95);
}

.pz-res-desc{
  margin: 0 0 6px;
  color: rgba(15,23,42,.66);
  font-size: 13px;
  line-height: 1.55;
  max-width: 55ch;
}

.pz-res-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top: 6px;
}

.pz-res-card{
  text-decoration:none;
  color: inherit;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.62);
  box-shadow: 0 10px 22px rgba(2,10,24,.06);
  padding: 14px 14px;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}

.pz-res-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(340px 160px at 15% 0%, rgba(var(--ab-primary-rgb), .10), transparent 58%),
    radial-gradient(260px 150px at 85% 0%, rgba(var(--ab-accent-rgb), .08), transparent 62%);
  pointer-events:none;
  opacity:.9;
}

.pz-res-card > *{ position:relative; }

.pz-res-card:hover{
  background: rgba(255,255,255,.72);
  border-color: rgba(var(--ab-primary-rgb), .18);
  box-shadow: 0 16px 34px rgba(2,10,24,.10);
  transform: translateY(-1px);
}

.pz-res-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:750;
  color: rgba(11,27,51,.92);
}

.pz-res-ico{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(var(--ab-primary-rgb), .12);
  border: 1px solid rgba(var(--ab-primary-rgb), .18);
  color: rgba(var(--ab-primary-rgb), .92);
  font-size: 16px;
  flex: 0 0 auto;
}

.pz-res-name{
  font-size: 13px;
}

.pz-res-sub{
  margin-top: 8px;
  color: rgba(15,23,42,.62);
  font-size: 12.5px;
  line-height: 1.45;
}

.pz-res-meta{
  margin-top: 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: rgba(15,23,42,.55);
  font-weight:650;
}

.pz-res-meta::before{
  content:"";
  width:28px; height:2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--ab-primary-rgb), .70), rgba(var(--ab-accent-rgb), .26));
}

/* NOTE: footer chips already deleted in your HTML/CSS; keep hidden just in case */
.pz-res-footer{ display:none !important; }

/* =========================================================
   FOOTER
   ========================================================= */

.pz-footer{
  padding: 14px clamp(16px, 2.2vw, 28px) 18px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
}

.pz-footer-inner{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color: rgba(15,23,42,.55);
  font-size: 12px;
  flex-wrap: wrap;
}

.pz-footer-links{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pz-footer-built{ margin-right:10px; }
.pz-dotsep{ opacity:.5; margin:0 2px; }

.pz-footer a{
  color: rgba(var(--ab-primary-rgb), .90);
  text-decoration:none;
  font-weight:650;
}
.pz-footer a:hover{ text-decoration:underline; }

/* =========================================================
   PANEL SWAP + HARD PIN (keeps everything in one row)
   ========================================================= */

/* force columns + row pin */
.pz-left{ grid-column: 1 !important; grid-row: 1 !important; }
.pz-resources{ grid-column: 2 !important; grid-row: 1 !important; }
.pz-right{ grid-column: 3 !important; grid-row: 1 !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px){
  .pz-main{
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .pz-left, .pz-resources, .pz-right{
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .pz-left-inner{ padding: 26px 22px 20px; }
  .pz-feature-grid{ grid-template-columns: 1fr; }
  .pz-right{ padding-bottom: 6px; }
  .pz-res-inner{ padding: 22px 20px 18px; }
}

/* keep full-bleed even on ultra-wide */
@media (min-width: 1600px){
  .pz-main{ max-width:none; }
}



/* =========================================================
   SCROLL FIX (laptops) — jn.login.scrollFix.020626
   Fix: footer not reachable + panels cut off w/ no scroll
   Root cause: .pz-shell overflow:hidden prevents page scroll
   ========================================================= */

/* Allow the page to scroll vertically (keep horizontal hidden) */
html, body{
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Let the app shell grow taller than the viewport */
.pz-shell{
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;   /* overrides overflow:hidden */
}

/* Make sure the main area can shrink without forcing overflow clipping */
.pz-main{
  min-height: 0 !important;
  align-content: start !important;
}

/* Let panels keep their nice height but never trap overflow */
.pz-left,
.pz-resources,
.pz-right{
  min-height: 0 !important;
}

/* Sticky header should stay, but not block scroll layout on small heights */
.pz-topbar{
  top: 0;
}

/* Optional: on short-height laptop screens, reduce vertical padding a bit */
@media (max-height: 780px){
  .pz-main{ padding-top: 14px !important; padding-bottom: 14px !important; }
  .pz-left-inner{ padding: 28px 28px 22px !important; }
  .pz-res-inner{ padding: 22px 22px 18px !important; }
}


/* =========================================================
   Scrollbar color — jn.nte.scrollbar.020626
   ========================================================= */

/* Firefox */
html{
  scrollbar-color: rgba(var(--ab-primary-rgb), .55) rgba(15,23,42,.08);
  scrollbar-width: thin;
}

/* Chromium / Edge / Safari */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{
  background: rgba(15,23,42,.06);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(var(--ab-primary-rgb), .55),
    rgba(var(--ab-primary-rgb), .35)
  );
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(var(--ab-primary-rgb), .70),
    rgba(var(--ab-primary-rgb), .45)
  );
}




/* =========================================================
   NTE STRUCTURE SYNC — keep NTE colors, use AccessHealth behavior
   jn.nte.structureSync.022626
   Paste at VERY BOTTOM of NTE login.css
   ========================================================= */

/* Desktop: keep grid pinned and start at top */
@media (min-width: 981px){
  .pz-main{
    align-items: start !important;   /* top-align the whole row */
  }

  /* Put LOGIN on the right, and pin it to the top-right */
  .pz-right{
    justify-content: flex-end !important; /* move login block to the right edge of its column */
    align-items: flex-start !important;   /* pin to top */
  }

  /* Prevent accidental vertical centering */
  .pz-login-wrap{
    margin-top: 0 !important;
  }
}

/* Desktop: hard-pin all three panels to row 1 so nothing drops */
@media (min-width: 981px){
  .pz-main{ grid-auto-flow: row dense !important; }

  .pz-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .pz-resources{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .pz-right{
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}

/* Mobile: LOGIN first, then marketing, then resources */
@media (max-width: 980px){
  .pz-main{
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
  }

  .pz-right{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: center !important;    /* looks nicer on mobile */
    align-items: stretch !important;
  }

  .pz-left{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .pz-resources{
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}

/* jn.topbar.pills.noExpand.022626 */
.pz-topbar .tag{
  display: inline-flex;
  align-items: center;

  max-width: 180px;              /* tweak: 160–220 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  flex: 0 1 auto;                /* allow shrink, prevent forced grow */
}

.pz-topbar .left{ min-width: 0; } /* allows ellipsis to actually work */