/* blz-login.css — Blitz 5 sign-in / create-organization screen (both apps, page 9999).
   ============================================================================
   Markup: login_ui_pkg.render_region (root #blzLogin.blz-native.blz-login).
   Look: the APEX 26 sign-in layout in Redwood-style corporate LIGHT — a split screen
   with a calm warm-neutral hero (#F1EFED + a faint hand-drawn hatch) and a white form
   half: "Welcome", tall inputs with leading icons, a full-width dark primary button,
   teal links and a language row. Loads after blz-native.css + b5-redwood.css (app
   File URLs) and builds on their tokens; only §1 touches Universal Theme selectors,
   neutralising the Login template's centred-card chrome.
   Mode: [data-blz-login-mode="signin|signup"] on the root shows one form (JS flips it).
   Light only (no theme detection). Logical properties only (RTL mirrors).
   Contrast (WCAG AA): ink #161513 on white 18.1:1 · muted #5B5652 on white 7.25:1 and on
   #F1EFED 6.32:1 · white on primary #312D2A 13.64:1 · link #00688C on white 6.25:1.
   Push blz-login.css AND blz-login.min.css (identical bytes).
   ============================================================================ */

/* ---------- 1. Page-template chrome (Login template) ---------- */
body.t-PageBody--login:has(.blz-login){
  margin:0;
  padding:0;
  display:block;
  min-block-size:100vh;
  background:var(--b5-panel);
}
body.t-PageBody--login:has(.blz-login) .t-Login-bg,
body.t-PageBody--login:has(.blz-login) .t-Login-containerHeader,
body.t-PageBody--login:has(.blz-login) .t-Login-containerFooter{ display:none; }
body.t-PageBody--login:has(.blz-login) .t-Login-container,
body.t-PageBody--login:has(.blz-login) .t-Login-containerBody{
  position:static; display:block; inline-size:auto; max-inline-size:none; min-block-size:0;
  margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none;
}

/* ---------- 2. Root + split layout ---------- */
.blz-login{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto 1fr;
  min-block-size:100vh;
  min-block-size:100dvh;
  background:var(--b5-panel);
  color:var(--b5-ink);
  font-size:15px;
  -webkit-tap-highlight-color:transparent;
}
.blz-login *,
.blz-login *::before,
.blz-login *::after{ box-sizing:border-box; }
.blz-login button,
.blz-login input,
.blz-login select{ font-family:inherit; touch-action:manipulation; }
@media (min-width:900px){
  .blz-login{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:none; }
}

