/* Login look "Command console" (2026-11-01, option C of the previews in
   routes/preview.routes.js). Loaded only by views/login.ejs and
   views/master/master-login.ejs (extraStyles in the header partials), so no
   other page's look changes.
     - Hex grid HUD with scanlines, a radar ring with a rotating sweep round
       the Rabt hub badge, module blips, and a data stream in JetBrains Mono
       (views/partials/login-console.ejs, public/js/login-console.js).
     - Tenant login: graphic left, card right. Master login: card left,
       graphic right, in the master theme accents. On the master host
       (.lp--gold): the tenant layout in gold. All three fit the window
       with the radar filling its panel (2026-11-03).
     - Animation is transform/opacity only. Reduced motion gets a still
       frame; below 900px only the card shows.
   The card and its forms are the plain style.css ones. */

/* ---- Logo badge above the card title (and the large focal one) ---- */
.auth-card__brand {
  text-align: center;
  margin-bottom: 0.25rem;
}
.auth-card__brand h1 {
  margin-bottom: 0;
}
.brand-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  box-shadow: 0 6px 16px rgba(11, 37, 69, 0.18);
}
.brand-badge svg {
  width: 40px;
  height: 40px;
}
.brand-badge--lg {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
}

/* ---- Palette: tenant brand, master theme accents ---- */
main.lp {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.lp {
  --lp-bg1: #0b2545;
  --lp-bg2: #1b4965;
  --lp-accent: #5fa8d3;
  --lp-accent-rgb: 95, 168, 211;
  --lp-gold: #c9942b;
  --lp-gold-rgb: 201, 148, 43;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: var(--lp-bg1);
  background-image: linear-gradient(160deg, var(--lp-bg1) 0%, var(--lp-bg2) 100%);
}
.lp--master {
  --lp-bg1: #16102e;
  --lp-bg2: #241b4f;
  --lp-accent: #a78bfa;
  --lp-accent-rgb: 167, 139, 250;
  --lp-gold: #f0b429;
  --lp-gold-rgb: 240, 180, 41;
}

/* ---- Layout: graphic + card (master: card first) ---- */
.lp__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lp__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas: "visual form";
  min-height: 100vh;
}
.lp--master .lp__layout {
  grid-template-columns: minmax(340px, 1fr) 1.15fr;
  grid-template-areas: "form visual";
  padding-top: 2.25rem; /* fixed .master-badge bar */
}
.lp__visual {
  grid-area: visual;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}
.lp__form {
  grid-area: form;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}
.lp .auth-card {
  max-width: 380px;
  margin-bottom: 0;
}

/* ---- Hub badge: the focal logo in the centre of the radar ---- */
.lp__stage {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
}
.lp__stage > .brand-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  margin: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(var(--lp-gold-rgb), 0.18), 0 0 48px rgba(var(--lp-gold-rgb), 0.45);
  z-index: 2;
}
.lp__stage > .brand-badge svg {
  width: 60px;
  height: 60px;
}
.lp__eyebrow {
  margin: 1.25rem 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-accent);
}
.lp__title {
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lp__caption {
  max-width: 360px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
}

/* ---- Master card: light card with master accents ---- */
.lp--master .auth-card {
  --navy: #241b4f;
  --slate: #3d2e73;
  --sky: #a78bfa;
  --sky-text: #6d28d9;
  --gold: #f0b429;
  --page-plane: #f8f7fc;
  --surface-1: #ffffff;
  --surface-sunken: #efecf8;
  --text-primary: #1b1435;
  --text-secondary: #4a3f72;
  --text-muted: #6f6596;
  --border-hairline: rgba(36, 27, 79, 0.14);
  --gridline: #ddd6f3;
  --due: #b3423b;
  color: var(--text-primary);
}
.lp--master .stacked-form input:focus {
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.4);
}

/* ---- Master host (MASTER_HOST, 2026-11-02): the company console in gold,
   card on the right, sized to the window, with a radar that fills the
   left panel (2026-11-03) ---- */
.lp--gold {
  --lp-accent: #c9942b;
  --lp-accent-rgb: 201, 148, 43;
}
.lp--gold .auth-card {
  --navy: #0b2545;
  --slate: #1b4965;
  --sky: #c9942b;
  --sky-text: #a97918;
  --gold: #c9942b;
  --page-plane: #f7f5f1;
  --surface-1: #ffffff;
  --surface-sunken: #f1ede4;
  --text-primary: #0f2540;
  --text-secondary: #3d5871;
  --text-muted: #74889a;
  --border-hairline: rgba(11, 37, 69, 0.13);
  --gridline: #e6e1d4;
  --due: #b3423b;
  color: var(--text-primary);
}
.lp--gold .auth-card .btn-primary {
  background: var(--navy);
}
.lp--gold .auth-card .btn-primary:hover {
  background: var(--slate);
}
.lp--gold .stacked-form input:focus {
  box-shadow: 0 0 0 3px rgba(201, 148, 43, 0.35);
}

/* ---- Fit (2026-11-03): every console login -- company /login, master
   /master/login and the master host -- is exactly the window (dvh, so
   mobile browser bars don't push it) and never scrolls. Above the radar a
   compact head (status line + title); the radar takes all the height the
   head and the log box leave and is the smaller of that box's width and
   height (container units), so it fills the left panel and follows the
   window on resize and zoom. Text, log box and card scale with the
   height. --lp-top / --lp-bottom keep clear of the fixed master badge bar
   and the fixed footer line. ---- */
.lp--c {
  --lp-top: 0px;
  --lp-bottom: 1.9rem;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.lp--master,
.lp--gold {
  --lp-top: 2.25rem;
  --lp-bottom: 1.75rem;
}
.lp--c .lp__layout {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  padding: var(--lp-top) 0 var(--lp-bottom);
}
.lp--c .lp__visual {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Full-width column: an auto column would be only as wide as the log
     box, capping the radar at its width however big the window is. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-height: 0;
  padding: clamp(0.5rem, 2.2dvh, 2rem) clamp(1rem, 2.5vw, 2.5rem);
}
.lp--c .lp__head {
  grid-row: 1;
  margin-bottom: clamp(0.25rem, 1.2dvh, 1rem);
}
.lp--c .lp__eyebrow {
  margin: 0 0 0.2rem;
  font-size: clamp(0.62rem, 1.3dvh, 0.74rem);
}
.lp--c .lp__title {
  margin: 0;
  font-size: clamp(1.05rem, 2.7dvh, 1.6rem);
  line-height: 1.2;
}
.lp--c .lp__stage {
  /* Fixed rows: with the head hidden (short windows) the stage must not
     slide up into the head's auto row and collapse to nothing. */
  grid-row: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  container-type: size;
}
.lp--c .lp-c__sweep {
  inset: auto;
  left: calc(50% - min(100cqw, 100cqh) * 0.38333); /* radius 230 of 600 */
  top: calc(50% - min(100cqw, 100cqh) * 0.38333);
  width: calc(min(100cqw, 100cqh) * 0.76667);
  height: calc(min(100cqw, 100cqh) * 0.76667);
}
.lp--c .lp__stage > .brand-badge {
  width: calc(min(100cqw, 100cqh) * 0.235);
  height: calc(min(100cqw, 100cqh) * 0.235);
}
.lp--c .lp__stage > .brand-badge svg {
  width: 55%;
  height: 55%;
}
.lp--c .lp-c__stream {
  grid-row: 3;
  height: clamp(4.4rem, 12.5dvh, 8.6rem);
  margin-top: clamp(0.4rem, 1.4dvh, 1.1rem);
  padding: 0.45rem 0.9rem;
  font-size: clamp(0.64rem, 1.35dvh, 0.76rem);
}
.lp--c .lp__form {
  min-height: 0;
  padding: clamp(0.75rem, 2.5dvh, 2.5rem) 1.5rem;
}
.lp--c .auth-card {
  padding: clamp(1rem, 2.6dvh, 1.5rem) 1.5rem;
}
.lp--c .auth-card .brand-badge {
  width: clamp(48px, 8dvh, 72px);
  height: clamp(48px, 8dvh, 72px);
  margin-bottom: clamp(0.35rem, 1dvh, 0.75rem);
}
.lp--c .auth-card .brand-badge svg {
  width: 55%;
  height: 55%;
}
/* The footer line sits on the console, fixed, instead of below it. */
main.lp--c ~ footer,
.lp--c ~ .master-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.4rem 1rem;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 0;
}
main.lp--c ~ footer p {
  margin: 0;
}
/* Short windows: the head goes, so the radar keeps its room. */
@media (max-height: 600px) {
  .lp--c .lp__head {
    display: none;
  }
}

/* ---- Hex grid, scanlines, scan bar ---- */
.lp-c__hexgrid {
  position: absolute;
  inset: 0;
  background-size: 41.57px 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72'%3E%3Cpath d='M20.78 0L41.57 12V36L20.78 48L0 36V12ZM20.78 48V72' fill='none' stroke='%235FA8D3' stroke-opacity='0.11' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, rgba(0, 0, 0, 0.35) 70%);
  mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, rgba(0, 0, 0, 0.35) 70%);
}
.lp--master .lp-c__hexgrid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72'%3E%3Cpath d='M20.78 0L41.57 12V36L20.78 48L0 36V12ZM20.78 48V72' fill='none' stroke='%23A78BFA' stroke-opacity='0.11' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgba(0, 0, 0, 0.35) 70%);
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgba(0, 0, 0, 0.35) 70%);
}
.lp--gold .lp-c__hexgrid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.57' height='72'%3E%3Cpath d='M20.78 0L41.57 12V36L20.78 48L0 36V12ZM20.78 48V72' fill='none' stroke='%23C9942B' stroke-opacity='0.11' stroke-width='1'/%3E%3C/svg%3E");
}
.lp-c__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}
.lp-c__scanbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(var(--lp-accent-rgb), 0.07), transparent);
  animation: lpC-scan 7s linear infinite;
  will-change: transform;
}
@keyframes lpC-scan {
  from { transform: translateY(-140px); }
  to { transform: translateY(100vh); }
}