/* ---------- 3. Hero (inline-start half; compact banner below 900px) ---------- */
.blz-login-hero{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  color:var(--b5-ink);
  background-color:var(--b5-hover);
  /* faint hand-drawn hatch, like the APEX sign-in texture — neutral, never copper */
  background-image:
    repeating-linear-gradient(118deg, rgba(22,21,19,.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(32deg, rgba(22,21,19,.03) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(74deg, rgba(22,21,19,.02) 0 1px, transparent 1px 21px);
  border-block-end:1px solid var(--b5-hairline);
}
.blz-login-mark{
  flex:none;
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border-radius:8px;
  background:var(--b5-primary);
  color:#FFFFFF;
  font-weight:700;
  font-size:16px;
  letter-spacing:-.02em;
  line-height:1;
}
.blz-login-mark sup{ font-size:10px; vertical-align:super; margin-inline-start:1px; }
.blz-login-hero-copy{ min-inline-size:0; }
.blz-native .blz-login-hero-title{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--b5-ink);
}
.blz-login-hero-product{ margin:0; font-size:.85rem; font-weight:600; color:var(--b5-ink); }
.blz-login-hero-tagline{ display:none; margin:0; color:var(--b5-muted); }
.blz-login-hero-copyright{ display:none; }

@media (min-width:900px){
  .blz-login-hero{
    display:grid;
    grid-template-rows:auto 1fr auto;
    align-items:start;
    gap:0;
    padding:clamp(32px, 4.5vw, 64px);
    border-block-end:0;
    border-inline-end:1px solid var(--b5-hairline);
  }
  .blz-login-mark{ inline-size:52px; block-size:52px; border-radius:10px; font-size:20px; }
  .blz-login-mark sup{ font-size:12px; }
  .blz-login-hero-copy{ align-self:start; margin-block-start:clamp(56px, 13vh, 132px); }
  .blz-native .blz-login-hero-title{ font-size:clamp(3rem, 5.2vw, 4.5rem); font-weight:700; letter-spacing:-.025em; }
  .blz-login-hero-product{
    margin-block-start:10px;
    font-size:clamp(1.15rem, 1.7vw, 1.5rem);
    font-weight:600;
  }
  .blz-login-hero-tagline{
    display:block;
    margin-block-start:10px;
    max-inline-size:32ch;
    font-size:clamp(1.05rem, 1.45vw, 1.3rem);
    line-height:1.45;
  }
  .blz-login-hero-copyright{ display:block; margin:0; font-size:.85rem; color:var(--b5-muted); }
}

/* ---------- 4. Forms half ---------- */
.blz-login-main{
  display:flex;
  flex-direction:column;
  min-inline-size:0;
  padding:12px 16px max(16px, env(safe-area-inset-bottom));
  background:var(--b5-panel);
}
.blz-login-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  inline-size:100%;
  max-inline-size:440px;
  margin-inline:auto;
  padding-block:24px 28px;
}
@media (min-width:900px){ .blz-login-main{ padding:24px clamp(24px, 4vw, 56px); } }
@media (max-width:899.98px){ .blz-login-panel{ flex:none; justify-content:flex-start; padding-block:28px 20px; } }

/* Mode switch: exactly one pane visible. */
.blz-login-pane{ display:none; }
.blz-login[data-blz-login-mode="signin"] [data-blz-login-pane="signin"],
.blz-login[data-blz-login-mode="signup"] [data-blz-login-pane="signup"]{
  display:block;
  animation:blz-login-in var(--blz-dur) var(--blz-ease);
}
@keyframes blz-login-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.blz-native .blz-login-title{ margin:0; font-size:1.75rem; font-weight:700; line-height:1.2; color:var(--b5-ink); }
.blz-login-sub{ margin:6px 0 24px; font-size:1rem; color:var(--b5-muted); }

/* Fields: tall inputs with a leading icon; the label is kept for assistive tech only. */
.blz-login-fields{ display:grid; gap:14px; }
.blz-login-pair{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
@media (min-width:420px){ .blz-login-pair{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.blz-login-field{ min-inline-size:0; }
.blz-login-label{
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.blz-login-control{ position:relative; }
.blz-login-ic{
  position:absolute; inset-inline-start:14px; inset-block-start:50%; transform:translateY(-50%);
  color:var(--b5-muted); pointer-events:none;
}
.blz-native .blz-input.blz-login-input{
  min-block-size:52px;
  padding-block:12px;
  padding-inline:46px 14px;
  border:1px solid var(--b5-hairline-strong);
  border-radius:var(--blz-r-input);
  background:var(--b5-panel);
  color:var(--b5-ink);
  font-size:1rem;
  font-weight:400;
}
.blz-native .blz-input.blz-login-input::placeholder{ color:var(--b5-muted); font-weight:400; }
.blz-native .blz-input.blz-login-input:focus{
  border-color:var(--b5-link); box-shadow:0 0 0 1px var(--b5-link); background:var(--b5-panel); outline:none;
}
.blz-login-field--pw .blz-login-input{ padding-inline-end:52px; }
/* RTL page, LTR email field: the icon sits on the right, so pad the right (its inline-end). */
.blz-native.blz-login[dir="rtl"] .blz-input.blz-login-input[dir="ltr"]{ padding-inline:14px 46px; text-align:right; }
.blz-login-control--select .blz-login-input{ padding-inline-end:40px; }
.blz-login-control--select::after{
  content:"";
  position:absolute;
  inset-inline-end:16px;
  inset-block-start:50%;
  inline-size:8px;
  block-size:8px;
  margin-block-start:-6px;
  border-inline-end:2px solid var(--b5-muted);
  border-block-end:2px solid var(--b5-muted);
  transform:rotate(45deg);
  pointer-events:none;
}
.blz-native .blz-input.blz-login-input[aria-invalid="true"]{ border-color:var(--b5-danger-fill); box-shadow:0 0 0 1px var(--b5-danger-fill); }
.blz-login-hint{ margin:6px 0 0; font-size:.85rem; color:var(--b5-muted); }
.blz-login-reveal{
  position:absolute;
  inset-inline-end:6px;
  inset-block-start:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border:0;
  border-radius:var(--blz-r-control);
  background:none;
  color:var(--b5-muted);
  cursor:pointer;
}
.blz-login-reveal:hover{ background:var(--b5-hover); color:var(--b5-ink); }
.blz-login-reveal-slash{ display:none; }
.blz-login-reveal[aria-pressed="true"] .blz-login-reveal-slash{ display:inline; }

.blz-login-aux{ display:flex; justify-content:flex-end; margin-block-start:10px; }
.blz-login-forgot{ font-size:.9rem; color:var(--b5-muted); cursor:not-allowed; }

/* Error area (aria-live): collapses to nothing while empty. */
.blz-login-error{
  margin:16px 0 0;
  padding:10px 12px;
  border-radius:var(--blz-r-input);
  border-inline-start:3px solid var(--b5-danger-fill);
  background:var(--b5-danger-soft);
  color:var(--b5-danger);
  font-size:.92rem;
  font-weight:600;
  line-height:1.45;
}
.blz-login-error:empty{ margin:0; padding:0; border:0; }

/* Primary action: Redwood call-to-action (dark, white text). */
.blz-native.blz-login .blz-btn.blz-login-submit{
  inline-size:100%;
  min-block-size:50px;
  margin-block-start:20px;
  border-radius:var(--blz-r-control);
  font-size:1.02rem;
  font-weight:600;
  background:var(--b5-primary);
  color:#FFFFFF;
  box-shadow:none;
}
@media (hover:hover){
  .blz-native.blz-login .blz-btn.blz-login-submit:not(:disabled):hover{ background:var(--b5-primary-hover); }
}
.blz-native.blz-login .blz-btn.blz-login-submit.is-busy:disabled{ opacity:.85; cursor:progress; }
.blz-login-spinner{
  display:none;
  inline-size:16px;
  block-size:16px;
  border:2px solid currentColor;
  border-block-start-color:transparent;
  border-radius:50%;
  animation:blz-login-spin .7s linear infinite;
}
.blz-login-submit.is-busy .blz-login-spinner{ display:inline-block; }
@keyframes blz-login-spin{ to{ transform:rotate(360deg); } }

/* Switch between the two forms */
.blz-login-switch{ margin:20px 0 0; text-align:center; font-size:.95rem; color:var(--b5-muted); }
.blz-login-link{
  padding:6px 2px;
  border:0;
  background:none;
  color:var(--b5-link);
  font-size:inherit;
  font-weight:600;
  cursor:pointer;
}
@media (hover:hover){ .blz-login-link:hover{ text-decoration:underline; text-underline-offset:3px; } }

/* Language row (below the forms) */
.blz-login-lang{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  inline-size:100%;
  max-inline-size:440px;
  margin-inline:auto;
  padding-block:4px 8px;
}
.blz-login-lang-sep{ color:var(--b5-muted); }
.blz-login-lang-btn{
  min-block-size:40px;
  padding-inline:10px;
  border:0;
  border-radius:var(--blz-r-control);
  background:none;
  color:var(--b5-link);
  font-size:.92rem;
  font-weight:400;
  cursor:pointer;
}
.blz-login-lang-btn[lang="ar"]{ font-family:"Cairo", "Noto Sans Arabic", var(--blz-font); }
.blz-login-lang-btn[aria-pressed="true"]{ color:var(--b5-ink); font-weight:700; cursor:default; }
@media (hover:hover){ .blz-login-lang-btn[aria-pressed="false"]:hover{ text-decoration:underline; text-underline-offset:3px; } }

/* Focus: the 2px teal ring */
.blz-login button:focus-visible{ outline:2px solid var(--b5-link); outline-offset:2px; }

/* ---------- 5. Mobile floor / desktop readability ---------- */
@media (max-width:760px){
  .blz-login input,
  .blz-login select,
  .blz-login textarea{ font-size:16px; }   /* no iOS zoom-on-focus */
  .blz-login-reveal{ inline-size:44px; block-size:44px; }
  .blz-login-lang-btn{ min-block-size:44px; }
}
@media (min-width:1024px){
  .blz-login-sub{ font-size:1.05rem; }
  .blz-native .blz-login-title{ font-size:2rem; }
}

/* ---------- 6. Bidi isolation ---------- */
.blz-login-hero-title bdi,
.blz-login-hero-copyright bdi{ unicode-bidi:isolate; }
.blz-login-input[type="email"]{ unicode-bidi:isolate; }

/* ---------- 7. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .blz-login-pane{ animation:none !important; }
  .blz-login-spinner{ animation-duration:2.4s; }
  .blz-native.blz-login .blz-btn.blz-login-submit{ transition:none; }
}

/* ── Module picker (signup; login_ui_pkg section 5b) ─────────────────────── */
.blz-login-modules{ margin:0; padding:0; border:0; min-inline-size:0; }
.blz-login-modules-legend{ padding:0; margin-block-end:8px; font-size:.9rem; font-weight:600; color:var(--b5-ink); }
.blz-login-module-list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.blz-login-module{
  display:flex; align-items:center; gap:8px; min-block-size:44px; padding:8px 10px;
  border:1px solid var(--b5-hairline-strong); border-radius:var(--blz-r-control);
  background:var(--b5-panel); color:var(--b5-ink); font-size:14px; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.blz-login-module input{ flex:none; inline-size:18px; block-size:18px; margin:0; accent-color:var(--b5-link); }
.blz-login-module .fa{ flex:none; inline-size:18px; text-align:center; color:var(--b5-muted); }
.blz-login-module:has(input:checked){ border-color:var(--b5-link); background:var(--b5-selected); }
.blz-login-module:has(input:focus-visible){ box-shadow:var(--b5-focus-ring); }
.blz-login-module.is-soon{ cursor:not-allowed; color:var(--b5-muted); background:var(--b5-surface-2); }
.blz-login-module-name{ flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blz-login-module-soon{ flex:none; font-size:11.5px; font-weight:600; color:var(--b5-muted); white-space:nowrap; }
.blz-login-modules[aria-invalid="true"] .blz-login-module:not(.is-soon){ border-color:var(--b5-danger-fill); }
@media (max-width:420px){ .blz-login-module-list{ grid-template-columns:minmax(0, 1fr); } }
@media (min-width:1024px){ .blz-login-module{ font-size:14.5px; } }