/* ---- Radar ---- */
.lp-c__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lp-c__ring {
  fill: none;
  stroke: rgba(var(--lp-accent-rgb), 0.5);
  stroke-width: 1.5;
}
.lp-c__ring--dim {
  stroke: rgba(var(--lp-accent-rgb), 0.22);
  stroke-width: 1;
}
.lp-c__ticks {
  fill: none;
  stroke: rgba(var(--lp-accent-rgb), 0.55);
  stroke-width: 10;
  stroke-dasharray: 1.5 12.6;
  transform-origin: 300px 300px;
  animation: lpSpin 90s linear infinite reverse;
}
.lp-c__cross {
  fill: none;
  stroke: rgba(var(--lp-accent-rgb), 0.25);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.lp-c__tag {
  fill: rgba(255, 255, 255, 0.88);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lp-c__blip {
  fill: var(--lp-gold);
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: lpC-blip 4s ease-out infinite;
}
/* Each blip lights as the 4s sweep passes its bearing (0, 60, ... 300 deg). */
.lp-c__blip--2 { animation-delay: 0.667s; }
.lp-c__blip--3 { animation-delay: 1.333s; }
.lp-c__blip--4 { animation-delay: 2s; }
.lp-c__blip--5 { animation-delay: 2.667s; }
.lp-c__blip--6 { animation-delay: 3.333s; }
@keyframes lpC-blip {
  0% { opacity: 1; transform: scale(1.5); }
  60%, 100% { opacity: 0.25; transform: scale(1); }
}
.lp-c__sweep {
  position: absolute;
  inset: 11.667%; /* radius 230 of 600 */
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--lp-accent-rgb), 0) 0deg, rgba(var(--lp-accent-rgb), 0) 300deg, rgba(var(--lp-accent-rgb), 0.38) 360deg);
  animation: lpSpin 4s linear infinite;
  will-change: transform;
}

/* ---- Data stream ---- */
.lp-c__stream {
  list-style: none;
  width: min(100%, 420px);
  margin: 1.25rem auto 0;
  padding: 0.65rem 0.9rem;
  height: 8.6rem;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(4, 16, 33, 0.45);
  border: 1px solid rgba(var(--lp-accent-rgb), 0.3);
  border-radius: 6px;
}
.lp-c__stream li {
  white-space: pre;
  animation: lpC-line 0.35s ease-out;
}
.lp-c__t { color: rgba(255, 255, 255, 0.6); }
.lp-c__m { color: var(--lp-accent); }
.lp-c__ok { color: #6fd39b; }
@keyframes lpC-line {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- HUD corner brackets on the card ---- */
.lp--c .auth-card {
  position: relative;
  border-color: rgba(var(--lp-accent-rgb), 0.6);
}
.lp--c .auth-card::before,
.lp--c .auth-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--lp-gold);
  pointer-events: none;
}
.lp--c .auth-card::before {
  top: -7px;
  left: -7px;
  border-right: 0;
  border-bottom: 0;
}
.lp--c .auth-card::after {
  bottom: -7px;
  right: -7px;
  border-left: 0;
  border-top: 0;
}

@keyframes lpSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Reduced motion: a still frame ---- */
@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation: none !important;
  }
  .lp-c__sweep { transform: rotate(-30deg); }
  .lp-c__scanbar { display: none; }
  .lp-c__blip { opacity: 0.8; }
}

/* ---- Small screens: card only ---- */
@media (max-width: 900px) {
  .lp__fx,
  .lp__visual,
  .lp--c .lp__visual {
    display: none;
  }
  .lp__layout,
  .lp--master .lp__layout {
    grid-template-columns: 1fr;
    grid-template-areas: "form";
  }
  .lp__form {
    padding: 2rem 1.5rem;
  }
  /* Card only: let a short phone scroll rather than cut the card off. */
  .lp--c,
  .lp--c .lp__layout {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ---- Show/hide password (2026-11-03, views/partials/password-field.ejs) ---- */
.pw-field {
  position: relative;
}
.stacked-form .pw-field input {
  padding-right: 2.9rem;
}
.pw-field__toggle {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  touch-action: manipulation;
}
.pw-field__toggle[hidden] {
  display: none;
}
.pw-field__toggle:hover {
  color: var(--text-primary);
}
.pw-field__toggle:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
}
.pw-field__icon--hide,
.pw-field__toggle[aria-pressed="true"] .pw-field__icon--show {
  display: none;
}
.pw-field__toggle[aria-pressed="true"] .pw-field__icon--hide {
  display: block;
}